thursday-agent 0.8.0 → 0.9.0

package/features/routine/routine.schema.ts

@@ -15,11 +15,39 @@ const TimeSchema = z
   .string()
   .regex(/^([01]\d|2[0-3]):[0-5]\d$/, "A time is HH:MM, 00:00 to 23:59");
 
+/** "YYYY-MM-DD HH:MM" in this machine's own time, read as a date. */
+export function momentOf(at: string): Date {
+  const [day, time] = at.split(" ");
+  const [year, month, date] = day.split("-").map(Number);
+  const [hours, minutes] = time.split(":").map(Number);
+  return new Date(year, month - 1, date, hours, minutes);
+}
+
+const MOMENT = /^\d{4}-\d\d-\d\d ([01]\d|2[0-3]):[0-5]\d$/;
+
+const MomentSchema = z
+  .string()
+  .regex(MOMENT, 'A moment is "YYYY-MM-DD HH:MM"')
+  // a month or a day the calendar does not have rolls over into another when read
+  .refine((at) => {
+    if (!MOMENT.test(at)) return true;
+    const read = momentOf(at);
+    return (
+      read.getMonth() === Number(at.slice(5, 7)) - 1 &&
+      read.getDate() === Number(at.slice(8, 10))
+    );
+  }, "There is no such day");
+
 /**
- * When it starts, in this machine's own time. Two kinds and no cron string: a model fills
- * either without a syntax to get wrong, and the screen draws either without parsing.
+ * When it starts, in this machine's own time. Three kinds and no cron string: a model fills
+ * any of them without a syntax to get wrong, and the screen draws each without parsing.
+ * One that starts `once` switches itself off as it starts (routine.query claimRoutine).
  */
 export const RoutineScheduleSchema = z.discriminatedUnion("kind", [
+  z.object({
+    kind: z.literal("once"),
+    at: MomentSchema,
+  }),
   z.object({
     kind: z.literal("daily"),
     time: TimeSchema,
@@ -66,9 +94,31 @@ const RoutineSchema = RoutineInputSchema.extend({
 export type Routine = z.infer<typeof RoutineSchema>;
 
 const DAY_NAMES = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const MONTH_NAMES = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 
-/** "Daily 09:00 · Mon–Fri", "Mon 10:00", "Every 6 hours": the one spelling, on screen and to a model. */
+/**
+ * "Once · Sep 21 20:00", "Daily 09:00 · Mon–Fri", "Mon 10:00", "Every 6 hours": the one
+ * spelling, on screen and to a model.
+ */
 export function scheduleText(schedule: RoutineSchedule): string {
+  if (schedule.kind === "once") {
+    const [day, time] = schedule.at.split(" ");
+    const [, month, date] = day.split("-").map(Number);
+    return `Once · ${MONTH_NAMES[month - 1]} ${date} ${time}`;
+  }
   if (schedule.kind === "every")
     return schedule.hours === 1
       ? "Every hour"
@@ -86,9 +136,10 @@ export function scheduleText(schedule: RoutineSchedule): string {
 /**
  * The first start after `from`. A daily one is the next listed day at its time; an `every`
  * one counts from `from` itself, so a machine that slept through several starts owes one,
- * not all of them.
+ * not all of them. A `once` one has its moment, passed or not.
  */
 export function nextRun(schedule: RoutineSchedule, from: Date): Date {
+  if (schedule.kind === "once") return momentOf(schedule.at);
   if (schedule.kind === "every")
     return new Date(from.getTime() + schedule.hours * 3_600_000);
   const [hours, minutes] = schedule.time.split(":").map(Number);

package/features/settings/components/install-app.tsx

@@ -139,13 +139,10 @@ export function InstallButton() {
       onClick={() => void install()}
       className="group/install flex w-full items-start gap-2.5 rounded-xl px-3 py-2.5 text-left outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50"
     >
-      <span className="mt-0.5 grid size-7 shrink-0 place-items-center rounded-lg bg-background ring-1 ring-border">
-        <AppWindowMac className="size-3.5" />
-      </span>
       <span className="min-w-0 flex-1">
         <span className="flex items-center gap-1 text-sm font-medium">
           Install app
-          <ArrowUpRight className="size-3.5 text-muted-foreground transition-transform group-hover/install:translate-x-px group-hover/install:-translate-y-px" />
+          <ArrowUpRight className="ml-auto size-3.5 text-muted-foreground transition-transform group-hover/install:translate-x-px group-hover/install:-translate-y-px" />
         </span>
         <span className="block text-xs leading-snug text-muted-foreground">
           Its own window, apart from your tabs

package/features/settings/components/setting-ui.tsx

@@ -457,7 +457,7 @@ export function SettingChoiceRows<T extends string>({
                 </span>
               )}
             </span>
-            {picked && <Check className="size-4 shrink-0 text-brand" />}
+            {picked && <Check className="size-4 shrink-0" />}
           </button>
         );
       })}

package/features/skills/skills.discover.ts

@@ -5,7 +5,7 @@ import { botFolder, WORKSPACE } from "@/features/workspace/workspace";
 import { logger } from "@/lib/logger";
 import type { Sandbox } from "@/lib/sandbox";
 import { errorToString } from "@/lib/utils";
-import { parseFrontmatter } from "./skills.query";
+import { parseFrontmatter, runsHere } from "./skills.query";
 import type { SkillFrontmatter } from "./skills.schema";
 
 /** Skills for the prompt, every skill at once, without failing the session over one bad file. */
@@ -89,6 +89,7 @@ export async function discoverSkills(
         continue;
       }
 
+      if (!runsHere(frontmatter)) continue;
       if (seenNames.has(frontmatter.name)) continue;
       seenNames.add(frontmatter.name);
 

package/features/skills/skills.query.ts

@@ -69,6 +69,10 @@ export function splitFrontmatter(content: string): {
   return { head: match[1] ?? null, body: rest.trim(), rest, fence: match[0] };
 }
 
+/** Whether a skill runs on this machine's OS; the list and the prompt both leave out one that does not. */
+export const runsHere = ({ platforms }: SkillFrontmatter) =>
+  !platforms || platforms.includes(process.platform);
+
 export function parseFrontmatter(content: string): SkillFrontmatter {
   const { head } = splitFrontmatter(content);
   if (!head) {
@@ -172,7 +176,7 @@ export async function findAllSkills(): Promise<SkillSummary[]> {
     }
     for (const dir of names) {
       const summary = await readSummary(source, dir);
-      if (summary) out.push(summary);
+      if (summary && runsHere(summary)) out.push(summary);
     }
   }
   return out;

package/features/skills/skills.schema.ts

@@ -22,6 +22,8 @@ export const SkillFrontmatterSchema = z.object({
   description: z.string().trim().min(1, "Description is required"),
   /** true hides the skill from the list and the prompt; absent means enabled. */
   disabled: z.boolean().optional(),
+  /** `process.platform` values it runs on (`darwin`); elsewhere it is not listed at all. Absent means everywhere. */
+  platforms: z.array(z.string()).optional(),
 });
 export type SkillFrontmatter = z.infer<typeof SkillFrontmatterSchema>;
 

package/features/thursday/components/ascii-orb.tsx

@@ -226,6 +226,16 @@ const WORD_FADE_IN = 0.3;
 const WORD_HOLD = 3.4;
 const WORD_STEP_OUT = 0.08;
 const WORD_FADE_OUT = 0.35;
+/**
+ * A word arrives and leaves rough rather than as clean strokes: each cell of a letter keeps
+ * its own time within SCATTER (s), a cell still coming in or going out crackles on and off
+ * STATIC_RATE times a second, and what goes out drops to RESIDUE and lingers as an
+ * afterimage for LINGER (s) before it is gone.
+ */
+const WORD_SCATTER = 0.45;
+const WORD_STATIC_RATE = 14;
+const WORD_RESIDUE = 0.2;
+const WORD_LINGER = 0.9;
 /** A word given this soon after she mounts came with her (ms). */
 const BORN_WITH_MS = 600;
 /**
@@ -517,22 +527,33 @@ function onTwoLines(text: string): number[][] | null {
   ];
 }
 
-/** A word's letters `age` seconds into its showing: each lights in turn, holds, and goes out in turn. */
+/**
+ * A word's letters `age` seconds into its showing: each lights in turn, holds, and goes out in
+ * turn — every cell on its own beat, crackling while it changes, and leaving an afterimage.
+ */
 function wordValue(cell: Cell, t: number, age: number, hold: number) {
   if (cell.word < 0) return 0;
-  const jitter = cell.seed * 0.08;
+  const jitter = cell.seed * WORD_SCATTER;
   const appear = smoothstep(
     0,
     1,
     (age - cell.word * WORD_STEP_IN - jitter) / WORD_FADE_IN,
   );
-  const vanish = smoothstep(
-    0,
-    1,
-    (age - hold - cell.word * WORD_STEP_OUT - jitter) / WORD_FADE_OUT,
-  );
+  const out = age - hold - cell.word * WORD_STEP_OUT - jitter;
+  const vanish = smoothstep(0, 1, out / WORD_FADE_OUT);
+  // what the letter drops to, then the afterimage fading out of that
+  const residue =
+    WORD_RESIDUE * (1 - smoothstep(0, 1, (out - WORD_FADE_OUT) / WORD_LINGER));
+  const lit = Math.max(appear - vanish, appear > 0.5 ? residue * vanish : 0);
+  const changing = (appear > 0 && appear < 1) || (vanish > 0 && residue > 0);
+  const crackle =
+    changing &&
+    hash(Math.floor(t * WORD_STATIC_RATE) + cell.seed * 97, cell.grain * 31) <
+      0.35
+      ? 0.25
+      : 1;
   const flick = 0.86 + Math.sin(t * 3.5 + cell.seed * 6) * 0.14;
-  return Math.max(0, appear - vanish) * flick;
+  return lit * crackle * flick;
 }
 
 /**
@@ -753,11 +774,14 @@ export function AsciiOrb({
   // lighting in a moment after an empty face read as a late start
   useEffect(() => {
     if (!word) return;
+    // A word is said as it comes. One handed back later — the goodbye still held when a
+    // ring's CALL steps aside — would already be over, so it is not said again
+    if (Date.now() - word.at > (word.hold ?? WORD_HOLD) * 1000) return;
     const { cw, ch } = pitchRef.current;
     const now = performance.now();
     const lit =
       now - bornAt.current < BORN_WITH_MS
-        ? word.text.length * WORD_STEP_IN + WORD_FADE_IN + 0.08
+        ? word.text.length * WORD_STEP_IN + WORD_FADE_IN + WORD_SCATTER
         : 0;
     wordRef.current = {
       text: word.text,
@@ -857,7 +881,12 @@ export function AsciiOrb({
       const wording =
         shown !== null &&
         cur.mode !== "error" &&
-        wordAge < shown.hold + shown.letters * WORD_STEP_OUT + WORD_FADE_OUT;
+        wordAge <
+          shown.hold +
+            shown.letters * WORD_STEP_OUT +
+            WORD_SCATTER +
+            WORD_FADE_OUT +
+            WORD_LINGER;
       const want: Field = wording
         ? {
             scale: 0,

package/features/thursday/components/connect-wave.tsx

@@ -0,0 +1,284 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import {
+  ALPHA_TOP,
+  CHAR_RATE,
+  EMOJI_CHAR_RATE,
+  EMOJI_MIN_LEVEL,
+  EMOJI_POOL,
+  EMOJI_RATIO,
+  hash,
+  RAMP,
+  smoothstep,
+} from "../ascii.const";
+import { useCallHeld } from "../call-signal";
+import type { AsciiCharset } from "../face.const";
+import type { CallStatus } from "../thursday.schema";
+
+/** Grid step, px: her face's own. */
+const CELL = 11;
+/** Glyph size, px: under the step, so the wave reads as specks with air between them. */
+const GLYPH = 9;
+/** Share of cells that carry a glyph at all: fewer, not larger, keeps the wave light to draw. */
+const KEEP = 0.4;
+/** How far the front travels per second, as a share of the way to the farthest corner. */
+const SPEED = 0.95;
+/** Width of the lit band behind the front, in the same units. */
+const CREST = 0.2;
+/** Share of cells that keep a crumb for a moment after the band has passed. */
+const CRUMBS = 0.06;
+/** Seconds the longest crumb outlives the band. */
+const CRUMB_S = 0.5;
+/** The front starts this far out, so the wave leaves her face rather than covering it. */
+const HOLE = 0.1;
+/** Past the farthest corner, the band and the longest crumb, the wave is over. */
+const DONE_S = (1.2 + CREST) / SPEED + CRUMB_S;
+
+type Cell = {
+  x: number;
+  y: number;
+  dd: number;
+  seed: number;
+  grain: number;
+  speck: number;
+  roll: number;
+};
+
+const FONT = `700 ${GLYPH}px ui-monospace, SFMono-Regular, Menlo, monospace`;
+
+/** An emoji's square on the sheet: emoji reach past their font size. */
+const SLOT = Math.ceil(GLYPH * 1.5);
+
+/** The emoji drawn once side by side, so a frame copies squares rather than drawing emoji. */
+function sheet(glyphs: readonly string[]) {
+  const canvas = document.createElement("canvas");
+  canvas.width = SLOT * glyphs.length;
+  canvas.height = SLOT;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return null;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.font = FONT;
+  glyphs.forEach((glyph, at) => {
+    ctx.fillText(glyph, at * SLOT + SLOT / 2, SLOT / 2);
+  });
+  return canvas;
+}
+
+/** Her face fades in over this long as the screen loads (face.tsx `duration-700`); the wave leaves it then. */
+const FACE_IN_MS = 700;
+
+const still = () =>
+  window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+/**
+ * When the screen loads and when a call connects, one wave of her glyphs leaves her face and rolls out to every corner
+ * of the window: a round front made ragged, and crumbs left where it passed. It is drawn
+ * over the whole screen, never takes a click, and does not play when the system asks
+ * for less motion. Placed inside the box her face is laid out in; the wave starts at its centre.
+ */
+export function ConnectWave({
+  status,
+  charset,
+}: {
+  status: CallStatus;
+  charset: AsciiCharset;
+}) {
+  const anchor = useRef<HTMLSpanElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null);
+  const was = useRef(status);
+  const [playing, setPlaying] = useState(false);
+  // the first-run intro lies over the call screen, and a wave under it is never seen
+  const held = useCallHeld();
+  const heldNow = useRef(held);
+  heldNow.current = held;
+  // Emoji are drawn as the screen loads: the first emoji a page draws is slow, and the
+  // moment a call picks up is the wrong moment for it
+  const emoji = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    emoji.current = charset === "ascii" ? null : sheet(EMOJI_POOL);
+  }, [charset]);
+
+  useEffect(() => {
+    const from = was.current;
+    was.current = status;
+    // from connecting to anything but connecting, hanging up or failing is a call that picked up
+    if (
+      from !== "connecting" ||
+      status === "connecting" ||
+      status === "idle" ||
+      status === "ending"
+    )
+      return;
+    if (still()) return;
+    setPlaying(true);
+  }, [status]);
+
+  // Once per load, as her face arrives: after the fonts, so the emoji are drawn ready
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    let gone = false;
+    void document.fonts.ready.then(() => {
+      if (gone) return;
+      timer = setTimeout(() => {
+        if (heldNow.current || still()) return;
+        setPlaying(true);
+      }, FACE_IN_MS);
+    });
+    return () => {
+      gone = true;
+      clearTimeout(timer);
+    };
+  }, []);
+
+  useEffect(() => {
+    const element = canvas.current;
+    const box = anchor.current?.getBoundingClientRect();
+    if (!playing || !element || !box) return;
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const cx = box.left + box.width / 2;
+    const cy = box.top + box.height / 2;
+    const far = Math.hypot(Math.max(cx, w - cx), Math.max(cy, h - cy));
+    const cols = Math.ceil(w / CELL);
+    const rows = Math.ceil(h / CELL);
+    const cells: Cell[] = [];
+    for (let r = 0; r < rows; r++)
+      for (let c = 0; c < cols; c++) {
+        if (hash(c + 53, r + 5) > KEEP) continue;
+        const x = c * CELL + CELL / 2;
+        const y = r * CELL + CELL / 2;
+        const angle = Math.atan2(y - cy, x - cx);
+        const grain = hash(c + 31, r + 17);
+        // a few slow lobes and some grain, so the front is round but never a clean circle
+        const warp =
+          1 +
+          0.1 * Math.sin(3 * angle + 1.3) +
+          0.05 * Math.sin(7 * angle - 0.7) +
+          (grain - 0.5) * 0.1;
+        const dd = (Math.hypot(x - cx, y - cy) / far) * warp;
+        if (dd < HOLE) continue;
+        cells.push({
+          x,
+          y,
+          dd,
+          seed: hash(c, r),
+          grain,
+          speck: hash(c + 7, r + 101),
+          roll: hash(c + 211, r + 89),
+        });
+      }
+    // nearest first, so a frame visits only the cells between the crumbs and the front
+    cells.sort((a, b) => a.dd - b.dd);
+    const from = (dd: number) => {
+      let lo = 0;
+      let hi = cells.length;
+      while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (cells[mid].dd < dd) lo = mid + 1;
+        else hi = mid;
+      }
+      return lo;
+    };
+
+    // One pixel per CSS pixel: the wave is gone in two seconds, and a retina-sized
+    // canvas over the whole window is four times the pixels to put on screen every frame
+    element.width = w;
+    element.height = h;
+    const ctx = element.getContext("2d");
+    const emojis = emoji.current ?? sheet(EMOJI_POOL);
+    if (!ctx || !emojis) return;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.font = FONT;
+    // her ink is the page's foreground: black on light, white on dark
+    ctx.fillStyle = getComputedStyle(element).color;
+    const top = RAMP.length - 1;
+    // the same glyphs as her face: all emoji, emoji over the bright ascii, or ascii alone
+    const emojiAt = (c: Cell, level: number) =>
+      charset === "emojiOnly" ||
+      (charset === "emoji" && c.roll < EMOJI_RATIO && level >= EMOJI_MIN_LEVEL);
+    const rate = charset === "emojiOnly" ? EMOJI_CHAR_RATE : CHAR_RATE;
+    const half = SLOT / 2;
+
+    const t0 = performance.now();
+    let frame = 0;
+    let raf = 0;
+    const tick = () => {
+      const t = (performance.now() - t0) / 1000;
+      if (t > DONE_S) return setPlaying(false);
+      raf = requestAnimationFrame(tick);
+      if (frame++ % 2) return;
+      const R = t * SPEED;
+      ctx.clearRect(0, 0, w, h);
+      for (let i = from(R - CREST - CRUMB_S * SPEED); i < cells.length; i++) {
+        const c = cells[i];
+        const behind = R - c.dd;
+        if (behind < -0.03) break;
+        let v =
+          smoothstep(-0.03, 0.02, behind) *
+          (1 - smoothstep(0.02, CREST, behind)) *
+          (0.72 + 0.28 * Math.sin(c.dd * 46 - t * 7 + c.seed * 6.283));
+        if (c.speck < CRUMBS) {
+          const life = 0.18 + c.grain * (CRUMB_S - 0.18);
+          const since = (behind - CREST) / SPEED;
+          v = Math.max(
+            v,
+            (0.3 + 0.4 * c.grain) * (1 - smoothstep(life * 0.4, life, since)),
+          );
+        }
+        const level = Math.round(v * top);
+        if (level < 1) continue;
+        const turn = Math.floor(t * rate + c.seed * 10);
+        if (emojiAt(c, level)) {
+          // emoji keep their own colour, so only alpha varies, as on her face
+          ctx.globalAlpha = 0.35 + (level / top) * 0.65;
+          const at = Math.floor(hash(c.seed * 97, turn) * EMOJI_POOL.length);
+          ctx.drawImage(
+            emojis,
+            at * SLOT,
+            0,
+            SLOT,
+            SLOT,
+            c.x - half,
+            c.y - half,
+            SLOT,
+            SLOT,
+          );
+          continue;
+        }
+        ctx.globalAlpha = ALPHA_TOP * (level / top);
+        const set = RAMP[level];
+        ctx.fillText(
+          set[Math.floor(hash(c.seed * 131, turn) * set.length)],
+          c.x,
+          c.y,
+        );
+      }
+      ctx.globalAlpha = 1;
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [playing, charset]);
+
+  return (
+    <>
+      <span
+        ref={anchor}
+        aria-hidden
+        className="pointer-events-none absolute inset-0"
+      />
+      {playing &&
+        createPortal(
+          <canvas
+            ref={canvas}
+            aria-hidden
+            className="pointer-events-none fixed inset-0 z-30 size-full text-foreground"
+          />,
+          document.body,
+        )}
+    </>
+  );
+}

package/features/thursday/components/side-captions.tsx

@@ -104,14 +104,16 @@ const HOVER_INK = 0.9;
 /** The words are 17px on 1.675; the level turn's first line sits here against the face's middle. */
 const LINE = 17 * 1.675;
 const LIFT = -40;
-/** Between her latest words and what stands under them. */
+/** Between her level words and what stands under them. */
 const UNDER_GAP = 8;
+/** The height key of what stands under the level turn, beside the turns' own ids. */
+const UNDER = "(under)";
 
 /**
  * The conversation beside the face, no plates and no names: a filled dot at
  * the head of each side's level turn says whose it is, and pulses while that
- * turn is still being said. Anchored outside the face box so nothing covers
- * the face.
+ * turn is still being said. Anchored past her canvas (the face box's
+ * `--face-bleed` beyond its edge) so nothing covers the face.
  */
 export function SideCaptions({
   turns,
@@ -120,13 +122,14 @@ export function SideCaptions({
   onPick,
   under = null,
   ahead = false,
+  workOf,
 }: {
   turns: Turn[];
   pinned: Pinned;
   /** The last turn is still being said. */
   live: boolean;
   onPick: (role: Role, at: number) => void;
-  /** What stands under her latest words, on her side: the work behind them. */
+  /** Her turn in the making: the work under way before she has said anything to it. */
   under?: ReactNode;
   /**
    * That work is her turn in the making — theirs came last and she has not spoken yet — so
@@ -134,6 +137,8 @@ export function SideCaptions({
    * new turn.
    */
   ahead?: boolean;
+  /** The work behind one of her turns, drawn under it while it is level; null for none. */
+  workOf?: (turn: string) => ReactNode;
 }) {
   const last = turns.at(-1);
   return (
@@ -148,6 +153,7 @@ export function SideCaptions({
           onPick={(at) => onPick(role, at)}
           under={role === "assistant" ? under : null}
           ahead={role === "assistant" && ahead}
+          workOf={role === "assistant" ? workOf : undefined}
         />
       ))}
     </>
@@ -162,6 +168,7 @@ function SideColumn({
   onPick,
   under,
   ahead,
+  workOf,
 }: {
   role: Role;
   /** This side's turns only. */
@@ -172,6 +179,7 @@ function SideColumn({
   onPick: (at: number) => void;
   under: ReactNode;
   ahead: boolean;
+  workOf: ((turn: string) => ReactNode) | undefined;
 }) {
   const mine = role === "user";
   // Heights as laid out, before any transform: text grows while it is said, and
@@ -213,18 +221,22 @@ function SideColumn({
   // Every turn is placed by its top edge and scales from it. Centring the box
   // instead jumps a turn half a line the moment its text wraps, then slides it
   // back once the taller box is measured a frame later
+  // Under the level line: her turn in the making, else the work behind the turn that is
+  // level — the latest, or one gone back to
+  const below = at === turns.length ? under : (workOf?.(turns[at].id) ?? null);
   const top: number[] = Array(turns.length + 1).fill(0);
   top[at] = -LINE / 2;
   for (let k = at - 1; k >= 0; k--) top[k] = top[k + 1] - GAP - tall(k);
+  // what stands under a turn gone back to pushes the turns after it down, not over them
+  const room =
+    below && at < turns.length ? (heights[UNDER] ?? 0) + UNDER_GAP : 0;
   for (let k = at + 1; k < turns.length; k++)
-    top[k] = top[k - 1] + tall(k - 1) + GAP;
-  // Under the latest words while they are level; a side that went back shows none of it
-  const underTop =
-    at === turns.length
+    top[k] = top[k - 1] + tall(k - 1) + GAP + (k - 1 === at ? room : 0);
+  const underTop = !below
+    ? null
+    : at === turns.length
       ? top[at]
-      : at === latest
-        ? top[at] + (heights[turns[at].id] ?? LINE) + UNDER_GAP
-        : null;
+      : top[at] + (heights[turns[at].id] ?? LINE) + UNDER_GAP;
 
   return (
     <div
@@ -232,8 +244,8 @@ function SideColumn({
         "pointer-events-none absolute h-0 w-[min(21.25rem,24vw)]",
         // the vanishing point is the face's edge on the middle line: what recedes goes toward her
         mine
-          ? "left-full ml-1.5 [perspective-origin:0_0]"
-          : "right-full mr-1.5 [perspective-origin:100%_0]",
+          ? "left-full ml-[calc(var(--face-bleed,0px)+0.375rem)] [perspective-origin:0_0]"
+          : "right-full mr-[calc(var(--face-bleed,0px)+0.375rem)] [perspective-origin:100%_0]",
       )}
       style={{ top: `calc(50% + ${LIFT}px)`, perspective: PERSPECTIVE }}
     >
@@ -296,17 +308,17 @@ function SideColumn({
           </div>
         );
       })}
-      {under && (
+      {below && (
         <div
-          aria-hidden={underTop === null}
+          ref={measure}
+          data-turn={UNDER}
           style={{ transform: `translateY(${(underTop ?? 0).toFixed(1)}px)` }}
           className={cn(
             "absolute top-0 flex w-full transition-transform duration-[520ms] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
             mine ? "left-0 justify-start" : "right-0 justify-end",
-            underTop === null && "invisible",
           )}
         >
-          {under}
+          {below}
         </div>
       )}
     </div>

package/features/thursday/components/thursday-setting.tsx

@@ -413,7 +413,7 @@ function BackendModelPicker({
                 <span className="min-w-0 flex-1 truncate text-sm font-medium">
                   {model.label}
                 </span>
-                {picked && <Check className="size-3.5 shrink-0 text-brand" />}
+                {picked && <Check className="size-3.5 shrink-0" />}
               </span>
               <span className="block truncate font-mono text-[11px] text-muted-foreground">
                 {model.id} · {model.tier}
@@ -776,7 +776,7 @@ function Captions({
                       {CAPTION_LABEL[view].hint}
                     </span>
                   </span>
-                  {picked && <Check className="size-4 shrink-0 text-brand" />}
+                  {picked && <Check className="size-4 shrink-0" />}
                 </span>
               </button>
             );