From a5d3c73e7a3f3dbd8085112c565682a002d16b63 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Sun, 13 Sep 2026 00:46:31 +0300
Subject: [PATCH] Wave-5 refinement round 1 (owner's five fixes)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- New session: literal '+' glyph removed — one lucide PlusIcon (the
  duplicated glyph was PlusIcon + text '+').
- Top bar: a small pointer-events-none gradient under the header eases
  the scroller into the bar exactly like the dock's bottom fade.
- Option subtext (opt.description): .lh-prose — Source Sans 3; 'I don't
  know' copy stays JetBrains Mono.
- 'I don't know': now layout-matched with a radio circle; dashed border
  preserved as the deliberate non-answer.
- Separator spacing: options group pb-1 → pb-2 so the gap before the
  divider equals the 8px inter-option gap.
---
 components/chat.tsx          |  8 +++++++-
 components/question-dock.tsx | 26 +++++++++++++++++++++-----
 components/sidebar.tsx       |  2 +-
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/components/chat.tsx b/components/chat.tsx
index bd96478..71495e6 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -464,10 +464,16 @@ export function Chat({
 				{/* 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">
+				<header className="relative 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"} />
+					{/* Soft top fade (owner): the scroller edge under the header eases
+					    in exactly like the dock gradient at the bottom. */}
+					<div
+						aria-hidden
+						className="pointer-events-none absolute inset-x-0 top-full z-10 h-5 bg-gradient-to-b from-background to-transparent"
+					/>
 				</header>
 
 				<div className="relative flex min-h-0 flex-1">
diff --git a/components/question-dock.tsx b/components/question-dock.tsx
index bb7c3e7..65ef187 100644
--- a/components/question-dock.tsx
+++ b/components/question-dock.tsx
@@ -284,7 +284,7 @@ function QuestionDockForm({
 				)}
 
 				{qd.mode !== "text" && (
-					<div className="flex flex-col gap-2 pb-1" role={qd.mode === "multi-select" ? "group" : "radiogroup"}>
+					<div className="flex flex-col gap-2 pb-2" role={qd.mode === "multi-select" ? "group" : "radiogroup"}>
 						{qd.options.map((opt, i) => {
 							const isSel = sel.selected.has(i);
 							return (
@@ -314,7 +314,11 @@ function QuestionDockForm({
 									</span>
 									<span>
 										<MessageResponse>{opt.label}</MessageResponse>
-										{opt.description && <span className="block text-xs text-muted-foreground">{opt.description}</span>}
+										{opt.description && (
+											// Option subtext renders in Source Sans 3 (owner's mockup);
+											// the "I don't know" copy stays JetBrains Mono.
+											<span className="lh-prose block text-xs text-muted-foreground">{opt.description}</span>
+										)}
 									</span>
 								</button>
 							);
@@ -328,11 +332,23 @@ function QuestionDockForm({
 								}
 								aria-pressed={sel.dontKnow}
 								className={cn(
-									"rounded-lg border border-dashed px-3 py-2 text-left text-sm text-muted-foreground transition-colors",
-									sel.dontKnow && "border-primary text-foreground",
+									// Option-row layout + radio circle (owner); the dashed
+									// outline stays — this is the deliberate non-answer.
+									"flex items-start gap-3 rounded-lg border border-dashed px-3 py-2 text-left text-sm transition-colors",
+									sel.dontKnow ? "border-primary text-foreground" : "text-muted-foreground",
 								)}
 							>
-								I don't know
+								<span
+									className={cn(
+										"mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
+										sel.dontKnow
+											? "border-primary bg-primary text-primary-foreground"
+											: "border-muted-foreground/40",
+									)}
+								>
+									{sel.dontKnow && <span className="size-1.5 rounded-full bg-current" />}
+								</span>
+								<span>I don't know</span>
 							</button>
 						)}
 
diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index a527ff3..d2913d5 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -248,7 +248,7 @@ function SessionsSidebar() {
 					className="mx-3 mb-1 flex items-center gap-1.5 rounded-md px-2 py-1.5 text-xs uppercase tracking-wider text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
 				>
 					<PlusIcon className="size-3" />
-					+ New session
+					New session
 					<span className="sr-only">create a new session</span>
 				</button>