From 9d8b7b7bf039451126bc49fb6d02c887ff783940 Mon Sep 17 00:00:00 2001
From: bowenliang123 <liang.bowen.123@qq.com>
Date: Sun, 11 Oct 2026 23:44:21 +0800
Subject: [PATCH] feat(client): stretch the Fleet network card to the boards
 column's height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Side by side in the cockpit row, the Agent network card now fills its column
(the browser view's lc-col-browser idiom), so its bottom edge meets the
members-plus-tasks column instead of dangling above it. Wrapped onto its own
line on a narrow pane the stretch is a no-op — the card keeps its natural
height.
---
 src/client/components/fleetView.tsx | 2 +-
 src/client/styles/agentGraph.css    | 8 ++++++++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/client/components/fleetView.tsx b/src/client/components/fleetView.tsx
index 2c3dcdf..7a08197 100644
--- a/src/client/components/fleetView.tsx
+++ b/src/client/components/fleetView.tsx
@@ -180,7 +180,7 @@ export function makeFleetView(
             <div className="lc-cols">
               {forest !== null
                 ? (
-                  <div className="lc-col flex-[2] min-w-[min(420px,100%)]">
+                  <div className="lc-col lc-col-graph flex-[2] min-w-[min(420px,100%)]">
                     <AgentGraph
                       sessionId={sessionId}
                       forest={forest}
diff --git a/src/client/styles/agentGraph.css b/src/client/styles/agentGraph.css
index 92e98e3..36fa23f 100644
--- a/src/client/styles/agentGraph.css
+++ b/src/client/styles/agentGraph.css
@@ -86,6 +86,14 @@
   .lc-agents-split { flex-direction: column; align-items: stretch; }
   .lc-agents-inspector.lc-inspector { flex: none; width: 100%; position: static; max-height: none; }
 }
+
+/* The Fleet tab's cockpit row: the network card stretches to the boards column's full height
+   (members + tasks), so the row reads as one level band — the browser view's lc-col-browser
+   idiom. Wrapped onto its own line (narrow pane) the column holds only this card, so the
+   stretch is a no-op and nothing balloons. Content stays top-aligned: centering would push the
+   canvas below the fold whenever the boards run tall. */
+.lc-col-graph { display: flex; flex-direction: column; }
+.lc-col-graph > .lc-card { flex: 1; }
 .lc-agent-pinned { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary, var(--color-blue-500)) 70%, var(--dsw-alias-border-l2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--dsw-alias-brand-primary, var(--color-blue-500)) 35%, transparent); }
 .lc-agents-chip-team { color: var(--dsw-alias-brand-primary, var(--color-blue-500)); border-color: color-mix(in srgb, var(--dsw-alias-brand-primary, var(--color-blue-500)) 40%, transparent); }
 .lc-inspector[data-pinned] { border-color: color-mix(in srgb, var(--dsw-alias-brand-primary, var(--color-blue-500)) 45%, var(--dsw-alias-border-l2)); }