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

ui: round four — thinner rail, tighter band, the accent step, early wrap

Browse Source 
Owner round four on the user rows: (1) the rail thins - the gap inside
the 3ch inset grows 5px -> 8px, so the rail is calc(3ch-8px); total
inset still 3ch, chevron law intact. (2) The band padding drops again,
5px -> 4px (py-1). (3) The in-card thinking band steps to bg-accent -
the same ONE-STEP lift the chat band gets (background->card on the page,
card->accent on the card); card-color on card-color was invisible, the
accent gives the card rows a visible band with identical heights. (4)
pr-4 on the band rows - the expanded text wraps EARLY instead of hugging
the band's clear right edge.
This commit is contained in:
amosblomqvist
2026-10-08 18:38:07 +03:00
parent 497b29804c
commit d30ad42d9c
6 changed files with 47 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/answered-card.tsx
+10 -5
View File
@@ -143,11 +143,16 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
{(answer.thinking ?? answer.note) && (
/* The SAME unified row (owner round, 2026-10-05): the quiz answer's
thinking is the identical collapsible ThinkingBlock — and since
owner round three (2026-10-07) IDENTICALLY styled, band and all:
collapsed thinking matches in height everywhere, card or chat
(card-on-card is quiet by design; too light → revert). */
<ThinkingBlock testId="your-thinking" label="YOUR THINKING" text={answer.thinking ?? answer.note ?? ""} />
thinking is the identical collapsible ThinkingBlock — one
geometry, and since owner round four (2026-10-07) the band steps
to accent on the card's surface (the same one-step lift the chat
band gets). Collapsed thinking matches in height everywhere. */
<ThinkingBlock
testId="your-thinking"
label="YOUR THINKING"
text={answer.thinking ?? answer.note ?? ""}
inCard
/>
)}
{/* px-3→removed: card p-4 + box px-3 double-inset sat the "Why" label deeper
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
transparent prose). The "You" label stays — one register
with the thinking labels. */
className="my-2 w-full border-l-[calc(3ch-5px)] border-muted-foreground/30 bg-card py-[5px] pl-[5px] pr-2 font-ui text-xs"
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"
>
{/* The rail GROUPS (owner round 4, 2026-10-05): the YOU heading
sits INSIDE the rail, same mono-xs register and same 1ch
components/thinking-block.tsx
+20 -14
View File
@@ -23,13 +23,15 @@ import { cn } from "@/lib/utils";
* along the left edge. ONE geometry everywhere, in cards and out: the
* 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
* inset — border-l-[calc(3ch-5px)] pl-[5px]. Total inset stays 3ch (the
* chevron-alignment law with the agent's flush rows survives); the rail
* grows as the padding shrinks. In-card rows carry the identical
* styling (owner round three: same band, same heights — card-on-card is
* quiet by design; if it reads too light we revert). `defaultOpen`
* marks transcript rows, which arrive EXPANDED (clearly conveyed that
* the thinking was sent).
* inset — total inset stays 3ch (the chevron-alignment law with the
* agent's flush rows survives). Round four tunes the split: rail
* thinner (gap 8px, rail calc(3ch-8px)), band padding down to 4px, and
* pr-4 so the expanded text wraps EARLY — the band has a clear right
* edge and text hugging it looks odd. In-card rows (on the card's own
* background) take bg-accent — the same ONE-STEP lift the chat band
* gets (background→card); card→accent (`inCard`). `defaultOpen` marks
* transcript rows, which arrive EXPANDED (clearly conveyed that the
* thinking was sent).
*
* ⌘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
@@ -69,6 +71,7 @@ export function ThinkingBlock({
testId,
dataCommit,
defaultOpen = false,
inCard = false,
}: {
label?: string;
text: string;
@@ -77,6 +80,8 @@ export function ThinkingBlock({
dataCommit?: boolean;
/** Transcript rows arrive expanded (owner, 2026-10-07). */
defaultOpen?: boolean;
/** On the card's own background: the band steps to accent (one lift). */
inCard?: boolean;
}) {
const [open, setOpen] = useState(() => resolveUserThinkingOpen(defaultOpen));
// ⌘T: an explicit global set overrides every row (once set, rows re-sync).
@@ -100,12 +105,13 @@ export function ThinkingBlock({
data-testid={testId}
data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
className={cn(
// The rail geometry (owner round three, 2026-10-07): total inset
// STAYS 3ch (the chevron-alignment law with the agent's flush
// rows). The band padding is a tight 5px (halved from 10px) and
// the left gap MATCHES it — the rail fills the rest:
// calc(3ch-5px) wide. One geometry everywhere, cards included.
"lh-card-enter my-2 w-full border-l-[calc(3ch-5px)] border-muted-foreground/30 bg-card py-[5px] pl-[5px] font-ui text-xs",
// Round four (owner, 2026-10-07): total inset still 3ch (the
// chevron law); rail thinner (8px gap), padding 4px, and pr-4 —
// the text wraps EARLY, never hugging the band's right edge.
// In-card rows step the band to accent: the same one-step lift
// the chat band gets (background→card → card→accent).
"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-accent" : "bg-card",
)}
>
<button
@@ -113,7 +119,7 @@ export function ThinkingBlock({
data-testid={testId ? `${testId}-trigger` : undefined}
onClick={() => setOpen((v) => !v)}
aria-expanded={open}
className="flex w-full items-center gap-2 pr-2 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
className="flex w-full items-center gap-2 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
>
{label}
<ChevronDownIcon className={cn("size-4 shrink-0 transition-transform", open ? "rotate-180" : "rotate-0")} />
tests/render-cards.test.tsx
+5 -5
View File
@@ -295,14 +295,14 @@ 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");
// IDENTICAL GEOMETRY (owner round three, 2026-10-07): the in-card row
// carries the band too — collapsed thinking matches in height
// everywhere, card or chat.
// ONE GEOMETRY + THE ACCENT STEP (owner round four, 2026-10-07): the
// in-card row carries the accent band — the same one-step lift the
// chat band gets; collapsed heights match everywhere.
const yourRow = html.slice(html.indexOf('data-testid="your-thinking"'));
assert.ok(yourRow.slice(0, 400).includes("bg-card"), "the band inside the card as well");
assert.ok(yourRow.slice(0, 400).includes("bg-accent"), "accent inside the card");
// 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-[calc(3ch-5px)]");
const railAt = html.indexOf("border-l-[calc(3ch-8px)]");
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");
tests/render-md-blocks.test.tsx
+10 -3
View File
@@ -243,16 +243,23 @@ describe("md-blocks — the restored plain blockquote (owner round, 2026-10-07)"
});
describe("ThinkingBlock — the document band + ⌘T sync (owner rounds, 2026-10-07)", () => {
it("the row is the document band — one geometry, cards included (owner round three)", () => {
it("the row is the document band — round four geometry (owner, 2026-10-07)", () => {
const html = renderToStaticMarkup(<ThinkingBlock text="banded" defaultOpen />);
assert.ok(html.includes("bg-card"), "the card-color band");
assert.ok(html.includes("border-l-[calc(3ch-5px)]"), "the rail fills the 3ch inset");
assert.ok(html.includes("py-[5px]") && html.includes("pl-[5px]"), "tight 5px padding, gap matches it");
assert.ok(html.includes("border-l-[calc(3ch-8px)]"), "thinner rail — 8px gap inside the 3ch inset");
assert.ok(html.includes("py-1") && html.includes("pl-[8px]"), "4px band padding");
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.match(html, /aria-expanded="true"/);
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)", () => {
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-card"), "card-color would vanish on the card");
});
it("⌘T sets every row — explicit sets stomp individual state, late mounts honor the last set", () => {
setAllUserThinkingOpen(false);
const collapsed = renderToStaticMarkup(<ThinkingBlock text="synced" defaultOpen />);
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.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("border-l-[calc(3ch-5px)]"), "the rail fills the 3ch inset");
assert.ok(trace.includes("border-l-[calc(3ch-8px)]"), "thinner rail inside the 3ch inset");
const legacy = renderToStaticMarkup(<ThinkingCard data={{ problemCallId: "c", commit: true, text: "It is 42." }} />);
assert.match(legacy, /YOUR THINKING/);
assert.doesNotMatch(legacy, /Your solution/);