@agent-native/toolkit 0.16.0 → 0.16.1

package/dist/composer/TiptapComposer.js

@@ -1,12 +1,12 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { useComposer, useComposerRuntime } from "@assistant-ui/react";
-import { IconArrowUp, IconCheck, IconChevronDown, IconChevronRight, IconBulb, IconClock, IconBolt, IconTool, IconX, IconClipboardList, IconKey, IconPencil, IconPlugConnected, } from "@tabler/icons-react";
+import { IconArrowUp, IconCheck, IconChevronDown, IconChevronRight, IconBulb, IconClock, IconBolt, IconTool, IconX, IconClipboardList, IconKey, IconPencil, IconPlugConnected, IconHelpCircle, } from "@tabler/icons-react";
 import Placeholder from "@tiptap/extension-placeholder";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import { useState, useRef, useEffect, useCallback, useImperativeHandle, useMemo, } from "react";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.js";
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from "../ui/popover.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { ComposerPlusMenu } from "./ComposerPlusMenu.js";
 import { getComposerDraftKey } from "./draft-key.js";
@@ -14,6 +14,7 @@ import { FileReference } from "./extensions/FileReference.js";
 import { MentionReference } from "./extensions/MentionReference.js";
 import { SkillReference } from "./extensions/SkillReference.js";
 import { MentionPopover } from "./MentionPopover.js";
+import { isClaudeCodeAgentId, isLunaModel, resolvePreferredAgentModel, } from "./model-selection.js";
 import { createPastedAttachmentFile, readClipboardPaste, shouldConvertClipboardToAttachment, } from "./pasted-text.js";
 import { AGENT_CHAT_INSERT_REFERENCE_EVENT, AGENT_CHAT_INSERT_REFERENCE_MESSAGE_TYPE, DEFAULT_REASONING_EFFORT, formatPromptContextItems, getReasoningEffortOptionsForModel, reasoningEffortLabel, resolveReasoningEffortSelection, useComposerRuntimeAdapters, } from "./runtime-adapters.js";
 import { useMentionSearch } from "./use-mention-search.js";
@@ -513,7 +514,7 @@ function ModeSelector({ mode, onChange, planModeDisabled = false, planModeDisabl
                             setOpen(false);
                         }, className: "flex w-full items-center gap-3 px-3 py-2 hover:bg-accent/50 text-start", children: [_jsx(IconPencil, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "font-medium text-foreground text-[13px]", children: t("agentChat.plan.act", { defaultValue: "Act" }) }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: t("agentChat.composer.actDescription", {
                                             defaultValue: "Use tools and make approved changes",
-                                        }) })] }), mode === "build" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }), _jsxs("button", { type: "button", disabled: planModeDisabled, title: planModeDisabled ? resolvedPlanModeDisabledReason : undefined, onClick: () => {
+                                        }) })] }), mode === "build" && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] }), _jsxs("button", { type: "button", disabled: planModeDisabled, title: planModeDisabled ? resolvedPlanModeDisabledReason : undefined, onClick: () => {
                             if (planModeDisabled)
                                 return;
                             onChange("plan");
@@ -524,20 +525,48 @@ function ModeSelector({ mode, onChange, planModeDisabled = false, planModeDisabl
                                             ? resolvedPlanModeDisabledReason
                                             : t("agentChat.composer.planDescription", {
                                                 defaultValue: "Read-only research and approval first",
-                                            }) })] }), mode === "plan" && !planModeDisabled && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })] })] }));
+                                            }) })] }), mode === "plan" && !planModeDisabled && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] })] })] }));
 }
 const FRIENDLY_MODEL_NAMES = {
     auto: "Default model",
     "codex-cli": "Codex",
+    "claude-cli": "Claude Code",
+    "pi-cli": "Pi",
+    "opencode-cli": "OpenCode",
     "claude-fable-5": "Fable 5",
     "kimi-k2-5": "Kimi K2.5",
     "deepseek-v3-1": "DeepSeek v3.1",
     "z-ai/glm-5.2": "GLM 5.2",
 };
+const LOCAL_RUNTIME_ENGINES = new Set([
+    "codex-cli",
+    "claude-cli",
+    "pi-cli",
+    "opencode-cli",
+]);
+function isOpenAiModelId(model) {
+    const normalizedModel = model.toLowerCase();
+    return (normalizedModel.startsWith("gpt-") ||
+        normalizedModel.startsWith("openai/gpt-"));
+}
+export function isOpenAiModelProviderGroup(group) {
+    const engine = group.engine.toLowerCase();
+    const label = group.label.toLowerCase();
+    if (engine === "codex-cli") {
+        return group.models.some(isOpenAiModelId);
+    }
+    return (engine.includes("openai") ||
+        label.includes("openai") ||
+        group.models.some(isOpenAiModelId));
+}
+const HARNESS_AGENTS_DOCS_URL = "https://www.agent-native.com/docs/harness-agents";
 export const MODEL_SELECTOR_POPOVER_STYLE = {
     fontSize: 13,
     maxHeight: "min(500px, var(--radix-popover-content-available-height, 500px))",
 };
+const MODEL_SELECTOR_POPOVER_CLASS = "box-border w-64 rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-lg outline-none";
+const PICKER_HELP_BUTTON_CLASS = "flex size-3 shrink-0 items-center justify-center rounded text-muted-foreground/60 hover:text-foreground";
+const PICKER_HELP_ICON_CLASS = "size-2";
 export function shouldShowModelSelectorSkeleton(isLoading, engineCount) {
     return isLoading && engineCount === 0;
 }
@@ -712,21 +741,25 @@ function ModelCostTier({ model }) {
         : tier === 2
             ? t("agentChat.composer.costMedium", { defaultValue: "Medium cost" })
             : t("agentChat.composer.costHigher", { defaultValue: "Higher cost" });
-    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/60", children: "$".repeat(tier) }), _jsx("span", { className: "sr-only", children: costLabel })] }));
+    return _jsx("span", { className: "sr-only", children: costLabel });
 }
 export function getComposerReasoningEffortOptions(model) {
     return model === "auto"
         ? ["low", "medium", "high", "xhigh", "max"]
         : getReasoningEffortOptionsForModel(model);
 }
-function ModelSelector({ model, effort, engines, agents, selectedAgent, showAutoModelOption = true, modelListLoading = false, onChange, onEffortChange, onAgentChange, providerConnectStatusEnabled = true, onConnectProvider, onConnectLocalRuntime, imageModel, }) {
+function ModelSelector({ model, effort, engines, agents, selectedAgent, hostedHarness = false, showAutoModelOption = true, modelListLoading = false, open: controlledOpen, onChange, onEffortChange, onAgentChange, onModelSelectorOpenChange, providerConnectStatusEnabled = true, onConnectProvider, onConnectLocalRuntime, imageModel, }) {
     const adapters = useComposerRuntimeAdapters();
     const t = adapters.translate;
     const reasoning = adapters.models?.reasoning;
     const defaultEffort = reasoning?.defaultEffort ?? DEFAULT_REASONING_EFFORT;
-    const [open, setOpen] = useState(false);
+    const [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen ?? internalOpen;
+    const isClaudeCodeAgent = isClaudeCodeAgentId(selectedAgent);
     const autoModelGroup = showAutoModelOption
-        ? engines.find((group) => group.models.includes("auto"))
+        ? isClaudeCodeAgent
+            ? undefined
+            : engines.find((group) => group.models.includes("auto"))
         : undefined;
     const providerGroups = useMemo(() => engines
         .map((group) => ({
@@ -734,6 +767,52 @@ function ModelSelector({ model, effort, engines, agents, selectedAgent, showAuto
         models: group.models.filter((candidate) => candidate !== "auto"),
     }))
         .filter((group) => group.models.length > 0), [engines]);
+    const isCodexAgent = selectedAgent === "codex" || selectedAgent === "codex-cli";
+    const modelProviderGroups = useMemo(() => {
+        const hasCodexLocalGroup = providerGroups.some((group) => group.engine === "codex-cli");
+        const groups = providerGroups.flatMap((group) => {
+            if (group.engine === "codex-cli") {
+                return isCodexAgent && isOpenAiModelProviderGroup(group) ? [group] : [];
+            }
+            if (isCodexAgent &&
+                hasCodexLocalGroup &&
+                group.engine === "ai-sdk:openai") {
+                return [];
+            }
+            if (LOCAL_RUNTIME_ENGINES.has(group.engine))
+                return [];
+            if (!isCodexAgent)
+                return [group];
+            if (!isOpenAiModelProviderGroup(group))
+                return [];
+            const isExplicitOpenAiProvider = group.engine.toLowerCase().includes("openai") ||
+                group.label.toLowerCase().includes("openai");
+            const models = isExplicitOpenAiProvider
+                ? group.models
+                : group.models.filter(isOpenAiModelId);
+            return models.length > 0 ? [{ ...group, models }] : [];
+        });
+        if (!isClaudeCodeAgent)
+            return groups;
+        return groups
+            .map((group) => ({
+            ...group,
+            models: group.models.filter((candidate) => !isLunaModel(candidate)),
+        }))
+            .filter((group) => group.models.length > 0);
+    }, [isClaudeCodeAgent, isCodexAgent, providerGroups]);
+    const preferredAgentModel = useMemo(() => resolvePreferredAgentModel(selectedAgent, providerGroups), [providerGroups, selectedAgent]);
+    useEffect(() => {
+        if (!isClaudeCodeAgent || !isLunaModel(model) || !preferredAgentModel) {
+            return;
+        }
+        if (preferredAgentModel.model === model &&
+            preferredAgentModel.engine ===
+                engines.find((group) => group.models.includes(model))?.engine) {
+            return;
+        }
+        onChange(preferredAgentModel.model, preferredAgentModel.engine);
+    }, [engines, isClaudeCodeAgent, model, onChange, preferredAgentModel]);
     const effortOptions = reasoning?.getOptionsForModel?.(model) ??
         getComposerReasoningEffortOptions(model);
     const selectedEffort = reasoning?.resolve?.(model, effort) ??
@@ -741,180 +820,188 @@ function ModelSelector({ model, effort, engines, agents, selectedAgent, showAuto
     const effortLabel = useCallback((value) => localizedReasoningEffortLabel(t, value, (reasoning?.label ?? reasoningEffortLabel)(value)), [reasoning?.label, t]);
     const selectedAgentOption = agents?.find((agent) => agent.id === (selectedAgent ?? "default"));
     const selectedAgentLabel = selectedAgentOption?.label ?? "Default";
-    // Collapse non-selected families by default. The family containing the
-    // currently-selected model stays expanded so the user sees their pick at
-    // a glance; clicking another family's header expands it inline.
-    const selectedGroupKey = useMemo(() => {
-        const found = providerGroups.find((g) => g.models.includes(model));
-        return found ? `${found.engine}:${found.label}` : null;
-    }, [model, providerGroups]);
-    const [expandedGroups, setExpandedGroups] = useState(() => new Set(selectedGroupKey ? [selectedGroupKey] : []));
-    // Reset expansion when the popover re-opens so the picker always lands
-    // on the "selected family expanded, others collapsed" view.
-    useEffect(() => {
-        if (open) {
-            setExpandedGroups(new Set(selectedGroupKey ? [selectedGroupKey] : []));
-        }
-    }, [open, selectedGroupKey]);
-    const toggleGroup = useCallback((key) => {
-        setExpandedGroups((prev) => {
-            const next = new Set(prev);
-            if (next.has(key))
-                next.delete(key);
-            else
-                next.add(key);
-            return next;
-        });
-    }, []);
-    // The effort list is collapsed by default — it's a secondary
-    // control most users don't touch, so it stays tucked behind a header that
-    // reveals the current effort at a glance. Reset to collapsed on each open.
-    const [effortExpanded, setEffortExpanded] = useState(false);
-    useEffect(() => {
-        if (open)
-            setEffortExpanded(false);
-    }, [open]);
-    // The optional image-model section follows the same collapsed-by-default
-    // pattern; the current selection shows next to the header.
-    const [imageExpanded, setImageExpanded] = useState(false);
-    useEffect(() => {
-        if (open)
-            setImageExpanded(false);
-    }, [open]);
-    const imageModelLabel = imageModel?.options.find((option) => option.value === imageModel.value)
-        ?.label ?? imageModel?.value;
+    const selectedModelLabel = friendlyModelName(model, t).replace(/^GPT-/, "");
+    const [detailSection, setDetailSection] = useState(null);
+    const resolvedSection = detailSection ?? "model";
+    const setPickerOpen = useCallback((nextOpen) => {
+        if (controlledOpen === undefined)
+            setInternalOpen(nextOpen);
+        if (nextOpen)
+            setDetailSection(null);
+        onModelSelectorOpenChange?.(nextOpen);
+    }, [controlledOpen, onModelSelectorOpenChange]);
+    const visibleProviderGroups = modelProviderGroups;
     const showModelListSkeleton = shouldShowModelSelectorSkeleton(modelListLoading, engines.length);
-    // When Builder.io isn't connected, surface a one-click connect path —
-    // it unlocks every model family (Claude, OpenAI, Gemini) without the
-    // user having to paste individual API keys.
+    // Keep setup actions beside model choices while any visible provider still
+    // needs configuration. The model rows remain visible so the user can see
+    // what becomes available after connecting or adding a key.
     const builderFlow = adapters.builder.useConnectFlow({
         enabled: providerConnectStatusEnabled,
         trackingSource: "composer_builder_cta",
     });
     const hasConfiguredBuilderModels = providerGroups.some((group) => group.engine === "builder" && group.configured);
     const hasConnectedSubscription = providerGroups.some((group) => group.configured && group.isSubscription);
-    const showBuilderCta = (builderFlow.hasFetchedStatus ||
-        (!providerConnectStatusEnabled && !!onConnectProvider)) &&
-        !builderFlow.configured &&
-        !builderFlow.envManaged &&
-        !hasConfiguredBuilderModels &&
-        !hasConnectedSubscription;
-    const onlyConnectPathAvailable = shouldShowOnlyConnectPath(showBuilderCta, providerGroups);
+    const hasUnconfiguredVisibleModels = modelProviderGroups.some((group) => !group.configured);
+    const showBuilderAction = hasUnconfiguredVisibleModels &&
+        (Boolean(onConnectProvider) ||
+            (providerConnectStatusEnabled &&
+                !builderFlow.configured &&
+                !builderFlow.envManaged &&
+                !hasConfiguredBuilderModels &&
+                !hasConnectedSubscription));
+    const showAddKeysAction = hasUnconfiguredVisibleModels;
+    const showProviderActions = showBuilderAction || showAddKeysAction;
+    const onlyConnectPathAvailable = shouldShowOnlyConnectPath(showBuilderAction, providerGroups) &&
+        modelProviderGroups.length === 0;
     const openLlmSettings = useCallback(() => {
         try {
             window.location.hash = "llm";
         }
         catch { }
         window.dispatchEvent(new CustomEvent("agent-panel:open-settings"));
-        setOpen(false);
-    }, []);
+        setPickerOpen(false);
+    }, [setPickerOpen]);
     const connectLocalRuntime = useCallback((engine) => {
         onConnectLocalRuntime?.(engine);
-        setOpen(false);
-    }, [onConnectLocalRuntime]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-agent-composer-slot": "model-button", "aria-label": `${t("agentChat.composer.model", {
+        setPickerOpen(false);
+    }, [onConnectLocalRuntime, setPickerOpen]);
+    return (_jsxs(Popover, { open: open, onOpenChange: setPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-agent-composer-slot": "model-button", "aria-label": `${t("agentChat.composer.model", {
                         defaultValue: "Model",
                     })}: ${friendlyModelName(model, t)}${effortOptions.length > 0
-                        ? `. ${t("agentChat.composer.reasoning", {
-                            defaultValue: "Reasoning",
+                        ? `. ${t("agentChat.composer.effort", {
+                            defaultValue: "Effort",
                         })}: ${effortLabel(selectedEffort)}`
                         : ""}${selectedAgentOption && selectedAgentOption.id !== "default"
                         ? `. Agent: ${selectedAgentLabel}`
                         : ""}`, className: "agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground", children: [_jsx("span", { className: "min-w-0 truncate", children: selectedAgentOption && selectedAgentOption.id !== "default"
                                 ? selectedAgentLabel
-                                : compactComposerModelName(model, t) }), effortOptions.length > 0 && (_jsxs("span", { className: "agent-composer-model-effort min-w-0 shrink truncate text-muted-foreground/70", children: ["\u00B7 ", compactComposerReasoningEffortLabel(selectedEffort, t)] })), _jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })] }) }), _jsxs(PopoverContent, { side: "top", align: "end", sideOffset: 6, collisionPadding: 8, "data-agent-native-composer-popover": "true", className: "z-[260] box-border w-72 overflow-y-auto rounded-lg border-border p-0 py-1 shadow-lg", style: MODEL_SELECTOR_POPOVER_STYLE, children: [agents && agents.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "px-3 pb-1 pt-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Agents" }), agents.map((agent) => {
-                                const isSelected = agent.id === (selectedAgent ?? "default");
-                                const isConfigured = agent.configured !== false;
-                                const canConnect = !isConfigured && Boolean(onConnectLocalRuntime);
-                                const statusLabel = agent.statusLabel ??
-                                    (!isConfigured ? "Unavailable" : undefined);
-                                return (_jsxs("div", { className: "flex items-center hover:bg-accent/30", children: [_jsxs("button", { type: "button", disabled: !isConfigured || !onAgentChange, "aria-current": isSelected ? "true" : undefined, onClick: () => {
-                                                if (!isConfigured)
-                                                    return;
-                                                onAgentChange?.(agent.id);
-                                                setOpen(false);
-                                            }, className: `flex min-w-0 flex-1 items-center gap-3 px-3 py-1.5 text-start ${isConfigured
-                                                ? "hover:bg-accent/50"
-                                                : "cursor-default opacity-50"}`, children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block truncate text-[13px] text-foreground", children: agent.label }), agent.description && (_jsx("span", { className: "block truncate text-[11px] text-muted-foreground", children: agent.description }))] }), isSelected && isConfigured && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-primary" }))] }), !isConfigured && statusLabel && (_jsx("button", { type: "button", disabled: !canConnect, className: "ms-auto max-w-[6rem] shrink-0 truncate px-3 py-1.5 text-end text-[10px] text-muted-foreground/70 hover:text-foreground disabled:cursor-default", onClick: () => {
-                                                if (canConnect)
-                                                    connectLocalRuntime(agent.id);
-                                            }, children: statusLabel }))] }, agent.id));
-                            }), _jsx("div", { className: "my-1 border-t border-border" })] })), showBuilderCta && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => {
-                                    if (onConnectProvider) {
-                                        onConnectProvider();
-                                    }
-                                    else {
-                                        builderFlow.start();
-                                    }
-                                }, disabled: !onConnectProvider && builderFlow.connecting, className: "flex w-full items-start gap-2 px-3 py-2 text-start hover:bg-accent/50 disabled:opacity-60", children: [_jsx(IconPlugConnected, { className: "h-4 w-4 shrink-0 mt-0.5 text-blue-500" }), _jsxs("span", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "block text-[12px] font-medium text-foreground", children: !onConnectProvider && builderFlow.connecting
-                                                    ? t("agentPanel.connectingBuilder", {
-                                                        defaultValue: "Connecting Builder.io…",
-                                                    })
-                                                    : t("agentPanel.connectBuilderIo", {
-                                                        defaultValue: "Connect Builder.io",
-                                                    }) }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: t("agentPanel.builderModelCredits", {
-                                                    defaultValue: "Free credits for Claude, OpenAI & Gemini",
-                                                }) })] })] }), !onConnectProvider && builderFlow.error && (_jsx("p", { role: "alert", className: "px-3 pb-2 ps-9 text-[11px] text-destructive", children: builderFlow.error })), _jsxs("button", { type: "button", onClick: openLlmSettings, className: "flex w-full items-start gap-2 px-3 py-2 text-start hover:bg-accent/50", children: [_jsx(IconKey, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-[12px] font-medium text-foreground", children: t("agentPanel.addOwnKeys", {
-                                                    defaultValue: "Add your own keys",
-                                                }) }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: t("agentPanel.configureProviderKeys", {
-                                                    defaultValue: "Choose a cloud, gateway, or local provider",
-                                                }) })] })] }), !onlyConnectPathAvailable && (_jsx("div", { className: "my-1 border-t border-border" }))] })), imageModel && imageModel.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": imageExpanded, onClick: () => setImageExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [imageExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: imageModel.label ??
-                                                t("agentChat.composer.imageModel", {
-                                                    defaultValue: "Image model",
-                                                }) }), !imageExpanded && imageModelLabel && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: imageModelLabel }))] }) }), imageExpanded &&
-                                imageModel.options.map((option) => (_jsxs("button", { type: "button", onClick: () => {
-                                        imageModel.onChange(option.value);
-                                        setImageExpanded(false);
-                                    }, className: "flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: option.label }), option.value === imageModel.value && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, option.value))), _jsx("div", { className: "my-1 border-t border-border" })] })), showModelListSkeleton && _jsx(ModelSelectorSkeleton, {}), autoModelGroup && !onlyConnectPathAvailable && (_jsxs("button", { type: "button", onClick: () => {
-                            onChange("auto", autoModelGroup.engine);
-                            setOpen(false);
-                        }, className: "flex w-full items-center gap-3 px-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: t("agentChat.composer.auto", { defaultValue: "Auto" }) }), model === "auto" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })), autoModelGroup &&
-                        providerGroups.length > 0 &&
-                        !onlyConnectPathAvailable && (_jsx("div", { className: "my-1 border-t border-border" })), !onlyConnectPathAvailable &&
-                        providerGroups.map((group) => {
-                            const models = latestModelsOnly(group.models);
-                            const groupKey = `${group.engine}:${group.label}`;
-                            const isExpanded = expandedGroups.has(groupKey);
-                            const ChevronIcon = isExpanded ? IconChevronDown : IconChevronRight;
-                            const isLocalRuntime = group.engine === "codex-cli" || group.engine === "claude-cli";
-                            const canConnectLocalRuntime = isLocalRuntime && Boolean(onConnectLocalRuntime);
-                            const statusLabel = group.statusLabel ??
-                                (!group.configured
-                                    ? canConnectLocalRuntime
-                                        ? t("agentChat.auth.logIn", { defaultValue: "Sign in" })
-                                        : t("agentChat.composer.needsApiKey", {
-                                            defaultValue: "needs API key",
-                                        })
-                                    : undefined);
-                            return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center hover:bg-accent/30", children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, onClick: () => toggleGroup(groupKey), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [_jsx(ChevronIcon, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" }), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: group.label }), !isExpanded && groupKey === selectedGroupKey && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: friendlyModelName(model, t) }))] }), !group.configured && statusLabel && (_jsx("button", { type: "button", className: "ms-auto max-w-[9rem] shrink-0 text-end text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5", onClick: () => canConnectLocalRuntime
-                                                    ? connectLocalRuntime(group.engine)
-                                                    : openLlmSettings(), children: statusLabel })), group.configured && statusLabel && (_jsx("span", { className: "ms-auto max-w-[9rem] shrink-0 pe-3 text-end text-[10px] text-muted-foreground/70", children: statusLabel }))] }), isExpanded &&
-                                        models.map((m) => (_jsxs("button", { type: "button", onClick: () => {
-                                                if (!group.configured) {
-                                                    if (canConnectLocalRuntime) {
-                                                        connectLocalRuntime(group.engine);
-                                                    }
-                                                    else {
-                                                        openLlmSettings();
-                                                    }
-                                                    return;
-                                                }
-                                                onChange(m, group.engine);
-                                                const nextOptions = getReasoningEffortOptionsForModel(m);
-                                                if (nextOptions.length > 0 &&
-                                                    !nextOptions.includes(selectedEffort)) {
-                                                    onEffortChange?.(defaultEffort);
-                                                }
-                                                setOpen(false);
-                                            }, className: `flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start ${group.configured
-                                                ? "hover:bg-accent/50"
-                                                : "opacity-40 cursor-default"}`, children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: friendlyModelName(m, t) }), _jsx(ModelCostTier, { model: m }), m === model && group.configured && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, m)))] }, groupKey));
-                        }), !showModelListSkeleton &&
-                        !onlyConnectPathAvailable &&
-                        effortOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-border" }), _jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": effortExpanded, onClick: () => setEffortExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [effortExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: t("agentChat.composer.reasoning", {
-                                                defaultValue: "Reasoning",
-                                            }) }), !effortExpanded && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: effortLabel(selectedEffort) }))] }) }), effortExpanded &&
-                                effortOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => onEffortChange?.(option), className: "flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: effortLabel(option) }), option === selectedEffort && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, option)))] }))] })] }));
+                                : compactComposerModelName(model, t) }), effortOptions.length > 0 && (_jsxs("span", { className: "agent-composer-model-effort min-w-0 shrink truncate text-muted-foreground/70", children: ["\u00B7 ", compactComposerReasoningEffortLabel(selectedEffort, t)] })), _jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })] }) }), _jsx(PopoverContent, { side: "top", align: "end", sideOffset: 6, collisionPadding: 8, "data-agent-native-composer-popover": "true", className: `z-[260] overflow-visible ${MODEL_SELECTOR_POPOVER_CLASS}`, style: MODEL_SELECTOR_POPOVER_STYLE, children: _jsxs(Popover, { open: detailSection !== null, onOpenChange: () => undefined, children: [_jsx(PopoverAnchor, { asChild: true, children: _jsxs("div", { className: "flex flex-col", role: "tablist", "aria-label": t("agentChat.composer.pickerSections", {
+                                    defaultValue: "Picker sections",
+                                }), children: [agents && agents.length > 0 && (_jsxs("button", { type: "button", role: "tab", "aria-selected": resolvedSection === "agent", onClick: () => setDetailSection("agent"), onMouseEnter: () => setDetailSection("agent"), className: `flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${resolvedSection === "agent"
+                                            ? "bg-accent text-foreground"
+                                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"}`, children: [_jsxs("span", { className: "flex min-w-0 items-center", children: [_jsx("span", { className: "shrink-0 text-[12px] font-medium", children: "Agent" }), _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": t("agentChat.composer.harnessAgentHelp", {
+                                                                        defaultValue: "Learn about harness agents",
+                                                                    }), onClick: (event) => event.stopPropagation(), className: `ms-1.5 ${PICKER_HELP_BUTTON_CLASS}`, children: _jsx(IconHelpCircle, { "aria-hidden": "true", className: PICKER_HELP_ICON_CLASS, strokeWidth: 1.8 }) }) }), _jsxs(TooltipContent, { side: "right", className: "z-[400] max-w-xs", children: [_jsx("span", { className: "block", children: hostedHarness
+                                                                            ? t("agentChat.composer.hostedHarnessDescription", {
+                                                                                defaultValue: "Hosted mode uses app tools only. For full coding with a repository and shell, use Agent Native Desktop.",
+                                                                            })
+                                                                            : t("agentChat.composer.harnessAgentDescription", {
+                                                                                defaultValue: "Harnesses run their own coding loop and local tools.",
+                                                                            }) }), _jsx("a", { href: HARNESS_AGENTS_DOCS_URL, target: "_blank", rel: "noreferrer", className: "mt-1 block underline underline-offset-2 hover:no-underline", children: t("agentChat.composer.learnMoreHarnessAgents", {
+                                                                            defaultValue: "Learn more about harness agents",
+                                                                        }) })] })] })] }), _jsx("span", { className: "ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80", children: selectedAgentLabel }), _jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" })] })), _jsxs("button", { type: "button", role: "tab", "aria-selected": resolvedSection === "model", onClick: () => setDetailSection("model"), onMouseEnter: () => setDetailSection("model"), className: `flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${resolvedSection === "model"
+                                            ? "bg-accent text-foreground"
+                                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"}`, children: [_jsx("span", { className: "shrink-0 text-[12px] font-medium", children: "Model" }), _jsx("span", { className: "ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80", children: selectedModelLabel }), _jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" })] }), effortOptions.length > 0 && (_jsxs("button", { type: "button", role: "tab", "aria-selected": resolvedSection === "effort", onClick: () => setDetailSection("effort"), onMouseEnter: () => setDetailSection("effort"), className: `flex w-full min-w-0 items-center gap-1 rounded-md px-2 py-2 text-start transition-colors ${resolvedSection === "effort"
+                                            ? "bg-accent text-foreground"
+                                            : "text-muted-foreground hover:bg-accent/50 hover:text-foreground"}`, children: [_jsx("span", { className: "shrink-0 text-[12px] font-medium", children: t("agentChat.composer.effort", {
+                                                    defaultValue: "Effort",
+                                                }) }), _jsx("span", { className: "ms-auto min-w-0 max-w-[6rem] truncate text-end text-[11px] text-muted-foreground/80", children: effortLabel(selectedEffort) }), _jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 opacity-60 rtl:-scale-x-100" })] }))] }) }), _jsx(PopoverContent, { side: "right", align: "start", sideOffset: 4, alignOffset: -8, collisionPadding: 8, className: `z-[320] overflow-visible ${MODEL_SELECTOR_POPOVER_CLASS}`, style: MODEL_SELECTOR_POPOVER_STYLE, children: _jsx("div", { className: "max-h-[min(500px,var(--radix-popover-content-available-height,500px))] overflow-y-auto", children: _jsxs("div", { className: "min-h-0 min-w-0", role: "tabpanel", "aria-label": resolvedSection, children: [resolvedSection === "agent" && agents && (_jsx("div", { className: "flex flex-col", children: agents.map((agent) => {
+                                                const isSelected = agent.id === (selectedAgent ?? "default");
+                                                const isConfigured = agent.configured !== false;
+                                                const canConnect = !isConfigured && Boolean(onConnectLocalRuntime);
+                                                const statusLabel = agent.statusLabel ??
+                                                    (!isConfigured ? "Unavailable" : undefined);
+                                                return (_jsxs("div", { className: "group flex items-center rounded-md hover:bg-accent/30", children: [_jsxs("button", { type: "button", disabled: !isConfigured || !onAgentChange, "aria-current": isSelected ? "true" : undefined, onClick: () => {
+                                                                if (!isConfigured)
+                                                                    return;
+                                                                onAgentChange?.(agent.id);
+                                                                setPickerOpen(false);
+                                                            }, className: `flex min-w-0 flex-1 items-center gap-0.5 px-2 py-2 text-start ${isConfigured
+                                                                ? "hover:bg-accent/50"
+                                                                : "cursor-default opacity-50"}`, children: [_jsx("span", { className: `min-w-0 truncate text-[12px] ${isSelected
+                                                                        ? "text-foreground"
+                                                                        : "text-muted-foreground"}`, children: agent.label }), agent.description && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { role: "img", "aria-label": `${agent.label} details`, onClick: (event) => event.stopPropagation(), className: PICKER_HELP_BUTTON_CLASS, children: _jsx(IconHelpCircle, { "aria-hidden": "true", className: PICKER_HELP_ICON_CLASS, strokeWidth: 1.8 }) }) }), _jsx(TooltipContent, { side: "left", className: "z-[400] max-w-xs", children: agent.description })] })), _jsx("span", { className: "min-w-0 flex-1", "aria-hidden": "true" }), isSelected && isConfigured && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] }), !isConfigured && statusLabel && (_jsx("button", { type: "button", disabled: !canConnect, className: "ms-auto max-w-[6rem] shrink-0 truncate px-2 py-2 text-end text-[10px] text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 hover:text-foreground focus-visible:opacity-100 disabled:cursor-default", onClick: () => {
+                                                                if (canConnect)
+                                                                    connectLocalRuntime(agent.id);
+                                                            }, children: statusLabel }))] }, agent.id));
+                                            }) })), resolvedSection === "model" && (_jsxs(_Fragment, { children: [showProviderActions && (_jsxs(_Fragment, { children: [showBuilderAction && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => {
+                                                                        if (onConnectProvider) {
+                                                                            onConnectProvider();
+                                                                        }
+                                                                        else {
+                                                                            builderFlow.start();
+                                                                        }
+                                                                    }, disabled: !onConnectProvider && builderFlow.connecting, className: "flex w-full items-start gap-2 rounded-md px-2 py-2 text-start hover:bg-accent/50 disabled:opacity-60", children: [_jsx(IconPlugConnected, { className: "mt-0.5 h-4 w-4 shrink-0 text-primary" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-[12px] font-medium text-foreground", children: !onConnectProvider && builderFlow.connecting
+                                                                                        ? t("agentPanel.connectingBuilder", {
+                                                                                            defaultValue: "Connecting Builder.io…",
+                                                                                        })
+                                                                                        : t("agentPanel.connectBuilderIo", {
+                                                                                            defaultValue: "Connect Builder.io",
+                                                                                        }) }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: t("agentPanel.builderModelCredits", {
+                                                                                        defaultValue: "Free credits for Claude, OpenAI & Gemini",
+                                                                                    }) })] })] }), !onConnectProvider && builderFlow.error && (_jsx("p", { role: "alert", className: "px-2 pb-2 ps-8 text-[11px] text-destructive", children: builderFlow.error }))] })), showAddKeysAction && (_jsxs("button", { type: "button", onClick: openLlmSettings, className: "flex w-full items-start gap-2 rounded-md px-2 py-2 text-start hover:bg-accent/50", children: [_jsx(IconKey, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-[12px] font-medium text-foreground", children: t("agentPanel.addOwnKeys", {
+                                                                                defaultValue: "Add your own keys",
+                                                                            }) }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: t("agentPanel.configureProviderKeys", {
+                                                                                defaultValue: "Choose a cloud, gateway, or local provider",
+                                                                            }) })] })] }))] })), imageModel && imageModel.options.length > 0 && (_jsxs("div", { className: "mt-2 pt-1", children: [_jsx("div", { className: "px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: imageModel.label ??
+                                                                t("agentChat.composer.imageModel", {
+                                                                    defaultValue: "Image model",
+                                                                }) }), imageModel.options.map((option) => (_jsxs("button", { type: "button", onClick: () => {
+                                                                imageModel.onChange(option.value);
+                                                                setPickerOpen(false);
+                                                            }, className: "flex w-full items-center gap-3 rounded-md px-2 py-2 text-start hover:bg-accent/50", children: [_jsx("span", { className: `min-w-0 flex-1 truncate text-[12px] ${option.value === imageModel.value
+                                                                        ? "text-foreground"
+                                                                        : "text-muted-foreground"}`, children: option.label }), option.value === imageModel.value && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] }, option.value)))] })), showModelListSkeleton && _jsx(ModelSelectorSkeleton, {}), isCodexAgent &&
+                                                    !showModelListSkeleton &&
+                                                    !onlyConnectPathAvailable &&
+                                                    modelProviderGroups.length === 0 && (_jsxs("button", { type: "button", onClick: openLlmSettings, className: "flex w-full items-center rounded-md px-2 py-2 text-start hover:bg-accent/50", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-[12px] text-muted-foreground", children: t("agentChat.composer.noOpenAiModels", {
+                                                                defaultValue: "No OpenAI models configured",
+                                                            }) }), _jsx("span", { className: "shrink-0 text-[11px] text-muted-foreground/70", children: "Configure" })] })), autoModelGroup && !onlyConnectPathAvailable && (_jsxs("button", { type: "button", onClick: () => {
+                                                        onChange("auto", autoModelGroup.engine);
+                                                        setPickerOpen(false);
+                                                    }, className: "mt-1 flex w-full items-center gap-3 rounded-md px-2 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: `min-w-0 flex-1 truncate text-[13px] ${model === "auto"
+                                                                ? "text-foreground"
+                                                                : "text-muted-foreground"}`, children: t("agentChat.composer.auto", {
+                                                                defaultValue: "Auto",
+                                                            }) }), model === "auto" && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] })), !onlyConnectPathAvailable &&
+                                                    visibleProviderGroups.map((group, groupIndex) => {
+                                                        const models = latestModelsOnly(group.models);
+                                                        const showProviderLabels = visibleProviderGroups.length > 1;
+                                                        const isLocalRuntime = group.engine === "codex-cli" ||
+                                                            group.engine === "claude-cli";
+                                                        const canConnectLocalRuntime = isLocalRuntime && Boolean(onConnectLocalRuntime);
+                                                        const statusLabel = group.statusLabel ??
+                                                            (!group.configured
+                                                                ? canConnectLocalRuntime
+                                                                    ? t("agentChat.auth.logIn", {
+                                                                        defaultValue: "Sign in",
+                                                                    })
+                                                                    : t("agentChat.composer.needsApiKey", {
+                                                                        defaultValue: "needs API key",
+                                                                    })
+                                                                : undefined);
+                                                        return (_jsxs("div", { className: showProviderLabels && groupIndex > 0
+                                                                ? "mt-2 pt-1"
+                                                                : "", children: [showProviderLabels && (_jsxs("div", { className: "group flex items-center px-2 py-1", children: [_jsx("span", { className: "shrink-0 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: group.label }), !group.configured && statusLabel && (_jsx("button", { type: "button", "aria-label": statusLabel, className: "ms-auto max-w-[9rem] shrink-0 cursor-pointer truncate px-0 py-1 text-end text-[10px] text-muted-foreground/60 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 hover:text-foreground focus-visible:opacity-100", onClick: () => canConnectLocalRuntime
+                                                                                ? connectLocalRuntime(group.engine)
+                                                                                : openLlmSettings(), children: statusLabel })), group.configured && statusLabel && (_jsx("span", { className: "ms-auto max-w-[9rem] shrink-0 truncate py-1 text-end text-[10px] text-muted-foreground/70 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: statusLabel }))] })), models.map((m) => {
+                                                                    const isSelected = m === model && group.configured;
+                                                                    return (_jsxs("button", { type: "button", onClick: () => {
+                                                                            if (!group.configured) {
+                                                                                if (canConnectLocalRuntime) {
+                                                                                    connectLocalRuntime(group.engine);
+                                                                                }
+                                                                                else {
+                                                                                    openLlmSettings();
+                                                                                }
+                                                                                return;
+                                                                            }
+                                                                            onChange(m, group.engine);
+                                                                            const nextOptions = getReasoningEffortOptionsForModel(m);
+                                                                            if (nextOptions.length > 0 &&
+                                                                                !nextOptions.includes(selectedEffort)) {
+                                                                                onEffortChange?.(defaultEffort);
+                                                                            }
+                                                                            setPickerOpen(false);
+                                                                        }, className: `group flex w-full items-center gap-3 rounded-md px-2 py-2 text-start ${group.configured
+                                                                            ? "hover:bg-accent/50"
+                                                                            : "cursor-default opacity-40"}`, children: [_jsx("span", { className: `min-w-0 flex-1 truncate text-[12px] ${isSelected
+                                                                                    ? "text-foreground"
+                                                                                    : "text-muted-foreground"}`, children: friendlyModelName(m, t) }), _jsx(ModelCostTier, { model: m }), !showProviderLabels && statusLabel && (_jsx("span", { className: "hidden max-w-[9rem] shrink-0 truncate text-[10px] text-muted-foreground/70 group-hover:inline", children: statusLabel })), isSelected && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] }, m));
+                                                                })] }, `${group.engine}:${group.label}`));
+                                                    })] })), resolvedSection === "effort" && effortOptions.length > 0 && (_jsx("div", { className: "flex flex-col", children: effortOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => onEffortChange?.(option), className: "flex w-full items-center gap-3 rounded-md px-2 py-2 text-start hover:bg-accent/50", children: [_jsx("span", { className: `min-w-0 flex-1 truncate text-[12px] ${option === selectedEffort
+                                                            ? "text-foreground"
+                                                            : "text-muted-foreground"}`, children: effortLabel(option) }), option === selectedEffort && (_jsx(IconCheck, { className: "size-4 shrink-0 text-primary" }))] }, option))) }))] }) }) })] }) })] }));
 }
 function ModelSelectorSkeleton() {
     const t = useComposerRuntimeAdapters().translate;
@@ -924,7 +1011,7 @@ function ModelSelectorSkeleton() {
                     defaultValue: "Loading models…",
                 }) }), ["w-24", "w-32", "w-20", "w-28"].map((width, index) => (_jsxs("div", { className: "flex items-center gap-1.5 px-1 py-1.5", children: [_jsx(Skeleton, { className: "size-3 rounded-sm" }), _jsx(Skeleton, { className: `h-3 ${width}` })] }, index)))] }));
 }
-export function TiptapComposer({ placeholder, disabled = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", focusRef, initialText, initialTextKey, onSubmit, onBeforeSubmit, clearOnSubmit = true, onTextChange, actionButton, willQueue = false, extraActionButton, stopButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, showAutoModelOption = true, availableModels, modelListLoading, onModelChange, onEffortChange, availableAgents, selectedAgent, onAgentChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
+export function TiptapComposer({ placeholder, disabled = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", focusRef, initialText, initialTextKey, onSubmit, onBeforeSubmit, clearOnSubmit = true, onTextChange, actionButton, willQueue = false, extraActionButton, stopButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, showAutoModelOption = true, modelSelectorOpen, availableModels, modelListLoading, onModelChange, onEffortChange, availableAgents, selectedAgent, hostedHarness, onAgentChange, onModelSelectorOpenChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
     const adapters = useComposerRuntimeAdapters();
     const t = adapters.translate;
     const sendButtonTooltip = t(getComposerSendTooltipKey(willQueue), {
@@ -2139,6 +2226,6 @@ export function TiptapComposer({ placeholder, disabled = false, maxDocumentAttac
                                     defaultValue: "Remove {{name}} context",
                                     name: item.title,
                                 }), className: "ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground", children: _jsx(IconX, { className: "h-3 w-3" }) })] }, item.key)))] })), _jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor-wrap", className: `agent-composer-editor-wrap ${composerMode || hasContextRows ? "px-2 pt-1 pb-1" : "px-2 pt-2 pb-1"}`, children: _jsx(EditorContent, { editor: editor, "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "editor", className: "agent-composer-editor aui-composer flex-1 min-w-0 [&_.ProseMirror]:outline-none [&_.ProseMirror_p]:m-0 px-0.5" }) }), voiceEnabled && _jsx(VoiceRecordingOverlay, { voice: voice }), _jsxs("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "toolbar", className: "agent-composer-toolbar flex items-center gap-1 px-2 py-1.5", children: [attachButton ??
-                        (plusMenuMode === "hidden" ? null : (_jsx(ComposerPlusMenu, { onSelectMode: handleSelectMode, mode: plusMenuMode, extensionTools: extensionTools, onAttachmentError: onAttachmentError }))), toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), selectedModel && availableModels && onModelChange && (_jsx(ModelSelector, { model: selectedModel, effort: selectedEffort, engines: availableModels, agents: availableAgents, selectedAgent: selectedAgent, showAutoModelOption: showAutoModelOption, modelListLoading: modelListLoading, onChange: onModelChange, onEffortChange: onEffortChange, onAgentChange: onAgentChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, imageModel: imageModelMenu })), execMode && onExecModeChange && (_jsx(ModeSelector, { mode: execMode, onChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason })), actionButton ?? (_jsxs(_Fragment, { children: [extraActionButton, voiceEnabled && (_jsx(VoiceButton, { voice: voice, isMac: isMac, disabled: disabled })), primaryAction === "stop" ? (stopButton) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => void submitComposer("immediate"), disabled: !canSend, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: sendButtonTooltip })] }))] }))] }), _jsx(MentionPopover, { ref: popoverRef, type: popover?.type ?? "@", position: popover?.position ?? null, mentionItems: filteredMentionItems, skills: filteredSkills, commands: filteredCommands, hint: hint, isLoading: popover?.type === "@" ? mentionsLoading : skillsLoading, query: popover?.query ?? "", onSelectMention: handleSelectMention, onSelectSkill: handleSelectSkill, onSelectCommand: handleSelectCommand, onClose: closePopover })] }));
+                        (plusMenuMode === "hidden" ? null : (_jsx(ComposerPlusMenu, { onSelectMode: handleSelectMode, mode: plusMenuMode, extensionTools: extensionTools, onAttachmentError: onAttachmentError }))), toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), selectedModel && availableModels && onModelChange && (_jsx(ModelSelector, { model: selectedModel, open: modelSelectorOpen, effort: selectedEffort, engines: availableModels, agents: availableAgents, selectedAgent: selectedAgent, hostedHarness: hostedHarness, showAutoModelOption: showAutoModelOption, modelListLoading: modelListLoading, onChange: onModelChange, onEffortChange: onEffortChange, onAgentChange: onAgentChange, onModelSelectorOpenChange: onModelSelectorOpenChange, providerConnectStatusEnabled: providerConnectStatusEnabled, onConnectProvider: onConnectProvider, onConnectLocalRuntime: onConnectLocalRuntime, imageModel: imageModelMenu })), execMode && onExecModeChange && (_jsx(ModeSelector, { mode: execMode, onChange: onExecModeChange, planModeDisabled: planModeDisabled, planModeDisabledReason: planModeDisabledReason })), actionButton ?? (_jsxs(_Fragment, { children: [extraActionButton, voiceEnabled && (_jsx(VoiceButton, { voice: voice, isMac: isMac, disabled: disabled })), primaryAction === "stop" ? (stopButton) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", onClick: () => void submitComposer("immediate"), disabled: !canSend, "data-agent-composer-slot": "send-button", className: "agent-composer-send-button shrink-0 flex h-7 w-7 items-center justify-center rounded-md bg-primary text-primary-foreground hover:opacity-90 transition-[opacity,transform] duration-150 active:scale-[0.97] disabled:opacity-30 disabled:cursor-not-allowed", children: _jsx(IconArrowUp, { className: "h-3.5 w-3.5" }) }) }), _jsx(TooltipContent, { children: sendButtonTooltip })] }))] }))] }), _jsx(MentionPopover, { ref: popoverRef, type: popover?.type ?? "@", position: popover?.position ?? null, mentionItems: filteredMentionItems, skills: filteredSkills, commands: filteredCommands, hint: hint, isLoading: popover?.type === "@" ? mentionsLoading : skillsLoading, query: popover?.query ?? "", onSelectMention: handleSelectMention, onSelectSkill: handleSelectSkill, onSelectCommand: handleSelectCommand, onClose: closePopover })] }));
 }
 //# sourceMappingURL=TiptapComposer.js.map