Three-zone factory-floor visualization
Problem
When additional reviewers spawn during the review phase, they overlap with the simplifier subagent. The root cause is that the current single-row catwalk layout recomputes station positions when agent counts change, but existing actors are not repositioned. The canvas is also too wide relative to its height, wasting vertical space.
Context
The current "catwalk" visualization arranges all phases in a single horizontal row. Station positions are computed from actual agent counts, so when parallel reviewers appear mid-run, stations to the right shift — but existing actor positions are stale.
The visualization layer is currently tightly coupled: App.tsx hardcodes CatwalkCanvas, which hardcodes CatwalkScene. However, the data model (CanonicalRunStatus) is already visualization-agnostic, and the catwalk's mapper (mapRunToCatwalk) is a clean transformation boundary. Introducing a visualization abstraction layer is lightweight.
Solution
Two parts:
Part 1: Visualization abstraction layer
Decouple visualization selection from App.tsx so multiple visualizations can coexist:
- Extend
useSelectionParams to include a vis param (persisted via history.replaceState, survives back/forward navigation)
- Add a
<select> dropdown next to the demo control icon in the menu bar — always visible, even without a run selected
- Define a shared visualization component contract:
{ status: CanonicalRunStatus }
- Render the selected visualization dynamically in
App.tsx via a registry
- Keep the existing catwalk visualization completely untouched
Part 2: New "factory floor" visualization
Add a new visualization as a sibling of catwalk/ under visualizations/factory-floor/ with its own mapper, layout engine, scene, and types:
┌─────────┐ ┌─────────┐
│Architect │ │ Planner │ upper platform
└────┬─────┘ └────┬────┘
═══════════╪═════════════╪══════════════════╤══════════╤═══════
🤖 Orchestrator ← → → → │ Coder │Summary│ rail
═══════════╪═════════════╪══════════════════╧══════════╧═══════
┌───┴───┐┌────┐┌────┐ ┌──────┐ ┌──────┐
│ R1 ││ R2 ││ R3 │ │ Simp │ │ Holi │ lower platform
└───────┘└────┘└────┘ └──────┘ └──────┘
reviewers (flex) anchored right
Three zones:
- Upper platform (above rail): Architect, Planner — analysis phases
- Rail level: Orchestrator walks horizontally. Coder room at the far right (same horizontal plane). Summary is a destination position past the coder — not an agent (no sprite, no chute)
- Lower platform (below rail): Reviewers (flexible count, fill from left), Simplifier and Holistic (anchored right)
Key design properties:
- 4:3 aspect ratio canvas (800×600 logical resolution as starting point). Excalibur
DisplayMode.FitContainer scales to fill available viewport space. Distances and dimensions should be proportionate; do not try to fill all vertical space.
- Message area at the top of the canvas, above the rail. Reserved space for future status messages (e.g., "Phase 1: Analysis", "Run complete!"). No messages in this implementation — just allocate the space.
- Layout is computed once at scene creation and never changes during a run
- Reviewer zone accommodates any number of reviewers via adaptive spacing
- Simplifier and Holistic are fixed-position, unaffected by reviewer count
- Coder room is a rail-level extension — orchestrator walks in to deliver/receive artifacts
- No chutes for rail-level stations (coder, summary). Only upper-zone and lower-zone stations get chutes connecting them to the rail
- No gates in the factory floor (gates are a catwalk-specific concept)
- Upper/lower agents connect to the rail via chutes (up for upper zone, down for lower zone)
Orchestrator choreography:
- Walks right to coder room → delivers plan, receives code
- Walks left, dispatches artifacts via chutes to lower platform (reviewers)
- Collects review findings, walks right to coder for fixes
- Fix cycle repeats (right ↔ left)
- Final: walks through coder room to summary position → celebrates
Implementation approach: Get the geometry right first — zone boundaries, anchor points, agent placement — using simple visual markers (thin grey lines for zone demarcation). Reuse existing sprite and actor infrastructure from catwalk where possible. Layer on visual polish afterward.
Acceptance criteria
Visualization abstraction
Factory-floor canvas
Factory-floor layout
Quality gates
Three-zone factory-floor visualization
Problem
When additional reviewers spawn during the review phase, they overlap with the simplifier subagent. The root cause is that the current single-row catwalk layout recomputes station positions when agent counts change, but existing actors are not repositioned. The canvas is also too wide relative to its height, wasting vertical space.
Context
The current "catwalk" visualization arranges all phases in a single horizontal row. Station positions are computed from actual agent counts, so when parallel reviewers appear mid-run, stations to the right shift — but existing actor positions are stale.
The visualization layer is currently tightly coupled:
App.tsxhardcodesCatwalkCanvas, which hardcodesCatwalkScene. However, the data model (CanonicalRunStatus) is already visualization-agnostic, and the catwalk's mapper (mapRunToCatwalk) is a clean transformation boundary. Introducing a visualization abstraction layer is lightweight.Solution
Two parts:
Part 1: Visualization abstraction layer
Decouple visualization selection from
App.tsxso multiple visualizations can coexist:useSelectionParamsto include avisparam (persisted viahistory.replaceState, survives back/forward navigation)<select>dropdown next to the demo control icon in the menu bar — always visible, even without a run selected{ status: CanonicalRunStatus }App.tsxvia a registryPart 2: New "factory floor" visualization
Add a new visualization as a sibling of
catwalk/undervisualizations/factory-floor/with its own mapper, layout engine, scene, and types:Three zones:
Key design properties:
DisplayMode.FitContainerscales to fill available viewport space. Distances and dimensions should be proportionate; do not try to fill all vertical space.Orchestrator choreography:
Implementation approach: Get the geometry right first — zone boundaries, anchor points, agent placement — using simple visual markers (thin grey lines for zone demarcation). Reuse existing sprite and actor infrastructure from catwalk where possible. Layer on visual polish afterward.
Acceptance criteria
Visualization abstraction
visparam inuseSelectionParams— persisted in URL, survives back/forward<select>dropdown next to demo control icon — always visibleCanonicalRunStatusdataFactory-floor canvas
FitContainer)Factory-floor layout
Quality gates