Skip to content

Multi Console

Jump to bottom
Sia edited this page May 31, 2026 · 3 revisions

Multi-Console

Show up to six project consoles at once on a single page.

URL: /multi-console?projects=id1,id2,…. View via left nav "Multi-console" or g m keyboard shortcut.

Why

When working across multiple projects (backend + Android client, two parallel features, monorepo modules) it's tedious to switch tabs. The multi-console renders each selected project's /projects/{id}/console inside an iframe in a CSS grid.

How it works

  • Same-origin iframes — the parent's vibe_session cookie automatically flows in. No additional auth round-trip.
  • Each iframe carries its own WebSocket connection to /ws/projects/{id}/console/logs. The reverse proxy / browser handle the parallel WS without coordination from the server.
  • 1 project → full-width single column. 2 → 50/50. 3-6 → grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); so it flexes to the viewport.
  • Each pane has a small header with the project id + ↗ button to open in a separate tab.

Selecting projects

The page has a checkbox form at the top:

☑ vibe-coder-android          ☐ play-store-app
☑ siamakerlab-website         ☐ another-experiment

Submit → window.location is set to /multi-console?projects=vibe-coder-android,siamakerlab-website.

Project ids in the query string are whitelisted to [a-zA-Z0-9._-]+ — URL injection is blocked.

Limits

Constraint Value Why
Max projects 6 Browser performance (each pane = 1 WS + several DOM trees)
Same-origin only enforced by <iframe> Cross-origin can't auto-share cookie

Caveats

  • WebSocket count — 6 panes × 1 console WS each = 6 simultaneous connections per browser tab. If you put a reverse proxy in front (nginx / Caddy / Cloudflare), check its WS connection limit.
  • Iframe focus — keyboard shortcuts (g p etc.) work in the parent page, not inside the iframe. Click into an iframe to type a prompt there.
  • No reflow on iframe resize — drag the browser to reflow.

What this is NOT

This is multi-project orchestration, not multi-agent. "One project with several Claude sub-agents in parallel" — separate child processes per agent, separate consoles inside one project — is handled by the Multi-Agent Sub-Agent Pool.

You can also use Claude Code's standard sub-agent mechanism by typing "Use the <agent-name> sub-agent to ..." into the console. The console page has an @ Agent dispatch dropdown right next to the prompt template picker — selecting an agent injects that prefix automatically, no manual typing. Agents themselves are managed at Custom Agents.

Clone this wiki locally