thursday-agent 0.2.0 → 0.4.0

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

@@ -1,8 +1,10 @@
 "use client";
 
+import { format } from "date-fns";
 import {
   ArrowUp,
   Check,
+  ChevronDown,
   ChevronLeft,
   ChevronRight,
   ChevronsRight,
@@ -10,6 +12,7 @@ import {
   History,
   Loader2,
   Plus,
+  RotateCw,
   X,
 } from "lucide-react";
 import {
@@ -27,16 +30,15 @@ import { Bubble, BubbleContent } from "@/components/ui/bubble";
 import { Button } from "@/components/ui/button";
 import { FoldedText } from "@/components/ui/folded-text";
 import { Markdown } from "@/components/ui/markdown";
-import ShinyText from "@/components/ui/shiny-text";
+import { ShinyText, type ShinyTone } from "@/components/ui/shiny-text";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toast";
-import { BOT_RUN } from "@/config";
-import { markReportedAction, startTaskAction } from "@/features/bot/bot.action";
+import { startTaskAction } from "@/features/bot/bot.action";
 import {
   type Bot,
   type BotIcon,
   DEFAULT_BOT,
-  isBudgetAsk,
+  isAppStop,
   TASK_CONTINUE,
 } from "@/features/bot/bot.schema";
 import { BotMark } from "@/features/bot/components/bot-mark";
@@ -47,7 +49,6 @@ import { openSettings } from "@/features/settings/settings.store";
 import { ThursdayMark } from "@/features/thursday/components/thursday-mark";
 import { FileViewer } from "@/features/workspace/components/file-view";
 import { shortAgo, toDate } from "@/lib/date-like";
-import { unwrapResult } from "@/lib/protocol/result";
 import { useServerAction } from "@/lib/protocol/use-server-action";
 import { revalidate, useServerRoute } from "@/lib/protocol/use-server-route";
 import {
@@ -71,6 +72,7 @@ import {
   type TaskViewStatus,
   threadItems,
   useBotTasks,
+  useSeenOnDetail,
 } from "../task.store";
 import { BotTool } from "./bot-tool";
 
@@ -178,41 +180,23 @@ export const BotRoom = memo(function BotRoom() {
     }
   }, [tasks, handoff]);
 
-  // Opening a finished thread marks it reported. The key includes updatedAt: a
-  // follow-up request finishes again and that result is unread. markReported does not
-  // move `updatedAt`, so the set only bridges the gap until the next poll.
-  const marked = useRef(new Set<string>());
-  useEffect(() => {
-    if (!current || current.relayed) return;
-    if (current.status !== "done" && current.status !== "failed") return;
-    const key = `${current.id}@${toDate(current.updatedAt).getTime()}`;
-    if (marked.current.has(key)) return;
-    marked.current.add(key);
-    // unwrapResult folds Result failures and rejections into one path; on failure
-    // release the key so the task can be marked again.
-    void markReportedAction([current.id])
-      .then(unwrapResult)
-      .then(() => revalidate(queryKey.tasks))
-      .catch((cause) => {
-        marked.current.delete(key);
-        toast.add({
-          type: "error",
-          title: "Could not mark the task as read",
-          description: errorToString(cause),
-        });
-      });
-  }, [current]);
+  // Reading a thread is reading its ending; that is what clears its dot.
+  useSeenOnDetail(open ? current : null);
 
   const busy = tasks.filter((entry) => entry.status === "working").length;
   const attention = newest.filter(needsYou);
   const pending = attention.length;
+  const unread = newest.filter(isUnread);
+  const failed = unread.filter((entry) => entry.status === "failed").length;
 
   const closeCompose = useCallback(() => setComposing(false), []);
 
   return (
-    <div className="pointer-events-none absolute right-5 bottom-5 z-10 flex w-132 max-w-[calc(100vw-2.5rem)] flex-col items-end gap-2">
+    // As wide as the resting pill may grow: 80% of the window. The open room
+    // keeps its own 33rem inside it.
+    <div className="pointer-events-none absolute right-5 bottom-5 z-10 flex w-[min(80vw,calc(100vw-2.5rem))] flex-col items-end gap-2">
       {open ? (
-        <div className="pointer-events-auto flex max-h-[min(44rem,78vh)] w-full animate-in flex-col overflow-hidden rounded-3xl bg-background/75 shadow-2xl shadow-black/6 ring-1 ring-border/50 backdrop-blur-xl fade-in slide-in-from-bottom-1 duration-200">
+        <div className="pointer-events-auto flex max-h-[min(44rem,78vh)] w-132 max-w-full animate-in flex-col overflow-hidden rounded-3xl bg-background/75 shadow-2xl shadow-black/6 ring-1 ring-border/50 backdrop-blur-xl fade-in slide-in-from-bottom-1 duration-200">
           {current ? (
             <>
               <ThreadHeader
@@ -267,6 +251,8 @@ export const BotRoom = memo(function BotRoom() {
           count={tasks.length}
           busy={busy}
           pending={pending}
+          unread={unread.length}
+          failed={failed}
           composing={composing}
           onCompose={() => setComposing(true)}
           onCloseCompose={closeCompose}
@@ -275,8 +261,10 @@ export const BotRoom = memo(function BotRoom() {
             setOpen(true);
           }}
           onOpen={() => {
-            // A single waiting task opens straight into its thread.
-            if (!picked && attention.length === 1) setPicked(attention[0].id);
+            // One thing to look at opens straight into its thread: a single
+            // question, or with none waiting, a single answer nobody has read.
+            const only = attention.length ? attention : unread;
+            if (!picked && only.length === 1) setPicked(only[0].id);
             setOpen(true);
           }}
         />
@@ -441,7 +429,7 @@ function crewOf(
   };
 }
 
-/** Blanks the question in the reply box when it already is the last thread line (budget stops). */
+/** Blanks the question in the reply box when it already is the last thread line (stops the app made). */
 function askFor(task: TaskView): TaskView["ask"] {
   if (!task.ask?.question) return task.ask;
   const last = task.lines.at(-1);
@@ -451,46 +439,69 @@ function askFor(task: TaskView): TaskView["ask"] {
 }
 
 /**
- * A task that cannot move until the user answers: a question, or a budget stop.
+ * A task that cannot move until the user answers: a question, or a stop the app made.
  *
  * A finished job is not on this list. It has nothing for the user to do, and
- * counting it here made the chip hold itself open over a report nobody had to
- * act on. A report says itself once, in the sentence, and then it is a row in
+ * counting it here made the chip hold itself open over an answer nobody had to
+ * act on. An answer says itself once, in the sentence, and then it is a row in
  * the room like every other one.
  */
 const needsYou = (task: TaskView) => task.status === "waiting";
 
+/** An ending nobody has opened. It needs the user too, to read rather than to answer. */
+const isUnread = (task: TaskView) =>
+  (task.status === "done" || task.status === "failed") && !task.seen;
+
 /**
  * What the room itself is doing, and nothing else — the right side of the pill.
  *
- * Only `waiting on you` sweeps. A shine means something is happening right now,
- * which is what the words beside the faces are for; the spinner already says a
- * job is running, and two things sweeping in one pill read as a loading screen.
+ * What is still moving shines, like every other running line: a wait in amber,
+ * running jobs in muted ink beside the spinner. An ending does not — an answer
+ * nobody has opened is something to read, not something happening.
  */
 function restingState({
   count,
   busy,
   pending,
+  unread,
+  failed,
 }: {
   count: number;
   busy: number;
   pending: number;
-}): { text: string; tone: string; shine: boolean } {
+  /** Endings nobody has opened, failures included. */
+  unread: number;
+  failed: number;
+}): { text: string; tone: string; shine: ShinyTone | null } {
   if (pending > 0)
     return {
       text: pending === 1 ? "waiting on you" : `${pending} waiting on you`,
       tone: WAITING_INK,
-      shine: true,
+      shine: "waiting",
+    };
+  // Unread outranks running: a job still going will say so again, and an answer
+  // left unopened will not.
+  if (failed > 0)
+    return {
+      text: failed === 1 ? "1 failed" : `${failed} failed`,
+      tone: "text-destructive",
+      shine: null,
+    };
+  if (unread > 0)
+    return {
+      text: unread === 1 ? "1 new answer" : `${unread} new answers`,
+      tone: WAITING_INK,
+      shine: null,
     };
   if (busy > 0)
     return {
       text: busy === 1 ? "working" : `${busy} running`,
       tone: "text-muted-foreground",
-      shine: false,
+      shine: "muted",
     };
   if (count > 0)
-    return { text: "all done", tone: "text-muted-foreground", shine: false };
-  return { text: "no jobs yet", tone: "text-muted-foreground", shine: false };
+    return { text: "all done", tone: "text-muted-foreground", shine: null };
+  return { text: "no jobs yet", tone: "text-muted-foreground", shine: null };
 }
 
 /**
@@ -520,6 +531,8 @@ function Chip({
   count,
   busy,
   pending,
+  unread,
+  failed,
   composing,
   onCompose,
   onCloseCompose,
@@ -535,13 +548,15 @@ function Chip({
   count: number;
   busy: number;
   pending: number;
+  unread: number;
+  failed: number;
   composing: boolean;
   onCompose: () => void;
   onCloseCompose: () => void;
   onPick: (id: string) => void;
   onOpen: () => void;
 }) {
-  const state = restingState({ count, busy, pending });
+  const state = restingState({ count, busy, pending, unread, failed });
   const grown = composing || pending > 0;
 
   return (
@@ -550,8 +565,10 @@ function Chip({
         // Not `overflow-hidden`: a hand-off bubble stands above the row, outside
         // this box. The growing part clips itself instead.
         "pointer-events-auto w-fit max-w-full bg-background/78 ring-1 ring-border/50 backdrop-blur-md transition-shadow duration-300",
+        // A card with questions in it keeps the room's width: only the resting
+        // row grows with the corner, and a reply's long lines would stretch it.
         grown
-          ? "min-w-96 rounded-3xl shadow-lg shadow-black/8"
+          ? "max-w-[min(33rem,100%)] min-w-96 rounded-3xl shadow-lg shadow-black/8"
           : "rounded-full shadow-sm shadow-black/3",
       )}
     >
@@ -607,18 +624,12 @@ function Chip({
               the right. `ml-auto` keeps it there when the crew says nothing. */}
           <span className="ml-auto flex h-7 shrink-0 items-center gap-1.5">
             {state.shine ? (
-              // Neither waiting nor running is a state at rest, but only one of
-              // them needs you. The colours are classes because they differ per
-              // theme, and ShinyText reads the variables they set.
-              <span className="block [--rest:var(--color-amber-700)] [--shine:var(--color-amber-400)] dark:[--rest:var(--color-amber-400)] dark:[--shine:var(--color-amber-100)]">
-                <ShinyText
-                  text={state.text}
-                  speed={2.6}
-                  color="var(--rest)"
-                  shineColor="var(--shine)"
-                  className="truncate text-[14px] leading-5 tracking-[-0.15px]"
-                />
-              </span>
+              <ShinyText
+                text={state.text}
+                tone={state.shine}
+                speed={2.6}
+                className="block truncate text-[14px] leading-5 tracking-[-0.15px]"
+              />
             ) : (
               <span
                 key={state.text}
@@ -633,12 +644,14 @@ function Chip({
             {/* Always 16px, empty or not: a glyph that comes and goes moves the
                 sentence's right end even when the sentence has not changed. */}
             <span className="grid size-4 shrink-0 place-items-center">
-              {pending === 0 && busy > 0 && (
+              {pending === 0 && unread === 0 && busy > 0 && (
                 <Loader2 className="size-4 animate-spin text-muted-foreground/70" />
               )}
-              {pending === 0 && busy === 0 && count > 0 && (
-                <Check className="size-4 text-muted-foreground/60" />
-              )}
+              {pending === 0 &&
+                failed === 0 &&
+                (unread > 0 || (busy === 0 && count > 0)) && (
+                  <Check className="size-4 text-muted-foreground/60" />
+                )}
             </span>
           </span>
         </button>
@@ -702,8 +715,13 @@ function Compose({ bots, onDone }: { bots?: Bot[]; onDone: () => void }) {
   });
 
   // A fresh install has no rows and still has a worker (bot.schema DEFAULT_BOT).
+  // Switched-off bots are left out for the same reason no model is shown one —
+  // but the fallback answers "no rows", not "every row off", so switching them
+  // all off leaves nothing to pick rather than conjuring a worker.
   const roster: BotRef[] = bots?.length
-    ? bots.map((bot) => ({ name: bot.name, icon: bot.icon }))
+    ? bots
+        .filter((bot) => !bot.disabled)
+        .map((bot) => ({ name: bot.name, icon: bot.icon }))
     : [{ name: DEFAULT_BOT.name, icon: DEFAULT_BOT.icon }];
 
   const send = () => {
@@ -833,6 +851,9 @@ const GHOSTS: CrewFace[] = ["alto", "brio", "cinder", "delta"].map(
 /** A single face reads as one worker, not as a crew; below this the row is padded out. */
 const FLOOR = 3;
 
+/** The awake halo, in the mark's own view-box units: about 2px of blur at 28px. */
+const AWAKE_GLOW = 20;
+
 /**
  * The crew, and what each of them is doing.
  *
@@ -872,25 +893,12 @@ function Crew({
                 face.standIn && "opacity-35",
                 face.awake && "-translate-y-0.5 scale-110",
               )}
-              style={{
-                zIndex: crew.length - index,
-                color: face.icon?.color ?? undefined,
-                // The glow is the bot's own colour, so who is moving reads before
-                // any word does. currentColor keeps it right when nobody chose one.
-                filter: face.awake
-                  ? "drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent))"
-                  : undefined,
-              }}
+              style={{ zIndex: crew.length - index }}
             >
-              <BotMark
-                size={28}
-                seed={face.name}
-                vary={face.name}
-                color={face.icon?.color}
-                shape={face.icon?.shape}
-                outline={face.icon?.outline}
-                notify={face.waiting}
-              />
+              {/* The halo is the mark's own (bot-mark `glow`), not a filter on
+                  this box: a filter here also lands on the bubble above, which
+                  came out tinted in the bot's colour and wearing its blur. */}
+              <CrewMark face={face} />
               {bubble && <HandoffBubble handoff={bubble} />}
             </span>
             {face.word && (
@@ -900,8 +908,6 @@ function Crew({
                 <ShinyText
                   text={face.word}
                   speed={2.6}
-                  color="var(--muted-foreground)"
-                  shineColor="var(--foreground)"
                   className="truncate text-[13px] leading-5 tracking-[-0.1px]"
                 />
               </span>
@@ -926,6 +932,30 @@ function Crew({
   );
 }
 
+/**
+ * One crew face. Awake, it wears a halo in its own colour, so who is moving
+ * reads before any word does; the options object is memoized because a new one
+ * every render re-derives the silhouette behind it.
+ */
+function CrewMark({ face }: { face: CrewFace }) {
+  const glow = useMemo(
+    () => (face.awake ? { glow: AWAKE_GLOW } : undefined),
+    [face.awake],
+  );
+  return (
+    <BotMark
+      size={28}
+      seed={face.name}
+      vary={face.name}
+      color={face.icon?.color}
+      shape={face.icon?.shape}
+      outline={face.icon?.outline}
+      notify={face.waiting}
+      options={glow}
+    />
+  );
+}
+
 /**
  * A hand-off, over the face it landed on. The mark at its head is whoever gave
  * it away — Thursday, another bot, or nobody at all when it was you.
@@ -1100,7 +1130,7 @@ const STATE_LOOK: Record<TaskViewStatus, string> = {
 
 function State({ task }: { task: TaskView }) {
   const look =
-    task.status === "done" && task.relayed
+    task.status === "done" && task.seen
       ? "text-muted-foreground"
       : STATE_LOOK[task.status];
 
@@ -1109,8 +1139,6 @@ function State({ task }: { task: TaskView }) {
       <ShinyText
         text="working"
         speed={2.2}
-        color="var(--muted-foreground)"
-        shineColor="var(--foreground)"
         className="shrink-0 font-mono text-[10px]"
       />
     );
@@ -1224,18 +1252,17 @@ function TaskList({
 
 function TaskRow({ task, onPick }: { task: TaskView; onPick: () => void }) {
   const attention = needsYou(task);
-  // secondLine runs plainText over the whole report. Every sync rebuilds each TaskView
+  // secondLine runs plainText over the whole answer. Every sync rebuilds each TaskView
   // (task.store), so depend on the fields that change the line, not on `task`.
   const last = task.lines.at(-1);
   const line = useMemo(
     () => secondLine(task),
-    [task.status, task.outcome, task.relayed, task.ask, last?.id],
+    [task.status, task.outcome, task.seen, task.ask, last?.id],
   );
   const [answer, answering] = useAnswerTask();
   const [sending, setSending] = useState<string | null>(null);
   // Options are answered inline, without opening the thread.
   const options = task.status === "waiting" ? (task.ask?.options ?? []) : [];
-  const budget = isBudgetAsk(task.ask);
 
   return (
     // The row is not itself a button: the option buttons cannot nest inside one.
@@ -1287,8 +1314,6 @@ function TaskRow({ task, onPick }: { task: TaskView; onPick: () => void }) {
               <ShinyText
                 text={line.text}
                 speed={2.2}
-                color="var(--muted-foreground)"
-                shineColor="var(--foreground)"
                 className={cn(
                   "min-w-0 flex-1 truncate text-[12px] leading-4",
                   line.tone,
@@ -1322,21 +1347,12 @@ function TaskRow({ task, onPick }: { task: TaskView; onPick: () => void }) {
                 await answer(task, option);
                 setSending(null);
               }}
-              className={cn(
-                "h-7 gap-1.5 rounded-full bg-background px-3 text-[12px]",
-                // A budget stop is not a question, so it does not take the waiting colour.
-                !budget && "border-amber-500/35",
-              )}
+              className="h-7 gap-1.5 rounded-full border-amber-500/35 bg-background px-3 text-[12px]"
             >
-              {budget && option === TASK_CONTINUE && (
+              {option === TASK_CONTINUE && (
                 <ChevronsRight className="size-3.5 text-muted-foreground" />
               )}
               {option}
-              {budget && option === TASK_CONTINUE && (
-                <span className="font-mono text-[10px] text-muted-foreground">
-                  +{BOT_RUN.steps} steps
-                </span>
-              )}
             </Button>
           ))}
         </div>
@@ -1348,29 +1364,28 @@ function TaskRow({ task, onPick }: { task: TaskView; onPick: () => void }) {
 /** Second row of a task line: the question, the outcome, or the bot's last step. */
 function secondLine(task: TaskView): { text: string; tone: string } {
   if (task.status === "waiting" && task.ask) {
-    // Budget stops are not questions; keep them out of the waiting colour.
-    if (isBudgetAsk(task.ask)) {
-      return {
-        text: plainText(task.outcome ?? task.ask.question),
-        tone: "text-muted-foreground",
-      };
-    }
+    // A budget stop is not a question, but it waits on the user exactly as one
+    // does, so it carries the waiting colour too; only the words differ.
     return {
-      text: task.ask.question,
+      text: isAppStop(task.ask)
+        ? plainText(task.outcome ?? task.ask.question)
+        : task.ask.question,
       tone: WAITING_INK,
     };
   }
   // Reports are markdown; keep only the text.
+  // An ending the user has opened steps back; red stays red, only quieter.
+  const had = task.seen;
   if (task.status === "failed") {
     return {
       text: plainText(task.outcome ?? "Failed"),
-      tone: "text-destructive",
+      tone: had ? "text-destructive/70" : "text-destructive",
     };
   }
   if (task.status === "done") {
     return {
       text: plainText(task.outcome ?? "Done"),
-      tone: task.relayed ? "text-muted-foreground" : "text-foreground",
+      tone: had ? "text-muted-foreground" : "text-foreground",
     };
   }
   const last = lastSaid(task);
@@ -1434,20 +1449,37 @@ export function Conversation({
             <Group key={item.key} group={item.group} task={task} />
           ),
         )}
-        {task.status === "working" && task.lines.length === 0 && (
-          <ShinyText
-            text={`${task.bot.name} is taking it on…`}
-            speed={2.2}
-            color="var(--muted-foreground)"
-            shineColor="var(--foreground)"
-            className="block px-1 font-mono text-[10px]"
-          />
-        )}
+        {task.status === "working" && <NextMove task={task} />}
       </div>
     </FileViewer>
   );
 }
 
+/**
+ * The foot of a running thread while nothing on it is moving: the bot is
+ * writing its next step. A tool mid-call already shines on its own row, so this
+ * steps aside for it.
+ */
+function NextMove({ task }: { task: TaskView }) {
+  if (task.lines.some((line) => line.tool && line.tool.results === undefined)) {
+    return null;
+  }
+  const last = task.lines.at(-1);
+  // After a hand-off, in either direction, the move is the receiver's
+  const who = last?.kind === "ask" && last.to ? last.to : last?.bot;
+  return (
+    <ShinyText
+      text={
+        who
+          ? `${who.name} is on the next step…`
+          : `${task.bot.name} is taking it on…`
+      }
+      speed={2.2}
+      className="block px-1 font-mono text-[10px]"
+    />
+  );
+}
+
 /** The delegated request, folded to three lines (FoldedText). */
 function Request({ task }: { task: TaskView }) {
   return (
@@ -1544,7 +1576,7 @@ function Turn({
   return (
     <div className={cn("flex gap-2.5", side === "end" && "flex-row-reverse")}>
       {mark}
-      {/* One cap on the turn's column, not one per block inside it: a report and
+      {/* One cap on the turn's column, not one per block inside it: an answer and
           a one-line remark from the same bot then end on the same edge. The
           answering side hugs that edge, so the two sides face each other. */}
       <div
@@ -1601,6 +1633,8 @@ function Group({ group, task }: { group: ChatterGroup; task: TaskView }) {
         {runs(group.lines).map((run) =>
           run.kind === "tools" ? (
             <Steps key={run.key} lines={run.lines} taskId={task.id} />
+          ) : run.kind === "stops" ? (
+            <Stops key={run.key} lines={run.lines} />
           ) : (
             run.lines.map((line) => (
               <Line key={line.id} line={line} taskId={task.id} />
@@ -1636,7 +1670,7 @@ function Line({ line, taskId }: { line: Chatter; taskId: string }) {
     );
   }
 
-  // Passing remarks are muted; the report is the one thing here at full weight.
+  // Passing remarks are muted; the answer is the one thing here at full weight.
   if (!isOutcome(line)) {
     return (
       <p className="px-1 text-[12.5px] leading-relaxed break-keep text-muted-foreground">
@@ -1669,7 +1703,7 @@ function Line({ line, taskId }: { line: Chatter; taskId: string }) {
   const failed = line.kind === "error";
 
   return (
-    // The report is not a card. It sits in a thread that is already in a box,
+    // The answer is not a card. It sits in a thread that is already in a box,
     // in a section that is another: a fourth border reads as a second chat
     // window. What tells it from a passing remark is that it is the only prose
     // here at foreground weight, plus the files it names — and its copy button
@@ -1690,7 +1724,7 @@ function Line({ line, taskId }: { line: Chatter; taskId: string }) {
         {line.text}
       </Markdown>
       {/* The files it names, and the copy — one row, because the end of the
-          report is where a reader is when they want either. */}
+          answer is where a reader is when they want either. */}
       <div className="mt-2 flex items-center gap-2">
         <PathChips text={line.text} className="min-w-0" />
         {!failed && (
@@ -1703,7 +1737,7 @@ function Line({ line, taskId }: { line: Chatter; taskId: string }) {
   );
 }
 
-/** Copies the report. The icon confirms; a toast only reports failure. */
+/** Copies the answer. The icon confirms; a toast only reports failure. */
 function CopyReport({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
   const back = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -1718,7 +1752,7 @@ function CopyReport({ text }: { text: string }) {
   return (
     <button
       type="button"
-      aria-label="Copy the report"
+      aria-label="Copy the answer"
       onClick={async () => {
         try {
           await navigator.clipboard.writeText(text);
@@ -1728,7 +1762,7 @@ function CopyReport({ text }: { text: string }) {
         } catch (cause) {
           toast.add({
             type: "error",
-            title: "Could not copy the report",
+            title: "Could not copy the answer",
             description: errorToString(cause),
           });
         }
@@ -1764,17 +1798,65 @@ function Steps({ lines, taskId }: { lines: Chatter[]; taskId: string }) {
   );
 }
 
-/** Splits one speaker's lines into runs of tool calls and runs of everything else. */
+/**
+ * Where the app stopped the run (bot.runner parkTask): a failed model call, a
+ * restart, a closed browser. Muted and in the bot's turn, since the bot goes on
+ * from here. The same reason in a row is one line with a count; opening it lists
+ * each stop by the time it happened.
+ */
+function Stops({ lines }: { lines: Chatter[] }) {
+  return (
+    <details className="group min-w-0 px-1 text-muted-foreground">
+      <summary className="flex cursor-pointer list-none items-center gap-1.5 text-[12.5px] leading-relaxed outline-none [&::-webkit-details-marker]:hidden">
+        <RotateCw className="size-3 shrink-0" />
+        <span className="min-w-0 truncate">{leadOf(lines[0].text)}</span>
+        {lines.length > 1 && (
+          <span className="shrink-0 font-mono text-[10px] text-muted-foreground/70">
+            ×{lines.length}
+          </span>
+        )}
+        <ChevronDown className="size-2.5 shrink-0 text-muted-foreground/70 transition-transform group-open:rotate-180" />
+      </summary>
+      <div className="mt-1 space-y-1 pl-4.5 text-[11px] leading-relaxed">
+        {lines.map((line) => (
+          <p key={line.id} className="flex gap-2 break-keep">
+            {line.at && (
+              <span className="shrink-0 font-mono text-muted-foreground/70 tabular-nums">
+                {format(toDate(line.at), "HH:mm:ss")}
+              </span>
+            )}
+            <span className="min-w-0">{line.text}</span>
+          </p>
+        ))}
+      </div>
+    </details>
+  );
+}
+
+/** What stopped it, without the words behind it: a stop names those in parentheses (bot.runner parkTask). */
+const leadOf = (text: string) => text.split(" (")[0].replace(/\.$/, "");
+
+/** Splits one speaker's lines into runs of tool calls, of stops, and of everything else. */
 type Run =
   | { kind: "tools"; key: string; lines: Chatter[] }
+  | { kind: "stops"; key: string; lines: Chatter[] }
   | { kind: "said"; key: string; lines: Chatter[] };
 
 function runs(lines: Chatter[]): Run[] {
   const out: Run[] = [];
   for (const line of lines) {
-    const kind = line.kind === "tool" && line.tool ? "tools" : "said";
+    const kind =
+      line.kind === "tool" && line.tool
+        ? "tools"
+        : line.kind === "stop"
+          ? "stops"
+          : "said";
     const open = out.at(-1);
-    if (open && open.kind === kind) open.lines.push(line);
+    // Stops fold only while the reason repeats; another reason is a line of its own
+    const same =
+      open?.kind === kind &&
+      (kind !== "stops" || leadOf(open.lines[0].text) === leadOf(line.text));
+    if (open && same) open.lines.push(line);
     else out.push({ kind, key: line.id, lines: [line] });
   }
   return out;