@ai-matrx/chat 0.6.6 → 0.7.1

package/dist/agents/components/conversation-history/AgentConversationList.js

@@ -0,0 +1,252 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { ChevronDown, ChevronRight, MessageSquare } from "lucide-react";
+import { Button } from "@ai-matrx/design-system/controls";
+import { ItemRow } from "../../../host/ui-slots.js";
+import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
+import { selectAgentById } from "../../redux/agent-definition/selectors.js";
+import { fetchAgentConversations } from "../../redux/conversation-list/conversation-list.thunks.js";
+import { makeSelectAgentConversations } from "../../redux/conversation-list/conversation-list.selectors.js";
+import { renameConversation } from "../../redux/conversation-list/conversation-row-actions.thunks.js";
+import { ConversationArchiveSection } from "./ConversationArchiveSection.js";
+import {
+  buildConversationMenu
+} from "../conversation-actions/conversationActionRegistry.js";
+function formatConversationDate(iso) {
+  if (!iso) return "";
+  const d = new Date(iso);
+  const now = /* @__PURE__ */ new Date();
+  const diffDays = Math.floor((now.getTime() - d.getTime()) / 864e5);
+  if (diffDays === 0)
+    return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
+  if (diffDays === 1) return "Yesterday";
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return d.toLocaleDateString([], { month: "short", day: "numeric" });
+}
+function groupConversationsByVersion(conversations) {
+  const map = /* @__PURE__ */ new Map();
+  for (const conv of conversations) {
+    const v = conv.agentVersionNumber ?? 0;
+    const group = map.get(v);
+    if (group) group.push(conv);
+    else map.set(v, [conv]);
+  }
+  return Array.from(map.entries()).sort(([a], [b]) => b - a).map(([versionNumber, convs]) => ({
+    versionNumber,
+    conversations: [...convs].sort(
+      (a, b) => new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+    )
+  }));
+}
+function agentRunHref(agentId, conversationId) {
+  return `/agents/go/${agentId}/run?conversationId=${conversationId}`;
+}
+function useAgentConversationList(agentId) {
+  const dispatch = useAppDispatch();
+  const agentName = useAppSelector(
+    (state) => agentId ? selectAgentById(state, agentId)?.name ?? null : null
+  );
+  const canonicalAgentId = useAppSelector((state) => {
+    if (!agentId) return null;
+    const agent = selectAgentById(state, agentId);
+    return agent?.parentAgentId ?? agent?.id ?? agentId;
+  });
+  const selectConversations = useMemo(
+    () => canonicalAgentId ? makeSelectAgentConversations(canonicalAgentId, null) : null,
+    [canonicalAgentId]
+  );
+  const entry = useAppSelector(
+    (state) => selectConversations ? selectConversations(state) : null
+  );
+  const status = entry?.status ?? "idle";
+  const conversations = entry?.conversations ?? EMPTY;
+  const archived = entry?.archived ?? EMPTY;
+  useEffect(() => {
+    if (canonicalAgentId && status === "idle") {
+      dispatch(
+        fetchAgentConversations({
+          agentId: canonicalAgentId,
+          versionFilter: null
+        })
+      );
+    }
+  }, [canonicalAgentId, status, dispatch]);
+  const versionGroups = useMemo(
+    () => groupConversationsByVersion(conversations),
+    [conversations]
+  );
+  const archivedGroups = useMemo(
+    () => groupConversationsByVersion(archived),
+    [archived]
+  );
+  return {
+    canonicalAgentId,
+    agentName,
+    status,
+    error: entry?.error ?? null,
+    fetchedAt: entry?.fetchedAt ?? null,
+    conversations,
+    archived,
+    versionGroups,
+    archivedGroups
+  };
+}
+const EMPTY = [];
+function ConversationListRow({
+  conv,
+  href,
+  sourceFeature,
+  active,
+  onOpen,
+  openInPlace,
+  linkRow = false,
+  size = "sm",
+  surfaceKey,
+  entity,
+  agent,
+  source,
+  isFavorite,
+  untitled = "Untitled",
+  kebabAriaLabel,
+  onMutationSuccess,
+  secondaryLabel,
+  leading,
+  trailing,
+  className
+}) {
+  const dispatch = useAppDispatch();
+  const title = conv.title?.trim() || untitled;
+  return /* @__PURE__ */ jsx(
+    ItemRow,
+    {
+      sourceFeature,
+      entity,
+      className,
+      size,
+      label: title,
+      secondaryLabel,
+      href: linkRow ? href : void 0,
+      active,
+      onOpen,
+      openInPlace,
+      leading,
+      kebabAriaLabel,
+      menu: () => buildConversationMenu({
+        conversationId: conv.conversationId,
+        title: conv.title,
+        isFavorite: isFavorite ?? conv.isFavorite ?? false,
+        isArchived: conv.status === "archived",
+        excludeFromKg: conv.excludeFromKg ?? false,
+        href,
+        ...surfaceKey ? { surfaceKey } : {},
+        ...agent ? { agent } : {},
+        ...source ? { source } : {},
+        ...onMutationSuccess ? { onMutationSuccess } : {},
+        dispatch
+      }),
+      rename: {
+        value: conv.title ?? "",
+        emptyFallback: untitled,
+        onCommit: async (next) => {
+          const result = await dispatch(
+            renameConversation({
+              conversationId: conv.conversationId,
+              title: next
+            })
+          );
+          if (renameConversation.fulfilled.match(result)) {
+            onMutationSuccess?.();
+          }
+        }
+      },
+      trailing
+    }
+  );
+}
+function VersionGroupRow({
+  group,
+  agentId,
+  selectedId,
+  onSelect,
+  defaultOpen,
+  sourceFeature
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const hasActive = group.conversations.some(
+    (c) => c.conversationId === selectedId
+  );
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "quiet",
+        pressed: hasActive,
+        icon: open ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}),
+        onClick: () => setOpen((v) => !v),
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-semibold text-muted-foreground uppercase tracking-wide flex-1 min-w-0 truncate", children: group.versionNumber ? `Version ${group.versionNumber}` : "Latest" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground/60 shrink-0 ml-1", children: group.conversations.length })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "pl-2", children: group.conversations.map((conv) => {
+      const date = formatConversationDate(conv.updatedAt);
+      return /* @__PURE__ */ jsx(
+        ConversationListRow,
+        {
+          conv,
+          href: agentRunHref(agentId, conv.conversationId),
+          sourceFeature,
+          active: conv.conversationId === selectedId,
+          onOpen: () => onSelect(conv.conversationId),
+          trailing: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[10px] text-muted-foreground/70", children: [
+            /* @__PURE__ */ jsx(MessageSquare, { className: "w-2.5 h-2.5 shrink-0" }),
+            conv.messageCount,
+            date ? ` \xB7 ${date}` : ""
+          ] })
+        },
+        conv.conversationId
+      );
+    }) })
+  ] });
+}
+function AgentVersionGroupedList({
+  agentId,
+  list,
+  selectedId,
+  onSelect,
+  sourceFeature
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    list.versionGroups.map((group, i) => /* @__PURE__ */ jsx(
+      VersionGroupRow,
+      {
+        group,
+        agentId,
+        selectedId,
+        onSelect,
+        defaultOpen: i === 0,
+        sourceFeature
+      },
+      group.versionNumber
+    )),
+    /* @__PURE__ */ jsx(
+      ConversationArchiveSection,
+      {
+        agentIds: [agentId],
+        onOpen: onSelect,
+        className: "mt-1"
+      }
+    )
+  ] });
+}
+export {
+  AgentVersionGroupedList,
+  ConversationListRow,
+  agentRunHref,
+  formatConversationDate,
+  groupConversationsByVersion,
+  useAgentConversationList
+};

package/dist/agents/components/conversation-history/ConversationArchiveSection.d.ts

@@ -1,7 +1,11 @@
 interface ConversationArchiveSectionProps {
     /** `"consumer"` matches the comfortable /chat sidebar; `"dense"` the rest. */
     variant?: "dense" | "consumer";
+    /** Only these agents' conversations (a per-agent list). Default: all of mine. */
+    agentIds?: string[];
+    /** Open a row (an archived conversation is readable). Omit = rows are not links. */
+    onOpen?: (conversationId: string) => void;
     className?: string;
 }
-export declare function ConversationArchiveSection({ variant, className, }: ConversationArchiveSectionProps): import("react").JSX.Element;
+export declare function ConversationArchiveSection({ variant, agentIds, onOpen, className, }: ConversationArchiveSectionProps): import("react").JSX.Element;
 export default ConversationArchiveSection;

package/dist/agents/components/conversation-history/ConversationArchiveSection.js

@@ -13,23 +13,29 @@ import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
 import { Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
 function ConversationArchiveSection({
   variant = "dense",
+  agentIds,
+  onOpen,
   className
 }) {
   const dispatch = useAppDispatch();
   const [open, setOpen] = useState(false);
   const [restoringId, setRestoringId] = useState(null);
-  const ids = useAppSelector(
+  const allIds = useAppSelector(
     (state) => state.conversationList.trashConversationIds
   );
   const bodies = useAppSelector(
     (state) => state.conversationList.trashByConversationId
   );
+  const ids = agentIds && agentIds.length > 0 ? allIds.filter((id) => {
+    const agentId = bodies[id]?.agentId;
+    return !!agentId && agentIds.includes(agentId);
+  }) : allIds;
   const status = useAppSelector((state) => state.conversationList.trashStatus);
   const error = useAppSelector((state) => state.conversationList.trashError);
   const toggle = () => {
     const next = !open;
     setOpen(next);
-    if (next) void dispatch(fetchArchivedConversations());
+    if (next) void dispatch(fetchArchivedConversations({ agentIds }));
   };
   const handleRestore = useCallback(
     async (conversationId) => {
@@ -79,7 +85,19 @@ function ConversationArchiveSection({
               dense ? "h-6" : "h-8"
             ),
             children: [
-              /* @__PURE__ */ jsx(
+              onOpen && !conv.deletedAt ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onOpen(id),
+                  className: cn(
+                    "min-w-0 flex-1 truncate text-left text-muted-foreground hover:text-foreground",
+                    dense ? "text-[11px]" : "text-xs"
+                  ),
+                  title,
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsx(
                 "span",
                 {
                   className: cn(
@@ -90,7 +108,7 @@ function ConversationArchiveSection({
                   children: title
                 }
               ),
-              /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: restoringId === id ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Undo2, {}), onClick: () => void handleRestore(id), disabled: restoringId === id, "aria-label": `Restore ${title}`, className: "shrink-0", children: "Restore" })
+              /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: restoringId === id ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Undo2, {}), onClick: () => void handleRestore(id), disabled: restoringId === id, "aria-label": `Restore ${title}`, title: "Restore", className: "shrink-0" })
             ]
           },
           id

package/dist/agents/components/conversation-history/ConversationHistorySidebar.js

@@ -54,20 +54,14 @@ import {
   isLiveConversationRow
 } from "../../redux/conversation-history/types.js";
 import { useSurfaceSourceFilter } from "../../redux/conversation-history/useSurfaceSourceFilter.js";
-import {
-  renameConversation,
-  setConversationFavorite
-} from "../../redux/conversation-list/conversation-row-actions.thunks.js";
-import {
-  buildConversationMenu
-} from "../conversation-actions/conversationActionRegistry.js";
+import { setConversationFavorite } from "../../redux/conversation-list/conversation-row-actions.thunks.js";
 import { selectAgentById } from "../../redux/agent-definition/selectors.js";
 import { EntityDoorControls } from "../../../host/ui-slots.js";
+import { ConversationListRow } from "./AgentConversationList.js";
 import { ConversationSourceFilterTree } from "./ConversationSourceFilterTree.js";
 import { AllLanesOffNotice } from "./ConversationLaneToggles.js";
 import { ConversationArchiveSection } from "./ConversationArchiveSection.js";
 import { SegmentedControl, Button, DisclosureHeader, SearchField } from "@ai-matrx/design-system/controls";
-import { ItemRow } from "../../../host/ui-slots.js";
 import { toast } from "../../../host/notify.js";
 import {
   LoadingTapButton,
@@ -699,6 +693,7 @@ const ConsumerView = ({
               },
               placeholder: "Search",
               "aria-label": "Search conversations",
+              width: "xl",
               className: "min-w-0 flex-1"
             }
           ) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
@@ -893,7 +888,6 @@ const Row = ({
   getSourceMenuCtx,
   showAgentHint = true
 }) => {
-  const dispatch = useAppDispatch();
   const title = conv.title?.trim() || untitled(conv);
   const agentName = useAppSelector(
     (s) => conv.agentId ? selectAgentById(s, conv.agentId)?.name ?? null : null
@@ -928,45 +922,28 @@ const Row = ({
     star
   ] }) : star;
   return /* @__PURE__ */ jsx(
-    ItemRow,
+    ConversationListRow,
     {
+      conv,
+      href: resolveHref(conv),
+      linkRow: true,
       sourceFeature: "conversation",
       entity: {
         type: "conversation",
         id: conv.conversationId,
         title
       },
-      label: title,
-      size: "sm",
       active,
-      href: resolveHref(conv),
       onOpen: onOpen ? () => onOpen(conv) : void 0,
       openInPlace,
       leading: /* @__PURE__ */ jsx(StreamingDot, { conversationId: conv.conversationId }),
       secondaryLabel: meta || void 0,
       trailing,
-      menu: () => buildConversationMenu({
-        conversationId: conv.conversationId,
-        title: conv.title,
-        isFavorite,
-        isArchived: conv.status === "archived",
-        excludeFromKg: conv.excludeFromKg ?? false,
-        href: resolveHref(conv),
-        surfaceKey,
-        agent: conv.agentId ? { id: conv.agentId, name: agentName } : void 0,
-        source: getSourceMenuCtx?.(conv),
-        dispatch
-      }),
-      rename: {
-        value: conv.title ?? "",
-        emptyFallback: untitled(conv),
-        onCommit: (next) => void dispatch(
-          renameConversation({
-            conversationId: conv.conversationId,
-            title: next
-          })
-        )
-      },
+      surfaceKey,
+      isFavorite,
+      agent: conv.agentId ? { id: conv.agentId, name: agentName } : void 0,
+      source: getSourceMenuCtx?.(conv),
+      untitled: untitled(conv),
       kebabAriaLabel: `Options for ${title}`
     }
   );
@@ -1030,12 +1007,14 @@ const ConsumerRow = ({
   getSourceMenuCtx,
   onMutationSuccess
 }) => {
-  const dispatch = useAppDispatch();
   const title = conv.title?.trim() || untitled(conv);
   const isStreaming = useAppSelector(selectIsStreaming(conv.conversationId));
   return /* @__PURE__ */ jsx(
-    ItemRow,
+    ConversationListRow,
     {
+      conv,
+      href: resolveHref(conv),
+      linkRow: true,
       sourceFeature: "conversation",
       entity: {
         type: "conversation",
@@ -1043,37 +1022,13 @@ const ConsumerRow = ({
         title
       },
       className: "mx-1",
-      label: title,
+      size: "md",
       active,
-      href: resolveHref(conv),
       onOpen: onOpen ? () => onOpen(conv) : void 0,
       openInPlace,
-      menu: () => buildConversationMenu({
-        conversationId: conv.conversationId,
-        title: conv.title,
-        isFavorite: conv.isFavorite ?? false,
-        isArchived: conv.status === "archived",
-        excludeFromKg: conv.excludeFromKg ?? false,
-        href: resolveHref(conv),
-        source: getSourceMenuCtx?.(conv),
-        onMutationSuccess,
-        dispatch
-      }),
-      rename: {
-        value: conv.title ?? "",
-        emptyFallback: untitled(conv),
-        onCommit: async (next) => {
-          const result = await dispatch(
-            renameConversation({
-              conversationId: conv.conversationId,
-              title: next
-            })
-          );
-          if (renameConversation.fulfilled.match(result)) {
-            onMutationSuccess?.();
-          }
-        }
-      },
+      source: getSourceMenuCtx?.(conv),
+      onMutationSuccess,
+      untitled: untitled(conv),
       trailing: isStreaming ? /* @__PURE__ */ jsxs("span", { className: "relative flex h-1.5 w-1.5", "aria-hidden": true, children: [
         /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" }),
         /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-1.5 w-1.5 rounded-full bg-primary" })

package/dist/agents/components/inputs/input-components/TextareaInput.js

@@ -36,6 +36,8 @@ function TextareaInput({
       className: isCompact ? "min-h-[60px] text-xs" : "min-h-[160px] text-sm",
       rows: isCompact ? 2 : void 0,
       appendTranscript: true,
+      expandable: true,
+      auxiliaryControlsLabel: variableName,
       onEnterKey: onEnterAdvance ? () => onEnterAdvance() : void 0,
       onRequestClose,
       protectTranscription: true,

package/dist/agents/components/inputs/input-components/VariableInputComponent.js

@@ -356,12 +356,13 @@ function VariableInputComponent({
           /* @__PURE__ */ jsx(Label, { className: "text-sm font-medium", children: formattedName }),
           shownHelpText && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: shownHelpText })
         ] }),
-        !hideLabel && compact && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(Label, { className: "text-xs font-medium pb-1", children: formattedName }),
-          shownHelpText && /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-muted-foreground", children: [
-            "\xB7 ",
-            shownHelpText
-          ] })
+        !hideLabel && compact && // The name stands on its own line; the help sits under it on ONE
+        // line (the whole sentence on hover). Side by side, a long help
+        // wrapped and centred the name against two lines after a "·"
+        // (Arman, 2026-10-08).
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 pb-1", children: [
+          /* @__PURE__ */ jsx(Label, { className: "block text-xs font-medium", children: formattedName }),
+          shownHelpText && /* @__PURE__ */ jsx("p", { className: "truncate text-[11px] text-muted-foreground", title: shownHelpText, children: shownHelpText })
         ] }),
         inputComponent,
         randomAssignmentEnabled && /* @__PURE__ */ jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxs(

package/dist/agents/components/inputs/smart-input/ConversationCompanionPills.d.ts

@@ -0,0 +1,3 @@
+export declare function ConversationCompanionPills({ conversationId }: {
+    conversationId: string;
+}): import("react").JSX.Element;

package/dist/agents/components/inputs/smart-input/ConversationCompanionPills.js

@@ -0,0 +1,40 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import {
+  useConversationCompanions
+} from "../../../../host/composer-extensions.js";
+import { RailPill } from "./rail-pill.js";
+function ConversationCompanionPills({ conversationId }) {
+  const companions = useConversationCompanions();
+  return /* @__PURE__ */ jsx(Fragment, { children: companions.map((companion) => /* @__PURE__ */ jsx(CompanionPill, { companion, conversationId }, companion.id)) });
+}
+function CompanionPill({
+  companion,
+  conversationId
+}) {
+  const [open, setOpen] = useState(false);
+  const pill = companion.usePill?.(conversationId);
+  const Panel = companion.Panel;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    pill?.hidden ? null : /* @__PURE__ */ jsx(
+      RailPill,
+      {
+        item: {
+          id: `companion:${companion.id}`,
+          icon: companion.icon,
+          label: companion.label,
+          word: companion.word,
+          detail: pill?.detail,
+          hint: "Click: open or close the panel",
+          active: open,
+          onOpen: () => setOpen((o) => !o)
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Panel, { conversationId, open, onClose: () => setOpen(false) })
+  ] });
+}
+export {
+  ConversationCompanionPills
+};

package/dist/agents/components/inputs/smart-input/ConversationContextRail.js

@@ -22,11 +22,6 @@ import {
   DropdownMenuTrigger
 } from "@ai-matrx/design-system";
 import { openAfterCurrentLayerCloses } from "../../../../ui/after-current-layer-closes.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from "@ai-matrx/design-system";
 import { useChatCanvasOpeners, useChatCanvasView } from "../../../../host/canvas.js";
 import {
   conversationDocumentsTabId,
@@ -93,6 +88,9 @@ import { ActiveContextLensChip } from "../../../../context/sources/scopes.js";
 import { selectActiveScopeIdsByType } from "../../../../context/sources/scopes.js";
 import { contextEntryLabel } from "../../context-policies-display/contextEntryLabel.js";
 import { useConversationAbilities } from "../../../redux/execution-system/host-conversations/conversation-abilities.js";
+import { ComposerAttachmentSourceChips } from "../../../../host/composer-extensions.js";
+import { ConversationCompanionPills } from "./ConversationCompanionPills.js";
+import { RailPill } from "./rail-pill.js";
 function entryHasValue(e) {
   const v = e.value;
   if (v === void 0 || v === null) return false;
@@ -370,9 +368,11 @@ function ConversationContextRailBody({
                   inline: true
                 }
               ),
-              /* @__PURE__ */ jsx(AttachedDocumentChips, { conversationId, inline: true })
+              /* @__PURE__ */ jsx(AttachedDocumentChips, { conversationId, inline: true }),
+              /* @__PURE__ */ jsx(ComposerAttachmentSourceChips, { conversationId })
             ] }) : null,
             inline.map((item) => /* @__PURE__ */ jsx(RailPill, { item }, item.id)),
+            /* @__PURE__ */ jsx(ConversationCompanionPills, { conversationId }),
             overflow.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
               /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
                 ComposerChip,
@@ -426,29 +426,6 @@ function ConversationContextRailBody({
     detailSurfaces
   ] });
 }
-function RailPill({ item }) {
-  const Icon = item.icon;
-  return /* @__PURE__ */ jsxs(Tooltip, { children: [
-    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { "data-rail-entry": "", className: "inline-flex shrink-0", children: /* @__PURE__ */ jsx(
-      ComposerChip,
-      {
-        tone: item.tone === "primary" ? "primary" : "neutral",
-        pressed: item.active ? true : void 0,
-        busy: item.busy,
-        icon: /* @__PURE__ */ jsx(Icon, {}),
-        label: item.word,
-        onClick: item.onOpen,
-        "aria-label": item.label,
-        remove: item.onRemove ? { label: `Remove ${item.label}`, onRemove: item.onRemove } : void 0
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "max-w-[16rem]", children: [
-      /* @__PURE__ */ jsx("div", { className: "font-medium text-popover-foreground", children: item.label }),
-      item.detail && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-muted-foreground", children: item.detail }),
-      item.hint && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80", children: item.hint })
-    ] })
-  ] });
-}
 function DetailSurfaces({ conversationId }) {
   return /* @__PURE__ */ jsx(CloudBrowserHandoffCanvasOpener, { conversationId });
 }

package/dist/agents/components/inputs/smart-input/DeviceToolsModeRow.d.ts

@@ -0,0 +1,3 @@
+export declare function DeviceToolsModeRow({ agentId }: {
+    agentId: string | null;
+}): import("react").JSX.Element | null;

package/dist/agents/components/inputs/smart-input/DeviceToolsModeRow.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useSyncExternalStore } from "react";
+import { useMaybeChatHost } from "../../../../host/react.js";
+import {
+  devicePermissionModeKey,
+  readDevicePermissionMode,
+  writeDevicePermissionMode
+} from "../../../redux/execution-system/utils/host-turn.js";
+import { PicksSwitchRow } from "./RunPicksSurface.js";
+function DeviceToolsModeRow({ agentId }) {
+  const host = useMaybeChatHost();
+  const key = devicePermissionModeKey(agentId);
+  const mode = useSyncExternalStore(
+    (listener) => host?.prefs.subscribe((changed) => {
+      if (changed.startsWith("chat.device-tools.permission-mode")) listener();
+    }) ?? (() => void 0),
+    () => host ? readDevicePermissionMode(agentId) : "ask",
+    () => "ask"
+  );
+  if (!host?.deviceTools) return null;
+  return /* @__PURE__ */ jsx(
+    PicksSwitchRow,
+    {
+      label: "Ask before acting",
+      detail: "This agent",
+      title: `Browser actions ${mode === "ask" ? "wait for your approval" : "run without asking"} (${key})`,
+      checked: mode === "ask",
+      onCheckedChange: (ask) => writeDevicePermissionMode(agentId, ask ? "ask" : "act")
+    }
+  );
+}
+export {
+  DeviceToolsModeRow
+};