@agent-native/toolkit 0.14.3 → 0.15.1

package/dist/composer/TiptapComposer.js

@@ -168,6 +168,7 @@ function isDocumentAttachment(value) {
 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;
@@ -184,7 +185,14 @@ export function getOversizedDocumentAttachmentError(attachments, options = {}) {
             : file.name;
         const mb = (file.size / 1024 / 1024).toFixed(1);
         const maxMb = (maxBytes / 1024 / 1024).toFixed(0);
-        return `"${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 (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;
 }
@@ -219,7 +227,9 @@ export function getComposerPopoverPosition(view, pos) {
 }
 export function displayableComposerModeMessage(options) {
     const modePrompt = options.trimmedText ||
-        (options.attachmentCount > 0 ? "Use the attached context." : "");
+        (options.attachmentCount > 0
+            ? (options.attachedContextFallback ?? "Use the attached context.")
+            : "");
     return `${options.messagePrefix}${modePrompt}`;
 }
 function uniquifyComposerImageFile(file) {
@@ -255,14 +265,52 @@ export function handleComposerFileDrop(options) {
     });
     return true;
 }
-const BUILT_IN_COMMANDS = [
-    { name: "clear", description: "Start a new chat", icon: "clear" },
-    { name: "new", description: "Start a new chat", icon: "new" },
-    { name: "history", description: "Browse all chats", icon: "history" },
-    { name: "plan", description: "Switch to read-only planning", icon: "plan" },
-    { name: "act", description: "Switch back to acting", icon: "act" },
-    { name: "help", description: "Show available commands", icon: "help" },
-];
+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();
 }
@@ -292,10 +340,7 @@ function mergeSlashSkills(skills) {
 }
 const COMPOSER_MODE_CONFIGS = {
     skill: {
-        label: "Create Skill",
         icon: IconBulb,
-        placeholder: "Describe the skill you want to create...",
-        messagePrefix: "Create a skill: ",
         getContext: (prompt) => `The user wants to create an agent skill. Their description: "${prompt}"
 
 Follow the create-skill pattern to build this. Before writing:
@@ -316,10 +361,7 @@ After creating, update the shared AGENTS.md resource to reference the new skill
 Keep the skill concise (under 500 lines) and actionable.`,
     },
     job: {
-        label: "Schedule Task",
         icon: IconClock,
-        placeholder: "Describe what should happen and when...",
-        messagePrefix: "Create a recurring job: ",
         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:
@@ -331,10 +373,7 @@ Use the manage-jobs tool with action "create" to create this. You need to:
 The job will run automatically on the schedule. Make the instructions specific — include which actions to call and what to do with results.`,
     },
     automation: {
-        label: "Create Automation",
         icon: IconBolt,
-        placeholder: "Describe what you want to automate...",
-        messagePrefix: "Create an automation: ",
         beforeSend: () => {
             window.dispatchEvent(new CustomEvent("agent-panel:set-mode", {
                 detail: { mode: "chat" },
@@ -345,10 +384,7 @@ The job will run automatically on the schedule. Make the instructions specific
 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: {
-        label: "Create Extension",
         icon: IconTool,
-        placeholder: "Describe the interactive extension you want to build...",
-        messagePrefix: "Create an extension: ",
         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.
@@ -360,8 +396,59 @@ Make the extension functional and visually polished. Extensions can use extensio
 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 ComposerModeChip({ mode, onRemove, }) {
+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" }) })] }));
 }
@@ -410,21 +497,34 @@ export function createTiptapComposerExtensions(getPlaceholder) {
         MentionReference,
     ];
 }
-function ModeSelector({ mode, onChange, planModeDisabled = false, planModeDisabledReason = "Open Agent Native Desktop to use Plan mode.", }) {
+function ModeSelector({ mode, onChange, planModeDisabled = false, planModeDisabledReason, }) {
+    const t = useComposerRuntimeAdapters().translate;
     const [open, setOpen] = useState(false);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": mode === "build" ? "Act mode" : "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" ? "Act" : "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: () => {
+    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: "Act" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: "Use tools and make approved changes" })] }), mode === "build" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }), _jsxs("button", { type: "button", disabled: planModeDisabled, title: planModeDisabled ? planModeDisabledReason : undefined, onClick: () => {
+                        }, className: "flex w-full items-center gap-3 px-3 py-2 hover:bg-accent/50 text-start", children: [_jsx(IconPencil, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("span", { className: "font-medium text-foreground text-[13px]", children: t("agentChat.plan.act", { defaultValue: "Act" }) }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: t("agentChat.composer.actDescription", {
+                                            defaultValue: "Use tools and make approved changes",
+                                        }) })] }), mode === "build" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }), _jsxs("button", { type: "button", disabled: planModeDisabled, title: planModeDisabled ? resolvedPlanModeDisabledReason : undefined, onClick: () => {
                             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: "Plan" }), _jsx("p", { className: "text-[11px] text-muted-foreground mt-0.5", children: planModeDisabled
-                                            ? planModeDisabledReason
-                                            : "Read-only research and approval first" })] }), mode === "plan" && !planModeDisabled && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })] })] }));
+                            : "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: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })] })] }));
 }
 const FRIENDLY_MODEL_NAMES = {
     auto: "Default model",
@@ -449,7 +549,12 @@ export function shouldShowModelSelectorSkeleton(isLoading, engineCount) {
 export function shouldShowOnlyConnectPath(showBuilderCta, groups) {
     return showBuilderCta && groups.every((group) => !group.configured);
 }
-function friendlyModelName(model) {
+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]
@@ -496,22 +601,53 @@ function friendlyModelName(model) {
     }
     return model;
 }
-export function compactComposerModelName(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);
+    return friendlyModelName(model, t);
 }
-export function compactComposerReasoningEffortLabel(effort) {
-    if (effort === "medium" || effort === "auto")
-        return "Med";
-    if (effort === "minimal")
-        return "Min";
-    if (effort === "xhigh")
-        return "XHigh";
-    return reasoningEffortLabel(effort);
+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.
@@ -562,16 +698,21 @@ const MODEL_COST_TIERS = [
     ["flash", 1],
     ["pro", 3],
 ];
-const COST_TIER_LABELS = { 1: "Lower", 2: "Medium", 3: "Higher" };
 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;
-    return (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/60", children: "$".repeat(tier) }), _jsxs("span", { className: "sr-only", children: [COST_TIER_LABELS[tier], " cost"] })] }));
+    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 (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/60", children: "$".repeat(tier) }), _jsx("span", { className: "sr-only", children: costLabel })] }));
 }
 export function getComposerReasoningEffortOptions(model) {
     return model === "auto"
@@ -597,7 +738,7 @@ function ModelSelector({ model, effort, engines, showAutoModelOption = true, mod
         getComposerReasoningEffortOptions(model);
     const selectedEffort = reasoning?.resolve?.(model, effort) ??
         resolveReasoningEffortSelection(model, effort ?? defaultEffort);
-    const effortLabel = reasoning?.label ?? reasoningEffortLabel;
+    const effortLabel = useCallback((value) => localizedReasoningEffortLabel(t, value, (reasoning?.label ?? reasoningEffortLabel)(value)), [reasoning?.label, t]);
     // Collapse non-selected families by default. The family containing the
     // currently-selected model stays expanded so the user sees their pick at
     // a glance; clicking another family's header expands it inline.
@@ -669,9 +810,13 @@ function ModelSelector({ model, effort, engines, showAutoModelOption = true, mod
         onConnectLocalRuntime?.(engine);
         setOpen(false);
     }, [onConnectLocalRuntime]);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-agent-composer-slot": "model-button", "aria-label": `Model: ${friendlyModelName(model)}${effortOptions.length > 0
-                        ? `. Effort: ${effortLabel(selectedEffort)}`
-                        : ""}`, className: "agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground", children: [_jsx("span", { className: "min-w-0 truncate", children: compactComposerModelName(model) }), effortOptions.length > 0 && (_jsxs("span", { className: "agent-composer-model-effort min-w-0 shrink truncate text-muted-foreground/70", children: ["\u00B7 ", compactComposerReasoningEffortLabel(selectedEffort)] })), _jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })] }) }), _jsxs(PopoverContent, { side: "top", align: "end", sideOffset: 6, collisionPadding: 8, "data-agent-native-composer-popover": "true", className: "z-[260] box-border w-72 overflow-y-auto rounded-lg border-border p-0 py-1 shadow-lg", style: MODEL_SELECTOR_POPOVER_STYLE, children: [showBuilderCta && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", "data-agent-composer-slot": "model-button", "aria-label": `${t("agentChat.composer.model", {
+                        defaultValue: "Model",
+                    })}: ${friendlyModelName(model, t)}${effortOptions.length > 0
+                        ? `. ${t("agentChat.composer.reasoning", {
+                            defaultValue: "Reasoning",
+                        })}: ${effortLabel(selectedEffort)}`
+                        : ""}`, className: "agent-composer-model-button flex min-w-0 max-w-[10.5rem] shrink items-center gap-1 rounded-md px-2 py-1 text-[12px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground", children: [_jsx("span", { className: "min-w-0 truncate", children: compactComposerModelName(model, t) }), effortOptions.length > 0 && (_jsxs("span", { className: "agent-composer-model-effort min-w-0 shrink truncate text-muted-foreground/70", children: ["\u00B7 ", compactComposerReasoningEffortLabel(selectedEffort, t)] })), _jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 opacity-60" })] }) }), _jsxs(PopoverContent, { side: "top", align: "end", sideOffset: 6, collisionPadding: 8, "data-agent-native-composer-popover": "true", className: "z-[260] box-border w-72 overflow-y-auto rounded-lg border-border p-0 py-1 shadow-lg", style: MODEL_SELECTOR_POPOVER_STYLE, children: [showBuilderCta && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => {
                                     if (onConnectProvider) {
                                         onConnectProvider();
                                     }
@@ -690,14 +835,17 @@ function ModelSelector({ model, effort, engines, showAutoModelOption = true, mod
                                                     defaultValue: "Add your own keys",
                                                 }) }), _jsx("span", { className: "block text-[11px] text-muted-foreground", children: t("agentPanel.configureProviderKeys", {
                                                     defaultValue: "Choose a cloud, gateway, or local provider",
-                                                }) })] })] }), !onlyConnectPathAvailable && (_jsx("div", { className: "my-1 border-t border-border" }))] })), imageModel && imageModel.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": imageExpanded, onClick: () => setImageExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [imageExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: imageModel.label ?? "Image model" }), !imageExpanded && imageModelLabel && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: imageModelLabel }))] }) }), imageExpanded &&
+                                                }) })] })] }), !onlyConnectPathAvailable && (_jsx("div", { className: "my-1 border-t border-border" }))] })), imageModel && imageModel.options.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": imageExpanded, onClick: () => setImageExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [imageExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: imageModel.label ??
+                                                t("agentChat.composer.imageModel", {
+                                                    defaultValue: "Image model",
+                                                }) }), !imageExpanded && imageModelLabel && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: imageModelLabel }))] }) }), imageExpanded &&
                                 imageModel.options.map((option) => (_jsxs("button", { type: "button", onClick: () => {
                                         imageModel.onChange(option.value);
                                         setImageExpanded(false);
                                     }, className: "flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: option.label }), option.value === imageModel.value && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, option.value))), _jsx("div", { className: "my-1 border-t border-border" })] })), showModelListSkeleton && _jsx(ModelSelectorSkeleton, {}), autoModelGroup && !onlyConnectPathAvailable && (_jsxs("button", { type: "button", onClick: () => {
                             onChange("auto", autoModelGroup.engine);
                             setOpen(false);
-                        }, className: "flex w-full items-center gap-3 px-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: "Auto" }), model === "auto" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })), autoModelGroup &&
+                        }, className: "flex w-full items-center gap-3 px-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: t("agentChat.composer.auto", { defaultValue: "Auto" }) }), model === "auto" && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] })), autoModelGroup &&
                         providerGroups.length > 0 &&
                         !onlyConnectPathAvailable && (_jsx("div", { className: "my-1 border-t border-border" })), !onlyConnectPathAvailable &&
                         providerGroups.map((group) => {
@@ -710,10 +858,12 @@ function ModelSelector({ model, effort, engines, showAutoModelOption = true, mod
                             const statusLabel = group.statusLabel ??
                                 (!group.configured
                                     ? canConnectLocalRuntime
-                                        ? "sign in"
-                                        : "needs API key"
+                                        ? t("agentChat.auth.logIn", { defaultValue: "Sign in" })
+                                        : t("agentChat.composer.needsApiKey", {
+                                            defaultValue: "needs API key",
+                                        })
                                     : undefined);
-                            return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center hover:bg-accent/30", children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, onClick: () => toggleGroup(groupKey), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [_jsx(ChevronIcon, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" }), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: group.label }), !isExpanded && groupKey === selectedGroupKey && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: friendlyModelName(model) }))] }), !group.configured && statusLabel && (_jsx("button", { type: "button", className: "ms-auto max-w-[9rem] shrink-0 text-end text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5", onClick: () => canConnectLocalRuntime
+                            return (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center hover:bg-accent/30", children: [_jsxs("button", { type: "button", "aria-expanded": isExpanded, onClick: () => toggleGroup(groupKey), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [_jsx(ChevronIcon, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" }), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: group.label }), !isExpanded && groupKey === selectedGroupKey && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: friendlyModelName(model, t) }))] }), !group.configured && statusLabel && (_jsx("button", { type: "button", className: "ms-auto max-w-[9rem] shrink-0 text-end text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5", onClick: () => canConnectLocalRuntime
                                                     ? connectLocalRuntime(group.engine)
                                                     : openLlmSettings(), children: statusLabel })), group.configured && statusLabel && (_jsx("span", { className: "ms-auto max-w-[9rem] shrink-0 pe-3 text-end text-[10px] text-muted-foreground/70", children: statusLabel }))] }), isExpanded &&
                                         models.map((m) => (_jsxs("button", { type: "button", onClick: () => {
@@ -735,16 +885,23 @@ function ModelSelector({ model, effort, engines, showAutoModelOption = true, mod
                                                 setOpen(false);
                                             }, className: `flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start ${group.configured
                                                 ? "hover:bg-accent/50"
-                                                : "opacity-40 cursor-default"}`, children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: friendlyModelName(m) }), _jsx(ModelCostTier, { model: m }), m === model && group.configured && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, m)))] }, groupKey));
+                                                : "opacity-40 cursor-default"}`, children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: friendlyModelName(m, t) }), _jsx(ModelCostTier, { model: m }), m === model && group.configured && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, m)))] }, groupKey));
                         }), !showModelListSkeleton &&
                         !onlyConnectPathAvailable &&
-                        effortOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-border" }), _jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": effortExpanded, onClick: () => setEffortExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [effortExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: "Effort" }), !effortExpanded && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: effortLabel(selectedEffort) }))] }) }), effortExpanded &&
+                        effortOptions.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-1 border-t border-border" }), _jsx("div", { className: "flex items-center hover:bg-accent/30", children: _jsxs("button", { type: "button", "aria-expanded": effortExpanded, onClick: () => setEffortExpanded((prev) => !prev), className: "flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start", children: [effortExpanded ? (_jsx(IconChevronDown, { className: "h-3 w-3 shrink-0 text-muted-foreground" })) : (_jsx(IconChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" })), _jsx("span", { className: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0", children: t("agentChat.composer.reasoning", {
+                                                defaultValue: "Reasoning",
+                                            }) }), !effortExpanded && (_jsx("span", { className: "text-[11px] text-muted-foreground/80 truncate", children: effortLabel(selectedEffort) }))] }) }), effortExpanded &&
                                 effortOptions.map((option) => (_jsxs("button", { type: "button", onClick: () => onEffortChange?.(option), className: "flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50", children: [_jsx("span", { className: "flex-1 min-w-0 text-[13px] text-foreground truncate", children: effortLabel(option) }), option === selectedEffort && (_jsx(IconCheck, { className: "h-3.5 w-3.5 shrink-0 text-blue-500" }))] }, option)))] }))] })] }));
 }
 function ModelSelectorSkeleton() {
-    return (_jsxs("div", { className: "space-y-1 px-2 py-2", role: "status", "aria-label": "Loading models", children: [_jsx("span", { className: "sr-only", children: "Loading models\u2026" }), ["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)))] }));
+    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 = "Message agent...", disabled = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", focusRef, initialText, initialTextKey, onSubmit, onBeforeSubmit, clearOnSubmit = true, onTextChange, actionButton, willQueue = false, extraActionButton, stopButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, showAutoModelOption = true, availableModels, modelListLoading, onModelChange, onEffortChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
+export function TiptapComposer({ placeholder, disabled = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", focusRef, initialText, initialTextKey, onSubmit, onBeforeSubmit, clearOnSubmit = true, onTextChange, actionButton, willQueue = false, extraActionButton, stopButton, attachButton, modeControl, toolbarSlot, layoutVariant = "default", slashCommands = [], slashSkills = [], includeDefaultSlashCommands = true, includeDefaultSlashSkills = true, onSlashCommand, execMode, onExecModeChange, planModeDisabled = false, planModeDisabledReason, voiceEnabled = DEFAULT_VOICE_DICTATION_ENABLED, selectedModel, selectedEffort, showAutoModelOption = true, availableModels, modelListLoading, onModelChange, onEffortChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems = [], onRemoveContextItem, plusMenuMode = "full", extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
     const adapters = useComposerRuntimeAdapters();
     const t = adapters.translate;
     const sendButtonTooltip = t(getComposerSendTooltipKey(willQueue), {
@@ -788,9 +945,9 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
     const filteredMentionItems = useMemo(() => filterMentionItemsForSlots(mentionItems, slotReferences), [mentionItems, slotReferences]);
     const { skills, hint, isLoading: skillsLoading, } = useSkills(includeDefaultSlashSkills && popover?.type === "/");
     const allSlashCommands = useMemo(() => mergeSlashCommands([
-        ...(includeDefaultSlashCommands ? BUILT_IN_COMMANDS : []),
+        ...(includeDefaultSlashCommands ? builtInCommands(t) : []),
         ...slashCommands,
-    ]), [includeDefaultSlashCommands, slashCommands]);
+    ]), [includeDefaultSlashCommands, slashCommands, t]);
     const allSlashSkills = useMemo(() => mergeSlashSkills([
         ...(includeDefaultSlashSkills ? skills : []),
         ...slashSkills,
@@ -856,12 +1013,14 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
     }, [composerRuntime]);
     // Tiptap reads extension config once at init; ref keeps runtime prop
     // changes visible to Placeholder's function form.
-    const placeholderRef = useRef(placeholder);
-    useEffect(() => {
-        placeholderRef.current = composerMode
-            ? COMPOSER_MODE_CONFIGS[composerMode].placeholder
-            : placeholder;
-    }, [placeholder, composerMode]);
+    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,
@@ -944,7 +1103,9 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                     void Promise.all(attachments.map((file) => composerRuntime.addAttachment(file))).catch((error) => {
                         const msg = error instanceof Error
                             ? error.message
-                            : "Could not attach the pasted image. Try a different format.";
+                            : t("agentChat.composer.pastedImageError", {
+                                defaultValue: "Could not attach the pasted image. Try a different format.",
+                            });
                         onAttachmentErrorRef.current?.(msg);
                     });
                     return true;
@@ -963,7 +1124,9 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                         .catch((error) => {
                         const msg = error instanceof Error
                             ? error.message
-                            : "Could not attach the pasted text.";
+                            : t("agentChat.composer.pastedTextError", {
+                                defaultValue: "Could not attach the pasted text.",
+                            });
                         onAttachmentErrorRef.current?.(msg);
                     });
                     return true;
@@ -980,7 +1143,9 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                     onError: (error) => {
                         const msg = error instanceof Error
                             ? error.message
-                            : "Could not attach the dropped file. Try a different format.";
+                            : t("agentChat.composer.droppedFileError", {
+                                defaultValue: "Could not attach the dropped file. Try a different format.",
+                            });
                         onAttachmentErrorRef.current?.(msg);
                     },
                 });
@@ -1145,6 +1310,13 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
             },
         },
     });
+    // 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.
@@ -1340,29 +1512,52 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
         const activeContext = trimVoiceContextValue(adapters.agentChat.formatContextItems(contextItems) ||
             formatPromptContextItems(contextItems), 3200);
         if (activeContext) {
-            snippets.push({ label: "Active app context", value: 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: "Selected references",
+                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: "Current draft", value: draft });
+        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: "Page title", value: title });
+            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: "Route", value: route });
+            if (route) {
+                snippets.push({
+                    label: t("agentChat.composer.route", { defaultValue: "Route" }),
+                    value: route,
+                });
+            }
         }
         if (snippets.length === 0)
             return undefined;
@@ -1371,7 +1566,7 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
             mode: "dictation",
             snippets,
         };
-    }, [adapters, contextItems, editor, slotReferences]);
+    }, [adapters, contextItems, editor, slotReferences, t]);
     const voice = useVoiceDictation({
         onTranscript: insertTranscript,
         onLiveUpdate: handleLiveUpdate,
@@ -1576,6 +1771,7 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
         const oversizedDocumentError = getOversizedDocumentAttachmentError(attachments, {
             maxBytes: maxDocumentAttachmentBytes,
             label: documentAttachmentLimitLabel,
+            translate: t,
         });
         if (oversizedDocumentError) {
             onAttachmentErrorRef.current?.(oversizedDocumentError);
@@ -1627,15 +1823,22 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
             return;
         // Composer mode: send with context via agent chat bridge
         if (composerMode) {
-            const config = COMPOSER_MODE_CONFIGS[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 ? "Use the attached context." : "");
+                (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();
@@ -1712,6 +1915,7 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
         syncComposerState,
         voice,
         allSlashCommands,
+        t,
     ]);
     // Helper functions that operate on the editor view directly
     // These are called from handleKeyDown which can't use React state
@@ -1899,13 +2103,19 @@ export function TiptapComposer({ placeholder = "Message agent...", disabled = fa
                                     if (isComposerEditorUsable(editor)) {
                                         editor.commands.focus("end");
                                     }
-                                }, "aria-label": `Remove ${slotReferenceTitle(ref)} reference`, 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
+                                }, "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": `Remove ${item.title} context`, 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 ??
+                                }, "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, extensionTools: extensionTools, onAttachmentError: onAttachmentError }))), toolbarSlot ?? modeControl, _jsx("div", { "data-agent-composer-slot": "toolbar-spacer", className: "flex-1" }), selectedModel && availableModels && onModelChange && (_jsx(ModelSelector, { model: selectedModel, effort: selectedEffort, engines: availableModels, showAutoModelOption: showAutoModelOption, modelListLoading: modelListLoading, onChange: onModelChange, onEffortChange: onEffortChange, 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