sorokin.oleg.edu/learnharness
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 6 Wiki Activity

ui: round five — no band in cards, the rail narrows again

Browse Source 
Owner verdict on the accent step: way too light - in-card thinking
drops the band entirely (rail only, identical heights). The rail
narrows again: 14px gap inside the 3ch inset (rail calc(3ch-14px),
about 8px) - the wide rail was distracting. Total inset still 3ch,
chevron law intact.
This commit is contained in:
amosblomqvist
2026-10-08 18:45:49 +03:00
parent d30ad42d9c
commit 0f2519a349
6 changed files with 27 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/answered-card.tsx
+2 -3
View File
@@ -144,9 +144,8 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
{(answer.thinking ?? answer.note) && ( {(answer.thinking ?? answer.note) && (
/* The SAME unified row (owner round, 2026-10-05): the quiz answer's /* The SAME unified row (owner round, 2026-10-05): the quiz answer's
thinking is the identical collapsible ThinkingBlock — one thinking is the identical collapsible ThinkingBlock — one
geometry, and since owner round four (2026-10-07) the band steps geometry, but NO band on the card (owner round five, 2026-10-07:
to accent on the card's surface (the same one-step lift the chat the accent lift read too light); rail only, heights identical. */
band gets). Collapsed thinking matches in height everywhere. */
<ThinkingBlock <ThinkingBlock
testId="your-thinking" testId="your-thinking"
label="YOUR THINKING" label="YOUR THINKING"
components/chat.tsx
+1 -1
View File
@@ -1406,7 +1406,7 @@ export function Chat({
inset (the band is the authorship mark against the agent's inset (the band is the authorship mark against the agent's
transparent prose). The "You" label stays — one register transparent prose). The "You" label stays — one register
with the thinking labels. */ with the thinking labels. */
className="my-2 w-full border-l-[calc(3ch-8px)] border-muted-foreground/30 bg-card py-1 pl-[8px] pr-4 font-ui text-xs" className="my-2 w-full border-l-[calc(3ch-14px)] border-muted-foreground/30 bg-card py-1 pl-[14px] pr-4 font-ui text-xs"
> >
{/* The rail GROUPS (owner round 4, 2026-10-05): the YOU heading {/* The rail GROUPS (owner round 4, 2026-10-05): the YOU heading
sits INSIDE the rail, same mono-xs register and same 1ch sits INSIDE the rail, same mono-xs register and same 1ch
components/thinking-block.tsx
+14 -16
View File
@@ -24,14 +24,13 @@ import { cn } from "@/lib/utils";
* band padding is a tight 5px (round three: halved — subtle, not tall), * band padding is a tight 5px (round three: halved — subtle, not tall),
* and the left gap MATCHES it, so the rail fills the rest of the 3ch * and the left gap MATCHES it, so the rail fills the rest of the 3ch
* inset — total inset stays 3ch (the chevron-alignment law with the * inset — total inset stays 3ch (the chevron-alignment law with the
* agent's flush rows survives). Round four tunes the split: rail * agent's flush rows survives). Round five (owner, 2026-10-07): the
* thinner (gap 8px, rail calc(3ch-8px)), band padding down to 4px, and * rail narrows again (gap 14px, rail calc(3ch-14px) — the wide rail
* pr-4 so the expanded text wraps EARLY — the band has a clear right * was distracting); band padding 4px; pr-4 so the expanded text wraps
* edge and text hugging it looks odd. In-card rows (on the card's own * EARLY. In-card rows (on the card's own background) take NO band —
* background) take bg-accent — the same ONE-STEP lift the chat band * the accent step read too light (owner verdict); rail only, identical
* gets (background→card); card→accent (`inCard`). `defaultOpen` marks * heights (`inCard`). `defaultOpen` marks transcript rows, which
* transcript rows, which arrive EXPANDED (clearly conveyed that the * arrive EXPANDED (clearly conveyed that the thinking was sent).
* thinking was sent).
* *
* ⌘T (toggle-user-thinking) sets EVERY row to one state via the module * ⌘T (toggle-user-thinking) sets EVERY row to one state via the module
* store below — one source of truth, no provider tree: rows subscribe on * store below — one source of truth, no provider tree: rows subscribe on
@@ -80,7 +79,7 @@ export function ThinkingBlock({
dataCommit?: boolean; dataCommit?: boolean;
/** Transcript rows arrive expanded (owner, 2026-10-07). */ /** Transcript rows arrive expanded (owner, 2026-10-07). */
defaultOpen?: boolean; defaultOpen?: boolean;
/** On the card's own background: the band steps to accent (one lift). */ /** On the card's own background: no band (the accent read too light). */
inCard?: boolean; inCard?: boolean;
}) { }) {
const [open, setOpen] = useState(() => resolveUserThinkingOpen(defaultOpen)); const [open, setOpen] = useState(() => resolveUserThinkingOpen(defaultOpen));
@@ -105,13 +104,12 @@ export function ThinkingBlock({
data-testid={testId} data-testid={testId}
data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"} data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
className={cn( className={cn(
// Round four (owner, 2026-10-07): total inset still 3ch (the // Round five (owner, 2026-10-07): total inset still 3ch (the
// chevron law); rail thinner (8px gap), padding 4px, and pr-4 — // chevron law); the rail narrows (14px gap), padding 4px, pr-4
// the text wraps EARLY, never hugging the band's right edge. // keeps the text off the band's right edge. In-card rows take
// In-card rows step the band to accent: the same one-step lift // NO band — the accent lift read too light; rail only.
// the chat band gets (background→card → card→accent). "lh-card-enter my-2 w-full border-l-[calc(3ch-14px)] border-muted-foreground/30 py-1 pl-[14px] pr-4 font-ui text-xs",
"lh-card-enter my-2 w-full border-l-[calc(3ch-8px)] border-muted-foreground/30 py-1 pl-[8px] pr-4 font-ui text-xs", inCard ? "" : "bg-card",
inCard ? "bg-accent" : "bg-card",
)} )}
> >
<button <button
tests/render-cards.test.tsx
+4 -5
View File
@@ -295,14 +295,13 @@ describe("render smoke tests", () => {
// trigger row only — the thinking text is one click away, never loud. // 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('data-testid="your-thinking-trigger"'), "the trigger row");
assert.ok(html.includes('aria-expanded="false"'), "arrives collapsed"); assert.ok(html.includes('aria-expanded="false"'), "arrives collapsed");
// ONE GEOMETRY + THE ACCENT STEP (owner round four, 2026-10-07): the // ONE GEOMETRY, NO BAND IN CARDS (owner round five, 2026-10-07): the
// in-card row carries the accent band — the same one-step lift the // accent lift read too light — rail only, heights match everywhere.
// chat band gets; collapsed heights match everywhere.
const yourRow = html.slice(html.indexOf('data-testid="your-thinking"')); const yourRow = html.slice(html.indexOf('data-testid="your-thinking"'));
assert.ok(yourRow.slice(0, 400).includes("bg-accent"), "accent inside the card"); assert.ok(!yourRow.slice(0, 400).includes("bg-card") && !yourRow.slice(0, 400).includes("bg-accent"), "no band inside the card");
// THE RAIL GROUPS (owner correction): the label sits INSIDE the rail — // THE RAIL GROUPS (owner correction): the label sits INSIDE the rail —
// ownership readable from the rail alone, collapsed or expanded. // ownership readable from the rail alone, collapsed or expanded.
const railAt = html.indexOf("border-l-[calc(3ch-8px)]"); const railAt = html.indexOf("border-l-[calc(3ch-14px)]");
const trigAt = html.indexOf("your-thinking-trigger"); const trigAt = html.indexOf("your-thinking-trigger");
assert.ok(railAt !== -1 && railAt < trigAt, "the rail opens before the label (same quote)"); 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("brightness isn&#x27;t distance"), "the text is hidden until expanded");
tests/render-md-blocks.test.tsx
+5 -5
View File
@@ -246,18 +246,18 @@ describe("ThinkingBlock — the document band + ⌘T sync (owner rounds, 2026-10
it("the row is the document band — round four geometry (owner, 2026-10-07)", () => { it("the row is the document band — round four geometry (owner, 2026-10-07)", () => {
const html = renderToStaticMarkup(<ThinkingBlock text="banded" defaultOpen />); const html = renderToStaticMarkup(<ThinkingBlock text="banded" defaultOpen />);
assert.ok(html.includes("bg-card"), "the card-color band"); assert.ok(html.includes("bg-card"), "the card-color band");
assert.ok(html.includes("border-l-[calc(3ch-8px)]"), "thinner rail — 8px gap inside the 3ch inset"); assert.ok(html.includes("border-l-[calc(3ch-14px)]"), "narrow rail — 14px gap inside the 3ch inset");
assert.ok(html.includes("py-1") && html.includes("pl-[8px]"), "4px band padding"); assert.ok(html.includes("py-1") && html.includes("pl-[14px]"), "4px band padding");
assert.ok(html.includes("pr-4"), "the text wraps early — air at the band's right edge"); assert.ok(html.includes("pr-4"), "the text wraps early — air at the band's right edge");
assert.ok(html.includes("w-full"), "full width — no chat side"); assert.ok(html.includes("w-full"), "full width — no chat side");
assert.match(html, /aria-expanded="true"/); assert.match(html, /aria-expanded="true"/);
assert.ok(html.includes("banded"), "text visible on arrival"); assert.ok(html.includes("banded"), "text visible on arrival");
}); });
it("in-card rows step the band to accent — the same one-step lift (owner round four)", () => { it("in-card rows take no band — the accent step read too light (owner round five)", () => {
const html = renderToStaticMarkup(<ThinkingBlock text="in card" inCard />); const html = renderToStaticMarkup(<ThinkingBlock text="in card" inCard />);
assert.ok(html.includes("bg-accent"), "accent on the card's surface"); assert.ok(!html.includes("bg-accent") && !html.includes("bg-card"), "transparent on the card");
assert.ok(!html.includes("bg-card"), "card-color would vanish on the card"); assert.ok(html.includes("border-l-[calc(3ch-14px)]"), "rail only, same geometry");
}); });
it("⌘T sets every row — explicit sets stomp individual state, late mounts honor the last set", () => { it("⌘T sets every row — explicit sets stomp individual state, late mounts honor the last set", () => {
tests/render-practice-surface.test.tsx
+1 -1
View File
@@ -185,7 +185,7 @@ describe("the practice transcript cards", () => {
assert.match(trace, /aria-expanded="true"/); assert.match(trace, /aria-expanded="true"/);
assert.ok(trace.includes("stuck at step two"), "the text is visible on arrival"); assert.ok(trace.includes("stuck at step two"), "the text is visible on arrival");
assert.ok(trace.includes("bg-card"), "the card-color band"); assert.ok(trace.includes("bg-card"), "the card-color band");
assert.ok(trace.includes("border-l-[calc(3ch-8px)]"), "thinner rail inside the 3ch inset"); assert.ok(trace.includes("border-l-[calc(3ch-14px)]"), "narrow rail inside the 3ch inset");
const legacy = renderToStaticMarkup(<ThinkingCard data={{ problemCallId: "c", commit: true, text: "It is 42." }} />); const legacy = renderToStaticMarkup(<ThinkingCard data={{ problemCallId: "c", commit: true, text: "It is 42." }} />);
assert.match(legacy, /YOUR THINKING/); assert.match(legacy, /YOUR THINKING/);
assert.doesNotMatch(legacy, /Your solution/); assert.doesNotMatch(legacy, /Your solution/);