@invergent/agent-chat-react 1.4.9 → 1.4.11

package/dist/index.cjs

@@ -22,6 +22,7 @@ var Ansi = require('ansi-to-react');
 var tokenlens = require('tokenlens');
 var cmdk = require('cmdk');
 var nanoid = require('nanoid');
+var dateFns = require('date-fns');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -7927,32 +7928,31 @@ function mergeTreeNodes(groups) {
   }
   return Array.from(byId.values());
 }
-function statusColor(status) {
-  switch (status) {
-    case "active":
-      return "default";
-    case "completed":
-      return "secondary";
-    case "failed":
-      return "destructive";
-    default:
-      return "outline";
-  }
+function formatSessionTime(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  return dateFns.formatDistanceToNow(date, { addSuffix: true });
 }
 function TreeNodeRow({
   entry,
   depth,
   activeSessionId,
   canStop,
+  canDelete,
+  deletingSessionId,
   onSelect,
-  onStop
+  onStop,
+  onDelete
 }) {
   const [expanded, setExpanded] = react.useState(true);
   const hasChildren = entry.children.length > 0;
   const isActive = entry.id === activeSessionId;
   const isRunning = entry.status === "active";
-  const messageCount = entry.messageCount ?? 0;
-  const toolCallCount = entry.toolCallCount ?? 0;
+  const title = entry.title ?? "New session";
+  const subtitle = [
+    entry.model ?? "default",
+    formatSessionTime(entry.updatedAt)
+  ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -7964,16 +7964,16 @@ function TreeNodeRow({
           if (e.key === "Enter" || e.key === " ") onSelect(entry.id);
         },
         className: cn(
-          "group flex items-center gap-1.5 py-1.5 pr-1 rounded cursor-pointer text-sm transition-colors",
-          isActive ? "bg-line text-foreground" : "hover:bg-input text-subtle hover:text-foreground"
+          "group flex items-center gap-2 w-full py-2 pr-2 text-left cursor-pointer transition-colors border-l-2",
+          isActive ? "bg-line text-foreground border-l-primary" : "bg-transparent text-subtle hover:bg-input hover:text-foreground border-l-transparent"
         ),
-        style: { paddingLeft: `${depth * 12 + 4}px` },
+        style: { paddingLeft: `${depth * 12 + 12}px` },
         children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              className: "p-0.5 rounded hover:bg-line",
+              className: "p-0.5 rounded hover:bg-line shrink-0",
               onClick: (e) => {
                 e.stopPropagation();
                 setExpanded(!expanded);
@@ -7983,32 +7983,10 @@ function TreeNodeRow({
               children: expanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "w-3.5 h-3.5" })
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: entry.title ?? entry.channel ?? "session" }),
-            entry.agentType && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: "h-4 px-1.5 text-[10px]", children: entry.agentType }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Badge,
-              {
-                variant: statusColor(entry.status),
-                className: "h-4 px-1.5 text-[10px]",
-                children: entry.status
-              }
-            )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm truncate", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-faint truncate", children: subtitle })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "span",
-            {
-              className: "text-xs text-faint shrink-0 tabular-nums",
-              "aria-label": `${messageCount} messages, ${toolCallCount} tool calls`,
-              title: `${messageCount} messages, ${toolCallCount} tool calls`,
-              children: [
-                messageCount,
-                "m/",
-                toolCallCount,
-                "t"
-              ]
-            }
-          ),
           isRunning && canStop && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
@@ -8022,6 +8000,21 @@ function TreeNodeRow({
               title: "Stop sub-agent",
               children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SquareIcon, { className: "w-3 h-3", fill: "currentColor" })
             }
+          ),
+          canDelete && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "p-1 rounded opacity-0 group-hover:opacity-100 focus-visible:opacity-100 hover:bg-destructive/10 hover:text-destructive disabled:pointer-events-none disabled:opacity-50 transition-all",
+              onClick: (e) => {
+                e.stopPropagation();
+                onDelete(entry.id);
+              },
+              "aria-label": "Delete session",
+              title: "Delete session",
+              disabled: deletingSessionId === entry.id,
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2Icon, { className: "w-3 h-3" })
+            }
           )
         ]
       }
@@ -8033,8 +8026,11 @@ function TreeNodeRow({
         depth: depth + 1,
         activeSessionId,
         canStop,
+        canDelete,
+        deletingSessionId,
         onSelect,
-        onStop
+        onStop,
+        onDelete
       },
       child.id
     ))
@@ -8048,15 +8044,20 @@ function SessionTreePanel({
   title = "Running",
   sessionListLimit = DEFAULT_SESSION_LIST_LIMIT,
   hideRoot = false,
-  onSessionSelect
+  onSessionSelect,
+  onSessionDelete
 }) {
   const [nodes, setNodes] = react.useState([]);
   const [loading, setLoading] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [hasEverLoaded, setHasEverLoaded] = react.useState(false);
+  const [deletingSessionId, setDeletingSessionId] = react.useState(
+    null
+  );
   const mounted = react.useRef(true);
   const requestId = react.useRef(0);
   const lastFingerprint = react.useRef("");
+  const resetContext = react.useRef(null);
   const refetch = react.useCallback(
     async (opts) => {
       const canLoadSessionList = Boolean(agentId && adapter.listSessions);
@@ -8111,12 +8112,17 @@ function SessionTreePanel({
     };
   }, []);
   react.useEffect(() => {
-    setNodes([]);
+    const previous = resetContext.current;
+    const shouldReset = !previous || previous.adapter !== adapter || previous.agentId !== agentId || previous.sessionListLimit !== sessionListLimit;
+    resetContext.current = { adapter, agentId, sessionListLimit };
+    if (shouldReset) {
+      setNodes([]);
+      setHasEverLoaded(false);
+      lastFingerprint.current = "";
+    }
     setError(null);
-    setHasEverLoaded(false);
-    lastFingerprint.current = "";
     void refetch();
-  }, [refetch, sessionId]);
+  }, [adapter, agentId, refetch, sessionListLimit]);
   const runningCount = react.useMemo(
     () => nodes.filter((n) => n.status === "active").length,
     [nodes]
@@ -8147,17 +8153,44 @@ function SessionTreePanel({
     },
     [adapter, refetch]
   );
+  const handleDelete = react.useCallback(
+    async (id) => {
+      if (!adapter.deleteSession || deletingSessionId) return;
+      setDeletingSessionId(id);
+      try {
+        await adapter.deleteSession({ sessionId: id });
+        onSessionDelete?.(id);
+        await refetch({ silent: true });
+      } catch (e) {
+        setError(e instanceof Error ? e.message : "Failed to delete session");
+      } finally {
+        if (mounted.current) setDeletingSessionId(null);
+      }
+    },
+    [adapter, deletingSessionId, onSessionDelete, refetch]
+  );
   if (!hasEverLoaded) return null;
   if (nodes.length === 0) return null;
   const topLevel = hideRoot ? roots.flatMap((r) => r.children) : roots;
   if (topLevel.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-line", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-faint", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
       /* @__PURE__ */ jsxRuntime.jsx(lucideReact.UsersIcon, { className: "w-3.5 h-3.5" }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
       runningCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", className: "h-4 px-1.5 text-[10px] ml-auto", children: runningCount })
     ] }),
-    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-faint", children: "Loading..." }),
+    loading && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "px-3 py-2",
+        role: "status",
+        "aria-label": "Loading sessions",
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3.5 w-28" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { className: "h-3 w-20" })
+        ] })
+      }
+    ),
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
     !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-1 pb-2", children: topLevel.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
       TreeNodeRow,
@@ -8166,8 +8199,11 @@ function SessionTreePanel({
         depth: 0,
         activeSessionId: activeSessionId ?? "",
         canStop: Boolean(adapter.stopSession),
+        canDelete: Boolean(adapter.deleteSession),
+        deletingSessionId,
         onSelect: handleSelect,
-        onStop: handleStop
+        onStop: handleStop,
+        onDelete: handleDelete
       },
       entry.id
     )) })