@ai-matrx/chat 0.5.4 → 0.5.6

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

@@ -1,36 +1,30 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { AppWindow, ChevronDown, Gauge, Layers, Star, Webhook } from "lucide-react";
-import { Button, Tile } from "@ai-matrx/design-system/controls";
+import { useContext, useState } from "react";
+import { AppWindow, ChevronDown, Cpu, Gauge, Layers, Star, Webhook } from "lucide-react";
+import { Button } from "@ai-matrx/design-system/controls";
 import { MANDATE_KEYS } from "@ai-matrx/agents/mandates";
 import { Popover, PopoverContent, PopoverTrigger } from "@ai-matrx/design-system";
-import { AgentListDropdown } from "@ai-matrx/agents/catalog/react";
-import { useAppDispatch, useAppSelector } from "../../../../../store/hooks.js";
+import { AgentListDropdown, AgentListPanel } from "@ai-matrx/agents/catalog/react";
+import { useIsMobile } from "@ai-matrx/kit/media-query";
+import { useAppSelector } from "../../../../../store/hooks.js";
 import { cn } from "@ai-matrx/design-system";
-import { toast } from "../../../../../host/notify.js";
 import { announceAlreadyAnswering } from "./already-answering.js";
 import { QuickRunModelSelect } from "../../../run-controls/RunModelPicker.js";
-import { ModelListDropdown } from "../../../../../host/ui-slots.js";
-import { seedOverrides } from "../../../../redux/execution-system/instance-model-overrides/instance-model-overrides.slice.js";
-import { selectInstanceOverrideState } from "../../../../redux/execution-system/instance-model-overrides/instance-model-overrides.selectors.js";
-import {
-  effectiveOfferingPin,
-  setOfferingPin
-} from "../../../../redux/execution-system/instance-model-overrides/offering-pin.js";
-import { useSessionKnob } from "../../../../../host/prefs-react.js";
-import { knobRefusalSentence, setKnobOverride } from "../../../../../host/prefs.js";
-import { CHAT_DEFAULT_MODEL_KNOB } from "../../../../../ui/chat-default-model-knob.js";
-import { selectModelLabelWithClass } from "@ai-matrx/agents/models";
-import { useModelRecords } from "../../../../identity/model-catalog.js";
+import { selectIsManualExecutionMode } from "../../../../redux/execution-system/selectors/aggregate.selectors.js";
 import {
+  COMPOSER_MENU_NO_ENTRANCE,
+  ComposerMenuCloseAllContext,
   ComposerMenuDivider,
-  ComposerMenuHelp,
   ComposerMenuLabel,
+  ComposerMenuLevel,
+  ComposerMenuPresentationContext,
   ComposerMenuRow,
   ComposerSubmenu,
-  ComposerFoldedSection
+  ComposerFoldedSection,
+  ignoreOwnWrapper
 } from "./ComposerMenu.js";
+import { ComposerMenuSheet } from "./ComposerMenuSheet.js";
 import { ComposerOutputPanel } from "./ComposerOutput.js";
 import { ComposerEffortRows, useComposerEffort } from "./ComposerEffortPill.js";
 import { composerShows } from "./composer-mode-visibility.js";
@@ -38,21 +32,24 @@ import { composerPillClass } from "./composer-chip.js";
 import { useComposerAgent, useEffectiveModelId } from "./useComposerAgent.js";
 import { useComposerAgentFilter } from "./useComposerAgentFilter.js";
 import { ComposerAgentPeek } from "./ComposerAgentPeek.js";
-import { presentOrganizationRefusal } from "../../../../../host/org.js";
-import { ensureOrgId, isOrganizationSelectionCancelled } from "../../../../../host/org.js";
+const AGENT_PICKER_PANEL = "w-[680px] h-[min(528px,80dvh)] p-0";
+const MODEL_PICKER_PANEL = "w-[min(1060px,calc(100vw-24px))] h-[min(640px,80dvh)] p-0";
+const CUSTOM_AGENT_LABEL = "Custom Agent";
 function pillLabel(info, mode) {
   if (!composerShows(mode, "agent.presets")) return info.agentName ?? "Agent";
-  const name = info.isCustom ? "Custom" : info.preset?.name ?? info.agentName ?? "Agent";
+  const name = info.isCustom ? CUSTOM_AGENT_LABEL : info.preset?.name ?? info.agentName ?? "Agent";
   return info.effectiveModelLabel ? `${name} \xB7 ${info.effectiveModelLabel}` : name;
 }
 function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide, folded = false }) {
   const [open, setOpen] = useState(false);
+  const isMobile = useIsMobile();
   const effort = useComposerEffort(conversationId, useEffectiveModelId(conversationId));
   const info = useComposerAgent(conversationId);
   const label = pillLabel(info, mode);
   const onSelectAgent = agentControl?.onSelectAgent;
   const agentFilter = useComposerAgentFilter(conversationId);
-  const showOverride = info.modelOverridden && !info.isCustom && composerShows(mode, "agent.presets");
+  const chatPresets = composerShows(mode, "agent.presets");
+  const showOverride = info.modelOverridden && chatPresets;
   const overrideTitle = info.agentModelLabel ? `Agent's own model: ${info.agentModelLabel}` : "Not the agent's own model";
   const pill = /* @__PURE__ */ jsx(
     Button,
@@ -62,55 +59,12 @@ function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide,
       "aria-label": `Agent: ${label}${showOverride ? " (model changed)" : ""}`,
       title: showOverride ? `${label} \u2014 ${overrideTitle}` : label,
       "data-model-override": showOverride ? "" : void 0,
+      onClick: isMobile ? () => setOpen(true) : void 0,
       className: "min-w-0 shrink",
       children: showOverride ? `${label} \xB7 changed` : label
     }
   );
-  if (folded) {
-    const chatPresets = composerShows(mode, "agent.presets");
-    const showEffort = Boolean(effort) && composerShows(mode, "meta.effort");
-    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: pill }),
-      /* @__PURE__ */ jsxs(
-        PopoverContent,
-        {
-          side: menuSide,
-          align: "end",
-          sideOffset: 8,
-          className: "flex w-80 max-h-[var(--radix-popover-content-available-height)] flex-col overflow-y-auto p-1",
-          children: [
-            chatPresets ? /* @__PURE__ */ jsx(
-              ChatPresetsPanel,
-              {
-                conversationId,
-                info,
-                agentControl,
-                close: () => setOpen(false)
-              }
-            ) : onSelectAgent ? /* @__PURE__ */ jsx(
-              AgentListDropdown,
-              {
-                onSelect: (agentId) => {
-                  setOpen(false);
-                  if (agentId !== info.agentId) onSelectAgent(agentId);
-                  else announceAlreadyAnswering(info);
-                },
-                activeAgentId: info.agentId,
-                agentFilter,
-                contentSide: "left",
-                triggerSlot: /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Webhook, {}), title: info.agentName ?? "Agent", end: /* @__PURE__ */ jsx(ChevronDown, {}) })
-              }
-            ) : /* @__PURE__ */ jsx(ComposerMenuRow, { icon: Webhook, label: info.agentName ?? "Agent", checked: true }),
-            /* @__PURE__ */ jsxs(ComposerFoldedSection, { children: [
-              /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: AppWindow, label: "Output" }, panelClassName: "w-80", children: /* @__PURE__ */ jsx(ComposerOutputPanel, { conversationId }) }),
-              showEffort && effort ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Gauge, label: "Effort", detail: effort.word }, panelClassName: "w-56 p-1", children: (close) => /* @__PURE__ */ jsx(ComposerEffortRows, { effort, onChosen: close }) }) : null
-            ] })
-          ]
-        }
-      )
-    ] });
-  }
-  if (!composerShows(mode, "agent.presets")) {
+  if (!chatPresets && !folded) {
     if (!onSelectAgent) {
       return /* @__PURE__ */ jsx("span", { className: cn(composerPillClass(size, false), "hover:bg-transparent"), title: "This page always answers with this agent", children: /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: label }) });
     }
@@ -128,6 +82,39 @@ function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide,
       }
     );
   }
+  const close = () => setOpen(false);
+  const choose = (agentId) => {
+    close();
+    if (!onSelectAgent) return;
+    if (agentId !== info.agentId) onSelectAgent(agentId);
+    else announceAlreadyAnswering(info);
+  };
+  const showEffort = folded && Boolean(effort) && composerShows(mode, "meta.effort");
+  const body = /* @__PURE__ */ jsx(ComposerMenuCloseAllContext.Provider, { value: close, children: /* @__PURE__ */ jsxs(ComposerMenuLevel, { children: [
+    chatPresets ? /* @__PURE__ */ jsx(ChatAgentMenu, { conversationId, info, agentControl, choose, close }) : onSelectAgent ? (
+      // Work+, narrow: the agent picker is one row of the folded menu.
+      /* @__PURE__ */ jsx(
+        AnyAgentRow,
+        {
+          icon: Webhook,
+          label: `Agent: ${info.agentName ?? "Agent"}`,
+          info,
+          agentFilter,
+          choose
+        }
+      )
+    ) : /* @__PURE__ */ jsx(ComposerMenuRow, { icon: Webhook, label: `Agent: ${info.agentName ?? "Agent"}` }),
+    folded ? /* @__PURE__ */ jsxs(ComposerFoldedSection, { children: [
+      /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: AppWindow, label: "Output" }, panelClassName: "w-80", children: /* @__PURE__ */ jsx(ComposerOutputPanel, { conversationId }) }),
+      showEffort && effort ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Gauge, label: "Effort", detail: effort.word }, panelClassName: "w-56 p-1", children: (closePanel) => /* @__PURE__ */ jsx(ComposerEffortRows, { effort, onChosen: closePanel }) }) : null
+    ] }) : null
+  ] }) });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      pill,
+      /* @__PURE__ */ jsx(ComposerMenuSheet, { open, onOpenChange: setOpen, accessibleName: "Agent and model", children: body })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: pill }),
     /* @__PURE__ */ jsx(
@@ -136,163 +123,107 @@ function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide,
         side: menuSide,
         align: "end",
         sideOffset: 8,
-        className: "flex w-80 max-h-[var(--radix-popover-content-available-height)] flex-col overflow-y-auto p-1",
-        children: /* @__PURE__ */ jsx(
-          ChatPresetsPanel,
-          {
-            conversationId,
-            info,
-            agentControl,
-            close: () => setOpen(false)
-          }
-        )
+        onPointerDownOutside: ignoreOwnWrapper,
+        className: cn(
+          "flex w-80 max-h-[var(--radix-popover-content-available-height)] flex-col overflow-y-auto p-1",
+          COMPOSER_MENU_NO_ENTRANCE
+        ),
+        children: body
       }
     )
   ] });
 }
-function ThisAgentRow({ info, close }) {
-  if (!info.agentId) return null;
-  return /* @__PURE__ */ jsx(
-    ComposerSubmenu,
-    {
-      row: { icon: Webhook, label: info.agentName ?? "Agent", description: "View, open or duplicate" },
-      panelClassName: "w-[340px] h-[420px] p-0",
-      children: /* @__PURE__ */ jsx(ComposerAgentPeek, { agentId: info.agentId, onDone: close })
-    }
-  );
-}
-function ChatPresetsPanel({
+function ChatAgentMenu({
   conversationId,
   info,
   agentControl,
+  choose,
   close
 }) {
-  const dispatch = useAppDispatch();
-  const organizationId = useAppSelector((s) => s.appContext?.organization_id ?? null);
-  const userId = useAppSelector((s) => s.userAuth?.id ?? null);
-  const personalModel = useSessionKnob(CHAT_DEFAULT_MODEL_KNOB);
-  const personalModelId = typeof personalModel === "string" && personalModel.trim() ? personalModel : null;
-  const overrideState = useAppSelector(selectInstanceOverrideState(conversationId));
-  const pinnedOfferingId = effectiveOfferingPin(overrideState);
-  const personalModelLabel = useModelRecords((s) => selectModelLabelWithClass(s, personalModelId, pinnedOfferingId)) ?? null;
-  const onSelectAgent = agentControl?.onSelectAgent;
+  const isManualMode = useAppSelector(selectIsManualExecutionMode(conversationId));
+  const inSheet = useContext(ComposerMenuPresentationContext) === "sheet";
   const agentFilter = useComposerAgentFilter(conversationId);
-  if (!onSelectAgent) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Agent" }),
-      /* @__PURE__ */ jsx(ThisAgentRow, { info, close }),
-      /* @__PURE__ */ jsx(ComposerMenuHelp, { children: "This page always answers with this agent." }),
-      /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
-      /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Model for this chat" }),
-      /* @__PURE__ */ jsx("div", { className: "px-1.5 pb-1", children: /* @__PURE__ */ jsx(QuickRunModelSelect, { conversationId, className: "h-8 w-full" }) })
-    ] });
-  }
-  const choose = (agentId) => {
-    close();
-    if (agentId !== info.agentId) onSelectAgent(agentId);
-    else announceAlreadyAnswering(info);
-  };
+  const onSelectAgent = agentControl?.onSelectAgent;
+  const agentLabel = info.isCustom ? CUSTOM_AGENT_LABEL : info.agentName ?? "Agent";
   const chooseCustom = () => {
-    if (!info.customAgentId) return;
+    if (!info.customAgentId || !onSelectAgent) return;
     close();
-    if (!info.isCustom) {
-      onSelectAgent(info.customAgentId, { mandateKey: MANDATE_KEYS.chat__default_new_chat });
-    }
-  };
-  const savePersonalDefault = async (key, value) => {
-    if (!userId) {
-      toast.error("Sign in first \u2014 your default model is saved to your account.");
-      return false;
-    }
-    let targetOrganizationId;
-    try {
-      targetOrganizationId = organizationId ?? await ensureOrgId(null);
-    } catch (error) {
-      if (isOrganizationSelectionCancelled(error)) return false;
-      if (presentOrganizationRefusal(error, { subject: "Your default model", act: "saved" })) return false;
-      throw error;
-    }
-    const result = await setKnobOverride({
-      feature: "agents.model_prefs",
-      key,
-      scopeKind: "user",
-      scopeId: userId,
-      organizationId: targetOrganizationId,
-      value,
-      note: "Picked under Custom in the chat composer"
-    });
-    if (!result.ok) {
-      toast.error(`Your default chat model was not saved: ${knobRefusalSentence(result)}`);
-      return false;
-    }
-    return true;
-  };
-  const setPersonalModel = async (modelId) => {
-    if (!await savePersonalDefault("chat_default_model", modelId)) return;
-    if (info.isCustom) {
-      dispatch(seedOverrides({ conversationId, changes: { model: modelId } }));
-    } else {
-      chooseCustom();
-    }
-  };
-  const setPersonalClass = (offeringId) => {
-    dispatch(setOfferingPin({ conversationId, offeringId, seeded: true }));
-    void savePersonalDefault("chat_default_offering", offeringId ?? "");
+    if (info.isCustom) announceAlreadyAnswering(info);
+    else onSelectAgent(info.customAgentId, { mandateKey: MANDATE_KEYS.chat__cx_default });
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "This chat's agent" }),
-    /* @__PURE__ */ jsx(ThisAgentRow, { info, close }),
-    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
-    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Chat agents" }),
-    info.presets.map((preset) => /* @__PURE__ */ jsx(
-      ComposerMenuRow,
-      {
-        icon: Star,
-        label: preset.name,
-        detail: preset.modelLabel ?? void 0,
-        checked: preset.id === info.agentId,
-        onClick: () => choose(preset.id)
-      },
-      preset.id
-    )),
-    /* @__PURE__ */ jsx(
+    info.agentId ? /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon: Webhook, label: `Agent: ${agentLabel}` }, panelClassName: "w-[340px] h-[420px] p-0", children: /* @__PURE__ */ jsx(ComposerAgentPeek, { agentId: info.agentId, onDone: close }) }) : null,
+    isManualMode ? /* @__PURE__ */ jsx(
       ComposerMenuRow,
       {
-        label: "Custom",
-        description: "Your own default chat, on the model you pick",
-        checked: info.isCustom,
-        disabled: !info.customAgentId,
-        onClick: chooseCustom
+        icon: Cpu,
+        label: `Model: ${info.effectiveModelLabel ?? "Agent's model"}`,
+        disabled: true,
+        title: "Manual mode runs the agent's own model"
       }
-    ),
-    /* @__PURE__ */ jsx(
-      AgentListDropdown,
+    ) : /* @__PURE__ */ jsx(
+      ComposerSubmenu,
       {
-        onSelect: (agentId) => choose(agentId),
-        activeAgentId: info.agentId,
-        agentFilter,
-        contentSide: "left",
-        triggerSlot: /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Layers, {}), title: "All agents", end: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        row: { icon: Cpu, label: `Model: ${info.effectiveModelLabel ?? "Choose a model"}` },
+        panelClassName: MODEL_PICKER_PANEL,
+        children: (closePanel) => /* @__PURE__ */ jsx(
+          QuickRunModelSelect,
+          {
+            conversationId,
+            presentation: "inline",
+            onChosen: () => {
+              closePanel();
+              close();
+            }
+          }
+        )
       }
     ),
-    /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
-    /* @__PURE__ */ jsx(ComposerMenuLabel, { children: info.isCustom ? "Model \u2014 your default for Custom" : "Model for this chat" }),
-    /* @__PURE__ */ jsx("div", { className: "px-1.5 pb-1", children: info.isCustom ? /* @__PURE__ */ jsx(
-      ModelListDropdown,
-      {
-        value: personalModelId ?? info.effectiveModelId,
-        onValueChange: (modelId) => void setPersonalModel(modelId),
-        pinnedOfferingId,
-        onOfferingPinChange: setPersonalClass,
-        inputModalities: [],
-        outputModalities: ["text"],
-        placeholder: personalModelLabel ?? info.effectiveModelLabel ?? "Pick a model",
-        "aria-label": "Model for Custom",
-        className: "w-full"
-      }
-    ) : /* @__PURE__ */ jsx(QuickRunModelSelect, { conversationId, className: "h-8 w-full" }) })
+    onSelectAgent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      inSheet ? null : /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
+      /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Choose your chat agent" }),
+      info.presets.map((preset) => /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: Star,
+          label: preset.name,
+          checked: preset.id === info.agentId,
+          onClick: () => choose(preset.id)
+        },
+        preset.id
+      )),
+      /* @__PURE__ */ jsx(
+        ComposerMenuRow,
+        {
+          icon: Star,
+          label: CUSTOM_AGENT_LABEL,
+          checked: info.isCustom,
+          disabled: !info.customAgentId,
+          onClick: chooseCustom
+        }
+      ),
+      /* @__PURE__ */ jsx(AnyAgentRow, { icon: Layers, label: "Choose any agent", info, agentFilter, choose })
+    ] }) : null
   ] });
 }
+function AnyAgentRow({
+  icon,
+  label,
+  info,
+  agentFilter,
+  choose
+}) {
+  return /* @__PURE__ */ jsx(ComposerSubmenu, { row: { icon, label }, panelClassName: AGENT_PICKER_PANEL, children: /* @__PURE__ */ jsx(
+    AgentListPanel,
+    {
+      consumerId: "composer-agent-pill",
+      fill: true,
+      onSelect: choose,
+      activeAgentId: info.agentId,
+      agentFilter
+    }
+  ) });
+}
 export {
   ComposerAgentPill
 };

package/dist/agents/components/inputs/smart-input/composer/already-answering.d.ts

@@ -1,6 +1,6 @@
 /**
  * Choosing the agent that is already answering is never silent: the composer
- * pill says "Custom" when that agent holds the default-chat job, while the
+ * pill says "Custom Agent" for the Matrx Chat agent, while the
  * agent list names it by its own name — so the press answers who is in the seat.
  */
 export declare function announceAlreadyAnswering(info: {

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

@@ -2,7 +2,7 @@ import { toast } from "../../../../../host/notify.js";
 function announceAlreadyAnswering(info) {
   const name = info.agentName ?? "This agent";
   toast.info(
-    info.isCustom ? `${name} is your Custom chat, and it is already answering this conversation.` : `${name} is already answering this conversation.`
+    info.isCustom ? `Custom Agent (${name}) is already answering this conversation.` : `${name} is already answering this conversation.`
   );
 }
 export {

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

@@ -15,7 +15,7 @@ export interface ComposerAgentInfo {
     modelOverridden: boolean;
     /** The agent's own model label — what runs when no override is in force. */
     agentModelLabel: string | null;
-    /** The agent currently holding `chat.default_new_chat` — shown as "Custom". */
+    /** The Matrx Chat agent (`chat.cx_default`) — shown as "Custom Agent". */
     customAgentId: string | null;
     isCustom: boolean;
     preset: ComposerPreset | null;

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

@@ -52,7 +52,7 @@ function useComposerAgent(conversationId) {
   const effectiveModelLabel = useModelRecords((state) => selectModelLabelWithClass(state, effectiveModelId, effectivePin)) ?? null;
   const agentOwnModelId = useAgentOwnModelId(conversationId);
   const agentModelLabel = useModelRecords((state) => selectModelLabelWithClass(state, agentOwnModelId, agentOwnPin)) ?? null;
-  const { mandate: customMandate } = useMandate(MANDATE_KEYS.chat__default_new_chat, { optional: true });
+  const { mandate: customMandate } = useMandate(MANDATE_KEYS.chat__cx_default, { optional: true });
   const customAgentId = customMandate?.agentId ?? null;
   const rows = useAgentCatalogRows();
   const presetRows = rows.filter(isPresetRow);

package/dist/agents/components/messages-display/user/UserActionBar.js

@@ -15,7 +15,7 @@ import {
 import {
   TapTargetButtonForGroup,
   TapTargetButtonGroup
-} from "@ai-matrx/tap-target";
+} from "@ai-matrx/design-system/tap-target";
 import { SpeakerButton } from "../../../../host/ui-slots.js";
 import { CopySplitButton } from "@ai-matrx/rich-content/copy/CopySplitButton";
 import { copyRichContent } from "@ai-matrx/rich-content/copy/copy-commands";

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

@@ -3,7 +3,7 @@ import { AgentModeController } from "../shared/AgentModeController.js";
 import { AgentSaveStatus, AgentOptionsMenu } from "../../../host/ui-slots.js";
 import { ReviewAnswersLink } from "../../../host/ui-slots.js";
 import { AgentSelectorIsland } from "../shared/AgentSelectorIsland.js";
-import { ChevronLeftTapButton } from "@ai-matrx/tap-target/buttons";
+import { ChevronLeftTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { AgentNewRunButton } from "../shared/AgentNewRunButton.js";
 import { AgentHeaderMobile } from "../shared/AgentHeaderMobile.js";
 function AgentRunHeader({

package/dist/agents/components/run/run-sidebar/SidebarHeader.js

@@ -4,7 +4,7 @@ import { AgentSelectorIsland } from "../../shared/AgentSelectorIsland.js";
 import {
   PanelLeftTapButton,
   ChevronLeftTapButton
-} from "@ai-matrx/tap-target/buttons";
+} from "@ai-matrx/design-system/tap-target/buttons";
 import { PowerTapButton } from "@ai-matrx/icons/tap-buttons";
 import { SearchGroup, SearchGroupTrigger } from "../../../../host/ui-slots.js";
 import { AgentNewRunButton } from "../../shared/AgentNewRunButton.js";

package/dist/agents/components/run-controls/RunModelPicker.d.ts

@@ -4,9 +4,13 @@
  * ModelListDropdown as `/agents/[id]/build`; only the write target differs.
  * agent default pinned first; reset icon appears only when overridden.
  */
-export declare function QuickRunModelSelect({ conversationId, className, }: {
+export declare function QuickRunModelSelect({ conversationId, className, presentation, onChosen, }: {
     conversationId: string;
     className?: string;
+    /** `inline`: the picker body fills its parent (a menu's panel or page). */
+    presentation?: "picker" | "inline";
+    /** A model was picked (an inline host closes its panel). */
+    onChosen?: () => void;
 }): import("react").JSX.Element;
 export declare function RunModelPicker({ conversationId }: {
     conversationId: string;

package/dist/agents/components/run-controls/RunModelPicker.js

@@ -50,7 +50,9 @@ function useModelOverride(conversationId) {
 }
 function QuickRunModelSelect({
   conversationId,
-  className
+  className,
+  presentation = "picker",
+  onChosen
 }) {
   const isManualMode = useAppSelector(
     selectIsManualExecutionMode(conversationId)
@@ -69,6 +71,26 @@ function QuickRunModelSelect({
     handleReset
   } = useModelOverride(conversationId);
   const displayModelId = isManualMode ? agentModelId ?? effectiveModel ?? baseModel ?? null : effectiveModel ?? baseModel ?? null;
+  if (presentation === "inline") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 min-w-0 flex-col", className), children: [
+      isOverridden && !isManualMode ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 justify-end border-b border-border p-1", children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(RotateCcw, {}), onClick: handleReset, children: "Agent's own model" }) }) : null,
+      /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx(
+        ModelListDropdown,
+        {
+          presentation: "inline",
+          value: displayModelId,
+          onValueChange: (modelId) => {
+            handleChange(modelId);
+            onChosen?.();
+          },
+          pinnedOfferingId,
+          onOfferingPinChange: handleOfferingPinChange,
+          inputModalities: [],
+          outputModalities: ["text"]
+        }
+      ) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 items-center gap-1", className), children: [
     /* @__PURE__ */ jsx(
       ModelListDropdown,

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

@@ -33,7 +33,8 @@ import {
 } from "./transcript-audience.js";
 import { cn } from "@ai-matrx/design-system";
 import {
-  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS
+  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS,
+  WIDE_FIGURE_SCOPE_ATTRIBUTE
 } from "./assistant-message-layout.js";
 import {
   TranscriptLayoutProvider,
@@ -246,6 +247,7 @@ function AgentConversationColumn({
             {
               ref: scrollRef,
               onScroll: handleScroll,
+              ...edgeScroll && resolvedLayout.width === "reading" && resolvedLayout.align === "center" ? { [WIDE_FIGURE_SCOPE_ATTRIBUTE]: "" } : {},
               className: cn(
                 // A SIZE container: what renders inside (the empty-state hero)
                 // answers the pane's real height — a 438px split pane beside

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

@@ -5,7 +5,7 @@ import { AgentSaveStatus, AgentOptionsMenu } from "../../../host/ui-slots.js";
 import { AgentReferenceCopyButton } from "./AgentReferenceCopyButton.js";
 import { AgentHeaderMobile } from "./AgentHeaderMobile.js";
 import { ReviewAnswersLink } from "../../../host/ui-slots.js";
-import { ChevronLeftTapButton } from "@ai-matrx/tap-target/buttons";
+import { ChevronLeftTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 function AgentHeader({
   agentId,
   agentName,

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

@@ -8,7 +8,7 @@ import { selectAgentIsDirty } from "../../redux/agent-definition/selectors.js";
 import {
   TapTargetButtonForGroup,
   TapTargetButtonGroup
-} from "@ai-matrx/tap-target";
+} from "@ai-matrx/design-system/tap-target";
 import { AgentListDropdown } from "@ai-matrx/agents/catalog/react";
 import {
   AlertDialog,

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

@@ -4,7 +4,7 @@ import { useCallback } from "react";
 import { useRouter, usePathname, useSearchParams } from "../../../host/navigation.js";
 import { useAppDispatch, useAppSelector } from "../../../store/hooks.js";
 import { startNewConversation } from "../../redux/execution-system/thunks/create-instance.thunk.js";
-import { PlusTapButton } from "@ai-matrx/tap-target/buttons";
+import { PlusTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 import { selectFocusedConversation } from "../../redux/execution-system/conversation-focus/conversation-focus.selectors.js";
 import { pushAddressWithoutNavigating } from "@ai-matrx/rich-content/utils/addressWithoutNavigating";
 function AgentNewRunButton({ surfaceKey }) {

package/dist/agents/components/shared/assistant-message-layout.d.ts

@@ -6,3 +6,24 @@
 export declare const ASSISTANT_MESSAGE_COLUMN_CLASS = "mx-auto w-full max-w-3xl";
 /** Chat's exact horizontal inset inside the canonical reading column. */
 export declare const ASSISTANT_MESSAGE_COLUMN_INSET_CLASS = "px-2";
+/**
+ * WIDE FIGURES — a figure (a rendered web page, a wide visual) is not prose.
+ * A transcript that opts in carries `WIDE_FIGURE_SCOPE_ATTRIBUTE` on its scroll
+ * area, which is a CSS size container; inside it an element with
+ * `WIDE_FIGURE_CLASS` breaks out of the reading column to the transcript's own
+ * width (`100cqi`), minus a 1rem gutter each side, centered on the column, and
+ * capped at `WIDE_FIGURE_MAX_WIDTH_PX`.
+ *
+ * 1100px: wide enough that the common 960–1080px layouts AI-written pages use
+ * (a 960px `main` plus its padding) render at full size; no wider, so a large
+ * monitor never stretches a figure into empty bands. `max(100%, …)` means a
+ * transcript no wider than the column (phones, split panes) leaves the figure
+ * exactly column-wide. Outside an opted-in transcript (notes, rich-document
+ * surfaces, a `width: "fill"` host, a start-aligned column) it does nothing.
+ *
+ * Classes are literal strings so the host's Tailwind scan of this package
+ * finds them; keep 1100px in sync with WIDE_FIGURE_MAX_WIDTH_PX.
+ */
+export declare const WIDE_FIGURE_MAX_WIDTH_PX = 1100;
+export declare const WIDE_FIGURE_SCOPE_ATTRIBUTE = "data-wide-figures";
+export declare const WIDE_FIGURE_CLASS = "[[data-wide-figures]_&]:w-[max(100%,min(1100px,100cqi_-_2rem))] [[data-wide-figures]_&]:ml-[calc((100%_-_max(100%,min(1100px,100cqi_-_2rem)))/2)]";

package/dist/agents/components/shared/assistant-message-layout.js

@@ -1,6 +1,12 @@
 const ASSISTANT_MESSAGE_COLUMN_CLASS = "mx-auto w-full max-w-3xl";
 const ASSISTANT_MESSAGE_COLUMN_INSET_CLASS = "px-2";
+const WIDE_FIGURE_MAX_WIDTH_PX = 1100;
+const WIDE_FIGURE_SCOPE_ATTRIBUTE = "data-wide-figures";
+const WIDE_FIGURE_CLASS = "[[data-wide-figures]_&]:w-[max(100%,min(1100px,100cqi_-_2rem))] [[data-wide-figures]_&]:ml-[calc((100%_-_max(100%,min(1100px,100cqi_-_2rem)))/2)]";
 export {
   ASSISTANT_MESSAGE_COLUMN_CLASS,
-  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS
+  ASSISTANT_MESSAGE_COLUMN_INSET_CLASS,
+  WIDE_FIGURE_CLASS,
+  WIDE_FIGURE_MAX_WIDTH_PX,
+  WIDE_FIGURE_SCOPE_ATTRIBUTE
 };

package/dist/agents/components/working-document/WorkingDocumentVersionHistory.js

@@ -15,7 +15,7 @@ import { useWorkingDocumentVersions } from "./useWorkingDocumentVersions.js";
 import { useWorkingDocument } from "../../hooks/useWorkingDocument.js";
 import { setWorkingDocMainView } from "./workingDocumentViewStore.js";
 import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
-import { ChevronLeftTapButton, ChevronRightTapButton } from "@ai-matrx/tap-target/buttons";
+import { ChevronLeftTapButton, ChevronRightTapButton } from "@ai-matrx/design-system/tap-target/buttons";
 function formatWhen(iso) {
   if (!iso) return "Now";
   try {