ui: round three — the tight band, one geometry everywhere
Owner round three on the user rows: (1) the band padding halves, py-2.5 -> py-[5px] — subtle, not tall; same for the messages. (2) The in-card thinking joins the band: identical styling and heights for collapsed thinking in the chat and inside question cards (card-on-card is quiet by design; revert if it reads too light). (3) The left gap MATCHES the new 5px padding, so the rail fills the rest of the 3ch inset - border-l-[calc(3ch-5px)] pl-[5px]: a thick muted rail, total inset still 3ch (the chevron-alignment law survives). The banded prop dies - one geometry, cards included.
This commit is contained in:
@@ -295,13 +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");
|
||||
// IN-CARD = RAIL ONLY (owner round two, 2026-10-07): no band on the
|
||||
// card's own background; geometry alone carries it there.
|
||||
// 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.
|
||||
const yourRow = html.slice(html.indexOf('data-testid="your-thinking"'));
|
||||
assert.ok(!yourRow.slice(0, 400).includes("bg-card"), "no band inside the card");
|
||||
assert.ok(yourRow.slice(0, 400).includes("bg-card"), "the band inside the card as well");
|
||||
// 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-[6px]");
|
||||
const railAt = html.indexOf("border-l-[calc(3ch-5px)]");
|
||||
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't distance"), "the text is hidden until expanded");
|
||||
|
||||
@@ -242,24 +242,17 @@ describe("md-blocks — the restored plain blockquote (owner round, 2026-10-07)"
|
||||
});
|
||||
});
|
||||
|
||||
describe("ThinkingBlock — side-based authorship + ⌘T sync (owner round, 2026-10-07)", () => {
|
||||
it("the banded row is the document band — full-width card color, 6px rail", () => {
|
||||
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)", () => {
|
||||
const html = renderToStaticMarkup(<ThinkingBlock text="banded" defaultOpen />);
|
||||
assert.ok(html.includes("bg-card"), "the card-color band");
|
||||
assert.ok(html.includes("border-l-[6px]"), "the 6px rail");
|
||||
assert.ok(html.includes("pl-[calc(3ch-6px)]"), "natural gap, 3ch total inset preserved");
|
||||
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("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 take the rail but no band", () => {
|
||||
const html = renderToStaticMarkup(<ThinkingBlock text="in card" banded={false} />);
|
||||
assert.ok(!html.includes("bg-card"), "no band on the card's own background");
|
||||
assert.ok(html.includes("border-l-[6px]"), "the rail stays");
|
||||
assert.ok(html.includes("my-3"), "the 12px in-card rhythm");
|
||||
});
|
||||
|
||||
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 />);
|
||||
|
||||
@@ -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-[6px]"), "the 6px rail, left side");
|
||||
assert.ok(trace.includes("border-l-[calc(3ch-5px)]"), "the rail fills 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/);
|
||||
|
||||
Reference in New Issue
Block a user