ui: the rail GROUPS — the thinking label sits inside the rail

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.
This commit is contained in:
amosblomqvist
2026-10-05 03:57:35 +03:00
parent 0bd3236af0
commit b770834f29
2 changed files with 15 additions and 4 deletions
+10 -4
View File
@@ -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>
);
+5
View File
@@ -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