From 3271000ea45ad3b12a8bb71af750663d543b965e Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Wed, 2 Sep 2026 17:32:19 +0300
Subject: [PATCH] Fleet panel gains a collapsed rail view in lockstep with the
 plan
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The right sidebar's mode (rail | list | graph) is now shared state: a
new useTreePanelMode() hook lets every sidebar section collapse and
expand together. With sub-agents running in rail mode the fleet shows a
quiet strip — bot icon (click expands the sidebar) + vertical 'N running'
count — mirroring the plan rail's node-count strip below it. The sidebar
now collapses all the way regardless of running jobs.

End-to-end verified through the real flow (dispatch part in the
transcript + running job record, the 1s jobs poll rendering the panel):
rail column exactly w-10 with both rails stacked and aligned (40px), the
fleet rail's expand click transitions to list mode and persists, fleet +
plan panels equal widths in list (256/256) and graph (384/384) modes,
9-node graph intact, console clean.
---
 components/sub-agents-panel.tsx | 32 ++++++++++++++++++++++++++++++++
 components/tree-panel.tsx       |  8 +++++++-
 2 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/components/sub-agents-panel.tsx b/components/sub-agents-panel.tsx
index ead8bb9..4e644e0 100644
--- a/components/sub-agents-panel.tsx
+++ b/components/sub-agents-panel.tsx
@@ -2,6 +2,7 @@
 
 import { BotIcon, PenToolIcon, PlayIcon, SearchIcon } from "lucide-react";
 import type { JobKind, JobRecord } from "@/src/core";
+import { useTreePanelMode } from "@/components/tree-panel";
 
 /**
  * The sub-agents sidebar section (vision §2.5 live observability): what the
@@ -20,9 +21,40 @@ const KIND_META: Record<JobKind, { label: string; Icon: typeof SearchIcon }> = {
 	visual: { label: "Figure maker", Icon: PenToolIcon },
 };
 
+/** The collapsed fleet: a quiet strip on the sidebar rail — bot icon +
+ * running count, exactly like the plan's node-count rail below it. Click
+ * expands the sidebar back to the full fleet list. */
+function SubAgentsRail({ count, onExpand }: { count: number; onExpand: () => void }) {
+	return (
+		<div
+			data-testid="sub-agents-rail"
+			className="flex w-10 shrink-0 flex-col items-center gap-3 border-b border-l border-border/60 bg-card/30 py-3"
+		>
+			<button
+				type="button"
+				onClick={onExpand}
+				title="Show sub-agents"
+				aria-label="Show sub-agents"
+				className="flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/50 hover:text-foreground"
+			>
+				<BotIcon className="size-4" />
+			</button>
+			<span
+				className="text-[10px] tracking-widest text-muted-foreground/70 [writing-mode:vertical-rl]"
+				title={`${count} sub-agent${count === 1 ? "" : "s"} running`}
+			>
+				{count} running
+			</span>
+		</div>
+	);
+}
+
 export function SubAgentsPanel({ jobs }: { jobs: JobRecord[] }) {
+	const { mode, go } = useTreePanelMode();
 	const running = jobs.filter((j) => j.status === "running");
 	if (running.length === 0) return null;
+	if (mode === "rail")
+		return <SubAgentsRail count={running.length} onExpand={() => go("list")} />;
 	return (
 		<aside
 			data-testid="sub-agents-panel"
diff --git a/components/tree-panel.tsx b/components/tree-panel.tsx
index 30c374a..393bc1a 100644
--- a/components/tree-panel.tsx
+++ b/components/tree-panel.tsx
@@ -179,6 +179,12 @@ const TreePanelModeContext = createContext<{ mode: PanelMode; go: (next: PanelMo
 	go: () => {},
 });
 
+/** The right sidebar's shared mode — every section of the sidebar (plan,
+ * sub-agents) collapses and expands in lockstep through this hook. */
+export function useTreePanelMode() {
+	return useContext(TreePanelModeContext);
+}
+
 /** Root-layout persistence of the panel mode (rail | list | graph). */
 export function TreePanelModeProvider({ children }: { children: React.ReactNode }) {
 	// SSR default: "list" — server and client first-render agree (no
@@ -220,7 +226,7 @@ export function TreePanel({
 	messages: readonly TreePanelMessage[];
 }) {
 	const tree = useMemo(() => latestTree(messages), [messages]);
-	const { mode, go } = useContext(TreePanelModeContext);
+	const { mode, go } = useTreePanelMode();
 
 	// Empty state: no tree yet → the panel does not render at all. It appears
 	// the moment plan_init's output lands and updates live from there.