@inf-monkeys-tech/monkeys-design 1.0.12 → 1.0.13

package/dist/components/agent-workbench/index.js

@@ -730,6 +730,9 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   const searchRef = React2.useRef(null);
+  const renameInputRef = React2.useRef(null);
+  const [editingSessionId, setEditingSessionId] = React2.useState();
+  const [editingTitle, setEditingTitle] = React2.useState("");
   const query = viewModel.searchQuery.trim().toLocaleLowerCase();
   const agents = React2.useMemo(
     () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
@@ -749,6 +752,26 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
   }, []);
+  React2.useEffect(() => {
+    if (!editingSessionId) return;
+    renameInputRef.current?.focus();
+    renameInputRef.current?.select();
+  }, [editingSessionId]);
+  const beginRenameSession = (item) => {
+    setEditingSessionId(item.id);
+    setEditingTitle(item.title);
+  };
+  const cancelRenameSession = () => {
+    setEditingSessionId(void 0);
+    setEditingTitle("");
+  };
+  const saveRenameSession = (item) => {
+    const title = editingTitle.trim();
+    if (title && title !== item.title) {
+      onIntent?.({ type: "rename-session", sessionId: item.id, title });
+    }
+    cancelRenameSession();
+  };
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": messages.tabsLabel, className: cn2("h-full min-h-0", classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsxs(
     Tabs,
     {
@@ -843,9 +866,36 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
           /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }),
           /* @__PURE__ */ jsxRuntime.jsx(CollectionState, { status: viewModel.sessions.status, empty: messages.emptySessions, noResults: messages.noResults, hasItems: sessions.length > 0, query, error: viewModel.sessions.error, onRetry: () => onIntent?.({ type: "retry-sessions" }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: sessions.map((item) => {
-            const percent = item.contextUsage ? Math.min(100, Math.round(item.contextUsage.usedTokens / item.contextUsage.maxTokens * 100)) : void 0;
+            const percent = item.contextUsage && item.contextUsage.maxTokens > 0 ? Math.min(100, Math.round(item.contextUsage.usedTokens / item.contextUsage.maxTokens * 100)) : void 0;
             return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-current": item.id === viewModel.selectedSessionItem ? "page" : void 0, className: cn2("group flex w-full items-center gap-3 rounded-lg border border-transparent px-3 py-2 text-left hover:bg-muted aria-[current=page]:border-primary aria-[current=page]:bg-muted", classNames?.item), children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 text-left", onClick: () => onIntent?.({ type: "select-session", sessionId: item.id }), children: [
+              editingSessionId === item.id ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(SessionAvatar, { item }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: renameInputRef,
+                      value: editingTitle,
+                      "aria-label": messages.rename,
+                      className: "h-6 w-full rounded border border-primary bg-background px-1.5 text-sm font-medium outline-none",
+                      onChange: (event) => setEditingTitle(event.target.value),
+                      onClick: (event) => event.stopPropagation(),
+                      onBlur: () => saveRenameSession(item),
+                      onKeyDown: (event) => {
+                        event.stopPropagation();
+                        if (event.key === "Enter") {
+                          event.preventDefault();
+                          saveRenameSession(item);
+                        } else if (event.key === "Escape") {
+                          event.preventDefault();
+                          cancelRenameSession();
+                        }
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-xs text-foreground/80", children: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(new Date(item.updatedAt)) })
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "flex min-w-0 flex-1 items-center gap-3 text-left", onClick: () => onIntent?.({ type: "select-session", sessionId: item.id }), children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(SessionAvatar, { item }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
@@ -861,7 +911,7 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
                   event.stopPropagation();
                   onIntent?.({ type: "toggle-session-pin", sessionId: item.id, pinned: !item.pinned });
                 }, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
-                /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent }) })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent: (intent) => intent.type === "rename-session" ? beginRenameSession(item) : onIntent?.(intent) }) })
               ] })
             ] }, item.id);
           }) })