@invergent/agent-chat-react 1.4.10 → 1.4.11

package/dist/index.js

@@ -18,6 +18,7 @@ import Ansi from 'ansi-to-react';
 import { getUsage } from 'tokenlens';
 import { Command as Command$1 } from 'cmdk';
 import { nanoid } from 'nanoid';
+import { formatDistanceToNow } from 'date-fns';
 
 // src/agent-chat.tsx
 var AgentChatAdapterContext = createContext(null);
@@ -7822,17 +7823,10 @@ 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 formatDistanceToNow(date, { addSuffix: true });
 }
 function TreeNodeRow({
   entry,
@@ -7849,6 +7843,11 @@ function TreeNodeRow({
   const hasChildren = entry.children.length > 0;
   const isActive = entry.id === activeSessionId;
   const isRunning = entry.status === "active";
+  const title = entry.title ?? "New session";
+  const subtitle = [
+    entry.model ?? "default",
+    formatSessionTime(entry.updatedAt)
+  ].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -7860,16 +7859,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__ */ 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);
@@ -7879,17 +7878,9 @@ function TreeNodeRow({
               children: expanded ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-3.5 h-3.5" })
             }
           ) : /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 flex items-center gap-1.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: entry.title ?? "session" }),
-            entry.agentType && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "h-4 px-1.5 text-[10px]", children: entry.agentType }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                variant: statusColor(entry.status),
-                className: "h-4 px-1.5 text-[10px]",
-                children: entry.status
-              }
-            )
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm truncate", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs text-faint truncate", children: subtitle })
           ] }),
           isRunning && canStop && /* @__PURE__ */ jsx(
             "button",
@@ -7961,6 +7952,7 @@ function SessionTreePanel({
   const mounted = useRef(true);
   const requestId = useRef(0);
   const lastFingerprint = useRef("");
+  const resetContext = useRef(null);
   const refetch = useCallback(
     async (opts) => {
       const canLoadSessionList = Boolean(agentId && adapter.listSessions);
@@ -8015,12 +8007,17 @@ function SessionTreePanel({
     };
   }, []);
   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 = useMemo(
     () => nodes.filter((n) => n.status === "active").length,
     [nodes]
@@ -8072,12 +8069,23 @@ function SessionTreePanel({
   const topLevel = hideRoot ? roots.flatMap((r) => r.children) : roots;
   if (topLevel.length === 0) return null;
   return /* @__PURE__ */ jsxs("div", { className: "border-t border-line", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-faint", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 text-xs font-semibold uppercase tracking-wide", children: [
       /* @__PURE__ */ jsx(UsersIcon, { className: "w-3.5 h-3.5" }),
       /* @__PURE__ */ jsx("span", { children: title }),
       runningCount > 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", className: "h-4 px-1.5 text-[10px] ml-auto", children: runningCount })
     ] }),
-    loading && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-faint", children: "Loading..." }),
+    loading && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "px-3 py-2",
+        role: "status",
+        "aria-label": "Loading sessions",
+        children: /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-28" }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-20" })
+        ] })
+      }
+    ),
     error && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 text-xs text-destructive", children: error }),
     !error && /* @__PURE__ */ jsx("div", { className: "px-1 pb-2", children: topLevel.map((entry) => /* @__PURE__ */ jsx(
       TreeNodeRow,