@ai-matrx/chat 0.6.5 → 0.7.0

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

@@ -16,8 +16,7 @@ import {
   Loader2,
   Search,
   Star,
-  StarOff,
-  X
+  StarOff
 } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
@@ -38,8 +37,8 @@ import { selectIsStreaming } from "../../redux/execution-system/selectors/aggreg
 import {
   seedScopeSourceFilter,
   setScopeAgentIds,
-  setScopeArchiveView,
   setScopeLanes,
+  setScopeOnlyConversationIds,
   setScopeGrouping,
   setScopeSearch,
   setScopeSourceFilter
@@ -51,24 +50,18 @@ import {
   sourceKey
 } from "../../redux/conversation-history/source-registry.js";
 import {
-  rowMatchesArchiveView
+  CONVERSATION_HISTORY_TTL_MS,
+  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 { ConversationTrashSection } from "./ConversationTrashSection.js";
-import { ArchivedDisclosure } from "@ai-matrx/design-system";
-import { SegmentedControl, Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
-import { ItemRow } from "../../../host/ui-slots.js";
+import { ConversationArchiveSection } from "./ConversationArchiveSection.js";
+import { SegmentedControl, Button, DisclosureHeader, SearchField } from "@ai-matrx/design-system/controls";
 import { toast } from "../../../host/notify.js";
 import {
   LoadingTapButton,
@@ -89,9 +82,13 @@ function useConversationHistoryController(props) {
     isFavorite,
     onToggleFavorite,
     getConversationHref,
-    serverSearch = true
+    serverSearch = true,
+    keepLoaded = false,
+    onlyConversationIds = null,
+    removeFromList
   } = props;
   const dispatch = useAppDispatch();
+  const readFor = useRef(null);
   const selectScope = useMemo(
     () => makeSelectConversationHistoryScope(scopeId),
     [scopeId]
@@ -120,6 +117,7 @@ function useConversationHistoryController(props) {
     [agentIds]
   );
   const excludeKey = JSON.stringify(excludeSourceFeatures ?? []);
+  const onlyKey = onlyConversationIds ? onlyConversationIds.slice().sort().join(",") : null;
   const resolvedKey = surfaceId ? JSON.stringify(resolvedSource) : "";
   const enabledLanes = useAppSelector(selectConversationLanes);
   const lanesKey = surfaceId ? enabledLanes.join(",") : "none";
@@ -136,6 +134,12 @@ function useConversationHistoryController(props) {
   });
   useEffect(() => {
     dispatch(setScopeAgentIds({ scopeId, agentIds: agentIds.slice() }));
+    dispatch(
+      setScopeOnlyConversationIds({
+        scopeId,
+        ids: onlyConversationIds ? onlyConversationIds.slice() : null
+      })
+    );
     dispatch(
       setScopeLanes({ scopeId, lanes: surfaceId ? enabledLanes : null })
     );
@@ -159,6 +163,19 @@ function useConversationHistoryController(props) {
     if (excludeSourceFeatures !== void 0) {
       fetchArgs.excludeSourceFeatures = excludeSourceFeatures;
     }
+    const readKey = [scopeId, agentIdsKey, pageSize, excludeKey, resolvedKey, lanesKey, onlyKey].join("|");
+    if (keepLoaded) {
+      if (readFor.current === readKey) return;
+      const fresh = dispatch((_d, getState) => {
+        const held = getState().conversationHistory.scopes[scopeId];
+        return !!held && held.status === "succeeded" && held.lastFetchedAt !== null && Date.now() - held.lastFetchedAt < CONVERSATION_HISTORY_TTL_MS;
+      });
+      if (fresh) {
+        readFor.current = readKey;
+        return;
+      }
+    }
+    readFor.current = readKey;
     void dispatch(fetchConversationHistory(fetchArgs));
   }, [
     dispatch,
@@ -168,7 +185,9 @@ function useConversationHistoryController(props) {
     excludeKey,
     resolvedKey,
     lanesKey,
-    surfaceId
+    surfaceId,
+    keepLoaded,
+    onlyKey
   ]);
   const onSearchChange = useCallback(
     (value) => {
@@ -186,12 +205,6 @@ function useConversationHistoryController(props) {
     if (!hasMore || status === "loading" || status === "loading-more") return;
     void dispatch(fetchConversationHistory({ scopeId, replace: false }));
   }, [dispatch, scopeId, hasMore, status]);
-  const onArchiveViewChange = (open) => {
-    dispatch(
-      setScopeArchiveView({ scopeId, view: open ? "archived" : "active" })
-    );
-    void dispatch(fetchConversationHistory({ scopeId, replace: true }));
-  };
   const onRefresh = () => {
     void dispatch(fetchConversationHistory({ scopeId, replace: true }));
     if (surfaceId) {
@@ -228,9 +241,9 @@ function useConversationHistoryController(props) {
   );
   const favorites = useMemo(() => {
     return scope.items.filter(
-      (i) => isFavoriteResolved(i.conversationId) && rowMatchesArchiveView(i.status, scope.archiveView ?? "active")
+      (i) => isFavoriteResolved(i.conversationId) && isLiveConversationRow(i.status)
     );
-  }, [scope.items, scope.archiveView, isFavoriteResolved]);
+  }, [scope.items, isFavoriteResolved]);
   const resolveHref = useCallback(
     (conv) => getConversationHref ? getConversationHref(conv) : `/chat/${conv.conversationId}`,
     [getConversationHref]
@@ -252,7 +265,7 @@ function useConversationHistoryController(props) {
     },
     [dispatch, scopeId]
   );
-  const getSourceMenuCtx = useCallback(
+  const getSourceMenuBase = useCallback(
     (conv) => {
       if (!surfaceId) {
         return {
@@ -309,6 +322,20 @@ function useConversationHistoryController(props) {
     },
     [surfaceId, scope, facets, commitSourceFilter]
   );
+  const getSourceMenuCtx = useCallback(
+    (conv) => {
+      const base = getSourceMenuBase(conv);
+      if (!removeFromList) return base;
+      return {
+        ...base,
+        removeFromList: {
+          label: removeFromList.label,
+          run: () => removeFromList.onRemove(conv)
+        }
+      };
+    },
+    [getSourceMenuBase, removeFromList]
+  );
   return {
     scope,
     byDate,
@@ -323,7 +350,6 @@ function useConversationHistoryController(props) {
     onGroupingChange,
     onLoadMore,
     onRefresh,
-    onArchiveViewChange,
     isFavoriteResolved,
     onToggleFavoriteResolved,
     favorites,
@@ -383,7 +409,7 @@ const DenseView = ({
   const cachedSearchItems = byDate.flatMap((bucket) => bucket.items);
   const hasAuthoritativeResults = serverSearchState.isSettled && (serverSearchState.status === "succeeded" || serverSearchState.status === "loading-more" || serverSearchState.status === "failed" && serverSearchState.items.length > 0);
   const searchItems = hasAuthoritativeResults ? serverSearchState.items.filter(
-    (item) => rowMatchesArchiveView(item.status, ctl.scope.archiveView ?? "active")
+    (item) => isLiveConversationRow(item.status)
   ) : cachedSearchItems;
   const empty = !allLanesOff && status !== "loading" && status !== "idle" && !error && count === 0 && !searchTerm.trim() && emptyState;
   const showControls = showSearch || showGroupingToggle || !!headerActions || !!surfaceId;
@@ -596,8 +622,7 @@ const DenseView = ({
         count === 1 ? "" : "s"
       ] })
     ] }),
-    /* @__PURE__ */ jsx(ConversationArchivedToggle, { ctl }),
-    /* @__PURE__ */ jsx(ConversationTrashSection, { variant: "dense" })
+    /* @__PURE__ */ jsx(ConversationArchiveSection, { variant: "dense" })
   ] });
 };
 const ConsumerView = ({
@@ -609,13 +634,11 @@ const ConsumerView = ({
   openInPlace = false,
   headerSlot,
   topSlot,
-  initialSearchOpen = false,
+  autoFocusSearch = false,
   hideSearchAffordance = false,
-  historyLabel = "Filtered Chats",
   pageSize = 30,
   className
 }) => {
-  const dispatch = useAppDispatch();
   const {
     byDate,
     status,
@@ -636,27 +659,19 @@ const ConsumerView = ({
   const cachedSearchItems = byDate.flatMap((bucket) => bucket.items);
   const hasAuthoritativeResults = serverSearchState.isSettled && (serverSearchState.status === "succeeded" || serverSearchState.status === "loading-more" || serverSearchState.status === "failed" && serverSearchState.items.length > 0);
   const searchItems = hasAuthoritativeResults ? serverSearchState.items.filter(
-    (item) => rowMatchesArchiveView(item.status, ctl.scope.archiveView ?? "active")
+    (item) => isLiveConversationRow(item.status)
   ) : cachedSearchItems;
   const favoriteIds = useMemo(
     () => new Set(favorites.map((f) => f.conversationId)),
     [favorites]
   );
-  const [searchOpen, setSearchOpen] = useState(initialSearchOpen);
   const searchInputRef = useRef(null);
-  const openSearch = useCallback(() => {
-    setSearchOpen(true);
-    requestAnimationFrame(() => searchInputRef.current?.focus());
-  }, []);
   useEffect(() => {
-    if (initialSearchOpen) {
+    if (autoFocusSearch) {
       requestAnimationFrame(() => searchInputRef.current?.focus());
     }
-  }, [initialSearchOpen]);
-  const closeSearch = useCallback(() => {
-    setSearchOpen(false);
-    dispatch(setScopeSearch({ scopeId, searchTerm: "" }));
-  }, [dispatch, scopeId]);
+  }, [autoFocusSearch]);
+  const showSearch = !hideSearchAffordance;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -666,9 +681,22 @@ const ConsumerView = ({
       ),
       children: [
         headerSlot,
-        surfaceId && /* @__PURE__ */ jsxs("div", { className: "flex h-8 shrink-0 items-center gap-1 px-2", children: [
-          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[11px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: historyLabel }),
-          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", children: [
+        (showSearch || surfaceId) && /* @__PURE__ */ jsxs("div", { className: "flex h-9 shrink-0 items-center gap-1 px-2", children: [
+          showSearch ? /* @__PURE__ */ jsx(
+            SearchField,
+            {
+              ref: searchInputRef,
+              value: searchTerm,
+              onChange: (e) => onSearchChange(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Escape") onSearchChange("");
+              },
+              placeholder: "Search",
+              "aria-label": "Search conversations",
+              className: "min-w-0 flex-1"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+          surfaceId && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center", children: [
             status === "loading" ? /* @__PURE__ */ jsx(
               LoadingTapButton,
               {
@@ -699,25 +727,6 @@ const ConsumerView = ({
             )
           ] })
         ] }),
-        !hideSearchAffordance && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1 px-1 pb-1", children: searchOpen ? /* @__PURE__ */ jsxs("div", { className: "relative flex flex-1 items-center", children: [
-          /* @__PURE__ */ jsx(Search, { className: "absolute left-2.5 h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: searchInputRef,
-              type: "search",
-              value: searchTerm,
-              onChange: (e) => onSearchChange(e.target.value),
-              onKeyDown: (e) => {
-                if (e.key === "Escape") closeSearch();
-              },
-              placeholder: "Search chats",
-              className: "h-8 w-full rounded-lg border border-border bg-background pl-8 pr-8 text-sm text-foreground placeholder:text-muted-foreground/70 outline-none focus:border-ring/40",
-              "aria-label": "Search conversations"
-            }
-          ),
-          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: closeSearch, "aria-label": "Close search", className: "absolute right-1.5" })
-        ] }) : /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Search, {}), onClick: openSearch, "aria-label": "Search conversations", className: "flex-1", children: "Search chats" }) }),
         topSlot,
         /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto pt-1", children: [
           error && !searchActive && /* @__PURE__ */ jsx(ReadFailure, { error, what: "your conversations", onRetry: onRefresh, className: "m-2" }),
@@ -794,27 +803,11 @@ const ConsumerView = ({
             }
           ) })
         ] }),
-        /* @__PURE__ */ jsx(ConversationArchivedToggle, { ctl }),
-        /* @__PURE__ */ jsx(ConversationTrashSection, { variant: "consumer" })
+        /* @__PURE__ */ jsx(ConversationArchiveSection, { variant: "consumer" })
       ]
     }
   );
 };
-function ConversationArchivedToggle({ ctl }) {
-  const open = ctl.scope.archiveView === "archived";
-  const count = ctl.scope.archivedCount;
-  return /* @__PURE__ */ jsx(
-    ArchivedDisclosure,
-    {
-      count: count ?? 0,
-      countLabel: count === null ? null : void 0,
-      open,
-      onOpenChange: ctl.onArchiveViewChange,
-      keepWhileOpen: true,
-      className: "px-2 py-1"
-    }
-  );
-}
 const GroupingToggle = ({ value, onChange }) => /* @__PURE__ */ jsx(
   SegmentedControl,
   {
@@ -894,7 +887,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
@@ -929,45 +921,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}`
     }
   );
@@ -1031,12 +1006,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",
@@ -1044,37 +1021,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/conversation-history/ConversationPickerWindow.js

@@ -61,8 +61,7 @@ function ConversationPickerWindowInner({
           activeConversationId: activeConversationId ?? null,
           onOpenConversation: handleOpenConversation,
           openInPlace: true,
-          historyLabel: "Conversations",
-          initialSearchOpen: true,
+          autoFocusSearch: true,
           className: "h-full bg-transparent"
         }
       )

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
+};