ui: the document, all-in — card-color bands and the 6px rail
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
@@ -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
|
||||
|
||||
+7
-6
@@ -1399,12 +1399,13 @@ export function Chat({
|
||||
Rendered WITHOUT the Message wrapper — that is the bubble. */
|
||||
<div
|
||||
data-testid="user-message"
|
||||
/* SIDE-BASED AUTHORSHIP (owner round, 2026-10-07): the
|
||||
document shape blurred user into agent — three left-rail
|
||||
idioms (user text, user thinking, quoted prose) collided.
|
||||
User rows go RIGHT: mirrored rail, ~85% width, text still
|
||||
reading left-to-right (the chat convention). */
|
||||
className="my-1 ml-auto w-[85%] border-r-2 border-muted-foreground/30 pr-[calc(3ch-2px)] font-ui text-xs"
|
||||
/* THE DOCUMENT, ALL-IN (owner round two, 2026-10-07): no
|
||||
chat side — the user message is a full-width card-color
|
||||
BAND with the 6px rail, the same geometry as the thinking
|
||||
rows (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-[6px] border-muted-foreground/30 bg-card py-2.5 pl-[calc(3ch-6px)] pr-2 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
|
||||
|
||||
@@ -293,8 +293,6 @@ export function ThinkingCard({ data }: { data: PracticeThinkingData }) {
|
||||
// The unified row (owner rounds, 2026-10-05): one style, one label —
|
||||
// 50%-italic quote block on expand. Legacy records' commit flag is
|
||||
// deliberately unread (one lane now). A TRANSCRIPT row (owner round,
|
||||
// 2026-10-07): mirrored to the right side, arriving expanded.
|
||||
return (
|
||||
<ThinkingBlock testId="thinking-card" label="YOUR THINKING" text={data.text} mirror defaultOpen />
|
||||
);
|
||||
// 2026-10-07): full-width band + rail, arriving expanded.
|
||||
return <ThinkingBlock testId="thinking-card" label="YOUR THINKING" text={data.text} defaultOpen />;
|
||||
}
|
||||
|
||||
@@ -17,12 +17,17 @@ import { cn } from "@/lib/utils";
|
||||
* The glance-level law (owner): user thinking = rail + 50% italic;
|
||||
* agent thinking = no rail.
|
||||
*
|
||||
* SIDE-BASED AUTHORSHIP (owner round, 2026-10-07): transcript-level rows
|
||||
* go RIGHT — mirrored rail (border-right), block hugging the right edge
|
||||
* at ~85% width, text still reading left-to-right. In-card rows (inside
|
||||
* the answered card, the agent's context) stay left. `mirror` selects
|
||||
* the side; `defaultOpen` marks the transcript rows, which arrive
|
||||
* EXPANDED (owner: clearly conveyed that the thinking was sent).
|
||||
* THE DOCUMENT, ALL-IN (owner round two, 2026-10-07): no chat sides —
|
||||
* transcript-level user rows (this block, the "You" message) are
|
||||
* full-width CARD-COLOR BANDS: the band is the authorship mark against
|
||||
* the agent's transparent prose, and the rail runs along the band's left
|
||||
* edge. The rail keeps its muted color but is now 6px wide, eating the
|
||||
* artificial air of the old 3ch inset — the total inset STAYS 3ch so the
|
||||
* chevron-alignment law with the agent's flush rows survives; the gap
|
||||
* between rail and text drops to natural (3ch - 6px). In-card rows
|
||||
* (inside the answered card, on the card's own background) take the rail
|
||||
* but NO band (`banded: false`). `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
|
||||
@@ -61,7 +66,7 @@ export function ThinkingBlock({
|
||||
text,
|
||||
testId,
|
||||
dataCommit,
|
||||
mirror = false,
|
||||
banded = true,
|
||||
defaultOpen = false,
|
||||
}: {
|
||||
label?: string;
|
||||
@@ -69,8 +74,8 @@ export function ThinkingBlock({
|
||||
testId?: string;
|
||||
/** The practice marker's register flag (commit vs nudge). */
|
||||
dataCommit?: boolean;
|
||||
/** Right-side placement (transcript rows): mirrored rail, right edge. */
|
||||
mirror?: boolean;
|
||||
/** Transcript rows carry the card-color band; in-card rows rail only. */
|
||||
banded?: boolean;
|
||||
/** Transcript rows arrive expanded (owner, 2026-10-07). */
|
||||
defaultOpen?: boolean;
|
||||
}) {
|
||||
@@ -95,15 +100,14 @@ export function ThinkingBlock({
|
||||
<div
|
||||
data-testid={testId}
|
||||
data-commit={dataCommit === undefined ? undefined : dataCommit ? "true" : "false"}
|
||||
data-side={mirror ? "right" : "left"}
|
||||
className={cn(
|
||||
// my-3 (owner, 2026-10-07): the row's own rhythm — 4px hugged the
|
||||
// options on non-graded answered cards; 12px matches the card's
|
||||
// mt-2/mt-3 spacing grammar.
|
||||
"lh-card-enter my-3 font-ui text-xs",
|
||||
mirror
|
||||
? "ml-auto w-[85%] border-r-2 border-muted-foreground/30 pr-[calc(3ch-2px)]"
|
||||
: "w-full border-l-2 border-muted-foreground/30 pl-[calc(3ch-2px)]",
|
||||
// The rail geometry (owner round two, 2026-10-07): total inset
|
||||
// STAYS 3ch (the chevron-alignment law with the agent's flush
|
||||
// rows), re-split — 6px rail (was 2px) + a natural 3ch-6px gap
|
||||
// (was the too-wide 3ch-2px). In-card rows keep the 12px my-3
|
||||
// rhythm; banded rows sit my-2 apart (the band's own air).
|
||||
"lh-card-enter w-full border-l-[6px] border-muted-foreground/30 pl-[calc(3ch-6px)] font-ui text-xs",
|
||||
banded ? "my-2 bg-card py-2.5" : "my-3",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
@@ -111,7 +115,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 font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
|
||||
className="flex w-full items-center gap-2 pr-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")} />
|
||||
|
||||
Reference in New Issue
Block a user