thursday-agent 0.5.0 → 0.7.0

package/features/thursday/components/thursday.tsx

@@ -9,7 +9,7 @@ import {
   MicOff,
   Settings2,
 } from "lucide-react";
-import { type ReactNode, useEffect, useRef, useState } from "react";
+import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
 import { ButtonGroup } from "@/components/ui/button-group";
@@ -21,7 +21,8 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { SPEACH_MODEL_PROVIDER_LIST } from "@/features/ai/model.schema";
+import { CALL_IDLE } from "@/config";
+import { LIVE_PROVIDER } from "@/features/ai/live.schema";
 import { type Bot, DEFAULT_BOT } from "@/features/bot/bot.schema";
 import { BotMark } from "@/features/bot/components/bot-mark";
 import { BotRoom } from "@/features/bot/components/bot-room";
@@ -42,15 +43,22 @@ import {
   type CallStatus,
   type CaptionView,
   FACE_DEFAULT,
+  type FaceWord,
   type ThursdayFace,
 } from "@/features/thursday/thursday.schema";
 import { useThursdayStore } from "@/features/thursday/thursday.store";
-import { type ToolRun, useThursday } from "@/features/thursday/use-thursday";
+import {
+  type ActivityLine,
+  type CallEnd,
+  type Ringing,
+  useThursday,
+} from "@/features/thursday/use-thursday";
 import { ArtifactView } from "@/features/workspace/components/artifact-view";
 import { useHotkeyLabel } from "@/hooks/use-hotkey";
 import { useServerRoute } from "@/lib/protocol/use-server-route";
 import { cn } from "@/lib/utils";
 import { Face } from "./face";
+import { SideCaptions, turnsOf, useTurnFocus } from "./side-captions";
 import { TabState } from "./tab-state";
 
 /**
@@ -63,10 +71,24 @@ export type { CaptionView };
 
 export type CallScreenProps = {
   status: CallStatus;
+  /** A call just failed to open or dropped; the face says so for a few seconds. */
+  failed?: boolean;
   /** Oldest first; the last one is the turn being spoken. */
   messages: CallMessage[];
-  tool: ToolRun | null;
+  tool: ActivityLine | null;
+  /** When the backend picked the turn up (ms); null when it is not working. */
+  thinkingSince?: number | null;
+  /** What the backend's latest reasoning summary says it is doing. */
+  thinkingTitle?: string | null;
+  /** Why the last call ended, when the user did not end it. */
+  ended?: CallEnd | null;
+  /** The word `emote` last put on the face. */
+  faceWord?: FaceWord | null;
   onTap: () => void;
+  /** A call-back ringing; the tap answers it. */
+  ringing?: Ringing | null;
+  /** Stops the ringing without answering. */
+  onDecline?: () => void;
   /** Wake phrase; null when the tap is the only entry point. */
   wakePhrase?: string | null;
   /** Hotkey in readable form (use-hotkey); null if none. */
@@ -75,8 +97,6 @@ export type CallScreenProps = {
   idleLeft?: number | null;
   /** When the line opened (ms). */
   since?: number | null;
-  /** Mic muted (use-thursday micOff): a tool is running or a relay is being read. */
-  micOff?: boolean;
   getSpectrum?: () => ArrayLike<number>;
   /** The user's own mic bands, for the listening meter. */
   getMicSpectrum?: () => ArrayLike<number>;
@@ -89,14 +109,20 @@ export type CallScreenProps = {
 
 export function CallScreen({
   status,
+  failed = false,
   messages,
   tool,
+  thinkingSince = null,
+  thinkingTitle = null,
+  ended = null,
+  faceWord = null,
   onTap,
+  ringing = null,
+  onDecline,
   wakePhrase = null,
   hotkeyLabel = null,
   idleLeft = null,
   since = null,
-  micOff = false,
   getSpectrum,
   getMicSpectrum,
   captionView = "center",
@@ -106,14 +132,20 @@ export function CallScreen({
   // without a key the face opens the key prompt instead of a call
   const [asking, setAsking] = useState(false);
   const asleep = !callable && status === "idle";
-  const busy = status === "connecting";
-  const live = status !== "idle" && status !== "connecting";
+  const busy = status === "connecting" || status === "ending";
+  const live = status !== "idle" && !busy;
   // The caption box holds her words and nothing else, so the line she just
   // said stays put while she listens or works.
   const hers =
     messages.findLast((turn) => turn.role === "assistant")?.text ?? "";
   const sided = captionView === "sides" && status !== "idle";
-  const turns = useTurnPager(messages);
+  const talk = useMemo(() => turnsOf(messages), [messages]);
+  const turns = useTurnFocus(talk, sided);
+  const lastRole = talk.at(-1)?.role;
+  // the last turn is still being said: her voice is on, or yours came after hers and she has not answered
+  const saying =
+    (lastRole === "assistant" && status === "speaking") ||
+    (lastRole === "user" && status === "listening");
   return (
     <div className="relative flex h-full flex-col">
       <div className="absolute top-5 right-5 z-10">
@@ -140,7 +172,9 @@ export function CallScreen({
                 ? "Add a speech key"
                 : live
                   ? "End the call"
-                  : "Call Thursday"
+                  : ringing
+                    ? "Answer Thursday"
+                    : "Call Thursday"
             }
             // the face never moves under the cursor; only press gives a little
             className={cn(
@@ -149,15 +183,25 @@ export function CallScreen({
               asleep && "opacity-35",
             )}
           >
-            <Face
-              look={face}
-              status={status}
-              getSpectrum={getSpectrum}
-              className="w-full"
-            />
+            {/* Ringing, the face swells twice and rests, like a phone's ring */}
+            <span
+              className={cn("block", ringing && "motion-safe:animate-ringing")}
+            >
+              <Face
+                look={face}
+                status={status}
+                failed={failed}
+                word={faceWord}
+                getSpectrum={getSpectrum}
+                getMicSpectrum={getMicSpectrum}
+                className="w-full"
+              />
+            </span>
           </button>
 
-          {sided && <SideCaptions shown={turns.shown} give={turns.give} />}
+          {sided && (
+            <SideCaptions turns={talk} focus={turns.focus} live={saying} />
+          )}
         </div>
 
         {/* The column is wider than the text (40rem); the side margins hold the caption chevrons (Flow) */}
@@ -169,8 +213,10 @@ export function CallScreen({
               (use-thursday). */}
           <ActivityRow
             tool={tool}
-            micOff={micOff}
-            listening={status === "listening"}
+            thinkingSince={thinkingSince}
+            thinkingTitle={thinkingTitle}
+            listening={status === "listening" && thinkingSince === null}
+            ringing={ringing}
             getMicSpectrum={getMicSpectrum}
           />
 
@@ -178,8 +224,7 @@ export function CallScreen({
               `text-balance`: rebalancing changes the line count under the pager. */}
           <Flow
             text={sided || status === "idle" ? "" : hers}
-            fixed
-            paged
+            fadeIn
             className="w-full max-w-160 text-center text-base"
           />
 
@@ -205,6 +250,10 @@ export function CallScreen({
                 status={status}
                 idleLeft={idleLeft}
                 since={since}
+                ended={ended}
+                behind={sided && turns.back > 0}
+                ringing={ringing !== null}
+                onDecline={onDecline}
                 wakePhrase={wakePhrase}
                 hotkeyLabel={hotkeyLabel}
               />
@@ -213,7 +262,7 @@ export function CallScreen({
         </div>
       </div>
 
-      {/* Documents a finished task produced; opens itself on the artifact event */}
+      {/* Documents a finished thread produced; opens itself on the artifact event */}
       <ArtifactView />
 
       <BotRoom />
@@ -223,7 +272,7 @@ export function CallScreen({
 
 /**
  * The corner is one group: three rooms as single buttons, everything else
- * behind the gear. Tasks is left out because the other corner is that room.
+ * behind the gear. Threads is left out because the other corner is that room.
  */
 const CORNER = ["thursday", "memory", "bot"] as const;
 
@@ -312,46 +361,6 @@ function SettingsCorner() {
 /** Lines the caption box holds. */
 const CAPTION_LINES = 3;
 
-/**
- * Lines a side caption keeps, by age. The newest turn is the one being said, so
- * it gets room for a whole spoken sentence; what came before is context and
- * decays with the type size beside it.
- */
-const CAPTION_TURN_LINES = [5, 3, 2];
-
-/**
- * Type size by age. The step is a real one — 18 / 15 / 13 — because it is what
- * tells two turns apart once neither carries an edge.
- */
-const CAPTION_SIZES = ["text-lg", "text-[15px]", "text-[13px]"];
-
-/** Inner padding by age: a smaller turn sits on a smaller plate. */
-const CAPTION_PADS = ["px-4 py-3", "px-3.5 py-2.5", "px-3 py-2"];
-
-/**
- * The plate a turn sits on: fill, no edge. The call screen's ground is the
- * page's own — the ascii field is boot and intro only — so an outline covers
- * nothing and ends up being the whole design.
- *
- * Yours is the surface `Bubble` already gives your words in the task thread
- * (primary, light ink); hers is the page's grey. Age recedes in the fill, not
- * in the block's opacity, which would take the ink down with it.
- */
-const CAPTION_HERS = ["bg-muted", "bg-muted/70", "bg-muted/45"];
-const CAPTION_YOURS = ["bg-primary", "bg-primary/75", "bg-primary/60"];
-
-/** A step off a ramp above. The ramps run out at VISIBLE; the last step is the floor. */
-function atAge(ramp: readonly string[], age: number) {
-  return ramp[age] ?? ramp[ramp.length - 1];
-}
-
-/** Ink by age. Hers recedes with her plate; yours stays legible on every step of its own. */
-const CAPTION_HERS_INK = [
-  "text-foreground",
-  "text-muted-foreground",
-  "text-muted-foreground/60",
-];
-
 /**
  * Line height as a number, not a class: box height and page offset divide by
  * it, and a class could be overridden by a later `text-*` utility.
@@ -364,20 +373,14 @@ const CAPTION_LEADING = 1.625;
  */
 function Flow({
   text,
-  lead,
   lines = CAPTION_LINES,
-  fixed = false,
-  paged = false,
+  fadeIn = false,
   className,
 }: {
   text: string;
-  /** Sits inline before the text. */
-  lead?: ReactNode;
   lines?: number;
-  /** Reserve the full height even with no text. */
-  fixed?: boolean;
-  /** Page overflow with chevrons; needs side margin. */
-  paged?: boolean;
+  /** Each new character fades in as it arrives; what is already drawn stays put. */
+  fadeIn?: boolean;
   className?: string;
 }) {
   const box = useRef<HTMLParagraphElement>(null);
@@ -392,7 +395,7 @@ function Flow({
   // re-measure on width change and on every text change (streaming moves the last line)
   useEffect(() => {
     const node = box.current;
-    if (!node || !paged) return;
+    if (!node) return;
     const measure = () => {
       const line = Number.parseFloat(getComputedStyle(node).lineHeight);
       if (!line) return;
@@ -402,7 +405,7 @@ function Flow({
     const watch = new ResizeObserver(measure);
     watch.observe(node);
     return () => watch.disconnect();
-  }, [text, paged]);
+  }, [text]);
 
   const steps = Math.ceil(Math.max(0, rows - lines) / lines);
   const at = Math.max(0, rows - lines - Math.min(back, steps) * lines);
@@ -413,32 +416,24 @@ function Flow({
       ref={box}
       style={{
         lineHeight: CAPTION_LEADING,
-        ...(paged
-          ? { transform: `translateY(-${at * CAPTION_LEADING}em)` }
-          : {}),
+        transform: `translateY(-${at * CAPTION_LEADING}em)`,
       }}
-      className={cn("break-keep", paged && "transition-transform duration-200")}
+      className="break-keep transition-transform duration-200"
     >
-      {lead}
-      {text}
+      {fadeIn
+        ? // char + index: a character already drawn keeps its key and never fades twice
+          Array.from(text).map((char, index) => (
+            <span
+              key={`${char}${index}`}
+              className="animate-in fade-in duration-300 motion-reduce:animate-none"
+            >
+              {char}
+            </span>
+          ))
+        : text}
     </p>
   );
 
-  // No room for chevrons here (side captions): overflow is clipped and the fading last line is the only cue
-  if (!paged) {
-    return (
-      <div
-        style={fixed ? { height } : { maxHeight: height }}
-        className={cn(
-          "overflow-hidden mask-[linear-gradient(to_bottom,black_calc(100%-0.7rem),transparent_100%)]",
-          className,
-        )}
-      >
-        {body}
-      </div>
-    );
-  }
-
   return (
     <div className="relative flex w-full justify-center">
       <div
@@ -626,7 +621,7 @@ function Ear({
  * which has no container either, so an outline under one of the two read as the
  * line changing shape rather than changing state.
  */
-function Activity({ tool, micOff }: { tool: ToolRun; micOff: boolean }) {
+function Activity({ tool }: { tool: ActivityLine }) {
   // a relay from a bot is a flag, like the answer tool — unless it names the bot
   const relay = tool.kind === "relay";
   const Icon = relay ? Flag : toolIcon(tool.name);
@@ -662,17 +657,7 @@ function Activity({ tool, micOff }: { tool: ToolRun; micOff: boolean }) {
       {tool.done ? (
         <span className={cn(look, "text-muted-foreground")}>{text}</span>
       ) : (
-        <ShinyText text={text} speed={2.4} className={look} />
-      )}
-      {/* The mic is closed because this is running, so it travels with the line.
-          A chip, where the line has none: on the bare page a second glyph beside
-          the tool's own shares strokes with it and reads as a smudge, and the
-          plate is what says this is a state rather than more of the sentence. */}
-      {micOff && (
-        <span className="flex shrink-0 items-center gap-1 rounded-full bg-muted/60 py-0.5 pr-2 pl-1.5 font-mono text-[11px] leading-4 text-muted-foreground">
-          <MicOff className="size-3 shrink-0" />
-          mic off
-        </span>
+        <ShinyText text={text} motion="pulse" className={look} />
       )}
     </span>
   );
@@ -691,7 +676,7 @@ function Mark({
   icon: Icon,
   running,
 }: {
-  tool: ToolRun;
+  tool: ActivityLine;
   /** The row the name resolved to, when the roster has one; its look, not its identity. */
   bot: Bot | null;
   icon: LucideIcon;
@@ -703,10 +688,10 @@ function Mark({
         <BotMark
           size={16}
           seed={tool.bot}
-          vary={tool.bot}
           color={bot?.icon?.color}
           shape={bot?.icon?.shape}
           outline={bot?.icon?.outline}
+          paint={bot?.icon?.paint}
           notify={false}
         />
       </span>
@@ -724,19 +709,25 @@ function Mark({
 }
 
 /**
- * The activity slot: 28px, one fact at a time, two faces. Both stay mounted and
+ * The activity slot: 28px, one fact at a time, three faces. All stay mounted and
  * cross-fade, so the line leaves wearing its last words instead of blinking
- * out, and the caption below never moves while they trade places.
+ * out, and the caption below never moves while they trade places. A tool wins
+ * over thinking: it is the same stretch of work, said more exactly.
  */
 function ActivityRow({
   tool,
-  micOff,
+  thinkingSince,
+  thinkingTitle,
   listening,
+  ringing,
   getMicSpectrum,
 }: {
-  tool: ToolRun | null;
-  micOff: boolean;
+  tool: ActivityLine | null;
+  thinkingSince: number | null;
+  thinkingTitle: string | null;
   listening: boolean;
+  /** Only while idle, when nothing else takes the slot. */
+  ringing: Ringing | null;
   getMicSpectrum?: () => ArrayLike<number>;
 }) {
   // held past the tool so the pill has something to fade out with
@@ -744,13 +735,45 @@ function ActivityRow({
   useEffect(() => {
     if (tool) setShown(tool);
   }, [tool]);
+  // and past the thinking, for the same reason
+  const [since, setSince] = useState(thinkingSince);
+  const [title, setTitle] = useState(thinkingTitle);
+  useEffect(() => {
+    if (thinkingSince === null) return;
+    setSince(thinkingSince);
+    setTitle(thinkingTitle);
+  }, [thinkingSince, thinkingTitle]);
 
   const hearing = listening && !tool;
   return (
-    <div className="grid h-7 max-w-full items-center justify-items-center">
+    // Ringing, who calls sits right under the face, over the hint. It leaves at
+    // once rather than fading, so the hint does not slide under a fading line
+    <div
+      className={cn(
+        "grid h-7 max-w-full items-center justify-items-center",
+        ringing && "order-first",
+      )}
+    >
+      {ringing && (
+        <span className="col-start-1 row-start-1 flex max-w-full animate-in fade-in duration-500">
+          <Ringer ringing={ringing} />
+        </span>
+      )}
       {shown && (
         <Fade at="col-start-1 row-start-1 max-w-full" shown={tool !== null}>
-          <Activity tool={shown} micOff={micOff} />
+          <Activity tool={shown} />
+        </Fade>
+      )}
+      {since !== null && (
+        <Fade
+          at="col-start-1 row-start-1"
+          shown={thinkingSince !== null && !tool}
+        >
+          <Thinking
+            since={since}
+            title={title}
+            running={thinkingSince !== null && !tool}
+          />
         </Fade>
       )}
       <Fade at="col-start-1 row-start-1" shown={hearing}>
@@ -760,6 +783,45 @@ function ActivityRow({
   );
 }
 
+/**
+ * Who a ringing call-back is for: the bot's face and what it has, then the job,
+ * and how many more rang with it. The words pulse while it rings.
+ */
+function Ringer({ ringing }: { ringing: Ringing }) {
+  const bots = useServerRoute<Bot[]>(queryKey.bot).data;
+  const bot = bots?.find((one) => one.name === ringing.bot) ?? null;
+  const says =
+    ringing.kind === "question"
+      ? `${ringing.bot} has a question`
+      : ringing.kind === "done"
+        ? `Answer from ${ringing.bot}`
+        : `${ringing.bot} stopped`;
+  return (
+    <span className="flex max-w-full items-center gap-1.5 text-[13px] leading-5 text-muted-foreground">
+      <span className="grid size-4.5 shrink-0 place-items-center">
+        <BotMark
+          size={16}
+          seed={ringing.bot}
+          color={bot?.icon?.color}
+          shape={bot?.icon?.shape}
+          outline={bot?.icon?.outline}
+          paint={bot?.icon?.paint}
+          // a question or a stop waits on the user; an answer only waits to be read
+          notify={ringing.kind !== "done"}
+        />
+      </span>
+      <ShinyText text={says} motion="pulse" className="shrink-0" />
+      <span className="text-muted-foreground/40">·</span>
+      <span className="min-w-0 truncate break-keep">{ringing.label}</span>
+      {ringing.more > 0 && (
+        <span className="shrink-0 rounded-full bg-muted px-1.5 font-mono text-[10px] leading-4.5 text-foreground/70">
+          +{ringing.more}
+        </span>
+      )}
+    </span>
+  );
+}
+
 /** One face of a stacked slot. Hidden means invisible, untouchable and unread. */
 function Fade({
   at,
@@ -784,25 +846,43 @@ function Fade({
   );
 }
 
+/** Why a call ended, as the hint says it. */
+const ENDED: Record<CallEnd, string> = {
+  quiet: `${CALL_IDLE.hangUpMs / 1000}s of quiet`,
+  hungUp: "Thursday hung up",
+  closed: "Live closed the call",
+  dropped: "the connection dropped",
+};
+
 /**
  * The only hint line on screen. Says one thing at a time; outside a call it
- * shows one way in (wake phrase or hotkey), inside a call how to end and the
- * elapsed time. Keyed so changes fade.
+ * shows why the last one ended when the user did not end it, else one way in
+ * (wake phrase or hotkey); inside a call how to end and the elapsed time. Keyed
+ * so changes fade.
  */
 function Hint({
   status,
   idleLeft,
   since,
+  ended,
+  behind,
+  ringing,
+  onDecline,
   wakePhrase,
   hotkeyLabel,
 }: {
   status: CallStatus;
   idleLeft: number | null;
   since: number | null;
+  ended: CallEnd | null;
+  /** The side captions are on an earlier turn. */
+  behind: boolean;
+  ringing: boolean;
+  onDecline?: () => void;
   wakePhrase: string | null;
   hotkeyLabel: string | null;
 }) {
-  const busy = status === "connecting";
+  const busy = status === "connecting" || status === "ending";
   const live = status !== "idle" && !busy;
 
   let body: React.ReactNode;
@@ -813,6 +893,7 @@ function Hint({
     body = (
       <ShinyText
         text={status === "connecting" ? "Connecting…" : "Ending…"}
+        motion="pulse"
         className="text-muted-foreground/70"
       />
     );
@@ -820,12 +901,50 @@ function Hint({
     key = "quiet";
     body = `Quiet — ending in ${idleLeft}s. Say anything to stay.`;
   } else if (live) {
-    key = "live";
+    key = behind ? "behind" : "live";
     body = (
       <>
         <span>Tap Thursday to end</span>
         <span className="text-muted-foreground/40">·</span>
-        <Elapsed since={since} />
+        {behind ? (
+          <>
+            <kbd className="rounded-md border border-border bg-background px-1.5 py-0.5 font-mono text-[10px] text-foreground/80 shadow-[0_1px_0_var(--border)]">
+              ↓
+            </kbd>
+            <span>back to now</span>
+          </>
+        ) : (
+          <Elapsed since={since} />
+        )}
+      </>
+    );
+  } else if (ringing) {
+    key = "ringing";
+    // Every way in answers, so the tap stands for them all; declining is the one other act
+    body = (
+      <>
+        <span>Tap Thursday to answer</span>
+        <span className="text-muted-foreground/40">·</span>
+        <button
+          type="button"
+          onClick={onDecline}
+          className="flex items-center gap-1.5 rounded-full bg-muted py-0.5 pr-0.5 pl-2 text-foreground/80 transition-colors hover:bg-accent"
+        >
+          Not now
+          <kbd className="rounded-md border border-border bg-background px-1.5 font-mono text-[10px] text-foreground/70 shadow-[0_1px_0_var(--border)]">
+            Esc
+          </kbd>
+        </button>
+      </>
+    );
+  } else if (ended) {
+    key = `ended:${ended}`;
+    // Where the quiet warning stood, until the next call
+    body = (
+      <>
+        <span>Ended — {ENDED[ended]}</span>
+        <span className="text-muted-foreground/40">·</span>
+        <span>Tap to call again</span>
       </>
     );
   } else if (wakePhrase) {
@@ -910,7 +1029,6 @@ function NeedsKey({
         <BotMark
           size={24}
           seed={DEFAULT_BOT.name}
-          vary={DEFAULT_BOT.name}
           color={DEFAULT_BOT.icon?.color}
           shape={DEFAULT_BOT.icon?.shape}
           outline={DEFAULT_BOT.icon?.outline}
@@ -928,6 +1046,63 @@ function NeedsKey({
   );
 }
 
+/**
+ * The backend has the turn: the activity line says so and counts, so the
+ * seconds before a tool and before her voice never read as a call that has
+ * stopped. Once a reasoning summary names what the work is, the line says that
+ * instead. It shines where the rest of this screen pulses (the user's pick). The
+ * seconds arrive after the first one, which is most answers.
+ */
+function Thinking({
+  since,
+  title,
+  running,
+}: {
+  since: number;
+  title: string | null;
+  running: boolean;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  // Stays mounted to fade out; the count stops with it rather than ticking unseen
+  useEffect(() => {
+    if (!running) return;
+    // back from a tool, the first reading is now rather than where it paused
+    const first = setTimeout(() => setNow(Date.now()), 0);
+    const tick = setInterval(() => setNow(Date.now()), 1000);
+    return () => {
+      clearTimeout(first);
+      clearInterval(tick);
+    };
+  }, [running]);
+  const seconds = Math.max(0, Math.floor((now - since) / 1000));
+  const words = title ? `Thinking about ${midSentence(title)}` : "Thinking…";
+  return (
+    <span className="flex max-w-full items-center gap-1.5 text-[13px] leading-5">
+      {/* keyed so a new title fades in rather than replacing the words mid-sweep */}
+      <ShinyText
+        key={words}
+        text={words}
+        className="min-w-0 animate-in truncate fade-in duration-300"
+      />
+      {seconds >= 1 && (
+        <>
+          <span className="shrink-0 text-muted-foreground/40">·</span>
+          <span className="shrink-0 text-muted-foreground tabular-nums">
+            {seconds}s
+          </span>
+        </>
+      )}
+    </span>
+  );
+}
+
+/** A title read mid-sentence: "Checking thread status" becomes "checking thread status"; "API limits" stays. */
+function midSentence(title: string) {
+  return /^\p{Lu}\p{Lu}/u.test(title)
+    ? title
+    : title.charAt(0).toLowerCase() + title.slice(1);
+}
+
 /** Time since the line opened, mm:ss; only this span re-renders each second. */
 function Elapsed({ since }: { since: number | null }) {
   const [now, setNow] = useState(() => Date.now());
@@ -947,160 +1122,21 @@ function Elapsed({ since }: { since: number | null }) {
   );
 }
 
-/** Turns shown at once. */
-const VISIBLE = 3;
-
-/**
- * Wheel delta per turn. Deliberately heavy — a turn is a paragraph, and a
- * trackpad flick that pages three of them reads as losing the conversation
- * rather than moving through it. The give is what says it is not stuck.
- */
-const STEP = 360;
-
-/** How far the plates lean while the wheel is short of a turn, px. */
-const GIVE = 10;
-
-/** How long the wheel keeps what it has gathered. Past this the lean springs back and the count starts over, so half a turn never waits around to be completed by the next flick. */
-const SETTLE_MS = 220;
-
-/**
- * Where the wheel has wound the turns back to. Lives on the screen rather than
- * in the plates: the three plates are small and sit off to the sides, so a
- * wheel over the face — where the cursor is — used to reach nothing at all.
- */
-function useTurnPager(messages: CallMessage[]) {
-  const [back, setBack] = useState(0);
-  const [give, setGive] = useState(0);
-  const drag = useRef(0);
-  const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const seen = useRef(messages.length);
-
-  const furthest = Math.max(0, messages.length - VISIBLE);
-
-  // stay on the turn being read when new turns arrive
-  useEffect(() => {
-    const grew = messages.length - seen.current;
-    seen.current = messages.length;
-    if (grew > 0) {
-      setBack((was) => (was > 0 ? Math.min(was + grew, furthest) : 0));
-    }
-  }, [messages.length, furthest]);
-
-  useEffect(
-    () => () => {
-      if (settle.current) clearTimeout(settle.current);
-    },
-    [],
-  );
-
-  const onWheel = (event: React.WheelEvent) => {
-    // nothing behind the three on screen: no travel, and no lean pretending there is
-    if (furthest === 0) return;
-    drag.current += event.deltaY;
-    const steps = Math.trunc(drag.current / STEP);
-    if (steps !== 0) {
-      drag.current -= steps * STEP;
-      setBack((was) => Math.min(furthest, Math.max(0, was - steps)));
-    }
-    setGive(drag.current / STEP);
-
-    // spring back so the give reads as resistance, not position
-    if (settle.current) clearTimeout(settle.current);
-    settle.current = setTimeout(() => {
-      drag.current = 0;
-      setGive(0);
-    }, SETTLE_MS);
-  };
-
-  const end = messages.length - back;
-  return {
-    shown: messages.slice(Math.max(0, end - VISIBLE), end),
-    give,
-    onWheel,
-  };
-}
-
-/**
- * Recent turns beside the face: yours on the right, hers on the left, each on
- * a fill with no edge. Anchored outside the face box (`right-full` /
- * `left-full`) so they never cover it. Older turns sit higher, smaller, and
- * their plate recedes.
- */
-function SideCaptions({
-  shown,
-  give,
-}: {
-  shown: CallMessage[];
-  /** How far into the next turn the wheel is, -1..1; the plates lean by it. */
-  give: number;
-}) {
-  return (
-    <>
-      {shown.map((message, index) => {
-        // the speaker fixes the side, so a turn never switches sides as older ones stack up
-        const mine = message.role === "user";
-        // 18..68 rather than 20..75: a five-line newest turn has to clear the activity line
-        const top = 18 + (index * 50) / Math.max(1, shown.length - 1);
-        const age = shown.length - 1 - index;
-        const size = atAge(CAPTION_SIZES, age);
-        const pad = atAge(CAPTION_PADS, age);
-        const fill = atAge(mine ? CAPTION_YOURS : CAPTION_HERS, age);
-        const ink = atAge(CAPTION_HERS_INK, age);
-
-        return (
-          <div
-            key={message.id}
-            style={{
-              top: `${top}%`,
-              transform: `translateY(calc(-50% + ${-give * GIVE}px))`,
-            }}
-            className={cn(
-              // fixed-width slot, natural-width plate: short lines stay short and hug the face
-              "pointer-events-auto absolute flex w-[min(23rem,24vw)] transition-transform duration-100",
-              // yours on the right, the side the settings corner already takes
-              mine ? "left-full ml-6" : "right-full mr-6 justify-end",
-            )}
-          >
-            {/* Not a `Bubble`: that sets its surface on the content from the
-                parent, at a specificity a caption cannot override. One shape,
-                two fills — and no edge on either, so the plate is the whole
-                surface. The squared corner is the one nearest the face. */}
-            <div
-              className={cn(
-                "w-fit max-w-full animate-in rounded-[18px] fade-in duration-500",
-                pad,
-                mine
-                  ? cn(
-                      "rounded-bl-md text-primary-foreground slide-in-from-left-2",
-                      fill,
-                    )
-                  : cn("rounded-br-md slide-in-from-right-2", fill, ink),
-              )}
-            >
-              {/* One truncation idiom on both sides: speech that runs past the
-                  frame fades out. An ellipsis mid-sentence reads as an error. */}
-              <Flow
-                text={message.text}
-                lines={CAPTION_TURN_LINES[age] ?? 2}
-                className={size}
-              />
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
-}
-
 export function Thursday() {
   const {
     status,
+    failed,
     messages,
     tool,
+    thinkingSince,
+    thinkingTitle,
+    ended,
+    faceWord,
     idleLeft,
     since,
-    micOff,
     call,
+    ringing,
+    decline,
     getSpectrum,
     getMicSpectrum,
     wakePhrase,
@@ -1117,24 +1153,29 @@ export function Thursday() {
    * can change during a call (NeedsKey). Unknown counts as not callable.
    */
   const { data: config } = useServerRoute<ConfigStatus[]>(queryKey.config);
-  const callable = SPEACH_MODEL_PROVIDER_LIST.some((provider) =>
-    isConfigSet(config, provider.apiKeyName),
-  );
+  const callable = isConfigSet(config, LIVE_PROVIDER.apiKeyName);
 
   return (
     <>
       {/* the tab shows the call and what is owed while the app is off-screen */}
-      <TabState live={status !== "idle"} />
+      <TabState live={status !== "idle"} ringing={ringing !== null} />
       <CallScreen
         status={status}
+        failed={failed}
         messages={messages}
         tool={tool}
+        thinkingSince={thinkingSince}
+        thinkingTitle={thinkingTitle}
+        ended={ended}
+        faceWord={faceWord}
         onTap={call}
+        // without a key the face asks for one, so nothing can answer
+        ringing={callable ? ringing : null}
+        onDecline={decline}
         wakePhrase={wakePhrase}
         hotkeyLabel={hotkeyLabel}
         idleLeft={idleLeft}
         since={since}
-        micOff={micOff}
         getSpectrum={getSpectrum}
         getMicSpectrum={getMicSpectrum}
         face={face}