Add Vite-style preview pane to the Workstation UI

[smorchj]

Sibling to #62. Where #62 wires Playwright MCP into the Claude CLI subprocesses (so Claude can drive a browser headlessly), this issue is about giving the user a preview pane inside the Workstation — same idea as Claude Desktop's built-in vite preview, where the user can see and click around the running app while Claude is editing it.

What

A new pane in the Workstation that:

1. Detects or launches the project's dev server. If a package.json script like dev / start / serve exists, offer to start it. If a .klonode/launch.json exists, use that. If a server is already running on a known port, attach instead of relaunching.
2. Embeds the dev server URL in an iframe (or a webview component) inside the Workstation, with the same look as the existing TreeView / GraphView / GitHubView panes.
3. Pipes server stdout/stderr to a collapsible log strip below the preview, so the user can see Vite output, build errors, route logs, etc. without alt-tabbing to a terminal.
4. Reload / restart controls in the pane header (manual reload, hard restart, kill server).
5. URL bar so the user can navigate inside the preview without leaving the Workstation.
6. Viewport size selector (mobile / tablet / desktop / custom) for responsive testing — same presets Claude Code's preview_resize uses.

Why this matters

Today, when the user is working on a web app in Klonode they have to:

• Open a terminal, run the dev server
• Open a browser tab to localhost
• Alt-tab between Klonode (to see Claude's chat / TreeView / Editor) and the browser (to see the result)

With this pane, all of that lives inside the workstation alongside the chat panel. The user can watch Claude make a change and see the result immediately in the same window. It also makes Klonode feel like a complete IDE rather than a code editor + chat box that you bring your own browser to.

How this composes with #62

• Wire Playwright MCP into Klonode-spawned Claude CLI sessions #62 gives Claude (the agent) headless browser access via Playwright MCP, so Claude can verify its own work without involving the user.
• This issue gives the user a visible browser pane so they can watch Claude work, click around themselves, and steer.

The two are independent and useful on their own — but together they're the full "self-hosting development" story the original #53 was reaching for.

Files

• New: packages/ui/src/lib/components/PreviewPane/PreviewPane.svelte — the pane component
• New: packages/ui/src/lib/components/PreviewPane/preview-controls.svelte — header (URL bar, reload, viewport selector)
• New: packages/ui/src/lib/components/PreviewPane/preview-logs.svelte — collapsible log strip
• New: packages/ui/src/lib/stores/preview.ts — store for current URL, viewport, server state, logs buffer
• New: packages/ui/src/routes/api/preview/start/+server.ts — POST to spawn the dev server
• New: packages/ui/src/routes/api/preview/stop/+server.ts — POST to kill it
• New: packages/ui/src/routes/api/preview/logs/+server.ts — GET (or SSE) stream of stdout/stderr
• packages/ui/src/routes/+page.svelte — add the new pane to the layout (next to TreeView / GraphView / GitHubView tabs)

Acceptance criteria

• User opens a Klonode project that has a dev npm script → clicks "Start preview" in the new pane → dev server launches and the iframe loads the URL
• User edits a file via Claude → HMR fires → the iframe updates without a full reload
• User clicks "mobile" viewport preset → iframe resizes to 375×812
• Server stderr lines appear in the log strip in real time
• Killing the workstation cleanly stops the preview server (no orphan processes)
• Documented in CONTEXT.md for packages/ui/src/lib/components/PreviewPane/

Risks / open questions

• iframe vs webview: SvelteKit dev mode is an iframe-friendly app, but some cross-origin protections may block the embed. Decide upfront whether to use an iframe (simple, portable) or a Tauri webview (richer but ties Klonode to a desktop runtime). Default: iframe, and accept that some auth-locked apps won't preview without configuration.
• Multi-app projects: Monorepos can have several dev servers. Decide whether the pane shows one URL with a selector, or supports tabs. Probably tabs, but ship single-URL first.
• Port collisions: If the user already has the dev server running on 5173, attach to it instead of starting a new one.

Out of scope

• Headless browser orchestration for Claude (that's Wire Playwright MCP into Klonode-spawned Claude CLI sessions #62)
• A general-purpose web browser inside Klonode — only the user's current project

[smorchj]

Closing as redundant after the contextualizer pivot in #77 and #78. This issue was scoped around the old 'Klonode hosts Claude chat / spawns Claude CLI' model, which has been removed. Klonode is now an observer that rides alongside Claude Code (tails session JSONLs, feeds a live node graph, updates CONTEXT.md). Reopen if you think there's a version of this idea that still applies in the new scope.