@agent-native/toolkit 0.0.0-beta-20260819143124

package/dist/composer/TiptapComposer.js

@@ -0,0 +1,2233 @@
+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, 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, 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";
+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";
+import { useSkills } from "./use-skills.js";
+import { RealtimeVoiceModeBoundary } from "./useRealtimeVoiceMode.js";
+import { useVoiceDictation } from "./useVoiceDictation.js";
+import { VoiceButton, VoiceRecordingOverlay } from "./VoiceButton.js";
+export const DEFAULT_VOICE_DICTATION_ENABLED = false;
+export function canSubmitComposerContent(options) {
+    return (!options.disabled &&
+        (options.hasEditorContent || options.attachmentCount > 0));
+}
+const VOICE_TERMINAL_PUNCTUATION = /[.!?…。！？:;](?:["'”’»)\]}]*)$/;
+export function formatVoiceTranscriptForComposer(text) {
+    const trimmed = text.trim();
+    if (!trimmed)
+        return "";
+    return `${trimmed}${VOICE_TERMINAL_PUNCTUATION.test(trimmed) ? "" : "."} `;
+}
+export function canRemoveVoicePreview(options) {
+    if (!options.previewText)
+        return false;
+    if (options.anchor < 1)
+        return false;
+    if (options.anchor + options.previewText.length > options.documentSize) {
+        return false;
+    }
+    return options.currentText === options.previewText;
+}
+export function resolveComposerPrimaryAction(options) {
+    return !options.canSubmit && options.hasStopButton ? "stop" : "send";
+}
+export function getComposerSendTooltipKey(willQueue) {
+    return willQueue ? "composer.queueMessage" : "composer.sendMessage";
+}
+export function resolveContextChipBackspaceAction(options) {
+    if (!options.cursorAtStart || options.contextItemKeys.length === 0) {
+        return null;
+    }
+    if (options.selectedKey &&
+        options.contextItemKeys.includes(options.selectedKey)) {
+        return { type: "remove", key: options.selectedKey };
+    }
+    return {
+        type: "select",
+        key: options.contextItemKeys[options.contextItemKeys.length - 1],
+    };
+}
+const MAX_DOCUMENT_ATTACHMENT_BYTES = 4 * 1024 * 1024;
+function composerReferenceFromMentionItem(item) {
+    return {
+        label: item.label,
+        icon: item.icon || "file",
+        source: item.source,
+        refType: item.refType,
+        refId: item.refId || null,
+        refPath: item.refPath || null,
+        slotKey: item.slotKey,
+        slotLabel: item.slotLabel,
+        metadata: item.metadata,
+        clearsSlots: item.clearsSlots,
+        relatedReferences: item.relatedReferences,
+    };
+}
+function mentionReferenceAttrs(ref) {
+    return {
+        label: ref.label,
+        icon: ref.icon || "file",
+        source: ref.source,
+        refType: ref.refType,
+        refId: ref.refId || null,
+        refPath: ref.refPath || null,
+        slotKey: ref.slotKey || null,
+        slotLabel: ref.slotLabel || null,
+        metadata: ref.metadata || null,
+    };
+}
+function referenceFromComposerReference(ref) {
+    return {
+        type: ref.refType === "file"
+            ? "file"
+            : ref.refType === "agent"
+                ? "agent"
+                : ref.refType === "custom-agent"
+                    ? "custom-agent"
+                    : "mention",
+        path: ref.refPath || "",
+        name: ref.label,
+        source: ref.source || "",
+        refType: ref.refType,
+        refId: ref.refId || undefined,
+        slotKey: ref.slotKey,
+        slotLabel: ref.slotLabel,
+        metadata: ref.metadata,
+    };
+}
+function applySlotReferenceChanges(current, references) {
+    let next = current;
+    const applyOne = (ref) => {
+        for (const related of ref.relatedReferences ?? []) {
+            applyOne(related);
+        }
+        if (!ref.slotKey)
+            return;
+        const cleared = new Set([ref.slotKey, ...(ref.clearsSlots ?? [])]);
+        next = next.filter((existing) => !cleared.has(existing.slotKey ?? ""));
+        next = [...next, ref];
+    };
+    for (const ref of references) {
+        applyOne(ref);
+    }
+    return next;
+}
+function removeSlotReference(current, ref) {
+    const removed = new Set([ref.slotKey, ...(ref.clearsSlots ?? [])]);
+    return current.filter((existing) => !removed.has(existing.slotKey ?? ""));
+}
+function slotReferenceTitle(ref) {
+    return ref.slotLabel ? `${ref.slotLabel}: ${ref.label}` : ref.label;
+}
+function metadataString(metadata, key) {
+    const value = metadata?.[key];
+    return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function trimVoiceContextValue(value, maxChars) {
+    const trimmed = value.replace(/\0/g, "").trim();
+    if (!trimmed)
+        return null;
+    if (trimmed.length <= maxChars)
+        return trimmed;
+    return `${trimmed.slice(0, maxChars).trimEnd()}\n[truncated]`;
+}
+function filterMentionItemsForSlots(items, slotReferences) {
+    return items.filter((item) => {
+        const requiredSlotKey = metadataString(item.metadata, "requiredSlotKey");
+        const requiredRefId = metadataString(item.metadata, "requiredRefId");
+        if (!requiredSlotKey || !requiredRefId)
+            return true;
+        const selected = slotReferences.find((ref) => ref.slotKey === requiredSlotKey);
+        if (!selected?.refId)
+            return true;
+        return selected.refId === requiredRefId;
+    });
+}
+function isDocumentAttachment(value) {
+    if (value.type === "document")
+        return true;
+    const contentType = String(value.contentType ?? "").toLowerCase();
+    const name = String(value.name ?? "").toLowerCase();
+    return contentType === "application/pdf" || name.endsWith(".pdf");
+}
+export function getOversizedDocumentAttachmentError(attachments, options = {}) {
+    const maxBytes = options.maxBytes ?? MAX_DOCUMENT_ATTACHMENT_BYTES;
+    const label = options.label ?? "PDFs";
+    const t = options.translate;
+    for (const attachment of attachments) {
+        if (!attachment || typeof attachment !== "object")
+            continue;
+        const candidate = attachment;
+        if (!isDocumentAttachment(candidate))
+            continue;
+        const file = candidate.file;
+        if (!(file instanceof File))
+            continue;
+        if (file.size <= maxBytes)
+            continue;
+        const name = typeof candidate.name === "string" && candidate.name.trim()
+            ? candidate.name
+            : file.name;
+        const mb = (file.size / 1024 / 1024).toFixed(1);
+        const maxMb = (maxBytes / 1024 / 1024).toFixed(0);
+        return (t?.("agentChat.composer.documentTooLarge", {
+            defaultValue: '"{{name}}" is {{size}} MB. {{label}} are capped at {{maxSize}} MB to stay within message limits. Please reduce the file size or split it into smaller parts.',
+            name,
+            size: mb,
+            label,
+            maxSize: maxMb,
+        }) ??
+            `"${name}" is ${mb} MB. ${label} are capped at ${maxMb} MB to stay within message limits. Please reduce the file size or split it into smaller parts.`);
+    }
+    return null;
+}
+export function getComposerSubmitIntentForEnterKey(event, isMac) {
+    if (event.key !== "Enter" || event.shiftKey)
+        return null;
+    const queuedModifierPressed = isMac ? event.metaKey : event.ctrlKey;
+    if (queuedModifierPressed)
+        return "queued";
+    if (!event.metaKey && !event.ctrlKey)
+        return "immediate";
+    return null;
+}
+export function insertComposerHardBreakAndScrollIntoView(view) {
+    const hardBreak = view.state.schema.nodes.hardBreak;
+    if (!hardBreak)
+        return false;
+    view.dispatch(view.state.tr.replaceSelectionWith(hardBreak.create()).scrollIntoView());
+    return true;
+}
+export function getComposerPopoverPosition(view, pos) {
+    try {
+        const coords = view.coordsAtPos(pos);
+        if (!Number.isFinite(coords.top) || !Number.isFinite(coords.left)) {
+            return null;
+        }
+        return { top: coords.top, left: coords.left };
+    }
+    catch {
+        return null;
+    }
+}
+export function displayableComposerModeMessage(options) {
+    const modePrompt = options.trimmedText ||
+        (options.attachmentCount > 0
+            ? (options.attachedContextFallback ?? "Use the attached context.")
+            : "");
+    return `${options.messagePrefix}${modePrompt}`;
+}
+function uniquifyComposerImageFile(file) {
+    if (!file.type.startsWith("image/"))
+        return file;
+    const uniqueName = `${Date.now()}-${Math.random().toString(36).slice(2)}-${file.name}`;
+    return new File([file], uniqueName, { type: file.type });
+}
+function composerDocumentHasContent(doc) {
+    if (doc.textContent.trim().length > 0)
+        return true;
+    let hasContent = false;
+    doc.descendants((node) => {
+        if (node.type.name === "mentionReference" ||
+            node.type.name === "fileReference" ||
+            node.type.name === "skillReference") {
+            hasContent = true;
+            return false;
+        }
+        return true;
+    });
+    return hasContent;
+}
+export function handleComposerFileDrop(options) {
+    const droppedFiles = Array.from(options.event.dataTransfer?.files ?? []);
+    if (droppedFiles.length === 0)
+        return false;
+    options.event.preventDefault();
+    options.event.stopPropagation();
+    const attachments = droppedFiles.map(uniquifyComposerImageFile);
+    void Promise.all(attachments.map((file) => options.addAttachment(file))).catch((error) => {
+        options.onError?.(error);
+    });
+    return true;
+}
+function builtInCommands(t) {
+    return [
+        {
+            name: "clear",
+            description: t("agentChat.commands.clearShort", {
+                defaultValue: "Start a new chat",
+            }),
+            icon: "clear",
+        },
+        {
+            name: "new",
+            description: t("agentChat.commands.newShort", {
+                defaultValue: "Start a new chat",
+            }),
+            icon: "new",
+        },
+        {
+            name: "history",
+            description: t("agentChat.commands.history", {
+                defaultValue: "Browse all chats",
+            }),
+            icon: "history",
+        },
+        {
+            name: "plan",
+            description: t("agentChat.commands.plan", {
+                defaultValue: "Switch to read-only planning",
+            }),
+            icon: "plan",
+        },
+        {
+            name: "act",
+            description: t("agentChat.commands.act", {
+                defaultValue: "Switch back to acting",
+            }),
+            icon: "act",
+        },
+        {
+            name: "help",
+            description: t("agentChat.commands.help", {
+                defaultValue: "Show available commands",
+            }),
+            icon: "help",
+        },
+    ];
+}
+function normalizeSlashCommandName(name) {
+    return name.replace(/^\/+/, "").trim().toLowerCase();
+}
+function mergeSlashCommands(commands) {
+    const seen = new Set();
+    const merged = [];
+    for (const command of commands) {
+        const name = normalizeSlashCommandName(command.name);
+        if (!name || seen.has(name))
+            continue;
+        seen.add(name);
+        merged.push({ ...command, name });
+    }
+    return merged;
+}
+function mergeSlashSkills(skills) {
+    const seen = new Set();
+    const merged = [];
+    for (const skill of skills) {
+        const key = `${skill.source ?? ""}:${skill.path ?? ""}:${skill.name}`;
+        if (!skill.name || seen.has(key))
+            continue;
+        seen.add(key);
+        merged.push(skill);
+    }
+    return merged;
+}
+const COMPOSER_MODE_CONFIGS = {
+    skill: {
+        icon: IconBulb,
+        getContext: (prompt) => `The user wants to create an agent skill. Their description: "${prompt}"
+
+Follow the create-skill pattern to build this. Before writing:
+
+1. **Determine the skill name** — derive a hyphen-case name from the description (e.g. "code review" → "code-review")
+2. **Determine the skill type** — Pattern (architectural rule), Workflow (step-by-step), or Generator (scaffolding)
+3. **Write the skill** as a personal resource at path "skills/<name>/SKILL.md" using the \`resources\` tool with \`action: "write"\`
+
+The skill file MUST have YAML frontmatter with name and description (under 40 words), then markdown with:
+- Clear rule/purpose statement
+- Why this skill exists
+- How to follow it (with code examples where helpful)
+- Common violations to avoid
+- Related skills
+
+After creating, update the shared AGENTS.md resource to reference the new skill in its skills table.
+
+Keep the skill concise (under 500 lines) and actionable.`,
+    },
+    job: {
+        icon: IconClock,
+        getContext: (prompt) => `The user wants to create a recurring job. Their description: "${prompt}"
+
+Use the manage-jobs tool with action "create" to create this. You need to:
+1. Derive a hyphen-case name from the description
+2. Convert the schedule to a cron expression (e.g., "every weekday at 9am" → "0 9 * * 1-5")
+3. Write clear, self-contained instructions for what the agent should do each time the job runs
+4. Create it in personal scope
+
+The job will run automatically on the schedule. Make the instructions specific — include which actions to call and what to do with results.`,
+    },
+    automation: {
+        icon: IconBolt,
+        beforeSend: () => {
+            window.dispatchEvent(new CustomEvent("agent-panel:set-mode", {
+                detail: { mode: "chat" },
+            }));
+        },
+        getContext: (prompt) => `The user wants to create a new automation. Scope: personal. Their description: "${prompt}"
+
+Use manage-automations with action=define to create it. Ask clarifying questions if needed about what event to trigger on, conditions, and what actions to take.`,
+    },
+    extension: {
+        icon: IconTool,
+        getContext: (prompt) => `The user wants to create an interactive extension (sandboxed mini-app). Their description: "${prompt}"
+
+Use the create-extension action with Alpine.js HTML content. The extension runs as a sandboxed iframe with Tailwind CSS and modest default canvas padding. For edge-to-edge layouts, put data-extension-layout="full-bleed" on the outermost element.
+
+After creating the extension, navigate the user to it with the path returned by create-extension; extension URLs may include a friendly "/extensions/<id>/<slug>" suffix.
+
+Make the extension functional and visually polished. Extensions can use extensionFetch() for external API calls, appAction()/appFetch() for app operations and app data writes, extensionData for per-extension persistence, and dbQuery() only for read-only inspection of existing app tables.
+
+Prefer appAction()/appFetch() for app data. Some actions return JSON strings for CLI compatibility, so parse string results before counting rows or reading arrays. Do not guess raw SQL table names or columns for app data; use dbQuery() only when the table is known to exist in the current schema.`,
+    },
+};
+function localizedComposerModeConfig(mode, t) {
+    const config = COMPOSER_MODE_CONFIGS[mode];
+    const copies = {
+        skill: {
+            label: t("agentChat.composer.createSkill", {
+                defaultValue: "Create Skill",
+            }),
+            placeholder: t("agentChat.composer.describeSkill", {
+                defaultValue: "Describe the skill you want to create...",
+            }),
+            messagePrefix: t("agentChat.composer.createSkillPrefix", {
+                defaultValue: "Create a skill: ",
+            }),
+        },
+        job: {
+            label: t("agentChat.composer.scheduleTask", {
+                defaultValue: "Schedule Task",
+            }),
+            placeholder: t("agentChat.composer.describeSchedule", {
+                defaultValue: "Describe what should happen and when...",
+            }),
+            messagePrefix: t("agentChat.composer.scheduleTaskPrefix", {
+                defaultValue: "Create a recurring job: ",
+            }),
+        },
+        automation: {
+            label: t("agentChat.composer.createAutomation", {
+                defaultValue: "Create Automation",
+            }),
+            placeholder: t("agentChat.composer.describeAutomation", {
+                defaultValue: "Describe what you want to automate...",
+            }),
+            messagePrefix: t("agentChat.composer.createAutomationPrefix", {
+                defaultValue: "Create an automation: ",
+            }),
+        },
+        extension: {
+            label: t("agentChat.composer.createExtension", {
+                defaultValue: "Create Extension",
+            }),
+            placeholder: t("agentChat.composer.describeExtension", {
+                defaultValue: "Describe the interactive extension you want to build...",
+            }),
+            messagePrefix: t("agentChat.composer.createExtensionPrefix", {
+                defaultValue: "Create an extension: ",
+            }),
+        },
+    };
+    return { ...config, ...copies[mode] };
+}
+function ComposerModeChip({ mode, onRemove, }) {
+    const t = useComposerRuntimeAdapters().translate;
+    const config = localizedComposerModeConfig(mode, t);
+    const Icon = config.icon;
+    return (_jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-muted/50 px-1.5 py-0.5 text-xs font-medium text-foreground", children: [_jsx(Icon, { className: "h-3 w-3 text-muted-foreground" }), config.label, _jsx("button", { type: "button", onClick: onRemove, className: "ms-0.5 rounded-sm text-muted-foreground hover:text-foreground cursor-pointer", children: _jsx(IconX, { className: "h-3 w-3" }) })] }));
+}
+function plainTextToDoc(text) {
+    const lines = text.length > 0 ? text.split(/\r?\n/) : [""];
+    return {
+        type: "doc",
+        content: lines.map((line) => ({
+            type: "paragraph",
+            content: line ? [{ type: "text", text: line }] : [],
+        })),
+    };
+}
+/** Tiptap keeps the Editor object truthy after destroy but clears commandManager. */
+export function isComposerEditorUsable(editor) {
+    return Boolean(editor && editor.isDestroyed !== true);
+}
+export function createTiptapComposerExtensions(getPlaceholder) {
+    return [
+        StarterKit.configure({
+            heading: false,
+            horizontalRule: false,
+            bulletList: false,
+            orderedList: false,
+            listItem: false,
+            listKeymap: false,
+            blockquote: false,
+            codeBlock: false,
+            strike: false,
+            italic: false,
+            bold: false,
+            code: false,
+            dropcursor: false,
+            gapcursor: false,
+            link: false,
+            trailingNode: false,
+            underline: false,
+        }),
+        Placeholder.configure({
+            placeholder: () => getPlaceholder() ?? "",
+            emptyEditorClass: "is-editor-empty",
+            showOnlyCurrent: false,
+        }),
+        FileReference,
+        SkillReference,
+        MentionReference,
+    ];
+}
+function ModeSelector({ mode, onChange, planModeDisabled = false, planModeDisabledReason, }) {
+    const t = useComposerRuntimeAdapters().translate;
+    const [open, setOpen] = useState(false);
+    const resolvedPlanModeDisabledReason = planModeDisabledReason ??
+        t("agentChat.composer.planDesktopRequired", {
+            defaultValue: "Open Agent Native Desktop to use Plan mode.",
+        });
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": mode === "build"
+                        ? t("agentChat.composer.actMode", { defaultValue: "Act mode" })
+                        : t("agentChat.plan.mode", { defaultValue: "Plan mode" }), "data-agent-composer-slot": "mode-button", className: "agent-composer-mode-button shrink-0 flex 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: [mode === "build"
+                            ? t("agentChat.plan.act", { defaultValue: "Act" })
+                            : t("agentChat.composer.plan", { defaultValue: "Plan" }), _jsx(IconChevronDown, { className: "h-3 w-3 opacity-60" })] }) }), _jsxs(PopoverContent, { side: "top", align: "end", sideOffset: 6, collisionPadding: 8, "data-agent-native-composer-popover": "true", className: "z-[260] w-60 rounded-lg border-border p-0 py-1 shadow-lg", style: { fontSize: 13 }, children: [_jsxs("button", { type: "button", onClick: () => {
+                            onChange("build");
+                            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: "size-4 shrink-0 text-primary" }))] }), _jsxs("button", { type: "button", disabled: planModeDisabled, title: planModeDisabled ? resolvedPlanModeDisabledReason : undefined, onClick: () => {
+                            if (planModeDisabled)
+                                return;
+                            onChange("plan");
+                            setOpen(false);
+                        }, className: `flex w-full items-center gap-3 px-3 py-2 text-start ${planModeDisabled
+                            ? "cursor-not-allowed opacity-60"
+                            : "hover:bg-accent/50"}`, children: [_jsx(IconClipboardList, { 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.composer.plan", { defaultValue: "Plan" }) }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: planModeDisabled
+                                            ? resolvedPlanModeDisabledReason
+                                            : t("agentChat.composer.planDescription", {
+                                                defaultValue: "Read-only research and approval first",
+                                            }) })] }), 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;
+}
+/**
+ * With nothing connected, every family is a dead "needs API key" row, so the
+ * picker shows only the connect CTAs. Never hide the list unless a CTA is
+ * there to replace it — an empty popover reads as more broken, not less.
+ */
+export function shouldShowOnlyConnectPath(showBuilderCta, groups) {
+    return showBuilderCta && groups.every((group) => !group.configured);
+}
+function friendlyModelName(model, t) {
+    if (model === "auto") {
+        return (t?.("agentChat.composer.defaultModel", {
+            defaultValue: "Default model",
+        }) ?? "Default model");
+    }
+    if (FRIENDLY_MODEL_NAMES[model])
+        return FRIENDLY_MODEL_NAMES[model];
+    // Claude: claude-{tier}-{major}[-minor][-dateYYYYMMDD] → Tier Major[.Minor]
+    const claude = model.match(/^claude-(opus|sonnet|haiku)-(\d+)(?:-(\d+))?(?:-\d{8,})?$/);
+    if (claude) {
+        const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
+        return `${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
+    }
+    // GPT: gpt-{major}-{minor}[-suffix] or gpt-{major}.{minor}[-suffix]
+    if (model.startsWith("gpt-")) {
+        const rest = model.slice(4);
+        const gpt = rest.match(/^(\d+)[.-](\d+)(?:[.-](.+))?$/);
+        if (gpt) {
+            const suffix = gpt[3]
+                ? " " +
+                    gpt[3]
+                        .split("-")
+                        .map((s) => s[0].toUpperCase() + s.slice(1))
+                        .join(" ")
+                : "";
+            return `GPT-${gpt[1]}.${gpt[2]}${suffix}`;
+        }
+        return `GPT-${rest}`;
+    }
+    if (/^o\d/.test(model))
+        return model;
+    // Gemini: gemini-{major}-{minor}-{variant}[-preview] → Gemini Major.Minor Variant
+    const geminiVersioned = model.match(/^gemini-(\d+)-(\d+)-(.+?)(?:-preview)?$/);
+    if (geminiVersioned) {
+        const variant = geminiVersioned[3]
+            .split("-")
+            .map((s) => s[0].toUpperCase() + s.slice(1))
+            .join(" ");
+        return `Gemini ${geminiVersioned[1]}.${geminiVersioned[2]} ${variant}`;
+    }
+    // Gemini: gemini-{version.parts}[-preview] → Gemini Version Parts
+    const gemini = model.match(/^gemini-(.+?)(?:-preview)?$/);
+    if (gemini) {
+        const parts = gemini[1]
+            .split("-")
+            .map((s) => s[0].toUpperCase() + s.slice(1))
+            .join(" ");
+        return `Gemini ${parts}`;
+    }
+    return model;
+}
+export function compactComposerModelName(model, t) {
+    const gpt56Variant = model.match(/^(?:openai\/)?gpt-5[.-]6[.-](sol|terra|luna)$/i)?.[1];
+    if (gpt56Variant) {
+        const variant = gpt56Variant[0].toUpperCase() + gpt56Variant.slice(1).toLowerCase();
+        return `GPT-5.6 ${variant}`;
+    }
+    return friendlyModelName(model, t);
+}
+export function compactComposerReasoningEffortLabel(effort, t) {
+    if (effort === "medium" || effort === "auto") {
+        return (t?.("agentChat.composer.reasoningMediumShort", {
+            defaultValue: "Med",
+        }) ?? "Med");
+    }
+    if (effort === "minimal") {
+        return (t?.("agentChat.composer.reasoningMinimalShort", {
+            defaultValue: "Min",
+        }) ?? "Min");
+    }
+    if (effort === "xhigh") {
+        return (t?.("agentChat.composer.reasoningExtraHighShort", {
+            defaultValue: "XHigh",
+        }) ?? "XHigh");
+    }
+    return t
+        ? localizedReasoningEffortLabel(t, effort, reasoningEffortLabel(effort))
+        : reasoningEffortLabel(effort);
+}
+function localizedReasoningEffortLabel(t, effort, defaultValue) {
+    switch (effort) {
+        case "auto":
+            return t("agentChat.composer.reasoningEffort.auto", { defaultValue });
+        case "none":
+            return t("agentChat.composer.reasoningEffort.none", { defaultValue });
+        case "minimal":
+            return t("agentChat.composer.reasoningEffort.minimal", { defaultValue });
+        case "low":
+            return t("agentChat.composer.reasoningEffort.low", { defaultValue });
+        case "medium":
+            return t("agentChat.composer.reasoningEffort.medium", { defaultValue });
+        case "high":
+            return t("agentChat.composer.reasoningEffort.high", { defaultValue });
+        case "xhigh":
+            return t("agentChat.composer.reasoningEffort.xhigh", { defaultValue });
+        case "max":
+            return t("agentChat.composer.reasoningEffort.max", { defaultValue });
+    }
+}
+/**
+ * Deduplicate models to only the latest version per family.
+ * e.g. [opus-4-7, opus-4-6, opus-4-5] → [opus-4-7]
+ */
+function latestModelsOnly(models) {
+    const seen = new Set();
+    return models.filter((m) => {
+        // Claude: family = tier (opus/sonnet/haiku)
+        const claude = m.match(/^claude-(opus|sonnet|haiku)-/);
+        if (claude) {
+            if (seen.has(claude[1]))
+                return false;
+            seen.add(claude[1]);
+            return true;
+        }
+        // GPT: family = gpt-{major} (e.g. gpt-5.6-sol and gpt-5.6-luna are different)
+        // OpenAI effort: each is its own family
+        // Gemini: family = gemini-{major} + variant
+        const gemini = m.match(/^gemini-(\d+(?:\.\d+)?)-(.+?)(?:-preview)?$/);
+        if (gemini) {
+            const family = gemini[2]; // flash, pro, etc.
+            if (seen.has(`gemini-${family}`))
+                return false;
+            seen.add(`gemini-${family}`);
+            return true;
+        }
+        return true;
+    });
+}
+/**
+ * Coarse relative cost per model, rendered as a quiet `$`…`$$$` suffix.
+ *
+ * Tokens and their order mirror `MODEL_COST_ORDER` in `@agent-native/core`'s
+ * chat-model-groups, which sorts these same rows — the toolkit cannot import
+ * from core, so a new model family has to be added in both places. Tiers are
+ * each provider's own entry/mid/flagship ladder, not a cross-provider price
+ * claim; anything unlisted has no tier rather than a guessed one.
+ */
+const MODEL_COST_TIERS = [
+    ["luna", 1],
+    ["terra", 2],
+    ["sol", 3],
+    ["haiku", 1],
+    ["sonnet", 2],
+    ["opus", 3],
+    ["fable", 3],
+    ["flash", 1],
+    ["pro", 3],
+];
+export function composerModelCostTier(model) {
+    const normalized = model.toLowerCase();
+    return MODEL_COST_TIERS.find(([token]) => normalized.includes(token))?.[1];
+}
+function ModelCostTier({ model }) {
+    const t = useComposerRuntimeAdapters().translate;
+    const tier = composerModelCostTier(model);
+    if (!tier)
+        return null;
+    const costLabel = tier === 1
+        ? t("agentChat.composer.costLower", { defaultValue: "Lower cost" })
+        : tier === 2
+            ? t("agentChat.composer.costMedium", { defaultValue: "Medium cost" })
+            : t("agentChat.composer.costHigher", { defaultValue: "Higher cost" });
+    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, agentOnly = false, 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 [internalOpen, setInternalOpen] = useState(false);
+    const open = controlledOpen ?? internalOpen;
+    const isClaudeCodeAgent = isClaudeCodeAgentId(selectedAgent);
+    const autoModelGroup = showAutoModelOption
+        ? isClaudeCodeAgent
+            ? undefined
+            : engines.find((group) => group.models.includes("auto"))
+        : undefined;
+    const providerGroups = useMemo(() => engines
+        .map((group) => ({
+        ...group,
+        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 = agentOnly
+        ? []
+        : (reasoning?.getOptionsForModel?.(model) ??
+            getComposerReasoningEffortOptions(model));
+    const selectedEffort = reasoning?.resolve?.(model, effort) ??
+        resolveReasoningEffortSelection(model, effort ?? defaultEffort);
+    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";
+    const selectedModelLabel = friendlyModelName(model, t).replace(/^GPT-/, "");
+    const [detailSection, setDetailSection] = useState(null);
+    const resolvedSection = detailSection ?? (agentOnly ? "agent" : "model");
+    const setPickerOpen = useCallback((nextOpen) => {
+        if (controlledOpen === undefined)
+            setInternalOpen(nextOpen);
+        if (nextOpen)
+            setDetailSection(agentOnly ? "agent" : null);
+        onModelSelectorOpenChange?.(nextOpen);
+    }, [agentOnly, controlledOpen, onModelSelectorOpenChange]);
+    const visibleProviderGroups = modelProviderGroups;
+    const showModelListSkeleton = shouldShowModelSelectorSkeleton(modelListLoading, engines.length);
+    // 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 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"));
+        setPickerOpen(false);
+    }, [setPickerOpen]);
+    const connectLocalRuntime = useCallback((engine) => {
+        onConnectLocalRuntime?.(engine);
+        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.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: [_jsxs("span", { className: "min-w-0 truncate", children: [selectedAgentOption?.icon ? (_jsx("span", { className: "me-1 inline-flex shrink-0 align-[-2px] text-muted-foreground", children: selectedAgentOption.icon })) : null, 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" })] }) }), _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" })] })), !agentOnly && (_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" })] })), !agentOnly && 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: [agent.icon ? (_jsx("span", { className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", "aria-hidden": "true", children: agent.icon })) : null, _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;
+    return (_jsxs("div", { className: "space-y-1 px-2 py-2", role: "status", "aria-label": t("agentChat.composer.loadingModels", {
+            defaultValue: "Loading models",
+        }), children: [_jsx("span", { className: "sr-only", children: t("agentChat.composer.loadingModelsProgress", {
+                    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, modelSelectorOpen, availableModels, modelListLoading, onModelChange, onEffortChange, availableAgents, selectedAgent, agentOnly = false, hostedHarness, onAgentChange, onModelSelectorOpenChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", terminalModeControl, extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
+    const adapters = useComposerRuntimeAdapters();
+    const t = adapters.translate;
+    const sendButtonTooltip = t(getComposerSendTooltipKey(willQueue), {
+        defaultValue: willQueue ? "Queue message" : "Send message",
+    });
+    const [popover, setPopover] = useState(null);
+    const popoverRef = useRef(null);
+    const composerRuntime = useComposerRuntime();
+    const lastComposerRuntimeSyncRef = useRef(null);
+    const submitInFlightRef = useRef(false);
+    const [editorHasText, setEditorHasText] = useState(false);
+    const [slotReferences, setSlotReferences] = useState([]);
+    const [selectedContextItemKey, setSelectedContextItemKey] = useState(null);
+    const composerText = useComposer((state) => state.text);
+    const composerAttachments = useComposer((state) => state.attachments);
+    const canSend = canSubmitComposerContent({
+        hasEditorContent: editorHasText || slotReferences.length > 0,
+        attachmentCount: composerAttachments.length,
+        disabled,
+    });
+    const primaryAction = resolveComposerPrimaryAction({
+        canSubmit: canSend,
+        hasStopButton: Boolean(stopButton),
+    });
+    const hasContextRows = contextItems.length > 0 || slotReferences.length > 0;
+    const [composerMode, setComposerMode] = useState(null);
+    const composerModeRef = useRef(null);
+    const isMac = typeof navigator !== "undefined" &&
+        /Mac|iPhone|iPad/.test(navigator.userAgent);
+    // Refs for values accessed in handleKeyDown (ProseMirror doesn't re-bind)
+    const popoverStateRef = useRef(null);
+    const onAttachmentErrorRef = useRef(onAttachmentError);
+    onAttachmentErrorRef.current = onAttachmentError;
+    const execModeRef = useRef(execMode);
+    execModeRef.current = execMode;
+    const onExecModeChangeRef = useRef(onExecModeChange);
+    onExecModeChangeRef.current = onExecModeChange;
+    const planModeDisabledRef = useRef(planModeDisabled);
+    planModeDisabledRef.current = planModeDisabled;
+    const { items: mentionItems, isLoading: mentionsLoading } = useMentionSearch(popover?.type === "@" ? popover.query : "", popover?.type === "@");
+    const filteredMentionItems = useMemo(() => filterMentionItemsForSlots(mentionItems, slotReferences), [mentionItems, slotReferences]);
+    const { skills, hint, isLoading: skillsLoading, } = useSkills(includeDefaultSlashSkills && popover?.type === "/");
+    const allSlashCommands = useMemo(() => mergeSlashCommands([
+        ...(includeDefaultSlashCommands ? builtInCommands(t) : []),
+        ...slashCommands,
+    ]), [includeDefaultSlashCommands, slashCommands, t]);
+    const allSlashSkills = useMemo(() => mergeSlashSkills([
+        ...(includeDefaultSlashSkills ? skills : []),
+        ...slashSkills,
+    ]), [includeDefaultSlashSkills, skills, slashSkills]);
+    const filteredCommands = useMemo(() => {
+        if (!popover || popover.type !== "/")
+            return allSlashCommands;
+        const q = popover.query.toLowerCase();
+        if (!q)
+            return allSlashCommands;
+        return allSlashCommands.filter((c) => c.name.toLowerCase().includes(q) ||
+            c.description.toLowerCase().includes(q));
+    }, [allSlashCommands, popover]);
+    const filteredSkills = useMemo(() => {
+        if (!popover || popover.type !== "/")
+            return allSlashSkills;
+        const q = popover.query.toLowerCase();
+        if (!q)
+            return allSlashSkills;
+        return allSlashSkills.filter((s) => s.name.toLowerCase().includes(q) ||
+            s.description?.toLowerCase().includes(q));
+    }, [allSlashSkills, popover]);
+    // Keep refs in sync with state
+    const mentionItemsRef = useRef(filteredMentionItems);
+    mentionItemsRef.current = filteredMentionItems;
+    const filteredCommandsRef = useRef(filteredCommands);
+    filteredCommandsRef.current = filteredCommands;
+    const filteredSkillsRef = useRef(filteredSkills);
+    filteredSkillsRef.current = filteredSkills;
+    const onSlashCommandRef = useRef(onSlashCommand);
+    onSlashCommandRef.current = onSlashCommand;
+    const onTextChangeRef = useRef(onTextChange);
+    onTextChangeRef.current = onTextChange;
+    const contextItemsRef = useRef(contextItems);
+    contextItemsRef.current = contextItems;
+    const onRemoveContextItemRef = useRef(onRemoveContextItem);
+    onRemoveContextItemRef.current = onRemoveContextItem;
+    const selectedContextItemKeyRef = useRef(null);
+    selectedContextItemKeyRef.current = selectedContextItemKey;
+    const initialTextKeyRef = useRef(undefined);
+    const seenReferenceInsertIdsRef = useRef(new Set());
+    useEffect(() => {
+        if (selectedContextItemKey &&
+            !contextItems.some((item) => item.key === selectedContextItemKey)) {
+            selectedContextItemKeyRef.current = null;
+            setSelectedContextItemKey(null);
+        }
+    }, [contextItems, selectedContextItemKey]);
+    const closePopover = useCallback(() => {
+        setPopover(null);
+        popoverStateRef.current = null;
+    }, []);
+    // Persist draft to localStorage so hot-reloads don't lose the prompt
+    const draftKey = getComposerDraftKey(draftScope);
+    const draftTimerRef = useRef(undefined);
+    useEffect(() => {
+        return () => {
+            clearTimeout(draftTimerRef.current);
+        };
+    }, []);
+    useEffect(() => {
+        lastComposerRuntimeSyncRef.current = null;
+    }, [composerRuntime]);
+    // Tiptap reads extension config once at init; ref keeps runtime prop
+    // changes visible to Placeholder's function form.
+    const resolvedPlaceholder = composerMode
+        ? localizedComposerModeConfig(composerMode, t).placeholder
+        : (placeholder ??
+            t("agentChat.composer.messageAgent", {
+                defaultValue: "Message agent...",
+            }));
+    const placeholderRef = useRef(resolvedPlaceholder);
+    placeholderRef.current = resolvedPlaceholder;
+    const editor = useEditor({
+        extensions: createTiptapComposerExtensions(() => placeholderRef.current),
+        editable: !disabled,
+        onCreate: ({ editor: ed }) => {
+            // Restore draft on mount
+            try {
+                if (initialText !== undefined) {
+                    ed.commands.setContent(plainTextToDoc(initialText));
+                    ed.commands.focus("end");
+                    setEditorHasText(composerDocumentHasContent(ed.state.doc));
+                    initialTextKeyRef.current = initialTextKey ?? initialText;
+                }
+                else {
+                    const saved = localStorage.getItem(draftKey);
+                    if (saved) {
+                        ed.commands.setContent(saved);
+                        ed.commands.focus("end");
+                        setEditorHasText(composerDocumentHasContent(ed.state.doc));
+                    }
+                }
+                onTextChangeRef.current?.(ed.state.doc.textContent.trim());
+            }
+            catch { }
+        },
+        onUpdate: ({ editor: ed }) => {
+            // Drive the send button's enabled state from the actual editor contents;
+            // the composer runtime is only synced on submit, so its isEmpty lags.
+            setEditorHasText(composerDocumentHasContent(ed.state.doc));
+            onTextChangeRef.current?.(ed.state.doc.textContent.trim());
+            // Debounce-save draft to localStorage
+            clearTimeout(draftTimerRef.current);
+            draftTimerRef.current = setTimeout(() => {
+                try {
+                    const html = ed.getHTML();
+                    const isEmpty = !composerDocumentHasContent(ed.state.doc);
+                    if (isEmpty) {
+                        localStorage.removeItem(draftKey);
+                    }
+                    else {
+                        localStorage.setItem(draftKey, html);
+                    }
+                }
+                catch { }
+            }, 300);
+        },
+        onSelectionUpdate: ({ editor: ed }) => {
+            const { from, to } = ed.state.selection;
+            if (selectedContextItemKeyRef.current && (from !== to || from > 1)) {
+                selectedContextItemKeyRef.current = null;
+                setSelectedContextItemKey(null);
+            }
+        },
+        editorProps: {
+            attributes: {
+                "data-agent-composer-variant": layoutVariant,
+                "data-agent-composer-slot": "editor-input",
+                class: "agent-composer-prosemirror flex-1 resize-none bg-transparent text-sm text-foreground outline-none leading-[1.625rem] min-h-[3.25rem] max-h-[10rem] overflow-y-auto",
+            },
+            handlePaste: (_view, event) => {
+                const paste = readClipboardPaste(event.clipboardData);
+                const pastedText = paste.text;
+                const files = Array.from(event.clipboardData?.files ?? []).filter((file) => file.type.startsWith("image/"));
+                if (files.length > 0) {
+                    event.preventDefault();
+                    const attachments = files.map((file) => {
+                        // SimpleImageAttachmentAdapter uses file.name as the attachment id.
+                        // Clipboard images (e.g. screenshots) are typically all named
+                        // "image.png", so a second paste would replace the first instead of
+                        // appending. Prepend a unique token so each paste gets a distinct id.
+                        const uniqueName = `${Date.now()}-${Math.random().toString(36).slice(2)}-${file.name}`;
+                        return new File([file], uniqueName, { type: file.type });
+                    });
+                    // Google Docs rich clipboard payloads can contain both embedded
+                    // image files and the document text. Since handling files means we
+                    // prevent Tiptap's default paste, preserve any text as its own chip
+                    // instead of silently dropping the source material.
+                    if (pastedText.trim()) {
+                        attachments.push(createPastedAttachmentFile(paste));
+                    }
+                    void Promise.all(attachments.map((file) => composerRuntime.addAttachment(file))).catch((error) => {
+                        const msg = error instanceof Error
+                            ? error.message
+                            : t("agentChat.composer.pastedImageError", {
+                                defaultValue: "Could not attach the pasted image. Try a different format.",
+                            });
+                        onAttachmentErrorRef.current?.(msg);
+                    });
+                    return true;
+                }
+                // Page-sized pastes turn into a `Pasted text` attachment chip so the
+                // prompt stays readable while normal paragraphs and lists stay inline.
+                // When the paste is HTML (e.g. an Alpine.js extension or a document the
+                // user wants hosted), it's stored as a real .html attachment so it
+                // travels the same rail as uploading that file — the agent reads it
+                // verbatim via contentFromAttachment instead of retyping it inline,
+                // which cuts off mid-stream on large files and triggers a spin.
+                if (shouldConvertClipboardToAttachment(paste)) {
+                    event.preventDefault();
+                    void composerRuntime
+                        .addAttachment(createPastedAttachmentFile(paste))
+                        .catch((error) => {
+                        const msg = error instanceof Error
+                            ? error.message
+                            : t("agentChat.composer.pastedTextError", {
+                                defaultValue: "Could not attach the pasted text.",
+                            });
+                        onAttachmentErrorRef.current?.(msg);
+                    });
+                    return true;
+                }
+                return false;
+            },
+            handleDrop: (_view, event) => {
+                // Drag-and-drop files (decks, images, PDFs, etc.) into the composer.
+                // Mark handled drops as consumed so the chat-wide drop target does not
+                // add the same file a second time.
+                return handleComposerFileDrop({
+                    event: event,
+                    addAttachment: (file) => composerRuntime.addAttachment(file),
+                    onError: (error) => {
+                        const msg = error instanceof Error
+                            ? error.message
+                            : t("agentChat.composer.droppedFileError", {
+                                defaultValue: "Could not attach the dropped file. Try a different format.",
+                            });
+                        onAttachmentErrorRef.current?.(msg);
+                    },
+                });
+            },
+            handleKeyDown: (view, event) => {
+                const pop = popoverStateRef.current;
+                // Handle popover keyboard nav
+                if (pop) {
+                    if (event.key === "ArrowUp") {
+                        event.preventDefault();
+                        popoverRef.current?.moveUp();
+                        return true;
+                    }
+                    if (event.key === "ArrowDown") {
+                        event.preventDefault();
+                        popoverRef.current?.moveDown();
+                        return true;
+                    }
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        const idx = popoverRef.current?.getSelectedIndex() ?? 0;
+                        const currentCommands = filteredCommandsRef.current;
+                        const currentSkills = filteredSkillsRef.current;
+                        if (pop.type === "@") {
+                            const item = popoverRef.current?.getSelectedMention();
+                            if (item)
+                                selectMention(view, pop, item);
+                        }
+                        else if (pop.type === "/") {
+                            const cmd = popoverRef.current?.getSelectedCommand();
+                            if (cmd) {
+                                executeCommand(view, pop, cmd);
+                            }
+                            else {
+                                const skillIdx = idx - currentCommands.length;
+                                if (currentSkills[skillIdx]) {
+                                    selectSkill(view, pop, currentSkills[skillIdx]);
+                                }
+                            }
+                        }
+                        return true;
+                    }
+                    if (event.key === "Escape") {
+                        event.preventDefault();
+                        popoverStateRef.current = null;
+                        setPopover(null);
+                        return true;
+                    }
+                    if (event.key === " " && pop.query === "") {
+                        popoverStateRef.current = null;
+                        setPopover(null);
+                        return false;
+                    }
+                }
+                const { from, to } = view.state.selection;
+                const cursorAtStart = from === to && from <= 1;
+                if (event.key === "Backspace" && onRemoveContextItemRef.current) {
+                    const chipAction = resolveContextChipBackspaceAction({
+                        contextItemKeys: contextItemsRef.current.map((item) => item.key),
+                        selectedKey: selectedContextItemKeyRef.current,
+                        cursorAtStart,
+                    });
+                    if (chipAction) {
+                        event.preventDefault();
+                        if (chipAction.type === "select") {
+                            selectedContextItemKeyRef.current = chipAction.key;
+                            setSelectedContextItemKey(chipAction.key);
+                        }
+                        else {
+                            selectedContextItemKeyRef.current = null;
+                            setSelectedContextItemKey(null);
+                            contextItemsRef.current = contextItemsRef.current.filter((item) => item.key !== chipAction.key);
+                            onRemoveContextItemRef.current?.(chipAction.key);
+                        }
+                        return true;
+                    }
+                }
+                if (selectedContextItemKeyRef.current) {
+                    selectedContextItemKeyRef.current = null;
+                    setSelectedContextItemKey(null);
+                }
+                // Backspace removes composer mode chip when editor is empty
+                if (event.key === "Backspace" && composerModeRef.current) {
+                    if (view.state.doc.textContent.trim() === "" &&
+                        from === to &&
+                        from <= 1) {
+                        setComposerMode(null);
+                        composerModeRef.current = null;
+                        return true;
+                    }
+                }
+                // Keyboard shortcut toggles Act/Plan mode from inside the editor.
+                if (event.key === "Tab" && event.shiftKey) {
+                    event.preventDefault();
+                    const current = execModeRef.current;
+                    const cb = onExecModeChangeRef.current;
+                    if (current && cb) {
+                        const next = current === "build" ? "plan" : "build";
+                        if (next !== "plan" || !planModeDisabledRef.current) {
+                            cb(next);
+                        }
+                    }
+                    return true;
+                }
+                // Submit on Enter. Shift+Enter inserts a newline and keeps the
+                // composer scrolled to the caret.
+                // Cmd+Enter on macOS / Ctrl+Enter elsewhere marks the submit queued.
+                if (event.key === "Enter" && event.shiftKey) {
+                    event.preventDefault();
+                    return insertComposerHardBreakAndScrollIntoView(view);
+                }
+                const submitIntent = getComposerSubmitIntentForEnterKey(event, isMac);
+                if (submitIntent) {
+                    event.preventDefault();
+                    void submitComposer(submitIntent);
+                    return true;
+                }
+                // Detect @ trigger — only when preceded by start-of-text, space, or newline
+                // (not after alphanumeric chars, which would indicate an email address)
+                if (event.key === "@") {
+                    const { from } = view.state.selection;
+                    const textBefore = view.state.doc.textBetween(Math.max(0, from - 1), from);
+                    if (from === 1 || textBefore === "" || /\s/.test(textBefore)) {
+                        const position = getComposerPopoverPosition(view, from);
+                        if (!position)
+                            return false;
+                        setTimeout(() => {
+                            const state = {
+                                type: "@",
+                                position,
+                                startPos: view.state.selection.from,
+                                query: "",
+                            };
+                            popoverStateRef.current = state;
+                            setPopover(state);
+                        }, 0);
+                    }
+                    return false;
+                }
+                // Detect / trigger (only at start of line or after whitespace)
+                if (event.key === "/") {
+                    const { from } = view.state.selection;
+                    const textBefore = view.state.doc.textBetween(Math.max(0, from - 1), from);
+                    if (from === 1 || textBefore === "" || /\s/.test(textBefore)) {
+                        const position = getComposerPopoverPosition(view, from);
+                        if (!position)
+                            return false;
+                        setTimeout(() => {
+                            const state = {
+                                type: "/",
+                                position,
+                                startPos: view.state.selection.from,
+                                query: "",
+                            };
+                            popoverStateRef.current = state;
+                            setPopover(state);
+                        }, 0);
+                    }
+                    return false;
+                }
+                return false;
+            },
+        },
+    });
+    // Placeholder decorations are computed by ProseMirror. Dispatching an empty
+    // transaction makes a locale or composer-mode change visible immediately.
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor))
+            return;
+        editor.view.dispatch(editor.state.tr.setSelection(editor.state.selection));
+    }, [editor, resolvedPlaceholder]);
+    // A tab can stay mounted while becoming the active composer later. Publish
+    // its existing draft when the host starts observing it so contextual UI is
+    // correct immediately after a tab switch, not only after the next keystroke.
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor) || !onTextChange)
+            return;
+        onTextChange(editor.state.doc.textContent.trim());
+    }, [editor, onTextChange]);
+    const insertReference = useCallback((ref) => {
+        const normalized = adapters.agentChat.normalizeReference(ref);
+        const ed = editor;
+        if (!normalized || !isComposerEditorUsable(ed))
+            return;
+        if (normalized.slotKey) {
+            setSlotReferences((current) => applySlotReferenceChanges(current, [normalized]));
+            ed.commands.focus("end");
+            return;
+        }
+        if (normalized.relatedReferences?.some((item) => item.slotKey)) {
+            setSlotReferences((current) => applySlotReferenceChanges(current, normalized.relatedReferences ?? []));
+        }
+        ed.chain()
+            .focus()
+            .insertContent({
+            type: "mentionReference",
+            attrs: mentionReferenceAttrs(normalized),
+        })
+            .insertContent(" ")
+            .run();
+        setEditorHasText(true);
+    }, [editor]);
+    const insertReferenceIfEmpty = useCallback((payload) => {
+        const insertMessageId = typeof payload.insertMessageId === "string"
+            ? payload.insertMessageId
+            : "";
+        if (insertMessageId) {
+            if (seenReferenceInsertIdsRef.current.has(insertMessageId))
+                return;
+            seenReferenceInsertIdsRef.current.add(insertMessageId);
+        }
+        const ed = editor;
+        if (!isComposerEditorUsable(ed) || disabled || composerModeRef.current)
+            return;
+        const normalized = adapters.agentChat.normalizeReference(payload);
+        if (normalized?.slotKey) {
+            insertReference(normalized);
+            return;
+        }
+        if (composerAttachments.length > 0)
+            return;
+        if (composerDocumentHasContent(ed.state.doc))
+            return;
+        insertReference(payload);
+    }, [composerAttachments.length, disabled, editor, insertReference]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const handleEvent = (event) => {
+            const payload = event.detail;
+            const normalized = adapters.agentChat.normalizeReference(payload);
+            if (!normalized)
+                return;
+            insertReferenceIfEmpty({
+                ...normalized,
+                insertMessageId: typeof payload?.insertMessageId === "string"
+                    ? payload.insertMessageId
+                    : "",
+            });
+        };
+        const handleMessage = (event) => {
+            if (!adapters.builder.isTrustedFrameMessage(event) &&
+                !adapters.builder.isTrustedBuilderMessage(event)) {
+                return;
+            }
+            if (event.data?.type !== AGENT_CHAT_INSERT_REFERENCE_MESSAGE_TYPE) {
+                return;
+            }
+            const payload = event.data.data;
+            const normalized = adapters.agentChat.normalizeReference(payload);
+            if (!normalized)
+                return;
+            insertReferenceIfEmpty({
+                ...normalized,
+                insertMessageId: typeof payload?.insertMessageId === "string"
+                    ? payload.insertMessageId
+                    : "",
+            });
+        };
+        window.addEventListener(AGENT_CHAT_INSERT_REFERENCE_EVENT, handleEvent);
+        window.addEventListener("message", handleMessage);
+        return () => {
+            window.removeEventListener(AGENT_CHAT_INSERT_REFERENCE_EVENT, handleEvent);
+            window.removeEventListener("message", handleMessage);
+        };
+    }, [adapters, insertReferenceIfEmpty]);
+    useImperativeHandle(focusRef, () => ({
+        focus() {
+            if (isComposerEditorUsable(editor))
+                editor.commands.focus("end");
+        },
+        setText(text) {
+            if (!isComposerEditorUsable(editor))
+                return;
+            editor.commands.setContent(plainTextToDoc(text));
+            editor.commands.focus("end");
+            const trimmed = editor.state.doc.textContent.trim();
+            setEditorHasText(trimmed.length > 0);
+            setSlotReferences([]);
+            composerRuntime.setText(trimmed);
+            onTextChangeRef.current?.(trimmed);
+            try {
+                if (trimmed) {
+                    localStorage.setItem(draftKey, editor.getHTML());
+                }
+                else {
+                    localStorage.removeItem(draftKey);
+                }
+            }
+            catch { }
+        },
+        insertReference,
+    }));
+    const handleSelectMode = useCallback((mode) => {
+        setComposerMode(mode);
+        composerModeRef.current = mode;
+        setTimeout(() => {
+            if (isComposerEditorUsable(editor))
+                editor.commands.focus("end");
+        }, 50);
+    }, [editor]);
+    // --- Live voice transcription: text appears in the editor as the user speaks ---
+    const voiceAnchorRef = useRef(null);
+    const prevVoiceInsertRef = useRef("");
+    const handleLiveUpdate = useCallback((finalText, interimText) => {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        if (voiceAnchorRef.current == null) {
+            const { from } = ed.state.selection;
+            const prevChar = from > 1 ? ed.state.doc.textBetween(from - 1, from) : "";
+            if (prevChar && !/\s/.test(prevChar)) {
+                ed.chain().insertContent(" ").run();
+            }
+            voiceAnchorRef.current = ed.state.selection.from;
+            prevVoiceInsertRef.current = "";
+        }
+        const anchor = voiceAnchorRef.current;
+        const prevLen = prevVoiceInsertRef.current.length;
+        const newText = finalText + interimText;
+        if (newText === prevVoiceInsertRef.current)
+            return;
+        ed.chain()
+            .deleteRange({ from: anchor, to: anchor + prevLen })
+            .insertContentAt(anchor, newText)
+            .run();
+        prevVoiceInsertRef.current = newText;
+    }, [editor]);
+    const insertTranscript = useCallback((text) => {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        const formattedText = formatVoiceTranscriptForComposer(text);
+        const anchor = voiceAnchorRef.current;
+        if (anchor != null) {
+            const prevLen = prevVoiceInsertRef.current.length;
+            if (formattedText) {
+                ed.chain()
+                    .focus()
+                    .deleteRange({ from: anchor, to: anchor + prevLen })
+                    .insertContentAt(anchor, formattedText)
+                    .run();
+            }
+            else if (prevLen > 0) {
+                ed.chain()
+                    .deleteRange({ from: anchor, to: anchor + prevLen })
+                    .run();
+            }
+            voiceAnchorRef.current = null;
+            prevVoiceInsertRef.current = "";
+        }
+        else if (formattedText) {
+            const { from } = ed.state.selection;
+            const prevChar = from > 1 ? ed.state.doc.textBetween(from - 1, from) : "";
+            const needsLead = prevChar && !/\s/.test(prevChar);
+            ed.chain()
+                .focus()
+                .insertContent((needsLead ? " " : "") + formattedText)
+                .run();
+        }
+    }, [editor]);
+    const buildVoiceContextPack = useCallback(() => {
+        const snippets = [];
+        const activeContext = trimVoiceContextValue(adapters.agentChat.formatContextItems(contextItems) ||
+            formatPromptContextItems(contextItems), 3200);
+        if (activeContext) {
+            snippets.push({
+                label: t("agentChat.composer.activeAppContext", {
+                    defaultValue: "Active app context",
+                }),
+                value: activeContext,
+            });
+        }
+        const selectedReferences = trimVoiceContextValue(slotReferences.map((ref) => slotReferenceTitle(ref)).join(", "), 1200);
+        if (selectedReferences) {
+            snippets.push({
+                label: t("agentChat.composer.selectedReferences", {
+                    defaultValue: "Selected references",
+                }),
+                value: selectedReferences,
+            });
+        }
+        const draft = isComposerEditorUsable(editor)
+            ? trimVoiceContextValue(editor.state.doc.textContent, 1200)
+            : null;
+        if (draft) {
+            snippets.push({
+                label: t("agentChat.composer.currentDraft", {
+                    defaultValue: "Current draft",
+                }),
+                value: draft,
+            });
+        }
+        if (typeof document !== "undefined") {
+            const title = trimVoiceContextValue(document.title, 160);
+            if (title) {
+                snippets.push({
+                    label: t("agentChat.composer.pageTitle", {
+                        defaultValue: "Page title",
+                    }),
+                    value: title,
+                });
+            }
+        }
+        if (typeof window !== "undefined") {
+            const route = trimVoiceContextValue(window.location.pathname, 240);
+            if (route) {
+                snippets.push({
+                    label: t("agentChat.composer.route", { defaultValue: "Route" }),
+                    value: route,
+                });
+            }
+        }
+        if (snippets.length === 0)
+            return undefined;
+        return {
+            surface: "agent-composer",
+            mode: "dictation",
+            snippets,
+        };
+    }, [adapters, contextItems, editor, slotReferences, t]);
+    const voice = useVoiceDictation({
+        onTranscript: insertTranscript,
+        onLiveUpdate: handleLiveUpdate,
+        contextPack: buildVoiceContextPack,
+    });
+    // Clean up live text if voice session ends without a final transcript (cancel/error)
+    useEffect(() => {
+        if (voice.state === "idle" && voiceAnchorRef.current != null) {
+            const anchor = voiceAnchorRef.current;
+            const prevLen = prevVoiceInsertRef.current.length;
+            if (isComposerEditorUsable(editor) && prevLen > 0) {
+                const documentSize = editor.state.doc.content.size;
+                const currentText = anchor >= 1 && anchor + prevLen <= documentSize
+                    ? editor.state.doc.textBetween(anchor, anchor + prevLen, "", "\n")
+                    : "";
+                if (canRemoveVoicePreview({
+                    documentSize,
+                    anchor,
+                    previewText: prevVoiceInsertRef.current,
+                    currentText,
+                })) {
+                    editor
+                        .chain()
+                        .deleteRange({ from: anchor, to: anchor + prevLen })
+                        .run();
+                }
+            }
+            voiceAnchorRef.current = null;
+            prevVoiceInsertRef.current = "";
+        }
+    }, [voice.state, editor]);
+    // Global shortcut: Cmd/Ctrl + Shift + M toggles dictation. Escape cancels
+    // while recording. Scoped to avoid firing when focus is outside the app.
+    useEffect(() => {
+        if (!voiceEnabled || !voice.supported)
+            return;
+        const handler = (e) => {
+            // e.key can be undefined on some trusted keydown events (autofill/IME
+            // quirks) — seen crashing in production (AGENT-NATIVE-BROWSER-S).
+            const isToggleCombo = typeof e.key === "string" &&
+                e.key.toLowerCase() === "m" &&
+                e.shiftKey &&
+                (e.metaKey || e.ctrlKey) &&
+                !e.altKey;
+            if (isToggleCombo) {
+                e.preventDefault();
+                if (voice.state === "recording" || voice.state === "starting") {
+                    voice.stop();
+                }
+                else if (voice.state !== "transcribing") {
+                    void voice.start();
+                }
+                return;
+            }
+            if (e.key === "Escape" &&
+                (voice.state === "recording" || voice.state === "starting")) {
+                e.preventDefault();
+                voice.cancel();
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [voiceEnabled, voice]);
+    const extractComposerPayload = useCallback(() => {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed)) {
+            return {
+                text: slotReferences.map((ref) => slotReferenceTitle(ref)).join(", "),
+                references: slotReferences.map(referenceFromComposerReference),
+            };
+        }
+        const references = slotReferences.map(referenceFromComposerReference);
+        // Build text that preserves @mentions (getText() strips them).
+        // Walk the document and reconstruct with @name for mention/file/skill nodes.
+        const textParts = [];
+        ed.state.doc.descendants((node) => {
+            if (node.isText) {
+                textParts.push(node.text);
+            }
+            else if (node.type.name === "mentionReference") {
+                textParts.push(`@[${node.attrs.label}|${node.attrs.icon || "file"}]`);
+            }
+            else if (node.type.name === "fileReference") {
+                const label = node.attrs.path?.split("/").pop() || node.attrs.path;
+                textParts.push(`@[${label}|file]`);
+            }
+            else if (node.type.name === "skillReference") {
+                textParts.push(`/${node.attrs.name}`);
+            }
+            else if (node.type.name === "hardBreak") {
+                textParts.push("\n");
+            }
+            else if (node.type.name === "paragraph" &&
+                textParts.length > 0 &&
+                textParts[textParts.length - 1] !== "\n") {
+                textParts.push("\n");
+            }
+        });
+        const rawText = textParts.join("").trim();
+        const text = rawText ||
+            slotReferences.map((ref) => slotReferenceTitle(ref)).join(", ");
+        ed.state.doc.descendants((node) => {
+            if (node.type.name === "fileReference") {
+                // Legacy support
+                references.push({
+                    type: "file",
+                    path: node.attrs.path,
+                    name: node.attrs.path?.split("/").pop() || node.attrs.path,
+                    source: node.attrs.source || "codebase",
+                });
+            }
+            else if (node.type.name === "mentionReference") {
+                const refType = node.attrs.refType;
+                references.push({
+                    type: refType === "file"
+                        ? "file"
+                        : refType === "agent"
+                            ? "agent"
+                            : refType === "custom-agent"
+                                ? "custom-agent"
+                                : "mention",
+                    path: node.attrs.refPath || "",
+                    name: node.attrs.label,
+                    source: node.attrs.source,
+                    refType: node.attrs.refType,
+                    refId: node.attrs.refId,
+                    slotKey: node.attrs.slotKey,
+                    slotLabel: node.attrs.slotLabel,
+                    metadata: node.attrs.metadata,
+                });
+            }
+            else if (node.type.name === "skillReference") {
+                references.push({
+                    type: "skill",
+                    path: node.attrs.path,
+                    name: node.attrs.name,
+                    source: node.attrs.source || "codebase",
+                });
+            }
+        });
+        return { text, references };
+    }, [editor, slotReferences]);
+    const syncComposerRuntimeState = useCallback((text, references) => {
+        const requestMode = execMode === "plan" ? "plan" : execMode === "build" ? "act" : undefined;
+        const custom = {};
+        if (references.length > 0) {
+            custom.references = references;
+        }
+        if (requestMode) {
+            custom.requestMode = requestMode;
+        }
+        const runConfig = Object.keys(custom).length > 0 ? { custom } : {};
+        const runConfigSignature = JSON.stringify(runConfig);
+        const last = lastComposerRuntimeSyncRef.current;
+        if (last?.text === text &&
+            last.runConfigSignature === runConfigSignature) {
+            return;
+        }
+        composerRuntime.setText(text);
+        composerRuntime.setRunConfig(runConfig);
+        lastComposerRuntimeSyncRef.current = { text, runConfigSignature };
+    }, [composerRuntime, execMode]);
+    const resetComposerRuntimeState = useCallback(() => {
+        const runConfigSignature = "{}";
+        const last = lastComposerRuntimeSyncRef.current;
+        if (last?.text === "" && last.runConfigSignature === runConfigSignature) {
+            return;
+        }
+        composerRuntime.setText("");
+        composerRuntime.setRunConfig({});
+        lastComposerRuntimeSyncRef.current = { text: "", runConfigSignature };
+    }, [composerRuntime]);
+    const syncComposerState = useCallback(() => {
+        const { text, references } = extractComposerPayload();
+        syncComposerRuntimeState(text, references);
+        return { text, references };
+    }, [extractComposerPayload, syncComposerRuntimeState]);
+    const clearEditorAfterSubmit = useCallback(() => {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        ed.commands.clearContent();
+        setEditorHasText(false);
+        setSlotReferences([]);
+        resetComposerRuntimeState();
+        try {
+            localStorage.removeItem(draftKey);
+        }
+        catch { }
+        closePopover();
+    }, [closePopover, draftKey, editor, resetComposerRuntimeState]);
+    const submitComposer = useCallback(async (intent = "immediate") => {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        if (submitInFlightRef.current)
+            return;
+        const { text, references } = syncComposerState();
+        const attachments = composerRuntime.getState().attachments;
+        if (!text.trim() && references.length === 0 && attachments.length === 0)
+            return;
+        const oversizedDocumentError = getOversizedDocumentAttachmentError(attachments, {
+            maxBytes: maxDocumentAttachmentBytes,
+            label: documentAttachmentLimitLabel,
+            translate: t,
+        });
+        if (oversizedDocumentError) {
+            onAttachmentErrorRef.current?.(oversizedDocumentError);
+            return;
+        }
+        const cancelActiveVoice = () => {
+            if (voice.state === "recording" ||
+                voice.state === "starting" ||
+                voice.state === "transcribing") {
+                voice.cancel();
+            }
+        };
+        // Intercept slash commands typed directly (e.g. "/clear" + Enter)
+        const trimmed = text.trim();
+        if (trimmed.startsWith("/") && references.length === 0) {
+            const cmdName = normalizeSlashCommandName(trimmed);
+            const matched = allSlashCommands.find((c) => c.name === cmdName);
+            if (matched) {
+                clearEditorAfterSubmit();
+                onSlashCommandRef.current?.(matched.name);
+                return;
+            }
+        }
+        // Builder iframe delegation: when this app is mounted inside the
+        // Builder.io webview and the user typed a "build me an app/agent"
+        // prompt, hand it up to the parent Builder chat instead of sending
+        // it to this app's domain agent. Builder is the code-writing agent;
+        // the local agent (dispatch, mail, etc.) cannot scaffold workspace
+        // apps from inside its own iframe.
+        if (!composerMode &&
+            interceptBuildRequestsForBuilder &&
+            adapters.builder.tryDelegateBuildRequest(trimmed)) {
+            cancelActiveVoice();
+            clearEditorAfterSubmit();
+            return;
+        }
+        if (onBeforeSubmit) {
+            submitInFlightRef.current = true;
+            try {
+                const shouldSubmit = await onBeforeSubmit();
+                if (!shouldSubmit)
+                    return;
+            }
+            finally {
+                submitInFlightRef.current = false;
+            }
+        }
+        if (!isComposerEditorUsable(ed))
+            return;
+        // Composer mode: send with context via agent chat bridge
+        if (composerMode) {
+            const config = localizedComposerModeConfig(composerMode, t);
+            config.beforeSend?.();
+            const message = displayableComposerModeMessage({
+                messagePrefix: config.messagePrefix,
+                trimmedText: trimmed,
+                attachmentCount: attachments.length,
+                attachedContextFallback: t("agentChat.composer.useAttachedContext", {
+                    defaultValue: "Use the attached context.",
+                }),
+            });
+            const modePrompt = trimmed ||
+                (attachments.length > 0
+                    ? t("agentChat.composer.useAttachedContext", {
+                        defaultValue: "Use the attached context.",
+                    })
+                    : "");
+            if (attachments.length > 0) {
+                composerRuntime.setText(`${message}\n\n<context>\n${config.getContext(modePrompt)}\n</context>`);
+                composerRuntime.send();
+            }
+            else {
+                adapters.agentChat.sendToAgentChat({
+                    message,
+                    context: config.getContext(modePrompt),
+                    mode: execMode === "plan"
+                        ? "plan"
+                        : execMode === "build"
+                            ? "act"
+                            : undefined,
+                    submit: true,
+                });
+            }
+            cancelActiveVoice();
+            if (isComposerEditorUsable(ed))
+                ed.commands.clearContent();
+            setEditorHasText(false);
+            setSlotReferences([]);
+            setComposerMode(null);
+            composerModeRef.current = null;
+            try {
+                localStorage.removeItem(draftKey);
+            }
+            catch { }
+            closePopover();
+            return;
+        }
+        if (onSubmit) {
+            try {
+                await onSubmit(text, references, attachments, { intent });
+            }
+            catch {
+                // Hosts own their submit errors. Keep the draft and attachments
+                // available for recovery when a host rejects the submission.
+                return;
+            }
+            // Clear any pending attachments now that the host has them.
+            void composerRuntime.clearAttachments().catch(() => { });
+            if (!clearOnSubmit) {
+                closePopover();
+                return;
+            }
+            cancelActiveVoice();
+            clearEditorAfterSubmit();
+            return;
+        }
+        else {
+            composerRuntime.send();
+        }
+        cancelActiveVoice();
+        if (isComposerEditorUsable(ed))
+            ed.commands.clearContent();
+        setEditorHasText(false);
+        setSlotReferences([]);
+        try {
+            localStorage.removeItem(draftKey);
+        }
+        catch { }
+        closePopover();
+    }, [
+        closePopover,
+        clearEditorAfterSubmit,
+        composerMode,
+        composerRuntime,
+        draftKey,
+        editor,
+        interceptBuildRequestsForBuilder,
+        clearOnSubmit,
+        onBeforeSubmit,
+        onSubmit,
+        syncComposerState,
+        voice,
+        allSlashCommands,
+        t,
+    ]);
+    // Helper functions that operate on the editor view directly
+    // These are called from handleKeyDown which can't use React state
+    function selectMention(_view, pop, item) {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        const currentPos = ed.state.selection.from;
+        // startPos is after the trigger char, so -1 to include the @ or /
+        const deleteFrom = Math.max(0, pop.startPos - 1);
+        ed.chain().focus().deleteRange({ from: deleteFrom, to: currentPos }).run();
+        insertReference(composerReferenceFromMentionItem(item));
+        popoverStateRef.current = null;
+        setPopover(null);
+    }
+    function executeCommand(_view, pop, command) {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        const currentPos = ed.state.selection.from;
+        const deleteFrom = Math.max(0, pop.startPos - 1);
+        ed.chain().focus().deleteRange({ from: deleteFrom, to: currentPos }).run();
+        popoverStateRef.current = null;
+        setPopover(null);
+        onSlashCommandRef.current?.(command.name);
+    }
+    function selectSkill(_view, pop, skill) {
+        const ed = editor;
+        if (!isComposerEditorUsable(ed))
+            return;
+        const currentPos = ed.state.selection.from;
+        const deleteFrom = Math.max(0, pop.startPos - 1);
+        ed.chain()
+            .focus()
+            .deleteRange({ from: deleteFrom, to: currentPos })
+            .insertContent({
+            type: "skillReference",
+            attrs: { name: skill.name, path: skill.path, source: skill.source },
+        })
+            .insertContent(" ")
+            .run();
+        popoverStateRef.current = null;
+        setPopover(null);
+    }
+    // Popover select handlers for click-based selection (from MentionPopover)
+    const handleSelectMention = useCallback((item) => {
+        if (!isComposerEditorUsable(editor) || !popover)
+            return;
+        const currentPos = editor.state.selection.from;
+        const deleteFrom = Math.max(0, popover.startPos - 1);
+        editor
+            .chain()
+            .focus()
+            .deleteRange({ from: deleteFrom, to: currentPos })
+            .run();
+        insertReference(composerReferenceFromMentionItem(item));
+        closePopover();
+    }, [editor, popover, closePopover, insertReference]);
+    const handleSelectCommand = useCallback((command) => {
+        if (!isComposerEditorUsable(editor) || !popover)
+            return;
+        const currentPos = editor.state.selection.from;
+        const deleteFrom = Math.max(0, popover.startPos - 1);
+        editor
+            .chain()
+            .focus()
+            .deleteRange({ from: deleteFrom, to: currentPos })
+            .run();
+        closePopover();
+        onSlashCommand?.(command.name);
+    }, [editor, popover, closePopover, onSlashCommand]);
+    const handleSelectSkill = useCallback((skill) => {
+        if (!isComposerEditorUsable(editor) || !popover)
+            return;
+        const currentPos = editor.state.selection.from;
+        const deleteFrom = Math.max(0, popover.startPos - 1);
+        editor
+            .chain()
+            .focus()
+            .deleteRange({ from: deleteFrom, to: currentPos })
+            .insertContent({
+            type: "skillReference",
+            attrs: { name: skill.name, path: skill.path, source: skill.source },
+        })
+            .insertContent(" ")
+            .run();
+        closePopover();
+    }, [editor, popover, closePopover]);
+    // Track query text as user types after trigger
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor) || !popover)
+            return;
+        const updateHandler = () => {
+            const pop = popoverStateRef.current;
+            if (!pop)
+                return;
+            const { from } = editor.state.selection;
+            const { startPos, type } = pop;
+            if (from < startPos) {
+                closePopover();
+                return;
+            }
+            const text = editor.state.doc.textBetween(startPos, from);
+            // Verify the trigger character is still there
+            if (startPos > 0) {
+                const triggerChar = editor.state.doc.textBetween(startPos - 1, startPos);
+                if ((type === "@" && triggerChar !== "@") ||
+                    (type === "/" && triggerChar !== "/")) {
+                    closePopover();
+                    return;
+                }
+            }
+            if (pop.query === text)
+                return;
+            const updated = { ...pop, query: text };
+            popoverStateRef.current = updated;
+            setPopover(updated);
+        };
+        editor.on("update", updateHandler);
+        editor.on("selectionUpdate", updateHandler);
+        return () => {
+            if (isComposerEditorUsable(editor)) {
+                editor.off("update", updateHandler);
+                editor.off("selectionUpdate", updateHandler);
+            }
+        };
+    }, [editor, popover, closePopover]);
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor))
+            return;
+        if (composerText !== "")
+            return;
+        if (editor.isEmpty)
+            return;
+        editor.commands.clearContent();
+    }, [composerText, editor]);
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor) || initialText === undefined)
+            return;
+        const key = initialTextKey ?? initialText;
+        if (initialTextKeyRef.current === key)
+            return;
+        initialTextKeyRef.current = key;
+        editor.commands.setContent(plainTextToDoc(initialText));
+        editor.commands.focus("end");
+        const trimmed = editor.state.doc.textContent.trim();
+        setEditorHasText(trimmed.length > 0);
+        composerRuntime.setText(trimmed);
+        onTextChangeRef.current?.(trimmed);
+        try {
+            if (trimmed) {
+                localStorage.setItem(draftKey, editor.getHTML());
+            }
+            else {
+                localStorage.removeItem(draftKey);
+            }
+        }
+        catch { }
+    }, [composerRuntime, draftKey, editor, initialText, initialTextKey]);
+    // Tiptap only reads `editable` at init; prop changes need setEditable.
+    useEffect(() => {
+        if (!isComposerEditorUsable(editor))
+            return;
+        editor.setEditable(!disabled);
+        if (disabled)
+            editor.commands.blur();
+    }, [editor, disabled]);
+    return (_jsxs(RealtimeVoiceModeBoundary, { children: [_jsx("style", { children: `
+        .aui-composer .ProseMirror p.is-editor-empty:first-child::before {
+          content: attr(data-placeholder);
+          color: var(--color-muted-foreground);
+          opacity: 0.5;
+          float: left;
+          height: 0;
+          pointer-events: none;
+        }
+      ` }), composerMode && (_jsx("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "mode-row", className: "agent-composer-mode-row px-2.5 pt-2 pb-0", children: _jsx(ComposerModeChip, { mode: composerMode, onRemove: () => {
+                        setComposerMode(null);
+                        composerModeRef.current = null;
+                        if (isComposerEditorUsable(editor)) {
+                            editor.commands.focus("end");
+                        }
+                    } }) })), hasContextRows && (_jsxs("div", { "data-agent-composer-variant": layoutVariant, "data-agent-composer-slot": "context-row", className: "agent-composer-context-row flex flex-wrap gap-1.5 px-2.5 pt-2 pb-0", children: [slotReferences.map((ref) => (_jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-md border border-border bg-background px-2 py-1 text-[11px] font-medium text-foreground shadow-sm", children: [_jsx(IconClipboardList, { className: "h-3 w-3 shrink-0 text-muted-foreground" }), ref.slotLabel && (_jsx("span", { className: "shrink-0 text-muted-foreground", children: ref.slotLabel })), _jsx("span", { className: "min-w-0 truncate", children: ref.label }), _jsx("button", { type: "button", onClick: () => {
+                                    setSlotReferences((current) => removeSlotReference(current, ref));
+                                    if (isComposerEditorUsable(editor)) {
+                                        editor.commands.focus("end");
+                                    }
+                                }, "aria-label": t("agentChat.composer.removeReference", {
+                                    defaultValue: "Remove {{name}} reference",
+                                    name: slotReferenceTitle(ref),
+                                }), 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" }) })] }, ref.slotKey))), contextItems.map((item) => (_jsxs("span", { "data-state": selectedContextItemKey === item.key ? "selected" : undefined, className: `inline-flex max-w-full items-center gap-1.5 rounded-md border px-2 py-1 text-[11px] font-medium text-foreground ${selectedContextItemKey === item.key
+                            ? "border-ring bg-accent ring-2 ring-ring/40"
+                            : "border-border bg-muted/50"}`, children: [_jsx(IconClipboardList, { className: "h-3 w-3 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 truncate", children: item.title }), _jsx("button", { type: "button", onClick: () => {
+                                    selectedContextItemKeyRef.current = null;
+                                    setSelectedContextItemKey(null);
+                                    onRemoveContextItem?.(item.key);
+                                }, "aria-label": t("agentChat.composer.removeContext", {
+                                    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, terminalModeControl: terminalModeControl, 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, agentOnly: agentOnly, 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