@lukeashford/aurelius 3.2.1 → 3.4.0

package/dist/index.d.mts

@@ -846,23 +846,17 @@ interface TodosListProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * @default "Tasks"
      */
     title?: string;
+    /**
+     * Called when the "Stop All Tasks" button is clicked.
+     * Only shown when at least one task is in_progress.
+     * The consumer decides what stopping means (cancel API calls, mark cancelled, etc.).
+     *
+     * May return a Promise. While the Promise is pending, the button becomes
+     * disabled and displays a spinner with "Stopping tasks" to give the user
+     * feedback that the stop request is in flight.
+     */
+    onStopAllTasks?: () => void | Promise<void>;
 }
-/**
- * TodosList displays a structured list of tasks with status indicators.
- *
- * Features:
- * - Nested tasks with indentation
- * - Status indicators: done (checkmark), in_progress (snake animation), pending (empty),
- * cancelled, failed
- * - Done tasks are crossed out with golden checkmark
- * - Cancelled/failed tasks are crossed out with subtle styling and sorted to bottom of their local
- * group
- * - Max 1/4 screen height with scroll
- * - Subtasks appear when parent task is in_progress or done
- *
- * The component automatically sorts cancelled/failed tasks to the bottom of their local group
- * (not globally), so just changing a task's status will reorder it appropriately.
- */
 declare const TodosList: React$1.ForwardRefExoticComponent<TodosListProps & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * Returns true when every task (and subtask, recursively) is in a
@@ -1402,6 +1396,16 @@ interface ChatInterfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
      * @default "Tasks"
      */
     tasksTitle?: string;
+    /**
+     * Called when the "Stop All Tasks" button is clicked in the tasks panel.
+     * Only shown when at least one task has in_progress status.
+     * The consumer app decides what stopping means (cancel API calls, mark tasks cancelled, etc.).
+     *
+     * May return a Promise. While the Promise is pending, the button becomes
+     * disabled and displays a spinner with "Stopping tasks" so the user knows
+     * the stop request is in flight.
+     */
+    onStopAllTasks?: () => void | Promise<void>;
     /**
      * Additional tools to add to the tool sidebars. Each ExternalToolDefinition provides
      * an id, icon, label, group ('top-left' | 'bottom-left' | 'top-right' | 'bottom-right'),

package/dist/index.d.ts

@@ -846,23 +846,17 @@ interface TodosListProps extends React$1.HTMLAttributes<HTMLDivElement> {
      * @default "Tasks"
      */
     title?: string;
+    /**
+     * Called when the "Stop All Tasks" button is clicked.
+     * Only shown when at least one task is in_progress.
+     * The consumer decides what stopping means (cancel API calls, mark cancelled, etc.).
+     *
+     * May return a Promise. While the Promise is pending, the button becomes
+     * disabled and displays a spinner with "Stopping tasks" to give the user
+     * feedback that the stop request is in flight.
+     */
+    onStopAllTasks?: () => void | Promise<void>;
 }
-/**
- * TodosList displays a structured list of tasks with status indicators.
- *
- * Features:
- * - Nested tasks with indentation
- * - Status indicators: done (checkmark), in_progress (snake animation), pending (empty),
- * cancelled, failed
- * - Done tasks are crossed out with golden checkmark
- * - Cancelled/failed tasks are crossed out with subtle styling and sorted to bottom of their local
- * group
- * - Max 1/4 screen height with scroll
- * - Subtasks appear when parent task is in_progress or done
- *
- * The component automatically sorts cancelled/failed tasks to the bottom of their local group
- * (not globally), so just changing a task's status will reorder it appropriately.
- */
 declare const TodosList: React$1.ForwardRefExoticComponent<TodosListProps & React$1.RefAttributes<HTMLDivElement>>;
 /**
  * Returns true when every task (and subtask, recursively) is in a
@@ -1402,6 +1396,16 @@ interface ChatInterfaceProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>
      * @default "Tasks"
      */
     tasksTitle?: string;
+    /**
+     * Called when the "Stop All Tasks" button is clicked in the tasks panel.
+     * Only shown when at least one task has in_progress status.
+     * The consumer app decides what stopping means (cancel API calls, mark tasks cancelled, etc.).
+     *
+     * May return a Promise. While the Promise is pending, the button becomes
+     * disabled and displays a spinner with "Stopping tasks" so the user knows
+     * the stop request is in flight.
+     */
+    onStopAllTasks?: () => void | Promise<void>;
     /**
      * Additional tools to add to the tool sidebars. Each ExternalToolDefinition provides
      * an id, icon, label, group ('top-left' | 'bottom-left' | 'top-right' | 'bottom-right'),

package/dist/index.js

@@ -6061,6 +6061,7 @@ ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/TodosList.tsx
 var import_react73 = __toESM(require("react"));
+var import_lucide_react14 = require("lucide-react");
 var TASK_STATUSES = {
   PENDING: "pending",
   IN_PROGRESS: "in_progress",
@@ -6126,9 +6127,26 @@ function TaskItem({ task, depth = 0 }) {
     )
   ), showSubtasks && /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
 }
+function hasInProgressTask(tasks) {
+  return tasks.some((t) => {
+    if (t.status === "in_progress") return true;
+    if (t.subtasks && t.subtasks.length > 0) return hasInProgressTask(t.subtasks);
+    return false;
+  });
+}
 var TodosList = import_react73.default.forwardRef(
-  ({ tasks, title = "Tasks", className, ...rest }, ref) => {
+  ({ tasks, title = "Tasks", onStopAllTasks, className, ...rest }, ref) => {
     const sortedTasks = (0, import_react73.useMemo)(() => sortTasks(tasks), [tasks]);
+    const [isStopping, setIsStopping] = (0, import_react73.useState)(false);
+    const handleStopClick = (0, import_react73.useCallback)(async () => {
+      if (!onStopAllTasks || isStopping) return;
+      try {
+        setIsStopping(true);
+        await onStopAllTasks();
+      } finally {
+        setIsStopping(false);
+      }
+    }, [onStopAllTasks, isStopping]);
     const countCompleted = (taskList) => {
       let count = 0;
       for (const task of taskList) {
@@ -6150,6 +6168,7 @@ var TodosList = import_react73.default.forwardRef(
       }
       return count;
     };
+    const showStopButton = !!onStopAllTasks && (hasInProgressTask(tasks) || isStopping);
     if (tasks.length === 0) {
       return null;
     }
@@ -6172,7 +6191,26 @@ var TodosList = import_react73.default.forwardRef(
         /* @__PURE__ */ import_react73.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
         /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
       ),
-      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: task.id, task })))
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: task.id, task }))),
+      showStopButton && /* @__PURE__ */ import_react73.default.createElement("div", { className: "px-4 py-2 border-t border-ash/40 flex-shrink-0" }, /* @__PURE__ */ import_react73.default.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: handleStopClick,
+          disabled: isStopping,
+          "aria-busy": isStopping,
+          "aria-label": isStopping ? "Stopping tasks" : "Stop all tasks",
+          className: cx(
+            "w-full flex items-center justify-center gap-2 px-3 py-1.5",
+            "bg-error/10 text-error",
+            "border border-error/30",
+            "text-xs font-medium",
+            "transition-colors duration-200",
+            isStopping ? "cursor-not-allowed opacity-70" : "hover:bg-error/20"
+          )
+        },
+        isStopping ? /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Loader2, { className: "w-3 h-3 animate-spin" }), "Stopping tasks") : /* @__PURE__ */ import_react73.default.createElement(import_react73.default.Fragment, null, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Square, { className: "w-3 h-3 fill-current" }), "Stop All Tasks")
+      ))
     );
   }
 );
@@ -6438,6 +6476,7 @@ var ChatInterface = import_react77.default.forwardRef(
     onArtifactsPanelOpenChange,
     tasks = [],
     tasksTitle,
+    onStopAllTasks,
     tools: externalTools = [],
     className,
     ...rest
@@ -6698,7 +6737,7 @@ var ChatInterface = import_react77.default.forwardRef(
             }
           );
         case "todos":
-          return tasks.length > 0 ? /* @__PURE__ */ import_react77.default.createElement(TodosList, { tasks, title: tasksTitle, className: "h-full" }) : /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
+          return tasks.length > 0 ? /* @__PURE__ */ import_react77.default.createElement(TodosList, { tasks, title: tasksTitle, onStopAllTasks, className: "h-full" }) : /* @__PURE__ */ import_react77.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react77.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react77.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react77.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
         default: {
           const externalTool = externalTools.find((t) => t.id === toolId);
           return externalTool?.content ?? null;
@@ -6796,7 +6835,7 @@ ChatInterface.displayName = "ChatInterface";
 
 // src/components/chat/MessageActions.tsx
 var import_react78 = __toESM(require("react"));
-var import_lucide_react14 = require("lucide-react");
+var import_lucide_react15 = require("lucide-react");
 var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react78.default.createElement(
   "button",
   {
@@ -6917,7 +6956,7 @@ var MessageActions = import_react78.default.forwardRef(
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.X, { className: "w-4 h-4" })
+            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.X, { className: "w-4 h-4" })
           ), /* @__PURE__ */ import_react78.default.createElement(
             ActionButton2,
             {
@@ -6926,7 +6965,7 @@ var MessageActions = import_react78.default.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Send, { className: "w-4 h-4" })
+            /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Send, { className: "w-4 h-4" })
           ))
         ),
         /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
@@ -6943,9 +6982,9 @@ var MessageActions = import_react78.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react14.RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Copy, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.Pencil, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ import_react78.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react78.default.createElement(import_lucide_react15.RotateCcw, { className: "w-3.5 h-3.5" }))
     );
   }
 );
@@ -6953,7 +6992,7 @@ MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
 var import_react79 = __toESM(require("react"));
-var import_lucide_react15 = require("lucide-react");
+var import_lucide_react16 = require("lucide-react");
 var BranchNavigator = import_react79.default.forwardRef(
   ({
     current,
@@ -6985,7 +7024,7 @@ var BranchNavigator = import_react79.default.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      showIcon && /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
       /* @__PURE__ */ import_react79.default.createElement(
         "button",
         {
@@ -6999,7 +7038,7 @@ var BranchNavigator = import_react79.default.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.ChevronLeft, { className: iconSize })
+        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.ChevronLeft, { className: iconSize })
       ),
       /* @__PURE__ */ import_react79.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
       /* @__PURE__ */ import_react79.default.createElement(
@@ -7015,7 +7054,7 @@ var BranchNavigator = import_react79.default.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react15.ChevronRight, { className: iconSize })
+        /* @__PURE__ */ import_react79.default.createElement(import_lucide_react16.ChevronRight, { className: iconSize })
       )
     );
   }