@xpert-ai/chatkit-ui 0.4.5 → 0.4.6

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/chat.tsx
-import * as React50 from "react";
+import * as React51 from "react";
 import {
   ArrowDown as ArrowDown2,
   ChevronDown as ChevronDown5,
@@ -14,7 +14,7 @@ import {
   Settings as Settings2,
   Target as Target2,
   Trash2 as Trash23,
-  X as X6
+  X as X7
 } from "lucide-react";
 
 // src/lib/utils.ts
@@ -723,6 +723,9 @@ function ParentMessengerProvider({
   const onSetComposerValueHandlersRef = useRef(
     /* @__PURE__ */ new Set()
   );
+  const onSetRuntimeCapabilitiesHandlersRef = useRef(
+    /* @__PURE__ */ new Set()
+  );
   const onFocusComposerHandlersRef = useRef(/* @__PURE__ */ new Set());
   const latestOptionsRef = useRef(null);
   const isParentAvailable = useMemo(() => {
@@ -755,6 +758,15 @@ function ParentMessengerProvider({
     },
     []
   );
+  const registerOnSetRuntimeCapabilities = useCallback(
+    (handler) => {
+      onSetRuntimeCapabilitiesHandlersRef.current.add(handler);
+      return () => {
+        onSetRuntimeCapabilitiesHandlersRef.current.delete(handler);
+      };
+    },
+    []
+  );
   const registerOnFocusComposer = useCallback(
     (handler) => {
       onFocusComposerHandlersRef.current.add(handler);
@@ -879,6 +891,23 @@ function ParentMessengerProvider({
         });
         return;
       }
+      if (payload.type === "command" && payload.command === "onSetRuntimeCapabilities") {
+        const selection = isRuntimeCapabilitiesSelection(payload.data) ? payload.data : null;
+        void Promise.all(
+          [...onSetRuntimeCapabilitiesHandlersRef.current].map(
+            (handler2) => Promise.resolve(handler2(selection))
+          )
+        ).then(() => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, { ok: true });
+          }
+        }).catch((error) => {
+          if (payload.nonce) {
+            sendResponse(payload.nonce, void 0, error);
+          }
+        });
+        return;
+      }
       if (payload.type === "command" && payload.command === "onSetOptions") {
         latestOptionsRef.current = payload.data ?? null;
         if (onSetOptionsHandlersRef.current.size > 0) {
@@ -1000,6 +1029,7 @@ function ParentMessengerProvider({
       registerOnSetOptions,
       registerOnSetPetEnabled,
       registerOnSetComposerValue,
+      registerOnSetRuntimeCapabilities,
       registerOnFocusComposer
     }),
     [
@@ -1009,6 +1039,7 @@ function ParentMessengerProvider({
       registerOnSetOptions,
       registerOnSetPetEnabled,
       registerOnSetComposerValue,
+      registerOnSetRuntimeCapabilities,
       registerOnFocusComposer
     ]
   );
@@ -1020,6 +1051,7 @@ function useParentMessenger({
   onSetOptions,
   onSetPetEnabled,
   onSetComposerValue,
+  onSetRuntimeCapabilities,
   onFocusComposer
 } = {}) {
   const context = useContext(ParentMessengerContext);
@@ -1032,12 +1064,14 @@ function useParentMessenger({
     registerOnSetOptions,
     registerOnSetPetEnabled,
     registerOnSetComposerValue,
+    registerOnSetRuntimeCapabilities,
     registerOnFocusComposer,
     ...messenger
   } = context;
   const onSetOptionsRef = useRef2(onSetOptions);
   const onSetPetEnabledRef = useRef2(onSetPetEnabled);
   const onSetComposerValueRef = useRef2(onSetComposerValue);
+  const onSetRuntimeCapabilitiesRef = useRef2(onSetRuntimeCapabilities);
   const onFocusComposerRef = useRef2(onFocusComposer);
   useEffect2(() => {
     onSetOptionsRef.current = onSetOptions;
@@ -1048,12 +1082,16 @@ function useParentMessenger({
   useEffect2(() => {
     onSetComposerValueRef.current = onSetComposerValue;
   }, [onSetComposerValue]);
+  useEffect2(() => {
+    onSetRuntimeCapabilitiesRef.current = onSetRuntimeCapabilities;
+  }, [onSetRuntimeCapabilities]);
   useEffect2(() => {
     onFocusComposerRef.current = onFocusComposer;
   }, [onFocusComposer]);
   const hasOnSetOptions = Boolean(onSetOptions);
   const hasOnSetPetEnabled = Boolean(onSetPetEnabled);
   const hasOnSetComposerValue = Boolean(onSetComposerValue);
+  const hasOnSetRuntimeCapabilities = Boolean(onSetRuntimeCapabilities);
   const hasOnFocusComposer = Boolean(onFocusComposer);
   useEffect2(() => {
     if (!hasOnSetOptions) return;
@@ -1076,6 +1114,13 @@ function useParentMessenger({
     };
     return registerOnSetComposerValue(handler);
   }, [hasOnSetComposerValue, registerOnSetComposerValue]);
+  useEffect2(() => {
+    if (!hasOnSetRuntimeCapabilities) return;
+    const handler = (selection) => {
+      onSetRuntimeCapabilitiesRef.current?.(selection);
+    };
+    return registerOnSetRuntimeCapabilities(handler);
+  }, [hasOnSetRuntimeCapabilities, registerOnSetRuntimeCapabilities]);
   useEffect2(() => {
     if (!hasOnFocusComposer) return;
     const handler = () => {
@@ -15466,225 +15511,839 @@ function findDomPointForComposerOffset(root, offset) {
   return result ?? { node: lastNode, offset: lastOffset };
 }
 
-// src/lib/message-navigation.ts
-var MESSAGE_NAVIGATION_MIN_ITEMS = 3;
-var MAX_PREVIEW_LENGTH = 180;
-var MAX_TAG_LENGTH = 40;
-function isRecord6(value) {
-  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
-function readString4(value) {
-  return typeof value === "string" && value.trim() ? value.trim() : null;
-}
-function normalizeWhitespace(value) {
-  return value.replace(/\s+/g, " ").trim();
-}
-function truncate(value, maxLength) {
-  const normalized = normalizeWhitespace(value);
-  if (normalized.length <= maxLength) return normalized;
-  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trimEnd()}...`;
-}
-function pushText(draft, value) {
-  const text = readString4(value);
-  if (text) draft.text.push(text);
-}
-function pushTag(draft, value) {
-  const tag = readString4(value);
-  if (!tag) return;
-  const normalized = truncate(tag, MAX_TAG_LENGTH);
-  if (!draft.tags.includes(normalized)) {
-    draft.tags.push(normalized);
-  }
-}
-function mergeTags(...tagGroups) {
-  const tags = [];
-  for (const group of tagGroups) {
-    for (const tag of group) {
-      if (!tags.includes(tag)) tags.push(tag);
-    }
-  }
-  return tags;
-}
-function getMessageNavigationItemId(message, index) {
-  const messageId = readString4(message.id);
-  if (messageId) return messageId;
-  const type = readString4(message.type) ?? "message";
-  return `${type}-${index}`;
-}
-function getMessageNavigationRole(type) {
-  const normalized = readString4(type)?.toLowerCase();
-  if (normalized === "human" || normalized === "user") return "user";
-  if (normalized === "ai" || normalized === "assistant") return "assistant";
-  if (normalized === "system") return "system";
-  if (normalized === "tool") return "tool";
-  if (normalized === "event") return "event";
-  return "message";
-}
-function isTextContent4(content) {
-  return content.type === "text";
-}
-function isReasoningContent4(content) {
-  return content.type === "reasoning";
-}
-function isComponentContent4(content) {
-  return content.type === "component";
-}
-function isMemoryContent2(content) {
-  return content.type === "memory";
-}
-function isWidgetComponent3(content) {
-  const data = content.data;
-  return data?.type === "Widget" && Array.isArray(data.widgets);
-}
-function isMcpAppComponent2(content) {
-  const data = content.data;
-  return data?.type === "McpApp" && typeof data.appInstanceId === "string";
-}
-function collectWidgetContent(draft, content, labels) {
-  const names = content.data.widgets.map((widget) => readString4(widget.name)).filter((name) => Boolean(name));
-  if (names.length === 0) {
-    pushTag(draft, labels.widget);
-    return;
-  }
-  for (const name of names) {
-    pushTag(draft, name);
+// src/components/chat/runtime-capabilities.tsx
+import * as React50 from "react";
+import { X as X6 } from "lucide-react";
+import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+function getHttpStatus(error) {
+  if (!error || typeof error !== "object" || !("status" in error)) {
+    return null;
   }
+  const status = error.status;
+  return typeof status === "number" ? status : null;
 }
-function collectMcpAppContent(draft, content, labels, language) {
-  const title = readString4(resolveLocalizedText(content.data.title, language)) ?? readString4(content.data.toolName) ?? labels.mcpApp;
-  pushTag(draft, title);
-  pushText(draft, resolveLocalizedText(content.data.description, language));
-}
-function collectComponentContent(draft, content, labels, language, options) {
-  if (isWidgetComponent3(content)) {
-    collectWidgetContent(draft, content, labels);
-    return;
-  }
-  if (isMcpAppComponent2(content)) {
-    collectMcpAppContent(draft, content, labels, language);
+function warnMissingRuntimeCapabilityReferences(action, missing) {
+  if (!hasMissingRuntimeCapabilityReferences(missing)) {
     return;
   }
-  const data = getToolStepData(content);
-  pushTag(
-    draft,
-    resolveLocalizedText(data.message, language) ?? getToolActivityLabel(content, language)
+  console.warn(
+    `[Chat] Runtime capabilities ${action} include unavailable references:`,
+    missing
   );
-  if (options.includeComponentText !== false) {
-    pushText(draft, resolveLocalizedText(data.message, language));
-    pushText(draft, resolveLocalizedText(data.title, language));
-    pushText(draft, resolveLocalizedText(data.tool, language));
-    pushText(draft, resolveLocalizedText(data.type, language));
-  }
 }
-function collectContentItem(draft, item, labels, language, options) {
-  if (item === void 0 || isThreadContextUsageRenderArtifact(item)) return;
-  if (typeof item === "string") {
-    pushText(draft, item);
-    return;
-  }
-  if (isTextContent4(item) || isReasoningContent4(item)) {
-    pushText(draft, item.text);
-    if (isReasoningContent4(item)) pushTag(draft, labels.reasoning);
-    return;
-  }
-  if (item.type === "image_url") {
-    pushTag(draft, labels.image);
-    return;
-  }
-  if (isComponentContent4(item)) {
-    collectComponentContent(draft, item, labels, language, options);
-    return;
-  }
-  if (isMemoryContent2(item)) {
-    pushTag(draft, labels.memory);
+function getRuntimeCapabilityPaletteEmptyLabelKey(palette, runtimeCapabilitiesReady) {
+  if (!palette.capabilityTypes || palette.capabilityTypes.length !== 1) {
+    return "composer.capabilities.emptySearch";
   }
-}
-function collectContent(draft, content, labels, language, options = {}) {
-  if (typeof content === "string") {
-    pushText(draft, content);
-    return;
+  if (!runtimeCapabilitiesReady) {
+    return "composer.slashCommands.empty.loadingCapabilities";
   }
-  if (!Array.isArray(content)) {
-    return;
+  const hasQuery = palette.query.trim().length > 0;
+  const capabilityType = palette.capabilityTypes[0];
+  if (capabilityType === "skill") {
+    return hasQuery ? "composer.slashCommands.empty.matchingSkills" : "composer.slashCommands.empty.skills";
   }
-  for (const item of content) {
-    collectContentItem(
-      draft,
-      item,
-      labels,
-      language,
-      options
-    );
+  if (capabilityType === "plugin") {
+    return hasQuery ? "composer.slashCommands.empty.matchingPlugins" : "composer.slashCommands.empty.plugins";
   }
+  return hasQuery ? "composer.slashCommands.empty.matchingSubAgents" : "composer.slashCommands.empty.subAgents";
 }
-function collectReasoning(draft, reasoning, labels) {
-  if (!Array.isArray(reasoning)) return;
-  for (const item of reasoning) {
-    if (!isRecord6(item)) continue;
-    pushText(draft, item.text);
-    if (readString4(item.text)) pushTag(draft, labels.reasoning);
+function getRuntimeCapabilityOptionsForSelection(selection, options) {
+  if (!selection) {
+    return [];
   }
+  return options.filter(
+    (option) => isRuntimeCapabilitySelected(selection, option.type, option.id)
+  );
 }
-function collectFiles(draft, value, fallbackLabel) {
-  if (!Array.isArray(value)) return;
-  for (const file of value) {
-    if (!isRecord6(file)) continue;
-    pushTag(
-      draft,
-      file.originalName ?? file.name ?? file.fileName ?? file.id ?? fallbackLabel
+function removeComposerCapabilityPartsFromSelection(selection, removedCapabilities) {
+  let nextSelection = selection;
+  for (const part of removedCapabilities) {
+    nextSelection = toggleRuntimeCapabilitySelection(
+      nextSelection,
+      part.capability.type,
+      part.capability.id,
+      false
     );
   }
+  return nextSelection;
 }
-function collectReferences(draft, value) {
-  for (const reference of normalizeReferences(value)) {
-    pushTag(draft, getReferenceLabel(reference));
-  }
-}
-function collectRuntimeCapabilities(draft, value) {
-  if (!Array.isArray(value)) return;
-  for (const option of value) {
-    if (!isRecord6(option)) continue;
-    pushTag(draft, option.label ?? option.id ?? option.type);
-  }
-}
-function getTitle(role, labels, assistantTitle) {
-  if (role === "assistant" && assistantTitle?.trim()) {
-    return assistantTitle.trim();
-  }
-  return labels[role];
+function getRemovedComposerCapabilityParts(previousParts, nextParts) {
+  const nextKeys = getComposerCapabilityKeys(nextParts);
+  return previousParts.filter(
+    (part) => part.type === "capability" && !nextKeys.has(part.key)
+  );
 }
-function buildMessageNavigationItemSummary(message, index, options, collectOptions = {}) {
-  const role = getMessageNavigationRole(message.type);
-  const draft = {
-    text: [],
-    tags: []
-  };
-  const language = options.language ?? "en-US";
-  const labels = options.labels;
-  if (role === "user") {
-    pushText(draft, message.submittedInput);
-  }
-  collectContent(draft, message.content, labels, language, collectOptions);
-  collectReasoning(draft, message.reasoning, labels);
-  collectFiles(draft, message.fileAssets, labels.attachment);
-  collectFiles(draft, message.attachments, labels.attachment);
-  collectReferences(draft, message.references);
-  collectRuntimeCapabilities(draft, message.runtimeCapabilityOptions);
-  const text = draft.text.map(normalizeWhitespace).filter(Boolean).join(" ");
-  const preview = truncate(text, MAX_PREVIEW_LENGTH) || draft.tags.slice(0, 2).join(" \xB7 ");
-  if (!preview && draft.tags.length === 0) {
-    return null;
-  }
-  const messageId = readString4(message.id) ?? void 0;
-  return {
-    id: getMessageNavigationItemId(message, index),
-    ...messageId ? { messageId } : {},
-    index,
-    role,
-    title: getTitle(role, labels, options.assistantTitle),
-    preview,
-    tags: draft.tags
-  };
+function useRuntimeCapabilitiesState({
+  client,
+  assistantId,
+  threadId,
+  disabled,
+  composerParts
+}) {
+  const [runtimeCapabilities, setRuntimeCapabilities] = React50.useState(null);
+  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React50.useState(false);
+  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React50.useState(
+    () => createEmptyRuntimeCapabilitiesSelection()
+  );
+  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React50.useState(
+    () => createEmptyRuntimeCapabilitiesSelection()
+  );
+  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React50.useState(null);
+  const runtimeCapabilityPreferenceLoadRef = React50.useRef(0);
+  const pendingExternalRuntimeCapabilitiesRef = React50.useRef(null);
+  const runtimeCapabilityOptions = React50.useMemo(
+    () => getRuntimeCapabilityOptions(runtimeCapabilities),
+    [runtimeCapabilities]
+  );
+  const effectiveSessionRuntimeCapabilities = React50.useMemo(
+    () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
+      runtimeCapabilities,
+      sessionRuntimeCapabilities
+    ) : null,
+    [runtimeCapabilities, runtimeCapabilitiesReady, sessionRuntimeCapabilities]
+  );
+  const runRuntimeCapabilityOptions = React50.useMemo(
+    () => runtimeCapabilityOptions.filter(
+      (option) => isRuntimeCapabilitySelected(
+        runRuntimeCapabilities,
+        option.type,
+        option.id
+      )
+    ),
+    [runRuntimeCapabilities, runtimeCapabilityOptions]
+  );
+  const composerRuntimeCapabilitySelectionKeys = React50.useMemo(
+    () => getComposerCapabilitySelectionKeys(composerParts),
+    [composerParts]
+  );
+  const detachedRunRuntimeCapabilityOptions = React50.useMemo(
+    () => runRuntimeCapabilityOptions.filter(
+      (option) => !composerRuntimeCapabilitySelectionKeys.has(
+        getRuntimeCapabilityOptionKey(option)
+      )
+    ),
+    [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
+  );
+  const persistSessionRuntimeCapabilities = React50.useCallback(
+    async (nextThreadId, selection) => {
+      if (!runtimeCapabilities || !selection || !client) {
+        return;
+      }
+      try {
+        const result = await persistConversationRuntimeCapabilities({
+          client,
+          threadId: nextThreadId,
+          capabilities: runtimeCapabilities,
+          selection
+        });
+        warnMissingRuntimeCapabilityReferences(
+          "persisted selection",
+          result.missing
+        );
+      } catch (error) {
+        console.warn(
+          "[Chat] Failed to persist runtime capabilities selection:",
+          error
+        );
+      }
+    },
+    [client, runtimeCapabilities]
+  );
+  const applyExternalRuntimeCapabilities = React50.useCallback(
+    (selection) => {
+      pendingExternalRuntimeCapabilitiesRef.current = selection;
+      setRunRuntimeCapabilities(() => {
+        const emptySelection = createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
+        if (!selection) {
+          return emptySelection;
+        }
+        if (!runtimeCapabilities) {
+          return selection;
+        }
+        pendingExternalRuntimeCapabilitiesRef.current = null;
+        return mergeRuntimeCapabilitiesSelections(
+          runtimeCapabilities,
+          emptySelection,
+          selection
+        );
+      });
+    },
+    [runtimeCapabilities]
+  );
+  const handleSessionRuntimeCapabilityToggle = React50.useCallback(
+    (type, id, selected) => {
+      setSessionRuntimeCapabilities((previous) => {
+        const nextSelection = toggleRuntimeCapabilitySelection(
+          previous,
+          type,
+          id,
+          selected
+        );
+        const normalizedThreadId = threadId?.trim();
+        if (normalizedThreadId) {
+          void persistSessionRuntimeCapabilities(
+            normalizedThreadId,
+            nextSelection
+          );
+        }
+        return nextSelection;
+      });
+    },
+    [persistSessionRuntimeCapabilities, threadId]
+  );
+  const addRunRuntimeCapabilities = React50.useCallback(
+    (selection) => {
+      setRunRuntimeCapabilities(
+        (previous) => runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
+          runtimeCapabilities,
+          previous,
+          selection
+        ) : previous
+      );
+    },
+    [runtimeCapabilities]
+  );
+  const resetRunRuntimeCapabilities = React50.useCallback(() => {
+    setRunRuntimeCapabilities(
+      createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
+    );
+    setRuntimeCapabilityPalette(null);
+  }, [runtimeCapabilities]);
+  const getRuntimeCapabilitiesForSubmit = React50.useCallback(
+    (recommended) => {
+      const recommendedRuntimeCapabilitiesForSubmit = recommended && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
+        runtimeCapabilities,
+        runRuntimeCapabilities,
+        recommended
+      ) : runRuntimeCapabilities;
+      const runtimeCapabilitiesForSubmit = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
+        capabilities: runtimeCapabilities,
+        available: effectiveSessionRuntimeCapabilities,
+        recommended: recommendedRuntimeCapabilitiesForSubmit
+      }) : null;
+      const runtimeCapabilityOptionsForMessage = getRuntimeCapabilityOptionsForSelection(
+        getRecommendedRuntimeCapabilitiesSelection(
+          runtimeCapabilitiesForSubmit
+        ),
+        runtimeCapabilityOptions
+      );
+      return {
+        runtimeCapabilitiesForSubmit,
+        runtimeCapabilityOptionsForMessage
+      };
+    },
+    [
+      effectiveSessionRuntimeCapabilities,
+      runRuntimeCapabilities,
+      runtimeCapabilities,
+      runtimeCapabilitiesReady,
+      runtimeCapabilityOptions
+    ]
+  );
+  const getRuntimeCapabilitiesForCommand = React50.useCallback(
+    (recommended) => runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
+      capabilities: runtimeCapabilities,
+      available: effectiveSessionRuntimeCapabilities,
+      recommended
+    }) : recommended ?? null,
+    [
+      effectiveSessionRuntimeCapabilities,
+      runtimeCapabilities,
+      runtimeCapabilitiesReady
+    ]
+  );
+  React50.useEffect(() => {
+    if (disabled || !client || !assistantId) {
+      pendingExternalRuntimeCapabilitiesRef.current = null;
+      setRuntimeCapabilities(null);
+      setRuntimeCapabilitiesReady(false);
+      setSessionRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
+      setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
+      setRuntimeCapabilityPalette(null);
+      return;
+    }
+    const controller = new AbortController();
+    setRuntimeCapabilitiesReady(false);
+    setRuntimeCapabilities(null);
+    setRuntimeCapabilityPalette(null);
+    void client.assistants.getRuntimeCapabilities(assistantId, {
+      signal: controller.signal
+    }).then((payload) => {
+      setRuntimeCapabilities(payload);
+      setRuntimeCapabilitiesReady(true);
+      setSessionRuntimeCapabilities(
+        createDefaultRuntimeCapabilitiesSelection(payload)
+      );
+      setRunRuntimeCapabilities(
+        createEmptyRuntimeCapabilitiesSelection(payload)
+      );
+    }).catch((error) => {
+      if (controller.signal.aborted) {
+        return;
+      }
+      if (getHttpStatus(error) === 404) {
+        setRuntimeCapabilities(null);
+        setRuntimeCapabilitiesReady(false);
+        setSessionRuntimeCapabilities(
+          createEmptyRuntimeCapabilitiesSelection()
+        );
+        setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
+        return;
+      }
+      console.warn("[Chat] Failed to load runtime capabilities:", error);
+      setRuntimeCapabilities(null);
+      setRuntimeCapabilitiesReady(false);
+      setSessionRuntimeCapabilities(
+        createEmptyRuntimeCapabilitiesSelection()
+      );
+      setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
+    });
+    return () => controller.abort();
+  }, [assistantId, client, disabled]);
+  React50.useEffect(() => {
+    const emptyRunSelection = createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
+    const pendingExternalSelection = pendingExternalRuntimeCapabilitiesRef.current;
+    if (pendingExternalSelection && runtimeCapabilities) {
+      setRunRuntimeCapabilities(
+        mergeRuntimeCapabilitiesSelections(
+          runtimeCapabilities,
+          emptyRunSelection,
+          pendingExternalSelection
+        )
+      );
+      pendingExternalRuntimeCapabilitiesRef.current = null;
+    } else {
+      setRunRuntimeCapabilities(pendingExternalSelection ?? emptyRunSelection);
+    }
+    if (!runtimeCapabilitiesReady || !runtimeCapabilities || !client) {
+      setSessionRuntimeCapabilities(
+        createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
+      );
+      return;
+    }
+    const defaultSelection = createDefaultRuntimeCapabilitiesSelection(runtimeCapabilities);
+    const normalizedThreadId = threadId?.trim();
+    if (!normalizedThreadId) {
+      setSessionRuntimeCapabilities(defaultSelection);
+      return;
+    }
+    let cancelled = false;
+    const requestId = runtimeCapabilityPreferenceLoadRef.current + 1;
+    runtimeCapabilityPreferenceLoadRef.current = requestId;
+    setSessionRuntimeCapabilities(defaultSelection);
+    void loadConversationRuntimeCapabilities({
+      client,
+      threadId: normalizedThreadId,
+      capabilities: runtimeCapabilities
+    }).then(({ selection, missing }) => {
+      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
+        return;
+      }
+      warnMissingRuntimeCapabilityReferences("loaded selection", missing);
+      setSessionRuntimeCapabilities(selection ?? defaultSelection);
+    }).catch((error) => {
+      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
+        return;
+      }
+      console.warn(
+        "[Chat] Failed to load persisted runtime capabilities selection:",
+        error
+      );
+      setSessionRuntimeCapabilities(defaultSelection);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    client,
+    runtimeCapabilities,
+    runtimeCapabilitiesReady,
+    threadId
+  ]);
+  return {
+    runtimeCapabilities,
+    runtimeCapabilitiesReady,
+    runtimeCapabilityOptions,
+    effectiveSessionRuntimeCapabilities,
+    runRuntimeCapabilities,
+    runRuntimeCapabilityOptions,
+    detachedRunRuntimeCapabilityOptions,
+    runtimeCapabilityPalette,
+    setRunRuntimeCapabilities,
+    setRuntimeCapabilityPalette,
+    applyExternalRuntimeCapabilities,
+    handleSessionRuntimeCapabilityToggle,
+    addRunRuntimeCapabilities,
+    resetRunRuntimeCapabilities,
+    getRuntimeCapabilitiesForSubmit,
+    getRuntimeCapabilitiesForCommand,
+    persistSessionRuntimeCapabilities
+  };
+}
+function useRuntimeCapabilityComposerActions({
+  runtimeCapabilities,
+  runtimeCapabilitiesReady,
+  runtimeCapabilityOptions,
+  setRunRuntimeCapabilities,
+  setRuntimeCapabilityPalette,
+  applyExternalRuntimeCapabilities,
+  composerInputRef,
+  composerPartsRef,
+  commitComposerParts,
+  focusComposerAt
+}) {
+  const pendingExternalRuntimeCapabilityInsertRef = React50.useRef(null);
+  const insertExternalRuntimeCapabilities = React50.useCallback(
+    (selection) => {
+      applyExternalRuntimeCapabilities(selection);
+      if (!selection) {
+        pendingExternalRuntimeCapabilityInsertRef.current = null;
+        return;
+      }
+      if (!runtimeCapabilitiesReady || !runtimeCapabilities) {
+        pendingExternalRuntimeCapabilityInsertRef.current = selection;
+        return;
+      }
+      pendingExternalRuntimeCapabilityInsertRef.current = null;
+      const existingKeys = getComposerCapabilitySelectionKeys(
+        composerPartsRef.current
+      );
+      const selectedOptions = runtimeCapabilityOptions.filter(
+        (option) => isRuntimeCapabilitySelected(selection, option.type, option.id) && !existingKeys.has(getRuntimeCapabilityOptionKey(option))
+      );
+      if (selectedOptions.length === 0) {
+        focusComposerAt();
+        return;
+      }
+      const currentParts = composerPartsRef.current;
+      const insertAt = getComposerEditingLength(currentParts);
+      const nextParts = replaceComposerRange(
+        currentParts,
+        insertAt,
+        insertAt,
+        selectedOptions.map(
+          (option) => createComposerCapabilityPart(option, createMessageId())
+        )
+      );
+      const nextCaretOffset = insertAt + selectedOptions.length;
+      commitComposerParts(nextParts, {
+        caretOffset: nextCaretOffset,
+        resetDom: true,
+        syncRemovedCapabilityTokens: true
+      });
+      setRuntimeCapabilityPalette(null);
+      focusComposerAt(nextCaretOffset);
+    },
+    [
+      applyExternalRuntimeCapabilities,
+      commitComposerParts,
+      composerPartsRef,
+      focusComposerAt,
+      runtimeCapabilities,
+      runtimeCapabilitiesReady,
+      runtimeCapabilityOptions,
+      setRuntimeCapabilityPalette
+    ]
+  );
+  const applyComposerValueRuntimeCapabilities = React50.useCallback(
+    (payload) => {
+      const runtimeCapabilitiesPayload = isRuntimeCapabilitiesSelection(payload.runtimeCapabilities) ? payload.runtimeCapabilities : payload.runtimeCapabilities === null ? null : void 0;
+      if (runtimeCapabilitiesPayload === void 0) {
+        return;
+      }
+      if (payload.insertRuntimeCapabilities === true) {
+        insertExternalRuntimeCapabilities(runtimeCapabilitiesPayload);
+      } else {
+        applyExternalRuntimeCapabilities(runtimeCapabilitiesPayload);
+      }
+    },
+    [applyExternalRuntimeCapabilities, insertExternalRuntimeCapabilities]
+  );
+  const updateRuntimeCapabilityPalette = React50.useCallback(
+    (parts, selectionStart) => {
+      const input = composerInputRef.current;
+      const editingText = getComposerEditingText(parts);
+      const nextPalette = resolveRuntimeCapabilityPalette(
+        editingText,
+        typeof selectionStart === "number" ? selectionStart : input ? getComposerSelectionOffset(input) : getComposerEditingLength(parts)
+      );
+      setRuntimeCapabilityPalette(nextPalette);
+    },
+    [composerInputRef, setRuntimeCapabilityPalette]
+  );
+  const removeRunRuntimeCapability = React50.useCallback(
+    (option) => {
+      setRunRuntimeCapabilities(
+        (previous) => toggleRuntimeCapabilitySelection(
+          previous,
+          option.type,
+          option.id,
+          false
+        )
+      );
+      commitComposerParts(
+        removeComposerCapabilityTokens(composerPartsRef.current, option),
+        {
+          resetDom: true,
+          syncRemovedCapabilityTokens: false
+        }
+      );
+    },
+    [commitComposerParts, composerPartsRef, setRunRuntimeCapabilities]
+  );
+  const insertComposerCapabilityToken = React50.useCallback(
+    (capability, range) => {
+      const token = createComposerCapabilityPart(capability, createMessageId());
+      const currentParts = composerPartsRef.current;
+      const replaceRange = range ?? {
+        start: getComposerEditingLength(currentParts),
+        end: getComposerEditingLength(currentParts)
+      };
+      const nextParts = replaceComposerRange(
+        currentParts,
+        replaceRange.start,
+        replaceRange.end,
+        [token]
+      );
+      commitComposerParts(nextParts, {
+        caretOffset: replaceRange.start + 1,
+        resetDom: true,
+        syncRemovedCapabilityTokens: true
+      });
+      setRunRuntimeCapabilities(
+        (previous) => toggleRuntimeCapabilitySelection(
+          previous,
+          capability.type,
+          capability.id,
+          true
+        )
+      );
+      setRuntimeCapabilityPalette(null);
+      focusComposerAt(replaceRange.start + 1);
+    },
+    [
+      commitComposerParts,
+      composerPartsRef,
+      focusComposerAt,
+      setRunRuntimeCapabilities,
+      setRuntimeCapabilityPalette
+    ]
+  );
+  React50.useEffect(() => {
+    if (!runtimeCapabilitiesReady || !runtimeCapabilities) {
+      return;
+    }
+    const pendingSelection = pendingExternalRuntimeCapabilityInsertRef.current;
+    if (!pendingSelection) {
+      return;
+    }
+    insertExternalRuntimeCapabilities(pendingSelection);
+  }, [
+    insertExternalRuntimeCapabilities,
+    runtimeCapabilities,
+    runtimeCapabilitiesReady
+  ]);
+  return {
+    applyComposerValueRuntimeCapabilities,
+    insertExternalRuntimeCapabilities,
+    updateRuntimeCapabilityPalette,
+    removeRunRuntimeCapability,
+    insertComposerCapabilityToken
+  };
+}
+function HumanRuntimeCapabilityChips({
+  options
+}) {
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx55("div", { className: "mb-2 flex flex-wrap gap-1.5", children: options.map((option) => /* @__PURE__ */ jsxs38(
+    "span",
+    {
+      className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
+      children: [
+        /* @__PURE__ */ jsx55(RuntimeCapabilityIcon, { option, variant: "chip" }),
+        /* @__PURE__ */ jsx55("span", { className: "max-w-[9rem] truncate", children: option.label })
+      ]
+    },
+    `${option.type}:${option.id}`
+  )) });
+}
+function DetachedRunRuntimeCapabilities({
+  options,
+  runOnlyLabel,
+  removeLabel,
+  onRemove
+}) {
+  if (options.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs38("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx55("span", { className: "text-xs text-muted-foreground", children: runOnlyLabel }),
+    options.map((option) => /* @__PURE__ */ jsxs38(
+      "span",
+      {
+        className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
+        children: [
+          /* @__PURE__ */ jsx55(RuntimeCapabilityIcon, { option, variant: "chip" }),
+          /* @__PURE__ */ jsx55("span", { className: "max-w-40 truncate", children: option.label }),
+          /* @__PURE__ */ jsx55(
+            "button",
+            {
+              type: "button",
+              onClick: () => onRemove(option),
+              className: "rounded-full p-0.5 hover:bg-primary/15",
+              title: removeLabel,
+              "aria-label": removeLabel,
+              children: /* @__PURE__ */ jsx55(X6, { size: 11 })
+            }
+          )
+        ]
+      },
+      `${option.type}:${option.id}`
+    ))
+  ] });
+}
+function ComposerCapabilityToken({
+  part
+}) {
+  return /* @__PURE__ */ jsxs38(
+    "span",
+    {
+      "data-composer-capability-key": part.key,
+      "data-capability-type": part.capability.type,
+      "data-capability-id": part.capability.id,
+      contentEditable: false,
+      className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
+      children: [
+        /* @__PURE__ */ jsx55(RuntimeCapabilityIcon, { option: part.capability, variant: "chip" }),
+        /* @__PURE__ */ jsx55("span", { className: "truncate", children: part.capability.label })
+      ]
+    },
+    part.key
+  );
+}
+
+// src/lib/message-navigation.ts
+var MESSAGE_NAVIGATION_MIN_ITEMS = 3;
+var MAX_PREVIEW_LENGTH = 180;
+var MAX_TAG_LENGTH = 40;
+function isRecord6(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readString4(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function normalizeWhitespace(value) {
+  return value.replace(/\s+/g, " ").trim();
+}
+function truncate(value, maxLength) {
+  const normalized = normalizeWhitespace(value);
+  if (normalized.length <= maxLength) return normalized;
+  return `${normalized.slice(0, Math.max(0, maxLength - 1)).trimEnd()}...`;
+}
+function pushText(draft, value) {
+  const text = readString4(value);
+  if (text) draft.text.push(text);
+}
+function pushTag(draft, value) {
+  const tag = readString4(value);
+  if (!tag) return;
+  const normalized = truncate(tag, MAX_TAG_LENGTH);
+  if (!draft.tags.includes(normalized)) {
+    draft.tags.push(normalized);
+  }
+}
+function mergeTags(...tagGroups) {
+  const tags = [];
+  for (const group of tagGroups) {
+    for (const tag of group) {
+      if (!tags.includes(tag)) tags.push(tag);
+    }
+  }
+  return tags;
+}
+function getMessageNavigationItemId(message, index) {
+  const messageId = readString4(message.id);
+  if (messageId) return messageId;
+  const type = readString4(message.type) ?? "message";
+  return `${type}-${index}`;
+}
+function getMessageNavigationRole(type) {
+  const normalized = readString4(type)?.toLowerCase();
+  if (normalized === "human" || normalized === "user") return "user";
+  if (normalized === "ai" || normalized === "assistant") return "assistant";
+  if (normalized === "system") return "system";
+  if (normalized === "tool") return "tool";
+  if (normalized === "event") return "event";
+  return "message";
+}
+function isTextContent4(content) {
+  return content.type === "text";
+}
+function isReasoningContent4(content) {
+  return content.type === "reasoning";
+}
+function isComponentContent4(content) {
+  return content.type === "component";
+}
+function isMemoryContent2(content) {
+  return content.type === "memory";
+}
+function isWidgetComponent3(content) {
+  const data = content.data;
+  return data?.type === "Widget" && Array.isArray(data.widgets);
+}
+function isMcpAppComponent2(content) {
+  const data = content.data;
+  return data?.type === "McpApp" && typeof data.appInstanceId === "string";
+}
+function collectWidgetContent(draft, content, labels) {
+  const names = content.data.widgets.map((widget) => readString4(widget.name)).filter((name) => Boolean(name));
+  if (names.length === 0) {
+    pushTag(draft, labels.widget);
+    return;
+  }
+  for (const name of names) {
+    pushTag(draft, name);
+  }
+}
+function collectMcpAppContent(draft, content, labels, language) {
+  const title = readString4(resolveLocalizedText(content.data.title, language)) ?? readString4(content.data.toolName) ?? labels.mcpApp;
+  pushTag(draft, title);
+  pushText(draft, resolveLocalizedText(content.data.description, language));
+}
+function collectComponentContent(draft, content, labels, language, options) {
+  if (isWidgetComponent3(content)) {
+    collectWidgetContent(draft, content, labels);
+    return;
+  }
+  if (isMcpAppComponent2(content)) {
+    collectMcpAppContent(draft, content, labels, language);
+    return;
+  }
+  const data = getToolStepData(content);
+  pushTag(
+    draft,
+    resolveLocalizedText(data.message, language) ?? getToolActivityLabel(content, language)
+  );
+  if (options.includeComponentText !== false) {
+    pushText(draft, resolveLocalizedText(data.message, language));
+    pushText(draft, resolveLocalizedText(data.title, language));
+    pushText(draft, resolveLocalizedText(data.tool, language));
+    pushText(draft, resolveLocalizedText(data.type, language));
+  }
+}
+function collectContentItem(draft, item, labels, language, options) {
+  if (item === void 0 || isThreadContextUsageRenderArtifact(item)) return;
+  if (typeof item === "string") {
+    pushText(draft, item);
+    return;
+  }
+  if (isTextContent4(item) || isReasoningContent4(item)) {
+    pushText(draft, item.text);
+    if (isReasoningContent4(item)) pushTag(draft, labels.reasoning);
+    return;
+  }
+  if (item.type === "image_url") {
+    pushTag(draft, labels.image);
+    return;
+  }
+  if (isComponentContent4(item)) {
+    collectComponentContent(draft, item, labels, language, options);
+    return;
+  }
+  if (isMemoryContent2(item)) {
+    pushTag(draft, labels.memory);
+  }
+}
+function collectContent(draft, content, labels, language, options = {}) {
+  if (typeof content === "string") {
+    pushText(draft, content);
+    return;
+  }
+  if (!Array.isArray(content)) {
+    return;
+  }
+  for (const item of content) {
+    collectContentItem(
+      draft,
+      item,
+      labels,
+      language,
+      options
+    );
+  }
+}
+function collectReasoning(draft, reasoning, labels) {
+  if (!Array.isArray(reasoning)) return;
+  for (const item of reasoning) {
+    if (!isRecord6(item)) continue;
+    pushText(draft, item.text);
+    if (readString4(item.text)) pushTag(draft, labels.reasoning);
+  }
+}
+function collectFiles(draft, value, fallbackLabel) {
+  if (!Array.isArray(value)) return;
+  for (const file of value) {
+    if (!isRecord6(file)) continue;
+    pushTag(
+      draft,
+      file.originalName ?? file.name ?? file.fileName ?? file.id ?? fallbackLabel
+    );
+  }
+}
+function collectReferences(draft, value) {
+  for (const reference of normalizeReferences(value)) {
+    pushTag(draft, getReferenceLabel(reference));
+  }
+}
+function collectRuntimeCapabilities(draft, value) {
+  if (!Array.isArray(value)) return;
+  for (const option of value) {
+    if (!isRecord6(option)) continue;
+    pushTag(draft, option.label ?? option.id ?? option.type);
+  }
+}
+function getTitle(role, labels, assistantTitle) {
+  if (role === "assistant" && assistantTitle?.trim()) {
+    return assistantTitle.trim();
+  }
+  return labels[role];
+}
+function buildMessageNavigationItemSummary(message, index, options, collectOptions = {}) {
+  const role = getMessageNavigationRole(message.type);
+  const draft = {
+    text: [],
+    tags: []
+  };
+  const language = options.language ?? "en-US";
+  const labels = options.labels;
+  if (role === "user") {
+    pushText(draft, message.submittedInput);
+  }
+  collectContent(draft, message.content, labels, language, collectOptions);
+  collectReasoning(draft, message.reasoning, labels);
+  collectFiles(draft, message.fileAssets, labels.attachment);
+  collectFiles(draft, message.attachments, labels.attachment);
+  collectReferences(draft, message.references);
+  collectRuntimeCapabilities(draft, message.runtimeCapabilityOptions);
+  const text = draft.text.map(normalizeWhitespace).filter(Boolean).join(" ");
+  const preview = truncate(text, MAX_PREVIEW_LENGTH) || draft.tags.slice(0, 2).join(" \xB7 ");
+  if (!preview && draft.tags.length === 0) {
+    return null;
+  }
+  const messageId = readString4(message.id) ?? void 0;
+  return {
+    id: getMessageNavigationItemId(message, index),
+    ...messageId ? { messageId } : {},
+    index,
+    role,
+    title: getTitle(role, labels, options.assistantTitle),
+    preview,
+    tags: draft.tags
+  };
 }
 function buildMessageNavigationItems(messages, options) {
   const items = [];
@@ -15719,7 +16378,7 @@ function buildMessageNavigationItems(messages, options) {
 }
 
 // src/components/chat.tsx
-import { Fragment as Fragment9, jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs39 } from "react/jsx-runtime";
 var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
 var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
@@ -15735,47 +16394,6 @@ function formatGoalElapsed(seconds) {
   const remainingSeconds = seconds % 60;
   return remainingSeconds ? `${minutes}m ${remainingSeconds}s` : `${minutes}m`;
 }
-function getSlashPaletteEmptyLabelKey(palette, runtimeCapabilitiesReady) {
-  if (!palette.capabilityTypes || palette.capabilityTypes.length !== 1) {
-    return "composer.capabilities.emptySearch";
-  }
-  if (!runtimeCapabilitiesReady) {
-    return "composer.slashCommands.empty.loadingCapabilities";
-  }
-  const hasQuery = palette.query.trim().length > 0;
-  const capabilityType = palette.capabilityTypes[0];
-  if (capabilityType === "skill") {
-    return hasQuery ? "composer.slashCommands.empty.matchingSkills" : "composer.slashCommands.empty.skills";
-  }
-  if (capabilityType === "plugin") {
-    return hasQuery ? "composer.slashCommands.empty.matchingPlugins" : "composer.slashCommands.empty.plugins";
-  }
-  return hasQuery ? "composer.slashCommands.empty.matchingSubAgents" : "composer.slashCommands.empty.subAgents";
-}
-function getHttpStatus(error) {
-  if (!error || typeof error !== "object" || !("status" in error)) {
-    return null;
-  }
-  const status = error.status;
-  return typeof status === "number" ? status : null;
-}
-function warnMissingRuntimeCapabilityReferences(action, missing) {
-  if (!hasMissingRuntimeCapabilityReferences(missing)) {
-    return;
-  }
-  console.warn(
-    `[Chat] Runtime capabilities ${action} include unavailable references:`,
-    missing
-  );
-}
-function getSelectedRuntimeCapabilityOptions(selection, options) {
-  if (!selection) {
-    return [];
-  }
-  return options.filter(
-    (option) => isRuntimeCapabilitySelected(selection, option.type, option.id)
-  );
-}
 async function readImageDimensions(file) {
   if (typeof window === "undefined" || typeof URL === "undefined") {
     return {};
@@ -15864,7 +16482,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? Quote : reference.type === "image" ? ImageIcon : FileText5;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: cn(
@@ -15873,7 +16491,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -15883,8 +16501,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx56(
             "div",
             {
               className: cn(
@@ -15894,7 +16512,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ jsx55(
+          metaLine && /* @__PURE__ */ jsx56(
             "div",
             {
               className: cn(
@@ -15905,7 +16523,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ jsx55(
+        onRemove && removeLabel && /* @__PURE__ */ jsx56(
           "button",
           {
             type: "button",
@@ -15916,7 +16534,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx55(X6, { size: 12 })
+            children: /* @__PURE__ */ jsx56(X7, { size: 12 })
           }
         )
       ]
@@ -15941,26 +16559,56 @@ function Chat({
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React50.useState(false);
-  const [historyError, setHistoryError] = React50.useState(null);
-  const [assistantName, setAssistantName] = React50.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React50.useState(null);
-  const [threadGoal, setThreadGoal] = React50.useState(null);
-  const [goalError, setGoalError] = React50.useState(null);
-  const [isGoalLoading, setIsGoalLoading] = React50.useState(false);
-  const [isGoalPanelOpen, setIsGoalPanelOpen] = React50.useState(false);
-  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React50.useState(false);
-  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React50.useState(null);
+  const effectiveClientSecret = stream.apiKey?.trim() ? stream.apiKey : clientSecret;
+  const missingConfigKind = getMissingApiConfigurationKind({
+    apiUrl,
+    clientSecret: effectiveClientSecret
+  });
+  const missingConfig = Boolean(missingConfigKind);
+  const missingConfigShortMessage = React51.useMemo(() => {
+    switch (missingConfigKind) {
+      case "apiUrl":
+        return t("chat.missingApiUrlShort");
+      case "clientSecret":
+        return t("chat.missingClientSecretShort");
+      case "apiUrlAndClientSecret":
+        return t("chat.missingApiUrlAndClientSecretShort");
+      default:
+        return t("chat.missingConfigShort");
+    }
+  }, [missingConfigKind, t]);
+  const missingConfigDetailMessage = React51.useMemo(() => {
+    switch (missingConfigKind) {
+      case "apiUrl":
+        return t("chat.missingApiUrlDetail");
+      case "clientSecret":
+        return t("chat.missingClientSecretDetail");
+      case "apiUrlAndClientSecret":
+        return t("chat.missingApiUrlAndClientSecretDetail");
+      default:
+        return t("chat.missingConfigDetail");
+    }
+  }, [missingConfigKind, t]);
+  const [isHistoryLoading, setIsHistoryLoading] = React51.useState(false);
+  const [historyError, setHistoryError] = React51.useState(null);
+  const [assistantName, setAssistantName] = React51.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React51.useState(null);
+  const [threadGoal, setThreadGoal] = React51.useState(null);
+  const [goalError, setGoalError] = React51.useState(null);
+  const [isGoalLoading, setIsGoalLoading] = React51.useState(false);
+  const [isGoalPanelOpen, setIsGoalPanelOpen] = React51.useState(false);
+  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React51.useState(false);
+  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React51.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React50.useState(false);
-  const [streamingNow, setStreamingNow] = React50.useState(() => Date.now());
-  const loadingStartTimeRef = React50.useRef(null);
-  const lastStreamOutputAtRef = React50.useRef(null);
-  React50.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React51.useState(false);
+  const [streamingNow, setStreamingNow] = React51.useState(() => Date.now());
+  const loadingStartTimeRef = React51.useRef(null);
+  const lastStreamOutputAtRef = React51.useRef(null);
+  React51.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -15983,7 +16631,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -15993,7 +16641,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -16002,7 +16650,7 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (threadGoal?.status === "active" && stream.isLoading) {
       setGoalElapsedStartedAt(Date.now());
       return;
@@ -16014,86 +16662,100 @@ function Chat({
     threadGoal?.id,
     threadGoal?.status
   ]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     setIsGoalObjectiveExpanded(false);
   }, [threadGoal?.id]);
-  const [composerParts, setComposerParts] = React50.useState([]);
-  const [renderedComposerParts, setRenderedComposerParts] = React50.useState([]);
-  const [composerDomVersion, setComposerDomVersion] = React50.useState(0);
-  const [selectedTool, setSelectedTool] = React50.useState(
+  const [composerParts, setComposerParts] = React51.useState([]);
+  const [renderedComposerParts, setRenderedComposerParts] = React51.useState([]);
+  const [composerDomVersion, setComposerDomVersion] = React51.useState(0);
+  const [selectedTool, setSelectedTool] = React51.useState(
     null
   );
-  const [planModeEnabled, setPlanModeEnabled] = React50.useState(false);
-  const [petSettingsOpen, setPetSettingsOpen] = React50.useState(false);
-  const [petLocalSettings, setPetLocalSettings] = React50.useState(() => readPetLocalSettings());
-  const [runtimeCapabilities, setRuntimeCapabilities] = React50.useState(null);
-  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React50.useState(false);
-  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React50.useState(
-    () => createEmptyRuntimeCapabilitiesSelection()
-  );
-  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React50.useState(
-    () => createEmptyRuntimeCapabilitiesSelection()
-  );
-  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React50.useState(null);
-  const [attachmentState, setAttachmentState] = React50.useState({
+  const [planModeEnabled, setPlanModeEnabled] = React51.useState(false);
+  const [petSettingsOpen, setPetSettingsOpen] = React51.useState(false);
+  const [petLocalSettings, setPetLocalSettings] = React51.useState(() => readPetLocalSettings());
+  const [attachmentState, setAttachmentState] = React51.useState({
     uploadedFiles: [],
     hasUploadingFiles: false,
     hasParsingFiles: false
   });
-  const [references, setReferences] = React50.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React50.useState(false);
-  const [quoteSelection, setQuoteSelection] = React50.useState(null);
-  const [isAtBottom, setIsAtBottom] = React50.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React50.useState(false);
+  const [references, setReferences] = React51.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React51.useState(false);
+  const [quoteSelection, setQuoteSelection] = React51.useState(null);
+  const [isAtBottom, setIsAtBottom] = React51.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React51.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React50.useRef(null);
-  const messageNavigationAnchorsRef = React50.useRef(
+  const viewportRef = React51.useRef(null);
+  const messageNavigationAnchorsRef = React51.useRef(
     /* @__PURE__ */ new Map()
   );
-  const attachmentsRef = React50.useRef(null);
-  const composerInputRef = React50.useRef(null);
-  const slashPaletteRef = React50.useRef(null);
-  const slashPaletteOptionRefs = React50.useRef(
+  const attachmentsRef = React51.useRef(null);
+  const composerInputRef = React51.useRef(null);
+  const slashPaletteRef = React51.useRef(null);
+  const slashPaletteOptionRefs = React51.useRef(
     []
   );
-  const composerPartsRef = React50.useRef([]);
-  const pendingComposerCaretOffsetRef = React50.useRef(null);
-  const shouldAutoScrollRef = React50.useRef(true);
-  const forceFollowRef = React50.useRef(false);
-  const previousMessageCountRef = React50.useRef(0);
-  const previousScrollTopRef = React50.useRef(0);
-  const isPrependingHistoryMessagesRef = React50.useRef(false);
-  const autoScrollFrameRef = React50.useRef(null);
-  const isPointerDownRef = React50.useRef(false);
-  const lastTouchYRef = React50.useRef(null);
-  const runtimeCapabilityPreferenceLoadRef = React50.useRef(0);
+  const composerPartsRef = React51.useRef([]);
+  const pendingComposerCaretOffsetRef = React51.useRef(null);
+  const shouldAutoScrollRef = React51.useRef(true);
+  const forceFollowRef = React51.useRef(false);
+  const previousMessageCountRef = React51.useRef(0);
+  const previousScrollTopRef = React51.useRef(0);
+  const isPrependingHistoryMessagesRef = React51.useRef(false);
+  const autoScrollFrameRef = React51.useRef(null);
+  const isPointerDownRef = React51.useRef(false);
+  const lastTouchYRef = React51.useRef(null);
+  const {
+    runtimeCapabilities,
+    runtimeCapabilitiesReady,
+    runtimeCapabilityOptions,
+    effectiveSessionRuntimeCapabilities,
+    runRuntimeCapabilities,
+    detachedRunRuntimeCapabilityOptions,
+    runtimeCapabilityPalette,
+    setRunRuntimeCapabilities,
+    setRuntimeCapabilityPalette,
+    applyExternalRuntimeCapabilities,
+    handleSessionRuntimeCapabilityToggle,
+    addRunRuntimeCapabilities,
+    resetRunRuntimeCapabilities,
+    getRuntimeCapabilitiesForSubmit,
+    getRuntimeCapabilitiesForCommand,
+    persistSessionRuntimeCapabilities
+  } = useRuntimeCapabilitiesState({
+    client: stream.client,
+    assistantId: stream.assistantId,
+    threadId: stream.threadId,
+    disabled: missingConfig || !stream.client || !stream.assistantId,
+    composerParts
+  });
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const assistantTitle = assistantName || resolvedTitle;
   const petRequired = options?.displayMode === "pet";
-  const basePetSettings = React50.useMemo(
+  const basePetSettings = React51.useMemo(
     () => derivePetLocalSettings(options?.pet),
     [options?.pet]
   );
-  const displayedPetSettings = React50.useMemo(
+  const displayedPetSettings = React51.useMemo(
     () => ({
       ...petLocalSettings ?? basePetSettings,
       ...petRequired ? { enabled: true } : {}
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React50.useMemo(() => {
+  const effectivePet = React51.useMemo(() => {
     if (petRequired || petLocalSettings) {
       return buildPetOptionsFromLocalSettings(displayedPetSettings);
     }
     return options?.pet ?? null;
   }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
-  const savePetLocalSettings = React50.useCallback(
+  const savePetLocalSettings = React51.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
       setPetLocalSettings(nextSettings);
@@ -16101,7 +16763,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React50.useCallback(
+  const handlePetCommand = React51.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -16123,11 +16785,11 @@ function Chat({
     [displayedPetSettings, effectivePet, petRequired, savePetLocalSettings]
   );
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React50.useMemo(
+  const messages = React51.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
-  const messageNavigationLabels = React50.useMemo(
+  const messageNavigationLabels = React51.useMemo(
     () => ({
       user: t("chat.youLabel"),
       assistant: assistantTitle,
@@ -16146,7 +16808,7 @@ function Chat({
     }),
     [assistantTitle, t]
   );
-  const messageNavigationItems = React50.useMemo(
+  const messageNavigationItems = React51.useMemo(
     () => messageNavigationEnabled ? buildMessageNavigationItems(
       messages,
       {
@@ -16169,7 +16831,7 @@ function Chat({
     historyMessagePagination?.isLoadingMore
   );
   const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
-  const draft = React50.useMemo(
+  const draft = React51.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
@@ -16183,7 +16845,7 @@ function Chat({
     isEmpty: isComposerInputEmpty,
     isStacked: isComposerStacked
   });
-  const pendingFollowUps = React50.useMemo(
+  const pendingFollowUps = React51.useMemo(
     () => sortVisiblePendingFollowUps(stream.pendingFollowUps ?? []),
     [stream.pendingFollowUps]
   );
@@ -16192,81 +16854,23 @@ function Chat({
   const hasPendingHITLRequest = Boolean(stream.pendingHITLRequest);
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
-  const runtimeCapabilityOptions = React50.useMemo(
-    () => getRuntimeCapabilityOptions(runtimeCapabilities),
-    [runtimeCapabilities]
-  );
-  const goalAdapter = React50.useMemo(() => {
+  const goalAdapter = React51.useMemo(() => {
     if (isGoalAdapter(options?.goal)) {
       return options.goal;
     }
     return supportsXpertThreadGoalAdapter(stream.client) ? createXpertThreadGoalAdapter(stream.client) : null;
   }, [options?.goal, stream.client]);
   const displayedGoalElapsedSeconds = threadGoal ? (threadGoal.elapsedSeconds ?? 0) + (goalElapsedStartedAt ? Math.max(0, Math.floor((streamingNow - goalElapsedStartedAt) / 1e3)) : 0) : 0;
-  const effectiveSessionRuntimeCapabilities = React50.useMemo(
-    () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
-      runtimeCapabilities,
-      sessionRuntimeCapabilities
-    ) : null,
-    [runtimeCapabilities, runtimeCapabilitiesReady, sessionRuntimeCapabilities]
-  );
   const goalCommandAvailable = hasSelectedRuntimeSlashCommand(
     runtimeCapabilities,
     effectiveSessionRuntimeCapabilities,
     "goal"
   );
   const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
-  const runRuntimeCapabilityOptions = React50.useMemo(
-    () => runtimeCapabilityOptions.filter(
-      (option) => isRuntimeCapabilitySelected(
-        runRuntimeCapabilities,
-        option.type,
-        option.id
-      )
-    ),
-    [runRuntimeCapabilities, runtimeCapabilityOptions]
-  );
-  const composerRuntimeCapabilitySelectionKeys = React50.useMemo(
-    () => getComposerCapabilitySelectionKeys(composerParts),
-    [composerParts]
-  );
-  const detachedRunRuntimeCapabilityOptions = React50.useMemo(
-    () => runRuntimeCapabilityOptions.filter(
-      (option) => !composerRuntimeCapabilitySelectionKeys.has(
-        getRuntimeCapabilityOptionKey(option)
-      )
-    ),
-    [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
-  );
-  const persistSessionRuntimeCapabilities = React50.useCallback(
-    async (threadId, selection) => {
-      if (!runtimeCapabilities || !selection) {
-        return;
-      }
-      try {
-        const result = await persistConversationRuntimeCapabilities({
-          client: stream.client,
-          threadId,
-          capabilities: runtimeCapabilities,
-          selection
-        });
-        warnMissingRuntimeCapabilityReferences(
-          "persisted selection",
-          result.missing
-        );
-      } catch (error) {
-        console.warn(
-          "[Chat] Failed to persist runtime capabilities selection:",
-          error
-        );
-      }
-    },
-    [runtimeCapabilities, stream.client]
-  );
-  const clearQuoteSelection = React50.useCallback(() => {
+  const clearQuoteSelection = React51.useCallback(() => {
     setQuoteSelection(null);
   }, []);
-  const commitComposerParts = React50.useCallback(
+  const commitComposerParts = React51.useCallback(
     (nextParts, options2) => {
       const normalized = normalizeComposerParts(nextParts);
       const previous = composerPartsRef.current;
@@ -16275,23 +16879,17 @@ function Chat({
         pendingComposerCaretOffsetRef.current = options2.caretOffset;
       }
       if (options2?.syncRemovedCapabilityTokens ?? true) {
-        const nextKeys = getComposerCapabilityKeys(normalized);
-        const removedCapabilities = previous.filter(
-          (part) => part.type === "capability" && !nextKeys.has(part.key)
+        const removedCapabilities = getRemovedComposerCapabilityParts(
+          previous,
+          normalized
         );
         if (removedCapabilities.length > 0) {
-          setRunRuntimeCapabilities((selection) => {
-            let nextSelection = selection;
-            for (const part of removedCapabilities) {
-              nextSelection = toggleRuntimeCapabilitySelection(
-                nextSelection,
-                part.capability.type,
-                part.capability.id,
-                false
-              );
-            }
-            return nextSelection;
-          });
+          setRunRuntimeCapabilities(
+            (selection) => removeComposerCapabilityPartsFromSelection(
+              selection,
+              removedCapabilities
+            )
+          );
         }
       }
       setComposerParts(normalized);
@@ -16300,9 +16898,9 @@ function Chat({
         setComposerDomVersion((version) => version + 1);
       }
     },
-    []
+    [setRunRuntimeCapabilities]
   );
-  const setComposerText = React50.useCallback(
+  const setComposerText = React51.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -16312,7 +16910,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const focusComposerAt = React50.useCallback((position) => {
+  const focusComposerAt = React51.useCallback((position) => {
     const nextPosition = position ?? getComposerEditingLength(composerPartsRef.current);
     pendingComposerCaretOffsetRef.current = nextPosition;
     requestAnimationFrame(() => {
@@ -16323,8 +16921,25 @@ function Chat({
       setComposerSelectionOffset(input, nextPosition);
     });
   }, []);
+  const {
+    applyComposerValueRuntimeCapabilities,
+    updateRuntimeCapabilityPalette,
+    removeRunRuntimeCapability,
+    insertComposerCapabilityToken
+  } = useRuntimeCapabilityComposerActions({
+    runtimeCapabilities,
+    runtimeCapabilitiesReady,
+    runtimeCapabilityOptions,
+    setRunRuntimeCapabilities,
+    setRuntimeCapabilityPalette,
+    applyExternalRuntimeCapabilities,
+    composerInputRef,
+    composerPartsRef,
+    commitComposerParts,
+    focusComposerAt
+  });
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React50.useCallback(
+    onSetComposerValue: React51.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -16344,13 +16959,24 @@ function Chat({
           ) ?? null;
           setSelectedTool(nextTool);
         }
+        applyComposerValueRuntimeCapabilities(payload);
+      },
+      [
+        applyComposerValueRuntimeCapabilities,
+        composer?.tools,
+        setComposerText
+      ]
+    ),
+    onSetRuntimeCapabilities: React51.useCallback(
+      (selection) => {
+        applyExternalRuntimeCapabilities(selection);
       },
-      [composer?.tools, setComposerText]
+      [applyExternalRuntimeCapabilities]
     ),
-    onFocusComposer: React50.useCallback(() => {
+    onFocusComposer: React51.useCallback(() => {
       composerInputRef.current?.focus();
     }, []),
-    onSetPetEnabled: React50.useCallback(
+    onSetPetEnabled: React51.useCallback(
       (enabled) => {
         if (petRequired) {
           return;
@@ -16364,10 +16990,10 @@ function Chat({
     )
   });
   const canMinimizeToPet = parentMessenger?.isParentAvailable === true && isPetEnabled(effectivePet);
-  const handleMinimizeToPet = React50.useCallback(() => {
+  const handleMinimizeToPet = React51.useCallback(() => {
     parentMessenger?.sendEvent("chat_minimize_change", { minimized: true });
   }, [parentMessenger]);
-  const syncQuoteSelection = React50.useCallback(() => {
+  const syncQuoteSelection = React51.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -16412,23 +17038,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React50.useCallback(() => {
+  const cancelPendingAutoScroll = React51.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React50.useCallback(() => {
+  const disableAutoFollow = React51.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React50.useCallback(() => {
+  const enableAutoFollow = React51.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React50.useCallback(
+  const scrollToBottom = React51.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -16455,7 +17081,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  const setMessageNavigationAnchor = React50.useCallback(
+  const setMessageNavigationAnchor = React51.useCallback(
     (id, node) => {
       if (node) {
         messageNavigationAnchorsRef.current.set(id, node);
@@ -16465,15 +17091,15 @@ function Chat({
     },
     []
   );
-  const getMessageNavigationAnchor = React50.useCallback(
+  const getMessageNavigationAnchor = React51.useCallback(
     (item) => messageNavigationAnchorsRef.current.get(item.id) ?? null,
     []
   );
-  const handleMessageNavigationNavigate = React50.useCallback(() => {
+  const handleMessageNavigationNavigate = React51.useCallback(() => {
     disableAutoFollow();
     clearQuoteSelection();
   }, [clearQuoteSelection, disableAutoFollow]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -16554,14 +17180,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (isPrependingHistoryMessagesRef.current) {
@@ -16569,51 +17195,21 @@ function Chat({
       return;
     }
     if (!shouldAutoScrollRef.current) {
-      if (messageCountChanged || stream.isLoading) {
-        setHasUpdatesBelow(true);
-      }
-      return;
-    }
-    if (messageCountChanged || stream.isLoading) {
-      scrollToBottom();
-    }
-  }, [stream.isLoading, messages, scrollToBottom]);
-  const effectiveClientSecret = stream.apiKey?.trim() ? stream.apiKey : clientSecret;
-  const missingConfigKind = getMissingApiConfigurationKind({
-    apiUrl,
-    clientSecret: effectiveClientSecret
-  });
-  const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React50.useMemo(() => {
-    switch (missingConfigKind) {
-      case "apiUrl":
-        return t("chat.missingApiUrlShort");
-      case "clientSecret":
-        return t("chat.missingClientSecretShort");
-      case "apiUrlAndClientSecret":
-        return t("chat.missingApiUrlAndClientSecretShort");
-      default:
-        return t("chat.missingConfigShort");
+      if (messageCountChanged || stream.isLoading) {
+        setHasUpdatesBelow(true);
+      }
+      return;
     }
-  }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React50.useMemo(() => {
-    switch (missingConfigKind) {
-      case "apiUrl":
-        return t("chat.missingApiUrlDetail");
-      case "clientSecret":
-        return t("chat.missingClientSecretDetail");
-      case "apiUrlAndClientSecret":
-        return t("chat.missingApiUrlAndClientSecretDetail");
-      default:
-        return t("chat.missingConfigDetail");
+    if (messageCountChanged || stream.isLoading) {
+      scrollToBottom();
     }
-  }, [missingConfigKind, t]);
+  }, [stream.isLoading, messages, scrollToBottom]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachmentState.hasUploadingFiles;
   const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
   const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
   const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
-  const resizeComposerInput = React50.useCallback(() => {
+  const resizeComposerInput = React51.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
       return;
@@ -16621,7 +17217,7 @@ function Chat({
     input.style.maxHeight = `${COMPOSER_INPUT_MAX_HEIGHT}px`;
     input.style.overflowY = input.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React50.useLayoutEffect(() => {
+  React51.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     resizeComposerInput();
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -16633,13 +17229,13 @@ function Chat({
       }
     }
   }, [composerDomVersion, composerParts, resizeComposerInput]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -16656,14 +17252,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -16686,106 +17282,10 @@ function Chat({
       cancelled = true;
     };
   }, [missingConfig, stream.client, stream.assistantId]);
-  React50.useEffect(() => {
-    if (missingConfig || !stream.client || !stream.assistantId) {
-      setRuntimeCapabilities(null);
-      setRuntimeCapabilitiesReady(false);
-      setSessionRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
-      setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
-      setRuntimeCapabilityPalette(null);
-      return;
-    }
-    const controller = new AbortController();
-    setRuntimeCapabilitiesReady(false);
-    setRuntimeCapabilities(null);
-    setRuntimeCapabilityPalette(null);
-    void stream.client.assistants.getRuntimeCapabilities(stream.assistantId, {
-      signal: controller.signal
-    }).then((payload) => {
-      setRuntimeCapabilities(payload);
-      setRuntimeCapabilitiesReady(true);
-      setSessionRuntimeCapabilities(
-        createDefaultRuntimeCapabilitiesSelection(payload)
-      );
-      setRunRuntimeCapabilities(
-        createEmptyRuntimeCapabilitiesSelection(payload)
-      );
-    }).catch((error) => {
-      if (controller.signal.aborted) {
-        return;
-      }
-      if (getHttpStatus(error) === 404) {
-        setRuntimeCapabilities(null);
-        setRuntimeCapabilitiesReady(false);
-        setSessionRuntimeCapabilities(
-          createEmptyRuntimeCapabilitiesSelection()
-        );
-        setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
-        return;
-      }
-      console.warn("[Chat] Failed to load runtime capabilities:", error);
-      setRuntimeCapabilities(null);
-      setRuntimeCapabilitiesReady(false);
-      setSessionRuntimeCapabilities(
-        createEmptyRuntimeCapabilitiesSelection()
-      );
-      setRunRuntimeCapabilities(createEmptyRuntimeCapabilitiesSelection());
-    });
-    return () => controller.abort();
-  }, [missingConfig, stream.client, stream.assistantId]);
-  React50.useEffect(() => {
-    setRunRuntimeCapabilities(
-      createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
-    );
-    if (!runtimeCapabilitiesReady || !runtimeCapabilities) {
-      setSessionRuntimeCapabilities(
-        createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
-      );
-      return;
-    }
-    const defaultSelection = createDefaultRuntimeCapabilitiesSelection(runtimeCapabilities);
-    const threadId = stream.threadId?.trim();
-    if (!threadId) {
-      setSessionRuntimeCapabilities(defaultSelection);
-      return;
-    }
-    let cancelled = false;
-    const requestId = runtimeCapabilityPreferenceLoadRef.current + 1;
-    runtimeCapabilityPreferenceLoadRef.current = requestId;
-    setSessionRuntimeCapabilities(defaultSelection);
-    void loadConversationRuntimeCapabilities({
-      client: stream.client,
-      threadId,
-      capabilities: runtimeCapabilities
-    }).then(({ selection, missing }) => {
-      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
-        return;
-      }
-      warnMissingRuntimeCapabilityReferences("loaded selection", missing);
-      setSessionRuntimeCapabilities(selection ?? defaultSelection);
-    }).catch((error) => {
-      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
-        return;
-      }
-      console.warn(
-        "[Chat] Failed to load persisted runtime capabilities selection:",
-        error
-      );
-      setSessionRuntimeCapabilities(defaultSelection);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    runtimeCapabilities,
-    runtimeCapabilitiesReady,
-    stream.client,
-    stream.threadId
-  ]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     setThreadGoal(stream.threadGoal);
   }, [stream.threadGoal]);
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     const threadId = stream.threadId?.trim();
     if (!threadId || !goalCommandAvailable) {
       setThreadGoal(null);
@@ -16826,37 +17326,7 @@ function Chat({
     return () => controller.abort();
   }, [goalAdapter, goalCommandAvailable, stream.threadId]);
   const uploadedFiles = attachmentState.uploadedFiles;
-  const handleSessionRuntimeCapabilityToggle = React50.useCallback(
-    (type, id, selected) => {
-      setSessionRuntimeCapabilities((previous) => {
-        const nextSelection = toggleRuntimeCapabilitySelection(
-          previous,
-          type,
-          id,
-          selected
-        );
-        const threadId = stream.threadId?.trim();
-        if (threadId) {
-          void persistSessionRuntimeCapabilities(threadId, nextSelection);
-        }
-        return nextSelection;
-      });
-    },
-    [persistSessionRuntimeCapabilities, stream.threadId]
-  );
-  const updateRuntimeCapabilityPalette = React50.useCallback(
-    (parts, selectionStart) => {
-      const input = composerInputRef.current;
-      const editingText = getComposerEditingText(parts);
-      const nextPalette = resolveRuntimeCapabilityPalette(
-        editingText,
-        typeof selectionStart === "number" ? selectionStart : input ? getComposerSelectionOffset(input) : getComposerEditingLength(parts)
-      );
-      setRuntimeCapabilityPalette(nextPalette);
-    },
-    []
-  );
-  const syncComposerInputFromElement = React50.useCallback(
+  const syncComposerInputFromElement = React51.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -16874,45 +17344,25 @@ function Chat({
     },
     [commitComposerParts, updateRuntimeCapabilityPalette]
   );
-  const handleComposerInput = React50.useCallback(
+  const handleComposerInput = React51.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerCompositionEnd = React50.useCallback(
+  const handleComposerCompositionEnd = React51.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerSelect = React50.useCallback(() => {
+  const handleComposerSelect = React51.useCallback(() => {
     updateRuntimeCapabilityPalette(
       composerPartsRef.current,
       composerInputRef.current ? getComposerSelectionOffset(composerInputRef.current) : void 0
     );
   }, [updateRuntimeCapabilityPalette]);
-  const removeRunRuntimeCapability = React50.useCallback(
-    (option) => {
-      setRunRuntimeCapabilities(
-        (previous) => toggleRuntimeCapabilitySelection(
-          previous,
-          option.type,
-          option.id,
-          false
-        )
-      );
-      commitComposerParts(
-        removeComposerCapabilityTokens(composerPartsRef.current, option),
-        {
-          resetDom: true,
-          syncRemovedCapabilityTokens: false
-        }
-      );
-    },
-    [commitComposerParts]
-  );
-  const submitDraft = React50.useCallback(
+  const submitDraft = React51.useCallback(
     (submitOptions = {}) => {
       if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
@@ -16927,22 +17377,10 @@ function Chat({
       if (!humanInput) {
         return;
       }
-      const recommendedRuntimeCapabilitiesForSubmit = submitOptions.runtimeCapabilities && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
-        runtimeCapabilities,
-        runRuntimeCapabilities,
-        submitOptions.runtimeCapabilities
-      ) : runRuntimeCapabilities;
-      const runtimeCapabilitiesForSubmit = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
-        capabilities: runtimeCapabilities,
-        available: effectiveSessionRuntimeCapabilities,
-        recommended: recommendedRuntimeCapabilitiesForSubmit
-      }) : null;
-      const runtimeCapabilityOptionsForMessage = getSelectedRuntimeCapabilityOptions(
-        getRecommendedRuntimeCapabilitiesSelection(
-          runtimeCapabilitiesForSubmit
-        ),
-        runtimeCapabilityOptions
-      );
+      const {
+        runtimeCapabilitiesForSubmit,
+        runtimeCapabilityOptionsForMessage
+      } = getRuntimeCapabilitiesForSubmit(submitOptions.runtimeCapabilities);
       const displayContent = submitOptions.displayText || contentToSubmit || (referencesToSend ? t("chat.referencedContentOnly") : "");
       const newMessage = {
         id: createMessageId(),
@@ -17010,21 +17448,16 @@ function Chat({
       }
       attachmentsRef.current?.clear();
       setReferences([]);
-      setRunRuntimeCapabilities(
-        createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
-      );
-      setRuntimeCapabilityPalette(null);
+      resetRunRuntimeCapabilities();
     },
     [
       effectiveSessionRuntimeCapabilities,
+      getRuntimeCapabilitiesForSubmit,
       isSubmissionBlocked,
       options?.request,
       persistSessionRuntimeCapabilities,
       references,
-      runtimeCapabilities,
-      runtimeCapabilitiesReady,
-      runtimeCapabilityOptions,
-      runRuntimeCapabilities,
+      resetRunRuntimeCapabilities,
       scrollToBottom,
       selectedTool,
       commitComposerParts,
@@ -17035,7 +17468,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalCommand = React50.useCallback(
+  const handleGoalCommand = React51.useCallback(
     async ({
       args,
       commandSource,
@@ -17080,11 +17513,7 @@ function Chat({
         }
         if (startsGoalRun) {
           const goalRunThreadId = result.threadId ?? threadId;
-          const runtimeCapabilitiesForGoalRun = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
-            capabilities: runtimeCapabilities,
-            available: effectiveSessionRuntimeCapabilities,
-            recommended: commandRuntimeCapabilities
-          }) : commandRuntimeCapabilities ?? null;
+          const runtimeCapabilitiesForGoalRun = getRuntimeCapabilitiesForCommand(commandRuntimeCapabilities);
           const inputPayload = {
             input: GOAL_RUN_INPUT,
             commandSource,
@@ -17137,63 +17566,17 @@ function Chat({
       }
     },
     [
-      effectiveSessionRuntimeCapabilities,
+      getRuntimeCapabilitiesForCommand,
       goalAdapter,
       options?.request,
       refreshThreads,
-      runtimeCapabilities,
-      runtimeCapabilitiesReady,
       stream,
       t
     ]
   );
-  const handleGoalPanelOpenChange = React50.useCallback((open) => {
+  const handleGoalPanelOpenChange = React51.useCallback((open) => {
     setIsGoalPanelOpen(open);
   }, []);
-  const addRunRuntimeCapabilities = React50.useCallback(
-    (selection) => {
-      setRunRuntimeCapabilities(
-        (previous) => runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
-          runtimeCapabilities,
-          previous,
-          selection
-        ) : previous
-      );
-    },
-    [runtimeCapabilities]
-  );
-  const insertComposerCapabilityToken = React50.useCallback(
-    (capability, range) => {
-      const token = createComposerCapabilityPart(capability, createMessageId());
-      const currentParts = composerPartsRef.current;
-      const replaceRange = range ?? {
-        start: getComposerEditingLength(currentParts),
-        end: getComposerEditingLength(currentParts)
-      };
-      const nextParts = replaceComposerRange(
-        currentParts,
-        replaceRange.start,
-        replaceRange.end,
-        [token]
-      );
-      commitComposerParts(nextParts, {
-        caretOffset: replaceRange.start + 1,
-        resetDom: true,
-        syncRemovedCapabilityTokens: true
-      });
-      setRunRuntimeCapabilities(
-        (previous) => toggleRuntimeCapabilitySelection(
-          previous,
-          capability.type,
-          capability.id,
-          true
-        )
-      );
-      setRuntimeCapabilityPalette(null);
-      focusComposerAt(replaceRange.start + 1);
-    },
-    [commitComposerParts, focusComposerAt]
-  );
   const {
     slashPaletteOptions,
     executeSlashCommandFromDraft,
@@ -17221,7 +17604,7 @@ function Chat({
     submitPrompt: submitDraft
   });
   const slashPaletteEmptyLabel = runtimeCapabilityPalette ? t(
-    getSlashPaletteEmptyLabelKey(
+    getRuntimeCapabilityPaletteEmptyLabelKey(
       runtimeCapabilityPalette,
       runtimeCapabilitiesReady
     )
@@ -17235,7 +17618,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React50.useEffect(() => {
+  React51.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -17254,7 +17637,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React50.useLayoutEffect(() => {
+  React51.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -17271,7 +17654,7 @@ function Chat({
       container.scrollTop += optionRect.bottom - containerRect.bottom;
     }
   }, [runtimeCapabilityPalette, slashPaletteOptions.length]);
-  const submitGoalModeDraft = React50.useCallback(() => {
+  const submitGoalModeDraft = React51.useCallback(() => {
     const objective = getComposerPlainText(composerPartsRef.current).trim();
     if (!isGoalModeOpen || !goalCommandAvailable || !objective) {
       return false;
@@ -17309,7 +17692,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleEditPendingFollowUp = React50.useCallback(
+  const handleEditPendingFollowUp = React51.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -17336,7 +17719,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React50.useCallback(() => {
+  const handleQuoteSelection = React51.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -17352,7 +17735,7 @@ function Chat({
   const handleAttachmentClick = () => {
     attachmentsRef.current?.openFilePicker();
   };
-  const uploadContextFile = React50.useCallback(
+  const uploadContextFile = React51.useCallback(
     (file) => {
       const formData = new FormData();
       formData.append("file", file, file.name || "upload");
@@ -17371,13 +17754,13 @@ function Chat({
     },
     [stream.assistantId, stream.client, stream.threadId]
   );
-  const getContextFileStatus = React50.useCallback(
+  const getContextFileStatus = React51.useCallback(
     (fileId) => stream.client.contexts.fetch(`/files/${fileId}/status`, {
       method: "GET"
     }),
     [stream.client]
   );
-  const deleteContextFile = React50.useCallback(
+  const deleteContextFile = React51.useCallback(
     (storageFileId) => stream.client.contexts.deleteFile(storageFileId),
     [stream.client]
   );
@@ -17485,7 +17868,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React50.useCallback(
+  const handleComposerPaste = React51.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -17587,13 +17970,13 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = React50.useCallback(
+  const handlePromptClick = React51.useCallback(
     (prompt) => {
       submitDraft({ inputText: prompt, displayText: prompt });
     },
     [submitDraft]
   );
-  const handlePromptEdit = React50.useCallback(
+  const handlePromptEdit = React51.useCallback(
     (prompt) => {
       if (isPromptEditDisabled) return;
       setComposerText(prompt, prompt.length);
@@ -17602,7 +17985,7 @@ function Chat({
     },
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
-  const loadConversationMessages = React50.useCallback(
+  const loadConversationMessages = React51.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -17623,7 +18006,7 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
-  const handleLoadMoreMessages = React50.useCallback(async () => {
+  const handleLoadMoreMessages = React51.useCallback(async () => {
     if (!canLoadMoreMessages || isLoadingMoreMessages) {
       return;
     }
@@ -17732,15 +18115,15 @@ function Chat({
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
   const canUploadDroppedFiles = composer?.attachments?.enabled === true && !missingConfig && !isHistoryLoading && !hasPendingInteractiveRequest;
-  const handleDroppedFiles = React50.useCallback((files) => {
+  const handleDroppedFiles = React51.useCallback((files) => {
     return attachmentsRef.current?.queueFiles(files) ?? false;
   }, []);
-  const currentThread = React50.useMemo(
+  const currentThread = React51.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const streamErrorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React50.useMemo(() => {
+  const threadErrorMessage = React51.useMemo(() => {
     if (streamErrorMessage?.trim()) return streamErrorMessage.trim();
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
@@ -17771,13 +18154,13 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const layoutMaxWidth = options?.layout?.maxWidth;
-  const chatColumnStyle = React50.useMemo(() => {
+  const chatColumnStyle = React51.useMemo(() => {
     if (layoutMaxWidth === void 0 || layoutMaxWidth === null || layoutMaxWidth === "") {
       return void 0;
     }
     return { maxWidth: layoutMaxWidth };
   }, [layoutMaxWidth]);
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     UploadDroppedFiles,
     {
       ref: viewportRef,
@@ -17792,16 +18175,16 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
             "data-slot": "chatkit-chat-header",
             className: "mx-auto flex w-full items-center justify-between border-b p-2 sticky top-0 z-10 bg-background",
             style: chatColumnStyle,
             children: [
-              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-                /* @__PURE__ */ jsxs38("div", { className: "relative shrink-0", children: [
-                  /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                /* @__PURE__ */ jsxs39("div", { className: "relative shrink-0", children: [
+                  /* @__PURE__ */ jsx56(
                     ChatkitAvatar,
                     {
                       avatar: assistantAvatar,
@@ -17809,10 +18192,10 @@ function Chat({
                       label: assistantTitle
                     }
                   ),
-                  /* @__PURE__ */ jsx55("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+                  /* @__PURE__ */ jsx56("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
                 ] }),
-                /* @__PURE__ */ jsxs38("div", { className: "truncate", children: [
-                  /* @__PURE__ */ jsx55(
+                /* @__PURE__ */ jsxs39("div", { className: "truncate", children: [
+                  /* @__PURE__ */ jsx56(
                     "h2",
                     {
                       className: "text-lg font-semibold truncate",
@@ -17820,12 +18203,12 @@ function Chat({
                       children: assistantTitle
                     }
                   ),
-                  /* @__PURE__ */ jsx55("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+                  /* @__PURE__ */ jsx56("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-1", children: [
-                canMinimizeToPet && /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                  /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-1", children: [
+                canMinimizeToPet && /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                  /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx56(
                     "button",
                     {
                       type: "button",
@@ -17836,13 +18219,13 @@ function Chat({
                         "transition-colors duration-150"
                       ),
                       "aria-label": t("chat.minimizeToPet"),
-                      children: /* @__PURE__ */ jsx55(Minus, { size: 16 })
+                      children: /* @__PURE__ */ jsx56(Minus, { size: 16 })
                     }
                   ) }) }),
-                  /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
+                  /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
                 ] }),
-                /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                  /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx55(
+                /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                  /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx56(
                     "button",
                     {
                       type: "button",
@@ -17853,14 +18236,14 @@ function Chat({
                         "transition-colors duration-150"
                       ),
                       "aria-label": t("settings.open"),
-                      children: /* @__PURE__ */ jsx55(Settings2, { size: 16 })
+                      children: /* @__PURE__ */ jsx56(Settings2, { size: 16 })
                     }
                   ) }) }),
-                  /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: t("settings.open") })
+                  /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", children: t("settings.open") })
                 ] }),
-                history?.enabled !== false && /* @__PURE__ */ jsxs38(Fragment9, { children: [
-                  /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                    /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx55(
+                history?.enabled !== false && /* @__PURE__ */ jsxs39(Fragment9, { children: [
+                  /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                    /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx56(
                       "button",
                       {
                         type: "button",
@@ -17873,12 +18256,12 @@ function Chat({
                           "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                         ),
                         "aria-label": t("history.newThread"),
-                        children: /* @__PURE__ */ jsx55(Pencil4, { size: 16 })
+                        children: /* @__PURE__ */ jsx56(Pencil4, { size: 16 })
                       }
                     ) }) }),
-                    /* @__PURE__ */ jsx55(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                    /* @__PURE__ */ jsx56(TooltipContent, { side: "bottom", children: t("history.newThread") })
                   ] }),
-                  /* @__PURE__ */ jsx55(
+                  /* @__PURE__ */ jsx56(
                     HistorySidebar,
                     {
                       threads,
@@ -17895,7 +18278,7 @@ function Chat({
             ]
           }
         ),
-        showMessageNavigation && /* @__PURE__ */ jsx55(
+        showMessageNavigation && /* @__PURE__ */ jsx56(
           MessageNavigator,
           {
             items: messageNavigationItems,
@@ -17906,18 +18289,18 @@ function Chat({
             tagsOverflowLabel: (count) => t("message.navigation.moreTags", { count })
           }
         ),
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
             "data-slot": "chatkit-chat-content",
             className: "mx-auto w-full flex-1 p-4",
             style: chatColumnStyle,
             children: [
-              errorMessage && /* @__PURE__ */ jsx55("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-              historyError && /* @__PURE__ */ jsx55("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-              showMissingConfig && /* @__PURE__ */ jsx55("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-              isHistoryLoading && /* @__PURE__ */ jsx55("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ jsx55(
+              errorMessage && /* @__PURE__ */ jsx56("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+              historyError && /* @__PURE__ */ jsx56("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+              showMissingConfig && /* @__PURE__ */ jsx56("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+              isHistoryLoading && /* @__PURE__ */ jsx56("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+              messages.length === 0 && !canLoadMoreMessages ? /* @__PURE__ */ jsx56(
                 StartScreen,
                 {
                   startScreen,
@@ -17926,10 +18309,10 @@ function Chat({
                   promptSendDisabled: isSubmissionBlocked,
                   promptEditDisabled: isPromptEditDisabled
                 }
-              ) : /* @__PURE__ */ jsxs38("div", { className: "space-y-4", children: [
-                canLoadMoreMessages && /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-3 py-1", children: [
-                  /* @__PURE__ */ jsx55("div", { className: "h-px min-w-8 flex-1 bg-border" }),
-                  /* @__PURE__ */ jsx55(
+              ) : /* @__PURE__ */ jsxs39("div", { className: "space-y-4", children: [
+                canLoadMoreMessages && /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-3 py-1", children: [
+                  /* @__PURE__ */ jsx56("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+                  /* @__PURE__ */ jsx56(
                     Button,
                     {
                       type: "button",
@@ -17941,7 +18324,7 @@ function Chat({
                       children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
                     }
                   ),
-                  /* @__PURE__ */ jsx55("div", { className: "h-px min-w-8 flex-1 bg-border" })
+                  /* @__PURE__ */ jsx56("div", { className: "h-px min-w-8 flex-1 bg-border" })
                 ] }),
                 messages.map((message, index) => {
                   const messageType = String(message.type);
@@ -17966,7 +18349,7 @@ function Chat({
                     ...humanMessage.fileAssets ?? [],
                     ...humanMessage.attachments ?? []
                   ];
-                  const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getSelectedRuntimeCapabilityOptions(
+                  const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getRuntimeCapabilityOptionsForSelection(
                     getRecommendedRuntimeCapabilitiesSelection(
                       humanMessage.runtimeCapabilities
                     ),
@@ -17982,7 +18365,7 @@ function Chat({
                   if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
                     return null;
                   }
-                  return /* @__PURE__ */ jsx55(
+                  return /* @__PURE__ */ jsx56(
                     "div",
                     {
                       ref: (node) => setMessageNavigationAnchor(messageNavigationId, node),
@@ -17992,7 +18375,7 @@ function Chat({
                         message.type === "human" ? "justify-end" : "justify-start -ml-1"
                         // AI messages: slightly closer to left
                       ),
-                      children: /* @__PURE__ */ jsxs38(
+                      children: /* @__PURE__ */ jsxs39(
                         "div",
                         {
                           className: cn(
@@ -18000,7 +18383,7 @@ function Chat({
                             isAssistantMessage && "min-w-0 flex-1"
                           ),
                           children: [
-                            /* @__PURE__ */ jsx55(
+                            /* @__PURE__ */ jsx56(
                               "div",
                               {
                                 ...canQuoteMessage ? {
@@ -18012,7 +18395,7 @@ function Chat({
                                   message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                                   // AI messages: use chat-specific foreground color
                                 ),
-                                children: isAssistantMessage ? /* @__PURE__ */ jsx55(
+                                children: isAssistantMessage ? /* @__PURE__ */ jsx56(
                                   AssistantMessage,
                                   {
                                     message: {
@@ -18031,25 +18414,14 @@ function Chat({
                                     organizationId: stream.organizationId,
                                     apiUrl: stream.apiUrl
                                   }
-                                ) : /* @__PURE__ */ jsxs38(Fragment9, { children: [
-                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx55("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs38(
-                                    "span",
+                                ) : /* @__PURE__ */ jsxs39(Fragment9, { children: [
+                                  message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx56(
+                                    HumanRuntimeCapabilityChips,
                                     {
-                                      className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
-                                      children: [
-                                        /* @__PURE__ */ jsx55(
-                                          RuntimeCapabilityIcon,
-                                          {
-                                            option,
-                                            variant: "chip"
-                                          }
-                                        ),
-                                        /* @__PURE__ */ jsx55("span", { className: "max-w-[9rem] truncate", children: option.label })
-                                      ]
-                                    },
-                                    `${option.type}:${option.id}`
-                                  )) }),
-                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx55("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx55(
+                                      options: humanRuntimeCapabilityOptions
+                                    }
+                                  ),
+                                  message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx56("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx56(
                                     ReferenceChip,
                                     {
                                       reference,
@@ -18057,29 +18429,29 @@ function Chat({
                                     },
                                     getReferenceKey(reference)
                                   )) }),
-                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx55("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs38(
+                                  message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs39(
                                     "div",
                                     {
                                       className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                                       children: [
-                                        /* @__PURE__ */ jsx55(FileText5, { size: 12 }),
-                                        /* @__PURE__ */ jsx55("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
+                                        /* @__PURE__ */ jsx56(FileText5, { size: 12 }),
+                                        /* @__PURE__ */ jsx56("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
                                       ]
                                     },
                                     fileIndex
                                   )) }),
-                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx55(
+                                  Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx56(
                                     "p",
                                     {
                                       className: "wrap-break-word text-sm leading-relaxed",
                                       children: formatMessageContent(part)
                                     },
                                     `${part.type}-${partIndex}`
-                                  )) : /* @__PURE__ */ jsx55("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                                  )) : /* @__PURE__ */ jsx56("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                                 ] })
                               }
                             ),
-                            /* @__PURE__ */ jsx55(
+                            /* @__PURE__ */ jsx56(
                               MessageActions,
                               {
                                 content: messageContent,
@@ -18117,7 +18489,7 @@ function Chat({
                     stream.isLoading,
                     { now: streamingNow }
                   );
-                  return /* @__PURE__ */ jsx55("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx55("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx55(
+                  return /* @__PURE__ */ jsx56("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx56("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx56(
                     AssistantStreamingIndicator,
                     {
                       status: fallbackStreamingStatus ?? "loading"
@@ -18128,7 +18500,7 @@ function Chat({
             ]
           }
         ),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx55("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx55(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx56("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx56(
           Button,
           {
             type: "button",
@@ -18141,10 +18513,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ jsx55(ArrowDown2, { size: 16 })
+            children: /* @__PURE__ */ jsx56(ArrowDown2, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ jsx55(
+        quoteSelection && /* @__PURE__ */ jsx56(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -18153,7 +18525,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ jsxs38(
+            children: /* @__PURE__ */ jsxs39(
               Button,
               {
                 type: "button",
@@ -18165,22 +18537,22 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ jsx55(Quote, { size: 14 }),
+                  /* @__PURE__ */ jsx56(Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39(
           "div",
           {
             "data-slot": "chatkit-chat-composer",
             className: "mx-auto w-full p-2 sticky bottom-0 z-10 bg-background",
             style: chatColumnStyle,
             children: [
-              threadErrorMessage && /* @__PURE__ */ jsx55("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-              /* @__PURE__ */ jsx55(
+              threadErrorMessage && /* @__PURE__ */ jsx56("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+              /* @__PURE__ */ jsx56(
                 ChatAttachments,
                 {
                   ref: attachmentsRef,
@@ -18194,7 +18566,7 @@ function Chat({
                   onStateChange: setAttachmentState
                 }
               ),
-              references.length > 0 && /* @__PURE__ */ jsx55("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx55(
+              references.length > 0 && /* @__PURE__ */ jsx56("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx56(
                 ReferenceChip,
                 {
                   reference,
@@ -18208,32 +18580,16 @@ function Chat({
                 },
                 getReferenceKey(reference)
               )) }),
-              detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsxs38("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-                /* @__PURE__ */ jsx55("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-                detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs38(
-                  "span",
-                  {
-                    className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
-                    children: [
-                      /* @__PURE__ */ jsx55(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                      /* @__PURE__ */ jsx55("span", { className: "max-w-40 truncate", children: option.label }),
-                      /* @__PURE__ */ jsx55(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => removeRunRuntimeCapability(option),
-                          className: "rounded-full p-0.5 hover:bg-primary/15",
-                          title: t("composer.capabilities.removeRunCapability"),
-                          "aria-label": t("composer.capabilities.removeRunCapability"),
-                          children: /* @__PURE__ */ jsx55(X6, { size: 11 })
-                        }
-                      )
-                    ]
-                  },
-                  `${option.type}:${option.id}`
-                ))
-              ] }),
-              showGoalStatus && /* @__PURE__ */ jsxs38(
+              /* @__PURE__ */ jsx56(
+                DetachedRunRuntimeCapabilities,
+                {
+                  options: detachedRunRuntimeCapabilityOptions,
+                  runOnlyLabel: t("composer.capabilities.runOnly"),
+                  removeLabel: t("composer.capabilities.removeRunCapability"),
+                  onRemove: removeRunRuntimeCapability
+                }
+              ),
+              showGoalStatus && /* @__PURE__ */ jsxs39(
                 "div",
                 {
                   className: cn(
@@ -18241,7 +18597,7 @@ function Chat({
                     isGoalObjectiveExpanded ? "items-start" : "items-center"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       Target2,
                       {
                         className: cn(
@@ -18250,13 +18606,13 @@ function Chat({
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs38("div", { className: "flex min-w-0 items-center gap-2", children: [
-                        /* @__PURE__ */ jsx55("span", { className: "font-medium", children: t("chat.goal.label") }),
-                        threadGoal && /* @__PURE__ */ jsx55("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                        isGoalLoading && /* @__PURE__ */ jsx55(Loader29, { className: "size-3 animate-spin text-muted-foreground" })
+                    /* @__PURE__ */ jsxs39("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxs39("div", { className: "flex min-w-0 items-center gap-2", children: [
+                        /* @__PURE__ */ jsx56("span", { className: "font-medium", children: t("chat.goal.label") }),
+                        threadGoal && /* @__PURE__ */ jsx56("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
+                        isGoalLoading && /* @__PURE__ */ jsx56(Loader29, { className: "size-3 animate-spin text-muted-foreground" })
                       ] }),
-                      /* @__PURE__ */ jsx55(
+                      /* @__PURE__ */ jsx56(
                         "div",
                         {
                           className: cn(
@@ -18266,13 +18622,13 @@ function Chat({
                           children: goalError || threadGoal?.objective
                         }
                       ),
-                      threadGoal && /* @__PURE__ */ jsx55("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx55("span", { children: t("chat.goal.elapsed", {
+                      threadGoal && /* @__PURE__ */ jsx56("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx56("span", { children: t("chat.goal.elapsed", {
                         elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
                       }) }) })
                     ] }),
-                    threadGoal && /* @__PURE__ */ jsxs38("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                        /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+                    threadGoal && /* @__PURE__ */ jsxs39("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
                           Button,
                           {
                             type: "button",
@@ -18283,13 +18639,13 @@ function Chat({
                               const prefix = "/goal edit ";
                               setComposerText(`${prefix}${threadGoal.objective}`);
                             },
-                            children: /* @__PURE__ */ jsx55(Pencil4, { className: "size-3" })
+                            children: /* @__PURE__ */ jsx56(Pencil4, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ jsx55(TooltipContent, { children: t("chat.goal.edit") })
+                        /* @__PURE__ */ jsx56(TooltipContent, { children: t("chat.goal.edit") })
                       ] }),
-                      /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                        /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
                           Button,
                           {
                             type: "button",
@@ -18305,13 +18661,13 @@ function Chat({
                                 executionType: "insert_invocation"
                               }
                             }),
-                            children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx55(Play, { className: "size-3" }) : /* @__PURE__ */ jsx55(Pause, { className: "size-3" })
+                            children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx56(Play, { className: "size-3" }) : /* @__PURE__ */ jsx56(Pause, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ jsx55(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                        /* @__PURE__ */ jsx56(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
                       ] }),
-                      /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                        /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+                      /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
                           Button,
                           {
                             type: "button",
@@ -18327,13 +18683,13 @@ function Chat({
                                 executionType: "insert_invocation"
                               }
                             }),
-                            children: /* @__PURE__ */ jsx55(Trash23, { className: "size-3" })
+                            children: /* @__PURE__ */ jsx56(Trash23, { className: "size-3" })
                           }
                         ) }),
-                        /* @__PURE__ */ jsx55(TooltipContent, { children: t("chat.goal.clear") })
+                        /* @__PURE__ */ jsx56(TooltipContent, { children: t("chat.goal.clear") })
                       ] }),
-                      threadGoal.objective && !goalError && /* @__PURE__ */ jsxs38(Tooltip, { children: [
-                        /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx55(
+                      threadGoal.objective && !goalError && /* @__PURE__ */ jsxs39(Tooltip, { children: [
+                        /* @__PURE__ */ jsx56(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx56(
                           Button,
                           {
                             type: "button",
@@ -18342,7 +18698,7 @@ function Chat({
                             "aria-expanded": isGoalObjectiveExpanded,
                             "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
                             onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
-                            children: /* @__PURE__ */ jsx55(
+                            children: /* @__PURE__ */ jsx56(
                               ChevronDown5,
                               {
                                 className: cn(
@@ -18353,13 +18709,13 @@ function Chat({
                             )
                           }
                         ) }),
-                        /* @__PURE__ */ jsx55(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                        /* @__PURE__ */ jsx56(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
                       ] })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 PendingRuntimeServices,
                 {
                   state: stream.runtimeActivities.sandboxServices,
@@ -18368,7 +18724,7 @@ function Chat({
                   className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
                 }
               ),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 PendingTodos,
                 {
                   snapshot: stream.todos,
@@ -18376,7 +18732,7 @@ function Chat({
                   className: hasPendingFollowUps ? "mb-2" : void 0
                 }
               ),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 PendingFollowUps,
                 {
                   items: pendingFollowUps,
@@ -18389,7 +18745,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 RequestUserInputPanel,
                 {
                   request: stream.pendingRequestUserInput,
@@ -18398,7 +18754,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx56(
                 HITLApprovalPanel,
                 {
                   request: stream.pendingHITLRequest,
@@ -18407,7 +18763,7 @@ function Chat({
                   attachToComposer: true
                 }
               ),
-              runtimeCapabilityPalette && /* @__PURE__ */ jsx55(
+              runtimeCapabilityPalette && /* @__PURE__ */ jsx56(
                 SlashPalette,
                 {
                   palette: runtimeCapabilityPalette,
@@ -18421,7 +18777,7 @@ function Chat({
                   onSelect: selectSlashPaletteOption
                 }
               ),
-              /* @__PURE__ */ jsx55("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs38(
+              /* @__PURE__ */ jsx56("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs39(
                 "div",
                 {
                   "data-slot": "composer-input-shell",
@@ -18435,7 +18791,7 @@ function Chat({
                     composerInputRoundedClass
                   ),
                   children: [
-                    /* @__PURE__ */ jsx55(
+                    /* @__PURE__ */ jsx56(
                       "div",
                       {
                         ref: composerInputRef,
@@ -18457,39 +18813,19 @@ function Chat({
                           (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                         ),
                         children: renderedComposerParts.map(
-                          (part, index) => part.type === "text" ? /* @__PURE__ */ jsx55(React50.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsxs38(
-                            "span",
-                            {
-                              "data-composer-capability-key": part.key,
-                              "data-capability-type": part.capability.type,
-                              "data-capability-id": part.capability.id,
-                              contentEditable: false,
-                              className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
-                              children: [
-                                /* @__PURE__ */ jsx55(
-                                  RuntimeCapabilityIcon,
-                                  {
-                                    option: part.capability,
-                                    variant: "chip"
-                                  }
-                                ),
-                                /* @__PURE__ */ jsx55("span", { className: "truncate", children: part.capability.label })
-                              ]
-                            },
-                            part.key
-                          )
+                          (part, index) => part.type === "text" ? /* @__PURE__ */ jsx56(React51.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsx56(ComposerCapabilityToken, { part }, part.key)
                         )
                       },
                       composerDomVersion
                     ),
-                    /* @__PURE__ */ jsxs38(
+                    /* @__PURE__ */ jsxs39(
                       "div",
                       {
                         "data-slot": "composer-action-bar",
                         className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
                         children: [
-                          /* @__PURE__ */ jsxs38("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                            /* @__PURE__ */ jsx55("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx55(
+                          /* @__PURE__ */ jsxs39("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                            /* @__PURE__ */ jsx56("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx56(
                               ComposerMenu,
                               {
                                 composer,
@@ -18507,20 +18843,20 @@ function Chat({
                                 disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
                               }
                             ) }),
-                            selectedTool && /* @__PURE__ */ jsxs38("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                              /* @__PURE__ */ jsx55("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                              /* @__PURE__ */ jsx55(
+                            selectedTool && /* @__PURE__ */ jsxs39("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                              /* @__PURE__ */ jsx56("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                              /* @__PURE__ */ jsx56(
                                 "button",
                                 {
                                   type: "button",
                                   onClick: () => setSelectedTool(null),
                                   className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                                  children: /* @__PURE__ */ jsx55(X6, { size: 12 })
+                                  children: /* @__PURE__ */ jsx56(X7, { size: 12 })
                                 }
                               )
                             ] })
                           ] }),
-                          /* @__PURE__ */ jsx55("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx55(
+                          /* @__PURE__ */ jsx56("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx56(
                             SendButton,
                             {
                               disabled: isSendDisabled,
@@ -18543,7 +18879,7 @@ function Chat({
                   ]
                 }
               ) }),
-              disclaimer?.text && /* @__PURE__ */ jsx55(
+              disclaimer?.text && /* @__PURE__ */ jsx56(
                 "p",
                 {
                   className: cn(
@@ -18553,14 +18889,14 @@ function Chat({
                   children: disclaimer.text
                 }
               ),
-              /* @__PURE__ */ jsxs38("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsx55("span", { children: t("chat.poweredBy") }),
-                /* @__PURE__ */ jsx55(ContextUsageIndicator, { className: "absolute right-4" })
+              /* @__PURE__ */ jsxs39("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ jsx56("span", { children: t("chat.poweredBy") }),
+                /* @__PURE__ */ jsx56(ContextUsageIndicator, { className: "absolute right-4" })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx56(
           SettingsSheet,
           {
             open: petSettingsOpen,
@@ -18570,17 +18906,17 @@ function Chat({
             onSave: savePetLocalSettings
           }
         ),
-        /* @__PURE__ */ jsx55(PetBridge, { pet: effectivePet, state: petAutoState })
+        /* @__PURE__ */ jsx56(PetBridge, { pet: effectivePet, state: petAutoState })
       ]
     }
   );
 }
 
 // src/components/ui/separator.tsx
-import * as React51 from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
-var Separator = React51.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx56(
+import * as React52 from "react";
+import { jsx as jsx57 } from "react/jsx-runtime";
+var Separator = React52.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx57(
     "div",
     {
       ref,