thursday-agent 0.2.0 → 0.3.0

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

@@ -19,7 +19,7 @@ import {
 } from "lucide-react";
 import { type ComponentType, type ReactNode, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
-import ShinyText from "@/components/ui/shiny-text";
+import { ShinyText } from "@/components/ui/shiny-text";
 import { Skeleton } from "@/components/ui/skeleton";
 import type { ResultPart } from "@/features/bot/bot.schema";
 import { McpMark } from "@/features/connectors/components/mcp-mark";
@@ -73,7 +73,7 @@ const TOOL_ICONS: Record<string, LucideIcon> = {
   ask_bot: MessageSquare,
   ask_back: MessageSquare,
   ask_thursday: MessageSquare,
-  report: Flag,
+  answer: Flag,
 };
 
 export const toolIcon = (name: string): LucideIcon =>
@@ -254,8 +254,6 @@ function Frame({
               <ShinyText
                 text={tool.note}
                 speed={2.4}
-                color="var(--muted-foreground)"
-                shineColor="var(--foreground)"
                 className="min-w-0 flex-1 truncate text-[12px] leading-4 break-keep"
               />
             ) : (
@@ -273,8 +271,6 @@ function Frame({
           <ShinyText
             text={tool.input}
             speed={2.4}
-            color="var(--muted-foreground)"
-            shineColor="var(--foreground)"
             className="min-w-0 flex-1 truncate font-mono text-[11px] leading-4"
           />
         ) : (

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { Swatch } from "@/components/ui/swatch";
+import { MARK_PALETTE_ROWS } from "../mark.const";
+
+/**
+ * A mark's colours, centred under the face they paint: the theme dot on its own,
+ * then the light row over the dark row. The dark row starts under the first
+ * light colour, so the dot is the only thing that stands apart. Thursday's face
+ * and a bot's page both pick from it; they differ only in what the dot means.
+ */
+export function MarkPalette({
+  color,
+  themePicked,
+  onTheme,
+  onPick,
+}: {
+  /** The picked colour; anything outside the palette matches no swatch. */
+  color: string | undefined;
+  themePicked: boolean;
+  onTheme: () => void;
+  onPick: (color: string) => void;
+}) {
+  return (
+    // both rows centre as one block and left-align inside it
+    <div className="flex justify-center px-2">
+      <div className="flex flex-col gap-2.5">
+        <div className="flex flex-wrap items-center gap-2">
+          <Swatch color={null} picked={themePicked} onPick={onTheme} />
+          <span className="w-2" />
+          {MARK_PALETTE_ROWS[0].map((each) => (
+            <Swatch
+              key={each}
+              color={each}
+              picked={color === each}
+              onPick={() => onPick(each)}
+            />
+          ))}
+        </div>
+        {/* the dot, its gap, the spacer and the next gap: 44px */}
+        <div className="flex flex-wrap items-center gap-2 pl-11">
+          {MARK_PALETTE_ROWS[1].map((each) => (
+            <Swatch
+              key={each}
+              color={each}
+              picked={color === each}
+              onPick={() => onPick(each)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/features/bot/components/path-chips.tsx

@@ -33,7 +33,7 @@ function iconFor(path: string): LucideIcon {
   return ICONS[kind] ?? File;
 }
 
-/** File paths mentioned in a report, as chips. Derived from the text, never stored; where a file opens is fileTarget's call. */
+/** File paths mentioned in an answer, as chips. Derived from the text, never stored; where a file opens is fileTarget's call. */
 export function PathChips({
   text,
   className,

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

@@ -6,17 +6,37 @@ import { NavBadge } from "@/features/settings/components/setting-ui";
 import type { SectionAlert } from "@/features/settings/settings.alert";
 import { useServerRoute } from "@/lib/protocol/use-server-route";
 
-/** Jobs waiting on an answer. Shares the inbox key, so both readings are one fetch. */
-function useWaitingTasks(): number {
+/**
+ * What the task 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 — and among those, a failure, which is red. The inbox holds only
+ * the latest INBOX_FINISHED endings, so every one counted has a row to open.
+ */
+export function useTaskReport() {
   const { data } = useServerRoute<Task[]>(queryKey.tasks);
-  return data?.filter((task) => task.status === "waiting").length ?? 0;
+  const tasks = data ?? [];
+  const unread = (task: Task) =>
+    (task.status === "done" || task.status === "failed") && !task.seen;
+  return {
+    owed: tasks.filter((task) => task.status === "waiting" || unread(task))
+      .length,
+    failed: tasks.some((task) => task.status === "failed" && unread(task)),
+  };
 }
 
 export function useTaskAlert(): SectionAlert {
-  return useWaitingTasks() > 0 ? "amber" : null;
+  const { owed, failed } = useTaskReport();
+  if (failed) return "red";
+  return owed > 0 ? "amber" : null;
 }
 
-/** The nav says how many; the corner has no room for a number and says only that there are some. */
+/** The nav counts what is owed and dots a failure among it; the corner has room only for the worse of the two. */
 export function TaskBadge() {
-  return <NavBadge tone="amber" count={useWaitingTasks()} />;
+  const { owed, failed } = useTaskReport();
+  return (
+    <span className="flex items-center gap-1.5">
+      {failed && <NavBadge tone="red" />}
+      <NavBadge tone="amber" count={owed} />
+    </span>
+  );
 }

package/features/bot/components/task-reply.tsx

@@ -12,12 +12,11 @@ import { useEffect, useState } from "react";
 import { queryKey } from "@/app/api/query-key";
 import { Button } from "@/components/ui/button";
 import { FoldedText } from "@/components/ui/folded-text";
-import ShinyText from "@/components/ui/shiny-text";
+import { ShinyText } from "@/components/ui/shiny-text";
 import { Textarea } from "@/components/ui/textarea";
-import { BOT_RUN } from "@/config";
 import { answerTaskAction, cancelTaskAction } from "@/features/bot/bot.action";
 import {
-  isBudgetAsk,
+  isAppStop,
   TASK_CONTINUE,
   type TaskAsk,
   type TaskStatus,
@@ -106,7 +105,7 @@ export function TaskReply({
   };
 
   const asking = status === "waiting" ? task.ask : null;
-  const budget = isBudgetAsk(asking);
+  const appStop = isAppStop(asking);
   const placeholder = asking
     ? asking.options.length
       ? "Or put it another way…"
@@ -187,21 +186,13 @@ export function TaskReply({
             <span className="shrink-0">Before its next step:</span>
             {/* Still in the air until the bot picks it up, so it shines like every
                 other line that is still moving. */}
-            <ShinyText
-              text={queued}
-              speed={2.2}
-              color="var(--muted-foreground)"
-              shineColor="var(--foreground)"
-              className="min-w-0 truncate"
-            />
+            <ShinyText text={queued} speed={2.2} className="min-w-0 truncate" />
           </p>
         ) : (
           // The job is moving while this line is up, so the line moves too.
           <ShinyText
             text={`${task.bot} is on it — Thursday steers it by voice.`}
             speed={2.4}
-            color="var(--muted-foreground)"
-            shineColor="var(--foreground)"
             className="min-w-0 flex-1 truncate text-[12.5px] leading-5 break-keep"
           />
         )}
@@ -241,11 +232,10 @@ export function TaskReply({
   return (
     <div
       className={cn(
-        "space-y-2.5 rounded-2xl px-3.5 py-3 ring-1",
-        // A budget stop is not a question, so it does not take the waiting colour.
-        budget
-          ? "bg-muted/40 ring-border/50"
-          : "bg-amber-500/8 ring-amber-500/25",
+        // Every wait takes the waiting colour: the job moves again only when
+        // the user answers, whatever stopped it. Which stop it was is the
+        // words' job, not the colour's.
+        "space-y-2.5 rounded-2xl bg-amber-500/8 px-3.5 py-3 ring-1 ring-amber-500/25",
         className,
       )}
     >
@@ -257,7 +247,7 @@ export function TaskReply({
       </p>
 
       {/* Empty when the question already is the last thread line (bot-room askFor).
-          A bot that stops on its own result sends the whole report as the question, and
+          A bot that stops on its own result sends the whole answer as the question, and
           this panel does not scroll — the thread above it does — so it is folded. */}
       {asking.question && (
         <FoldedText
@@ -279,15 +269,10 @@ export function TaskReply({
               onClick={() => send(option)}
               className="h-7 gap-1.5 rounded-full bg-background px-3 text-[12px]"
             >
-              {budget && option === TASK_CONTINUE && (
+              {appStop && 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>
@@ -295,14 +280,18 @@ export function TaskReply({
 
       {form}
 
-      <button
-        type="button"
-        disabled={busy}
-        onClick={() => stop(task.id)}
-        className="font-mono text-[10px] text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50"
-      >
-        Stop this task instead
-      </button>
+      {/* Only a job still going can be stopped: cancelling writes "Cancelled."
+          over the outcome, which on a finished job is the answer itself. */}
+      {status === "waiting" && (
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => stop(task.id)}
+          className="font-mono text-[10px] text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50"
+        >
+          Stop this task instead
+        </button>
+      )}
     </div>
   );
 }

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

@@ -17,7 +17,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { notify } from "@/components/ui/notify";
-import ShinyText from "@/components/ui/shiny-text";
+import { ShinyText } from "@/components/ui/shiny-text";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   cancelTaskAction,
@@ -26,7 +26,7 @@ import {
 } from "@/features/bot/bot.action";
 import {
   type Bot,
-  isBudgetAsk,
+  isAppStop,
   TASK_HISTORY_PAGE,
   type Task,
   type TaskLine,
@@ -35,7 +35,12 @@ import { BotMark } from "@/features/bot/components/bot-mark";
 import { Conversation } from "@/features/bot/components/bot-room";
 import { BotRoster } from "@/features/bot/components/bot-roster";
 import { toolIcon } from "@/features/bot/components/bot-tool";
-import { rosterOf, screenActs, taskFromRow } from "@/features/bot/task.store";
+import {
+  rosterOf,
+  screenActs,
+  taskFromRow,
+  useSeenOnDetail,
+} from "@/features/bot/task.store";
 import {
   SettingError,
   SettingFilter,
@@ -93,6 +98,9 @@ export function TaskSetting() {
     },
   });
 
+  // Expanding a row is reading its ending; that is what clears its dot.
+  useSeenOnDetail(tasks.find((task) => task.id === openId));
+
   const [stop] = useServerAction(cancelTaskAction, {
     okMessage: "Task stopped",
     onOk: (stopped) => {
@@ -276,8 +284,6 @@ function Row({
                   <ShinyText
                     text={line.text}
                     speed={2.2}
-                    color="var(--muted-foreground)"
-                    shineColor="var(--foreground)"
                     className="min-w-0 truncate"
                   />
                 ) : (
@@ -371,29 +377,28 @@ function secondLine(
   task: Task,
 ): { text: string; tone: string; tool?: string; shine?: boolean } | null {
   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.reported ? "text-muted-foreground" : "text-foreground/80",
+      tone: had ? "text-muted-foreground" : "text-foreground/80",
     };
   }
   for (let at = task.lines.length - 1; at >= 0; at--) {
@@ -473,8 +478,6 @@ function StepLog({ task }: { task: Task }) {
               <ShinyText
                 text={step.note ?? step.input}
                 speed={2.2}
-                color="var(--muted-foreground)"
-                shineColor="var(--foreground)"
                 className="min-w-0 flex-1 truncate"
               />
             ) : (