@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/smart-input/composer/ComposerPlusMenu.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from "react";
 import {
   AppWindow,
@@ -140,7 +141,7 @@ function ComposerPlusMenu({
   const memoryOn = memoryRequested ? memoryTarget : memoryEnabled;
   const shows = (control) => composerShows(mode, control);
   const close = () => setOpen(false);
-  const picker = (view, closeCascade, initialUploadFiles) => /* @__PURE__ */ React.createElement(
+  const picker = (view, closeCascade, initialUploadFiles) => /* @__PURE__ */ jsx(
     ResourcePickerMenu,
     {
       conversationId,
@@ -164,184 +165,233 @@ function ComposerPlusMenu({
     onResourceDeselected: detachResource,
     attachmentCapabilities
   });
-  const body = /* @__PURE__ */ React.createElement(ComposerMenuCloseAllContext.Provider, { value: close }, /* @__PURE__ */ React.createElement(ComposerMenuLevel, null, /* @__PURE__ */ React.createElement(SheetQuickAdd, { openFiles: (files, back) => picker("files", back, files) }), presentation === "sheet" ? null : (
-    // On the phone the Files tile above is this door.
-    /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: FolderOpen, label: "Add files or photos" }, panelClassName: PICKER_PANEL }, (closeCascade) => picker("files", closeCascade))
-  ), /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Link2, label: "Add a link" }, panelClassName: LINK_PANEL }, (closeCascade) => picker("webpage", closeCascade)), hostPicker ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ComposerSubmenu,
-    {
-      row: { icon: Boxes, label: "From your workspace" },
-      panelClassName: CONTENT_PANEL,
-      drillInPlace: true
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex flex-col p-1.5" }, /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "Attach from AI Matrx"), workspaceRows().map((row) => /* @__PURE__ */ React.createElement(ComposerSubmenu, { key: row.view, row: { icon: row.icon, label: row.label } }, (back) => picker(row.view, back))))
-  ), /* @__PURE__ */ React.createElement(
-    ComposerSubmenu,
-    {
-      row: { icon: contextValuesItem().icon, label: contextValuesItem().label },
-      panelClassName: PICKER_PANEL
-    },
-    (closeCascade) => picker("context_values", closeCascade)
-  ), /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: Search,
-      label: "Search your knowledge",
-      detail: touchOnly ? void 0 : "\u2318K",
-      onClick: () => {
-        close();
-        openAttachSearch();
+  const body = /* @__PURE__ */ jsx(ComposerMenuCloseAllContext.Provider, { value: close, children: /* @__PURE__ */ jsxs(ComposerMenuLevel, { children: [
+    /* @__PURE__ */ jsx(SheetQuickAdd, { openFiles: (files, back) => picker("files", back, files) }),
+    presentation === "sheet" ? null : (
+      // On the phone the Files tile above is this door.
+      /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: FolderOpen, label: "Add files or photos" }, panelClassName: PICKER_PANEL, children: (closeCascade) => picker("files", closeCascade) })
+    ),
+    /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Link2, label: "Add a link" }, panelClassName: LINK_PANEL, children: (closeCascade) => picker("webpage", closeCascade) }),
+    hostPicker ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ComposerSubmenu,
+        {
+          row: { icon: Boxes, label: "From your workspace" },
+          panelClassName: CONTENT_PANEL,
+          drillInPlace: true,
+          children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col p-1.5", children: [
+            /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Attach from AI Matrx" }),
+            workspaceRows().map((row) => /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: row.icon, label: row.label }, children: (back) => picker(row.view, back) }, row.view))
+          ] })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComposerSubmenu,
+        {
+          row: { icon: contextValuesItem().icon, label: contextValuesItem().label },
+          panelClassName: PICKER_PANEL,
+          children: (closeCascade) => picker("context_values", closeCascade)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: Search,
+          label: "Search your knowledge",
+          detail: touchOnly ? void 0 : "\u2318K",
+          onClick: () => {
+            close();
+            openAttachSearch();
+          }
+        }
+      )
+    ] }) : null,
+    shows("plus.skills") || shows("plus.tools") || shows("plus.connectors") || shows("plus.environment") ? /* @__PURE__ */ jsx(ComposerMenuDivider, {}) : null,
+    shows("plus.skills") ? runControlsInline ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Lightbulb, label: "Skills", badge: counts.skills }, children: /* @__PURE__ */ jsx(RunSkillPicker, { conversationId }) }) : /* @__PURE__ */ jsx(
+      ComposerMenuRow,
+      {
+        icon: Lightbulb,
+        label: "Skills",
+        badge: counts.skills,
+        onClick: () => {
+          close();
+          openRunControlsWindow({ conversationId, initialTab: "skills" });
+        }
       }
-    }
-  )) : null, shows("plus.skills") || shows("plus.tools") || shows("plus.connectors") || shows("plus.environment") ? /* @__PURE__ */ React.createElement(ComposerMenuDivider, null) : null, shows("plus.skills") ? runControlsInline ? /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Lightbulb, label: "Skills", badge: counts.skills } }, /* @__PURE__ */ React.createElement(RunSkillPicker, { conversationId })) : /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: Lightbulb,
-      label: "Skills",
-      badge: counts.skills,
-      onClick: () => {
-        close();
-        openRunControlsWindow({ conversationId, initialTab: "skills" });
+    ) : null,
+    shows("plus.tools") ? runControlsInline ? (
+      // Phone: a full-height page — THE Tools surface, one pane at a time.
+      /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Wrench, label: "Tools", badge: counts.tools }, children: /* @__PURE__ */ jsx(RunToolPicker, { conversationId }) })
+    ) : (
+      // Desktop: a click (never a hover cascade) opens THE Tools surface
+      // roomy, in Chat Options on its Tools tab.
+      /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: Wrench,
+          label: "Tools",
+          badge: counts.tools,
+          onClick: () => {
+            close();
+            openRunControlsWindow({ conversationId, initialTab: "tools" });
+          }
+        }
+      )
+    ) : null,
+    shows("plus.connectors") ? /* @__PURE__ */ jsxs(ComposerSubmenu, { row: { icon: Plug, label: "Connections" }, panelClassName: "w-[360px] h-[min(70dvh,480px)]", children: [
+      /* @__PURE__ */ jsx(ComposerConnectorsPanel, { conversationId, onNavigate: close }),
+      hostPicker ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Globe, label: "Google Workspace files" }, panelClassName: PICKER_PANEL, children: (closeCascade) => picker("google", closeCascade) }) : null
+    ] }) : null,
+    shows("plus.environment") ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Server, label: "Environment" }, panelClassName: "w-80", children: /* @__PURE__ */ jsx(
+      ComposerEnvironmentPanel,
+      {
+        conversationId,
+        sandboxBlocked,
+        onOpenSandbox: () => {
+          close();
+          openRunControlsWindow({ conversationId, initialTab: "sandbox" });
+        },
+        onOpenBrowser: () => {
+          close();
+          openCloudBrowser({ conversationId });
+        },
+        onChosen: close
       }
-    }
-  ) : null, shows("plus.tools") ? runControlsInline ? (
-    // Phone: a full-height page — THE Tools surface, one pane at a time.
-    /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Wrench, label: "Tools", badge: counts.tools } }, /* @__PURE__ */ React.createElement(RunToolPicker, { conversationId }))
-  ) : (
-    // Desktop: a click (never a hover cascade) opens THE Tools surface
-    // roomy, in Chat Options on its Tools tab.
-    /* @__PURE__ */ React.createElement(
+    ) }) : null,
+    shows("plus.model") ? (
+      // The model is secondary to the agent (an agent is built with one) —
+      // here, beside the per-run overrides, in every mode.
+      /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Cpu, label: "Model and overrides" }, panelClassName: "w-[360px] h-[min(70dvh,520px)] p-0", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-0 flex-col", children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 p-1.5", children: /* @__PURE__ */ jsx(QuickRunModelSelect, { conversationId, className: "h-8 w-full" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain", children: [
+          /* @__PURE__ */ jsx(RunConfigOverrides, { conversationId }),
+          /* @__PURE__ */ jsx(RunInputCapabilities, { conversationId })
+        ] })
+      ] }) })
+    ) : null,
+    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+    shows("plus.previewContext") ? /* @__PURE__ */ jsx(
       ComposerMenuRow,
       {
-        icon: Wrench,
-        label: "Tools",
-        badge: counts.tools,
+        icon: Eye,
+        label: "Preview context",
         onClick: () => {
           close();
-          openRunControlsWindow({ conversationId, initialTab: "tools" });
+          openContextPreview({ conversationId, agentId: agentId ?? void 0 });
         }
       }
-    )
-  ) : null, shows("plus.connectors") ? /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Plug, label: "Connections" }, panelClassName: "w-[360px] h-[min(70dvh,480px)]" }, /* @__PURE__ */ React.createElement(ComposerConnectorsPanel, { conversationId, onNavigate: close }), hostPicker ? /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Globe, label: "Google Workspace files" }, panelClassName: PICKER_PANEL }, (closeCascade) => picker("google", closeCascade)) : null) : null, shows("plus.environment") ? /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Server, label: "Environment" }, panelClassName: "w-80" }, /* @__PURE__ */ React.createElement(
-    ComposerEnvironmentPanel,
-    {
-      conversationId,
-      sandboxBlocked,
-      onOpenSandbox: () => {
-        close();
-        openRunControlsWindow({ conversationId, initialTab: "sandbox" });
-      },
-      onOpenBrowser: () => {
-        close();
-        openCloudBrowser({ conversationId });
-      },
-      onChosen: close
-    }
-  )) : null, shows("plus.model") ? (
-    // The model is secondary to the agent (an agent is built with one) —
-    // here, beside the per-run overrides, in every mode.
-    /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Cpu, label: "Model and overrides" }, panelClassName: "w-[360px] h-[min(70dvh,520px)] p-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0 p-1.5" }, /* @__PURE__ */ React.createElement(QuickRunModelSelect, { conversationId, className: "h-8 w-full" })), /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain" }, /* @__PURE__ */ React.createElement(RunConfigOverrides, { conversationId }), /* @__PURE__ */ React.createElement(RunInputCapabilities, { conversationId }))))
-  ) : null, /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), shows("plus.previewContext") ? /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: Eye,
-      label: "Preview context",
-      onClick: () => {
-        close();
-        openContextPreview({ conversationId, agentId: agentId ?? void 0 });
+    ) : null,
+    /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: FileText, label: "Message templates" }, panelClassName: "w-[360px] h-[min(60dvh,440px)] p-0", children: (closeCascade) => /* @__PURE__ */ jsx(
+      SmartInputMessageTemplatePicker,
+      {
+        onSelect: (templateText) => {
+          insertTemplate(templateText);
+          closeCascade();
+          close();
+        }
       }
-    }
-  ) : null, /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: FileText, label: "Message templates" }, panelClassName: "w-[360px] h-[min(60dvh,440px)] p-0" }, (closeCascade) => /* @__PURE__ */ React.createElement(
-    SmartInputMessageTemplatePicker,
-    {
-      onSelect: (templateText) => {
-        insertTemplate(templateText);
-        closeCascade();
-        close();
+    ) }),
+    /* @__PURE__ */ jsx(
+      ComposerMenuRow,
+      {
+        icon: Brain,
+        label: "Memory",
+        description: memoryRequested ? memoryTarget ? "Turns on with your next message" : "Turns off with your next message" : void 0,
+        checked: memoryOn,
+        onClick: () => {
+          const next = !memoryOn;
+          if (next === memoryEnabled) dispatch(clearMemoryToggleRequest({ conversationId }));
+          else dispatch(requestMemoryToggle({ conversationId, enabled: next }));
+        }
       }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: Brain,
-      label: "Memory",
-      description: memoryRequested ? memoryTarget ? "Turns on with your next message" : "Turns off with your next message" : void 0,
-      checked: memoryOn,
-      onClick: () => {
-        const next = !memoryOn;
-        if (next === memoryEnabled) dispatch(clearMemoryToggleRequest({ conversationId }));
-        else dispatch(requestMemoryToggle({ conversationId, enabled: next }));
+    ),
+    shows("plus.enterSends") && !touchOnly ? /* @__PURE__ */ jsx(
+      ComposerMenuSwitchRow,
+      {
+        icon: CornerDownLeft,
+        label: "Enter sends",
+        description: submitOnEnter ? "Shift+Enter adds a new line" : "Enter adds a new line; \u2318/Ctrl+Enter sends",
+        checked: submitOnEnter,
+        onCheckedChange: (value) => dispatch(setSubmitOnEnter({ conversationId, value }))
       }
-    }
-  ), shows("plus.enterSends") && !touchOnly ? /* @__PURE__ */ React.createElement(
-    ComposerMenuSwitchRow,
-    {
-      icon: CornerDownLeft,
-      label: "Enter sends",
-      description: submitOnEnter ? "Shift+Enter adds a new line" : "Enter adds a new line; \u2318/Ctrl+Enter sends",
-      checked: submitOnEnter,
-      onCheckedChange: (value) => dispatch(setSubmitOnEnter({ conversationId, value }))
-    }
-  ) : null, shows("plus.documents") ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ComposerMenuSwitchRow,
-    {
-      icon: NotebookPen,
-      label: "Working doc",
-      checked: workingDocEnabled,
-      onCheckedChange: (value) => void dispatch(setConversationDocumentEnabledThunk({ conversationId, kind: "working", enabled: value }))
-    }
-  ), /* @__PURE__ */ React.createElement(
-    ComposerMenuSwitchRow,
-    {
-      icon: FileText,
-      label: "Scratchpad",
-      checked: scratchEnabled,
-      onCheckedChange: (value) => void dispatch(setScratchpadGateThunk({ conversationId, enabled: value }))
-    }
-  )) : null, showAutoClear ? /* @__PURE__ */ React.createElement(
-    ComposerMenuSwitchRow,
-    {
-      icon: RefreshCcw,
-      label: "Auto-clear",
-      description: autoClear ? "Each send starts a fresh conversation" : "The conversation continues",
-      checked: autoClear,
-      onCheckedChange: (value) => dispatch(setAutoClearMode({ conversationId, value, surfaceKey }))
-    }
-  ) : null, /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: SlidersHorizontal,
-      label: "All options",
-      onClick: () => {
-        close();
-        openRunControlsWindow({ conversationId });
+    ) : null,
+    shows("plus.documents") ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        ComposerMenuSwitchRow,
+        {
+          icon: NotebookPen,
+          label: "Working doc",
+          checked: workingDocEnabled,
+          onCheckedChange: (value) => void dispatch(setConversationDocumentEnabledThunk({ conversationId, kind: "working", enabled: value }))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ComposerMenuSwitchRow,
+        {
+          icon: FileText,
+          label: "Scratchpad",
+          checked: scratchEnabled,
+          onCheckedChange: (value) => void dispatch(setScratchpadGateThunk({ conversationId, enabled: value }))
+        }
+      )
+    ] }) : null,
+    showAutoClear ? /* @__PURE__ */ jsx(
+      ComposerMenuSwitchRow,
+      {
+        icon: RefreshCcw,
+        label: "Auto-clear",
+        description: autoClear ? "Each send starts a fresh conversation" : "The conversation continues",
+        checked: autoClear,
+        onCheckedChange: (value) => dispatch(setAutoClearMode({ conversationId, value, surfaceKey }))
       }
-    }
-  ), folded ? /* @__PURE__ */ React.createElement(ComposerFoldedSection, null, /* @__PURE__ */ React.createElement(ComposerSubmenu, { row: { icon: Target, label: "Scope" }, panelClassName: "w-[340px] p-0" }, /* @__PURE__ */ React.createElement(ActiveContextTree, { conversationId, maxHeight: 360, className: "w-full" })), foldLiveAudio ? /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: AudioLines,
-      label: "Live audio",
-      onClick: () => {
-        close();
-        onLiveAudio?.();
+    ) : null,
+    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+    /* @__PURE__ */ jsx(
+      ComposerMenuRow,
+      {
+        icon: SlidersHorizontal,
+        label: "All options",
+        onClick: () => {
+          close();
+          openRunControlsWindow({ conversationId });
+        }
       }
-    }
-  ) : null) : null));
+    ),
+    folded ? /* @__PURE__ */ jsxs(ComposerFoldedSection, { children: [
+      /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Target, label: "Scope" }, panelClassName: "w-[340px] p-0", children: /* @__PURE__ */ jsx(ActiveContextTree, { conversationId, maxHeight: 360, className: "w-full" }) }),
+      foldLiveAudio ? /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: AudioLines,
+          label: "Live audio",
+          onClick: () => {
+            close();
+            onLiveAudio?.();
+          }
+        }
+      ) : null
+    ] }) : null
+  ] }) });
   if (presentation === "sheet") {
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, trigger, /* @__PURE__ */ React.createElement(ComposerMenuSheet, { open, onOpenChange: setOpen, accessibleName: "Add to chat" }, body));
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      trigger,
+      /* @__PURE__ */ jsx(ComposerMenuSheet, { open, onOpenChange: setOpen, accessibleName: "Add to chat", children: body })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: setOpen, modal: false }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, trigger), /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      side,
-      align: "start",
-      sideOffset: 8,
-      onPointerDownOutside: ignoreOwnWrapper,
-      className: `flex w-[300px] max-h-[var(--radix-popover-content-available-height)] flex-col overflow-y-auto p-1 ${COMPOSER_MENU_NO_ENTRANCE}`
-    },
-    body
-  ));
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side,
+        align: "start",
+        sideOffset: 8,
+        onPointerDownOutside: ignoreOwnWrapper,
+        className: `flex w-[300px] max-h-[var(--radix-popover-content-available-height)] flex-col overflow-y-auto p-1 ${COMPOSER_MENU_NO_ENTRANCE}`,
+        children: body
+      }
+    )
+  ] });
 }
 const WORKSPACE_VIEWS = [
   "conversations",
@@ -390,28 +440,40 @@ function ComposerEnvironmentPanel({
   ];
   const computers = rows.filter((row) => row.kind === "local-pc");
   const sandboxes = rows.filter((row) => row.kind !== "local-pc");
-  const renderRow = (row) => /* @__PURE__ */ React.createElement(
+  const renderRow = (row) => /* @__PURE__ */ jsx(
     ComposerMenuRow,
     {
-      key: row.id,
       icon: row.kind === "local-pc" ? Monitor : Server,
       label: row.name,
       detail: row.note,
       checked: row.id === bound?.rowId,
       disabled: sandboxBlocked || !row.target,
       onClick: () => row.target && choose(row.target)
-    }
+    },
+    row.id
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "Run on"), /* @__PURE__ */ React.createElement(
-    ComposerMenuRow,
-    {
-      icon: Cloud,
-      label: "Cloud",
-      description: "AI Matrx runs it for you",
-      checked: !bound,
-      onClick: () => choose(null)
-    }
-  ), sandboxBlocked ? /* @__PURE__ */ React.createElement("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground" }, "Cloud-only chat; a sandbox or computer can't attach") : compute.loading && rows.length === 0 ? /* @__PURE__ */ React.createElement("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground" }, "Looking for your computers and sandboxes\u2026") : /* @__PURE__ */ React.createElement(React.Fragment, null, computers.length > 0 ? /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "Your computers") : null, computers.map(renderRow), sandboxes.length > 0 ? /* @__PURE__ */ React.createElement(ComposerMenuLabel, null, "Sandboxes") : null, sandboxes.map(renderRow)), /* @__PURE__ */ React.createElement(ComposerMenuDivider, null), /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: AppWindow, label: "Persistent browser", description: "Open the agent's cloud browser", onClick: onOpenBrowser }), /* @__PURE__ */ React.createElement(ComposerMenuRow, { icon: Plus, label: "Add a sandbox or computer", onClick: onOpenSandbox }));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Run on" }),
+    /* @__PURE__ */ jsx(
+      ComposerMenuRow,
+      {
+        icon: Cloud,
+        label: "Cloud",
+        description: "AI Matrx runs it for you",
+        checked: !bound,
+        onClick: () => choose(null)
+      }
+    ),
+    sandboxBlocked ? /* @__PURE__ */ jsx("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground", children: "Cloud-only chat; a sandbox or computer can't attach" }) : compute.loading && rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-2.5 py-1.5 text-xs text-muted-foreground", children: "Looking for your computers and sandboxes\u2026" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      computers.length > 0 ? /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Your computers" }) : null,
+      computers.map(renderRow),
+      sandboxes.length > 0 ? /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Sandboxes" }) : null,
+      sandboxes.map(renderRow)
+    ] }),
+    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+    /* @__PURE__ */ jsx(ComposerMenuRow, { icon: AppWindow, label: "Persistent browser", description: "Open the agent's cloud browser", onClick: onOpenBrowser }),
+    /* @__PURE__ */ jsx(ComposerMenuRow, { icon: Plus, label: "Add a sandbox or computer", onClick: onOpenSandbox })
+  ] });
 }
 function SheetQuickAdd({
   openFiles
@@ -432,27 +494,31 @@ function SheetQuickAdd({
     { label: "Photos", icon: ImageIcon, onClick: () => photos.current?.click() },
     { label: "Files", icon: FolderOpen, onClick: () => open() }
   ];
-  return /* @__PURE__ */ React.createElement("div", { className: "sheet-gap mb-6 grid shrink-0 grid-cols-3 gap-2.5" }, tiles.map(({ label, icon: Icon, onClick }) => /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Icon, null), key: label, onClick }, label)), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: camera,
-      type: "file",
-      accept: "image/*",
-      capture: "environment",
-      className: "hidden",
-      onChange: (e) => fromInput(e.currentTarget)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "input",
-    {
-      ref: photos,
-      type: "file",
-      accept: "image/*,video/*",
-      multiple: true,
-      className: "hidden",
-      onChange: (e) => fromInput(e.currentTarget)
-    }
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "sheet-gap mb-6 grid shrink-0 grid-cols-3 gap-2.5", children: [
+    tiles.map(({ label, icon: Icon, onClick }) => /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Icon, {}), onClick, children: label }, label)),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: camera,
+        type: "file",
+        accept: "image/*",
+        capture: "environment",
+        className: "hidden",
+        onChange: (e) => fromInput(e.currentTarget)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: photos,
+        type: "file",
+        accept: "image/*,video/*",
+        multiple: true,
+        className: "hidden",
+        onChange: (e) => fromInput(e.currentTarget)
+      }
+    )
+  ] });
 }
 export {
   ComposerEnvironmentPanel,