feat(web): scripted full-screen product demo mode

[vibegui]

Summary

A public, fully-mocked, full-screen product demo (oya.ai-style) that animates the real Studio chat components from a scripted stream — no backend, MCP transport, or auth. The whole thing is a reusable framework: a demo reads top-to-bottom like a storyboard.

await d.user("Here's my store: https://acme.com — make it faster");
await d.tool(takeScreenshot({ url, image }));
await d.stream(DIAGNOSIS, { instant: true });

Two demos, each on its own URL (light mode)

• /demo/storefront — business user drops in a URL → accurate perf+SEO diagnosis scorecard (real GFM table) → fix plan → parallel fixes → re-audit before/after → deploy.
• /demo/agents — Studio as a web Conductor: the ghost cursor clicks Connect desktop → the real link modal opens → a mocked iTerm window runs `bunx decocms link` then minimizes → modal flips to Connected → work runs across two orgs in parallel (chat + live preview), switching context while the first org keeps building in the background.
• /demo — a chooser linking to both. No cross-scenario auto-advance.

How it works (apps/mesh/src/web/demo/)

• Director — non-React class owning all timing via `@decocms/std` `sleep`; mutates external `Store`s that components read through `useSyncExternalStore`, so no `useEffect` is needed to animate (the one lifecycle effect is documented, same pattern as `live-timer.tsx`).
• Chat seam — `DemoChatStreamProvider` supplies a scripted `ChatStreamContextValue` (via a new exported `DemoChatStreamContext`), so the real `Chat.Messages` → `MessageAssistant` → tool-call renderers paint it identically to a live stream.
• DemoProviders — mock `ProjectContext` + a network-free `QueryClient` (no auth gate).
• Multi-track chats, org switching, iframe previews, ghost cursor, typed terminal — all driven by the same Director primitives.

The autoplay runner is guarded by a per-`stores` singleton with deferred teardown, so the dev runtime's spurious passive-effect re-runs (React Compiler / StrictMode) can't abort + restart a scenario mid-play.

Affected areas

• New: `apps/mesh/src/web/demo/**`, `routes/demo.tsx`, `routes/demo-scenario.tsx`
• Touched: `web/index.tsx` (register `/demo` + `/demo/$scenario` as public routes), `components/chat/chat-context.tsx` (export the chat-stream context for the demo seam — one line)
• No backend/server changes.

Testing

• `bun run check` ✅ · `bun run lint` ✅ · `bun run fmt:check` ✅
• Verified end-to-end with Playwright: both demos run to completion in a stable loop with 0 console errors; zero network requests beyond static assets.
• Screenshots: view live at `/demo/storefront` and `/demo/agents` (dev). UI is fully scripted/animated; static frames don't capture the motion.

🤖 Generated with Claude Code

---

Summary by cubic

Adds a public, full-screen Demo Mode that scripts the real Studio chat UI with no backend or auth. Includes paced beats, captions, smooth transitions, and a CTA end card; each demo plays once and then waits for replay.

• New Features

  • Public routes: /demo chooser and /demo/$scenario (single scenario per URL; play-once then end card with “Get started free” and “Watch again”).
  • Reusable framework: non-React Director + external Stores (useSyncExternalStore) and an autoplay runner hardened against StrictMode re-runs; adds beat() pacing and stage caption() overlays.
  • Chat seam: DemoChatStreamProvider feeds a scripted ChatStreamContextValue to the real chat renderers.
  • Mock providers: ProjectContext + dedicated @tanstack/react-query client (staleTime: Infinity, no network, no auth).
  • Built-ins: multi-track chats, org switching with crossfade, ghost cursor-driven clicks, iframe preview fade-ins, and a typed terminal.
  • Demos:
    • /demo/storefront — paste URL → measured perf/SEO scorecard (real GFM) → approved plan → staggered parallel fixes → re-audit → deploy.
    • /demo/agents — connect desktop flow (bunx decocms link) → live preview → work runs across two orgs in parallel while switching context.

• Refactors

  • Exported DemoChatStreamContext from components/chat/chat-context.tsx to let demos supply a scripted stream (no app behavior change).

^{Written for commit 9c2257e. Summary will update on new commits.}