@agent-native/toolkit 0.22.2-nightly-20260927082735 → 0.22.2

package/dist/composer/TiptapComposer.js

@@ -529,6 +529,7 @@ function plainTextToDoc(text) {
         })),
     };
 }
+/** Tiptap keeps the Editor object truthy after destroy but clears commandManager. */
 export function isComposerEditorUsable(editor) {
     return Boolean(editor && editor.isDestroyed !== true);
 }
@@ -664,9 +665,23 @@ 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);
 }
+/**
+ * When nothing is routable yet, the model hook resolves `selectedModel` to
+ * `""` rather than pre-selecting something unusable — that reflects "nothing
+ * chosen," not "nothing to show." The picker itself still has a job to do in
+ * that state (its connect-provider CTAs). During the initial discovery window
+ * the list is empty too, but the button still needs to exist so the picker can
+ * reveal its loading or setup state instead of making the composer look
+ * incomplete.
+ */
 export function shouldRenderModelSelector(availableModels, onModelChange) {
     return Boolean(availableModels && onModelChange);
 }
@@ -679,11 +694,13 @@ function friendlyModelName(model, t) {
     if (FRIENDLY_MODEL_NAMES[model])
         return FRIENDLY_MODEL_NAMES[model];
     const normalizedModel = model.replace(/^(?:anthropic|openai|google)\//, "");
+    // Claude: claude-{tier}-{major}[-minor][-dateYYYYMMDD].
     const claude = normalizedModel.match(/^claude-(opus|sonnet|haiku|fable)-(\d+)(?:[-.](\d+))?(?:-\d{8,})?$/);
     if (claude) {
         const tier = claude[1][0].toUpperCase() + claude[1].slice(1);
         return `Claude ${tier} ${claude[2]}${claude[3] ? `.${claude[3]}` : ""}`;
     }
+    // GPT: gpt-{major}[-minor][-variant] → GPT-Major[.Minor] Variant.
     const gpt = normalizedModel.match(/^gpt-(\d+)(?:[.-](\d+))?(?:[.-](.+))?$/);
     if (gpt) {
         const version = `${gpt[1]}${gpt[2] ? `.${gpt[2]}` : ""}`;
@@ -695,6 +712,7 @@ function friendlyModelName(model, t) {
     }
     if (/^o\d/.test(normalizedModel))
         return normalizedModel;
+    // Gemini: gemini-{version.parts}-{variant}[-preview] → Gemini Version Variant.
     const geminiVersioned = normalizedModel.match(/^gemini-(\d+(?:[-.]\d+)+)-(.+?)(?:-preview)?$/);
     if (geminiVersioned) {
         const variant = geminiVersioned[2]
@@ -704,6 +722,7 @@ function friendlyModelName(model, t) {
         const version = geminiVersioned[1].replace(/-/g, ".");
         return `Gemini ${version} ${variant}`.replace("Flash Lite", "Flash-Lite");
     }
+    // Gemini: gemini-{version.parts}[-preview] → Gemini Version Parts
     const gemini = normalizedModel.match(/^gemini-(.+?)(?:-preview)?$/);
     if (gemini) {
         const parts = gemini[1]
@@ -805,6 +824,7 @@ function compareModelVersions(left, right) {
     }
     return 0;
 }
+/** Keep the newest version of each Claude, Gemini, and GPT tier. */
 function latestModelsOnly(models) {
     const latest = new Map();
     for (const id of models) {
@@ -820,6 +840,15 @@ function latestModelsOnly(models) {
     const latestIds = new Set([...latest.values()].map(({ id }) => id));
     return models.filter((id) => !versionedModelFamily(id) || latestIds.has(id));
 }
+/**
+ * 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],
@@ -937,6 +966,8 @@ function ModelSelector({ model, effort, engines, agents, selectedAgent, selected
     }, [agentOnly, controlledOpen, onModelSelectorOpenChange]);
     const visibleProviderGroups = modelProviderGroups;
     const showModelListSkeleton = shouldShowModelSelectorSkeleton(modelListLoading, engines.length);
+    // Keep setup actions visible, but do not show unusable model rows until one
+    // provider or local agent is ready.
     const builderFlow = adapters.builder.useConnectFlow({
         enabled: providerConnectStatusEnabled,
         provisionAccount: true,
@@ -1175,7 +1206,7 @@ function ModelSelectorSkeleton() {
                     defaultValue: "Loading models…",
                 }) }), ["w-24", "w-32", "w-20", "w-28"].map((width, index) => (_jsxs("div", { className: "flex items-center gap-1.5 px-1 py-1.5", children: [_jsx(Skeleton, { className: "size-3 rounded-sm" }), _jsx(Skeleton, { className: `h-3 ${width}` })] }, index)))] }));
 }
-export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submissionDisabled = false, submitting = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", attachmentsEnabled = true, onAttachmentRequest, 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, selectedEngine, selectedEffort, showAutoModelOption = true, modelSelectorOpen, availableModels, modelListLoading, onModelChange, onEffortChange, availableAgents, selectedAgent, agentOnly = false, hostedHarness, onAgentChange, onModelSelectorOpenChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems: providedContextItems, onRemoveContextItem, onInspectContextItem, onRetryContextItem, contextMenuItems, plusMenuMode = "full", terminalModeControl, extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
+export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submissionDisabled = false, submitting = false, maxDocumentAttachmentBytes = MAX_DOCUMENT_ATTACHMENT_BYTES, documentAttachmentLimitLabel = "PDFs", attachmentsEnabled = true, onAttachmentRequest, contextButtonTooltipDisabled = false, 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, selectedEngine, selectedEffort, showAutoModelOption = true, modelSelectorOpen, availableModels, modelListLoading, onModelChange, onEffortChange, availableAgents, selectedAgent, agentOnly = false, hostedHarness, onAgentChange, onModelSelectorOpenChange, providerConnectStatusEnabled, onConnectProvider, onConnectLocalRuntime, imageModelMenu, draftScope, contextItems: providedContextItems, onRemoveContextItem, onInspectContextItem, onRetryContextItem, contextMenuItems, plusMenuMode = "full", terminalModeControl, extensionTools = false, interceptBuildRequestsForBuilder = false, onAttachmentError, }) {
     const contextItems = providedContextItems ?? [];
     const adapters = useComposerRuntimeAdapters();
     const t = adapters.translate;
@@ -1211,6 +1242,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
     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;
@@ -1224,6 +1256,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
     const filteredMentionItems = useMemo(() => filterMentionItemsForSlots(mentionItems, slotReferences), [mentionItems, slotReferences]);
     const { skills, hint, isLoading: skillsLoading, } = useSkills(includeDefaultSlashSkills && popover?.type === "/");
     const allSlashCommands = useMemo(() => {
+        // A command without a host callback would be deleted as an invisible no-op.
         if (!onSlashCommand)
             return [];
         return mergeSlashCommands([
@@ -1253,6 +1286,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         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);
@@ -1296,6 +1330,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         setPopover(null);
         popoverStateRef.current = null;
     }, []);
+    // Persist draft to localStorage so refreshes don't lose the prompt.
     const hasDraftScope = Boolean(draftScope?.trim());
     const draftKey = hasDraftScope || initialText === undefined
         ? getComposerDraftKey(draftScope)
@@ -1349,6 +1384,8 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
     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 ??
@@ -1361,6 +1398,8 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         extensions: createTiptapComposerExtensions(() => placeholderRef.current),
         editable: !disabled,
         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());
             scheduleComposerDraftPersist(ed);
@@ -1406,9 +1445,17 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 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));
                     }
@@ -1420,6 +1467,13 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     });
                     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 addAttachmentForCurrentScope(createPastedAttachmentFile(paste)).catch((error) => {
@@ -1440,6 +1494,9 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     }
                     return false;
                 }
+                // 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: addAttachmentForCurrentScope,
@@ -1454,6 +1511,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             },
             handleKeyDown: (view, event) => {
                 const pop = popoverStateRef.current;
+                // Handle popover keyboard nav
                 if (pop) {
                     if (event.key === "ArrowUp") {
                         event.preventDefault();
@@ -1529,6 +1587,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     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 &&
@@ -1538,6 +1597,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                         return true;
                     }
                 }
+                // Keyboard shortcut toggles Act/Plan mode from inside the editor.
                 if (event.key === "Tab" && event.shiftKey) {
                     event.preventDefault();
                     const current = execModeRef.current;
@@ -1550,6 +1610,9 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     }
                     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);
@@ -1560,6 +1623,8 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     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);
@@ -1580,6 +1645,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                     }
                     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);
@@ -1623,11 +1689,16 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 draftEditorRef.current = null;
         };
     }, [cancelScheduledDraftPersist, draftKey, editor]);
+    // 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;
@@ -1725,6 +1796,9 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             if (isComposerEditorUsable(editor))
                 editor.commands.focus("end");
         },
+        addAttachment(file) {
+            return addAttachmentForCurrentScope(file);
+        },
         insertText(text) {
             if (!isComposerEditorUsable(editor))
                 return;
@@ -1757,6 +1831,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 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) => {
@@ -1883,6 +1958,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
     });
     const voiceCancelRef = useRef(voice.cancel);
     voiceCancelRef.current = voice.cancel;
+    // 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;
@@ -1908,10 +1984,14 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             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 &&
@@ -1945,6 +2025,8 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             };
         }
         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) {
@@ -1974,6 +2056,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             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,
@@ -2139,6 +2222,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 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);
@@ -2149,6 +2233,12 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 return true;
             }
         }
+        // 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)) {
@@ -2171,6 +2261,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             return false;
         if (!isCurrentDraftScope())
             return false;
+        // Composer mode: send with context via agent chat bridge
         if (composerMode) {
             const config = localizedComposerModeConfig(composerMode, t);
             config.beforeSend?.();
@@ -2249,6 +2340,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             }
             if (!isCurrentDraftScope())
                 return true;
+            // Clear any pending attachments now that the host has them.
             void composerRuntime.clearAttachments().catch(() => { });
             if (!clearOnSubmit) {
                 closePopover();
@@ -2291,11 +2383,14 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         announceSlashCommand,
         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));
@@ -2331,6 +2426,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         popoverStateRef.current = null;
         setPopover(null);
     }
+    // Popover select handlers for click-based selection (from MentionPopover)
     const handleSelectMention = useCallback((item) => {
         if (!isComposerEditorUsable(editor) || !popover)
             return;
@@ -2374,6 +2470,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
             .run();
         closePopover();
     }, [editor, popover, closePopover]);
+    // Track query text as user types after trigger
     useEffect(() => {
         if (!isComposerEditorUsable(editor) || !popover)
             return;
@@ -2388,6 +2485,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                 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 !== "@") ||
@@ -2495,6 +2593,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
         initialTextKey,
         scheduleComposerDraftPersist,
     ]);
+    // Tiptap only reads `editable` at init; prop changes need setEditable.
     useEffect(() => {
         if (!isComposerEditorUsable(editor))
             return;
@@ -2542,7 +2641,7 @@ export function TiptapComposer({ placeholder, ariaLabel, disabled = false, submi
                                 }, "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" }) })) : null] }, item.key)))] })), contextSubmissionError ? (_jsx("p", { role: "alert", className: "px-2 text-xs text-destructive", children: contextSubmissionError })) : null, _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: [!disabled && attachmentsEnabled && attachButton ? (attachButton) : contextMenuItems !== undefined || plusMenuMode === "upload-only" ? (_jsx(ComposerContextMenu, { items: contextMenuItems ?? [], addAttachment: attachmentsEnabled ? addAttachmentForCurrentScope : undefined, onAttachmentRequest: onAttachmentRequest, attachmentAccept: composerRuntime.getState().attachmentAccept, onAttachmentError: onAttachmentError, onDisabledFocus: () => {
+                                }), 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" }) })) : null] }, item.key)))] })), contextSubmissionError ? (_jsx("p", { role: "alert", className: "px-2 text-xs text-destructive", children: contextSubmissionError })) : null, _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: [!disabled && attachmentsEnabled && attachButton ? (attachButton) : contextMenuItems !== undefined || plusMenuMode === "upload-only" ? (_jsx(ComposerContextMenu, { items: contextMenuItems ?? [], addAttachment: attachmentsEnabled ? addAttachmentForCurrentScope : undefined, onAttachmentRequest: onAttachmentRequest, contextButtonTooltipDisabled: contextButtonTooltipDisabled, attachmentAccept: composerRuntime.getState().attachmentAccept, onAttachmentError: onAttachmentError, onDisabledFocus: () => {
                             const root = editor?.view.dom.closest('[data-agent-composer-slot="root"]');
                             const localTarget = Array.from(root?.querySelectorAll('[data-agent-composer-slot="stop-button"]:not(:disabled), button:not(:disabled)') ?? []).find((element) => !element.closest("[hidden]"));
                             if (localTarget) {