Jed Wizard Mockups

Two self-contained HTML files showing what the wizard / Mission Control will look like. Open them directly in a browser — no server, no build step.

What's in the consultant view

• 5-step stepper: Client → Package → Credentials → Review → Install
• Package picker (Starter / Standard / Pro) with the SOW prices baked in
• Credentials slots tagged our-managed vs client-supplied (per the credentials decision spec)
• Per-venture inputs with DESIGN.md preset pickers and SOUL.md status
• "Generate runbook" CTA — produces the live runbook for the install session

What's in the client view

• "Good morning, Jed" greeting with overnight summary
• Three CEO cards (Shred · FFF · Floor) with mission, queue depth, week stats
• Approval Queue — the gatekeeper. Every post needs his thumb. Examples include voice-match score, A/B winner data, and a competitor reaction
• Overnight Experiments panel — Karpathy-style winners surfaced with deltas
• Footer reinforces the trust message: "closed environment · zero data leaves your Mac"

Iterating the visuals in Claude Design

These mockups deliberately use two different design systems to make the audiences obvious:

• Consultant view: dark dev-tools aesthetic (charcoal + cyan accents, sans-serif, dense info per screen)
• Client view: warm "Silver Fox" editorial (cream paper, serif headlines, accent colors per CEO)

If Anthony wants to refine the look in Claude Design before the meeting, paste these prompts into claude.ai/design:

Prompt for the consultant view

Refine this admin tool design. Keep the dark theme and the 5-step
stepper. Make the credentials slots feel more "ops dashboard" — think
Linear or Vercel admin, not generic Bootstrap. The two pill colors
(our-managed = cyan, client-supplied = amber) are part of an audit
contract — don't change them. Optimize for a consultant doing
this 10+ times: dense, scannable, no wasted vertical space.
Output: single HTML file, inline CSS, no external dependencies.
[paste the contents of consultant.html as the starting design]

Prompt for the client view

This is a dashboard a 50-something fitness/business owner sees every
morning. He calls himself a "Silver Fox." I want it to feel like an
editorial weekly digest, not a SaaS app — Mast magazine or NYT cooking
section, not Notion. Keep three CEO cards with their accent colors
(Shred=navy, FFF=warm brown, Floor=olive). The Approval Queue is the
hero — make it visually impossible to miss.
Output: single HTML file, inline CSS, serif headlines, generous spacing.
[paste the contents of client.html as the starting design]

If he wants a third variant — Telegram-only mobile

Same Approval Queue and Experiments content as the client dashboard,
but designed for a Telegram in-app webview at iPhone width (390px).
Each item gets one tap to approve. Use system fonts, big tap targets,
high contrast. No sidebar, no filters — just the list.
Output: single HTML file, mobile-first, 100vh layout.

Hand-off notes

• Real implementation lives in ~/openclaw/dashboard/ (Phase 3 of the SOW). These HTML files are the visual contract before the engineer writes Next.js components.
• Pricing in consultant.html matches docs/jed-handoff-email.md — change one, change the other.
• Credentials pills in consultant.html reflect the locked decision in docs/superpowers/specs/2026-04-21-jed-macmini-credentials-decision.md. Don't change the colors or labels without updating the spec.
• The Phase 3 dashboard will reuse our existing src/app/kanban/page.tsx dispatcher pattern for the agent execution — these mockups only show the human-facing surface.