From 34eb14f8485cb55a9d261eb2741575e0e3700a7f Mon Sep 17 00:00:00 2001
From: zefiroff <wobbleretard@gmail.com>
Date: Tue, 9 Jun 2026 19:06:54 +0400
Subject: [PATCH] terminal: put Orchestra (left) and Agent flow graph (right)
 side by side
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  2 +-
 src/components/viz/Orchestra.tsx     |  5 ++++-
 src/pages/Terminal.tsx               | 10 +++++-----
 3 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/viz/AgentWorkflow.tsx b/src/components/viz/AgentWorkflow.tsx
index cf34482..14b1cf5 100644
--- a/src/components/viz/AgentWorkflow.tsx
+++ b/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">
diff --git a/src/components/viz/Orchestra.tsx b/src/components/viz/Orchestra.tsx
index bcb6c67..7949bf6 100644
--- a/src/components/viz/Orchestra.tsx
+++ b/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">
diff --git a/src/pages/Terminal.tsx b/src/pages/Terminal.tsx
index 4cfb1e4..e4dd282 100644
--- a/src/pages/Terminal.tsx
+++ b/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]">