Detachable panels and chat session tabs (must-have)

[smorchj]

Core UI requirement: users should be able to detach any panel (tree, graph, editor, chat) and any individual chat session tab into its own floating window. This enables multi-monitor workflows and running several agents in parallel while keeping everything visible.

Use cases

1. Drag the Graph view onto a second monitor while keeping the chat on the primary one
2. Pop out Chat 1 and Chat 3 as separate windows to see both conversations simultaneously
3. Detach the CONTEXT.md editor to keep a reference file visible while editing code in another window
4. Re-attach a floating window by dragging it back into the main layout

Scope

Phase 1 — Panel detachment

• Add a 'pop out' button to each panel header (Tree, Graph, Editor, Chat)
• Open a new browser window showing only that panel
• Panels in detached windows must stay in sync with the main window (shared stores via BroadcastChannel or similar)

Phase 2 — Chat session detachment

• Each session tab inside ChatPanel should have a 'pop out' button
• A detached session opens in its own window at a route like /chat/:sessionId
• Closing a detached window re-attaches the session to the main ChatPanel

Phase 3 — Drag to reorder / detach

• Drag session tabs out of the tab bar to detach them
• Drag floating windows back onto the tab bar to re-attach

Technical notes

• Svelte stores don't cross window boundaries by default. Use BroadcastChannel for state sync, or move state to localStorage with storage event listeners.
• New windows opened via window.open() must be same-origin so they can share localStorage.
• The app already has per-session chat state in packages/ui/src/lib/stores/agents.ts — that needs to be reactive across windows.
• Add a new route packages/ui/src/routes/window/[type]/[id]/+page.svelte that renders a single panel or session.

Files

• packages/ui/src/lib/stores/agents.ts — sync across windows
• packages/ui/src/lib/stores/graph.ts — sync across windows
• packages/ui/src/routes/+page.svelte — per-panel pop-out buttons
• packages/ui/src/lib/components/ChatPanel/ChatPanel.svelte — per-tab pop-out buttons
• New: packages/ui/src/routes/window/ — dedicated window routes
• New: packages/ui/src/lib/stores/window-sync.ts — BroadcastChannel wrapper

Acceptance criteria

• Click pop-out on any panel → opens new window with that panel
• Main window shows an empty placeholder where the detached panel was
• State changes in one window reflect immediately in the other
• Closing the detached window restores it in the main layout
• Works for chat session tabs individually (not just whole ChatPanel)
• No memory leaks when windows are opened/closed repeatedly

[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.