thursday-agent 0.4.0 → 0.6.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

@@ -20,17 +20,21 @@ 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. 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;
   /** 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 +43,7 @@ export type FaceProps = {
 const MARK_STATE: Record<CallStatus, MarkState> = {
   idle: "idle",
   connecting: "connecting",
+  ending: "connecting",
   listening: "listening",
   speaking: "speaking",
   working: "thinking",
@@ -63,7 +68,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 +83,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 +95,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 +113,23 @@ 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,
+  size,
+  getSpectrum,
+  getMicSpectrum,
+  look,
+  className,
+}: FaceProps) {
   const dark = useResolvedTheme() === "dark";
   return (
     <AsciiOrb
-      mode={ORB_MODE[status]}
+      mode={failed ? "error" : ORB_MODE[status]}
       size={size}
       color={dark ? ORB_DARK : ORB_LIGHT}
       getSpectrum={getSpectrum}
+      getMicSpectrum={getMicSpectrum}
       charset={look.charset}
       fontSize={look.fontSize}
       density={look.density}
@@ -136,9 +161,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/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.
@@ -57,7 +57,7 @@ export function tabIconSvg(alert: SectionAlert): string {
  * changing re-renders only this.
  */
 export function TabState({ live }: { live: boolean }) {
-  const { owed } = useTaskReport();
+  const { owed } = useThreadReport();
   const alerts = useSectionAlerts();
   const alert = worstAlert(Object.values(alerts).map((each) => each ?? null));
 

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}
     />