@ai-matrx/chat 0.6.5 → 0.7.0

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

@@ -199,13 +199,11 @@ function InboxQueueStripBody({ conversationId }) {
                   {
                     type: "button",
                     icon: RotateCcw,
-                    size: "xs",
                     variant: "ghost",
                     tooltip: "Retry \u2014 try saving this message to the queue again.",
                     tooltipSide: "top",
                     "aria-label": "Retry queued message",
                     className: queueActionClassName,
-                    iconClassName: "h-4 w-4",
                     onClick: () => {
                       dispatch(
                         removeInboxItem({
@@ -228,13 +226,11 @@ function InboxQueueStripBody({ conversationId }) {
                   {
                     type: "button",
                     icon: Zap,
-                    size: "xs",
                     variant: "ghost",
                     tooltip: "Deliver at the next pause \u2014 the agent keeps working, but receives this sooner.",
                     tooltipSide: "top",
                     "aria-label": "Deliver queued message at the agent's next pause",
                     className: queueActionClassName,
-                    iconClassName: "h-4 w-4",
                     onClick: async () => {
                       setPromotingIds(
                         (ids) => new Set(ids).add(item.injectionId)
@@ -261,13 +257,11 @@ function InboxQueueStripBody({ conversationId }) {
                   {
                     type: "button",
                     icon: Pencil,
-                    size: "xs",
                     variant: "ghost",
                     tooltip: "Edit \u2014 change this message before the agent receives it.",
                     tooltipSide: "top",
                     "aria-label": "Edit queued message",
                     className: queueActionClassName,
-                    iconClassName: "h-4 w-4",
                     onClick: () => setEditing({
                       injectionId: item.injectionId,
                       mode: item.mode,
@@ -280,13 +274,11 @@ function InboxQueueStripBody({ conversationId }) {
                   {
                     type: "button",
                     icon: X,
-                    size: "xs",
                     variant: "ghost",
                     tooltip: failed ? "Dismiss \u2014 remove this failed message." : "Withdraw \u2014 remove this message before the agent receives it.",
                     tooltipSide: "top",
                     "aria-label": failed ? "Dismiss failed message" : "Withdraw queued message",
                     className: queueActionClassName,
-                    iconClassName: "h-4 w-4",
                     onClick: () => dispatch(
                       retractInboxItem({
                         conversationId,

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

@@ -22,6 +22,8 @@ export declare function useRunControlsState(conversationId: string, includeAttac
     resolveTab: (tab: RunControlsTab) => RunControlsTab;
     tabTrailing: (tabId: RunControlsTab) => ReactNode;
     addedCount: number;
+    addedToolsCount: number;
+    addedSkillsCount: number;
     hasModelOverride: boolean;
     hasActiveContext: boolean;
     anyDocActive: boolean;

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

@@ -153,6 +153,9 @@ function useRunControlsState(conversationId, includeAttach) {
     if (tabId === "tools" && addedCount > 0) {
       return /* @__PURE__ */ jsx(Badge, { tone: "primary", children: addedCount });
     }
+    if (tabId === "skills" && addedSkillsCount > 0) {
+      return /* @__PURE__ */ jsx(Badge, { tone: "primary", children: addedSkillsCount });
+    }
     if (tabId === "model" && hasModelOverride) {
       return /* @__PURE__ */ jsx(TabStatusDot, { label: "overridden" });
     }
@@ -169,7 +172,11 @@ function useRunControlsState(conversationId, includeAttach) {
     defaultTab,
     resolveTab,
     tabTrailing,
-    addedCount,
+    // EVERYTHING the person added to this run (tools + skills): the + control's
+    // label and tint read this one number, so Skills count exactly like Tools.
+    addedCount: addedCount + addedSkillsCount,
+    addedToolsCount: addedCount,
+    addedSkillsCount,
     hasModelOverride,
     hasActiveContext,
     anyDocActive,

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { UntrustedCount } from "../../../../host/ui-slots.js";
 import { readOf } from "../../../../host/ui-slots.js";
 import { useEffect } from "react";
@@ -14,6 +14,7 @@ import {
   PicksSkeletons,
   PicksSwitchRow
 } from "./RunPicksSurface.js";
+import { DeviceToolsModeRow } from "./DeviceToolsModeRow.js";
 import { ReadFailure } from "../../../../host/ui-slots.js";
 import {
   selectAgentError,
@@ -38,6 +39,7 @@ import { DEFAULT_BUILDER_ADVANCED_SETTINGS } from "../../../types/instance.types
 import { filterAndSortBySearch } from "@ai-matrx/kit/search-scoring";
 import { getToolDisplayName } from "../../../../tool-call-visualization/registry/registry.js";
 import { groupToolCatalog, toolCategoryLabel } from "./run-tool-catalog.js";
+import { isBundleListerName } from "@ai-matrx/agents/tools";
 import { loadAvailableTools, selectAllTools, selectToolsError, selectToolsStatus, useToolCatalog } from "../../../identity/tool-catalog.js";
 function RunToolPicker({ conversationId }) {
   const dispatch = useAppDispatch();
@@ -123,7 +125,7 @@ function RunToolPicker({ conversationId }) {
       }
     })
   );
-  const list = tools ?? [];
+  const list = (tools ?? []).filter((t) => !isBundleListerName(t.name));
   const toolMap = new Map(list.map((t) => [t.id, t]));
   const builtInIds = Array.isArray(agentToolIds) ? agentToolIds : [];
   const agentOwned = new Set(builtInIds);
@@ -205,16 +207,19 @@ function RunToolPicker({ conversationId }) {
     {
       noun: "tools",
       icon: Wrench,
-      topSlot: /* @__PURE__ */ jsx(
-        PicksSwitchRow,
-        {
-          label: "Auto tools",
-          detail: autoChoice === null ? "Agent default" : "This chat",
-          title: `Agent default: ${agentDefaultOn ? "on" : "off"}`,
-          checked: autoOn,
-          onCheckedChange: setAutoTools
-        }
-      ),
+      topSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          PicksSwitchRow,
+          {
+            label: "Auto tools",
+            detail: autoChoice === null ? "Agent default" : "This chat",
+            title: `Agent default: ${agentDefaultOn ? "on" : "off"}`,
+            checked: autoOn,
+            onCheckedChange: setAutoTools
+          }
+        ),
+        /* @__PURE__ */ jsx(DeviceToolsModeRow, { agentId: agentId ?? null })
+      ] }),
       notice: modelSupportsTools ? null : /* @__PURE__ */ jsx(PicksNotice, { icon: AlertTriangle, children: "This model can't use tools; they're dropped" }),
       agentCount: /* @__PURE__ */ jsx(
         UntrustedCount,

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

@@ -12,6 +12,7 @@ import {
   Eye,
   CornerDownLeft,
   Cpu,
+  Crown,
   FileText,
   FolderOpen,
   Globe,
@@ -30,6 +31,9 @@ import {
 } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@ai-matrx/design-system";
 import { useAppDispatch, useAppSelector } from "../../../../../store/hooks.js";
+import { selectShowCreatorPanel, toggleShowCreatorPanel } from "../../../../../host/prefs.js";
+import { selectIsSuperAdmin } from "../../../../../host/identity.js";
+import { selectIsCreator } from "../../../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
 import { ResourcePickerMenu } from "../../../../../host/ui-slots.js";
 import { flattenResourcePickerItems } from "../../../../../host/ui-slots.js";
 import { useKnowledgeAttachSearch } from "../../../../../host/ui-slots.js";
@@ -109,6 +113,10 @@ function ComposerPlusMenu({
   onOpenChange
 }) {
   const dispatch = useAppDispatch();
+  const isCreator = useAppSelector(selectIsCreator(conversationId));
+  const isSystemAdmin = useAppSelector(selectIsSuperAdmin);
+  const showCreatorSwitch = isCreator || isSystemAdmin;
+  const showCreatorPanel = useAppSelector(selectShowCreatorPanel);
   const touchOnly = useTouchOnlyDevice();
   const [openState, setOpenState] = useState(false);
   const open = openProp ?? openState;
@@ -345,6 +353,20 @@ function ComposerPlusMenu({
         onCheckedChange: (value) => dispatch(setAutoClearMode({ conversationId, value, surfaceKey }))
       }
     ) : null,
+    showCreatorSwitch ? (
+      // The agent's creator (or a system admin): the creator panel above
+      // the variables. The choice is saved to the person's preferences,
+      // so it opens the same way on the next load (Arman, 2026-10-08).
+      /* @__PURE__ */ jsx(
+        ComposerMenuSwitchRow,
+        {
+          icon: Crown,
+          label: "Creator panel",
+          checked: showCreatorPanel,
+          onCheckedChange: () => dispatch(toggleShowCreatorPanel())
+        }
+      )
+    ) : null,
     /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
     /* @__PURE__ */ jsx(
       ComposerMenuRow,

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

@@ -0,0 +1,35 @@
+/**
+ * The composer rail's pill: icon + ONE word, the full name / detail / hint in the tooltip, and an
+ * optional floating X. Shared by `ConversationContextRail` and the host companion-panel pills
+ * (`ConversationCompanionPills`) so a pill looks and behaves the same wherever it sits.
+ */
+import type { LucideIcon } from "lucide-react";
+export type RailTone = "default" | "primary";
+export interface RailItem {
+    id: string;
+    icon: LucideIcon;
+    /** Full name — shown in the tooltip and the overflow menu, never on the pill. */
+    label: string;
+    /** ONE word for the pill face (chips stay tiny; the tooltip carries the rest). */
+    word: string;
+    /** Short trailing meta (e.g. "3/5", a count, a status word) — tooltip only. */
+    detail?: string;
+    /** One-line description of what clicking does, for the tooltip. */
+    hint?: string;
+    tone?: RailTone;
+    /** Tiny spinner instead of a static state (e.g. saving). */
+    busy?: boolean;
+    /** Pill's detail surface is currently open. */
+    active?: boolean;
+    onOpen: () => void;
+    /** Floating X — detaches the item from this conversation's context. */
+    onRemove?: () => void;
+}
+/**
+ * Tiny pill: icon + ONE word. Everything else (full name, status, click hint)
+ * lives in the tooltip; a floating X (hover/focus reveal, always visible on
+ * touch) detaches the item from this conversation's context.
+ */
+export declare function RailPill({ item }: {
+    item: RailItem;
+}): import("react").JSX.Element;

package/dist/agents/components/inputs/smart-input/rail-pill.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@ai-matrx/design-system";
+import { ComposerChip } from "./ComposerChip.js";
+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 })
+    ] })
+  ] });
+}
+export {
+  RailPill
+};

package/dist/agents/components/inputs/variable-input-variations/AgentVariableForm.js

@@ -262,6 +262,40 @@ function VariableField({ conversationId, def, value, onChange }) {
     )
   ] });
 }
+function OtherAnswerBox({
+  otherText,
+  onTextChange
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mt-1 pl-6", children: /* @__PURE__ */ jsx(
+    VoiceTextarea,
+    {
+      value: otherText === "__other__" ? "" : otherText,
+      placeholder: "Enter your answer...",
+      onChange: (e) => onTextChange(e.target.value),
+      autoGrow: true,
+      minHeight: 28,
+      maxHeight: 80,
+      className: "text-xs bg-transparent",
+      style: IOS_INPUT_STYLE
+    }
+  ) });
+}
+function OptionsFrame({
+  needsScroll,
+  otherInput,
+  children
+}) {
+  if (needsScroll) {
+    return /* @__PURE__ */ jsxs("div", { className: "max-h-36 overflow-y-auto", children: [
+      children,
+      otherInput
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    otherInput
+  ] });
+}
 function RadioField({
   cc,
   value,
@@ -312,32 +346,17 @@ function RadioField({
       ]
     }
   );
-  const otherInput = isOtherSelected && /* @__PURE__ */ jsx("div", { className: "mt-1 pl-6", children: /* @__PURE__ */ jsx(
-    VoiceTextarea,
+  const otherInput = isOtherSelected && /* @__PURE__ */ jsx(
+    OtherAnswerBox,
     {
-      value: otherText === "__other__" ? "" : otherText,
-      placeholder: "Enter your answer...",
-      onChange: (e) => {
-        setOtherText(e.target.value);
-        onChange(e.target.value || "__other__");
-      },
-      autoGrow: true,
-      minHeight: 28,
-      maxHeight: 80,
-      className: "text-xs bg-transparent",
-      style: IOS_INPUT_STYLE
+      otherText,
+      onTextChange: (text) => {
+        setOtherText(text);
+        onChange(text || "__other__");
+      }
     }
-  ) });
-  if (needsScroll) {
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-36 overflow-y-auto", children: [
-      content,
-      otherInput
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    content,
-    otherInput
-  ] });
+  );
+  return /* @__PURE__ */ jsx(OptionsFrame, { needsScroll, otherInput, children: content });
 }
 function CheckboxField({
   cc,
@@ -405,35 +424,20 @@ function CheckboxField({
       ]
     }
   );
-  const otherInput = isOtherChecked && /* @__PURE__ */ jsx("div", { className: "mt-1 pl-6", children: /* @__PURE__ */ jsx(
-    VoiceTextarea,
+  const otherInput = isOtherChecked && /* @__PURE__ */ jsx(
+    OtherAnswerBox,
     {
-      value: otherText === "__other__" ? "" : otherText,
-      placeholder: "Enter your answer...",
-      onChange: (e) => {
-        setOtherText(e.target.value);
+      otherText,
+      onTextChange: (text) => {
+        setOtherText(text);
         const knownSelected = selected.filter((s) => options.includes(s));
         onChange(
-          e.target.value ? [...knownSelected, e.target.value] : knownSelected
+          text ? [...knownSelected, text] : knownSelected
         );
-      },
-      autoGrow: true,
-      minHeight: 28,
-      maxHeight: 80,
-      className: "text-xs bg-transparent",
-      style: IOS_INPUT_STYLE
+      }
     }
-  ) });
-  if (needsScroll) {
-    return /* @__PURE__ */ jsxs("div", { className: "max-h-36 overflow-y-auto", children: [
-      content,
-      otherInput
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    content,
-    otherInput
-  ] });
+  );
+  return /* @__PURE__ */ jsx(OptionsFrame, { needsScroll, otherInput, children: content });
 }
 export {
   AgentVariableForm

package/dist/agents/components/run/AgentRunHeader.js

@@ -15,7 +15,7 @@ function AgentRunHeader({
   currentPath
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "lg:hidden w-full", children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: "w-full @min-[44rem]/shell-header:hidden", children: /* @__PURE__ */ jsx(
       AgentHeaderMobile,
       {
         agentId,
@@ -24,8 +24,8 @@ function AgentRunHeader({
         extraActions: /* @__PURE__ */ jsx(AgentNewRunButton, { surfaceKey })
       }
     ) }),
-    /* @__PURE__ */ jsxs("div", { className: "@container/agent-header hidden lg:flex items-center justify-between w-full gap-2 shrink-0", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "@container/agent-header hidden @min-[44rem]/shell-header:flex items-center justify-between w-full min-w-0 gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 shrink items-center", children: [
         /* @__PURE__ */ jsx(ChevronLeftTapButton, { variant: "transparent", href: backHref, "aria-label": "Back to Agents" }),
         /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center ps-[calc(var(--matrx-tap-gap)/2)]", children: /* @__PURE__ */ jsx(
           AgentSelectorIsland,
@@ -42,7 +42,7 @@ function AgentRunHeader({
         /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "w-[calc(var(--matrx-tap-gap)/2)] shrink-0" }),
         /* @__PURE__ */ jsx(AgentNewRunButton, { surfaceKey })
       ] }),
-      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(
         AgentModeController,
         {
           agentId,
@@ -51,7 +51,13 @@ function AgentRunHeader({
         }
       ) }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pt-0.5 shrink-0", children: [
-        /* @__PURE__ */ jsx(AgentSaveStatus, { agentId }),
+        /* @__PURE__ */ jsx(
+          AgentSaveStatus,
+          {
+            agentId,
+            versionClassName: "hidden @min-[40rem]/agent-header:inline"
+          }
+        ),
         basePath === "/agents" && /* @__PURE__ */ jsx(ReviewAnswersLink, { agentId }),
         /* @__PURE__ */ jsx(AgentOptionsMenu, { agentId, basePath })
       ] })

package/dist/agents/components/run-controls/panels/shared.d.ts

@@ -26,7 +26,7 @@ export declare function makeSelectConversationRequests(conversationId: string):
     voiceAgent: import("../../../../voice-agent/types.js").VoiceAgentState;
     agentDefinition: import("../../../types/agent-definition.types.js").AgentDefinitionSliceState;
     conversationList: import("../../../redux/conversation-list/conversation-list.types.js").ConversationListState;
-    conversationHistory: import("../../../redux/conversation-history/index.js").ConversationHistoryState;
+    conversationHistory: import("../../../redux/conversation-history/types.js").ConversationHistoryState;
     agentShortcut: import("../../../redux/agent-shortcuts/types.js").AgentShortcutSliceState;
     agentShortcutCategory: import("../../../redux/agent-shortcut-categories/types.js").AgentShortcutCategorySliceState;
     surfaceUserState: import("../../../../surfaces/redux/userStateSlice.js").SurfaceUserStateSlice;

package/dist/agents/components/shared/AgentHeaderMobile.js

@@ -196,6 +196,7 @@ function AgentHeaderMobile({
           }
         )
       ] }) }),
+      extraActions,
       /* @__PURE__ */ jsx(AgentSaveTapButton, { agentId }),
       /* @__PURE__ */ jsx(AgentOptionsMenu, { agentId, asTapTarget: true, basePath })
     ] }),

package/dist/agents/components/shared/AgentModeController.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState, useTransition } from "react";
+import { useRef, useState, useTransition } from "react";
 import { useRouter, usePathname, Link } from "../../../host/navigation.js";
 import {
   Activity,
@@ -9,6 +9,7 @@ import {
   History,
   Layers,
   LayoutGrid,
+  MoreHorizontal,
   Pencil,
   Play,
   Plus,
@@ -26,7 +27,11 @@ import {
   AlertDialogDescription,
   AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogTitle
+  AlertDialogTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from "@ai-matrx/design-system";
 import {
   NavItemTooltip,
@@ -46,6 +51,20 @@ const MODES = [
   { id: "widgets", label: "Widgets", icon: LayoutGrid },
   { id: "new", label: "New", icon: Plus }
 ];
+const INLINE_FROM = {
+  run: "",
+  edit: "hidden @min-[500px]/agent-header:flex",
+  view: "hidden @min-[540px]/agent-header:flex",
+  runs: "hidden @min-[580px]/agent-header:flex",
+  versions: "hidden @min-[620px]/agent-header:flex",
+  hindsight: "hidden @min-[660px]/agent-header:flex",
+  shortcuts: "hidden @min-[700px]/agent-header:flex",
+  apps: "hidden @min-[740px]/agent-header:flex",
+  surfaces: "hidden @min-[780px]/agent-header:flex",
+  widgets: "hidden @min-[820px]/agent-header:flex",
+  new: "hidden @min-[860px]/agent-header:flex"
+};
+const MORE_HIDDEN_FROM = "@min-[860px]/agent-header:hidden";
 function getAgentModeHref(mode, agentId, basePath) {
   if (mode === "new") return `${basePath}/new`;
   const map = {
@@ -112,32 +131,77 @@ function AgentModeController({
     navigateTo(getAgentModeHref(next, agentId, basePath));
   };
   const getModeHref = (id) => getAgentModeHref(id, agentId, basePath);
+  const inlineRefs = useRef({});
+  const [folded, setFolded] = useState([]);
+  const readFolded = () => setFolded(
+    MODES.map((m) => m.id).filter((id) => {
+      const el = inlineRefs.current[id];
+      return !el || el.getClientRects().length === 0;
+    })
+  );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NavTooltipProvider, { children: /* @__PURE__ */ jsx("div", { className: "matrx-glass-thin-border flex items-center gap-0 rounded-full p-0.5", children: MODES.map(({ id, label, icon: Icon }) => {
-      const isActive = id === mode;
-      return /* @__PURE__ */ jsx(NavItemTooltip, { label, children: /* @__PURE__ */ jsxs(
-        Link,
-        {
-          href: getModeHref(id),
-          onClick: (e) => {
-            if (e.metaKey || e.ctrlKey) return;
-            e.preventDefault();
-            handleModeChange(id);
-          },
-          "aria-label": label,
-          className: cn(
-            "flex items-center justify-center gap-1 py-0.5 text-[0.6875rem] font-medium rounded-full transition-colors cursor-pointer",
-            "px-2.5",
-            "[&_svg]:w-3.5 [&_svg]:h-3.5",
-            isActive ? NAV_ITEM_SELECTED : NAV_ITEM_UNSELECTED
-          ),
-          children: [
-            /* @__PURE__ */ jsx(Icon, {}),
-            /* @__PURE__ */ jsx("span", { className: "hidden @min-[1240px]/agent-header:inline", children: label })
-          ]
-        }
-      ) }, id);
-    }) }) }),
+    /* @__PURE__ */ jsx(NavTooltipProvider, { children: /* @__PURE__ */ jsxs("div", { className: "matrx-glass-thin-border flex items-center gap-0 rounded-full p-0.5", children: [
+      MODES.map(({ id, label, icon: Icon }) => {
+        const isActive = id === mode;
+        return /* @__PURE__ */ jsx(NavItemTooltip, { label, children: /* @__PURE__ */ jsxs(
+          Link,
+          {
+            ref: (el) => {
+              inlineRefs.current[id] = el;
+            },
+            href: getModeHref(id),
+            onClick: (e) => {
+              if (e.metaKey || e.ctrlKey) return;
+              e.preventDefault();
+              handleModeChange(id);
+            },
+            "aria-label": label,
+            className: cn(
+              "flex items-center justify-center gap-1 py-0.5 text-[0.6875rem] font-medium rounded-full transition-colors cursor-pointer",
+              "px-2.5",
+              "[&_svg]:w-3.5 [&_svg]:h-3.5",
+              isActive ? NAV_ITEM_SELECTED : NAV_ITEM_UNSELECTED,
+              !isActive && INLINE_FROM[id]
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, {}),
+              /* @__PURE__ */ jsx("span", { className: "hidden @min-[1240px]/agent-header:inline", children: label })
+            ]
+          }
+        ) }, id);
+      }),
+      /* @__PURE__ */ jsxs(DropdownMenu, { onOpenChange: (open) => open && readFolded(), children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "More modes",
+            title: "More",
+            className: cn(
+              "flex items-center justify-center py-0.5 px-2.5 rounded-full transition-colors cursor-pointer",
+              "[&_svg]:w-3.5 [&_svg]:h-3.5",
+              NAV_ITEM_UNSELECTED,
+              MORE_HIDDEN_FROM
+            ),
+            children: /* @__PURE__ */ jsx(MoreHorizontal, {})
+          }
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-40", children: MODES.filter((m) => folded.includes(m.id)).map(
+          ({ id, label, icon: Icon }) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onSelect: () => handleModeChange(id),
+              className: "gap-2",
+              children: [
+                /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }),
+                label
+              ]
+            },
+            id
+          )
+        ) })
+      ] })
+    ] }) }),
     /* @__PURE__ */ jsx(AlertDialog, { open: showDirtyDialog, onOpenChange: setShowDirtyDialog, children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
       /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
         /* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unsaved Changes" }),

package/dist/agents/components/shared/AgentSelectorIsland.js

@@ -44,7 +44,8 @@ function AgentSelectorIsland({
         label: displayName,
         activeAgentId: agentId,
         triggerSlot,
-        noBorder: true
+        noBorder: true,
+        className: "min-w-0 shrink"
       }
     ),
     showVersion && /* @__PURE__ */ jsxs("span", { className: "text-[0.625rem] font-medium text-[var(--shell-nav-text)] tabular-nums shrink-0", children: [