#2807 gatorwalk-factory studio: Design mode

Part of the gatorwalk-factory studio (gatorwalk-factory/ in swamp-extensions). Read gatorwalk-factory/README.md and DESIGN.md first. Design proposal (decisions recorded 2026-09-30): https://claude.ai/artifact/BNCKp7w3G3Q8VdmnCDDWHP. Prototype, with its source under source/ (read it with the Artifact tool): https://claude.ai/artifact/1wAxrpUqZ47FAjE4fU9idD. Both links are private to the maintainer.

Goal

The studio's Design mode: see and understand a factory definition on one screen, with the schema check and the graph analysis re-run in the browser whenever the file changes. The page does not edit (decided 2026-09-30): the agent writes the factory definition, and the page shows the result as soon as the file changes. The prototype shows the look and most of the behaviour; build it properly in gatorwalk-factory/studio/, without the prototype's editing.

Scope

• Engine in the page. Import parseDefinition, analyzeDefinition, designView and friends from extensions/models/_lib by relative path (no copies). The prototype measured 3 ms for swamp-extensions.
• Lane layout, from the prototype's source/src/layout.ts:
  • rows are tracker statuses (projection.status or the enter entry's status, else inherited);
  • columns follow flow order (the longest forward path);
  • exits are ports with gate pips, with a gold mark where a person decides;
  • edges are routed orthogonally through channels, one track each; loops are always drawn;
  • global transitions leave from one ANY STAGE tile.
  • Pure and deterministic, with unit tests.
• Inspector (click to understand): the stage's handoff (mode, calls, skills, injects, bindings, prompts), products, exits with gates and conditions, ticket entries, and the new descriptions.
• Findings: listed with their traces; selecting one walks its trace across the graph.
• Source view: read-only YAML, scoped to one stage or the whole file. Use the yaml package for positions, so schema errors and findings underline their document path. No editor (no CodeMirror).
• Hand off to the agent: every stage, exit, gate and finding has "Copy reference", which copies one plain-text line to paste to the agent: the file, the document path and a readable name (for example factories/team.yaml stages.2.transitions.0 (plan → implement)), plus the code and message for a finding. That is the whole feature: no chat, no request form.
• Live reload: reload on file events, re-run the check and analysis, keep the selection when its path still exists, and mark the stages that changed since you last looked.
• Keyboard: every stage, exit, gate and finding can be reached and selected by keyboard, and Copy reference has a shortcut.
• Theme: swamp-club's HUD (Chakra Petch, Orbitron, JetBrains Mono; #39ff14, cyan, pink, gold for people), with modes shown by colour plus a glyph and label. Meet WCAG 2.2 AA with visible focus rings, stop all motion under prefers-reduced-motion, and keep it usable at phone width.
• UI stack: Preact with signals.

Acceptance

• The skill examples swamp-club-swamp-extensions.yaml, build-swamp-extension.yaml and minimal.yaml render without edge overlaps. Adding an exit from plan to implement in the file on disk (as the agent would) makes the open page show ambiguous-exit and product-missing-on-path and mark plan as changed.
• Everything the mouse can select is reachable by keyboard, and Copy reference on a finding pastes a line that names its file, path and code.

Needs: #2804, #2806. Blocks: Simulate mode, static export.