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

ui: the document, all-in — card-color bands and the 6px rail

Browse Source 
Owner round two on user-vs-agent clarity (the chat-comeback was tried
and set aside): we go all in on documents. No chat sides. User messages
and every transcript user-thinking row are full-width CARD-COLOR BANDS
- the band is the authorship mark against the agent's transparent
prose. No rounded corners, no borders besides the rail.

The rail keeps its muted color but is now 6px wide (was 2px): the
artificially wide 3ch inset (the chevron-alignment law with the agent's
flush rows) is re-split - rail eats the air, the rail-to-text gap drops
from 3ch-2px to a natural 3ch-6px, and the total inset stays 3ch so the
chevrons still align. The 'You' label stays on messages - one register
with the thinking labels.

In-card thinking (inside answered cards) takes the rail but NO band:
card-color on card-color would be invisible; geometry alone carries it.
Transcript rows arrive expanded (clearly sent) - the reading lift now
opens on arrival too; the in-card row stays collapsed. Cmd+T still
rules all rows.

Also this round: the answered-card last-child rhythm law
([&>*:last-child]:mb-0) - on ask cards the thinking row's my-3 stacked
with the card's p-4 into a 28px void below (12px above); the card's own
padding is the bottom rhythm when a row ends the card.
This commit is contained in:
amosblomqvist
2026-10-08 18:17:11 +03:00
parent 8cb5e14691
commit 3691e07118
7 changed files with 79 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/answered-card.tsx
+18 -5
View File
@@ -41,9 +41,16 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
ThinkingBlock, instead of an inset inside the answer. Same muted
rail as before; the label is now plain "Your thinking". */}
{answer.readingThinking && (
<ThinkingBlock testId="reading-thinking-block" label="YOUR THINKING" text={answer.readingThinking} />
<ThinkingBlock testId="reading-thinking-block" label="YOUR THINKING" text={answer.readingThinking} defaultOpen />
)}
<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="answered-card">
{/* [&>*:last-child]:mb-0 (owner round, 2026-10-07): on ask cards the
thinking row is the last child — its my-3 stacked with the card's
p-4 into a 28px void below (12px above); the card's own padding is
the bottom rhythm when a row ends the card. */}
<div
className="rounded-xl border bg-card p-4 text-card-foreground [&>*:last-child]:mb-0"
data-testid="answered-card"
>
<div className="mb-1 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
{isQuiz ? (answer.questionType === "predict" ? "Prediction" : "Quiz") : isExplain ? "Explain" : "Question"}
{isQuiz &&
@@ -137,9 +144,15 @@ 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 — it just
happens to sit inside the quiz container. Same placement, same
trigger, same 50%-italic quote block on expand. */
<ThinkingBlock testId="your-thinking" label="YOUR THINKING" text={answer.thinking ?? answer.note ?? ""} />
happens to sit INSIDE the card, so it takes the rail but no band
(owner round two, 2026-10-07: card-color on card-color would be
invisible; geometry alone carries it there). */
<ThinkingBlock
testId="your-thinking"
label="YOUR THINKING"
text={answer.thinking ?? answer.note ?? ""}
banded={false}
/>
)}
{/* px-3→removed: card p-4 + box px-3 double-inset sat the "Why" label deeper