amosblomqvist
53112d2861
THE START BUG (owner report, reproduced live both kinds): new sessions (?prompt flow — practice and teach alike) sat dead until a second message, which then persisted WITHOUT the first. Root cause, proven both directions: the submit POST rode the view's consumeAbort controller; React StrictMode's simulated remount fires Diet A's unmount cleanup (model.stop()) ~8ms in and killed the POST mid-flight; the page's sentInitial guard had already flipped, so it never retried. Teach was equally broken — only unnoticed, because every teach chat in use predates the diet and practice starts are always fresh. Fix: the submit law — POSTs are not abortable by view teardown (they are ~100ms acks since Diet B and cannot starve the pool); after the ack, a consumeAbort identity check guards the stream attach. Pinned with the stop-mid-submit regression test. Live: StrictMode on, practice draft POST 200/67ms, stream attached, message persisted, problem posed. PRACTICE PROMPT (00-base): the opening rule — material arrives two ways, both first-class (picked propositions primary; free-form — topics, course material, files/PDFs — fully supported, never refused); as soon as material exists the reply poses, at most one short line before the problem call, no warm-up interview. Plus the hard law: no problem is ever conversation — every problem through the tool (no thinking field/no reveal/no verdict attaches to prose). GRAPH-CONTEXT PREAMBLE: custom markers flatten to user-role on the wire, so the old "Contextualization — the learner picked…" read like a system broadcast in the learner's voice channel. Now the bracket convention: "[Session context] — picked from the learner's knowledge map…". SIDEBAR: busy rows unify to "Working…" for both kinds (the spinner's default label included); "Practicing…"/"Teacher is working…" retired. Gates: 1490/1490, typecheck, lint. doctrine's stale doc pointer fixed.
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
|
||
/**
|
||
* THE BRAILLE SPINNER (owner, minimal-color round): the one working-state
|
||
* indicator, in the terminal's own glyph language. Pure function + CSS —
|
||
* no JS frame timer, no React re-render per frame; each frame is a tiny
|
||
* <g> whose opacity is compositor-animated, so the cost is below the old
|
||
* breathing dot's (which animated opacity AND transform).
|
||
*
|
||
* Geometry: the classic cli-spinner sequence (⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏, 10 frames,
|
||
* 80ms each — 800ms cycle) as EXACT dot bitmaps in a 2×4 braille cell
|
||
* (dots 1-3 = left column, 4-6 = right). One shared keyframes (globals.css
|
||
* .braille-frame) holds each frame visible for its 10% slice; frames
|
||
* stagger via positive animation-delay, so frame 0 leads from first paint.
|
||
*
|
||
* Static fallback (SSR pre-hydrate, prefers-reduced-motion, print): frame
|
||
* 0 (⠋) shows — a legible glyph, not a blank. Motion is honest here: it
|
||
* exists only while a turn is in flight and vanishes the moment it ends.
|
||
*/
|
||
const FRAMES: ReadonlyArray<{ dots: ReadonlyArray<readonly [number, number]> }> = [
|
||
{ dots: [[1, 1], [1, 3], [3, 1]] },
|
||
{ dots: [[1, 1], [3, 1], [3, 3]] },
|
||
{ dots: [[1, 1], [3, 1], [3, 3], [3, 5]] },
|
||
{ dots: [[3, 1], [3, 3], [3, 5]] },
|
||
{ dots: [[1, 5], [3, 1], [3, 3], [3, 5]] },
|
||
{ dots: [[1, 5], [3, 3], [3, 5]] },
|
||
{ dots: [[1, 3], [1, 5], [3, 5]] },
|
||
{ dots: [[1, 1], [1, 3], [1, 5], [3, 5]] },
|
||
{ dots: [[1, 1], [1, 3], [1, 5]] },
|
||
{ dots: [[1, 1], [1, 3], [1, 5], [3, 1]] },
|
||
];
|
||
|
||
/** The animation constants (mirrors globals.css .braille-frame). */
|
||
export const SPINNER_FRAME_MS = 80;
|
||
export const SPINNER_FRAMES = FRAMES.length;
|
||
|
||
export function BrailleSpinner({
|
||
className,
|
||
label = "Working",
|
||
}: {
|
||
/** Sizing/position classes; height drives the scale (width is the cell's 1:2 aspect). */
|
||
className?: string;
|
||
/** The accessible name of the state this spinner announces. */
|
||
label?: string;
|
||
}) {
|
||
return (
|
||
<svg
|
||
viewBox="0 0 4 8"
|
||
data-testid="braille-spinner"
|
||
role="status"
|
||
aria-label={label}
|
||
className={cn("h-3 w-auto shrink-0 text-foreground", className)}
|
||
>
|
||
{FRAMES.map((frame, k) => (
|
||
<g
|
||
key={k}
|
||
className="braille-frame"
|
||
data-frame={k}
|
||
style={{ animationDelay: `${k * SPINNER_FRAME_MS}ms` }}
|
||
>
|
||
{frame.dots.map(([cx, cy]) => (
|
||
<circle key={`${cx}-${cy}`} cx={cx} cy={cy} r={0.8} className="fill-current" />
|
||
))}
|
||
</g>
|
||
))}
|
||
</svg>
|
||
);
|
||
}
|