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

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

@@ -1,6 +1,6 @@
 import { ChevronDown, Check, ChevronRight, Circle, ChevronUp, Search, X, Plus, Pin, SquarePen, Blocks, Settings, TerminalSquare, Clock3, FileOutput, Download, RefreshCw, Bot, Image, Loader2, CheckCircle2, AlertCircle, Ellipsis, Pencil, Trash2, XCircle, CircleStop, Copy, RotateCcw, FileCode2, Files, TestTube2 } from 'lucide-react';
 import * as React2 from 'react';
-import { createContext, useRef, useMemo, useEffect, useState, useContext } from 'react';
+import { createContext, useRef, useState, useMemo, useEffect, useContext } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -700,6 +700,9 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
   const { locale } = useMonkeysLocale();
   const messages = useMonkeysLocaleMessages().agentWorkbench.navigation;
   const searchRef = useRef(null);
+  const renameInputRef = useRef(null);
+  const [editingSessionId, setEditingSessionId] = useState();
+  const [editingTitle, setEditingTitle] = useState("");
   const query = viewModel.searchQuery.trim().toLocaleLowerCase();
   const agents = useMemo(
     () => viewModel.agents.items.filter((item) => !query || `${item.name} ${item.description ?? ""}`.toLocaleLowerCase().includes(query)),
@@ -719,6 +722,26 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
     window.addEventListener("keydown", handleShortcut);
     return () => window.removeEventListener("keydown", handleShortcut);
   }, []);
+  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__ */ jsx("nav", { "aria-label": messages.tabsLabel, className: cn2("h-full min-h-0", classNames?.root, className), children: /* @__PURE__ */ jsxs(
     Tabs,
     {
@@ -813,9 +836,36 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
           /* @__PURE__ */ jsx("h3", { className: "mb-2 px-3 text-xs font-medium text-muted-foreground", children: messages.recentSessions }),
           /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+                /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
+                /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted", children: /* @__PURE__ */ jsx(SessionAvatar, { item }) }),
                 /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
                   /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: item.title }),
@@ -831,7 +881,7 @@ function AgentWorkbenchSidebar({ viewModel, className, classNames, onIntent }) {
                   event.stopPropagation();
                   onIntent?.({ type: "toggle-session-pin", sessionId: item.id, pinned: !item.pinned });
                 }, children: /* @__PURE__ */ jsx(Pin, { className: cn2("size-4", item.pinned && "fill-current") }) }) : null,
-                /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent }) })
+                /* @__PURE__ */ jsx("span", { onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx(SessionActions, { item, capabilities: viewModel.capabilities, onIntent: (intent) => intent.type === "rename-session" ? beginRenameSession(item) : onIntent?.(intent) }) })
               ] })
             ] }, item.id);
           }) })