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:
+1
-1
@@ -605,7 +605,7 @@ export function Chat({
|
|||||||
Plan
|
Plan
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<PhaseChip phase={phases.at(-1) ?? "probe"} busy={busy} />
|
<PhaseChip phase={phases.at(-1) ?? "probe"} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="relative flex min-h-0 flex-1">
|
<div className="relative flex min-h-0 flex-1">
|
||||||
|
|||||||
@@ -1,4 +1,3 @@
|
|||||||
import { BrailleSpinner } from "@/components/braille-spinner";
|
|
||||||
import type { Phase3 } from "@/src/core";
|
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
|
* 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
|
* probe is the start of the transcript and "Planning"/"Teaching" are the two
|
||||||
* visible seams.
|
* 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. */
|
/** Header-chip labels: the phases as the learner thinks of them. */
|
||||||
@@ -26,18 +31,16 @@ const CHIP_LABEL: Record<Phase3, string> = {
|
|||||||
teach: "Teaching",
|
teach: "Teaching",
|
||||||
};
|
};
|
||||||
|
|
||||||
/** The header chip: the phase label, monochrome; while a turn is in
|
/** The header chip: the phase label, monochrome — label-only by design
|
||||||
* flight the old dot slot shows the braille spinner (motion = the honest
|
* (see the component note: the pill's curve suits text, not glyphs). */
|
||||||
* state signal — see BrailleSpinner). */
|
export function PhaseChip({ phase }: { phase: Phase3 }) {
|
||||||
export function PhaseChip({ phase, busy = false }: { phase: Phase3; busy?: boolean }) {
|
|
||||||
return (
|
return (
|
||||||
<span
|
<span
|
||||||
data-testid="phase-chip"
|
data-testid="phase-chip"
|
||||||
data-phase={phase}
|
data-phase={phase}
|
||||||
title={`Session phase: ${CHIP_LABEL[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]}
|
{CHIP_LABEL[phase]}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -30,16 +30,10 @@ describe("PhaseChip (header)", () => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
it("busy: the old dot slot becomes the braille spinner (motion = turn in flight)", () => {
|
it("NEVER shows a working spinner — the pill's curve suits text, not glyph cells (owner, round 2)", () => {
|
||||||
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", () => {
|
|
||||||
const html = renderToStaticMarkup(<PhaseChip phase="teach" />);
|
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");
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user