usm/mkt-mock-interfaces-v2 [built]

Update the mock interfaces to look like the real USM tooling — browser mock styled as VitePress docs with sidebar/nav/real doc structure, IDE mock with file explorer showing .usm files being created.

Status: built

Why this exists

Make the mocks instantly recognizable as real USM tooling by matching the actual VitePress docs layout and adding a file explorer that shows .usm files appearing as the agent writes them.

Design decisions

reuse-real-doc-structure [accepted]

Decision: Model browser mock content on real generated feature docs

Rationale: The actual VitePress docs render H1 + Usage + How it works + Guarantees. Matching this makes the mock instantly recognizable as the real docs site.

Consequences: Browser scenes use structured content blocks matching real doc layout

file-explorer-sync [accepted]

Decision: IDE file explorer reveals .usm files in sync with agent file-write actions

Rationale: Shows the spec-first workflow visually — file appears in explorer as agent writes it

Consequences: File explorer state tied to chat animation phase

Guarantees

browser-vitepress-look

Browser mock looks like the real VitePress docs site

Acceptance criteria:

• [ ] Left sidebar with grouped nav sections (Getting Started, Features, etc.)
• [ ] Top bar with USM logo, search placeholder, Report Issue link
• [ ] Content area renders real doc structure: H1, Usage code block, How it works numbered steps, Guarantees checkbox criteria

ide-file-explorer

IDE mock has a file explorer sidebar showing .usm files being created

Acceptance criteria:

• [ ] Left file explorer panel with tree of project files
• [ ] .usm files appear with green + badge as the agent writes them
• [ ] Explorer syncs with the agent's file-write actions

Implementation

• Primary: web/src/components/mock-interfaces.tsx
• Test code status: none

See Also

• usm/mkt-mock-interfaces