Minimal-color round 2 (owner): the chip is label-only — spinner out of the top bar

The round-1 experiment put the braille spinner in the chip's old dot
slot; rejected live: the pill's curve and the square braille cell fought
for space (visually squeezed), and the chat surface already shows
in-flight work (thinking shimmer, the dock) — the chip stating the phase
is its whole job. PhaseChip back to a label-only pill (busy prop
removed, single-child gap dropped); work-state lives in exactly one
place: the sidebar row's spinner. Doc note + test pin the decision so
it doesn't get re-tried blind. Gates: typecheck, lint, 469/469, build.
This commit is contained in:
amosblomqvist
2026-09-15 17:10:49 +03:00
parent 326222f53c
commit c9ba4a1b06
3 changed files with 14 additions and 17 deletions
+1 -1
View File
@@ -605,7 +605,7 @@ export function Chat({
Plan
</button>
)}
<PhaseChip phase={phases.at(-1) ?? "probe"} busy={busy} />
<PhaseChip phase={phases.at(-1) ?? "probe"} />
</header>
<div className="relative flex min-h-0 flex-1">
+10 -7
View File
@@ -1,4 +1,3 @@
import { BrailleSpinner } from "@/components/braille-spinner";
import type { Phase3 } from "@/src/core";
/**
@@ -17,6 +16,12 @@ import type { Phase3 } from "@/src/core";
* never a banner. Probe never renders a divider: phases only advance, so
* probe is the start of the transcript and "Planning"/"Teaching" are the two
* visible seams.
*
* Owner, minimal-color round 2: the chip is LABEL-ONLY, deliberately — a
* working-state spinner was tried here and rejected: the pill's curve and
* the square braille cell fought for space, and the chat surface already
* shows in-flight work (thinking shimmer, the dock). The chip states the
* phase; work-state is the sidebar row's spinner.
*/
/** Header-chip labels: the phases as the learner thinks of them. */
@@ -26,18 +31,16 @@ const CHIP_LABEL: Record<Phase3, string> = {
teach: "Teaching",
};
/** The header chip: the phase label, monochrome; while a turn is in
* flight the old dot slot shows the braille spinner (motion = the honest
* state signal — see BrailleSpinner). */
export function PhaseChip({ phase, busy = false }: { phase: Phase3; busy?: boolean }) {
/** The header chip: the phase label, monochrome — label-only by design
* (see the component note: the pill's curve suits text, not glyphs). */
export function PhaseChip({ phase }: { phase: Phase3 }) {
return (
<span
data-testid="phase-chip"
data-phase={phase}
title={`Session phase: ${CHIP_LABEL[phase]}`}
className="flex shrink-0 items-center gap-1.5 rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
className="flex shrink-0 items-center rounded-full border border-border/80 px-2 py-0.5 text-xs font-medium uppercase tracking-wide text-muted-foreground"
>
{busy && <BrailleSpinner className="h-3.5" />}
{CHIP_LABEL[phase]}
</span>
);
+3 -9
View File
@@ -30,16 +30,10 @@ describe("PhaseChip (header)", () => {
}
});
it("busy: the old dot slot becomes the braille spinner (motion = turn in flight)", () => {
const html = renderToStaticMarkup(<PhaseChip phase="teach" busy />);
assert.ok(html.includes('data-testid="braille-spinner"'), "spinner in the chip");
assert.ok(html.includes("Teaching"), "label stays");
assert.ok((html.match(/class="braille-frame"/g) ?? []).length === 10, "all ten frames");
});
it("idle: no spinner — the chip is the label alone", () => {
it("NEVER shows a working spinner — the pill's curve suits text, not glyph cells (owner, round 2)", () => {
const html = renderToStaticMarkup(<PhaseChip phase="teach" />);
assert.ok(!html.includes("braille-spinner"));
assert.ok(!html.includes("braille-spinner"), "the chip is label-only by design");
assert.ok(!html.includes("braille-frame"), "no spinner frames leak in");
});
});