@truefoundry/trueforge-ui 0.1.0-rc.0 → 0.1.0-rc.2

package/dist/{chunk-XSHXH6EI.js → chunk-QGNLP2EE.js}

@@ -1,18 +1,21 @@
 import {
+  DraftCatalogProvider,
   Icon,
   Spinner,
   auiButtonClass,
+  getErrorMessage,
   libraryAgentId,
   useCatalogServer,
   useCompactLayout,
+  useDraftCatalog,
   useOptionalCatalogServer,
   useOptionalServer,
   useOptionalShellMode,
   useServerCapabilities
-} from "./chunk-UHGSHDBM.js";
+} from "./chunk-XAZ5HJXV.js";
 import {
   OpenUiFenceBlock
-} from "./chunk-42GF723P.js";
+} from "./chunk-HT5HKQXE.js";
 import {
   ThemeContext,
   ThemeProvider,
@@ -20,7 +23,7 @@ import {
   useOptionalContentClassNames,
   useOptionalThemeMode,
   useOptionalThemePreset
-} from "./chunk-UBOFEI77.js";
+} from "./chunk-DTF7ZMUJ.js";
 
 // src/theme/brand.tsx
 import { useContext } from "react";
@@ -166,7 +169,7 @@ var Button = React2.forwardRef(
 Button.displayName = "Button";
 
 // src/theme/SlotsProvider.tsx
-import { createContext as createContext4, useContext as useContext5, useMemo as useMemo8 } from "react";
+import { createContext as createContext3, useContext as useContext4, useMemo as useMemo7 } from "react";
 
 // src/atoms/primitives/IconButton.tsx
 import React3 from "react";
@@ -217,10 +220,45 @@ function AskUserPrompt({
   }
   if (!currentQuestion) return null;
   const isCustomSelected = currentAnswer.radioValue === ASK_USER_CUSTOM_OPTION;
+  const hasOptions = currentQuestion.options.length > 0;
   const handleOptionSelect = (value) => {
     if (readOnly) return;
     onCurrentAnswerChange?.(currentQuestion.id, { radioValue: value });
   };
+  const goToNextQuestion = () => onCurrentQuestionIndexChange?.(currentQuestionIndex + 1);
+  const isNextStep = isMultiQuestion && !isLastQuestion;
+  const handleAnswerKeyDown = (event) => {
+    if (event.key !== "Enter" || event.shiftKey || readOnly) return;
+    event.preventDefault();
+    if (isNextStep) {
+      if (!isSubmitDisabled) goToNextQuestion();
+      return;
+    }
+    if (!isSubmitAllDisabled) onSubmit();
+  };
+  const answerInput = /* @__PURE__ */ jsx6(
+    "textarea",
+    {
+      rows: 1,
+      value: currentAnswer.custom,
+      disabled: readOnly || !currentQuestion.id,
+      onFocus: () => onCurrentAnswerChange?.(currentQuestion.id, {
+        radioValue: ASK_USER_CUSTOM_OPTION
+      }),
+      onChange: (e) => {
+        onCurrentAnswerChange?.(currentQuestion.id, {
+          custom: e.target.value,
+          radioValue: ASK_USER_CUSTOM_OPTION
+        });
+      },
+      placeholder: hasOptions ? "Other" : "Type your answer",
+      "aria-label": hasOptions ? "Other (custom answer)" : "Your answer",
+      className: cn(
+        "field-sizing-content min-h-6 max-h-[3lh] w-full resize-none overflow-y-auto rounded border border-input-border bg-primary-bg px-2 py-0.5 text-[0.8125rem] leading-snug text-text-primary",
+        "placeholder:text-[0.8125rem] focus:outline-none focus:ring-1 focus:ring-focus-ring"
+      )
+    }
+  );
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -277,8 +315,9 @@ function AskUserPrompt({
               "div",
               {
                 className: "flex flex-col gap-3 overflow-visible",
-                role: "radiogroup",
-                "aria-label": currentQuestion.question || "Answer options",
+                role: hasOptions ? "radiogroup" : void 0,
+                "aria-label": hasOptions ? currentQuestion.question || "Answer options" : void 0,
+                onKeyDown: handleAnswerKeyDown,
                 children: [
                   currentQuestion.options.map((opt, index) => {
                     const isSelected = currentAnswer.radioValue === opt;
@@ -308,11 +347,11 @@ function AskUserPrompt({
                       `${index}:${opt}`
                     );
                   }),
-                  /* @__PURE__ */ jsxs2(
+                  hasOptions ? /* @__PURE__ */ jsxs2(
                     "label",
                     {
                       className: cn(
-                        "flex items-center gap-x-2 overflow-visible",
+                        "flex items-start gap-x-2 overflow-visible",
                         readOnly ? "cursor-default" : "cursor-pointer"
                       ),
                       children: [
@@ -325,34 +364,13 @@ function AskUserPrompt({
                             name: `ask-user-question-option-${currentQuestion.id}`,
                             checked: isCustomSelected,
                             onChange: () => handleOptionSelect(ASK_USER_CUSTOM_OPTION),
-                            className: "accent-primary-button-bg"
+                            className: "mt-1 accent-primary-button-bg"
                           }
                         ),
-                        /* @__PURE__ */ jsx6("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx6(
-                          "input",
-                          {
-                            value: currentAnswer.custom,
-                            disabled: readOnly || !currentQuestion.id,
-                            onFocus: () => onCurrentAnswerChange?.(currentQuestion.id, {
-                              radioValue: ASK_USER_CUSTOM_OPTION
-                            }),
-                            onChange: (e) => {
-                              onCurrentAnswerChange?.(currentQuestion.id, {
-                                custom: e.target.value,
-                                radioValue: ASK_USER_CUSTOM_OPTION
-                              });
-                            },
-                            placeholder: "Other",
-                            "aria-label": "Other (custom answer)",
-                            className: cn(
-                              "h-6 w-full rounded border border-input-border bg-primary-bg px-2 text-[0.8125rem] text-text-primary",
-                              "placeholder:text-[0.8125rem] focus:outline-none focus:ring-1 focus:ring-focus-ring"
-                            )
-                          }
-                        ) })
+                        /* @__PURE__ */ jsx6("div", { className: "min-w-0 flex-1", children: answerInput })
                       ]
                     }
-                  )
+                  ) : answerInput
                 ]
               }
             )
@@ -366,16 +384,7 @@ function AskUserPrompt({
               }),
               children: [
                 isMultiQuestion && isLastQuestion && !allQuestionsAnswered ? /* @__PURE__ */ jsx6("span", { className: "text-xs font-medium text-failure-bg", children: "Answer all questions to submit" }) : /* @__PURE__ */ jsx6("span", {}),
-                isMultiQuestion && !isLastQuestion ? /* @__PURE__ */ jsx6(
-                  Button,
-                  {
-                    type: "button",
-                    size: "sm",
-                    onClick: () => onCurrentQuestionIndexChange?.(currentQuestionIndex + 1),
-                    disabled: isSubmitDisabled,
-                    children: "Next"
-                  }
-                ) : /* @__PURE__ */ jsx6(Button, { type: "button", size: "sm", onClick: onSubmit, disabled: isSubmitAllDisabled, children: "Submit" })
+                isNextStep ? /* @__PURE__ */ jsx6(Button, { type: "button", size: "sm", onClick: goToNextQuestion, disabled: isSubmitDisabled, children: "Next" }) : /* @__PURE__ */ jsx6(Button, { type: "button", size: "sm", onClick: onSubmit, disabled: isSubmitAllDisabled, children: "Submit" })
               ]
             }
           )
@@ -689,57 +698,6 @@ import { useEffect as useEffect4, useState as useState5 } from "react";
 // src/atoms/lib/useSearchAgentsList.ts
 import { useCallback, useEffect as useEffect2, useRef, useState as useState3 } from "react";
 
-// src/utils/getErrorMessage.ts
-function isRecord(value) {
-  return value != null && typeof value === "object";
-}
-function readNonEmptyString(value) {
-  return typeof value === "string" && value.trim() !== "" ? value : void 0;
-}
-function messageFromErrorShaped(value) {
-  if (!isRecord(value)) return void 0;
-  const direct = readNonEmptyString(value.message);
-  if (direct != null) return direct;
-  if (isRecord(value.error)) {
-    return readNonEmptyString(value.error.message);
-  }
-  return void 0;
-}
-function stringifyError(error) {
-  if (typeof error === "string") return error;
-  if (isRecord(error)) {
-    try {
-      return JSON.stringify(error);
-    } catch {
-      return Object.prototype.toString.call(error);
-    }
-  }
-  return String(error);
-}
-function getErrorMessage(error, fallback) {
-  if (typeof error === "string") {
-    const trimmed = error.trim();
-    if (trimmed !== "") return error;
-    return fallback ?? error;
-  }
-  if (isRecord(error) && "body" in error) {
-    const fromBody = messageFromErrorShaped(error.body);
-    if (fromBody != null) return fromBody;
-    if (error.body != null) {
-      if (typeof error.body === "string") {
-        const trimmed = error.body.trim();
-        if (trimmed !== "") return error.body;
-      } else {
-        return stringifyError(error.body);
-      }
-    }
-  }
-  const fromShape = messageFromErrorShaped(error);
-  if (fromShape != null) return fromShape;
-  if (fallback != null) return fallback;
-  return stringifyError(error);
-}
-
 // src/atoms/lib/useDebouncedValue.ts
 import { useEffect, useState as useState2 } from "react";
 function useDebouncedValue(value, delayMs) {
@@ -1844,7 +1802,7 @@ function ComposerShell({
 
 // src/atoms/draft/DraftReasoningEffortSelector.tsx
 import { useTrueFoundryAgentSpec as useTrueFoundryAgentSpec2, useTrueFoundryUpdateAgentSpec } from "@truefoundry/assistant-ui-runtime";
-import { useEffect as useEffect8, useId as useId3, useRef as useRef4, useState as useState12 } from "react";
+import { useEffect as useEffect7, useId as useId3, useRef as useRef4, useState as useState11 } from "react";
 
 // src/atoms/lib/useIsMobile.ts
 import { useSyncExternalStore } from "react";
@@ -1919,96 +1877,6 @@ function BottomSheet({
   );
 }
 
-// src/atoms/draft/DraftCatalogProvider.tsx
-import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useEffect as useEffect7, useMemo, useState as useState11 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
-var DraftCatalogContext = createContext2(null);
-var IDLE_ENSURE = () => void 0;
-var IDLE_REFRESH = async () => void 0;
-function DraftCatalogProvider({ children }) {
-  const server = useOptionalServer();
-  const existing = useContext3(DraftCatalogContext);
-  if (existing?.server === server) {
-    return children;
-  }
-  return /* @__PURE__ */ jsx30(DraftCatalogStore, { server, children });
-}
-function DraftCatalogStore({ server, children }) {
-  const [requested, setRequested] = useState11(false);
-  const [models, setModels] = useState11([]);
-  const [skills, setSkills] = useState11([]);
-  const [connectors, setConnectors] = useState11([]);
-  const [loading, setLoading] = useState11(false);
-  const [error, setError] = useState11(null);
-  const ensureLoaded = useCallback3(() => {
-    setRequested(true);
-  }, []);
-  const refreshConnectors = useCallback3(async () => {
-    if (!server) return;
-    setLoading(true);
-    setError(null);
-    try {
-      const nextConnectors = await server.getMcp();
-      setConnectors(nextConnectors);
-    } catch (reason) {
-      setError(getErrorMessage(reason, "Failed to load connectors."));
-    } finally {
-      setLoading(false);
-    }
-  }, [server]);
-  useEffect7(() => {
-    if (!requested || !server) return;
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    void Promise.allSettled([server.getModels(), server.getSkills(), server.getMcp()]).then(([modelsResult, skillsResult, mcpResult]) => {
-      if (cancelled) return;
-      const errors = [];
-      if (modelsResult.status === "fulfilled") {
-        setModels(modelsResult.value);
-      } else {
-        errors.push(getErrorMessage(modelsResult.reason, "Failed to load models."));
-      }
-      if (skillsResult.status === "fulfilled") {
-        setSkills(skillsResult.value);
-      } else {
-        errors.push(getErrorMessage(skillsResult.reason, "Failed to load skills."));
-      }
-      if (mcpResult.status === "fulfilled") {
-        setConnectors(mcpResult.value);
-      } else {
-        errors.push(getErrorMessage(mcpResult.reason, "Failed to load connectors."));
-      }
-      setError(errors[0] ?? null);
-    }).finally(() => {
-      if (!cancelled) setLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [requested, server]);
-  const value = useMemo(
-    () => ({ server, models, skills, connectors, loading, error, ensureLoaded, refreshConnectors }),
-    [server, models, skills, connectors, loading, error, ensureLoaded, refreshConnectors]
-  );
-  return /* @__PURE__ */ jsx30(DraftCatalogContext.Provider, { value, children });
-}
-function useDraftCatalog() {
-  const ctx = useContext3(DraftCatalogContext);
-  if (ctx == null) {
-    return {
-      models: [],
-      skills: [],
-      connectors: [],
-      loading: false,
-      error: null,
-      ensureLoaded: IDLE_ENSURE,
-      refreshConnectors: IDLE_REFRESH
-    };
-  }
-  return ctx;
-}
-
 // src/atoms/draft/reasoningEffort.ts
 function hasReasoningEfforts(efforts) {
   return Array.isArray(efforts) && efforts.length > 0;
@@ -2032,12 +1900,12 @@ function modelPatchWithReasoningEffort(name, existingParams, efforts) {
 }
 
 // src/atoms/draft/DraftReasoningEffortSelector.tsx
-import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx30, jsxs as jsxs20 } from "react/jsx-runtime";
 function DraftReasoningEffortSelector({ disabled, isRunning }) {
   const { models, ensureLoaded } = useDraftCatalog();
   const { agentSpec } = useTrueFoundryAgentSpec2();
   const updateAgentSpec = useTrueFoundryUpdateAgentSpec();
-  const [open, setOpen] = useState12(false);
+  const [open, setOpen] = useState11(false);
   const containerRef = useRef4(null);
   const clearedStickyEffortForModelRef = useRef4(null);
   const menuId = useId3();
@@ -2048,10 +1916,10 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
   const efforts = selected?.properties.reasoningEfforts;
   const currentEffort = agentSpec?.model?.params?.reasoningEffort;
   const resolved = resolveReasoningEffort(efforts, currentEffort);
-  useEffect8(() => {
+  useEffect7(() => {
     ensureLoaded();
   }, [ensureLoaded]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -2061,7 +1929,7 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!updateAgentSpec || selected === void 0) return;
     if (hasReasoningEfforts(efforts)) {
       clearedStickyEffortForModelRef.current = null;
@@ -2076,8 +1944,8 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
   }, [updateAgentSpec, selected, efforts, currentEffort, agentSpec?.model?.params]);
   if (!hasReasoningEfforts(efforts) || !resolved) return null;
   const content = /* @__PURE__ */ jsxs20(Fragment5, { children: [
-    /* @__PURE__ */ jsx31("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx31("p", { className: "text-text-primary text-sm font-semibold", children: "Reasoning effort" }) }),
-    /* @__PURE__ */ jsx31(
+    /* @__PURE__ */ jsx30("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsx30("p", { className: "text-text-primary text-sm font-semibold", children: "Reasoning effort" }) }),
+    /* @__PURE__ */ jsx30(
       "div",
       {
         id: menuId,
@@ -2086,7 +1954,7 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
         className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-1",
         children: efforts.map((effort) => {
           const active = effort === resolved;
-          return /* @__PURE__ */ jsx31(
+          return /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -2107,7 +1975,7 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
                 });
                 setOpen(false);
               },
-              children: /* @__PURE__ */ jsx31("span", { className: "truncate font-medium", children: effort })
+              children: /* @__PURE__ */ jsx30("span", { className: "truncate font-medium", children: effort })
             },
             effort
           );
@@ -2135,43 +2003,43 @@ function DraftReasoningEffortSelector({ disabled, isRunning }) {
         }),
         onClick: () => setOpen((v) => !v),
         children: [
-          /* @__PURE__ */ jsx31("span", { className: "truncate", children: resolved }),
-          /* @__PURE__ */ jsx31(Icon, { name: "chevron-down", className: "size-3.5 shrink-0 opacity-60" })
+          /* @__PURE__ */ jsx30("span", { className: "truncate", children: resolved }),
+          /* @__PURE__ */ jsx30(Icon, { name: "chevron-down", className: "size-3.5 shrink-0 opacity-60" })
         ]
       }
     ),
-    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx31(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select reasoning effort", children: content }) : /* @__PURE__ */ jsx31("div", { className: "bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[12rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
+    open ? isMobile || compactLayout ? /* @__PURE__ */ jsx30(BottomSheet, { open: true, onOpenChange: setOpen, "aria-label": "Select reasoning effort", children: content }) : /* @__PURE__ */ jsx30("div", { className: "bg-card-bg text-text-primary absolute right-0 bottom-full z-50 mb-2 flex max-h-[22rem] w-[12rem] flex-col overflow-hidden rounded-lg border border-border shadow-lg", children: content }) : null
   ] });
 }
 
 // src/atoms/draft/DraftComposerSections.tsx
-import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
 function DraftComposerLeftSection({ disabled, isRunning, onAttach }) {
   const DraftCompositeSelector2 = useSlot("DraftCompositeSelector");
-  return /* @__PURE__ */ jsx32("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsx32(DraftCompositeSelector2, { disabled, isRunning, onAttach }) });
+  return /* @__PURE__ */ jsx31("div", { className: "flex min-w-0 flex-wrap items-center gap-1.5", children: /* @__PURE__ */ jsx31(DraftCompositeSelector2, { disabled, isRunning, onAttach }) });
 }
 function DraftComposerRightSection({ disabled, isRunning }) {
   const DraftModelSelector2 = useSlot("DraftModelSelector");
   return /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 items-center gap-1", children: [
-    /* @__PURE__ */ jsx32(DraftModelSelector2, { disabled, isRunning }),
-    /* @__PURE__ */ jsx32(DraftReasoningEffortSelector, { disabled, isRunning })
+    /* @__PURE__ */ jsx31(DraftModelSelector2, { disabled, isRunning }),
+    /* @__PURE__ */ jsx31(DraftReasoningEffortSelector, { disabled, isRunning })
   ] });
 }
 
 // src/atoms/draft/DraftCompositeSelector.tsx
 import { useTrueFoundryAgentSpec as useTrueFoundryAgentSpec3, useTrueFoundryUpdateAgentSpec as useTrueFoundryUpdateAgentSpec2 } from "@truefoundry/assistant-ui-runtime";
-import { useCallback as useCallback6, useEffect as useEffect10, useId as useId4, useMemo as useMemo4, useRef as useRef7, useState as useState16 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useId as useId4, useMemo as useMemo3, useRef as useRef7, useState as useState15 } from "react";
 
 // src/hooks/useMcpAuth.ts
-import { useCallback as useCallback5, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef5, useState as useState14 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo2, useRef as useRef5, useState as useState13 } from "react";
 
 // src/containers/ToasterContainer.tsx
-import { createContext as createContext3, useCallback as useCallback4, useContext as useContext4, useMemo as useMemo2, useState as useState13 } from "react";
-import { jsx as jsx33, jsxs as jsxs22 } from "react/jsx-runtime";
+import { createContext as createContext2, useCallback as useCallback3, useContext as useContext3, useMemo, useState as useState12 } from "react";
+import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
 var MAX_TOAST_DESCRIPTION_CHARS = 480;
 var MAX_VISIBLE_TOASTS = 5;
 var SUCCESS_TOAST_TTL_MS = 3e3;
-var ToasterContext = createContext3(null);
+var ToasterContext = createContext2(null);
 var toastId = 0;
 function nextToastId() {
   toastId += 1;
@@ -2201,16 +2069,16 @@ function normalizeError(error) {
 function ToasterProvider({ children }) {
   const Toast2 = useSlot("Toast");
   const ToastStack2 = useSlot("ToastStack");
-  const [toasts, setToasts] = useState13([]);
-  const dismiss = useCallback4((id) => {
+  const [toasts, setToasts] = useState12([]);
+  const dismiss = useCallback3((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const showError = useCallback4((error) => {
+  const showError = useCallback3((error) => {
     console.error("[trueforge-ui]", error);
     const item = { id: nextToastId(), variant: "error", ...normalizeError(error) };
     setToasts((prev) => [...prev, item].slice(-MAX_VISIBLE_TOASTS));
   }, []);
-  const showSuccess = useCallback4(
+  const showSuccess = useCallback3(
     (content) => {
       const id = nextToastId();
       const item = { id, variant: "success", ...content };
@@ -2221,10 +2089,10 @@ function ToasterProvider({ children }) {
     },
     [dismiss]
   );
-  const value = useMemo2(() => ({ showError, showSuccess }), [showError, showSuccess]);
+  const value = useMemo(() => ({ showError, showSuccess }), [showError, showSuccess]);
   return /* @__PURE__ */ jsxs22(ToasterContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx33(ToastStack2, { children: toasts.map((toast) => /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx32(ToastStack2, { children: toasts.map((toast) => /* @__PURE__ */ jsx32(
       Toast2,
       {
         title: toast.title,
@@ -2240,14 +2108,14 @@ function ToasterProvider({ children }) {
   ] });
 }
 function useToaster() {
-  const context = useContext4(ToasterContext);
+  const context = useContext3(ToasterContext);
   if (context == null) {
     throw new Error("useToaster must be used within ToasterProvider");
   }
   return context;
 }
 function useToasterOptional() {
-  return useContext4(ToasterContext);
+  return useContext3(ToasterContext);
 }
 
 // src/hooks/useMcpAuth.ts
@@ -2261,15 +2129,15 @@ var isPopupMessage = (value) => {
 var useMCPAuth = ({ callbackPath } = {}) => {
   const { connectorCatalog } = useCatalogServer();
   const toaster = useToasterOptional();
-  const [isOAuthLoading, setIsOAuthLoading] = useState14(false);
-  const popupUid = useMemo3(() => generatePopupUid(), []);
+  const [isOAuthLoading, setIsOAuthLoading] = useState13(false);
+  const popupUid = useMemo2(() => generatePopupUid(), []);
   const listenerCleanupRef = useRef5(null);
-  const clearPopupListener = useCallback5(() => {
+  const clearPopupListener = useCallback4(() => {
     listenerCleanupRef.current?.();
     listenerCleanupRef.current = null;
   }, []);
-  useEffect9(() => clearPopupListener, [clearPopupListener]);
-  const openAuthPopup = useCallback5(
+  useEffect8(() => clearPopupListener, [clearPopupListener]);
+  const openAuthPopup = useCallback4(
     (authorizationEndpoint, callback) => {
       clearPopupListener();
       const channel = new BroadcastChannel(MCP_AUTH_POPUP_CHANNEL);
@@ -2296,7 +2164,7 @@ var useMCPAuth = ({ callbackPath } = {}) => {
     },
     [clearPopupListener, popupUid]
   );
-  const handleAuthorize = useCallback5(
+  const handleAuthorize = useCallback4(
     async (integrationId, callback) => {
       if (!integrationId) return;
       try {
@@ -2333,16 +2201,24 @@ var useMCPAuth = ({ callbackPath } = {}) => {
   };
 };
 
+// src/atoms/lib/inputClasses.ts
+var baseClasses = "w-full cursor-text rounded-md border border-input-border bg-input-box-bg px-3 text-sm text-text-primary outline-none placeholder:text-text-secondary/70 focus-visible:ring-2 focus-visible:ring-focus-ring/40 disabled:cursor-not-allowed";
+function auiInputClass(className) {
+  return cn(baseClasses, className);
+}
+
 // src/atoms/primitives/Tooltip.tsx
-import { cloneElement, isValidElement, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState15 } from "react";
+import { cloneElement, isValidElement, useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState14 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx34, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
 function themePortalRoot(from) {
+  const dialog = from?.closest("dialog");
+  if (dialog instanceof HTMLElement) return dialog;
   return from?.closest(".aui-theme-root") ?? document.body;
 }
 function Tooltip({ content, children, className, side = "top" }) {
-  const [visible, setVisible] = useState15(false);
-  const [pos, setPos] = useState15(null);
+  const [visible, setVisible] = useState14(false);
+  const [pos, setPos] = useState14(null);
   const triggerWrapRef = useRef6(null);
   useLayoutEffect2(() => {
     if (!visible) {
@@ -2391,7 +2267,7 @@ function Tooltip({ content, children, className, side = "top" }) {
     }
   });
   const tooltip = visible && content != null && pos != null ? createPortal(
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx33(
       "span",
       {
         role: "tooltip",
@@ -2416,7 +2292,7 @@ function Tooltip({ content, children, className, side = "top" }) {
   ] });
 }
 function LightTooltip({ title, children, className, size: _size, side }) {
-  return /* @__PURE__ */ jsx34(Tooltip, { content: title, className, side, children });
+  return /* @__PURE__ */ jsx33(Tooltip, { content: title, className, side, children });
 }
 
 // src/atoms/draft/agentCapabilities.ts
@@ -2445,7 +2321,7 @@ function withAgentCapabilities({
 }
 
 // src/atoms/primitives/Switch.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var sizeClasses2 = {
   sm: {
     track: "h-5 w-9 p-0.5",
@@ -2460,7 +2336,7 @@ var sizeClasses2 = {
 };
 function Switch({ checked, onCheckedChange, size = "sm", disabled, className, ...props }) {
   const classes = sizeClasses2[size];
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx34(
     "button",
     {
       ...props,
@@ -2478,7 +2354,7 @@ function Switch({ checked, onCheckedChange, size = "sm", disabled, className, ..
         className
       ),
       onClick: () => onCheckedChange(!checked),
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx34(
         "span",
         {
           "aria-hidden": true,
@@ -2495,7 +2371,7 @@ function Switch({ checked, onCheckedChange, size = "sm", disabled, className, ..
 }
 
 // src/atoms/draft/DraftCapabilitiesPanel.tsx
-import { jsx as jsx36, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs24 } from "react/jsx-runtime";
 var CAPABILITIES = [
   {
     id: "generativeUi",
@@ -2517,9 +2393,38 @@ function DraftCapabilitiesPanel({
   value,
   onChange,
   disabled = false,
-  divided = false
+  divided = false,
+  layout = "list"
 }) {
-  return /* @__PURE__ */ jsx36("div", { className: cn("flex flex-col", divided && "overflow-hidden rounded-xl border border-border"), children: CAPABILITIES.map((capability, index) => {
+  if (layout === "cards") {
+    return /* @__PURE__ */ jsx35("div", { className: "flex flex-col gap-2 sm:flex-row", children: CAPABILITIES.map((capability) => {
+      const checked = value[capability.id];
+      return /* @__PURE__ */ jsxs24(
+        "div",
+        {
+          className: "border-border flex min-w-0 flex-col gap-2 rounded-lg border p-3 sm:flex-1",
+          children: [
+            /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx35("p", { className: "text-text-primary text-sm font-medium", children: capability.label }),
+              /* @__PURE__ */ jsx35(
+                Switch,
+                {
+                  checked,
+                  "aria-label": capability.label,
+                  disabled,
+                  className: "mt-0.5",
+                  onCheckedChange: (nextChecked) => onChange({ ...value, [capability.id]: nextChecked })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx35("p", { className: "text-text-secondary text-xs leading-snug", children: capability.description })
+          ]
+        },
+        capability.id
+      );
+    }) });
+  }
+  return /* @__PURE__ */ jsx35("div", { className: cn("flex flex-col", divided && "overflow-hidden rounded-xl border border-border"), children: CAPABILITIES.map((capability, index) => {
     const checked = value[capability.id];
     return /* @__PURE__ */ jsxs24(
       "div",
@@ -2527,10 +2432,10 @@ function DraftCapabilitiesPanel({
         className: cn("flex items-start gap-3 px-3 py-3", divided && index > 0 && "border-t border-border"),
         children: [
           /* @__PURE__ */ jsxs24("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx36("p", { className: "text-text-primary text-sm font-medium", children: capability.label }),
-            /* @__PURE__ */ jsx36("p", { className: "text-text-secondary mt-0.5 text-xs leading-snug", children: capability.description })
+            /* @__PURE__ */ jsx35("p", { className: "text-text-primary text-sm font-medium", children: capability.label }),
+            /* @__PURE__ */ jsx35("p", { className: "text-text-secondary mt-0.5 text-xs leading-snug", children: capability.description })
           ] }),
-          /* @__PURE__ */ jsx36(
+          /* @__PURE__ */ jsx35(
             Switch,
             {
               checked,
@@ -2547,8 +2452,39 @@ function DraftCapabilitiesPanel({
   }) });
 }
 
+// src/atoms/draft/DraftCatalogEmptyState.tsx
+import { jsx as jsx36, jsxs as jsxs25 } from "react/jsx-runtime";
+function DraftCatalogEmptyState({
+  loading,
+  emptyLabel,
+  settingsTarget,
+  onOpenSettings
+}) {
+  if (!loading && onOpenSettings) {
+    return /* @__PURE__ */ jsxs25(
+      "button",
+      {
+        type: "button",
+        className: auiButtonClass({
+          variant: "ghost",
+          className: "text-text-secondary w-full justify-center gap-1 py-4 text-xs"
+        }),
+        onClick: onOpenSettings,
+        children: [
+          "Please configure ",
+          settingsTarget,
+          " in the ",
+          /* @__PURE__ */ jsx36("span", { className: "underline", children: "settings" }),
+          /* @__PURE__ */ jsx36(Icon, { name: "chevron-right", className: "size-3" })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx36("p", { className: "text-text-secondary px-2 py-4 text-center text-sm", children: loading ? "Loading\u2026" : emptyLabel });
+}
+
 // src/atoms/draft/DraftCompositeSelector.tsx
-import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function draftMountsFromSpec(value) {
   if (!Array.isArray(value)) return [];
   const mounts = [];
@@ -2588,15 +2524,15 @@ function CatalogRow({
   onToggle,
   action
 }) {
-  const content = /* @__PURE__ */ jsxs25(Fragment6, { children: [
+  const content = /* @__PURE__ */ jsxs26(Fragment6, { children: [
     /* @__PURE__ */ jsx37("span", { className: "bg-secondary-bg text-text-secondary mt-0.5 flex size-7 shrink-0 items-center justify-center rounded text-xs font-semibold", children: title.charAt(0).toUpperCase() }),
-    /* @__PURE__ */ jsxs25("span", { className: "min-w-0 flex-1", children: [
+    /* @__PURE__ */ jsxs26("span", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx37("span", { className: "text-text-primary block truncate text-sm font-medium", children: title }),
       description ? /* @__PURE__ */ jsx37("span", { className: "text-text-secondary line-clamp-1 text-xs", children: description }) : null
     ] })
   ] });
   if (action) {
-    return /* @__PURE__ */ jsxs25(
+    return /* @__PURE__ */ jsxs26(
       "div",
       {
         role: "menuitemcheckbox",
@@ -2617,7 +2553,7 @@ function CatalogRow({
       }
     );
   }
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     "button",
     {
       type: "button",
@@ -2667,7 +2603,7 @@ function SearchField({
   onChange,
   placeholder
 }) {
-  return /* @__PURE__ */ jsxs25("label", { className: "relative mx-3 my-2 block", children: [
+  return /* @__PURE__ */ jsxs26("label", { className: "relative mx-3 my-2 block", children: [
     /* @__PURE__ */ jsx37(
       Icon,
       {
@@ -2682,13 +2618,13 @@ function SearchField({
         value,
         onChange: (e) => onChange(e.target.value),
         placeholder,
-        className: "border-input-border bg-secondary-bg/40 text-text-primary placeholder:text-text-secondary h-8 w-full rounded-md border-0 py-1 pr-2 pl-7 text-sm outline-none focus-visible:ring-2 focus-visible:ring-focus-ring/40"
+        className: auiInputClass("h-8 bg-secondary-bg py-1 pr-2 pl-7 dark:bg-primary-bg")
       }
     )
   ] });
 }
 function SectionHeading({ label, count }) {
-  return /* @__PURE__ */ jsxs25("div", { className: "text-text-secondary px-3 pt-2 pb-1 text-[11px] font-medium tracking-wide uppercase", children: [
+  return /* @__PURE__ */ jsxs26("div", { className: "text-text-secondary px-3 pt-2 pb-1 text-[11px] font-medium tracking-wide uppercase", children: [
     label,
     " (",
     count,
@@ -2696,17 +2632,19 @@ function SectionHeading({ label, count }) {
   ] });
 }
 function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
-  const { skills, connectors, ensureLoaded, refreshConnectors } = useDraftCatalog();
+  const { skills, connectors, loading, ensureLoaded, refreshConnectors } = useDraftCatalog();
   const capabilities = useServerCapabilities();
+  const settingsCatalog = useOptionalCatalogServer();
+  const shell = useOptionalShellMode();
   const { agentSpec } = useTrueFoundryAgentSpec3();
   const updateAgentSpec = useTrueFoundryUpdateAgentSpec2();
-  const [open, setOpen] = useState16(false);
-  const [tab, setTab] = useState16("connectors");
-  const [query, setQuery] = useState16("");
-  const [pinnedMcpIds, setPinnedMcpIds] = useState16(() => /* @__PURE__ */ new Set());
-  const [pinnedSkillIds, setPinnedSkillIds] = useState16(() => /* @__PURE__ */ new Set());
-  const [localMcp, setLocalMcp] = useState16([]);
-  const [localSkills, setLocalSkills] = useState16([]);
+  const [open, setOpen] = useState15(false);
+  const [tab, setTab] = useState15("connectors");
+  const [query, setQuery] = useState15("");
+  const [pinnedMcpIds, setPinnedMcpIds] = useState15(() => /* @__PURE__ */ new Set());
+  const [pinnedSkillIds, setPinnedSkillIds] = useState15(() => /* @__PURE__ */ new Set());
+  const [localMcp, setLocalMcp] = useState15([]);
+  const [localSkills, setLocalSkills] = useState15([]);
   const dirtyRef = useRef7(false);
   const flushTimerRef = useRef7(null);
   const localMcpRef = useRef7(localMcp);
@@ -2719,15 +2657,20 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
   const compactLayout = useCompactLayout();
   const skillsDisabled = capabilities?.skill.enabled !== true;
   const skillsDisabledReason = capabilities?.skill.reason;
-  const specMcp = useMemo4(() => draftMountsFromSpec(agentSpec?.mcpServers), [agentSpec?.mcpServers]);
-  const specSkills = useMemo4(() => draftMountsFromSpec(agentSpec?.skills), [agentSpec?.skills]);
+  const needsSandbox = capabilities?.sandbox.enabled === false;
+  const settingsEnabled = capabilities?.settings?.enabled !== false;
+  const canConfigureConnectors = settingsEnabled && settingsCatalog?.connectorCatalog != null;
+  const canConfigureSkills = settingsEnabled && settingsCatalog?.skillCatalog != null;
+  const canConfigureSandbox = settingsEnabled && settingsCatalog?.sandboxCatalog != null;
+  const specMcp = useMemo3(() => draftMountsFromSpec(agentSpec?.mcpServers), [agentSpec?.mcpServers]);
+  const specSkills = useMemo3(() => draftMountsFromSpec(agentSpec?.skills), [agentSpec?.skills]);
   const selectedMcp = open ? localMcp : specMcp;
   const selectedSkills = open ? localSkills : specSkills;
-  const selectedMcpIds = useMemo4(() => new Set(selectedMcp.map((m) => m.id)), [selectedMcp]);
-  const selectedSkillIds = useMemo4(() => new Set(selectedSkills.map((s) => s.id)), [selectedSkills]);
+  const selectedMcpIds = useMemo3(() => new Set(selectedMcp.map((m) => m.id)), [selectedMcp]);
+  const selectedSkillIds = useMemo3(() => new Set(selectedSkills.map((s) => s.id)), [selectedSkills]);
   const hasValidModel = Boolean(agentSpec?.model?.name.trim());
   const toolsCount = selectedMcp.length + selectedSkills.length;
-  const toolsTooltip = useMemo4(() => {
+  const toolsTooltip = useMemo3(() => {
     const formatNames = (items) => {
       const names = items.map((item) => item.name);
       if (names.length <= 4) return names.join(", ");
@@ -2742,13 +2685,13 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
     }
     return lines.length > 0 ? lines.join("\n") : "No connectors or skills selected";
   }, [selectedMcp, selectedSkills]);
-  const clearFlushTimer = useCallback6(() => {
+  const clearFlushTimer = useCallback5(() => {
     if (flushTimerRef.current != null) {
       window.clearTimeout(flushTimerRef.current);
       flushTimerRef.current = null;
     }
   }, []);
-  const flushSpec = useCallback6(() => {
+  const flushSpec = useCallback5(() => {
     clearFlushTimer();
     if (!dirtyRef.current) return;
     dirtyRef.current = false;
@@ -2757,29 +2700,29 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
       skills: localSkillsRef.current
     });
   }, [clearFlushTimer, updateAgentSpec]);
-  const scheduleFlush = useCallback6(() => {
+  const scheduleFlush = useCallback5(() => {
     clearFlushTimer();
     flushTimerRef.current = window.setTimeout(() => {
       flushTimerRef.current = null;
       flushSpec();
     }, SPEC_FLUSH_MS);
   }, [clearFlushTimer, flushSpec]);
-  const setOpenAndFlush = useCallback6(
+  const setOpenAndFlush = useCallback5(
     (next) => {
       if (!next) flushSpec();
       setOpen(next);
     },
     [flushSpec]
   );
-  useEffect10(() => {
+  useEffect9(() => {
     if (open) ensureLoaded();
   }, [open, ensureLoaded]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (open && !hasValidModel) {
       setOpenAndFlush(false);
     }
   }, [hasValidModel, open, setOpenAndFlush]);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -2793,8 +2736,8 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
       document.removeEventListener("focusin", handler);
     };
   }, [open, setOpenAndFlush]);
-  useEffect10(() => () => clearFlushTimer(), [clearFlushTimer]);
-  const filteredConnectors = useMemo4(() => {
+  useEffect9(() => () => clearFlushTimer(), [clearFlushTimer]);
+  const filteredConnectors = useMemo3(() => {
     const needle = query.trim().toLowerCase();
     const matches = needle ? connectors.filter(
       (c) => c.name.toLowerCase().includes(needle) || (c.description?.toLowerCase().includes(needle) ?? false)
@@ -2803,26 +2746,26 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
       (left, right) => Number(isUnauthenticatedDcrConnector(left)) - Number(isUnauthenticatedDcrConnector(right))
     );
   }, [connectors, query]);
-  const filteredSkills = useMemo4(() => {
+  const filteredSkills = useMemo3(() => {
     const needle = query.trim().toLowerCase();
     if (!needle) return skills;
     return skills.filter(
       (s) => s.name.toLowerCase().includes(needle) || (s.description?.toLowerCase().includes(needle) ?? false)
     );
   }, [skills, query]);
-  const pinnedSelectedConnectors = useMemo4(
+  const pinnedSelectedConnectors = useMemo3(
     () => filteredConnectors.filter((c) => pinnedMcpIds.has(c.id)),
     [filteredConnectors, pinnedMcpIds]
   );
-  const pinnedAvailableConnectors = useMemo4(
+  const pinnedAvailableConnectors = useMemo3(
     () => filteredConnectors.filter((c) => !pinnedMcpIds.has(c.id)),
     [filteredConnectors, pinnedMcpIds]
   );
-  const pinnedSelectedSkills = useMemo4(
+  const pinnedSelectedSkills = useMemo3(
     () => filteredSkills.filter((s) => pinnedSkillIds.has(s.id)),
     [filteredSkills, pinnedSkillIds]
   );
-  const pinnedAvailableSkills = useMemo4(
+  const pinnedAvailableSkills = useMemo3(
     () => filteredSkills.filter((s) => !pinnedSkillIds.has(s.id)),
     [filteredSkills, pinnedSkillIds]
   );
@@ -2854,11 +2797,16 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
     setPinnedSkillIds(new Set(specSkills.map((s) => s.id)));
     setOpen(true);
   };
-  const content = /* @__PURE__ */ jsxs25(Fragment6, { children: [
+  const openSettings = (section) => {
+    setOpenAndFlush(false);
+    setQuery("");
+    shell?.setSettingsOpen(true, section);
+  };
+  const content = /* @__PURE__ */ jsxs26(Fragment6, { children: [
     /* @__PURE__ */ jsx37("div", { className: "flex shrink-0 border-b border-border", children: TABS.map((t) => {
       const count = t.id === "connectors" ? selectedMcp.length : t.id === "skills" ? selectedSkills.length : null;
       const active = tab === t.id;
-      return /* @__PURE__ */ jsxs25(
+      return /* @__PURE__ */ jsxs26(
         "button",
         {
           type: "button",
@@ -2896,7 +2844,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
           });
         }
       }
-    ) }) : /* @__PURE__ */ jsxs25(Fragment6, { children: [
+    ) }) : /* @__PURE__ */ jsxs26(Fragment6, { children: [
       /* @__PURE__ */ jsx37(
         SearchField,
         {
@@ -2905,7 +2853,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
           placeholder: tab === "connectors" ? "Search connectors..." : "Search skills..."
         }
       ),
-      tab === "skills" && skillsDisabled && skillsDisabledReason ? /* @__PURE__ */ jsxs25(
+      tab === "skills" && skillsDisabled && skillsDisabledReason ? /* @__PURE__ */ jsxs26(
         "div",
         {
           role: "status",
@@ -2916,8 +2864,8 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
           ]
         }
       ) : null,
-      /* @__PURE__ */ jsx37("div", { className: "min-h-0 flex-1 overflow-y-auto px-1 pb-2", children: tab === "connectors" ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
-        pinnedSelectedConnectors.length > 0 ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+      /* @__PURE__ */ jsx37("div", { className: "min-h-0 flex-1 overflow-y-auto px-1 pb-2", children: tab === "connectors" ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
+        pinnedSelectedConnectors.length > 0 ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx37(SectionHeading, { label: "Selected", count: pinnedSelectedConnectors.length }),
           pinnedSelectedConnectors.map((c) => /* @__PURE__ */ jsx37(
             CatalogRow,
@@ -2931,7 +2879,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
             c.id
           ))
         ] }) : null,
-        pinnedAvailableConnectors.length > 0 ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        pinnedAvailableConnectors.length > 0 ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx37(SectionHeading, { label: "Available", count: pinnedAvailableConnectors.length }),
           pinnedAvailableConnectors.map((c) => /* @__PURE__ */ jsx37(
             CatalogRow,
@@ -2944,9 +2892,18 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
             },
             c.id
           ))
-        ] }) : null
-      ] }) : /* @__PURE__ */ jsxs25(Fragment6, { children: [
-        pinnedSelectedSkills.length > 0 ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        ] }) : null,
+        filteredConnectors.length === 0 ? /* @__PURE__ */ jsx37(
+          DraftCatalogEmptyState,
+          {
+            loading,
+            emptyLabel: "No connectors",
+            settingsTarget: "Connectors",
+            onOpenSettings: connectors.length === 0 && shell && canConfigureConnectors ? () => openSettings("connectors") : void 0
+          }
+        ) : null
+      ] }) : /* @__PURE__ */ jsxs26(Fragment6, { children: [
+        pinnedSelectedSkills.length > 0 ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx37(SectionHeading, { label: "Selected", count: pinnedSelectedSkills.length }),
           pinnedSelectedSkills.map((s) => /* @__PURE__ */ jsx37(
             CatalogRow,
@@ -2960,7 +2917,7 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
             s.id
           ))
         ] }) : null,
-        pinnedAvailableSkills.length > 0 ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
+        pinnedAvailableSkills.length > 0 ? /* @__PURE__ */ jsxs26(Fragment6, { children: [
           /* @__PURE__ */ jsx37(SectionHeading, { label: "Available", count: pinnedAvailableSkills.length }),
           pinnedAvailableSkills.map((s) => /* @__PURE__ */ jsx37(
             CatalogRow,
@@ -2973,12 +2930,21 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
             },
             s.id
           ))
-        ] }) : null
+        ] }) : null,
+        filteredSkills.length === 0 ? /* @__PURE__ */ jsx37(
+          DraftCatalogEmptyState,
+          {
+            loading,
+            emptyLabel: "No skills",
+            settingsTarget: needsSandbox ? "a Sandbox" : "Skills",
+            onOpenSettings: skills.length === 0 && shell && (needsSandbox ? canConfigureSandbox : canConfigureSkills) ? () => openSettings(needsSandbox ? "sandbox" : "skills") : void 0
+          }
+        ) : null
       ] }) })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs25("div", { ref: containerRef, className: "relative flex flex-wrap items-center gap-1.5", children: [
-    hasValidModel ? /* @__PURE__ */ jsx37(Tooltip, { content: toolsTooltip, className: "max-w-xs whitespace-pre-line text-left", side: "top", children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26("div", { ref: containerRef, className: "relative flex flex-wrap items-center gap-1.5", children: [
+    hasValidModel ? /* @__PURE__ */ jsx37(Tooltip, { content: toolsTooltip, className: "max-w-xs whitespace-pre-line text-left", side: "top", children: /* @__PURE__ */ jsxs26(
       "button",
       {
         type: "button",
@@ -3032,16 +2998,10 @@ function DraftCompositeSelector({ disabled, isRunning, onAttach }) {
 
 // src/atoms/draft/DraftModelSelector.tsx
 import { useTrueFoundryAgentSpec as useTrueFoundryAgentSpec4, useTrueFoundryUpdateAgentSpec as useTrueFoundryUpdateAgentSpec3 } from "@truefoundry/assistant-ui-runtime";
-import { useEffect as useEffect12, useId as useId5, useRef as useRef8, useState as useState18 } from "react";
-
-// src/atoms/lib/inputClasses.ts
-var baseClasses = "w-full cursor-text rounded-md border border-input-border bg-input-box-bg px-3 text-sm text-text-primary outline-none placeholder:text-text-secondary/70 focus-visible:ring-2 focus-visible:ring-focus-ring/40 disabled:cursor-not-allowed";
-function auiInputClass(className) {
-  return cn(baseClasses, className);
-}
+import { useEffect as useEffect11, useId as useId5, useRef as useRef8, useState as useState17 } from "react";
 
 // src/atoms/primitives/CatalogLogo.tsx
-import { useEffect as useEffect11, useState as useState17 } from "react";
+import { useEffect as useEffect10, useState as useState16 } from "react";
 
 // src/utils/catalogLogo.ts
 function splitCatalogLogoUrl(src) {
@@ -3074,8 +3034,8 @@ import { createElement } from "react";
 function CatalogLogo({ src, alt = "", onError, ...props }) {
   const mode = useThemeMode();
   const preferred = resolveCatalogLogoSrc({ src, mode });
-  const [failedPreferred, setFailedPreferred] = useState17(false);
-  useEffect11(() => {
+  const [failedPreferred, setFailedPreferred] = useState16(false);
+  useEffect10(() => {
     setFailedPreferred(false);
   }, [src, mode, preferred]);
   const canFallback = preferred !== src;
@@ -3099,7 +3059,7 @@ function CatalogLogo({ src, alt = "", onError, ...props }) {
 }
 
 // src/atoms/draft/DraftModelCatalogPanel.tsx
-import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx38, jsxs as jsxs27 } from "react/jsx-runtime";
 function monogram(value) {
   const trimmed = value.trim();
   return trimmed ? trimmed.charAt(0).toUpperCase() : "?";
@@ -3157,10 +3117,10 @@ function DraftModelCatalogPanel({
     (model) => model.name.toLowerCase().includes(needle) || model.id.toLowerCase().includes(needle) || model.provider.name.toLowerCase().includes(needle)
   ) : models;
   const sections = groupModelsByProvider(filtered);
-  return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-    /* @__PURE__ */ jsxs26("div", { className: "border-b border-border px-3 py-2", children: [
+  return /* @__PURE__ */ jsxs27(Fragment7, { children: [
+    /* @__PURE__ */ jsxs27("div", { className: "border-b border-border px-3 py-2", children: [
       showHeading ? /* @__PURE__ */ jsx38("p", { className: "text-text-primary mb-2 text-sm font-semibold", children: "Select model" }) : null,
-      /* @__PURE__ */ jsxs26("label", { className: "relative block", children: [
+      /* @__PURE__ */ jsxs27("label", { className: "relative block", children: [
         /* @__PURE__ */ jsx38(
           Icon,
           {
@@ -3188,31 +3148,24 @@ function DraftModelCatalogPanel({
         role: "listbox",
         "aria-label": "Select model",
         className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-1",
-        children: filtered.length === 0 ? !loading && onOpenSettings ? /* @__PURE__ */ jsxs26(
-          "button",
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx38(
+          DraftCatalogEmptyState,
           {
-            type: "button",
-            className: auiButtonClass({
-              variant: "ghost",
-              className: "text-text-secondary w-full justify-center py-4 text-sm"
-            }),
-            onClick: onOpenSettings,
-            children: [
-              "Please configure Models in the ",
-              /* @__PURE__ */ jsx38("span", { className: "underline", children: "settings" }),
-              /* @__PURE__ */ jsx38(Icon, { name: "chevron-right", className: "size-3.5" })
-            ]
+            loading,
+            emptyLabel: "No models",
+            settingsTarget: "Models",
+            onOpenSettings
           }
-        ) : /* @__PURE__ */ jsx38("p", { className: "text-text-secondary px-2 py-4 text-center text-sm", children: loading ? "Loading\u2026" : "No models" }) : sections.map((section, sectionIndex) => {
+        ) : sections.map((section, sectionIndex) => {
           const headingId = `${listboxId}-provider-${sectionIndex}`;
-          return /* @__PURE__ */ jsxs26(
+          return /* @__PURE__ */ jsxs27(
             "div",
             {
               role: "group",
               "aria-labelledby": headingId,
               className: cn(sectionIndex > 0 && "mt-2"),
               children: [
-                /* @__PURE__ */ jsxs26(
+                /* @__PURE__ */ jsxs27(
                   "div",
                   {
                     id: headingId,
@@ -3225,7 +3178,7 @@ function DraftModelCatalogPanel({
                 ),
                 section.models.map((model) => {
                   const active = selectedName ? model.name === selectedName : filtered[0] === model;
-                  return /* @__PURE__ */ jsxs26(
+                  return /* @__PURE__ */ jsxs27(
                     "button",
                     {
                       type: "button",
@@ -3255,25 +3208,25 @@ function DraftModelCatalogPanel({
 }
 
 // src/atoms/draft/DraftModelSelector.tsx
-import { jsx as jsx39, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs28 } from "react/jsx-runtime";
 function DraftModelSelector({ disabled, isRunning }) {
   const { models, loading, ensureLoaded } = useDraftCatalog();
   const { agentSpec } = useTrueFoundryAgentSpec4();
   const updateAgentSpec = useTrueFoundryUpdateAgentSpec3();
   const catalog = useOptionalCatalogServer();
   const shell = useOptionalShellMode();
-  const [open, setOpen] = useState18(false);
-  const [query, setQuery] = useState18("");
+  const [open, setOpen] = useState17(false);
+  const [query, setQuery] = useState17("");
   const containerRef = useRef8(null);
   const menuId = useId5();
   const isMobile = useIsMobile();
   const compactLayout = useCompactLayout();
   const showConfigureSettingsCta = !loading && models.length === 0 && catalog != null;
   const seededDefaultModelRef = useRef8(null);
-  useEffect12(() => {
+  useEffect11(() => {
     ensureLoaded();
   }, [ensureLoaded]);
-  useEffect12(() => {
+  useEffect11(() => {
     if (!updateAgentSpec || loading || models.length === 0) return;
     const first = models[0];
     if (first === void 0) return;
@@ -3295,7 +3248,7 @@ function DraftModelSelector({ disabled, isRunning }) {
   const selectedName = agentSpec?.model?.name ?? models[0]?.name ?? "";
   const selected = models.find((m) => m.name === selectedName);
   const label = selected ? displayModelLabel2(selected.name) : selectedName ? displayModelLabel2(selectedName) : loading ? "Loading\u2026" : "Select model";
-  useEffect12(() => {
+  useEffect11(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -3318,7 +3271,7 @@ function DraftModelSelector({ disabled, isRunning }) {
       onOpenSettings: showConfigureSettingsCta ? () => {
         setOpen(false);
         setQuery("");
-        shell?.setSettingsOpen(true);
+        shell?.setSettingsOpen(true, "models");
       } : void 0,
       onSelect: (model) => {
         updateAgentSpec?.({
@@ -3329,8 +3282,8 @@ function DraftModelSelector({ disabled, isRunning }) {
       }
     }
   );
-  return /* @__PURE__ */ jsxs27("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs28(
       "button",
       {
         type: "button",
@@ -3377,12 +3330,12 @@ var HistoryLoader = forwardRef(
 HistoryLoader.displayName = "HistoryLoader";
 
 // src/atoms/Markdown.tsx
-import { useMemo as useMemo5, useRef as useRef9 } from "react";
+import { useMemo as useMemo4, useRef as useRef9 } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Fragment as Fragment8, jsx as jsx41 } from "react/jsx-runtime";
 function preloadMarkdownOpenUI() {
-  return import("./OpenUiFenceBlock-SLLZSTMJ.js");
+  return import("./OpenUiFenceBlock-XFBUGPKQ.js");
 }
 var LARGE_STREAMING_FENCE_CHARS = 8 * 1024;
 function getActiveStreamingFenceCode(content) {
@@ -3476,7 +3429,7 @@ function Markdown({
   const SyntaxHighlighter2 = useSlot("SyntaxHighlighter");
   const activeFenceCodeRef = useRef9(null);
   activeFenceCodeRef.current = isStreaming === true ? getActiveStreamingFenceCode(content) : null;
-  const components = useMemo5(
+  const components = useMemo4(
     () => makeComponents({
       isStreaming,
       getActiveFenceCode: () => activeFenceCodeRef.current,
@@ -3511,11 +3464,11 @@ function Markdown({
 }
 
 // src/atoms/MessageActionBar.tsx
-import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
 var actionBtnClass = "h-6 w-6 text-text-secondary hover:text-text-primary [&_svg]:size-3.5";
 function MessageActionBar({ isCopied, onCopy, createdAt, className }) {
   const MessageTimestamp2 = useSlot("MessageTimestamp");
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn("aui-assistant-action-bar-root animate-in fade-in flex items-center gap-1 duration-200", className),
@@ -3593,7 +3546,7 @@ function MessageTimestamp({ createdAt, className }) {
 }
 
 // src/atoms/MonacoEditorCore.tsx
-import { useEffect as useEffect13, useRef as useRef10, useState as useState19 } from "react";
+import { useEffect as useEffect12, useRef as useRef10, useState as useState18 } from "react";
 import { jsx as jsx46 } from "react/jsx-runtime";
 var AUI_MONACO_LIGHT = "aui-monaco-light";
 var AUI_MONACO_DARK = "aui-monaco-dark";
@@ -3707,7 +3660,7 @@ function MonacoEditorCore({
   const maxPx = toPx(maxHeight, toPx(DEFAULT_MAX_HEIGHT, 168));
   const clampRef = useRef10({ minPx, maxPx, autoHeight });
   clampRef.current = { minPx, maxPx, autoHeight };
-  const [autoPx, setAutoPx] = useState19(() => autoHeight ? estimateHeightFromValue(value, minPx, maxPx) : 0);
+  const [autoPx, setAutoPx] = useState18(() => autoHeight ? estimateHeightFromValue(value, minPx, maxPx) : 0);
   const resolvedTheme = resolveThemeName(theme, classNames.monaco?.monacoTheme, mode);
   const syncAutoHeight = () => {
     const editor = editorRef.current;
@@ -3720,7 +3673,7 @@ function MonacoEditorCore({
     editor.layout();
     onAutoHeightChangeRef.current?.(next);
   };
-  useEffect13(() => {
+  useEffect12(() => {
     if (!containerRef.current) return;
     let editor = null;
     let changeDisposable = null;
@@ -3760,7 +3713,7 @@ function MonacoEditorCore({
       monacoRef.current = null;
     };
   }, []);
-  useEffect13(() => {
+  useEffect12(() => {
     const editor = editorRef.current;
     if (editor && editor.getValue() !== value) {
       editor.setValue(value);
@@ -3769,12 +3722,12 @@ function MonacoEditorCore({
       }
     }
   }, [value, autoHeight, minPx, maxPx]);
-  useEffect13(() => {
+  useEffect12(() => {
     if (autoHeight) {
       requestAnimationFrame(() => syncAutoHeight());
     }
   }, [autoHeight, minPx, maxPx]);
-  useEffect13(() => {
+  useEffect12(() => {
     monacoRef.current?.editor.setTheme(resolvedTheme);
   }, [resolvedTheme]);
   const styleHeight = autoHeight ? autoPx : typeof height === "number" ? height : height;
@@ -3790,7 +3743,7 @@ function MonacoEditorCore({
 }
 
 // src/atoms/SandboxArtifactDownload.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo5 } from "react";
 import { jsx as jsx47 } from "react/jsx-runtime";
 var PREFIX = "sandbox_artifacts";
 var PAIR_RE = /\[([^\]]*)\]\(([^)]*)\)/g;
@@ -3824,7 +3777,7 @@ function SandboxArtifactDownload({
   readOnly
 }) {
   const ChatFileDownload2 = useSlot("ChatFileDownload");
-  const artifacts = useMemo6(() => parseSandboxArtifacts(code), [code]);
+  const artifacts = useMemo5(() => parseSandboxArtifacts(code), [code]);
   if (artifacts.length === 0) return null;
   return /* @__PURE__ */ jsx47(
     ChatFileDownload2,
@@ -3838,7 +3791,7 @@ function SandboxArtifactDownload({
 }
 
 // src/atoms/SandboxToolCallCard.tsx
-import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 function JsonPane({ value, className }) {
   const MonacoEditorCore2 = useSlot("MonacoEditorCore");
   return /* @__PURE__ */ jsx48(
@@ -3872,22 +3825,22 @@ function SandboxBody({
   onViewModeChange,
   dataTestPrefix
 }) {
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: "rounded-lg border border-border bg-primary-bg",
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-sandbox` : void 0,
       children: [
-        /* @__PURE__ */ jsx48("div", { className: "rounded-t-md border-b border-primary-button-bg/30 bg-primary-button-bg/10", children: /* @__PURE__ */ jsxs29("div", { className: "flex w-full min-w-0 items-center gap-2 px-3 py-1.5", children: [
+        /* @__PURE__ */ jsx48("div", { className: "rounded-t-md border-b border-primary-button-bg/30 bg-primary-button-bg/10", children: /* @__PURE__ */ jsxs30("div", { className: "flex w-full min-w-0 items-center gap-2 px-3 py-1.5", children: [
           /* @__PURE__ */ jsx48("p", { className: "min-w-0 font-sans text-xs font-medium text-primary-button-bg", children: "sandbox" }),
-          /* @__PURE__ */ jsxs29(
+          /* @__PURE__ */ jsxs30(
             "div",
             {
               className: "ml-auto flex shrink-0 items-center gap-1.5",
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
               children: [
-                exitCode != null && /* @__PURE__ */ jsxs29(
+                exitCode != null && /* @__PURE__ */ jsxs30(
                   "span",
                   {
                     className: cn(
@@ -3902,7 +3855,7 @@ function SandboxBody({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxs29(
+                /* @__PURE__ */ jsxs30(
                   "div",
                   {
                     className: "inline-flex h-6 items-center rounded-md border border-border bg-primary-bg p-0.5",
@@ -3946,33 +3899,33 @@ function SandboxBody({
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx48("div", { className: "rounded-b-lg border border-t-0 border-border p-3", children: hasContent && /* @__PURE__ */ jsx48("div", { className: "max-h-80 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs text-text-primary", children: viewMode === "code" ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
-          argsJson && /* @__PURE__ */ jsxs29("div", { className: "my-1 border-l-4 border-primary-button-bg px-3", children: [
+        /* @__PURE__ */ jsx48("div", { className: "rounded-b-lg border border-t-0 border-border p-3", children: hasContent && /* @__PURE__ */ jsx48("div", { className: "max-h-80 overflow-x-hidden overflow-y-auto whitespace-pre-wrap break-words font-mono text-xs text-text-primary", children: viewMode === "code" ? /* @__PURE__ */ jsxs30(Fragment9, { children: [
+          argsJson && /* @__PURE__ */ jsxs30("div", { className: "my-1 border-l-4 border-primary-button-bg px-3", children: [
             /* @__PURE__ */ jsx48("div", { className: "mb-1 font-sans text-xs font-medium leading-4", children: "Arguments" }),
             /* @__PURE__ */ jsx48(JsonPane, { value: argsJson, className: "pl-2" })
           ] }),
-          resultJson && /* @__PURE__ */ jsxs29("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
+          resultJson && /* @__PURE__ */ jsxs30("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
             /* @__PURE__ */ jsx48("div", { className: "mb-1 mt-2 font-sans text-xs font-medium leading-4", children: "Result" }),
             /* @__PURE__ */ jsx48(JsonPane, { value: resultJson, className: "pl-2" })
           ] })
-        ] }) : /* @__PURE__ */ jsxs29(Fragment9, { children: [
-          command && /* @__PURE__ */ jsxs29("div", { className: "my-1 break-all border-l-4 border-primary-button-bg px-3", children: [
+        ] }) : /* @__PURE__ */ jsxs30(Fragment9, { children: [
+          command && /* @__PURE__ */ jsxs30("div", { className: "my-1 break-all border-l-4 border-primary-button-bg px-3", children: [
             /* @__PURE__ */ jsx48("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "COMMAND" }),
-            /* @__PURE__ */ jsxs29("div", { children: [
+            /* @__PURE__ */ jsxs30("div", { children: [
               /* @__PURE__ */ jsx48("span", { className: "text-primary-button-bg", children: "$" }),
               " ",
               command
             ] })
           ] }),
-          resultText ? /* @__PURE__ */ jsxs29(Fragment9, { children: [
+          resultText ? /* @__PURE__ */ jsxs30(Fragment9, { children: [
             /* @__PURE__ */ jsx48("div", { className: "mx-3 my-1 border-t border-border" }),
-            /* @__PURE__ */ jsxs29("div", { className: "my-1 break-all border-l-4 border-primary-button-bg/60 px-3", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "my-1 break-all border-l-4 border-primary-button-bg/60 px-3", children: [
               /* @__PURE__ */ jsx48("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "OUTPUT" }),
               /* @__PURE__ */ jsx48("div", { children: resultText })
             ] })
-          ] }) : resultJson && /* @__PURE__ */ jsxs29(Fragment9, { children: [
+          ] }) : resultJson && /* @__PURE__ */ jsxs30(Fragment9, { children: [
             /* @__PURE__ */ jsx48("div", { className: "mx-3 my-1 border-t border-border" }),
-            /* @__PURE__ */ jsxs29("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
+            /* @__PURE__ */ jsxs30("div", { className: "my-1 border-l-4 border-primary-button-bg/60 px-3", children: [
               /* @__PURE__ */ jsx48("div", { className: "mb-1 text-[12px] font-medium leading-4 text-text-secondary", children: "OUTPUT" }),
               /* @__PURE__ */ jsx48(JsonPane, { value: resultJson, className: "pl-2" })
             ] })
@@ -4041,8 +3994,8 @@ import {
   useTrueFoundryAgentSpec as useTrueFoundryAgentSpec5,
   useTrueFoundryFlushAgentSpec
 } from "@truefoundry/assistant-ui-runtime";
-import { useEffect as useEffect14, useId as useId6, useMemo as useMemo7, useRef as useRef11, useState as useState20 } from "react";
-import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useId as useId6, useMemo as useMemo6, useRef as useRef11, useState as useState19 } from "react";
+import { Fragment as Fragment10, jsx as jsx49, jsxs as jsxs31 } from "react/jsx-runtime";
 function editableMountsFromSpec(value) {
   if (!Array.isArray(value)) return [];
   const mounts = [];
@@ -4055,32 +4008,94 @@ function editableMountsFromSpec(value) {
   }
   return mounts;
 }
-function SummarySection({
-  icon,
-  title,
-  value,
+function ConfigSection({
+  label,
   onEdit,
-  disabled
+  disabled,
+  children
 }) {
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-3 border-b border-border px-5 py-3.5 last:border-b-0", children: [
-    /* @__PURE__ */ jsx49(Icon, { name: icon, className: "text-text-secondary size-4 shrink-0" }),
-    /* @__PURE__ */ jsxs30("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx49("p", { className: "text-text-primary text-sm font-medium", children: title }),
-      /* @__PURE__ */ jsx49("p", { className: "text-text-secondary mt-0.5 truncate text-xs", children: value })
+  return /* @__PURE__ */ jsxs31("div", { className: "mb-3", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "mb-1.5 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx49("span", { className: "text-text-secondary text-xs font-semibold tracking-wide uppercase", children: label }),
+      /* @__PURE__ */ jsx49(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Edit ${label}`,
+          disabled,
+          className: auiButtonClass({ variant: "ghost", size: "icon", className: "size-7" }),
+          onClick: onEdit,
+          children: /* @__PURE__ */ jsx49(Icon, { name: "pencil", className: "size-3.5" })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsx49(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Edit ${title}`,
-        disabled,
-        className: auiButtonClass({ variant: "ghost", size: "icon", className: "size-8" }),
-        onClick: onEdit,
-        children: /* @__PURE__ */ jsx49(Icon, { name: "pencil", className: "size-3.5" })
-      }
-    )
+    children
   ] });
 }
+var PRELOAD_TOOLS_COPY = {
+  header: "Preload tools",
+  on: "Tool definitions load into context upfront. No discovery step, but uses more context.",
+  off: "The agent discovers tools on demand. Lighter context upfront, but a discovery step the first time it needs a tool."
+};
+function PreloadToggle({ on, disabled, onToggle }) {
+  const label = `${PRELOAD_TOOLS_COPY.header} \xB7 ${on ? "ON" : "OFF"}`;
+  const body = on ? PRELOAD_TOOLS_COPY.on : PRELOAD_TOOLS_COPY.off;
+  return /* @__PURE__ */ jsx49(
+    Tooltip,
+    {
+      className: "max-w-[17rem] whitespace-normal",
+      content: /* @__PURE__ */ jsxs31("div", { className: "text-left", children: [
+        /* @__PURE__ */ jsx49("p", { className: "mb-1 text-[11px] font-semibold tracking-wide uppercase", children: label }),
+        /* @__PURE__ */ jsx49("p", { className: "text-xs leading-snug", children: body })
+      ] }),
+      children: /* @__PURE__ */ jsx49(
+        "button",
+        {
+          type: "button",
+          "aria-label": label,
+          "aria-pressed": on,
+          disabled,
+          onClick: onToggle,
+          className: cn(
+            "flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md border",
+            "transition-[color,background-color,border-color,transform] active:scale-90",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring/40",
+            "disabled:cursor-not-allowed disabled:opacity-50 disabled:active:scale-100",
+            on ? "border-primary-button-bg/40 bg-primary-button-bg/10 text-primary-button-bg hover:border-primary-button-bg/70 hover:bg-primary-button-bg/20" : "border-border text-text-secondary hover:border-text-secondary/50 hover:bg-text-secondary/10 hover:text-text-primary"
+          ),
+          children: /* @__PURE__ */ jsx49(Icon, { name: "book-open", className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+function MountChips({
+  mounts,
+  disabled,
+  emptyLabel,
+  onTogglePreload
+}) {
+  if (mounts.length === 0) {
+    return /* @__PURE__ */ jsx49("p", { className: "text-text-secondary text-xs", children: emptyLabel });
+  }
+  return /* @__PURE__ */ jsx49("div", { className: "flex flex-wrap gap-2", children: mounts.map((mount) => {
+    const on = Boolean(mount.value.preload);
+    return /* @__PURE__ */ jsxs31(
+      "span",
+      {
+        className: cn(
+          "border-border flex items-center gap-2 rounded-lg border py-1 pr-2.5",
+          onTogglePreload ? "pl-1.5" : "pl-2.5"
+        ),
+        children: [
+          onTogglePreload ? /* @__PURE__ */ jsx49(PreloadToggle, { on, disabled, onToggle: () => onTogglePreload(mount.id) }) : null,
+          /* @__PURE__ */ jsx49("span", { className: "text-text-primary text-sm", children: mount.name })
+        ]
+      },
+      mount.id
+    );
+  }) });
+}
 function SaveAgentButton({ disabled = false, className, children = "Save Agent" }) {
   return /* @__PURE__ */ jsx49(DraftCatalogProvider, { children: /* @__PURE__ */ jsx49(SaveAgentButtonContent, { disabled, className, children }) });
 }
@@ -4100,19 +4115,23 @@ function SaveAgentButtonContent({
   const serverCapabilities = useServerCapabilities();
   const modelListId = useId6();
   const visible = useSaveAgentVisible();
-  const [open, setOpen] = useState20(false);
-  const [editor, setEditor] = useState20(null);
-  const [intent, setIntent] = useState20("create");
-  const [name, setName] = useState20("");
-  const [draftSpec, setDraftSpec] = useState20(null);
-  const [modelQuery, setModelQuery] = useState20("");
-  const [search, setSearch] = useState20("");
-  const [saving, setSaving] = useState20(false);
-  const [error, setError] = useState20(null);
+  const [open, setOpen] = useState19(false);
+  const [editor, setEditor] = useState19(null);
+  const [intent, setIntent] = useState19("create");
+  const [name, setName] = useState19("");
+  const [draftSpec, setDraftSpec] = useState19(null);
+  const [modelQuery, setModelQuery] = useState19("");
+  const [search, setSearch] = useState19("");
+  const [saving, setSaving] = useState19(false);
+  const [error, setError] = useState19(null);
   const errorRef = useRef11(null);
-  const mcpMounts = useMemo7(() => editableMountsFromSpec(draftSpec?.mcpServers), [draftSpec?.mcpServers]);
-  const skillMounts = useMemo7(() => editableMountsFromSpec(draftSpec?.skills), [draftSpec?.skills]);
-  useEffect14(() => {
+  const mcpMounts = useMemo6(() => editableMountsFromSpec(draftSpec?.mcpServers), [draftSpec?.mcpServers]);
+  const skillMounts = useMemo6(() => editableMountsFromSpec(draftSpec?.skills), [draftSpec?.skills]);
+  const modelEntry = useMemo6(
+    () => catalog.models.find((model) => model.name === draftSpec?.model.name),
+    [catalog.models, draftSpec?.model.name]
+  );
+  useEffect13(() => {
     if (error === null) return;
     errorRef.current?.scrollIntoView?.({ block: "nearest", behavior: "smooth" });
   }, [error]);
@@ -4174,6 +4193,15 @@ function SaveAgentButtonContent({
       setSaving(false);
     }
   };
+  const toggleMcpPreload = (id) => {
+    if (draftSpec === null) return;
+    const next = (draftSpec.mcpServers ?? []).map((item) => {
+      const record = item;
+      const itemId = typeof record.id === "string" ? record.id : record.name;
+      return itemId === id ? { ...record, preload: record.preload !== true } : item;
+    });
+    setDraftSpec({ ...draftSpec, mcpServers: next });
+  };
   const filteredConnectors = catalog.connectors.filter(
     (item) => `${item.name} ${item.description ?? ""}`.toLowerCase().includes(search.trim().toLowerCase())
   );
@@ -4183,8 +4211,8 @@ function SaveAgentButtonContent({
   const isUpdateMode = shell?.mode.status === "active" && shell.mode.isMutable && (shell.mode.agentName !== void 0 || shell.mode.agentId !== void 0);
   const triggerLabel = isUpdateMode && children === "Save Agent" ? "Update Agent" : children;
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs30(Fragment10, { children: [
-    /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+    /* @__PURE__ */ jsxs31(
       "button",
       {
         type: "button",
@@ -4203,12 +4231,11 @@ function SaveAgentButtonContent({
         open,
         onOpenChange: (next) => !next && close(),
         title: intent === "create" ? "Save agent" : "Update agent",
-        description: "Review the configuration before saving.",
-        className: "md:max-w-lg",
+        className: "md:h-auto md:max-h-[85dvh] md:max-w-2xl",
         "aria-label": intent === "create" ? "Save agent" : "Update agent",
-        children: draftSpec ? /* @__PURE__ */ jsxs30("div", { className: "flex min-h-0 w-[min(32rem,calc(100vw-2rem))] flex-1 flex-col", children: [
-          /* @__PURE__ */ jsxs30("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-4", children: [
-            /* @__PURE__ */ jsxs30("label", { className: "mb-4 block", children: [
+        children: draftSpec ? /* @__PURE__ */ jsxs31("div", { className: "flex min-h-0 w-full flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "min-h-0 flex-1 overflow-y-auto px-5 py-3", children: [
+            /* @__PURE__ */ jsxs31("label", { className: "mb-3 block", children: [
               /* @__PURE__ */ jsx49("span", { className: "mb-1.5 block text-sm font-medium", children: "Agent name" }),
               /* @__PURE__ */ jsx49(
                 "input",
@@ -4221,7 +4248,7 @@ function SaveAgentButtonContent({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs30("label", { className: "mb-4 block", children: [
+            /* @__PURE__ */ jsxs31("label", { className: "mb-3 block", children: [
               /* @__PURE__ */ jsx49("span", { className: "mb-1.5 block text-sm font-medium", children: "Instructions" }),
               /* @__PURE__ */ jsx49(
                 "textarea",
@@ -4229,53 +4256,39 @@ function SaveAgentButtonContent({
                   value: draftSpec.instructions ?? "",
                   disabled: saving,
                   onChange: (event) => setDraftSpec({ ...draftSpec, instructions: event.target.value }),
-                  rows: 4,
+                  rows: 5,
                   placeholder: "You are a release notes writer for a platform team.",
                   className: auiInputClass("resize-y py-2 disabled:opacity-60")
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs30("div", { className: "mb-4", children: [
-              /* @__PURE__ */ jsx49("h3", { className: "mb-2 text-sm font-medium", children: "Configuration" }),
-              /* @__PURE__ */ jsxs30("div", { className: "overflow-hidden rounded-xl border border-border", children: [
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "cpu",
-                    title: "Model",
-                    value: draftSpec.model.name ? displayModelLabel2(draftSpec.model.name) : "Not selected",
-                    disabled: saving,
-                    onEdit: () => setEditor("model")
-                  }
-                ),
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "plug",
-                    title: "Connectors",
-                    value: `${mcpMounts.length} selected`,
-                    disabled: saving,
-                    onEdit: () => setEditor("mcp")
-                  }
-                ),
-                /* @__PURE__ */ jsx49(
-                  SummarySection,
-                  {
-                    icon: "lightbulb",
-                    title: "Skills",
-                    value: `${skillMounts.length} selected`,
-                    disabled: saving,
-                    onEdit: () => setEditor("skills")
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs30("div", { children: [
-              /* @__PURE__ */ jsx49("h3", { className: "mb-2 text-sm font-medium", children: "Capabilities" }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Model", onEdit: () => setEditor("model"), disabled: saving, children: draftSpec.model.name ? /* @__PURE__ */ jsxs31("span", { className: "border-border inline-flex items-center gap-2 rounded-lg border py-1 pr-2.5 pl-2", children: [
+              /* @__PURE__ */ jsx49(
+                ProviderMark,
+                {
+                  logo: modelEntry?.provider.logo,
+                  label: modelEntry?.provider.name ?? draftSpec.model.name,
+                  className: "size-5 text-[10px]"
+                }
+              ),
+              /* @__PURE__ */ jsx49("span", { className: "text-text-primary text-sm", children: displayModelLabel2(draftSpec.model.name) })
+            ] }) : /* @__PURE__ */ jsx49("p", { className: "text-text-secondary text-xs", children: "No model selected." }) }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Connectors", onEdit: () => setEditor("mcp"), disabled: saving, children: /* @__PURE__ */ jsx49(
+              MountChips,
+              {
+                mounts: mcpMounts,
+                disabled: saving,
+                emptyLabel: "No connectors added.",
+                onTogglePreload: toggleMcpPreload
+              }
+            ) }),
+            /* @__PURE__ */ jsx49(ConfigSection, { label: "Skills", onEdit: () => setEditor("skills"), disabled: saving, children: /* @__PURE__ */ jsx49(MountChips, { mounts: skillMounts, disabled: saving, emptyLabel: "No skills added." }) }),
+            /* @__PURE__ */ jsxs31("div", { children: [
+              /* @__PURE__ */ jsx49("p", { className: "text-text-secondary mb-1.5 text-xs font-semibold tracking-wide uppercase", children: "Capabilities" }),
               /* @__PURE__ */ jsx49(
                 DraftCapabilitiesPanel,
                 {
-                  divided: true,
+                  layout: "cards",
                   value: readAgentCapabilities(draftSpec.config),
                   disabled: saving,
                   onChange: (values) => setDraftSpec({
@@ -4287,7 +4300,7 @@ function SaveAgentButtonContent({
             ] }),
             error ? /* @__PURE__ */ jsx49("p", { ref: errorRef, role: "alert", className: "text-failure-bg mt-3 text-sm", children: error }) : null
           ] }),
-          /* @__PURE__ */ jsxs30("div", { className: "bg-card-bg sticky bottom-0 z-10 flex shrink-0 justify-end gap-2 border-t border-border px-5 py-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "bg-card-bg sticky bottom-0 z-10 flex shrink-0 justify-end gap-2 border-t border-border px-5 py-4", children: [
             /* @__PURE__ */ jsx49(
               "button",
               {
@@ -4327,8 +4340,8 @@ function SaveAgentButtonContent({
         className: "md:max-w-md",
         contentSized: true,
         "aria-label": editor === "model" ? "Edit model" : editor === "mcp" ? "Edit Connectors" : "Edit skills",
-        children: draftSpec && editor ? /* @__PURE__ */ jsxs30("div", { className: "flex h-[min(28rem,calc(100dvh-10rem))] w-[min(28rem,calc(100vw-2rem))] flex-col", children: [
-          editor === "model" ? /* @__PURE__ */ jsxs30(Fragment10, { children: [
+        children: draftSpec && editor ? /* @__PURE__ */ jsxs31("div", { className: "flex h-[min(28rem,calc(100dvh-10rem))] w-[min(28rem,calc(100vw-2rem))] flex-col", children: [
+          editor === "model" ? /* @__PURE__ */ jsxs31(Fragment10, { children: [
             catalog.error ? /* @__PURE__ */ jsx49("p", { role: "alert", className: "text-failure-bg px-3 pt-3 text-sm", children: catalog.error }) : null,
             /* @__PURE__ */ jsx49(
               DraftModelCatalogPanel,
@@ -4352,9 +4365,9 @@ function SaveAgentButtonContent({
                 }
               }
             )
-          ] }) : /* @__PURE__ */ jsxs30(Fragment10, { children: [
+          ] }) : /* @__PURE__ */ jsxs31(Fragment10, { children: [
             catalog.error ? /* @__PURE__ */ jsx49("p", { role: "alert", className: "text-failure-bg px-3 pt-3 text-sm", children: catalog.error }) : null,
-            /* @__PURE__ */ jsx49("div", { className: "border-b border-border p-3", children: /* @__PURE__ */ jsxs30("label", { className: "relative block", children: [
+            /* @__PURE__ */ jsx49("div", { className: "border-b border-border p-3", children: /* @__PURE__ */ jsxs31("label", { className: "relative block", children: [
               /* @__PURE__ */ jsx49(
                 Icon,
                 {
@@ -4481,12 +4494,12 @@ var ScrollToBottomButton = forwardRef2(
 ScrollToBottomButton.displayName = "ScrollToBottomButton";
 
 // src/atoms/SelectAgentEmptyState.tsx
-import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs32 } from "react/jsx-runtime";
 function SelectAgentEmptyState() {
   const shell = useOptionalShellMode();
   const AgentsLibraryButton2 = useSlot("AgentsLibraryButton");
   if (shell?.mode.status !== "idle") return null;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "flex h-full min-h-0 w-full flex-col items-center justify-center gap-4 px-6",
@@ -4505,9 +4518,9 @@ function ShellActionsActionSlot() {
 }
 
 // src/atoms/Skeletons.tsx
-import { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs33 } from "react/jsx-runtime";
 function MessageListSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       role: "status",
@@ -4516,7 +4529,7 @@ function MessageListSkeleton({ className }) {
       className: cn("mb-14 flex flex-col gap-y-6", className),
       children: [
         /* @__PURE__ */ jsx52("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx52(Skeleton, { className: "h-10 w-[min(85%,20rem)] rounded-xl" }) }),
-        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col gap-2 px-2", children: [
+        /* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-2 px-2", children: [
           /* @__PURE__ */ jsx52(Skeleton, { className: "h-4 w-full max-w-md" }),
           /* @__PURE__ */ jsx52(Skeleton, { className: "h-4 w-full max-w-sm" }),
           /* @__PURE__ */ jsx52(Skeleton, { className: "h-4 w-2/3 max-w-xs" })
@@ -4527,7 +4540,7 @@ function MessageListSkeleton({ className }) {
 }
 
 // src/atoms/SubAgentCard.tsx
-import { jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs34 } from "react/jsx-runtime";
 function SubAgentCard({
   agentName,
   instruction,
@@ -4549,7 +4562,7 @@ function SubAgentCard({
     {
       className: cn("aui-sub-agent-card min-w-0", className),
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-sub-agent-card` : void 0,
-      children: /* @__PURE__ */ jsxs33(
+      children: /* @__PURE__ */ jsxs34(
         AgentStepRow,
         {
           icon: "agent-2",
@@ -4562,7 +4575,7 @@ function SubAgentCard({
           statusText: durationText,
           dataTestPrefix,
           children: [
-            instructionContent != null && /* @__PURE__ */ jsxs33("div", { className: "mb-3 flex flex-col gap-2 rounded-md border border-border p-2", children: [
+            instructionContent != null && /* @__PURE__ */ jsxs34("div", { className: "mb-3 flex flex-col gap-2 rounded-md border border-border p-2", children: [
               /* @__PURE__ */ jsx53("h4", { className: "text-sm font-semibold text-text-primary", children: "Instructions" }),
               /* @__PURE__ */ jsx53(
                 "div",
@@ -4594,8 +4607,8 @@ import {
   cloneElement as cloneElement2,
   isValidElement as isValidElement2,
   memo,
-  useCallback as useCallback7,
-  useState as useState21
+  useCallback as useCallback6,
+  useState as useState20
 } from "react";
 import { Prism as PrismHighlighter } from "react-syntax-highlighter";
 
@@ -5594,7 +5607,7 @@ var one_light_default = {
 };
 
 // src/atoms/SyntaxHighlighter.tsx
-import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs35 } from "react/jsx-runtime";
 function applyLineNumberClassName(children, className) {
   if (!className) return children;
   return Children.map(children, (child) => {
@@ -5607,14 +5620,14 @@ function applyLineNumberClassName(children, className) {
 function SyntaxHighlighterImpl({ code, language, darkTheme, className, showLineNumbers }) {
   const classNames = useOptionalContentClassNames();
   const style = darkTheme ? one_dark_default : one_light_default;
-  const [copied, setCopied] = useState21(false);
-  const handleCopy = useCallback7(() => {
+  const [copied, setCopied] = useState20(false);
+  const handleCopy = useCallback6(() => {
     void navigator.clipboard.writeText(code).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [code]);
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       className: cn(
@@ -5675,7 +5688,7 @@ function SyntaxHighlighterImpl({ code, language, darkTheme, className, showLineN
 var SyntaxHighlighter = memo(SyntaxHighlighterImpl);
 
 // src/atoms/ThreadListMisc.tsx
-import { Fragment as Fragment11, jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
 function ThreadListNewButton({ className, children, style, ...rest }) {
   return /* @__PURE__ */ jsx55(
     "button",
@@ -5691,7 +5704,7 @@ function ThreadListNewButton({ className, children, style, ...rest }) {
         )
       }),
       ...rest,
-      children: children ?? /* @__PURE__ */ jsxs35(Fragment11, { children: [
+      children: children ?? /* @__PURE__ */ jsxs36(Fragment11, { children: [
         /* @__PURE__ */ jsx55(Icon, { name: "square-pen" }),
         "New Chat"
       ] })
@@ -5711,7 +5724,7 @@ function ThreadListEmptyState({ message = "No threads yet", className }) {
   );
 }
 function ThreadListShell({ header, children, className }) {
-  return /* @__PURE__ */ jsxs35("div", { className: cn("font-sans-flex flex h-full min-h-0 flex-1 flex-col overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs36("div", { className: cn("font-sans-flex flex h-full min-h-0 flex-1 flex-col overflow-hidden", className), children: [
     /* @__PURE__ */ jsx55("div", { className: "shrink-0 border-b border-border px-2 py-2", children: header }),
     /* @__PURE__ */ jsx55("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden p-2", children })
   ] });
@@ -5774,7 +5787,7 @@ function canReuseMutableShell({
 }
 
 // src/atoms/ThreadListRow.tsx
-import { jsx as jsx56, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
 function ThreadListRow({
   title,
   active,
@@ -5786,7 +5799,7 @@ function ThreadListRow({
 }) {
   const relative = lastMessageAt != null ? formatRelativeShort(lastMessageAt) : void 0;
   const hasTrailing = relative != null || actions != null;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       "data-slot": "aui_thread-list-item",
@@ -5811,16 +5824,16 @@ function ThreadListRow({
                 active ? "text-dropdown-selected-item-text" : "text-inherit"
               )
             }),
-            children: /* @__PURE__ */ jsxs36("span", { className: "min-w-0 flex-1", children: [
+            children: /* @__PURE__ */ jsxs37("span", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsx56("span", { className: "block truncate text-sm font-medium text-text-primary", children: title }),
-              agentName != null ? /* @__PURE__ */ jsxs36("span", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs text-text-secondary", children: [
+              agentName != null ? /* @__PURE__ */ jsxs37("span", { className: "mt-0.5 flex min-w-0 items-center gap-1 text-xs text-text-secondary", children: [
                 /* @__PURE__ */ jsx56(Icon, { name: "robot", className: "size-3 shrink-0" }),
                 /* @__PURE__ */ jsx56("span", { className: "truncate", children: agentName })
               ] }) : null
             ] })
           }
         ),
-        hasTrailing ? /* @__PURE__ */ jsxs36("div", { className: "relative mr-1 flex size-7 shrink-0 items-center justify-center", children: [
+        hasTrailing ? /* @__PURE__ */ jsxs37("div", { className: "relative mr-1 flex size-7 shrink-0 items-center justify-center", children: [
           relative != null ? /* @__PURE__ */ jsx56(
             "span",
             {
@@ -5926,12 +5939,12 @@ var MessageGroup = forwardRef3(({ className, ...rest }, ref) => /* @__PURE__ */
 MessageGroup.displayName = "MessageGroup";
 
 // src/atoms/Toast.tsx
-import { useCallback as useCallback8, useState as useState22 } from "react";
+import { useCallback as useCallback7, useState as useState21 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
 function Toast({ title, description, open, onOpenChange, variant = "error", className }) {
-  const [copied, setCopied] = useState22(false);
-  const handleCopy = useCallback8(async () => {
+  const [copied, setCopied] = useState21(false);
+  const handleCopy = useCallback7(async () => {
     const text = `${title}
 ${description}`;
     try {
@@ -5942,7 +5955,7 @@ ${description}`;
     }
   }, [title, description]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs38(
     "div",
     {
       role: "alert",
@@ -5960,8 +5973,8 @@ ${description}`;
             className: cn("shrink-0", variant === "success" ? "text-success-bg" : "text-failure-bg")
           }
         ),
-        /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsxs37("div", { className: "flex items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs38("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs38("div", { className: "flex items-start justify-between gap-2", children: [
             /* @__PURE__ */ jsx58(
               "div",
               {
@@ -5972,7 +5985,7 @@ ${description}`;
                 children: title
               }
             ),
-            /* @__PURE__ */ jsxs37("div", { className: "flex shrink-0 items-center gap-1", children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex shrink-0 items-center gap-1", children: [
               variant === "error" ? /* @__PURE__ */ jsx58(
                 "button",
                 {
@@ -6029,7 +6042,7 @@ function ToastStack({ children, duration: _duration = Number.POSITIVE_INFINITY }
 }
 
 // src/atoms/ToolApprovalBar.tsx
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
 var DEFAULT_APPROVE_OPTIONS = [{ id: "approve", label: "Approve", variant: "primary" }];
 var DEFAULT_DENY_OPTIONS = [
   { id: "deny", label: "Deny", variant: "secondary", requiresReason: true }
@@ -6062,22 +6075,22 @@ function ToolApprovalBar({
   const isDenied = status?.type === "denied";
   const interactionsLocked = disabled && !isDecided;
   const headingText = isApproved ? "Tool Approved" : isDenied ? "Tool Approval Denied" : "Tool Approval Required for";
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
       className: cn("aui-tool-approval-bar", className),
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-approval` : void 0,
       children: [
-        /* @__PURE__ */ jsxs38("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsxs38("div", { className: cn("flex shrink-0 flex-col items-center", !showLineBelow && "pb-1"), children: [
+        /* @__PURE__ */ jsxs39("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs39("div", { className: cn("flex shrink-0 flex-col items-center", !showLineBelow && "pb-1"), children: [
             /* @__PURE__ */ jsx59("div", { className: "min-h-[0.75rem] w-px flex-1 bg-border" }),
             /* @__PURE__ */ jsx59(StepIconBox, { icon: "wrench", variant: "muted", iconSize: "0.875em", className: "my-1" }),
             showLineBelow && /* @__PURE__ */ jsx59("div", { className: "min-h-[0.75rem] w-px flex-1 bg-border" })
           ] }),
-          /* @__PURE__ */ jsxs38("div", { className: "mt-2 flex flex-1 items-center justify-between", children: [
-            /* @__PURE__ */ jsxs38("div", { className: "flex w-full items-center justify-between gap-2", children: [
-              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxs38("span", { className: "inline-flex flex-wrap items-center gap-1 font-sans text-xs font-medium leading-4 text-text-primary", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "mt-2 flex flex-1 items-center justify-between", children: [
+            /* @__PURE__ */ jsxs39("div", { className: "flex w-full items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs39("span", { className: "inline-flex flex-wrap items-center gap-1 font-sans text-xs font-medium leading-4 text-text-primary", children: [
                   headingText,
                   /* @__PURE__ */ jsx59("span", { className: "rounded bg-secondary-bg px-1.5 py-0.5 text-xs text-text-secondary", children: toolName })
                 ] }),
@@ -6101,8 +6114,8 @@ function ToolApprovalBar({
                 }
               )
             ] }),
-            !isDecided && !readOnly && !selectedDenyOption && /* @__PURE__ */ jsxs38("div", { className: "flex gap-2", children: [
-              approveOptions.map((option) => /* @__PURE__ */ jsxs38(
+            !isDecided && !readOnly && !selectedDenyOption && /* @__PURE__ */ jsxs39("div", { className: "flex gap-2", children: [
+              approveOptions.map((option) => /* @__PURE__ */ jsxs39(
                 Button,
                 {
                   size: "sm",
@@ -6136,16 +6149,16 @@ function ToolApprovalBar({
             ] })
           ] })
         ] }),
-        !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-1 pl-8 pt-3", children: [
-          (selectedDenyOption.confirm?.title || selectedDenyOption.confirm?.description) && /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-0.5", children: [
+        !isDecided && !readOnly && selectedDenyOption && /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-1 pl-8 pt-3", children: [
+          (selectedDenyOption.confirm?.title || selectedDenyOption.confirm?.description) && /* @__PURE__ */ jsxs39("div", { className: "flex flex-col gap-0.5", children: [
             selectedDenyOption.confirm.title && /* @__PURE__ */ jsx59("span", { className: "text-xs font-medium text-text-primary", children: selectedDenyOption.confirm.title }),
             selectedDenyOption.confirm.description && /* @__PURE__ */ jsx59("span", { className: "text-xs text-text-secondary", children: selectedDenyOption.confirm.description })
           ] }),
-          selectedDenyOption.grants && selectedDenyOption.grants.length > 0 && /* @__PURE__ */ jsxs38("div", { className: "flex flex-wrap items-center gap-1", children: [
+          selectedDenyOption.grants && selectedDenyOption.grants.length > 0 && /* @__PURE__ */ jsxs39("div", { className: "flex flex-wrap items-center gap-1", children: [
             /* @__PURE__ */ jsx59("span", { className: "text-xs text-text-secondary", children: "Grants:" }),
             selectedDenyOption.grants.map((grant) => /* @__PURE__ */ jsx59("span", { className: "rounded bg-secondary-bg px-1.5 py-0.5 text-xs text-text-secondary", children: grant }, grant))
           ] }),
-          /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx59(
               "input",
               {
@@ -6166,7 +6179,7 @@ function ToolApprovalBar({
           ] }),
           showReasonError && /* @__PURE__ */ jsx59("span", { id: "aui-denial-reason-error", className: "text-xs text-failure-bg", role: "alert", children: "Reason is required" })
         ] }),
-        isDecided && status?.reason && /* @__PURE__ */ jsx59("div", { className: "pl-8 pt-2", children: /* @__PURE__ */ jsxs38("span", { className: "text-xs text-text-secondary", children: [
+        isDecided && status?.reason && /* @__PURE__ */ jsx59("div", { className: "pl-8 pt-2", children: /* @__PURE__ */ jsxs39("span", { className: "text-xs text-text-secondary", children: [
           "Reason: ",
           status.reason
         ] }) })
@@ -6176,7 +6189,7 @@ function ToolApprovalBar({
 }
 
 // src/atoms/ToolCallCard.tsx
-import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEFAULT_AWAITING_TEXT = "Awaiting Response...";
 function ToolCallCard({
   icon = "mcp-server",
@@ -6240,7 +6253,7 @@ function ToolCallCard({
           showContentConnector: true,
           showPersistentContentConnector: !hasApproval,
           dataTestPrefix: dataTestPrefix ? `${dataTestPrefix}-header` : void 0,
-          persistentChildren: /* @__PURE__ */ jsxs39(Fragment12, { children: [
+          persistentChildren: /* @__PURE__ */ jsxs40(Fragment12, { children: [
             approvalSlot,
             expanded && showResponseLine && responseSlot && /* @__PURE__ */ jsx60("div", { "data-testid": dataTestPrefix ? `${dataTestPrefix}-response` : void 0, children: responseSlot })
           ] }),
@@ -6252,8 +6265,8 @@ function ToolCallCard({
 }
 
 // src/atoms/ToolCallContentBlock.tsx
-import { useState as useState23 } from "react";
-import { jsx as jsx61, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useState as useState22 } from "react";
+import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
 function JsonEditor({
   content,
   height,
@@ -6300,7 +6313,7 @@ function ToolCallContentBlock({
   className
 }) {
   const Markdown2 = useSlot("Markdown");
-  const [copied, setCopied] = useState23(false);
+  const [copied, setCopied] = useState22(false);
   const handleCopy = () => {
     const val = copyValue ?? content;
     void navigator.clipboard.writeText(val).then(() => {
@@ -6316,7 +6329,7 @@ function ToolCallContentBlock({
   } : {
     padding: "0.25rem"
   };
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       className: cn(
@@ -6326,9 +6339,9 @@ function ToolCallContentBlock({
       "data-testid": dataTestPrefix ? `${dataTestPrefix}-content-block` : "tfy-tool-call-content-block",
       "data-content": content,
       children: [
-        /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between rounded-t-lg border border-primary-button-bg/30 bg-primary-button-bg/10 px-3 py-1", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between rounded-t-lg border border-primary-button-bg/30 bg-primary-button-bg/10 px-3 py-1", children: [
           /* @__PURE__ */ jsx61("div", { className: "font-sans text-xs font-medium text-primary-button-bg", children: title }),
-          /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1", children: [
             /* @__PURE__ */ jsx61(
               "button",
               {
@@ -6380,8 +6393,8 @@ function ToolCallContentBlock({
             )
           }
         ),
-        fullscreen && /* @__PURE__ */ jsx61(Dialog, { open: true, onOpenChange: (open) => onFullscreenChange?.(open), children: /* @__PURE__ */ jsxs40(DialogContent, { className: "flex h-[80vh] max-w-4xl flex-col", children: [
-          /* @__PURE__ */ jsxs40(DialogHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+        fullscreen && /* @__PURE__ */ jsx61(Dialog, { open: true, onOpenChange: (open) => onFullscreenChange?.(open), children: /* @__PURE__ */ jsxs41(DialogContent, { className: "flex h-[80vh] max-w-4xl flex-col", children: [
+          /* @__PURE__ */ jsxs41(DialogHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
             /* @__PURE__ */ jsx61(DialogTitle, { children: title }),
             /* @__PURE__ */ jsx61(IconButton, { variant: "ghost", onClick: () => onFullscreenChange?.(false), "aria-label": "Minimize", children: /* @__PURE__ */ jsx61(Icon, { name: "compress", size: "0.875em" }) })
           ] }),
@@ -6393,7 +6406,7 @@ function ToolCallContentBlock({
 }
 
 // src/atoms/ToolGroupCard.tsx
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
 function ToolGroupCard({
   toolCallCount,
   expanded,
@@ -6406,7 +6419,7 @@ function ToolGroupCard({
   const AccordionSummary2 = useSlot("AccordionSummary");
   const AccordionDetails2 = useSlot("AccordionDetails");
   const label = `${toolCallCount} tool ${toolCallCount === 1 ? "call" : "calls"}`;
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs42(
     Accordion2,
     {
       "data-slot": "tool-group-card",
@@ -6428,7 +6441,7 @@ function ToolGroupCard({
               "&:hover": { backgroundColor: "transparent" },
               "& .MuiAccordionSummary-content": { margin: 0, width: "100%" }
             },
-            children: /* @__PURE__ */ jsxs41("div", { className: "text-text-secondary hover:text-text-primary flex origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]", children: [
+            children: /* @__PURE__ */ jsxs42("div", { className: "text-text-secondary hover:text-text-primary flex origin-left items-center gap-2 py-1.5 text-sm transition-[color,scale] active:scale-[0.98]", children: [
               active && /* @__PURE__ */ jsx62(Icon, { name: "loader", className: "size-3 shrink-0 animate-spin [animation-duration:0.6s]" }),
               /* @__PURE__ */ jsx62("span", { className: "text-xs font-medium", children: label }),
               /* @__PURE__ */ jsx62(
@@ -6451,7 +6464,7 @@ function ToolGroupCard({
 }
 
 // src/atoms/UserMessageActionBar.tsx
-import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
 var actionBtnClass2 = "h-6 w-6 text-text-secondary hover:text-text-primary [&_svg]:size-3.5";
 function UserMessageActionBar({
   isCopied,
@@ -6463,7 +6476,7 @@ function UserMessageActionBar({
   className
 }) {
   const MessageTimestamp2 = useSlot("MessageTimestamp");
-  return /* @__PURE__ */ jsxs42("div", { className: cn("aui-user-action-bar-root animate-in fade-in flex items-center gap-1 duration-200", className), children: [
+  return /* @__PURE__ */ jsxs43("div", { className: cn("aui-user-action-bar-root animate-in fade-in flex items-center gap-1 duration-200", className), children: [
     /* @__PURE__ */ jsx63(MessageTimestamp2, { createdAt, className: "mr-1" }),
     /* @__PURE__ */ jsx63(
       IconButton,
@@ -6493,9 +6506,9 @@ function UserMessageActionBar({
 }
 
 // src/atoms/UserMessageBubble.tsx
-import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
 function UserMessageBubble({ text, attachments, editAction, className }) {
-  return /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44(
     "div",
     {
       "data-slot": "aui_user-message-root",
@@ -6519,10 +6532,10 @@ function UserMessageBubble({ text, attachments, editAction, className }) {
 
 // src/atoms/UserMessageEdit.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { jsx as jsx65, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
 var UserMessageEdit = forwardRef4(
   function UserMessageEdit2({ timestamp, attachments, input, footer, className, ...rest }, ref) {
-    return /* @__PURE__ */ jsxs44(
+    return /* @__PURE__ */ jsxs45(
       "div",
       {
         ref,
@@ -6530,7 +6543,7 @@ var UserMessageEdit = forwardRef4(
         className: cn("flex flex-col gap-2 w-full", className),
         ...rest,
         children: [
-          (timestamp || attachments) && /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
+          (timestamp || attachments) && /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-2 text-sm text-text-secondary", children: [
             /* @__PURE__ */ jsx65("span", { className: "font-medium text-text-primary", children: "User" }),
             timestamp
           ] }),
@@ -6544,12 +6557,12 @@ var UserMessageEdit = forwardRef4(
 );
 
 // src/atoms/WelcomeScreen.tsx
-import { jsx as jsx66, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
 function WelcomeScreen({ heading = "How can I help you today?", icon, className }) {
   const preset = useOptionalThemePreset();
   const BrandLogo2 = useSlot("BrandLogo");
   const resolvedIcon = icon !== void 0 ? icon : preset === "chatgpt" ? null : preset === "claude" ? /* @__PURE__ */ jsx66(Icon, { name: "welcome-sparkle", className: "size-5 fill-current text-primary-button-bg" }) : /* @__PURE__ */ jsx66(BrandLogo2, { className: "size-10" });
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46(
     "div",
     {
       "data-preset": preset,
@@ -6661,16 +6674,16 @@ var defaultSlots = {
 
 // src/theme/SlotsProvider.tsx
 import { jsx as jsx67 } from "react/jsx-runtime";
-var SlotsContext = createContext4(defaultSlots);
-var ThemeModeContext = createContext4(void 0);
+var SlotsContext = createContext3(defaultSlots);
+var ThemeModeContext = createContext3(void 0);
 function SlotsProvider({
   overrides,
   theme,
   children
 }) {
-  const parentSlots = useContext5(SlotsContext);
-  const inheritedTheme = useContext5(ThemeModeContext);
-  const resolved = useMemo8(() => ({ ...parentSlots, ...overrides }), [parentSlots, overrides]);
+  const parentSlots = useContext4(SlotsContext);
+  const inheritedTheme = useContext4(ThemeModeContext);
+  const resolved = useMemo7(() => ({ ...parentSlots, ...overrides }), [parentSlots, overrides]);
   const slotsTree = /* @__PURE__ */ jsx67(SlotsProviderContents, { slots: resolved, inheritedTheme, theme, children });
   const hasParentTheme = inheritedTheme !== void 0;
   if (theme !== void 0 || !hasParentTheme) {
@@ -6690,15 +6703,15 @@ function SlotsProviderContents({
   return /* @__PURE__ */ jsx67(ThemeModeContext.Provider, { value: resolvedTheme, children: /* @__PURE__ */ jsx67(SlotsContext.Provider, { value: slots, children }) });
 }
 function useSlot(name) {
-  const slots = useContext5(SlotsContext);
+  const slots = useContext4(SlotsContext);
   return slots[name];
 }
 function useSlotIsDefault(name) {
-  const slots = useContext5(SlotsContext);
+  const slots = useContext4(SlotsContext);
   return slots[name] === defaultSlots[name];
 }
 function useThemeMode() {
-  return useContext5(ThemeModeContext) ?? "light";
+  return useContext4(ThemeModeContext) ?? "light";
 }
 
 export {
@@ -6715,7 +6728,6 @@ export {
   useSlotIsDefault,
   useThemeMode,
   ResumeUnavailable,
-  getErrorMessage,
   useSearchAgentsList,
   CenteredModal,
   SearchInput_default,
@@ -6740,8 +6752,7 @@ export {
   ComposerShell,
   useIsMobile,
   BottomSheet,
-  DraftCatalogProvider,
-  useDraftCatalog,
+  modelPatchWithReasoningEffort,
   DraftComposerLeftSection,
   DraftComposerRightSection,
   ToasterProvider,
@@ -6749,10 +6760,10 @@ export {
   useToasterOptional,
   MCP_AUTH_POPUP_CHANNEL,
   useMCPAuth,
+  auiInputClass,
   Tooltip,
   Switch,
   DraftCompositeSelector,
-  auiInputClass,
   CatalogLogo,
   DraftModelSelector,
   HistoryLoader,
@@ -6797,4 +6808,4 @@ export {
   WelcomeScreen,
   defaultSlots
 };
-//# sourceMappingURL=chunk-XSHXH6EI.js.map
+//# sourceMappingURL=chunk-QGNLP2EE.js.map