From b770834f2976d321133ef4950a37dafdd3fa5467 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 5 Oct 2026 03:57:35 +0300
Subject: [PATCH] =?UTF-8?q?ui:=20the=20rail=20GROUPS=20=E2=80=94=20the=20t?=
 =?UTF-8?q?hinking=20label=20sits=20inside=20the=20rail?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Owner correction (2026-10-05): the collapsed trigger row carried no rail,
so ownership was only visible once expanded. The rail now wraps the whole
block — label (trigger) and, on expand, the italic 50% text — so the
quote reads as one object and WHICH thinking belongs to whom is clear
from the rail alone, collapsed or expanded. Same shape as the user text
('You') row.
---
 components/thinking-block.tsx | 14 ++++++++++----
 tests/render-cards.test.tsx   |  5 +++++
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/thinking-block.tsx b/components/thinking-block.tsx
index 74ec809..3980e27 100644
--- a/components/thinking-block.tsx
+++ b/components/thinking-block.tsx
@@ -31,7 +31,15 @@ export function ThinkingBlock({
 }) {
 	const [open, setOpen] = useState(false); // arrives collapsed, always
 	return (
-		<div data-testid={testId} data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"} className="lh-card-enter my-1 w-full">
+		/* The rail GROUPS (owner correction, 2026-10-05): the label sits
+		   INSIDE the rail — the block reads as one quote, ownership clear
+		   from the rail alone, collapsed or expanded. Same shape as the
+		   user text ("You") row. */
+		<div
+			data-testid={testId}
+			data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
+			className="lh-card-enter my-1 w-full border-l-2 border-muted-foreground/30 pl-3"
+		>
 			<button
 				type="button"
 				data-testid={testId ? `${testId}-trigger` : undefined}
@@ -43,9 +51,7 @@ export function ThinkingBlock({
 				<ChevronDownIcon className={cn("size-4 transition-transform", open ? "rotate-180" : "rotate-0")} />
 			</button>
 			{open && (
-				<div className="mt-1.5 border-l-2 border-muted-foreground/30 pl-3">
-					<span className="lh-prose block whitespace-pre-wrap italic text-foreground/50">{text}</span>
-				</div>
+				<span className="lh-prose mt-1.5 block whitespace-pre-wrap italic text-foreground/50">{text}</span>
 			)}
 		</div>
 	);
diff --git a/tests/render-cards.test.tsx b/tests/render-cards.test.tsx
index 6068c88..2e8e375 100644
--- a/tests/render-cards.test.tsx
+++ b/tests/render-cards.test.tsx
@@ -292,6 +292,11 @@ describe("render smoke tests", () => {
 		// trigger row only — the thinking text is one click away, never loud.
 		assert.ok(html.includes('data-testid="your-thinking-trigger"'), "the trigger row");
 		assert.ok(html.includes('aria-expanded="false"'), "arrives collapsed");
+		// THE RAIL GROUPS (owner correction): the label sits INSIDE the rail —
+		// ownership readable from the rail alone, collapsed or expanded.
+		const railAt = html.indexOf("border-l-2");
+		const trigAt = html.indexOf("your-thinking-trigger");
+		assert.ok(railAt !== -1 && railAt < trigAt, "the rail opens before the label (same quote)");
 		assert.ok(!html.includes("brightness isn&#x27;t distance"), "the text is hidden until expanded");
 		assert.ok(!html.includes("Note:"), "no longer a muted 'Note:' footnote");
 		// The thinking sits ABOVE the verdict's explanation — the dialogue of