Skip to content

feat(design): VS Code extension UI mockups (roadmap WS4 stage 1)#103

Open
SamPlvs wants to merge 1 commit into
mainfrom
claude/vscode-design-mockups
Open

feat(design): VS Code extension UI mockups (roadmap WS4 stage 1)#103
SamPlvs wants to merge 1 commit into
mainfrom
claude/vscode-design-mockups

Conversation

@SamPlvs

@SamPlvs SamPlvs commented Jul 12, 2026

Copy link
Copy Markdown
Owner

What

Stage 1 of the VS Code extension workstream from the 2026-07 feature roadmap: nine static, browser-viewable design mockups + a shared tokens.css, simulating the full extension UI in the ZO brand system before any extension code is written. Your sign-off on these screens gates all Stage-2 work (headless-tmux engine, zo-vscode extension).

Also included per the memory protocol: the roadmap itself persisted to memory/zo-platform/roadmaps/2026-07-feature-roadmap.md (plan of record for WS1-WS4), session-040 records, and PRIORS PR-046 (plans referenced from tracked memory must themselves be tracked — the session-028 internal plan file was found to have vanished from ~/.claude/plans).

How to review

Open design/vscode/00-overview.html in a browser — it indexes all eight screens with review guidance. On each page: toggle dark/light (top right), and read the "Implementation notes" block at the foot (each UI region is tied to its data source in the planned .zo/runtime/ contract).

All nine pages depict one canonical moment: the public MNIST demo resuming into phase_4, exp-003 at epoch 6/8, the upcoming gate at test_accuracy 0.9912 (could_pass). A consistency pass reconciled timeline and metric values across all screens and verified both themes render.

Screens

# Screen Shows
01 Workbench Hero composite: sidebar + lead terminal + comms panel + status bar
02 Sidebar Four states: no project / idle / running / ended-reattach
03 Terminal panel Read-only agent streams + composer, 2x2 grid, failure states
04 Comms feed Five event types, filters, expandable decisions
05 Gate approval One-click approve/reject/iterate card, gate-mode control, toast
06 Training dashboard Loss curves (hand-rolled SVG), checkpoints, experiment lineage
07 Start run Form + live command preview + preflight panel
08 Status/palette Status bar states, command palette, notifications, settings

Open question for you

Em-dashes: kept throughout as the design-file house glyph (they mirror design/brand-system.html's list markers and label separators), even though prose copy elsewhere bans them. Say the word and I'll purge the prose instances in a follow-up.

Notes

  • tokens.css carries one external dependency (Google Fonts import) annotated as browser-preview convenience; production bundles Geist/JetBrains Mono/Instrument Serif as woff2 under the webview CSP.
  • No code, tests, agents, commands, or version touched; validate-docs clean.

Nine browser-viewable screens + shared tokens.css simulating the VS Code
workbench in the ZO brand system, depicting one canonical MNIST-demo moment.
Approval artifact gating all Stage-2 extension work. Includes the 2026-07
feature roadmap persisted to platform memory (PR-046) and session-040 records.
@SamPlvs
SamPlvs force-pushed the claude/vscode-design-mockups branch from 9aefcf9 to 3376743 Compare July 12, 2026 13:55
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Jul 12, 2026

Copy link
Copy Markdown

Deploying zero-operators with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3376743
Status: ✅  Deploy successful!
Preview URL: https://2993c702.zero-operators.pages.dev
Branch Preview URL: https://claude-vscode-design-mockups.zero-operators.pages.dev

View logs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant