From 9fac2a0471b1bf9d5378e880f63732159a83871c Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Wed, 2 Sep 2026 17:09:10 +0300
Subject: [PATCH] Fix merged layout: right sidebar is a full-height sibling;
 plan graph renders

The weave had nested the right sidebar inside the transcript column
(below the header), so the phase chip sat above the panel instead of left
of it and the panel was bounded by the scroller area. The column is now
a true sibling of the middle column under flex h-dvh, per the UI stream's
original design; TreePanel's aside gets flex-1 min-h-0 so it shares the
column with the fleet panel instead of overflowing it. The plan-graph
viewport (ResizeObserver-measured) now has real size, so the mermaid
view draws.

Headless-verified at 1280x800: panel spans 0..800 top-to-bottom in both
modes, chip right edge < panel left edge in both modes, graph SVG = 9
boxes + 8 beziers, console clean.
---
 components/chat.tsx       | 13 +++++++------
 components/tree-panel.tsx |  2 +-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index d50e312..73779cb 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -399,14 +399,15 @@ export function Chat({
 					</ConversationContent>
 					<ConversationScrollButton />
 				</Conversation>
-				{/* Right sidebar: the live sub-agent fleet (when running) above
-				    the plan tree — the fleet panel renders nothing while idle. */}
-				<div className="hidden shrink-0 flex-col xl:flex">
-					<SubAgentsPanel jobs={jobs} />
-					<TreePanel messages={messages} />
-				</div>
 				</div>
 			</div>
+			{/* Right sidebar, a full-height sibling of the middle column: the
+			    live sub-agent fleet (when running) above the plan tree — the
+			    fleet panel renders nothing while idle, so the column is all plan. */}
+			<div className="hidden shrink-0 flex-col xl:flex">
+				<SubAgentsPanel jobs={jobs} />
+				<TreePanel messages={messages} />
+			</div>
 		</div>
 		</JobsContext.Provider>
 		</ChatActionsContext.Provider>
diff --git a/components/tree-panel.tsx b/components/tree-panel.tsx
index fe2ee86..30c374a 100644
--- a/components/tree-panel.tsx
+++ b/components/tree-panel.tsx
@@ -236,7 +236,7 @@ export function TreePanel({
 		<aside
 			data-testid="tree-panel"
 			className={cn(
-				"sidebar-motion hidden shrink-0 overflow-hidden border-l border-border/60 bg-card/30 duration-200 xl:flex",
+				"sidebar-motion hidden min-h-0 flex-1 shrink-0 overflow-hidden border-l border-border/60 bg-card/30 duration-200 xl:flex",
 				PANEL_WIDTH[mode],
 			)}
 		>