@invergent/agent-chat-react 2.19.1 → 2.19.2

package/dist/index.cjs

@@ -8,6 +8,7 @@ var nextThemes = require('next-themes');
 var jsxRuntime = require('react/jsx-runtime');
 var button = require('@invergent/ui-sdk/button');
 var dropdownMenu = require('@invergent/ui-sdk/dropdown-menu');
+var tabStrip = require('@invergent/ui-sdk/tab-strip');
 var toggle = require('@invergent/ui-sdk/toggle');
 var confirmDialog = require('@invergent/ui-sdk/confirm-dialog');
 var dialog = require('@invergent/ui-sdk/dialog');
@@ -527,12 +528,11 @@ function BrowserShell({
           (onToggleControl || hasControl) && /* @__PURE__ */ jsxRuntime.jsx(
             toggle.Toggle,
             {
-              size: "sm",
+              size: "icon-xs",
               "data-testid": "browser-shell-control",
               "aria-label": hasControl ? "Return control" : "Take control",
               pressed: hasControl,
               onPressedChange: () => onToggleControl?.(),
-              className: "size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0",
               children: /* @__PURE__ */ jsxRuntime.jsx(Pointer, {})
             }
           ),
@@ -590,45 +590,21 @@ function BrowserShell({
           ] })
         ] }),
         showTabs && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          tabStrip.TabStrip,
           {
             "data-testid": "browser-shell-tabs",
-            className: "flex min-h-[34px] items-center gap-0.5 border-b border-line bg-card px-1.5",
-            children: tabs.map((tab) => (
-              // A div, not a button: the close control nests inside, and a
-              // button inside a button is invalid markup.
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  role: "tab",
-                  tabIndex: 0,
-                  "aria-selected": tab.active,
-                  "data-testid": "browser-shell-tab",
-                  onClick: () => send({ t: "switch_tab", id: tab.id }),
-                  onKeyDown: (event) => {
-                    if (event.key === "Enter") send({ t: "switch_tab", id: tab.id });
-                  },
-                  className: `flex h-6 max-w-33 cursor-pointer items-center gap-1 truncate rounded px-2 text-[11px] ${tab.active ? "bg-secondary text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: tab.title || tab.url }),
-                    hasControl && /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "data-testid": "browser-shell-tab-close",
-                        "aria-label": `Close ${tab.title || tab.url}`,
-                        onClick: (event) => {
-                          event.stopPropagation();
-                          command({ t: "close_tab", id: tab.id });
-                        },
-                        className: "flex size-3.5 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-secondary hover:text-foreground",
-                        children: /* @__PURE__ */ jsxRuntime.jsx(XSmall, {})
-                      }
-                    )
-                  ]
-                },
-                tab.id
-              )
+            className: "min-h-[34px] border-b border-line bg-card px-1.5",
+            children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+              tabStrip.TabStripTab,
+              {
+                active: tab.active,
+                "data-testid": "browser-shell-tab",
+                onSelect: () => send({ t: "switch_tab", id: tab.id }),
+                onClose: hasControl ? () => command({ t: "close_tab", id: tab.id }) : void 0,
+                closeLabel: `Close ${tab.title || tab.url}`,
+                children: tab.title || tab.url
+              },
+              tab.id
             ))
           }
         ),
@@ -708,10 +684,6 @@ var Pointer = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.586 12.586 19 19" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z" })
 ] });
-var XSmall = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, width: 10, height: 10, className: "size-2.5", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
-] });
 var Ellipsis = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svg, children: [
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1" }),
@@ -2247,7 +2219,7 @@ var statusLabels = {
 };
 var statusTones = {
   "approval-requested": "warn",
-  "approval-responded": "muted",
+  "approval-responded": "info",
   "input-available": "muted",
   "input-streaming": "muted",
   "output-available": "ok",
@@ -4556,7 +4528,7 @@ function StatusIcon({ tc }) {
 function DefaultToolBlock({ tc }) {
   const summary = toolSummary(tc);
   return /* @__PURE__ */ jsxRuntime.jsxs(collapsible.Collapsible, { className: "overflow-hidden rounded-[10px] border border-foreground/[0.08]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(collapsibleHeader.CollapsibleHeader, { variant: "section", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(collapsibleHeader.CollapsibleHeader, { variant: "section", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { tc }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: toolLabel(tc.toolName) }),
       summary && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-xs font-normal text-muted-foreground/70", children: summary })
@@ -7293,7 +7265,7 @@ function ResearchSourcesPanel({
       onOpenChange: setExpanded,
       className: "rounded-[10px] border border-foreground/[0.08] bg-card",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(collapsibleHeader.CollapsibleHeader, { variant: "section", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(collapsibleHeader.CollapsibleHeader, { variant: "section", size: "sm", children: [
           "Sources \xB7 ",
           sources.length
         ] }),
@@ -14627,8 +14599,6 @@ var TOOLS = [
   { id: "select", label: "Select", Icon: lucideReact.MousePointer2 },
   { id: "pan", label: "Pan", Icon: lucideReact.Hand }
 ];
-var TOOL_ITEM = "size-9 px-0 pointer-coarse:size-11";
-var SWATCH_ITEM = "size-7 px-0 pointer-coarse:size-11";
 function ToolRail({
   tool,
   onToolChange,
@@ -14662,7 +14632,7 @@ function ToolRail({
               if (next) onToolChange(next);
             },
             disabled,
-            children: TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: id, "aria-label": label, className: TOOL_ITEM, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) }, id))
+            children: TOOLS.map(({ id, label, Icon }) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: id, "aria-label": label, size: "icon", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }) }, id))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px w-full bg-border" }),
@@ -14679,7 +14649,7 @@ function ToolRail({
               if (next) onColorChange(next);
             },
             disabled,
-            children: INK_COLORS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: c, "aria-label": `Colour ${c}`, className: SWATCH_ITEM, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-5 rounded-full", style: { backgroundColor: c } }) }, c))
+            children: INK_COLORS.map((c) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: c, "aria-label": `Colour ${c}`, size: "icon-xs", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-5 rounded-full", style: { backgroundColor: c } }) }, c))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 h-px w-full bg-border" }),
@@ -14696,7 +14666,7 @@ function ToolRail({
               if (next) onWidthChange(Number(next));
             },
             disabled,
-            children: INK_WIDTHS.map((w) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: String(w), "aria-label": `Width ${w}`, className: SWATCH_ITEM, children: /* @__PURE__ */ jsxRuntime.jsx(
+            children: INK_WIDTHS.map((w) => /* @__PURE__ */ jsxRuntime.jsx(toggleGroup.ToggleGroupItem, { value: String(w), "aria-label": `Width ${w}`, size: "icon-xs", children: /* @__PURE__ */ jsxRuntime.jsx(
               "span",
               {
                 className: "rounded-full bg-foreground",
@@ -15810,6 +15780,7 @@ function OfficeEditorPane({ adapter, sessionId, path, view, officeEvent, onClose
   const placeholderId = `office-editor-${react.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const [error, setError] = react.useState(null);
   const [loading, setLoading] = react.useState(true);
+  const [mentionTrouble, setMentionTrouble] = react.useState(null);
   const [openedAfter] = react.useState(() => officeEvent?.eventId ?? 0);
   const notice = officeEvent && officeEvent.eventId > openedAfter ? officeEvent : null;
   const [reopenedFor, setReopenedFor] = react.useState(0);
@@ -15826,6 +15797,7 @@ function OfficeEditorPane({ adapter, sessionId, path, view, officeEvent, onClose
     let editor = null;
     setError(null);
     setLoading(true);
+    setMentionTrouble(null);
     void (async () => {
       try {
         if (!adapter.getWorkspaceEditorConfig) throw new Error("Preview not available. Download the file to open it.");
@@ -15833,7 +15805,31 @@ function OfficeEditorPane({ adapter, sessionId, path, view, officeEvent, onClose
         await loadDocsApi(opened.document_server_url);
         if (cancelled) return;
         if (!window.DocsAPI) throw new Error("The document editor could not be loaded.");
-        editor = new window.DocsAPI.DocEditor(placeholderId, opened.config);
+        const users = opened.mentionable_users ?? [];
+        const notify = adapter.notifyWorkspaceEditorMention?.bind(adapter);
+        const events = users.length && notify ? {
+          onRequestUsers: (event) => {
+            const c = event.data?.c;
+            editor?.setUsers({ c, users: c === "mention" || c === "info" ? users : [] });
+          },
+          onRequestSendNotify: (event) => {
+            const mention = event.data ?? {};
+            const emails = mention.emails ?? [];
+            const named2 = new Set(emails.map((email) => email.toLowerCase()));
+            if (!users.some((user) => named2.has(user.email.toLowerCase()))) return;
+            setMentionTrouble(null);
+            void notify({
+              sessionId,
+              path,
+              emails,
+              message: mention.message ?? "",
+              commentId: String(mention.actionLink?.action?.data ?? mention.actionId ?? "")
+            }).catch((sendError) => {
+              if (!cancelled) setMentionTrouble(`The agent was not told about your comment: ${sendError.message}`);
+            });
+          }
+        } : null;
+        editor = new window.DocsAPI.DocEditor(placeholderId, events ? { ...opened.config, events } : opened.config);
       } catch (openError) {
         if (!cancelled) setError(openError.message);
       } finally {
@@ -15885,6 +15881,7 @@ function OfficeEditorPane({ adapter, sessionId, path, view, officeEvent, onClose
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: error })
         ] }),
         notice && saveNotice(notice) && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: "border-b border-line px-3 py-2 text-xs text-muted-foreground", children: saveNotice(notice) }),
+        mentionTrouble && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: "border-b border-line px-3 py-2 text-xs text-muted-foreground", children: mentionTrouble }),
         loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 text-sm text-muted-foreground", children: [
           "Opening ",
           fileName2,
@@ -16565,7 +16562,7 @@ function WorkspacePanel({
             )
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            ConfirmDialog2,
+            confirmDialog.ConfirmDialog,
             {
               open: deleteTarget !== null,
               title: "Delete file?",
@@ -16585,53 +16582,6 @@ function WorkspacePanel({
     )
   );
 }
-function ConfirmDialog2({
-  open,
-  title,
-  description,
-  confirmLabel,
-  loading,
-  onConfirm,
-  onCancel
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    dialog.Dialog,
-    {
-      open,
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen && !loading) onCancel();
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        dialog.DialogContent,
-        {
-          showCloseButton: false,
-          className: "gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: description })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { className: "pt-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", disabled: loading, onClick: onCancel, children: "Cancel" }),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                button.Button,
-                {
-                  variant: "destructive",
-                  disabled: loading,
-                  onClick: onConfirm,
-                  children: [
-                    loading && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "mr-1.5 size-3.5 animate-spin" }),
-                    confirmLabel
-                  ]
-                }
-              )
-            ] })
-          ]
-        }
-      )
-    }
-  );
-}
 
 // src/agent-chat.tsx
 init_utils();
@@ -16675,12 +16625,7 @@ function readOnlyReasonForSession(session) {
   }
   return { readOnly: false };
 }
-var RIGHT_STACK_STYLE = {
-  // Both the column's width and the chat panel's right offset read this, so
-  // one value keeps them complementary. 50%: the browser shell renders a real
-  // page, and page layouts are unusable in a 440px strip.
-  ["--right-stack-w"]: "50%"
-};
+var RIGHT_STACK_STYLE = { ["--right-stack-w"]: "75%" };
 var MOBILE_PANE_LABELS = {
   chat: "Chat",
   browser: "Browser",
@@ -18695,6 +18640,7 @@ function compareNodes(a, b) {
 }
 var IDEA_STATUS_TONE = {
   merged: "ok",
+  done: "info",
   running: "warn",
   failed: "bad"
 };
@@ -19026,7 +18972,7 @@ function TaskDetail({
       /* @__PURE__ */ jsxRuntime.jsx(MessageResponse, { className: "text-sm leading-relaxed text-foreground/90", children: task.goal })
     ] }),
     task.resultMetadata ? /* @__PURE__ */ jsxRuntime.jsxs(collapsible.Collapsible, { className: "rounded-[10px] border border-foreground/[0.08]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(collapsibleHeader.CollapsibleHeader, { variant: "section", children: "Result metadata" }),
+      /* @__PURE__ */ jsxRuntime.jsx(collapsibleHeader.CollapsibleHeader, { variant: "section", size: "sm", children: "Result metadata" }),
       /* @__PURE__ */ jsxRuntime.jsx(collapsible.CollapsibleContent, { children: /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap border-t border-foreground/[0.08] px-3 py-2 text-[11px] text-foreground/90", children: JSON.stringify(task.resultMetadata, null, 2) }) })
     ] }) : null,
     eventsSupported && taskEvents.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [