Skip to content

Prototype /demo route backed by an MSW-mocked agent#13

Draft
cooper (czxtm) wants to merge 3 commits intomainfrom
claude/add-demo-agent-kUx3R
Draft

Prototype /demo route backed by an MSW-mocked agent#13
cooper (czxtm) wants to merge 3 commits intomainfrom
claude/add-demo-agent-kUx3R

Conversation

@czxtm
Copy link
Copy Markdown
Contributor

Summary

Stands up a /demo route on the web app so visitors to stackpanel.com can play with the studio UI without pairing a real agent. All agent traffic is intercepted in-browser by MSW; nothing leaves the page.

  • apps/web/src/demo/ — fixture data (stack.json shape, Nix config, entity tables), MSW handlers for the high-traffic REST endpoints + Connect-RPC catch-all, lazy setupWorker(...), and a synthesised JWT.
  • apps/web/src/routes/demo.tsx — boots the worker, mounts AgentProvider / ProjectProvider / sidebar / header against demo-agent.stackpanel.local, renders OverviewPanel. SSE provider is intentionally skipped for the prototype (handlers return 204, polling falls back).
  • apps/web/package.json — adds msw to devDependencies.

What's mocked

  • GET /health, GET /api/auth/validate, GET /api/events (204)
  • GET|POST /api/nix/config, GET|POST /api/nix/data?entity=*
  • GET /api/state, POST /api/exec (no-op echo)
  • POST /<service>.<method> Connect-RPC catch-all → {}

onUnhandledRequest: "bypass" keeps everything else passing through, so missing handlers surface as blank panels rather than thrown errors.

Bootstrap

After vp install, run once:

cd apps/web
bunx msw init public/ --save

That writes public/mockServiceWorker.js (commit it). Both dev and production builds load it from /mockServiceWorker.js.

Next step

Generate the handler stubs from packages/proto/ (a buf plugin emitting handlers.gen.ts) so the mock surface stays in sync with the Go agent automatically. Hand-written handlers.ts then becomes overrides on top of the generated defaults.

Test plan

  • vp install, bunx msw init apps/web/public/ --save
  • vp dev, navigate to /demo, confirm sidebar + overview render with demo data
  • Confirm no real network requests to localhost:9876 in DevTools
  • vp check passes

https://claude.ai/code/session_015YfQqBnAi5QZonHdhQHDZG


Generated by Claude Code

Adds a self-contained `apps/web/src/demo/` module: a frozen fixture (state.json
shape, Nix config, entity tables), MSW handlers covering the high-traffic REST
endpoints plus a Connect-RPC catch-all, a fake JWT for AgentProvider, and a
lazy `setupWorker(...)` so the demo bundle only loads on `/demo`.

The route mounts the studio sidebar/header against `demo-agent.stackpanel.local`
with no real network involvement, so visitors to stackpanel.com can poke at the
UI without pairing a real agent. Uses `onUnhandledRequest: "bypass"` so missing
handlers surface as blank panels rather than errors; the README documents the
one-time `bunx msw init public/` bootstrap and sketches the proto-driven mock
generation plan.
Deploy CI runs `bun install --frozen-lockfile`; the previous commit added
msw to apps/web/package.json without updating the lockfile, which failed the
deploy job on PR #13.
Auto-generated by TanStack Router when the dev server picked up the new
`apps/web/src/routes/demo.tsx` route.
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.

2 participants