+ {/* Why: 3 cards in a row tells the "ship several at once" story by
+ composition; the wide preview aspect (~4.9:1) makes a vertical stack
+ read as wasted space. The grid auto-sizes (no flex-1) so the cards
+ don't stretch to the container's bottom edge — keeps headroom under
+ the dot indicators. */}
+
+
+
+
)
}
+type OrchChildAgent = 'claude' | 'codex' | 'opencode-go'
+
+const ORCH_CHILDREN: readonly {
+ key: 'top' | 'mid' | 'bot'
+ position: string
+ label: string
+ agent: OrchChildAgent
+}[] = [
+ // Why: card vertical centers anchor to 18% / 50% / 82% — the same Y
+ // endpoints the dashed SVG paths terminate at — so the connectors land on
+ // each card's center regardless of card height.
+ { key: 'top', position: 'top-[18%] -translate-y-1/2', label: 'PR 1/3', agent: 'claude' },
+ { key: 'mid', position: 'top-1/2 -translate-y-1/2', label: 'PR 2/3', agent: 'codex' },
+ { key: 'bot', position: 'top-[82%] -translate-y-1/2', label: 'PR 3/3', agent: 'opencode-go' }
+]
+
function OrchestrationFrame(): JSX.Element {
+ // Why: a horizontal fan (root → 3 children L→R) reads naturally as
+ // "fans out and ships parallel PRs" at the wide aspect; the previous
+ // top-down tree wasted the horizontal space. SVG paths are sized to a
+ // 600×130 viewBox and stretched non-uniformly, so the dashed lines flex
+ // with the container while the absolutely-positioned cards stay aligned
+ // to viewport-relative anchors (root left, children right column).
return (
-
-
+
+
Agent orchestration
+ {/* Why: viewBox is percent-units (100×100, preserveAspectRatio="none")
+ so endpoints anchor to the same percentage anchors as the cards
+ and the bubbles — root right edge at 34%, child left edge at 64%,
+ child Y centers at 18%/50%/82%. Explicit width/height attrs are
+ required because an SVG with a 1:1 viewBox and only inset-0
+ otherwise picks its intrinsic 1:1 aspect for height. */}
-
- redesign auth flow
-
-
+ {/* Why: parent matches WorkspaceCard composition — spinner + title row,
+ then a Claude agent row underneath — so the user reads it as "a
+ workspace running Claude as the orchestrator," consistent with how
+ workspaces look elsewhere in the app. */}
+
+
+
+
+ redesign auth flow
+
+
+
+
+
+
+ orchestrating 3 agents
+
+
-
- 2 children
-
+ {/* Why: children mirror the parent's WorkspaceCard composition so the
+ fan reads as "coordinator workspace dispatches to 3 child
+ workspaces, each running its own agent." */}
+ {ORCH_CHILDREN.map(({ key, position, label, agent }) => (
+
)
}
function TasksFrame(): JSX.Element {
+ // Why: a left→right pipeline reads as "pick from backlog → workspace
+ // appears" in one glance. The wide aspect lets the backlog and the
+ // resulting workspace card sit side-by-side instead of stacked, which
+ // makes the cause/effect visible in the composition itself.
return (
-
-
- GitHub & Linear tasks
+
+
+ GitHub & Linear tasks
-
-
- #1799
-
-
- Bulk archive in source control
-
-
+
+
+
+
+ GH #1799
+
+ {/* Why: surrounding rows show only the issue number + a skeleton
+ so the user's eye is drawn to the row that has real text — the
+ one the cursor clicks on. */}
+
+
+
+
+ GH #1842
+
+
+ Worktree picker truncates
+
+
+
+ Start
+
+
+
+ {/* Why: cursor + ring live inside the row so they anchor to the
+ pill's right-edge ml-auto, instead of using fixed pixel offsets
+ that drift when the preview is resized. */}
+
+
+
+
+