terminal: put Orchestra (left) and Agent flow graph (right) side by side

xl 2-col row (0.85fr / 1.15fr), stacks below xl. Orchestra takes a gridClass
prop → dense 3×2 layout when side-by-side (avoids 6-col squish in the half
column on wide viewports). Agent flow SVG min-width lowered to fit the column.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/viz/AgentWorkflow.tsx

@@ -252,7 +252,7 @@ export function AgentWorkflow({
             preserveAspectRatio="xMidYMid meet"
             role="group"
             aria-label="Agent workflow graph"
-            style={{ display: 'block', width: '100%', minWidth: 760, height: 'auto' }}
+            style={{ display: 'block', width: '100%', minWidth: 600, height: 'auto' }}
           >
             {/* edges */}
             <g fill="none">

src/components/viz/Orchestra.tsx

@@ -144,6 +144,7 @@ export function Orchestra({
   onHover,
   onInspect,
   loading,
+  gridClass = 'grid-cols-2 sm:grid-cols-3 lg:grid-cols-6',
 }: {
   votes: Vote[]
   decision: Direction
@@ -152,6 +153,8 @@ export function Orchestra({
   onHover?: (a: string | null) => void
   onInspect?: (s: string | null) => void
   loading?: boolean
+  /** Tailwind grid-cols classes for the layer columns — override when placed side-by-side. */
+  gridClass?: string
 }) {
   const decCol = dirColor(decision)
 
@@ -164,7 +167,7 @@ export function Orchestra({
         </span>
       </header>
 
-      <div className="grid grid-cols-2 gap-px bg-line-soft sm:grid-cols-3 lg:grid-cols-6">
+      <div className={`grid gap-px bg-line-soft ${gridClass}`}>
         {STATIC.map((layer) => (
           <div key={layer.code} className="flex flex-col gap-1.5 bg-panel px-2.5 py-2.5">
             <div className="flex items-baseline gap-1.5 pb-0.5">

src/pages/Terminal.tsx

@@ -494,11 +494,11 @@ export function Terminal() {
           loading={loading}
         />
 
-        {/* ── orchestra · the full agent pipeline ── */}
-        <Orchestra votes={votes} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} loading={loading} />
-
-        {/* ── agent flow · the pipeline as an interactive workflow graph ── */}
-        <AgentWorkflow data={data} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} updatedAt={updatedAt} live={live} loading={loading} />
+        {/* ── pipeline row · Orchestra (left) ‖ Agent flow graph (right) ── */}
+        <div className="grid grid-cols-1 items-start gap-2.5 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]">
+          <Orchestra votes={votes} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} loading={loading} gridClass="grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-3" />
+          <AgentWorkflow data={data} decision={decision} activeAgent={activeAgent} onSelect={setSelectedAgent} onHover={onAgentHover} onInspect={setInspect} updatedAt={updatedAt} live={live} loading={loading} />
+        </div>
 
         {/* ── workspace ── */}
         <div className="grid items-start gap-2.5 lg:grid-cols-[250px_minmax(0,1fr)_330px]">