thursday-agent 0.4.0 → 0.6.0

package/features/thursday/components/thursday.tsx

@@ -4,6 +4,7 @@ import {
   ChevronDown,
   ChevronUp,
   Flag,
+  Loader2,
   type LucideIcon,
   Mic,
   MicOff,
@@ -21,7 +22,7 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { SPEACH_MODEL_PROVIDER_LIST } from "@/features/ai/model.schema";
+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";
@@ -45,7 +46,10 @@ import {
   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,
+  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";
@@ -63,9 +67,13 @@ 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;
   onTap: () => void;
   /** Wake phrase; null when the tap is the only entry point. */
   wakePhrase?: string | null;
@@ -75,8 +83,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 +95,15 @@ export type CallScreenProps = {
 
 export function CallScreen({
   status,
+  failed = false,
   messages,
   tool,
+  thinkingSince = null,
   onTap,
   wakePhrase = null,
   hotkeyLabel = null,
   idleLeft = null,
   since = null,
-  micOff = false,
   getSpectrum,
   getMicSpectrum,
   captionView = "center",
@@ -106,8 +113,8 @@ 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 =
@@ -152,7 +159,9 @@ export function CallScreen({
             <Face
               look={face}
               status={status}
+              failed={failed}
               getSpectrum={getSpectrum}
+              getMicSpectrum={getMicSpectrum}
               className="w-full"
             />
           </button>
@@ -169,8 +178,8 @@ export function CallScreen({
               (use-thursday). */}
           <ActivityRow
             tool={tool}
-            micOff={micOff}
-            listening={status === "listening"}
+            thinkingSince={thinkingSince}
+            listening={status === "listening" && thinkingSince === null}
             getMicSpectrum={getMicSpectrum}
           />
 
@@ -180,6 +189,7 @@ export function CallScreen({
             text={sided || status === "idle" ? "" : hers}
             fixed
             paged
+            fadeIn
             className="w-full max-w-160 text-center text-base"
           />
 
@@ -213,7 +223,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 +233,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;
 
@@ -333,7 +343,7 @@ const CAPTION_PADS = ["px-4 py-3", "px-3.5 py-2.5", "px-3 py-2"];
  * 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
+ * Yours is the surface `Bubble` already gives your words in a 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.
  */
@@ -368,6 +378,7 @@ function Flow({
   lines = CAPTION_LINES,
   fixed = false,
   paged = false,
+  fadeIn = false,
   className,
 }: {
   text: string;
@@ -378,6 +389,8 @@ function Flow({
   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);
@@ -420,7 +433,17 @@ function Flow({
       className={cn("break-keep", paged && "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>
   );
 
@@ -626,7 +649,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 +685,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 +704,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 +716,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,18 +737,19 @@ 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,
   listening,
   getMicSpectrum,
 }: {
-  tool: ToolRun | null;
-  micOff: boolean;
+  tool: ActivityLine | null;
+  thinkingSince: number | null;
   listening: boolean;
   getMicSpectrum?: () => ArrayLike<number>;
 }) {
@@ -744,13 +758,26 @@ function ActivityRow({
   useEffect(() => {
     if (tool) setShown(tool);
   }, [tool]);
+  // and past the thinking, for the same reason
+  const [since, setSince] = useState(thinkingSince);
+  useEffect(() => {
+    if (thinkingSince !== null) setSince(thinkingSince);
+  }, [thinkingSince]);
 
   const hearing = listening && !tool;
   return (
     <div className="grid h-7 max-w-full items-center justify-items-center">
       {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} running={thinkingSince !== null && !tool} />
         </Fade>
       )}
       <Fade at="col-start-1 row-start-1" shown={hearing}>
@@ -802,7 +829,7 @@ function Hint({
   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 +840,7 @@ function Hint({
     body = (
       <ShinyText
         text={status === "connecting" ? "Connecting…" : "Ending…"}
+        motion="pulse"
         className="text-muted-foreground/70"
       />
     );
@@ -910,7 +938,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 +955,44 @@ 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. A spinner fits here as it did not on a tool: there is no glyph yet
+ * for it to take off the screen. The seconds arrive after the first one, which
+ * is most answers.
+ */
+function Thinking({ since, running }: { since: number; 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));
+  return (
+    <span className="flex max-w-full items-center gap-1.5 text-[13px] leading-5">
+      {/* the 18px slot a tool's glyph takes over when one starts */}
+      <span className="grid size-[18px] shrink-0 place-items-center">
+        <Loader2 className="size-3.5 animate-spin text-muted-foreground" />
+      </span>
+      <ShinyText text="Thinking…" motion="pulse" />
+      {seconds >= 1 && (
+        <>
+          <span className="text-muted-foreground/40">·</span>
+          <span className="text-muted-foreground tabular-nums">{seconds}s</span>
+        </>
+      )}
+    </span>
+  );
+}
+
 /** 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());
@@ -1095,11 +1160,12 @@ function SideCaptions({
 export function Thursday() {
   const {
     status,
+    failed,
     messages,
     tool,
+    thinkingSince,
     idleLeft,
     since,
-    micOff,
     call,
     getSpectrum,
     getMicSpectrum,
@@ -1117,9 +1183,7 @@ 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 (
     <>
@@ -1127,14 +1191,15 @@ export function Thursday() {
       <TabState live={status !== "idle"} />
       <CallScreen
         status={status}
+        failed={failed}
         messages={messages}
         tool={tool}
+        thinkingSince={thinkingSince}
         onTap={call}
         wakePhrase={wakePhrase}
         hotkeyLabel={hotkeyLabel}
         idleLeft={idleLeft}
         since={since}
-        micOff={micOff}
         getSpectrum={getSpectrum}
         getMicSpectrum={getMicSpectrum}
         face={face}

package/features/thursday/components/voice-picker.tsx

@@ -0,0 +1,255 @@
+"use client";
+
+import { Check, ChevronDown, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input, inputClassName } from "@/components/ui/input";
+import { ShinyText } from "@/components/ui/shiny-text";
+import { toast } from "@/components/ui/toast";
+import {
+  LIVE_VOICE_NOTE,
+  LIVE_VOICES,
+  voiceSamplePath,
+} from "@/features/ai/live.schema";
+import { Face } from "@/features/thursday/components/face";
+import type { ThursdayFace } from "@/features/thursday/thursday.schema";
+import { createClipTap, SPECTRUM_BANDS } from "@/lib/live/live.tap";
+import { cn, errorToString } from "@/lib/utils";
+
+/**
+ * Choosing a voice by ear. A name plays its recorded line and her own face
+ * speaks it — the same component and the same bands a call moves her with, so
+ * what you hear and see here is what the call will be. Only Save writes, so
+ * hearing eleven voices stores none of them.
+ */
+
+const SILENT = new Array<number>(SPECTRUM_BANDS).fill(0);
+
+export function VoicePicker({
+  voice,
+  face,
+  onChange,
+}: {
+  /** The saved voice: what the next call opens with. */
+  voice: string;
+  face: ThursdayFace;
+  onChange: (voice: string) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const [heard, setHeard] = useState(voice);
+  const [playing, setPlaying] = useState(false);
+  const [typed, setTyped] = useState("");
+
+  const clip = useRef<HTMLAudioElement>(null);
+  // A tap belongs to the element it routes, which exists only while the picker is open.
+  const tap = useRef<{
+    element: HTMLAudioElement;
+    clip: ReturnType<typeof createClipTap>;
+  } | null>(null);
+  // Each play and each stop takes the next number; a failure reported for an
+  // earlier one changes nothing.
+  const plays = useRef(0);
+  // The face reads the spectrum once per animation frame, so what it reads is a
+  // ref, not state: a stable function, and silence when nothing is playing.
+  const sounding = useRef(false);
+  const spectrum = useCallback(
+    () => (tap.current && sounding.current ? tap.current.clip.read() : SILENT),
+    [],
+  );
+  const showPlaying = (on: boolean) => {
+    sounding.current = on;
+    setPlaying(on);
+  };
+
+  // The element goes when the picker closes; its graph goes with it.
+  useEffect(() => {
+    if (!open) return;
+    return () => {
+      const held = tap.current;
+      tap.current = null;
+      if (!held) return;
+      held.element.pause();
+      void held.clip.close();
+    };
+  }, [open]);
+
+  const failed = (play: number, cause: unknown) => {
+    if (play !== plays.current) return;
+    plays.current++;
+    showPlaying(false);
+    toast.add({
+      type: "error",
+      title: "Voice sample did not play",
+      description: errorToString(cause),
+    });
+  };
+
+  const stop = () => {
+    plays.current++;
+    const audio = clip.current;
+    if (audio) {
+      audio.pause();
+      audio.currentTime = 0;
+    }
+    showPlaying(false);
+  };
+
+  const audition = (next: string) => {
+    const audio = clip.current;
+    if (!audio) return;
+    if (playing && next === heard) {
+      stop();
+      return;
+    }
+    setHeard(next);
+    setTyped("");
+    // The graph is built inside the gesture that plays: an AudioContext made
+    // before one is refused. An element is routed once, so it keeps its tap.
+    if (tap.current?.element !== audio) {
+      void tap.current?.clip.close();
+      tap.current = { element: audio, clip: createClipTap(audio) };
+    }
+    void tap.current.clip.resume();
+    const play = ++plays.current;
+    audio.src = voiceSamplePath(next);
+    showPlaying(true);
+    void audio.play().catch((cause: unknown) => {
+      // A later click or a stop cut this one short; that play owns the state.
+      if (cause instanceof DOMException && cause.name === "AbortError") return;
+      failed(play, cause);
+    });
+  };
+
+  const close = () => {
+    stop();
+    setOpen(false);
+    setTyped("");
+    setHeard(voice);
+  };
+
+  const save = () => {
+    const picked = typed.trim() || heard;
+    stop();
+    setOpen(false);
+    setTyped("");
+    setHeard(picked);
+    if (picked !== voice) onChange(picked);
+  };
+
+  if (!open) {
+    return (
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        aria-label="Voice"
+        className={cn(
+          inputClassName,
+          "flex items-center gap-2 text-left font-mono text-sm hover:border-ring",
+        )}
+      >
+        <span className="shrink-0">{voice}</span>
+        <span className="min-w-0 truncate text-[11px] text-muted-foreground">
+          {LIVE_VOICE_NOTE[voice as keyof typeof LIVE_VOICE_NOTE]}
+        </span>
+        <ChevronDown className="ml-auto size-3.5 shrink-0 text-muted-foreground" />
+      </button>
+    );
+  }
+
+  return (
+    <div className="@container space-y-2">
+      {/* Nothing here plays through the page's own speakers but this element. */}
+      <audio
+        ref={clip}
+        onEnded={() => showPlaying(false)}
+        // A clip that breaks after it starts fails here, not in play()
+        onError={(event) => {
+          if (!sounding.current) return;
+          failed(
+            plays.current,
+            event.currentTarget.error?.message || "The clip could not be read.",
+          );
+        }}
+      >
+        <track kind="captions" />
+      </audio>
+
+      <div className="rounded-xl border border-border/60 p-3">
+        <div className="mb-2 flex items-center gap-2">
+          <span className="font-mono text-[11px] text-muted-foreground">
+            click a name to hear it
+          </span>
+          <Button
+            variant="ghost"
+            size="icon-xs"
+            className="ml-auto"
+            aria-label="Close"
+            onClick={close}
+          >
+            <X />
+          </Button>
+        </div>
+
+        <div className="grid gap-4 @md:grid-cols-[11rem_minmax(0,1fr)]">
+          <div className="flex flex-col items-center gap-2">
+            <Face
+              look={face}
+              status={playing ? "speaking" : "idle"}
+              getSpectrum={spectrum}
+              size={176}
+              className="w-44"
+            />
+            <span className="text-sm font-medium">
+              {playing ? <ShinyText text={heard} /> : heard}
+            </span>
+            <span className="h-4 font-mono text-[11px] text-muted-foreground">
+              {LIVE_VOICE_NOTE[heard as keyof typeof LIVE_VOICE_NOTE]}
+            </span>
+          </div>
+
+          <div className="max-h-56 min-w-0 overflow-y-auto">
+            {LIVE_VOICES.map((name) => (
+              <button
+                type="button"
+                key={name}
+                onClick={() => audition(name)}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-md px-1.5 py-1.5 text-sm outline-none hover:bg-accent focus-visible:bg-accent",
+                  name === heard && "bg-accent text-accent-foreground",
+                )}
+              >
+                <span className="flex-1 text-left">
+                  {playing && name === heard ? <ShinyText text={name} /> : name}
+                </span>
+                <span className="shrink truncate font-mono text-[11px] text-muted-foreground">
+                  {LIVE_VOICE_NOTE[name]}
+                </span>
+                <Check
+                  className={cn(
+                    "size-3.5 shrink-0",
+                    name === voice ? "opacity-100" : "opacity-0",
+                  )}
+                />
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* A voice id that is not on the list still runs; it simply has no clip. */}
+      <div className="flex gap-2">
+        <Input
+          value={typed}
+          onChange={(event) => setTyped(event.target.value)}
+          placeholder="another voice id"
+          aria-label="Another voice id"
+          spellCheck={false}
+          className="font-mono text-sm"
+        />
+        <Button className="shrink-0" onClick={save}>
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}