From ad5778484dc12ab2bbca8902aa19941a7e36c39f Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 14 Sep 2026 09:56:45 +0300
Subject: [PATCH] =?UTF-8?q?Chat=20top=20bar=20round=204=20(owner):=20plain?=
 =?UTF-8?q?=20block=20=E2=80=94=20revert=20all=20top-gradient=20rounds?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rounds 1–3 chased a soft fade under the title; the owner called the
final overlay look wrong too. Back to the simple picture: the top bar
is its own block — in flow above the scroller, plain page background,
no gradient, no border, no tone change. It reads as a block because
the transcript starts below it. (Also reverts round 3's overlay
header + pt-14 entirely.)
---
 components/chat.tsx | 32 ++++++++++++--------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index cd561e3..ccbc7e4 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -477,31 +477,23 @@ export function Chat({
 		    dock overlays the column bottom (outside the scroller); a spacer in
 		    the transcript reserves its height. */}
 		<div className="flex h-dvh">
-			<div className="relative flex min-w-0 flex-1 flex-col">
-				{/* The header OVERLAYS the scroller (owner, top-fade round 3): the
-				    transcript runs under the title to the very top, easing beneath
-				    it through the header's own wash — no hard cut below the title.
-				    The wash peaks at 60% at the very top (behind the title) and
-				    ramps down to transparent just under it. h-10, not py-2: the
-				    toggle renders only while the sidebar is CLOSED. */}
-				<header className="pointer-events-none absolute inset-x-0 top-0 z-20">
-					<div
-						aria-hidden
-						className="absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-background/60 to-transparent"
-					/>
-					<div className="relative flex h-10 items-center gap-3 px-3">
-						<div className="pointer-events-auto">
-							<SidebarToggle />
-						</div>
-						<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
-						<PhaseChip phase={phases.at(-1) ?? "probe"} />
-					</div>
+			<div className="flex min-w-0 flex-1 flex-col">
+				{/* The top bar is its own block (owner, top-fade round 4): in flow
+				    above the scroller on the plain page background — no gradient, no
+				    border; it reads as a block simply because the transcript starts
+				    below it. h-10, not py-2: the toggle (a size-9 icon button)
+				    renders only while the sidebar is CLOSED — an auto-height row
+				    would collapse when it disappears and slide the title + chip up. */}
+				<header className="flex h-10 items-center gap-3 px-3">
+					<SidebarToggle />
+					<div className="min-w-0 flex-1 truncate font-title text-2xl tracking-tight">{title}</div>
+					<PhaseChip phase={phases.at(-1) ?? "probe"} />
 				</header>
 
 				<div className="relative flex min-h-0 flex-1">
 				<Conversation className="h-full min-w-0 flex-1" initial="instant">
 					<ConversationContent className="min-h-full gap-0 p-0">
-						<div className={`${COLUMN} flex flex-1 flex-col gap-4 pt-14`}>
+						<div className={`${COLUMN} flex flex-1 flex-col gap-4 pt-4`}>
 							{messages.length === 0 && !busy && (
 								<ConversationEmptyState
 									title="New session"