@ai-matrx/chat 0.7.18 → 0.7.20

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @ai-matrx/chat
 
+## 0.7.20
+
+Automatic changed-only republish (docs/metadata drift since the last tag — see
+`git diff npm/chat/v0.7.19..npm/chat/v0.7.20 -- apps/shared/chat`).
+No source changes intended and no consumer action required.
+
 ## 0.7.18
 
 Automatic changed-only republish (docs/metadata drift since the last tag — see
@@ -8,6 +14,17 @@ No source changes intended and no consumer action required.
 
 ## 0.7.17
 ### Unreleased
+### the chat sidebar loads a short list of names, only when seen; a draft reads nothing
+
+- `ConversationHistorySidebar` reads only once on screen (`useInView`); new prop `nameRowsOnly` (slim
+  `CONVERSATION_NAME_ROW_COLUMNS` read; `ChatHistorySidebar` uses it with 20 rows). Source facets load on
+  engagement (filter open, search, "Hide"). `useNextNavigation().Link` defaults `prefetch={false}`.
+- New `selectIsDraftConversation`; draft conversations skip agent-lists, document/scratchpad restores,
+  remark restore and the materialized probe (now shared per conversation). Active scratchpad reads when the
+  conversation's scratch gate is on. Desktop-presence warm waits for page idle. New `useComputeBinding`
+  (bound box without the targets list) — at-rest chips no longer request `/api/compute-targets`.
+- **Consumer action:** none. A host Link that should prefetch passes `prefetch` explicitly.
+
 ### a turn carries what the person attached (lane A1, Applet builder)
 
 - **`runHeadlessAgentJson({ resources })`** and **`continueAgentJson({ resources })`**: the person's "+" picks (`Resource[]`) go

package/dist/agents/components/chat/ChatHistorySidebar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { ConversationHistorySidebar } from "../conversation-history/ConversationHistorySidebar.js";
+const CHAT_HISTORY_PAGE_SIZE = 20;
 function ChatHistorySidebar({
   scopeId,
   activeConversationId,
@@ -30,6 +31,8 @@ function ChatHistorySidebar({
       autoFocusSearch,
       hideSearchAffordance,
       serverSearch: true,
+      pageSize: CHAT_HISTORY_PAGE_SIZE,
+      nameRowsOnly: true,
       className
     }
   );

package/dist/agents/components/chat/ChatSidebarMenu.js

@@ -105,6 +105,7 @@ function ChatSidebarMenu({ expanded }) {
             Link,
             {
               href: CHAT_HOME_HREF,
+              prefetch: false,
               title: "Chat",
               "aria-label": "Chat",
               "aria-current": isChatHome ? "page" : void 0,
@@ -249,6 +250,7 @@ function ChatSidebarMenu({ expanded }) {
             Link,
             {
               href: MESSAGE_TEMPLATES_HREF,
+              prefetch: false,
               title: "Message templates",
               "aria-label": "Message templates",
               "aria-current": isMessageTemplatesRoute ? "page" : void 0,
@@ -272,6 +274,7 @@ function ChatSidebarMenu({ expanded }) {
             Link,
             {
               href: VOICE_AGENT_HREF,
+              prefetch: false,
               title: "Voice agent",
               "aria-label": "Voice agent",
               "aria-current": isVoiceRoute ? "page" : void 0,

package/dist/agents/components/chat/PinnedAgentsSection.d.ts

@@ -14,11 +14,9 @@ interface PinnedAgentsSectionProps {
  * with the rest of the app, and shares the agent registry with the dropdown
  * (no parallel fetches).
  *
- * We intentionally do NOT trigger an agent-list fetch from this component:
- * if the registry hasn't been populated yet (user hasn't opened the picker),
- * we render nothing rather than pulling every agent down just to filter to
- * favorites. The list populates as soon as the user opens the dropdown — same
- * lazy behavior as everywhere else.
+ * The catalogue is asked for after the page is idle (see the effect below),
+ * so the section is absent at first paint and appears once the list lands —
+ * or sooner, when the person opens any agent picker.
  */
 export declare function PinnedAgentsSection({ activeAgentId, }: PinnedAgentsSectionProps): import("react").JSX.Element | null;
 export {};

package/dist/agents/components/chat/PinnedAgentsSection.js

@@ -3,7 +3,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { useRouter, Link } from "../../../host/navigation.js";
 import { cn } from "@ai-matrx/design-system";
-import { useAppDispatch } from "../../../store/hooks.js";
 import {
   FavoriteAgentButton,
   useAgentCatalogRows,
@@ -14,6 +13,7 @@ import { useAppStore } from "../../../store/hooks.js";
 import { stageChatAgentSwitch } from "./begin-fresh-chat.js";
 import { Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
 import { ensureAgentCatalog } from "../../identity/agent-identity.js";
+import { whenPageIdle } from "@ai-matrx/kit/idle-scheduler";
 const CONSUMER_ID = "chat-sidebar-pinned";
 const PINNED_COLLAPSED_LIMIT = 5;
 const selectPinnedAgents = makeSelectFilteredAgents();
@@ -23,13 +23,16 @@ function pinnedAgentHref(agentId) {
 function PinnedAgentsSection({
   activeAgentId
 }) {
-  const dispatch = useAppDispatch();
   const router = useRouter();
   const store = useAppStore();
   const consumer = useAgentConsumer(CONSUMER_ID);
   useEffect(() => {
-    void ensureAgentCatalog();
-  }, [dispatch]);
+    const controller = new AbortController();
+    void whenPageIdle(controller.signal).then((idle) => {
+      if (idle) void ensureAgentCatalog();
+    });
+    return () => controller.abort();
+  }, []);
   useEffect(() => {
     if (consumer.favFilter !== "yes") consumer.setFavFilter("yes");
   }, [consumer]);

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

@@ -16,9 +16,14 @@
  *   apps) or `"consumer"` (the comfortable /chat look). Both share ONE data
  *   controller, so they never drift.
  *
- * Self-contained data-loading: the component triggers the initial fetch on
- * mount (and whenever `agentIds` or the resolved source filter changes) via
- * `fetchConversationHistory`. Consumers don't need to prewire a thunk.
+ * Self-contained data-loading: the component triggers the initial fetch once
+ * the list is ON SCREEN (and again whenever `agentIds` or the resolved source
+ * filter changes) via `fetchConversationHistory`. A list mounted in a collapsed
+ * rail, a closed drawer, a hidden desktop sidebar on a phone or an inactive tab
+ * reads nothing until it can be seen (`useInView`); until then, and while the
+ * first page loads, it shows its loading row — never a blank. The source facets
+ * (filter tree, lane counts, "Hide <source>") load when the person engages
+ * them: opening the filter, searching, or choosing "Hide" in a row menu.
  */
 import React from "react";
 import { type HistoryGrouping } from "../../redux/conversation-history/types.js";
@@ -61,6 +66,12 @@ export interface ConversationHistorySidebarProps {
     defaultGrouping?: HistoryGrouping;
     /** Page size passed to the fetch thunk. Default: 30. */
     pageSize?: number;
+    /**
+     * Read only what a row shows (name, time, provenance for its menu) — no
+     * description, message count or model. For a list whose rows show nothing
+     * else (the /chat sidebar). Default false.
+     */
+    nameRowsOnly?: boolean;
     /**
      * Legacy DENY-list on `source_feature` (server-side `.neq`). Prefer
      * `surfaceId` (ALLOW-list) for new surfaces. Both AND together if set.

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

@@ -8,6 +8,7 @@ import {
   useState
 } from "react";
 import { formatRelativeTime } from "@ai-matrx/kit/format";
+import { useInView } from "@ai-matrx/kit/hooks";
 import {
   Cpu,
   CalendarDays,
@@ -78,6 +79,7 @@ function useConversationHistoryController(props) {
     surfaceId,
     defaultGrouping = "date",
     pageSize = 30,
+    nameRowsOnly = false,
     excludeSourceFeatures,
     isFavorite,
     onToggleFavorite,
@@ -89,6 +91,7 @@ function useConversationHistoryController(props) {
   } = props;
   const dispatch = useAppDispatch();
   const readFor = useRef(null);
+  const [rootRef, inView] = useInView();
   const selectScope = useMemo(
     () => makeSelectConversationHistoryScope(scopeId),
     [scopeId]
@@ -154,16 +157,18 @@ function useConversationHistoryController(props) {
         })
       );
     }
+    if (!inView) return;
     const fetchArgs = {
       scopeId,
       agentIds: agentIds.slice(),
       pageSize,
+      nameRowsOnly,
       replace: true
     };
     if (excludeSourceFeatures !== void 0) {
       fetchArgs.excludeSourceFeatures = excludeSourceFeatures;
     }
-    const readKey = [scopeId, agentIdsKey, pageSize, excludeKey, resolvedKey, lanesKey, onlyKey].join("|");
+    const readKey = [scopeId, agentIdsKey, pageSize, nameRowsOnly, excludeKey, resolvedKey, lanesKey, onlyKey].join("|");
     if (keepLoaded) {
       if (readFor.current === readKey) return;
       const fresh = dispatch((_d, getState) => {
@@ -187,7 +192,9 @@ function useConversationHistoryController(props) {
     lanesKey,
     surfaceId,
     keepLoaded,
-    onlyKey
+    onlyKey,
+    inView,
+    nameRowsOnly
   ]);
   const onSearchChange = useCallback(
     (value) => {
@@ -207,7 +214,7 @@ function useConversationHistoryController(props) {
   }, [dispatch, scopeId, hasMore, status]);
   const onRefresh = () => {
     void dispatch(fetchConversationHistory({ scopeId, replace: true }));
-    if (surfaceId) {
+    if (surfaceId && facetsStatus !== "idle") {
       void dispatch(fetchSourceFacets({ force: true }));
     }
   };
@@ -248,9 +255,10 @@ function useConversationHistoryController(props) {
     (conv) => getConversationHref ? getConversationHref(conv) : `/chat/${conv.conversationId}`,
     [getConversationHref]
   );
+  const searching = serverSearch && searchTerm.trim() !== "";
   useEffect(() => {
-    if (surfaceId) void dispatch(fetchSourceFacets(void 0));
-  }, [dispatch, surfaceId]);
+    if (searching) void dispatch(fetchSourceFacets(void 0));
+  }, [dispatch, searching]);
   const commitSourceFilter = useCallback(
     (features, includeEmpty) => {
       dispatch(
@@ -276,18 +284,6 @@ function useConversationHistoryController(props) {
       }
       const featureKey = sourceKey(conv.sourceFeature);
       const isEmpty = featureKey === EMPTY_SOURCE_KEY;
-      const selected = new Set(scope.includeSourceFeatures);
-      if (scope.includeSourceApps.length > 0) {
-        const apps = new Set(scope.includeSourceApps);
-        for (const f of facets) {
-          if (apps.has(sourceKey(f.sourceApp))) {
-            selected.add(sourceKey(f.sourceFeature));
-          }
-        }
-      }
-      selected.delete(EMPTY_SOURCE_KEY);
-      let includeEmpty = scope.includeEmptySource;
-      const unfiltered = selected.size === 0 && !includeEmpty;
       return {
         app: conv.sourceApp,
         feature: conv.sourceFeature,
@@ -300,27 +296,49 @@ function useConversationHistoryController(props) {
           toast.success(`Showing only ${featureLabel(featureKey)}`);
         },
         onHide: () => {
-          let next;
-          if (unfiltered) {
-            next = /* @__PURE__ */ new Set();
-            let hasEmpty = false;
-            for (const f of facets) {
-              const k = sourceKey(f.sourceFeature);
-              if (k === EMPTY_SOURCE_KEY) hasEmpty = true;
-              else next.add(k);
+          void (async () => {
+            const read = await dispatch(fetchSourceFacets(void 0));
+            const known = fetchSourceFacets.fulfilled.match(read) ? read.payload : [];
+            if (known.length === 0) {
+              toast.error(
+                `Couldn't hide ${featureLabel(featureKey)}: your sources didn't load. Try again.`
+              );
+              return;
             }
-            includeEmpty = hasEmpty;
-          } else {
-            next = selected;
-          }
-          if (isEmpty) includeEmpty = false;
-          else next.delete(featureKey);
-          commitSourceFilter(next, includeEmpty);
-          toast.success(`Hiding ${featureLabel(featureKey)} here`);
+            const selected = new Set(scope.includeSourceFeatures);
+            if (scope.includeSourceApps.length > 0) {
+              const apps = new Set(scope.includeSourceApps);
+              for (const f of known) {
+                if (apps.has(sourceKey(f.sourceApp))) {
+                  selected.add(sourceKey(f.sourceFeature));
+                }
+              }
+            }
+            selected.delete(EMPTY_SOURCE_KEY);
+            let includeEmpty = scope.includeEmptySource;
+            const unfiltered = selected.size === 0 && !includeEmpty;
+            let next;
+            if (unfiltered) {
+              next = /* @__PURE__ */ new Set();
+              let hasEmpty = false;
+              for (const f of known) {
+                const k = sourceKey(f.sourceFeature);
+                if (k === EMPTY_SOURCE_KEY) hasEmpty = true;
+                else next.add(k);
+              }
+              includeEmpty = hasEmpty;
+            } else {
+              next = selected;
+            }
+            if (isEmpty) includeEmpty = false;
+            else next.delete(featureKey);
+            commitSourceFilter(next, includeEmpty);
+            toast.success(`Hiding ${featureLabel(featureKey)} here`);
+          })();
         }
       };
     },
-    [surfaceId, scope, facets, commitSourceFilter]
+    [dispatch, surfaceId, scope, commitSourceFilter]
   );
   const getSourceMenuCtx = useCallback(
     (conv) => {
@@ -337,6 +355,7 @@ function useConversationHistoryController(props) {
     [getSourceMenuBase, removeFromList]
   );
   return {
+    rootRef,
     scope,
     byDate,
     byAgent,
@@ -414,7 +433,7 @@ const DenseView = ({
   ) : cachedSearchItems;
   const empty = !allLanesOff && status !== "loading" && status !== "idle" && !error && count === 0 && !searchTerm.trim() && emptyState;
   const showControls = showSearch || showGroupingToggle || !!headerActions || !!surfaceId;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full min-h-0 flex-col", className), children: [
+  return /* @__PURE__ */ jsxs("div", { ref: ctl.rootRef, className: cn("flex h-full min-h-0 flex-col", className), children: [
     headerSlot,
     topSlot,
     showControls && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1", children: [
@@ -477,7 +496,7 @@ const DenseView = ({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", children: [
       error && /* @__PURE__ */ jsx(ReadFailure, { error, what: "your conversations", onRetry: onRefresh, className: "m-2" }),
-      status === "loading" && count === 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-[11px] text-muted-foreground", children: [
+      (status === "loading" || status === "idle") && count === 0 && !allLanesOff && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-[11px] text-muted-foreground", children: [
         /* @__PURE__ */ jsx(Loader2, { size: 12, className: "animate-spin" }),
         "Loading conversations\u2026"
       ] }),
@@ -680,6 +699,7 @@ const ConsumerView = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: ctl.rootRef,
       className: cn(
         "matrx-touch-targets flex h-full min-h-0 flex-col bg-card",
         className
@@ -736,7 +756,7 @@ const ConsumerView = ({
         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" }),
-          status === "loading" && count === 0 && !searchActive && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-xs text-muted-foreground", children: [
+          (status === "loading" || status === "idle") && count === 0 && !searchActive && !allLanesOff && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-3 text-xs text-muted-foreground", children: [
             /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
             "Loading conversations\u2026"
           ] }),

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

@@ -212,8 +212,8 @@ const ConversationSourceFilterTree = ({
   const facetsStatus = useAppSelector(selectSourceFacetsStatus);
   const facetsError = useAppSelector(selectSourceFacetsError);
   useEffect(() => {
-    void dispatch(fetchSourceFacets(void 0));
-  }, [dispatch]);
+    if (open) void dispatch(fetchSourceFacets(void 0));
+  }, [dispatch, open]);
   const includeLanes = scope.includeLanes;
   const visibleFacets = useMemo(
     () => includeLanes === null ? facets : facets.filter((f) => f.lane !== null && includeLanes.includes(f.lane)),
@@ -459,7 +459,7 @@ const ConversationSourceFilterTree = ({
             }) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "max-h-[min(60dvh,420px)] overflow-y-auto py-1", children: [
-            facetsStatus === "loading" && tree.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-[11px] text-muted-foreground", children: "Loading sources\u2026" }),
+            (facetsStatus === "loading" || facetsStatus === "idle") && tree.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-3 py-3 text-[11px] text-muted-foreground", children: "Loading sources\u2026" }),
             facetsStatus === "failed" && tree.length === 0 && /* @__PURE__ */ jsx(
               ReadFailure,
               {

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

@@ -32,7 +32,11 @@ import {
   surfaceLevelPlace
 } from "../../../redux/execution-system/context-rules/context-hierarchy.js";
 import { resolveClientSurface } from "../../../redux/execution-system/utils/build-tool-injection.js";
-import { resolveMandateKillSwitch } from "../../../redux/execution-system/context-rules/mandate-kill-switch.js";
+import {
+  peekMandateKillSwitch,
+  resolveMandateKillSwitch
+} from "../../../redux/execution-system/context-rules/mandate-kill-switch.js";
+import { whenPageIdle } from "@ai-matrx/kit/idle-scheduler";
 import { useMachineFramesVisible } from "../../shared/transcript-audience.js";
 import { useChatCanvasTab } from "../../../../host/canvas.js";
 import { CONVERSATION_CONTEXT_KIND } from "../../../../host/canvas-tabs.js";
@@ -53,10 +57,11 @@ function valueGroupName(surfaceName) {
   return /^(page\s+)?context(\s+items?)?$/i.test(label) ? "" : label;
 }
 function useMandateKillSwitch(mandateKey) {
-  const [state, setState] = useState({
-    key: null,
-    on: false
-  });
+  const known = peekMandateKillSwitch(mandateKey);
+  const [state, setState] = useState(() => ({
+    key: known === void 0 ? null : mandateKey ?? null,
+    on: known === true
+  }));
   useEffect(() => {
     if (!mandateKey) return void 0;
     let live = true;
@@ -142,10 +147,16 @@ function ConversationContextChip({
   const saveMany = useSaveContextRules();
   const hierarchy = useConversationContextHierarchy(conversationId);
   useEffect(() => {
-    void dispatch(ensureSurfaceFeatureLoaded(CONTEXT_RULES_FEATURE));
+    const idle = new AbortController();
+    void whenPageIdle(idle.signal).then((ready) => {
+      if (ready) void dispatch(ensureSurfaceFeatureLoaded(CONTEXT_RULES_FEATURE));
+    });
     const onFocus = () => void dispatch(reloadContextRules());
     window.addEventListener("focus", onFocus);
-    return () => window.removeEventListener("focus", onFocus);
+    return () => {
+      idle.abort();
+      window.removeEventListener("focus", onFocus);
+    };
   }, [dispatch]);
   const mandateKey = useAppSelector(
     (state) => state.conversations.byConversationId[conversationId]?.mandateKey ?? null

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

@@ -91,6 +91,7 @@ import { useConversationAbilities } from "../../../redux/execution-system/host-c
 import { ComposerAttachmentSourceChips } from "../../../../host/composer-extensions.js";
 import { ConversationCompanionPills } from "./ConversationCompanionPills.js";
 import { RailPill } from "./rail-pill.js";
+import { selectIsDraftConversation } from "../../../redux/execution-system/conversations/conversations.selectors.js";
 function entryHasValue(e) {
   const v = e.value;
   if (v === void 0 || v === null) return false;
@@ -160,14 +161,15 @@ function ConversationContextRailBody({
   const hasLists = useAppSelector(selectHasAgentListsContent(conversationId));
   const taskCounts = useAppSelector(selectAgentTaskCounts(conversationId));
   const todoCounts = useAppSelector(selectUserTodoCounts(conversationId));
+  const isDraft = useAppSelector(selectIsDraftConversation(conversationId));
   useEffect(() => {
-    if (!conversationId) return void 0;
+    if (!conversationId || isDraft) return void 0;
     void dispatch(ensureAgentLists(conversationId));
     dispatch(subscribeAgentLists(conversationId));
     return () => {
       dispatch(unsubscribeAgentLists(conversationId));
     };
-  }, [conversationId, dispatch]);
+  }, [conversationId, isDraft, dispatch]);
   const agentContextPolicies = useAppSelector(
     (state) => agentId ? selectAgentContextPolicies(state, agentId) : void 0
   );

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

@@ -9,6 +9,7 @@ import {
 import {
   computeTargetIconColor,
   computeTargetKindLabel,
+  useComputeBinding,
   useComputeTargetActions
 } from "./use-compute-target-actions.js";
 import { describeBoundTargetState } from "../../../../compute/targets.js";
@@ -22,6 +23,11 @@ function TargetIcon({
 function DesktopPresenceIndicator({
   conversationId
 }) {
+  const { boundView, sandboxBlocked } = useComputeBinding(conversationId);
+  if (sandboxBlocked || !boundView) return null;
+  return /* @__PURE__ */ jsx(BoundTargetButton, { conversationId });
+}
+function BoundTargetButton({ conversationId }) {
   const {
     loading,
     boundView,

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

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useState } from "react";
+import { useContext, useEffect, 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";
@@ -29,7 +29,9 @@ import { ComposerOutputPanel } from "./ComposerOutput.js";
 import { ComposerEffortRows, useComposerEffort } from "./ComposerEffortPill.js";
 import { composerShows } from "./composer-mode-visibility.js";
 import { composerPillClass } from "./composer-chip.js";
-import { useComposerAgent, useEffectiveModelId } from "./useComposerAgent.js";
+import { useComposerAgent, useComposerPresets, useEffectiveModelId } from "./useComposerAgent.js";
+import { getModelRecords } from "../../../../identity/model-catalog.js";
+import { chatHostHasDatabase } from "../../../../../host/configure.js";
 import { useComposerAgentFilter } from "./useComposerAgentFilter.js";
 import { ComposerAgentPeek } from "./ComposerAgentPeek.js";
 const AGENT_PICKER_PANEL = "w-[680px] h-[min(528px,80dvh)] p-0";
@@ -37,14 +39,22 @@ const MODEL_PICKER_PANEL = "w-[min(1060px,calc(100vw-24px))] h-[min(640px,80dvh)
 const CUSTOM_AGENT_LABEL = "Custom Agent";
 function pillLabel(info, mode) {
   if (!composerShows(mode, "agent.presets")) return info.agentName ?? "Agent";
-  const name = info.isCustom ? CUSTOM_AGENT_LABEL : info.preset?.name ?? info.agentName ?? "Agent";
+  const name = info.isCustom ? CUSTOM_AGENT_LABEL : 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 [open, setOpenState] = useState(false);
+  const [engaged, setEngaged] = useState(false);
+  const setOpen = (next) => {
+    setOpenState(next);
+    if (next) setEngaged(true);
+  };
+  useEffect(() => {
+    if (engaged && chatHostHasDatabase()) void getModelRecords().loadOptions();
+  }, [engaged]);
   const isMobile = useIsMobile();
   const effort = useComposerEffort(conversationId, useEffectiveModelId(conversationId));
-  const info = useComposerAgent(conversationId);
+  const info = useComposerAgent(conversationId, { engaged });
   const label = pillLabel(info, mode);
   const onSelectAgent = agentControl?.onSelectAgent;
   const agentFilter = useComposerAgentFilter(conversationId);
@@ -78,7 +88,10 @@ function ComposerAgentPill({ conversationId, mode, size, agentControl, menuSide,
         activeAgentId: info.agentId,
         agentFilter,
         contentSide: menuSide,
-        triggerSlot: pill
+        triggerSlot: pill,
+        onOpenChange: (next) => {
+          if (next) setEngaged(true);
+        }
       }
     );
   }
@@ -145,6 +158,7 @@ function ChatAgentMenu({
   const agentFilter = useComposerAgentFilter(conversationId);
   const onSelectAgent = agentControl?.onSelectAgent;
   const agentLabel = info.isCustom ? CUSTOM_AGENT_LABEL : info.agentName ?? "Agent";
+  const { presets } = useComposerPresets(info.agentId);
   const chooseCustom = () => {
     if (!info.customAgentId || !onSelectAgent) return;
     close();
@@ -183,7 +197,7 @@ function ChatAgentMenu({
     onSelectAgent ? /* @__PURE__ */ jsxs(Fragment, { children: [
       inSheet ? null : /* @__PURE__ */ jsx(ComposerMenuDivider, {}),
       /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Choose your chat agent" }),
-      info.presets.map((preset) => /* @__PURE__ */ jsx(
+      presets.map((preset) => /* @__PURE__ */ jsx(
         ComposerMenuRow,
         {
           icon: Star,

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

@@ -8,7 +8,7 @@ import { useOpenRunControlsWindow } from "../../../../../host/window-openers.js"
 import { useOpenCloudBrowserCanvas } from "../../../../../host/ui-slots.js";
 import { ChatConnectionsStrip } from "../ChatConnectionsStrip.js";
 import { ComposerConnectPromo } from "./ComposerConnectPromo.js";
-import { useComputeTargetActions } from "../use-compute-target-actions.js";
+import { useComputeBinding } from "../use-compute-target-actions.js";
 import { ComposerEnvironmentPanel } from "./ComposerPlusMenu.js";
 import { COMPOSER_ROW_CLASS } from "./composer-chip.js";
 import { ComposerChip } from "../ComposerChip.js";
@@ -26,10 +26,10 @@ function ComposerChipsRowBody({
   chipShape = "md"
 }) {
   const [envOpen, setEnvOpen] = useState(false);
-  const compute = useComputeTargetActions(conversationId);
+  const compute = useComputeBinding(conversationId);
   const openRunControlsWindow = useOpenRunControlsWindow();
   const openCloudBrowser = useOpenCloudBrowserCanvas();
-  const boundName = compute.boundView?.target?.name ?? null;
+  const boundName = compute.boundView?.name ?? null;
   const EnvIcon = boundName ? Server : Cloud;
   return /* @__PURE__ */ jsxs(
     "div",

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

@@ -32,6 +32,7 @@ import { selectBuilderAdvancedSettings } from "../../../../redux/execution-syste
 import { setBuilderAdvancedSettings } from "../../../../redux/execution-system/instance-ui-state/instance-ui-state.slice.js";
 import { DEFAULT_BUILDER_ADVANCED_SETTINGS } from "../../../../types/instance.types.js";
 import { useSkills } from "../../../../identity/skill-catalog.js";
+import { whenPageIdle } from "@ai-matrx/kit/idle-scheduler";
 import { useClippedContentGuard } from "../../../../../host/ui-slots.js";
 import { ComposerMenuDivider, ComposerMenuHelp, ComposerMenuLabel, ComposerMenuRow } from "./ComposerMenu.js";
 import {
@@ -67,7 +68,7 @@ const TYPE_ICONS = {
 const kindLabel = (kind) => knownShapeLabel(kind) ?? (humanizeIdentifier(kind) || kind);
 const LOCKED_REASON = "This agent always answers in its own shape";
 const pickWarning = (lockedShapes) => lockedPickWarning(lockedShapes, kindLabel);
-function useLockState(conversationId) {
+function useLockState(conversationId, engaged) {
   const agentId = useAppSelector(
     (state) => state.conversations.byConversationId[conversationId]?.agentId ?? null
   );
@@ -80,30 +81,36 @@ function useLockState(conversationId) {
       if (!cancelled) setRead({ agentId, result });
     };
     const fail = (error) => settle({ status: "failed", error, retry: () => setAttempt((n) => n + 1) });
-    fetchAgentOutputSchemas([agentId]).then((byId) => {
-      const verdict = classifyLockRead(byId, agentId);
-      if (verdict.status === "failed") {
-        fail(new Error("The agent's output schema could not be read."));
-        return;
-      }
-      settle(verdict);
-    }, fail);
+    const controller = new AbortController();
+    const ready = engaged ? Promise.resolve(true) : whenPageIdle(controller.signal);
+    void ready.then((idle) => {
+      if (!idle || cancelled) return;
+      fetchAgentOutputSchemas([agentId]).then((byId) => {
+        const verdict = classifyLockRead(byId, agentId);
+        if (verdict.status === "failed") {
+          fail(new Error("The agent's output schema could not be read."));
+          return;
+        }
+        settle(verdict);
+      }, fail);
+    });
     return () => {
       cancelled = true;
+      controller.abort();
     };
-  }, [agentId, attempt]);
+  }, [agentId, attempt, engaged]);
   if (!agentId) return { status: "none" };
   return read && read.agentId === agentId ? read.result : { status: "reading" };
 }
-function useComposerOutput(conversationId) {
+function useComposerOutput(conversationId, engaged) {
   const dispatch = useAppDispatch();
-  const { skills } = useSkills();
   const settings = useAppSelector(selectBuilderAdvancedSettings(conversationId)) ?? DEFAULT_BUILDER_ADVANCED_SETTINGS;
   const types = readOutputTypes(settings.outputTypes);
   const outputKinds = settings.outputKinds ?? [];
   const addedSkills = settings.addedSkills ?? [];
+  const { skills } = useSkills({ skipAutoFetch: !engaged && addedSkills.length === 0 });
   const kinds = selectedOutputKinds(outputKinds, addedSkills, skills);
-  const lock = useLockState(conversationId);
+  const lock = useLockState(conversationId, engaged);
   const migrator = useRef(null);
   useEffect(() => {
     migrator.current ??= createKindSkillMigrator();
@@ -314,7 +321,7 @@ function ShapePicker({
   ] });
 }
 function ComposerOutputPanel({ conversationId }) {
-  const output = useComposerOutput(conversationId);
+  const output = useComposerOutput(conversationId, true);
   return /* @__PURE__ */ jsxs("div", { className: "@container flex min-h-0 flex-1 flex-col", children: [
     /* @__PURE__ */ jsx(ComposerMenuLabel, { children: "Output types" }),
     /* @__PURE__ */ jsx(TypeGrid, { types: output.types, onToggle: output.toggleType }),
@@ -334,7 +341,7 @@ function ComposerOutputPill({
 }) {
   const [open, setOpen] = useState(false);
   const [roomierSide, setRoomierSide] = useState(null);
-  const output = useComposerOutput(conversationId);
+  const output = useComposerOutput(conversationId, false);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
     /* @__PURE__ */ jsxs(SplitButton, { className: "min-w-0", children: [
       /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(