thursday-agent 0.5.0 → 0.7.0

package/features/thursday/components/call-log.tsx

@@ -8,13 +8,11 @@ import { notify } from "@/components/ui/notify";
 import { ShinyText } from "@/components/ui/shiny-text";
 import { Skeleton } from "@/components/ui/skeleton";
 import { CALL_HISTORY_PAGE } from "@/config";
-import type { TaskStatus } from "@/features/bot/bot.schema";
+import type { ThreadStatus } from "@/features/bot/bot.schema";
 import { toolIcon } from "@/features/bot/components/bot-tool";
 import {
   SettingDialogContent,
   SettingError,
-  SettingGroup,
-  SettingItems,
   SettingMore,
 } from "@/features/settings/components/setting-ui";
 import { toDate, whenOf } from "@/lib/date-like";
@@ -26,58 +24,54 @@ import { type CallRecord, type CallTurn } from "../thursday.schema";
 import { delegatedLabel, toolLine } from "../tool-line";
 import { ThursdayMark } from "./thursday-mark";
 
-/** The Settings › Thursday row that opens the call history dialog. */
+/** The Settings › Thursday tile that opens the call history dialog. */
 export function CallHistoryRow() {
   return (
-    <SettingGroup label="Transcripts">
-      <SettingItems>
-        <button
-          type="button"
-          onClick={() =>
-            notify.component({
-              className: "sm:max-w-3xl",
-              renderer: () => (
-                <SettingDialogContent
-                  title="Call history"
-                  description="Everything said on the line, oldest at the top. Scroll up for older calls."
-                >
-                  <CallLog />
-                </SettingDialogContent>
-              ),
-            })
-          }
-          className="flex w-full items-center gap-3 p-4 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
-        >
-          <span className="grid size-10 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground">
-            <Phone className="size-4" />
-          </span>
-          <span className="min-w-0 flex-1 space-y-0.5">
-            <span className="block text-sm font-medium">Call history</span>
-            <span className="block text-xs text-muted-foreground">
-              Every call, word for word — hers and yours
-            </span>
-          </span>
-          <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
-        </button>
-      </SettingItems>
-    </SettingGroup>
+    <button
+      type="button"
+      onClick={() =>
+        notify.component({
+          className: "sm:max-w-3xl",
+          renderer: () => (
+            <SettingDialogContent
+              title="Call history"
+              description="Everything said on the line, oldest at the top. Scroll up for older calls."
+            >
+              <CallLog />
+            </SettingDialogContent>
+          ),
+        })
+      }
+      className="flex w-full min-w-0 items-center gap-3 p-4 text-left outline-none transition-colors hover:bg-muted/50 focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset"
+    >
+      <span className="grid size-10 shrink-0 place-items-center rounded-lg bg-muted text-muted-foreground">
+        <Phone className="size-4" />
+      </span>
+      <span className="min-w-0 flex-1 space-y-0.5">
+        <span className="block text-sm font-medium">Call history</span>
+        <span className="block text-xs text-muted-foreground">
+          Every call, word for word — hers and yours
+        </span>
+      </span>
+      <ChevronRight className="size-4 shrink-0 text-muted-foreground" />
+    </button>
   );
 }
 
 type CallJob = CallRecord["jobs"][number];
 
-/** How a job reads under the line that opened it. Only waiting and failed carry colour. */
-const JOB_WORD: Record<TaskStatus, string> = {
+/** How a job reads under the line that opened it. Only waiting carries colour. */
+const JOB_WORD: Record<ThreadStatus, string> = {
   running: "working",
   waiting: "waiting on you",
   done: "done",
-  failed: "failed",
+  cancelled: "stopped",
 };
-const JOB_LOOK: Record<TaskStatus, string> = {
+const JOB_LOOK: Record<ThreadStatus, string> = {
   running: "text-muted-foreground",
   waiting: WAITING_INK,
   done: "text-muted-foreground",
-  failed: "text-destructive",
+  cancelled: "text-muted-foreground",
 };
 
 /** The box the log fills, kept while it loads so the dialog does not resize. */
@@ -182,7 +176,7 @@ function CallLog() {
               ghost={<CallGhost />}
             />
             {calls.map((call, index) => (
-              <Thread
+              <CallEntry
                 key={call.id}
                 call={call}
                 first={index === 0}
@@ -231,7 +225,7 @@ function CallGhost() {
 const sideOf = (turn: CallTurn) => (turn.role === "user" ? "user" : "her");
 
 /** One call: a datestamp over a hairline, then its turns. */
-function Thread({
+function CallEntry({
   call,
   first,
   onDropped,
@@ -273,7 +267,15 @@ function Thread({
         )}
       >
         <span
-          title={`${call.provider} · ${call.model}`}
+          title={[
+            call.provider,
+            call.model,
+            call.backendModel,
+            call.seconds === null ? null : `${call.seconds}s active`,
+            call.endedReason,
+          ]
+            .filter(Boolean)
+            .join(" · ")}
           className="font-mono text-[10px] tracking-[0.14em] uppercase"
         >
           {whenOf(started)}

package/features/thursday/components/face.tsx

@@ -13,6 +13,7 @@ import {
 import type { FaceKind } from "@/features/thursday/face.const";
 import type {
   CallStatus,
+  FaceWord,
   ThursdayFace,
 } from "@/features/thursday/thursday.schema";
 import { useResolvedTheme } from "@/hooks/use-theme";
@@ -20,17 +21,23 @@ import { cn } from "@/lib/utils";
 
 /**
  * The call face. Two renderers with nothing in common inside (an SVG
- * silhouette and a glyph canvas); the shared contract is CallStatus, and each
- * adapter maps it. A third face is one FaceKind, one state table, one FACES entry.
+ * silhouette and a glyph canvas); the shared contract is CallStatus and `failed`,
+ * and each adapter maps them. `word` is the orb's alone. A third face is one FaceKind, one state table, one FACES entry.
  */
 
 export type FaceProps = {
   /** What the call is doing; every face answers only this. */
   status: CallStatus;
+  /** A call just failed to open or dropped. The status is idle by then; this says why the face is not at rest. */
+  failed?: boolean;
+  /** A word `emote` put on the face. Only the orb draws one; the call offers `emote` only with the orb. */
+  word?: FaceWord | null;
   /** Box size in px, measured (see Face). */
   size: number;
   /** Audio bands, read once per animation frame, not through state. */
   getSpectrum?: () => ArrayLike<number>;
+  /** The microphone's bands, the same way: what a face answers while listening. */
+  getMicSpectrum?: () => ArrayLike<number>;
   /** Appearance; each face reads only the fields that apply to it. */
   look: ThursdayFace;
   className?: string;
@@ -39,6 +46,7 @@ export type FaceProps = {
 const MARK_STATE: Record<CallStatus, MarkState> = {
   idle: "idle",
   connecting: "connecting",
+  ending: "connecting",
   listening: "listening",
   speaking: "speaking",
   working: "thinking",
@@ -63,7 +71,14 @@ const MARK_VOICE: Partial<MarkOptions> = {
   stretch: 0,
 };
 
-function MarkFace({ status, size, getSpectrum, look, className }: FaceProps) {
+function MarkFace({
+  status,
+  failed,
+  size,
+  getSpectrum,
+  look,
+  className,
+}: FaceProps) {
   return (
     <BotMark
       size={size}
@@ -71,7 +86,9 @@ function MarkFace({ status, size, getSpectrum, look, className }: FaceProps) {
       color={look.color}
       shape={look.shape}
       outline={look.outline}
+      paint={look.paint}
       state={MARK_STATE[status]}
+      crossed={failed}
       getSpectrum={getSpectrum}
       options={MARK_VOICE}
       notify={false}
@@ -81,13 +98,15 @@ function MarkFace({ status, size, getSpectrum, look, className }: FaceProps) {
 }
 
 /**
- * listening borrows `connecting` (the orb held open, waiting), not `idle`,
- * which is the orb at rest between calls. delegating borrows the working comet.
+ * listening has its own mode: the resting body, retyping with the microphone.
+ * ending draws the body in and leaves the field empty; delegating borrows the
+ * working comet.
  */
 const ORB_MODE: Record<CallStatus, AsciiOrbMode> = {
+  ending: "ending",
   idle: "idle",
   connecting: "connecting",
-  listening: "connecting",
+  listening: "listening",
   speaking: "speaking",
   working: "working",
   delegating: "working",
@@ -97,14 +116,25 @@ const ORB_MODE: Record<CallStatus, AsciiOrbMode> = {
 const ORB_DARK: [number, number, number] = [247, 247, 247];
 const ORB_LIGHT: [number, number, number] = [10, 10, 10];
 
-function OrbFace({ status, size, getSpectrum, look, className }: FaceProps) {
+function OrbFace({
+  status,
+  failed,
+  word,
+  size,
+  getSpectrum,
+  getMicSpectrum,
+  look,
+  className,
+}: FaceProps) {
   const dark = useResolvedTheme() === "dark";
   return (
     <AsciiOrb
-      mode={ORB_MODE[status]}
+      mode={failed ? "error" : ORB_MODE[status]}
+      word={word}
       size={size}
       color={dark ? ORB_DARK : ORB_LIGHT}
       getSpectrum={getSpectrum}
+      getMicSpectrum={getMicSpectrum}
       charset={look.charset}
       fontSize={look.fontSize}
       density={look.density}
@@ -136,9 +166,9 @@ export const FACES: Record<
 /**
  * The face at the size of its box, measured because the canvas face needs real
  * pixels. Fades in: the chosen face arrives after hydration, so the first
- * frame is always the default and must not be shown.
+ * frame is always the default and must not be shown. memo: the call screen
+ * re-renders per transcript fragment; the face's props are stable references.
  */
-/** memo: the call screen re-renders per transcript fragment; the face's props are stable references. */
 export const Face = memo(function Face({
   look,
   // a face without a call is between calls (previews)

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

@@ -0,0 +1,273 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ShinyText } from "@/components/ui/shiny-text";
+import type { CallMessage } from "@/features/thursday/thursday.schema";
+import { capturesKeys } from "@/hooks/use-hotkey";
+import { cn } from "@/lib/utils";
+import { ThursdayMark } from "./thursday-mark";
+
+/**
+ * Side captions (Captions › sides): the conversation beside the face, one turn
+ * a side at the face's middle line and the rest receding around it.
+ */
+
+/** One speaker's words in a row, however many display groups Live cut them into. */
+export type Turn = { id: string; role: CallMessage["role"]; text: string };
+
+export function turnsOf(messages: CallMessage[]) {
+  const turns: Turn[] = [];
+  for (const message of messages) {
+    const last = turns.at(-1);
+    if (last?.role === message.role) last.text = `${last.text} ${message.text}`;
+    else turns.push({ ...message });
+  }
+  return turns;
+}
+
+/** Wheel delta per turn: a turn is a paragraph, so a trackpad flick moves one, not three. */
+const WHEEL_STEP = 120;
+
+/** How long the wheel keeps what it has gathered before starting over. */
+const WHEEL_SETTLE_MS = 220;
+
+/**
+ * Which turn the side captions are on: the latest, or as far back as the arrow
+ * keys or the wheel took them. A new turn brings the focus back to now, as the
+ * centre caption does with new text. The keys are the window's while the
+ * captions are up, except in a field, a key capture or a dialog.
+ */
+export function useTurnFocus(turns: Turn[], enabled: boolean) {
+  const [back, setBack] = useState(0);
+  const count = useRef(turns.length);
+  const drag = useRef(0);
+  const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const furthest = Math.max(0, turns.length - 1);
+
+  useEffect(() => {
+    if (turns.length === count.current) return;
+    count.current = turns.length;
+    setBack(0);
+  }, [turns.length]);
+
+  const step = useCallback(
+    (by: number) => setBack((was) => Math.min(furthest, Math.max(0, was + by))),
+    [furthest],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+      if (event.defaultPrevented || event.altKey || event.ctrlKey) return;
+      if (event.metaKey || event.shiftKey || capturesKeys(event.target)) return;
+      if ((event.target as HTMLElement | null)?.closest?.('[role="dialog"]'))
+        return;
+      event.preventDefault();
+      step(event.key === "ArrowUp" ? 1 : -1);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enabled, step]);
+
+  useEffect(
+    () => () => {
+      if (settle.current) clearTimeout(settle.current);
+    },
+    [],
+  );
+
+  const onWheel = (event: React.WheelEvent) => {
+    drag.current += event.deltaY;
+    const steps = Math.trunc(drag.current / WHEEL_STEP);
+    if (steps !== 0) {
+      drag.current -= steps * WHEEL_STEP;
+      step(-steps);
+    }
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = setTimeout(() => {
+      drag.current = 0;
+    }, WHEEL_SETTLE_MS);
+  };
+
+  return { focus: Math.max(0, turns.length - 1 - back), back, onWheel };
+}
+
+/**
+ * How the turns around the focus recede (canvas "Thursday Call Polish" D3, user
+ * 09-17): each turn away steps back `DEPTH` px under `PERSPECTIVE`, so it draws
+ * smaller, softer and a little higher. These are the drawing, not settings.
+ */
+const SIDE_PERSPECTIVE = 1000;
+const SIDE_DEPTH = 700;
+/** Space between turns at the focus's size, and the extra that lifts earlier turns. */
+const SIDE_GAP = 22;
+const SIDE_RISE = 10;
+const SIDE_BLUR = 1.1;
+/** Ink by turns away on the focused side; the other side's turn level with the focus is `SIDE_PAIR`. */
+const SIDE_FADE = [1, 0.46, 0.28, 0.16];
+const SIDE_PAIR = 0.62;
+/** Turns farther than this are not drawn. */
+const SIDE_REACH = 3;
+
+/**
+ * The conversation beside the face: her turns on the left, yours on the right,
+ * no plates. Each side holds its turn level with the focus at the face's middle
+ * — the focus itself, or that side's last turn before it — and the rest recede
+ * above and below. Out of focus a turn keeps three lines; the turn being said
+ * shines its name. Anchored outside the face box so nothing covers the face.
+ */
+export function SideCaptions({
+  turns,
+  focus,
+  live,
+}: {
+  turns: Turn[];
+  focus: number;
+  /** The last turn is still being said. */
+  live: boolean;
+}) {
+  return (
+    <>
+      <SideColumn turns={turns} focus={focus} live={live} role="assistant" />
+      <SideColumn turns={turns} focus={focus} live={live} role="user" />
+    </>
+  );
+}
+
+function SideColumn({
+  turns,
+  focus,
+  live,
+  role,
+}: {
+  turns: Turn[];
+  focus: number;
+  live: boolean;
+  role: Turn["role"];
+}) {
+  const mine = role === "user";
+  // Heights as laid out, before any transform: text grows while it is said, and
+  // leaving focus clamps a turn to three lines
+  const [heights, setHeights] = useState<Record<string, number>>({});
+  const watch = useRef<ResizeObserver | null>(null);
+  useEffect(() => () => watch.current?.disconnect(), []);
+  const measure = useCallback((node: HTMLDivElement | null) => {
+    if (!node) return;
+    watch.current ??= new ResizeObserver((entries) =>
+      setHeights((was) => {
+        let next = was;
+        for (const entry of entries) {
+          const box = entry.target as HTMLElement;
+          const id = box.dataset.turn;
+          if (!id || was[id] === box.offsetHeight) continue;
+          if (next === was) next = { ...was };
+          next[id] = box.offsetHeight;
+        }
+        return next;
+      }),
+    );
+    watch.current.observe(node);
+    return () => watch.current?.unobserve(node);
+  }, []);
+
+  const own = turns.flatMap((turn, index) =>
+    turn.role === role ? [{ turn, index }] : [],
+  );
+  if (!own.length) return null;
+  const focused = turns[focus]?.role === role;
+  const level = focused
+    ? focus
+    : (own.findLast((one) => one.index <= focus) ?? own[0]).index;
+  const at = own.findIndex((one) => one.index === level);
+  const scale = (k: number) =>
+    SIDE_PERSPECTIVE / (SIDE_PERSPECTIVE + SIDE_DEPTH * Math.abs(k - at));
+  const tall = (k: number) => heights[own[k].turn.id] ?? 42;
+  // Stacked by their drawn size, then placed back by it: perspective pulls each toward the middle line
+  const drawn = own.map(() => 0);
+  for (let k = at - 1; k >= 0; k--) {
+    drawn[k] =
+      drawn[k + 1] -
+      ((tall(k) * scale(k)) / 2 +
+        SIDE_GAP * scale(k + 1) +
+        SIDE_RISE +
+        (tall(k + 1) * scale(k + 1)) / 2);
+  }
+  for (let k = at + 1; k < own.length; k++) {
+    drawn[k] =
+      drawn[k - 1] +
+      ((tall(k - 1) * scale(k - 1)) / 2 +
+        SIDE_GAP * scale(k - 1) +
+        (tall(k) * scale(k)) / 2);
+  }
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute top-1/2 h-0 w-[min(25rem,24vw)] [perspective:1000px]",
+        // the vanishing point is the face's edge on the middle line: what recedes goes toward her
+        mine
+          ? "left-full ml-11 [perspective-origin:0_0]"
+          : "right-full mr-11 [perspective-origin:100%_0]",
+      )}
+    >
+      {own.map(({ turn, index }, k) => {
+        const away = Math.abs(k - at);
+        const fade = SIDE_FADE[away] ?? 0;
+        const ink =
+          index === focus
+            ? 1
+            : focused
+              ? fade
+              : index === level
+                ? SIDE_PAIR
+                : fade * 0.8;
+        const name = mine ? "You" : "Thursday";
+        return (
+          <div
+            key={turn.id}
+            ref={measure}
+            data-turn={turn.id}
+            aria-hidden={away > SIDE_REACH}
+            style={{
+              transform: `translateY(-50%) translateY(${drawn[k] / scale(k)}px) translateZ(${-SIDE_DEPTH * away}px)`,
+              opacity: away > SIDE_REACH ? 0 : ink,
+              filter: away ? `blur(${away * SIDE_BLUR}px)` : undefined,
+            }}
+            className={cn(
+              "absolute top-0 w-max max-w-full text-base leading-[26px] text-foreground transition-[transform,opacity,filter] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
+              away > SIDE_REACH ? "invisible" : "pointer-events-auto",
+              mine ? "left-0" : "right-0",
+            )}
+          >
+            <div
+              className={cn(
+                "mb-1.5 flex h-4 items-center gap-1.5 text-xs font-medium",
+                !mine && "justify-end",
+              )}
+            >
+              {mine ? (
+                <span className="size-2 rounded-full ring-[1.5px] ring-foreground ring-inset" />
+              ) : (
+                <ThursdayMark size={14} />
+              )}
+              {live && index === turns.length - 1 ? (
+                <ShinyText text={name} />
+              ) : (
+                <span>{name}</span>
+              )}
+            </div>
+            <p
+              className={cn(
+                "break-keep text-pretty",
+                index !== focus && "line-clamp-3",
+              )}
+            >
+              {turn.text}
+            </p>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/features/thursday/components/tab-state.tsx

@@ -3,7 +3,7 @@
 import { useEffect } from "react";
 import { APP_NAME } from "@/config";
 import { markAtRest } from "@/features/bot/components/bot-mark";
-import { useTaskReport } from "@/features/bot/components/task-badge";
+import { useThreadReport } from "@/features/bot/components/thread-badge";
 import {
   type SectionAlert,
   useSectionAlerts,
@@ -48,7 +48,7 @@ export function tabIconSvg(alert: SectionAlert): string {
 
 /**
  * The tab, for when the app is not the window in front. The title leads with
- * what is owed — the Tasks badge's count — and a live call keeps its waveform at
+ * what is owed — the Threads badge's count — and a live call keeps its waveform at
  * the end, so neither takes the other's place. The icon wears the settings
  * corner's dot: amber waits on the user, red is broken, and a section with
  * nothing to count still gets the dot.
@@ -56,13 +56,21 @@ export function tabIconSvg(alert: SectionAlert): string {
  * Draws nothing. A component rather than a hook in the call screen, so a report
  * changing re-renders only this.
  */
-export function TabState({ live }: { live: boolean }) {
-  const { owed } = useTaskReport();
+export function TabState({
+  live,
+  ringing,
+}: {
+  live: boolean;
+  /** A call-back is ringing: the title says she is calling. */
+  ringing: boolean;
+}) {
+  const { owed } = useThreadReport();
   const alerts = useSectionAlerts();
   const alert = worstAlert(Object.values(alerts).map((each) => each ?? null));
 
   useEffect(() => {
-    const head = owed > 0 ? `(${owed}) ${APP_NAME}` : APP_NAME;
+    const name = ringing ? `${APP_NAME} is calling` : APP_NAME;
+    const head = owed > 0 ? `(${owed}) ${name}` : name;
     if (!live) {
       document.title = head;
       return;
@@ -74,7 +82,7 @@ export function TabState({ live }: { live: boolean }) {
       document.title = `${head} ${SPIN[at]}`;
     }, SPIN_MS);
     return () => clearInterval(tick);
-  }, [live, owed]);
+  }, [live, owed, ringing]);
 
   useEffect(() => {
     // A link of its own after the layout's, changed in place: browsers redraw

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

@@ -23,6 +23,7 @@ export function ThursdayMark({
       color={face.color}
       shape={face.shape}
       outline={face.outline}
+      paint={face.paint}
       notify={false}
       className={className}
     />