thursday-agent 0.12.0 → 0.13.0

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

@@ -11,7 +11,7 @@ import {
   Wrench,
   X,
 } from "lucide-react";
-import { type ReactNode, useState } from "react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
 import {
@@ -34,6 +34,11 @@ import { ShinyText } from "@/components/ui/shiny-text";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { APP_NAME, BOT_RUN, PROMPT_CROWDED } from "@/config";
 import { ModelPicker } from "@/features/ai/components/model-picker";
 import {
@@ -74,6 +79,7 @@ import {
   mediaModelWords,
 } from "@/features/config/config.const";
 import {
+  PICKED_ROW,
   SettingDialogContent,
   SettingError,
   SettingNote,
@@ -99,9 +105,18 @@ import { revalidate, useServerRoute } from "@/lib/protocol/use-server-route";
 import { cn, formatCount, WAITING_INK } from "@/lib/utils";
 import { MARK_SHAPES, MARK_SYSTEM } from "../mark.const";
 
+/** A new bot's Create, raised from its page to the rail at the foot of the screen. */
+type DraftCreate = {
+  /** What the form still lacks, in words ("a name"); empty when it can be created. */
+  missing: string[];
+  creating: boolean;
+  submit: () => void;
+};
+
 /**
  * The bots Thursday hands background work to. Roster on the left, the picked bot's
- * page on the right. Fields save on blur or on pick; only a new bot has a Create button.
+ * page on the right. Fields save on blur or on pick; only a new bot has a Create button,
+ * in the rail at the foot where every other form keeps its own.
  */
 export function BotSetting() {
   const { data, isLoading, error } = useServerRoute<Bot[]>(queryKey.bot);
@@ -121,6 +136,7 @@ export function BotSetting() {
    * no two rosters look alike; a seed itself carries none).
    */
   const [faces] = useState(rollSeedIcons);
+  const [draft, setDraft] = useState<DraftCreate | null>(null);
 
   if (isLoading) return <SettingPanesSkeleton />;
   if (error) return <SettingError message={error.message} />;
@@ -135,7 +151,11 @@ export function BotSetting() {
 
   return (
     <SettingPanes
-      footer={bots.length === 0 ? null : <BotRail bot={current} />}
+      footer={
+        bots.length === 0 && !drafting ? null : (
+          <BotRail bot={current} draft={drafting ? draft : null} />
+        )
+      }
       left={
         <div className="flex flex-col py-2">
           {/* The two ways to get a bot, on one line and apart from the roster
@@ -147,7 +167,7 @@ export function BotSetting() {
               className={cn(
                 "flex flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
                 drafting
-                  ? "bg-secondary text-foreground"
+                  ? PICKED_ROW
                   : "text-muted-foreground hover:bg-muted/60 hover:text-foreground",
               )}
             >
@@ -190,7 +210,7 @@ export function BotSetting() {
             key="new"
             jobs={[]}
             onDone={(name) => setPicked(name)}
-            onCancel={() => setPicked(null)}
+            onDraft={setDraft}
           />
         ) : current ? (
           // Keyed by name so field state does not carry over to the next bot.
@@ -213,7 +233,7 @@ export function BotSetting() {
         ) : (
           <div className="space-y-4 p-8">
             <p className="text-sm leading-relaxed text-muted-foreground">
-              The agent talks; bots do the rest — search the web, draft a reply,
+              Thursday talks; bots do the rest — search the web, draft a reply,
               check a schedule. Give one a job and a model, and work gets handed
               over mid-call while the conversation keeps going.
             </p>
@@ -253,7 +273,7 @@ function RosterRow({
       onClick={onPick}
       className={cn(
         "mx-2 flex items-center gap-2.5 rounded-md px-2 py-2 text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:ring-inset",
-        active ? "bg-secondary" : "hover:bg-muted/60",
+        active ? PICKED_ROW : "hover:bg-muted/60",
       )}
     >
       <BotMark
@@ -424,7 +444,7 @@ function SeedRows({
               owned
                 ? "opacity-45 ring-border/60"
                 : on
-                  ? "ring-brand"
+                  ? cn(PICKED_ROW, "ring-brand")
                   : "ring-border/60",
             )}
           >
@@ -669,15 +689,15 @@ function BotPage({
   bot,
   jobs,
   onDone,
-  onCancel,
+  onDraft,
 }: {
   bot?: Bot;
   /** Recent jobs for this bot (RECENT); empty for a new bot. */
   jobs: Thread[];
   /** Created or deleted; where the roster should look next. */
   onDone: (name: string | null) => void;
-  /** New bot only: folds the form. */
-  onCancel?: () => void;
+  /** New bot only: where its Create goes, the rail at the foot (BotRail). */
+  onDraft?: (draft: DraftCreate | null) => void;
 }) {
   // Lazy init so a new bot's icon is not re-rolled per render; the page is keyed per bot.
   const [fields, patch] = useObjectState(() => ({
@@ -743,6 +763,11 @@ function BotPage({
 
   const ready =
     name.trim() && description.trim() && provider && model.trim() && !creating;
+  const missing = [
+    !name.trim() && "a name",
+    !description.trim() && "a description",
+    !(provider && model.trim()) && "a model",
+  ].filter((one): one is string => Boolean(one));
 
   const submit = () => {
     if (!ready || !provider) return;
@@ -760,11 +785,24 @@ function BotPage({
     });
   };
 
+  // The rail draws the Create: told when what it needs changes, never every render
+  const submitNow = useRef(submit);
+  submitNow.current = submit;
+  const lacking = missing.join(",");
+  useEffect(() => {
+    onDraft?.({
+      missing: lacking ? lacking.split(",") : [],
+      creating,
+      submit: () => submitNow.current(),
+    });
+  }, [onDraft, lacking, creating]);
+  useEffect(() => () => onDraft?.(null), [onDraft]);
+
   const confirmRemove = async () => {
     if (!bot) return;
     const confirmed = await notify.confirm({
       title: `Delete ${bot.name}?`,
-      description: "The agent can no longer hand work to it.",
+      description: "Thursday can no longer hand work to it.",
       okText: "Delete",
       destructive: true,
     });
@@ -785,13 +823,19 @@ function BotPage({
                 off
               </span>
             )}
-            <Switch
-              checked={!bot.disabled}
-              onCheckedChange={(on) => commit({ disabled: !on })}
-              aria-label={`${bot.name} on or off`}
-              /* mr-1 keeps it off Delete: one is a setting, the other is not. */
-              className="mr-1 shrink-0"
-            />
+            {/* what on means, said where it is switched: the word "on" alone does not */}
+            <Tooltip>
+              <TooltipTrigger render={<span className="mr-1 flex shrink-0" />}>
+                <Switch
+                  checked={!bot.disabled}
+                  onCheckedChange={(on) => commit({ disabled: !on })}
+                  aria-label={`${bot.name} on or off`}
+                />
+              </TooltipTrigger>
+              <TooltipContent side="bottom">
+                Thursday can hand it work
+              </TooltipContent>
+            </Tooltip>
             <Button
               size="icon-sm"
               variant="ghost"
@@ -951,17 +995,6 @@ function BotPage({
 
         {bot && <Recent jobs={jobs} />}
 
-        {!bot && (
-          <div className="flex items-center justify-end gap-2 pt-1">
-            <Button variant="ghost" onClick={onCancel}>
-              Cancel
-            </Button>
-            <Button loading={creating} disabled={!ready} onClick={submit}>
-              Create
-            </Button>
-          </div>
-        )}
-
         {createError && (
           <p className="font-mono text-xs text-destructive">{createError}</p>
         )}
@@ -1123,7 +1156,14 @@ const underItsRow = (content: string) =>
  * any bot's: whether bots keep their own memory, and whether their work goes on once
  * every tab is closed.
  */
-function BotRail({ bot }: { bot: Bot | null }) {
+function BotRail({
+  bot,
+  draft = null,
+}: {
+  bot: Bot | null;
+  /** A new bot on the page: its Create stands at the end of the rail. */
+  draft?: DraftCreate | null;
+}) {
   const { data: memoryOn, mutate } = useServerRoute<boolean>(
     queryKey.botMemory,
   );
@@ -1151,9 +1191,13 @@ function BotRail({ bot }: { bot: Bot | null }) {
             <span className="px-1.5 opacity-50">·</span>
             since {whenOf(bot.createdAt)}
           </span>
-        ) : (
-          "Becomes a bot once it has a name and a model"
-        )}
+        ) : draft?.missing.length ? (
+          `Needs ${
+            draft.missing.length > 1
+              ? `${draft.missing.slice(0, -1).join(", ")} and ${draft.missing.at(-1)}`
+              : draft.missing[0]
+          }`
+        ) : null}
       </SettingRailNote>
       <KeepWorkingSwitch />
       <span className="h-4 w-px shrink-0 bg-border" />
@@ -1169,6 +1213,16 @@ function BotRail({ bot }: { bot: Bot | null }) {
         }}
         aria-label="Bots keep their own memory"
       />
+      {draft && (
+        <Button
+          size="sm"
+          loading={draft.creating}
+          disabled={draft.missing.length > 0}
+          onClick={draft.submit}
+        >
+          Create bot
+        </Button>
+      )}
     </>
   );
 }

package/features/bot/components/crew-motion.ts

@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * The crew's body language: what a face does when something happens to the bot behind it.
+ *
+ * At rest every face breathes and nothing else moves. A gesture then plays ONCE, on the ONE face
+ * the event belongs to, over the breath — so the pill says what happened where it happened,
+ * instead of leaving it to the bubble that only has room for one thing at a time.
+ *
+ * A jump reads as weight only when the body and the shape run on different curves, so a face is a
+ * stack of layers (room-pill `Crew`) and a gesture names which of them it takes: `body` moves it
+ * through the air, `shape` presses and flattens it, `turn` rotates it. A layer a gesture does not
+ * name keeps doing what it was: the shape layer goes back to breathing.
+ *
+ * The keyframes are in `app/globals.css`; every duration here is the length that file cuts them to.
+ */
+
+/** What a face can be doing. `wave` is the whole row arriving; every other one happens to one bot. */
+export type Gesture =
+  | "wave"
+  | "done"
+  | "ask"
+  | "took"
+  | "give"
+  | "take"
+  | "stop"
+  | "read";
+
+/** One bot, and what its face should do. */
+export type BotGesture = { bot: string; gesture: Gesture };
+
+/** How long each runs, ms. */
+const GESTURE_MS: Record<Gesture, number> = {
+  wave: 740,
+  done: 740,
+  ask: 820,
+  took: 740,
+  give: 900,
+  take: 520,
+  stop: 1150,
+  read: 560,
+};
+
+/** The wave walks along the row: a face's own start is its place times this. */
+const WAVE_STEP_MS = 70;
+
+/** Which layer takes which animation. */
+const LAYERS: Record<
+  Gesture,
+  { body?: string; shape?: string; turn?: string }
+> = {
+  wave: { body: "animate-crew-hop", shape: "animate-crew-hop-shape" },
+  took: { body: "animate-crew-hop", shape: "animate-crew-hop-shape" },
+  done: {
+    body: "animate-crew-hop",
+    shape: "animate-crew-hop-shape",
+    turn: "animate-crew-spin",
+  },
+  ask: { body: "animate-crew-ask", turn: "animate-crew-ask-turn" },
+  give: { turn: "animate-crew-give" },
+  take: { body: "animate-crew-take", shape: "animate-crew-take-shape" },
+  stop: { body: "animate-crew-sink", shape: "animate-crew-sink-shape" },
+  read: { body: "animate-crew-nod", shape: "animate-crew-nod-shape" },
+};
+
+/** A gesture on a face, and the token that makes React start it over rather than let it run on. */
+export type Playing = { gesture: Gesture; id: number };
+
+/** What each face is in the middle of, by bot name. */
+export type CrewPlaying = Map<string, Playing>;
+
+/** What each face's layers wear this render. */
+export type CrewMotion = {
+  /** Changes with every gesture, so the layers remount and the animation restarts. */
+  key: number;
+  body: string;
+  shape: string;
+  turn: string;
+  /** Only the wave staggers; everything else starts at once on the face it belongs to. */
+  delayMs: number;
+};
+
+/** The resting state, which a gesture borrows a layer from and gives back. */
+const RESTING: CrewMotion = {
+  key: 0,
+  body: "",
+  shape: "animate-crew-breath",
+  turn: "",
+  delayMs: 0,
+};
+
+/**
+ * What one face is doing. `at` is its place in the row, which only the wave reads; a face's breath
+ * takes its phase from the same number, so a row at rest ripples instead of pulsing as one object.
+ */
+export function motionOf(playing: Playing | undefined, at: number): CrewMotion {
+  if (!playing) return { ...RESTING, delayMs: at * -370 };
+  const layers = LAYERS[playing.gesture];
+  return {
+    key: playing.id,
+    body: layers.body ?? "",
+    shape: layers.shape ?? "animate-crew-breath",
+    turn: layers.turn ?? "",
+    delayMs: playing.gesture === "wave" ? at * WAVE_STEP_MS : 0,
+  };
+}
+
+/**
+ * The gestures playing right now, and how to start more.
+ *
+ * One at a time per bot: a second event on the same face replaces the first rather than queueing,
+ * because two gestures are two layers fighting over the same transform, and the newer thing is the
+ * true one. A gesture clears itself when it is over, which is what puts the face back to resting.
+ */
+export function useCrewGestures(): [
+  CrewPlaying,
+  (played: BotGesture[]) => void,
+] {
+  const [playing, setPlaying] = useState<CrewPlaying>(new Map());
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>());
+  const token = useRef(0);
+
+  useEffect(() => {
+    const held = timers.current;
+    return () => {
+      for (const timer of held.values()) clearTimeout(timer);
+      held.clear();
+    };
+  }, []);
+
+  const play = useCallback((played: BotGesture[]) => {
+    if (!played.length) return;
+    setPlaying((was) => {
+      const now = new Map(was);
+      for (const { bot, gesture } of played) {
+        token.current += 1;
+        now.set(bot, { gesture, id: token.current });
+        const running = timers.current.get(bot);
+        if (running) clearTimeout(running);
+        timers.current.set(
+          bot,
+          setTimeout(
+            () => {
+              timers.current.delete(bot);
+              setPlaying((held) => {
+                const next = new Map(held);
+                next.delete(bot);
+                return next;
+              });
+              // The wave's last face starts a row-length after the first one does.
+            },
+            GESTURE_MS[gesture] + (gesture === "wave" ? WAVE_STEP_MS * 20 : 0),
+          ),
+        );
+      }
+      return now;
+    });
+  }, []);
+
+  return [playing, play];
+}

package/features/bot/components/mark-palette.tsx

@@ -11,8 +11,7 @@ import {
 
 /**
  * A mark's colours in one line under the face they paint: the theme dot, the
- * colours, then the paints. Thursday's face and a bot's page both pick from it;
- * they differ only in what the dot means.
+ * colours, then the paints. On a narrow bot page the dots shrink rather than wrap.
  */
 export function MarkPalette({
   color,
@@ -31,7 +30,8 @@ export function MarkPalette({
   onPaint?: (paint: MarkPaint) => void;
 }) {
   return (
-    <div className="flex flex-wrap items-center justify-center gap-2 px-2">
+    // As wide as the page, not as its dots: they shrink to it rather than push past it
+    <div className="flex w-full items-center justify-center gap-1.5 px-2">
       <Swatch color={null} picked={themePicked} onPick={onTheme} />
       {MARK_PALETTE.map((each) => (
         <Swatch

package/features/bot/components/room-conversation.tsx

@@ -41,7 +41,6 @@ import {
   type BotRef,
   type Chatter,
   heardBy,
-  rosterOf,
   type ThreadItem,
   type ThreadView,
   type ThreadViewStatus,
@@ -100,12 +99,6 @@ export function ThreadHeader({
       />
       <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
         {thread.label}
-        <span
-          title={thread.id}
-          className="ml-1.5 font-mono text-[10px] font-normal text-muted-foreground/60"
-        >
-          {thread.id.slice(0, 8)}
-        </span>
       </span>
       <ThreadFacts thread={thread} />
       <FoldButton onClick={onClose} />
@@ -273,7 +266,7 @@ export function Conversation({
 }) {
   const scroller = useRef<HTMLDivElement>(null);
   const following = useRef(true);
-  const roster = rosterOf(thread);
+  const roster = thread.roster;
   const side =
     onTab && tab !== thread.bot.name && roster.some((bot) => bot.name === tab)
       ? tab
@@ -295,6 +288,18 @@ export function Conversation({
     if (box && following.current) box.scrollTop = box.scrollHeight;
   }, [thread.lines, thread.status, side]);
 
+  // A page or a picture under a message is drawn a moment after the words and grows the
+  // turn it is under: without this the last tiles end up behind the composer
+  useEffect(() => {
+    const box = scroller.current;
+    if (!box) return;
+    const watch = new ResizeObserver(() => {
+      if (following.current) box.scrollTop = box.scrollHeight;
+    });
+    for (const child of Array.from(box.children)) watch.observe(child);
+    return () => watch.disconnect();
+  }, [items.length, thread.lines, side]);
+
   return (
     // One FileViewer per conversation, not per bubble.
     <FileViewer>

package/features/bot/components/room-list.tsx

@@ -28,15 +28,19 @@ import { RoutineMark } from "@/features/routine/components/routine-mark";
 import { type DateLike, shortAgo, toDate } from "@/lib/date-like";
 import { type ServerPages } from "@/lib/protocol/use-server-pages";
 import { cn, plainText, WAITING_INK } from "@/lib/utils";
-import { lastSaid, rosterOf, type ThreadView } from "../thread.store";
+import { lastSaid, type ThreadView } from "../thread.store";
 import { FoldButton, TAB } from "./room-conversation";
 
 /** The room open on its lists: what is happening now, and the history behind it. Split out of bot-room by subject; see it for the room as a whole. */
 
 export const needsYou = needsThreadReply;
 
-/** An ending nobody has opened. It needs the user too, to read rather than to answer. */
-const isUnread = (thread: ThreadView) =>
+/**
+ * An ending nobody has opened. It needs the user too, to read rather than to
+ * answer. Takes the two fields it reads, as `needsThreadReply` does, so a
+ * stored row answers it as well as a drawn one.
+ */
+export const isUnread = (thread: { status: string; seen: boolean }) =>
   thread.status === "done" && !thread.seen;
 
 /** The room's two lists. */
@@ -359,7 +363,7 @@ export function ThreadRow({
             outline={thread.bot.icon?.outline}
             paint={thread.bot.icon?.paint}
             state={thread.status === "working" ? "thinking" : "idle"}
-            notify={attention}
+            notify={attention || isUnread(thread)}
             crossed={thread.status === "cancelled"}
           />
         </span>
@@ -398,7 +402,7 @@ export function ThreadRow({
                 <RoutineMark className="size-3 text-muted-foreground/80" />
               </span>
             )}
-            <BotRoster bots={rosterOf(thread)} />
+            <BotRoster bots={thread.roster} />
             <span className="flex-1" />
             <span className="shrink-0 font-mono text-[11px] leading-4 text-muted-foreground/70 tabular-nums">
               {shortAgo(thread.updatedAt)}