thursday-agent 0.12.0 → 0.13.0

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

@@ -24,6 +24,12 @@ import {
 } from "@/components/ui/tooltip";
 import { type Bot, type BotIcon, isAppStop } from "@/features/bot/bot.schema";
 import { BotMark } from "@/features/bot/components/bot-mark";
+import {
+  type BotGesture,
+  type CrewMotion,
+  type CrewPlaying,
+  motionOf,
+} from "@/features/bot/components/crew-motion";
 import { ThursdayMark } from "@/features/thursday/components/thursday-mark";
 import { cn, plainText, WAITING_INK } from "@/lib/utils";
 import { MARK_PALETTE, MARK_SHAPES } from "../mark.const";
@@ -31,7 +37,6 @@ import {
   type BotRef,
   type Chatter,
   latestPerBot,
-  rosterOf,
   type ThreadView,
   type ThreadViewStatus,
   useWriteLineUp,
@@ -39,12 +44,12 @@ import {
 } from "../thread.store";
 
 import { leadOf, stepOf, THURSDAY } from "./room-conversation";
-import { ThreadRow } from "./room-list";
+import { isUnread, ThreadRow } from "./room-list";
 
 /** The room folded: the pill at the foot of the call screen, the faces on it, and what passed between two parties riding above one for a moment. Split out of bot-room by subject; see it for the room as a whole. */
 
-/** Faces the row draws before the count takes over. */
-const CREW_MAX = 10;
+/** Faces the row draws before it starts hiding them (the user's pick). */
+const CREW_MAX = 14;
 
 /** How long a hand-off stays above a face, ms. */
 const HANDOFF_MS = 3400;
@@ -58,8 +63,10 @@ type CrewFace = {
   icon?: BotIcon | null;
   /** Working or waiting: both are awake. */
   awake: boolean;
-  /** Waiting on an answer; carries the dot. */
+  /** Waiting on an answer; carries the amber dot. */
   waiting: boolean;
+  /** A result of its nobody has opened; carries the blue one. */
+  unread: boolean;
   /** The step it is on, in the model's own words. Null when it is not working. */
   word: string | null;
   /** A stand-in for an install with no bots; dimmed with the rest. */
@@ -174,6 +181,10 @@ export function participantStates(threads: ThreadView[]): Map<string, string> {
  * stand for a sync: a failure, then a question, then an ending or a stop, then
  * messages, then a job arriving, an answer, a bot finishing its part or going
  * back to work.
+ *
+ * The same pass says what each face should do about it (`crew-motion`). One sync
+ * shows one bubble but every gesture it turned up, because a gesture sits on the
+ * face it belongs to and two of them never cover each other.
  */
 export function happenedIn(
   thread: ThreadView,
@@ -181,15 +192,38 @@ export function happenedIn(
   had: Set<string>,
   stood: Map<string, string>,
   stands: Map<string, string>,
-): Happening[] {
+): { moments: Happening[]; gestures: BotGesture[] } {
+  const own = thread.bot;
+  const felt: BotGesture[] = [];
+  // A thread this sync is the first to see — just opened, or back in the inbox
+  // after dropping out of it — has no history here, so every line in it would
+  // read as having just happened. Being taken on is the news; nothing else is.
+  if (!was) {
+    return thread.status === "working"
+      ? {
+          moments: [
+            {
+              rank: 1,
+              at: own.name,
+              from: THURSDAY,
+              to: [own],
+              text: `took on “${clipWord(thread.label)}”`,
+            },
+          ],
+          gestures: [{ bot: own.name, gesture: "took" }],
+        }
+      : { moments: [], gestures: [] };
+  }
+
   const out: Happening[] = [];
   const fresh = thread.lines.filter((line) => !had.has(line.id));
-  const own = thread.bot;
 
   // Bot to bot. A giver handing work to several at once is one bubble naming them all.
   const rounds = new Map<string, Chatter[]>();
   for (const line of fresh) {
     if (line.kind === "user") {
+      if (line.steppedIn) felt.push({ bot: line.bot.name, gesture: "read" });
+      else felt.push({ bot: line.bot.name, gesture: "took" });
       out.push(
         line.steppedIn
           ? // the words were up while they waited (waitingStepIn); read, the bot says so
@@ -209,6 +243,7 @@ export function happenedIn(
             },
       );
     } else if (line.kind === "stop") {
+      felt.push({ bot: line.bot.name, gesture: "stop" });
       out.push({
         rank: 3,
         at: line.bot.name,
@@ -218,6 +253,7 @@ export function happenedIn(
         text: leadOf(line.text),
       });
     } else if (line.kind === "ask" && line.to?.name === THURSDAY.name) {
+      if (line.question) felt.push({ bot: line.bot.name, gesture: "ask" });
       out.push(
         line.question
           ? {
@@ -245,6 +281,9 @@ export function happenedIn(
     for (const line of round) {
       if (line.to) reached.set(line.to.name, line.to);
     }
+    felt.push({ bot: giver, gesture: "give" });
+    for (const bot of reached.values())
+      felt.push({ bot: bot.name, gesture: "take" });
     out.push({
       rank: 2,
       at: giver,
@@ -258,7 +297,7 @@ export function happenedIn(
   }
 
   // Another bot done with its part and no last word; the thread's own ending is the job's.
-  for (const bot of rosterOf(thread)) {
+  for (const bot of thread.roster) {
     const key = `${thread.id}\n${bot.name}`;
     if (
       bot.name !== own.name &&
@@ -270,6 +309,7 @@ export function happenedIn(
           (line.kind === "ask" || line.kind === "say"),
       )
     ) {
+      felt.push({ bot: bot.name, gesture: "done" });
       out.push({
         rank: 1,
         at: bot.name,
@@ -281,21 +321,10 @@ export function happenedIn(
     }
   }
 
-  if (!was) {
-    if (thread.status === "working") {
-      out.push({
-        rank: 1,
-        at: own.name,
-        from: THURSDAY,
-        to: [own],
-        text: `took on “${clipWord(thread.label)}”`,
-      });
-    }
-    return out;
-  }
-  if (was === thread.status) return out;
+  if (was === thread.status) return { moments: out, gestures: felt };
   const label = clipWord(thread.label);
   if (thread.status === "cancelled") {
+    felt.push({ bot: own.name, gesture: "stop" });
     out.push({
       rank: 3,
       at: own.name,
@@ -306,10 +335,13 @@ export function happenedIn(
     });
   } else if (thread.status === "done") {
     // A job's own ending is the card in the screen's left corner (artifact-view); the pill
-    // keeps its bubbles for what is still going on
+    // keeps its bubbles for what is still going on. The face still says it happened — a
+    // somersault is on the bot, not over it, so it never stands where the card's notice would.
+    felt.push({ bot: own.name, gesture: "done" });
   } else if (thread.status === "working") {
     // Words from the user already have their bubble.
     if (!fresh.some((line) => line.kind === "user")) {
+      felt.push({ bot: own.name, gesture: "took" });
       out.push({
         rank: 1,
         at: own.name,
@@ -324,6 +356,7 @@ export function happenedIn(
     !out.some((one) => one.sign === "question" || one.sign === "stopped")
   ) {
     // A stop with no stop line of its own: the turn limit, or a room gone idle
+    felt.push({ bot: own.name, gesture: "stop" });
     out.push({
       rank: 3,
       at: own.name,
@@ -333,7 +366,7 @@ export function happenedIn(
       text: "paused",
     });
   }
-  return out;
+  return { moments: out, gestures: felt };
 }
 
 /** The step a bot is on, as the model labelled it. */
@@ -346,7 +379,7 @@ function wordOf(line: Chatter | null): string | null {
 /**
  * Who is in the row, in the order it is drawn.
  *
- * Anyone moving sorts to the front, so the count at the tail only ever hides
+ * Anyone moving sorts to the front, so the mark at the tail only ever hides
  * idle bots — a bot with something to say always has a face to say it from,
  * which is what lets a hand-off point at one. A bot that spoke inside somebody
  * else's job is in the room too, whether or not it owns a thread (latestPerBot).
@@ -355,6 +388,10 @@ export function crewOf(
   bots: Bot[] | undefined,
   threads: ThreadView[],
 ): { crew: CrewFace[]; more: number } {
+  // What is finished and unopened is the other thing a face can carry (the user's pick)
+  const unread = new Set(
+    threads.filter(isUnread).map((thread) => thread.bot.name),
+  );
   const live = new Map<string, { waiting: boolean; word: string | null }>();
   for (const entry of latestPerBot(threads)) {
     const { thread, bot, line } = entry;
@@ -374,6 +411,7 @@ export function crewOf(
       icon: bot.icon,
       awake: live.has(bot.name),
       waiting: live.get(bot.name)?.waiting ?? false,
+      unread: unread.has(bot.name),
       word: live.get(bot.name)?.word ?? null,
     });
   }
@@ -386,6 +424,7 @@ export function crewOf(
       icon: null,
       awake: true,
       waiting: doing.waiting,
+      unread: unread.has(name),
       word: doing.word,
     });
   }
@@ -399,8 +438,9 @@ export function crewOf(
     if (!named.has(ghost.name)) roster.push(ghost);
   }
 
+  // Who needs the user first, then who is moving, then who left something to read
   const rank = (face: CrewFace) =>
-    face.waiting ? 0 : face.awake ? 1 : face.standIn ? 3 : 2;
+    face.waiting ? 0 : face.awake ? 1 : face.unread ? 2 : face.standIn ? 4 : 3;
   const sorted = roster
     .map((face, at) => ({ face, at }))
     .sort((a, b) => rank(a.face) - rank(b.face) || a.at - b.at)
@@ -464,6 +504,7 @@ export function Chip({
   count,
   busy,
   pending,
+  playing,
   onPick,
   onOpen,
 }: {
@@ -476,6 +517,8 @@ export function Chip({
   count: number;
   busy: number;
   pending: number;
+  /** The gesture each face is in the middle of, by bot name (crew-motion). */
+  playing: CrewPlaying;
   onPick: (id: string) => void;
   onOpen: () => void;
 }) {
@@ -540,6 +583,7 @@ export function Chip({
         bubble={grown ? null : bubble}
         label={count ? `Threads (${count})` : "Bots"}
         onClick={onOpen}
+        playing={playing}
         side={<RoomState busy={busy} pending={pending} grown={grown} />}
         onWrite={writeLine.open}
       />
@@ -560,6 +604,7 @@ export function CrewRow({
   crew,
   more,
   bubble,
+  playing,
   side,
   label,
   onClick,
@@ -568,6 +613,8 @@ export function CrewRow({
   crew: CrewFace[];
   more: number;
   bubble: Handoff | null;
+  /** The gesture each face is in the middle of, by bot name (crew-motion). */
+  playing: CrewPlaying;
   /** The right side: the room's state, or what just happened. */
   side: ReactNode;
   label: string;
@@ -607,7 +654,7 @@ export function CrewRow({
         aria-label={label}
         className="flex min-w-0 flex-1 items-center gap-2 rounded-full text-left outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
       >
-        <Crew crew={crew} more={more} bubble={bubble} />
+        <Crew crew={crew} more={more} bubble={bubble} playing={playing} />
         {side}
       </button>
     </div>
@@ -659,6 +706,7 @@ const GHOSTS: CrewFace[] = ["alto", "brio", "cinder", "delta"].map(
     },
     awake: false,
     waiting: false,
+    unread: false,
     word: null,
     standIn: true,
   }),
@@ -677,21 +725,26 @@ const FLOOR = 3;
  *
  * A face that is moving is awake: lifted and swollen a little. That layer alone
  * survives every collision — three bots at once are three awake faces, with no
- * order to decide.
+ * order to decide, and it sits outside the gesture layers so a bot at work is
+ * still lifted while it jumps.
+ *
+ * Under that, a face is three layers and a mark (`crew-motion`): the body through
+ * the air, the shape pressing and flattening, the turn. At rest the shape layer
+ * breathes. They are keyed on the gesture, so a second event on one face starts
+ * over rather than landing mid-way through the first.
  */
 function Crew({
   crew,
   more,
   bubble,
+  playing,
 }: {
   crew: CrewFace[];
   more: number;
   /** The hand-off up, drawn over the face it points at. */
   bubble: Handoff | null;
+  playing: CrewPlaying;
 }) {
-  // While anyone is moving or waiting, the rest step back so it reads at a glance who is
-  const lit = (face: CrewFace) => face.awake || face.waiting || face.word;
-  const astir = crew.some(lit);
   return (
     <span className="flex min-w-0 shrink items-center">
       {crew.map((face, index) => {
@@ -702,8 +755,7 @@ function Crew({
               // these are not circles. Earlier faces sit on top, so the dot on a
               // waiting face is never covered by its neighbour.
               className={cn(
-                "relative shrink-0 transition-[margin,opacity] duration-500 ease-out",
-                astir && !lit(face) && "opacity-40",
+                "relative shrink-0 transition-[margin] duration-500 ease-out",
                 // A word to the left has already broken the shingle.
                 index > 0 && !crew[index - 1].word && "-ml-2",
                 face.standIn && "opacity-35",
@@ -717,7 +769,10 @@ function Crew({
                   face.awake && "-translate-y-0.5 scale-110",
                 )}
               >
-                <CrewMark face={face} />
+                <CrewBody
+                  face={face}
+                  motion={motionOf(playing.get(face.name), index)}
+                />
               </span>
               {bubble?.at === face.name && <HandoffBubble handoff={bubble} />}
             </span>
@@ -736,22 +791,57 @@ function Crew({
         );
       })}
       {more > 0 && (
-        // Past CREW_MAX the row stops growing. Only idle bots are ever behind it:
-        // anyone moving sorted to the front.
+        // Past CREW_MAX the row stops growing. Only idle bots are ever behind it —
+        // anyone moving sorted to the front — so the tail says there are more and not
+        // how many (the user's pick): a count nobody can act on is a number to read.
+        // Brand, but tinted rather than filled: filled brand is what waits on the user,
+        // and nothing here does.
         <span
-          className={cn(
-            "grid size-7 shrink-0 place-items-center rounded-[9px] bg-muted font-mono text-[10px] text-muted-foreground ring-1 ring-border/50",
-            !crew.at(-1)?.word && "-ml-2",
-          )}
+          className="ml-2 flex h-[18px] shrink-0 items-center rounded-full bg-brand/10 px-2 font-mono text-[10.5px] leading-none font-medium text-brand"
           title={`${more} more`}
         >
-          +{more}
+          +
         </span>
       )}
     </span>
   );
 }
 
+/**
+ * A face's moving parts: the body, the shape and the turn, outermost first.
+ *
+ * Each layer animates one thing, because one element can only animate `transform`
+ * once and a jump needs its height and its squash on different curves. `data-crew-motion`
+ * is what a machine asked to hold still switches off (app/globals.css).
+ */
+function CrewBody({ face, motion }: { face: CrewFace; motion: CrewMotion }) {
+  const delay = motion.delayMs
+    ? { animationDelay: `${motion.delayMs}ms` }
+    : undefined;
+  return (
+    <span
+      key={motion.key}
+      data-crew-motion
+      className={cn("flex", motion.body)}
+      style={delay}
+    >
+      <span
+        data-crew-motion
+        className={cn("flex origin-bottom", motion.shape)}
+        style={delay}
+      >
+        <span
+          data-crew-motion
+          className={cn("flex", motion.turn)}
+          style={delay}
+        >
+          <CrewMark face={face} />
+        </span>
+      </span>
+    </span>
+  );
+}
+
 /** One crew face. Who is moving reads from the lift its row gives it. */
 function CrewMark({ face }: { face: CrewFace }) {
   return (
@@ -762,7 +852,7 @@ function CrewMark({ face }: { face: CrewFace }) {
       shape={face.icon?.shape}
       outline={face.icon?.outline}
       paint={face.icon?.paint}
-      notify={face.waiting}
+      notify={face.waiting || face.unread}
     />
   );
 }

package/features/bot/components/thread-badge.tsx

@@ -8,8 +8,8 @@ import { useServerRoute } from "@/lib/protocol/use-server-route";
 
 /**
  * What the thread list owes the user, from the inbox key both readings share:
- * jobs waiting on an answer and endings nobody has opened — amber, because both
- * wait on them. Unread endings remain in the inbox until opened, so every one
+ * jobs waiting on an answer and endings nobody has opened — the brand colour,
+ * because both want them. Unread endings remain in the inbox until opened, so every one
  * counted has a row to open. A job never ends as a failure (a model that breaks
  * pauses it as waiting), so nothing here is red.
  */
@@ -25,10 +25,10 @@ export function useThreadReport() {
 }
 
 export function useThreadAlert(): SectionAlert {
-  return useThreadReport().owed > 0 ? "amber" : null;
+  return useThreadReport().owed > 0 ? "brand" : null;
 }
 
 /** The nav counts what is owed. */
 export function ThreadBadge() {
-  return <NavBadge tone="amber" count={useThreadReport().owed} />;
+  return <NavBadge tone="brand" count={useThreadReport().owed} />;
 }

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

@@ -47,8 +47,8 @@ import {
   Conversation,
   ThreadFacts,
 } from "@/features/bot/components/room-conversation";
+import { isUnread } from "@/features/bot/components/room-list";
 import {
-  rosterOf,
   screenActs,
   threadFromRow,
   useSeenOnDetail,
@@ -105,6 +105,13 @@ export function ThreadSetting() {
 
   // A thread that leaves the list (deleted, cleared) closes the sheet.
   const reading = threads.find((thread) => thread.id === openId);
+  // The list carries lines only for a thread that can still move (thread.query
+  // listThreadHistory), so the sheet reads the one it opens whole. The key sits
+  // under the list's, so the same signal keeps both live.
+  const { data: opened } = useServerRoute<Thread | null>(
+    openId ? queryKey.thread(openId) : null,
+  );
+  const whole = opened?.id === openId ? opened : undefined;
   // Opening a thread is reading its ending; that is what clears its dot.
   useSeenOnDetail(reading);
 
@@ -172,9 +179,12 @@ export function ThreadSetting() {
   if (isLoading) return <SettingSkeleton rows={3} />;
   if (error) return <SettingError message={error.message} />;
 
+  // Both halves of what the nav's one number counts (thread-badge), told apart
+  // here because the foot has the room the badge does not.
   const waiting = threads.filter(
     (thread) => thread.status === "waiting",
   ).length;
+  const unread = threads.filter(isUnread).length;
 
   return (
     <>
@@ -182,12 +192,22 @@ export function ThreadSetting() {
         footer={
           <>
             <SettingRailNote>
-              {threads.length} loaded
+              {/* "loaded" is the paging word, not the reader's: more arrive as the list is scrolled */}
+              {threads.length} shown
               {waiting > 0 && ` · ${waiting} waiting on you`}
+              {unread > 0 &&
+                ` · ${unread} new result${unread === 1 ? "" : "s"}`}
             </SettingRailNote>
-            <Button variant="outline" size="sm" onClick={confirmClear}>
-              Clear finished
-            </Button>
+            {/* only with something to clear: a page not read yet may hold some */}
+            {(hasMore ||
+              threads.some(
+                (thread) =>
+                  thread.status === "done" || thread.status === "cancelled",
+              )) && (
+              <Button variant="outline" size="sm" onClick={confirmClear}>
+                Clear finished
+              </Button>
+            )}
           </>
         }
       >
@@ -205,7 +225,7 @@ export function ThreadSetting() {
             {shown.length === 0 ? (
               <p className="p-4 text-sm leading-relaxed text-muted-foreground">
                 {needle
-                  ? "Nothing loaded matches. Keep scrolling to search further back."
+                  ? "Nothing here matches. Keep scrolling to search further back."
                   : "Nothing yet. When Thursday hands a job to a bot mid-call, it shows up here — while it runs, and after."}
               </p>
             ) : (
@@ -234,6 +254,7 @@ export function ThreadSetting() {
 
       <ThreadSheet
         thread={reading}
+        whole={whole}
         bots={bots}
         onClose={() => setOpenId(null)}
         onStop={(thread) => stop(thread.id)}
@@ -287,7 +308,7 @@ function Row({
             seed={thread.bot}
             {...markOf(thread.bot, bots)}
             state={running ? "thinking" : "idle"}
-            notify={needsThreadReply(thread)}
+            notify={needsThreadReply(thread) || isUnread(thread)}
             crossed={thread.status === "cancelled"}
             className="shrink-0"
           />
@@ -302,7 +323,7 @@ function Row({
                   <RoutineMark className="size-3 text-muted-foreground/80" />
                 </span>
               )}
-              <BotRoster bots={rosterOf(view)} />
+              <BotRoster bots={view.roster} />
               {running && (
                 <Loader2 className="size-3 shrink-0 animate-spin text-muted-foreground" />
               )}
@@ -404,13 +425,16 @@ function ThreadMenu({
  */
 function ThreadSheet({
   thread,
+  whole,
   bots,
   onClose,
   onStop,
   onDelete,
 }: {
-  /** The open thread; none closes the sheet. */
+  /** The open thread; none closes the sheet. The row, which may carry no lines. */
   thread?: Thread;
+  /** The same thread with every line, once it has been read (ThreadSetting). */
+  whole?: Thread;
   bots?: Bot[];
   onClose: () => void;
   onStop: (thread: Thread) => void;
@@ -428,6 +452,13 @@ function ThreadSheet({
     () => (thread ? threadFromRow(thread, bots) : null),
     [thread, bots],
   );
+  // The conversation is the one part that needs the lines. A row that carries
+  // them — a thread still going — draws at once and the whole one takes over.
+  const talk = useMemo(
+    () =>
+      whole ? threadFromRow(whole, bots) : view?.lines.length ? view : null,
+    [whole, view, bots],
+  );
   const side = thread ? (sides[thread.id] ?? null) : null;
 
   return (
@@ -486,15 +517,23 @@ function ThreadSheet({
                   </DialogClose>
                 </div>
 
-                <Conversation
-                  thread={view}
-                  tab={side}
-                  onTab={(next) =>
-                    setSides((was) => ({ ...was, [thread.id]: next }))
-                  }
-                  className="max-h-none min-h-0 flex-1 px-5"
-                  tabsClassName="px-5"
-                />
+                {talk ? (
+                  <Conversation
+                    thread={talk}
+                    tab={side}
+                    onTab={(next) =>
+                      setSides((was) => ({ ...was, [thread.id]: next }))
+                    }
+                    className="max-h-none min-h-0 flex-1 px-5"
+                    tabsClassName="px-5"
+                  />
+                ) : (
+                  <div className="flex min-h-0 flex-1 flex-col gap-2 px-5 py-4">
+                    <Skeleton className="h-3 w-4/5" />
+                    <Skeleton className="h-3 w-3/5" />
+                    <Skeleton className="h-3 w-2/3" />
+                  </div>
+                )}
 
                 <div className="shrink-0 px-5 pt-2 pb-4">
                   <ThreadReply
@@ -506,7 +545,7 @@ function ThreadSheet({
                       room: thread.room,
                     }}
                     status={thread.status}
-                    faces={rosterOf(view)}
+                    faces={view.roster}
                     to={side ?? thread.bot}
                   />
                 </div>

package/features/bot/mark.const.ts

@@ -57,6 +57,30 @@ export const MARK_PALETTE: string[] = MARK_COLORS.filter(
 /** The app's two status colours. A face wearing one reads as a state it is not in, so no roll lands on them. */
 const STATUS_INK: string[] = [MARK_INK.amber, MARK_INK.red];
 
+/**
+ * What a colour is drawn as on a white page. Nine of the eighteen are too light
+ * to read there — a yellow face on paper is 1.9:1 against a 3:1 floor for a
+ * shape — so each has a twin at the same hue and chroma, lightness lowered
+ * until it clears 3.2:1. The dark theme keeps the colour as it is, where all
+ * eighteen already pass. The stored value never changes: the picker, the name
+ * the user chose and the roll all stay on the original.
+ */
+const ON_PAPER: Record<string, string> = {
+  [MARK_INK.cyan]: "#009dbb",
+  [MARK_INK.teal]: "#00a190",
+  [MARK_INK.green]: "#00a640",
+  [MARK_INK.lime]: "#5ca100",
+  [MARK_INK.amber]: "#d07b00",
+  [MARK_INK.orange]: "#ec6700",
+  [MARK_INK.sky]: "#0098dc",
+  [MARK_INK.emerald]: "#00a46d",
+  [MARK_INK.yellow]: "#bb8600",
+};
+
+/** The colour as this theme should draw it. Anything not in the table is itself. */
+export const markInk = (color: string, dark: boolean): string =>
+  dark ? color : (ON_PAPER[color] ?? color);
+
 /** How the renderer lays a paint's colours out. */
 export type MarkPaintLook = "flow" | "duo" | "aurora";