@corenel/web-ui 0.9.0 → 0.11.0

package/dist/Composer.js

@@ -1,8 +1,9 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useEffect, useLayoutEffect, useMemo } from 'react';
 import { IcPlay, IcStop, IcX, IcFile, IcCode, IcPlus, IcChevron } from '@corenel/ui-kit/icons';
 import { estimateTokens } from '@corenel/ui-kit/ui-helpers';
 import { fmtCost, fmtTok } from '@corenel/ui-kit/usage';
+import { useChatSkin, plainName } from './chatSkinContext';
 // Mode gradients are reserved for the chat composer (per the brand system). These
 // back the built-in ids; a custom mode falls back to the auto gradient (or its own
 // frontmatter `accent`).
@@ -48,6 +49,25 @@ const COARSE_POINTER = typeof matchMedia !== 'undefined' && matchMedia('(pointer
 function isCoarsePointer() {
     return typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches;
 }
+/* A PHONE-WIDTH SCREEN, live. The compact row cannot fit the left controls, a
+ * usable text box and Auto/Send in ~350px, so below this width the text box
+ * always takes the first row (see `stacked`). Live rather than a module const
+ * because a tablet rotates across it, and the layout must follow. */
+const PHONE_QUERY = '(max-width: 640px)';
+function usePhoneWidth() {
+    const read = () => typeof matchMedia === 'function' && matchMedia(PHONE_QUERY).matches;
+    const [phone, setPhone] = useState(read);
+    useEffect(() => {
+        if (typeof matchMedia !== 'function')
+            return;
+        const mq = matchMedia(PHONE_QUERY);
+        const on = () => setPhone(mq.matches);
+        mq.addEventListener?.('change', on);
+        on();
+        return () => mq.removeEventListener?.('change', on);
+    }, []);
+    return phone;
+}
 /** Group commands by section, preserving first-seen order; '' sections render unlabeled. */
 function groupBySection(cmds) {
     const order = [];
@@ -62,7 +82,10 @@ function groupBySection(cmds) {
     }
     return order.map((s) => [s, map.get(s)]);
 }
-export function Composer({ value, onChange, onSend, onStop, running, placeholder, runHint = true, mode, onModeChange, modes = DEFAULT_MODES, chips = [], onRemoveChip, onAddContext, slashCommands = [], onPickSlash, attachments = [], onAttach, onRemoveAttachment, onImageClick, inPrice, showContext, onDropFiles, rightSlot, history, sendLater, pending, onQueue, onInject, onRemovePending, onEditPending, sendLabel = 'Send', ariaLabel, mentionables = [], leadSlot, dictating = false, }) {
+export function Composer({ value, onChange, onSend, onStop, running, placeholder, runHint = true, mode, onModeChange, modes = DEFAULT_MODES, chips = [], onRemoveChip, onAddContext, slashCommands = [], onPickSlash, attachments = [], onAttach, onRemoveAttachment, onImageClick, inPrice, showContext, onDropFiles, rightSlot, history, sendLater, pending, onQueue, onInject, onRemovePending, onEditPending, sendLabel = 'Send', ariaLabel, mentionables = [], leadSlot, dictating = false, status, statusHidden = false, docked = true, toggleChips = [], }) {
+    // A skin that reaches the whole chat may name the controls its own way;
+    // each one keeps its plain name for screen readers and tooltips.
+    const { words } = useChatSkin();
     // Named because it is used to decide which LINE the caret sits on, which is
     // the whole of the Up/Down rule below.
     const NEWLINE = '\n';
@@ -88,6 +111,30 @@ export function Composer({ value, onChange, onSend, onStop, running, placeholder
     // cap, after which it scrolls. Runs before paint (no flicker) on every value
     // change, so clearing after send snaps back to the resting height.
     const textareaRef = useRef(null);
+    /* COMPACT UNTIL THE DRAFT OUTGROWS ONE LINE (wide screens; a phone is always
+     * stacked, below). At rest the textarea shares the bottom row with the controls. A newline, or text that wraps, gives it its
+     * own line above them; it stays there until the draft is emptied, so the
+     * layout never flips back and forth while you type. The SAME element moves
+     * (CSS order + flex-basis), never a remount, so focus and caret stay put. */
+    const [grown, setGrown] = useState(false);
+    /* On a phone the text box is ALWAYS above the controls, from rest: there is
+     * no width at which the compact row fits there. */
+    const phone = usePhoneWidth();
+    const stacked = grown || phone;
+    useLayoutEffect(() => {
+        if (!value) {
+            setGrown(false);
+            return;
+        }
+        if (grown)
+            return;
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        const line = parseFloat(getComputedStyle(el).lineHeight) || 21;
+        if (value.includes(NEWLINE) || el.scrollHeight > line * 1.5 + 8)
+            setGrown(true);
+    }, [value, grown]);
     useLayoutEffect(() => {
         const el = textareaRef.current;
         if (!el)
@@ -96,9 +143,17 @@ export function Composer({ value, onChange, onSend, onStop, running, placeholder
         // bare TEXTAREA_MAX_H here would let the element autosize past the CSS
         // cap on a short viewport and reintroduce the composer-eats-the-screen bug.
         const cap = typeof window !== 'undefined' ? Math.min(TEXTAREA_MAX_H, window.innerHeight * 0.3) : TEXTAREA_MAX_H;
+        if (!value) {
+            // Resting row: one line, never scrollHeight. A placeholder that wraps in
+            // the narrow compact width must not make the resting row taller.
+            const lh = getComputedStyle(el).lineHeight;
+            const line = lh.endsWith('px') ? parseFloat(lh) : 21;
+            el.style.height = `${line + 8}px`;
+            return;
+        }
         el.style.height = 'auto';
         el.style.height = `${Math.min(el.scrollHeight, cap)}px`;
-    }, [value]);
+    }, [value, stacked]);
     /* No handler, no menu: a host that supplies commands it cannot act on would
      * otherwise get an Enter key that opens a menu and then swallows the
      * keystroke instead of sending. */
@@ -207,241 +262,244 @@ export function Composer({ value, onChange, onSend, onStop, running, placeholder
         document.addEventListener('mousedown', onDoc);
         return () => document.removeEventListener('mousedown', onDoc);
     }, [modeOpen]);
-    return (_jsxs("div", { style: S.wrap, "data-testid": "composer-wrap", onDragOver: onDropFiles ? (e) => { e.preventDefault(); } : undefined, onDrop: onDropFiles ? (e) => {
+    const pendingEl = pending && pending.length > 0 ? (() => {
+        /* WHICH ONE SURVIVES THE FOLD. Not blindly the first: an `injecting`
+         * message carries "Interrupt now", the one control here that is worth
+         * anything only in the seconds before the step lands. Folding that out
+         * of sight would be the same defect as collapsing the row to a bare
+         * count -- the space would be won by hiding the thing you needed. So an
+         * injecting chip is the one that stays; otherwise the oldest, which is
+         * the next to be sent. */
+        const spotlight = Math.max(0, pending.findIndex((p) => p.state === 'injecting'));
+        const shown = queueOpen ? pending : [pending[spotlight]];
+        const hidden = pending.length - shown.length;
+        return (_jsxs("div", { style: S.pendingRow, children: [shown.map((p) => {
+                    const editing = editingPendingId === p.id;
+                    const commitEdit = () => {
+                        setEditingPendingId(null);
+                        // Escape already threw this text away -- a same-unmount blur
+                        // reaching us here must not resurrect it.
+                        if (abandoningEditRef.current) {
+                            abandoningEditRef.current = false;
+                            return;
+                        }
+                        // The host removed this item while it was being edited -- there
+                        // is nothing left to send the edit to.
+                        if (!pendingIdsRef.current.has(p.id))
+                            return;
+                        if (onEditPending)
+                            onEditPending(p.id, editingPendingText);
+                    };
+                    return (_jsxs("span", { style: S.pendingChip(p.state), children: [editing ? (_jsx("input", { autoFocus: true, style: S.pendingEdit, value: editingPendingText, onChange: (e) => setEditingPendingText(e.target.value), onBlur: commitEdit, onKeyDown: (e) => {
+                                    if (e.key === 'Enter') {
+                                        e.preventDefault();
+                                        commitEdit();
+                                        return;
+                                    }
+                                    if (e.key === 'Escape') {
+                                        e.preventDefault();
+                                        abandoningEditRef.current = true;
+                                        setEditingPendingId(null);
+                                    }
+                                } })) : (_jsx("span", { style: onEditPending ? { ...S.pendingText, cursor: 'text' } : S.pendingText, onClick: onEditPending ? () => {
+                                    abandoningEditRef.current = false;
+                                    setEditingPendingId(p.id);
+                                    setEditingPendingText(p.text);
+                                } : undefined, children: p.text })), p.note && _jsx("span", { style: S.pendingNote, children: p.note }), p.state === 'injecting' && _jsx("span", { style: S.pendingNote, children: "lands after this step" }), p.state === 'injecting' && onInject && (
+                            // The chip half of the Alt+Enter ladder: cut the model stream
+                            // now instead of waiting for the turn to finish.
+                            _jsx("button", { style: S.pendingAction, onClick: () => onInject(p.id), children: "Interrupt now" })), p.state === 'held' && onInject && (_jsx("button", { style: S.pendingAction, onClick: () => onInject(p.id), children: "Send now" })), onRemovePending && (_jsx("button", { style: S.pendingX, "aria-label": "Remove queued message", onClick: () => onRemovePending(p.id), children: "x" }))] }, p.id));
+                }), (hidden > 0 || queueOpen) && (_jsx("button", { style: S.queueMore, onClick: () => setQueueOpen((o) => !o), "aria-expanded": queueOpen, title: queueOpen ? 'Show only the next queued message' : 'Show every queued message', children: queueOpen ? 'Show less' : `+${hidden} queued` }))] }));
+    })() : null;
+    return (_jsxs("div", { style: docked ? S.wrap : S.wrapFloating, "data-testid": "composer-wrap", "data-chat-part": "composer", onDragOver: onDropFiles ? (e) => { e.preventDefault(); } : undefined, onDrop: onDropFiles ? (e) => {
             const files = Array.from(e.dataTransfer?.files ?? []);
             if (files.length) {
                 e.preventDefault();
                 onDropFiles(files);
             }
-        } : undefined, children: [mentionHits.length > 0 && (_jsxs("div", { style: S.slash, children: [mentionHits.map((p, i) => (_jsxs("button", { style: S.slashItem(i === mentionActive), onMouseEnter: () => setMentionActive(i), onClick: () => pickMention(p.name), children: [_jsxs("span", { style: S.slashName, children: ["@", p.name] }), _jsx("span", { style: S.slashHint, children: p.hint ?? '' })] }, p.name))), _jsxs("div", { style: S.slashFoot, children: [_jsx("span", { children: "\u2191\u2193 navigate" }), _jsx("span", { children: "\u21B5 select" }), _jsx("span", { children: "esc dismiss" })] })] })), showSlash && filtered.length > 0 && (_jsxs("div", { style: S.slash, children: [groupBySection(filtered).map(([section, items]) => (_jsxs("div", { children: [section && _jsx("div", { style: S.slashSection, children: section }), items.map((c) => {
+        } : undefined, children: [mentionHits.length > 0 && (_jsxs("div", { style: S.slash, "data-chat-part": "popover", children: [mentionHits.map((p, i) => (_jsxs("button", { style: S.slashItem(i === mentionActive), onMouseEnter: () => setMentionActive(i), onClick: () => pickMention(p.name), children: [_jsxs("span", { style: S.slashName, children: ["@", p.name] }), _jsx("span", { style: S.slashHint, children: p.hint ?? '' })] }, p.name))), _jsxs("div", { style: S.slashFoot, children: [_jsx("span", { children: "\u2191\u2193 navigate" }), _jsx("span", { children: "\u21B5 select" }), _jsx("span", { children: "esc dismiss" })] })] })), showSlash && filtered.length > 0 && (_jsxs("div", { style: S.slash, "data-chat-part": "popover", children: [groupBySection(filtered).map(([section, items]) => (_jsxs("div", { children: [section && _jsx("div", { style: S.slashSection, children: section }), items.map((c) => {
                                 const idx = filtered.indexOf(c);
                                 return (_jsxs("button", { style: S.slashItem(idx === slashActive), onMouseEnter: () => setSlashActive(idx), onClick: () => onPickSlash?.(c.name), children: [_jsx("span", { style: S.slashIcon, children: c.icon }), _jsxs("span", { style: S.slashName, children: ["/", c.name] }), _jsx("span", { style: S.slashHint, children: c.hint })] }, c.name));
-                            })] }, section || '_'))), _jsxs("div", { style: S.slashFoot, children: [_jsx("span", { children: "\u2191\u2193 navigate" }), _jsx("span", { children: "\u21B5 select" }), _jsx("span", { children: "esc dismiss" })] })] })), attachments.length > 0 && (_jsx("div", { style: S.thumbs, children: attachments.map((src, i) => (_jsxs("div", { style: S.thumbWrap, children: [_jsx("img", { src: src, alt: `Attachment ${i + 1}`, style: S.thumb, className: "ask-thumb", onClick: () => onImageClick?.(src), title: "Click to expand" }), _jsx("button", { style: S.thumbX, onClick: () => onRemoveAttachment?.(i), "aria-label": "Remove image", children: _jsx(IcX, { size: 11 }) })] }, i))) })), pending && pending.length > 0 && (() => {
-                /* WHICH ONE SURVIVES THE FOLD. Not blindly the first: an `injecting`
-                 * message carries "Interrupt now", the one control here that is worth
-                 * anything only in the seconds before the step lands. Folding that out
-                 * of sight would be the same defect as collapsing the row to a bare
-                 * count -- the space would be won by hiding the thing you needed. So an
-                 * injecting chip is the one that stays; otherwise the oldest, which is
-                 * the next to be sent. */
-                const spotlight = Math.max(0, pending.findIndex((p) => p.state === 'injecting'));
-                const shown = queueOpen ? pending : [pending[spotlight]];
-                const hidden = pending.length - shown.length;
-                return (_jsxs("div", { style: S.pendingRow, children: [shown.map((p) => {
-                            const editing = editingPendingId === p.id;
-                            const commitEdit = () => {
-                                setEditingPendingId(null);
-                                // Escape already threw this text away -- a same-unmount blur
-                                // reaching us here must not resurrect it.
-                                if (abandoningEditRef.current) {
-                                    abandoningEditRef.current = false;
-                                    return;
-                                }
-                                // The host removed this item while it was being edited -- there
-                                // is nothing left to send the edit to.
-                                if (!pendingIdsRef.current.has(p.id))
-                                    return;
-                                if (onEditPending)
-                                    onEditPending(p.id, editingPendingText);
-                            };
-                            return (_jsxs("span", { style: S.pendingChip(p.state), children: [editing ? (_jsx("input", { autoFocus: true, style: S.pendingEdit, value: editingPendingText, onChange: (e) => setEditingPendingText(e.target.value), onBlur: commitEdit, onKeyDown: (e) => {
-                                            if (e.key === 'Enter') {
-                                                e.preventDefault();
-                                                commitEdit();
-                                                return;
-                                            }
-                                            if (e.key === 'Escape') {
-                                                e.preventDefault();
-                                                abandoningEditRef.current = true;
-                                                setEditingPendingId(null);
-                                            }
-                                        } })) : (_jsx("span", { style: onEditPending ? { ...S.pendingText, cursor: 'text' } : S.pendingText, onClick: onEditPending ? () => {
-                                            abandoningEditRef.current = false;
-                                            setEditingPendingId(p.id);
-                                            setEditingPendingText(p.text);
-                                        } : undefined, children: p.text })), p.note && _jsx("span", { style: S.pendingNote, children: p.note }), p.state === 'injecting' && _jsx("span", { style: S.pendingNote, children: "lands after this step" }), p.state === 'injecting' && onInject && (
-                                    // The chip half of the Alt+Enter ladder: cut the model stream
-                                    // now instead of waiting for the turn to finish.
-                                    _jsx("button", { style: S.pendingAction, onClick: () => onInject(p.id), children: "Interrupt now" })), p.state === 'held' && onInject && (_jsx("button", { style: S.pendingAction, onClick: () => onInject(p.id), children: "Send now" })), onRemovePending && (_jsx("button", { style: S.pendingX, "aria-label": "Remove queued message", onClick: () => onRemovePending(p.id), children: "x" }))] }, p.id));
-                        }), (hidden > 0 || queueOpen) && (_jsx("button", { style: S.queueMore, onClick: () => setQueueOpen((o) => !o), "aria-expanded": queueOpen, title: queueOpen ? 'Show only the next queued message' : 'Show every queued message', children: queueOpen ? 'Show less' : `+${hidden} queued` }))] }));
-            })(), _jsxs("div", { style: { ...S.box, borderColor: boxFocused ? 'var(--accent)' : 'var(--border-default)' }, "data-testid": "composer-box", onFocus: () => setBoxFocused(true), onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
+                            })] }, section || '_'))), _jsxs("div", { style: S.slashFoot, children: [_jsx("span", { children: "\u2191\u2193 navigate" }), _jsx("span", { children: "\u21B5 select" }), _jsx("span", { children: "esc dismiss" })] })] })), attachments.length > 0 && (_jsx("div", { style: S.thumbs, children: attachments.map((src, i) => (_jsxs("div", { style: S.thumbWrap, children: [_jsx("img", { src: src, alt: `Attachment ${i + 1}`, style: S.thumb, className: "ask-thumb", onClick: () => onImageClick?.(src), title: "Click to expand" }), _jsx("button", { style: S.thumbX, onClick: () => onRemoveAttachment?.(i), "aria-label": "Remove image", children: _jsx(IcX, { size: 11 }) })] }, i))) })), _jsxs("div", { style: { ...S.box, borderColor: boxFocused ? 'var(--accent)' : 'var(--border-default)' }, "data-testid": "composer-box", "data-stacked": stacked ? 'true' : 'false', "data-chat-part": "composer-box", onFocus: () => setBoxFocused(true), onBlur: (e) => { if (!e.currentTarget.contains(e.relatedTarget))
                     setBoxFocused(false); }, onMouseDown: (e) => {
                     const el = e.target;
                     if (el.dataset.boxSurface === undefined)
                         return;
                     e.preventDefault();
                     textareaRef.current?.focus();
-                }, "data-box-surface": "", children: [(canAddContext || chips.length > 0 || rightSlot || estTok > 0) && (_jsxs("div", { style: S.chips, "data-testid": "composer-chips", "data-box-surface": "", children: [chips.map((c) => (_jsxs("span", { style: S.chip, title: c.label, children: [c.id === 'selection' ? _jsx(IcCode, { size: 11 }) : _jsx(IcFile, { size: 11 }), _jsx("span", { style: S.chipLabel, children: c.label }), c.removable && _jsx("button", { style: S.chipX, onClick: () => onRemoveChip?.(c.id), "aria-label": "Remove context", children: _jsx(IcX, { size: 10 }) })] }, c.id))), canAddContext && _jsxs("button", { style: S.addCtx, onClick: onAddContext, title: "Add context", children: [_jsx(IcPlus, { size: 11 }), " context"] }), estTok > 0 && (_jsxs("span", { style: S.est, "data-testid": "composer-est", title: "Rough estimate of this message's input tokens and cost (text only)", children: ["~", fmtTok(estTok), " tok", estCost != null ? ` · est ${fmtCost(estCost)}` : ''] })), rightSlot && _jsx("span", { style: S.chipsRight, children: rightSlot })] })), _jsx("textarea", { ref: textareaRef, style: S.textarea, "aria-label": ariaLabel, value: value, readOnly: dictating, "aria-live": dictating ? 'polite' : undefined, onChange: (e) => {
-                            setSlashHidden(false);
-                            setMentionHidden(false);
-                            // Typing leaves the history: what is in the box is now a draft, and a
-                            // later Down should not jump to an entry the user has since edited
-                            // away from.
-                            histIdx.current = -1;
-                            onChange(e.target.value);
-                        }, onPaste: onPaste, onKeyDown: (e) => {
-                            // While the "/" menu is open it owns the arrows + Enter/Tab/Escape, so a
-                            // command can be navigated and picked without leaving the keyboard.
-                            if (mentionHits.length > 0) {
-                                if (e.key === 'ArrowDown') {
-                                    e.preventDefault();
-                                    setMentionActive((a) => Math.min(a + 1, mentionHits.length - 1));
-                                    return;
-                                }
-                                if (e.key === 'ArrowUp') {
-                                    e.preventDefault();
-                                    setMentionActive((a) => Math.max(a - 1, 0));
-                                    return;
-                                }
-                                if (e.key === 'Escape') {
-                                    e.preventDefault();
-                                    setMentionHidden(true);
-                                    return;
-                                }
-                                if ((e.key === 'Enter' || e.key === 'Tab') && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
-                                    e.preventDefault();
-                                    pickMention(mentionHits[Math.min(mentionActive, mentionHits.length - 1)].name);
-                                    return;
-                                }
-                            }
-                            if (showSlash && filtered.length > 0) {
-                                if (e.key === 'ArrowDown') {
-                                    e.preventDefault();
-                                    setSlashActive((a) => Math.min(a + 1, filtered.length - 1));
-                                    return;
-                                }
-                                if (e.key === 'ArrowUp') {
-                                    e.preventDefault();
-                                    setSlashActive((a) => Math.max(a - 1, 0));
-                                    return;
-                                }
-                                if (e.key === 'Escape') {
-                                    e.preventDefault();
-                                    setSlashHidden(true);
-                                    return;
-                                }
-                                if ((e.key === 'Enter' || e.key === 'Tab') && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
-                                    e.preventDefault();
-                                    onPickSlash?.(filtered[Math.min(slashActive, filtered.length - 1)].name);
-                                    return;
-                                }
-                            }
-                            /* Up/Down recall previous messages, the way a shell does.
-                             *
-                             * ONLY FROM THE EDGES OF THE DRAFT. Up recalls when the caret is on
-                             * the first line and Down when it is on the last, because otherwise
-                             * the arrows could not move through a multi-line message you are
-                             * still writing - and a composer that will not let you navigate your
-                             * own text is a worse trade than no history at all. A selection is
-                             * left alone for the same reason.
-                             *
-                             * The slash menu above claims the arrows first while it is open, so
-                             * this cannot steal them from command navigation.
-                             */
-                            if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && history && history.length > 0
-                                && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
-                                const el = e.currentTarget;
-                                const at = el.selectionStart;
-                                const noSelection = at === el.selectionEnd;
-                                const onFirstLine = !value.slice(0, at).includes(NEWLINE);
-                                const onLastLine = !value.slice(at).includes(NEWLINE);
-                                const stepBack = e.key === 'ArrowUp' && noSelection && onFirstLine;
-                                const stepForward = e.key === 'ArrowDown' && noSelection && onLastLine && histIdx.current >= 0;
-                                if (stepBack || stepForward) {
+                }, "data-box-surface": "", children: [words.composerTitle && (_jsxs("div", { style: S.boxTitle, "data-chat-part": "composer-title", "data-box-surface": "", children: [_jsx("span", { children: words.composerTitle }), _jsx("span", { style: S.boxTitleState, children: running ? (onQueue ? words.composerBusy : null) : (dictating ? null : words.composerIdle) })] })), (status != null || pendingEl) && (_jsxs("div", { style: statusHidden ? { ...S.status, display: 'none' } : S.status, "data-chat-part": "status", "data-testid": "composer-status", "data-box-surface": "", children: [status, pendingEl] })), (chips.length > 0 || toggleChips.length > 0) && (_jsxs("div", { style: S.chips, "data-testid": "composer-chips", "data-box-surface": "", children: [toggleChips.map((t) => (_jsxs("span", { style: S.toggleChip, "data-testid": `composer-toggle-${t.id}`, title: t.title ?? `${t.label} is on`, children: [t.icon, _jsx("span", { style: S.chipLabel, children: t.label }), _jsx("button", { style: S.toggleChipX, onClick: t.onRemove, "aria-label": `Turn off ${t.label}`, children: _jsx(IcX, { size: 10 }) })] }, `toggle:${t.id}`))), chips.map((c) => (_jsxs("span", { style: S.chip, title: c.label, children: [c.id === 'selection' ? _jsx(IcCode, { size: 11 }) : _jsx(IcFile, { size: 11 }), _jsx("span", { style: S.chipLabel, children: c.label }), c.removable && _jsx("button", { style: S.chipX, onClick: () => onRemoveChip?.(c.id), "aria-label": "Remove context", children: _jsx(IcX, { size: 10 }) })] }, c.id)))] })), _jsxs("div", { style: S.bottom, "data-testid": "composer-bottom", "data-box-surface": "", children: [canAddContext && (_jsxs("button", { style: S.add, "data-testid": "composer-add", onClick: onAddContext, title: "Add context", "aria-label": "Add context", children: [_jsx(IcPlus, { size: 14 }), words.addContext ? _jsx("span", { children: words.addContext }) : null] })), leadSlot, !running && sendLater, rightSlot && _jsx("span", { style: S.hostSlot, "data-testid": "composer-host-slot", children: rightSlot }), _jsx("textarea", { ref: textareaRef, style: { ...S.textarea, ...(stacked ? S.textareaStacked : S.textareaCompact) }, "aria-label": ariaLabel, value: value, readOnly: dictating, "aria-live": dictating ? 'polite' : undefined, onChange: (e) => {
+                                    setSlashHidden(false);
+                                    setMentionHidden(false);
+                                    // Typing leaves the history: what is in the box is now a draft, and a
+                                    // later Down should not jump to an entry the user has since edited
+                                    // away from.
+                                    histIdx.current = -1;
+                                    onChange(e.target.value);
+                                }, onPaste: onPaste, onKeyDown: (e) => {
+                                    // While the "/" menu is open it owns the arrows + Enter/Tab/Escape, so a
+                                    // command can be navigated and picked without leaving the keyboard.
+                                    if (mentionHits.length > 0) {
+                                        if (e.key === 'ArrowDown') {
+                                            e.preventDefault();
+                                            setMentionActive((a) => Math.min(a + 1, mentionHits.length - 1));
+                                            return;
+                                        }
+                                        if (e.key === 'ArrowUp') {
+                                            e.preventDefault();
+                                            setMentionActive((a) => Math.max(a - 1, 0));
+                                            return;
+                                        }
+                                        if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            setMentionHidden(true);
+                                            return;
+                                        }
+                                        if ((e.key === 'Enter' || e.key === 'Tab') && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
+                                            e.preventDefault();
+                                            pickMention(mentionHits[Math.min(mentionActive, mentionHits.length - 1)].name);
+                                            return;
+                                        }
+                                    }
+                                    if (showSlash && filtered.length > 0) {
+                                        if (e.key === 'ArrowDown') {
+                                            e.preventDefault();
+                                            setSlashActive((a) => Math.min(a + 1, filtered.length - 1));
+                                            return;
+                                        }
+                                        if (e.key === 'ArrowUp') {
+                                            e.preventDefault();
+                                            setSlashActive((a) => Math.max(a - 1, 0));
+                                            return;
+                                        }
+                                        if (e.key === 'Escape') {
+                                            e.preventDefault();
+                                            setSlashHidden(true);
+                                            return;
+                                        }
+                                        if ((e.key === 'Enter' || e.key === 'Tab') && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
+                                            e.preventDefault();
+                                            onPickSlash?.(filtered[Math.min(slashActive, filtered.length - 1)].name);
+                                            return;
+                                        }
+                                    }
+                                    /* Up/Down recall previous messages, the way a shell does.
+                                     *
+                                     * ONLY FROM THE EDGES OF THE DRAFT. Up recalls when the caret is on
+                                     * the first line and Down when it is on the last, because otherwise
+                                     * the arrows could not move through a multi-line message you are
+                                     * still writing - and a composer that will not let you navigate your
+                                     * own text is a worse trade than no history at all. A selection is
+                                     * left alone for the same reason.
+                                     *
+                                     * The slash menu above claims the arrows first while it is open, so
+                                     * this cannot steal them from command navigation.
+                                     */
+                                    if ((e.key === 'ArrowUp' || e.key === 'ArrowDown') && history && history.length > 0
+                                        && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
+                                        const el = e.currentTarget;
+                                        const at = el.selectionStart;
+                                        const noSelection = at === el.selectionEnd;
+                                        const onFirstLine = !value.slice(0, at).includes(NEWLINE);
+                                        const onLastLine = !value.slice(at).includes(NEWLINE);
+                                        const stepBack = e.key === 'ArrowUp' && noSelection && onFirstLine;
+                                        const stepForward = e.key === 'ArrowDown' && noSelection && onLastLine && histIdx.current >= 0;
+                                        if (stepBack || stepForward) {
+                                            e.preventDefault();
+                                            // Stash the live draft on the way in, so stepping back past the
+                                            // newest entry returns what you were writing.
+                                            if (histIdx.current < 0)
+                                                histDraft.current = value;
+                                            const next = stepBack
+                                                ? Math.min(histIdx.current + 1, history.length - 1)
+                                                : histIdx.current - 1;
+                                            histIdx.current = next;
+                                            const text = next < 0 ? histDraft.current : history[history.length - 1 - next];
+                                            onChange(text);
+                                            setSlashHidden(true);
+                                            // Caret to the end, as a shell does: the common case is a
+                                            // single-line entry you want to edit or resend immediately, and
+                                            // end-of-text leaves the next Up still on the first line.
+                                            requestAnimationFrame(() => {
+                                                const t = textareaRef.current;
+                                                if (t)
+                                                    t.setSelectionRange(text.length, text.length);
+                                            });
+                                            return;
+                                        }
+                                    }
+                                    if (e.key !== 'Enter')
+                                        return;
+                                    // Cmd/Ctrl+Enter: don't handle it -- let it bubble to the editor's
+                                    // global handler so it runs the prompt. Shift+Enter: newline.
+                                    if (e.metaKey || e.ctrlKey || e.shiftKey)
+                                        return;
+                                    // Alt+Enter pushes into the turn already running.
+                                    if (e.altKey) {
+                                        if (!running || !onInject)
+                                            return;
+                                        // An empty composer normally has nothing to push -- EXCEPT when a
+                                        // message is already in flight, where the second Alt+Enter is the
+                                        // ladder's escalation to a hard inject.
+                                        if (!canSend && !pending?.some((p) => p.state === 'injecting'))
+                                            return;
+                                        e.preventDefault();
+                                        onInject();
+                                        return;
+                                    }
+                                    // Touch keyboards have no separate newline gesture within easy reach,
+                                    // so on a coarse pointer plain Enter behaves like Shift+Enter (a
+                                    // newline) instead of committing the message -- returning here without
+                                    // preventDefault lets the browser insert it natively, same as the
+                                    // shiftKey branch above. Only the two explicit chords (Alt+Enter,
+                                    // Cmd/Ctrl+Enter) still act on Enter; the mention/slash acceptance
+                                    // above already returned before this point.
+                                    if (isCoarsePointer())
+                                        return;
+                                    // Only take the queue path when the host actually wired one. A host
+                                    // that renders `running` but has not adopted the queue must get
+                                    // today's behavior unchanged -- Enter falls through to onSend()
+                                    // below exactly as it always has.
+                                    if (running && onQueue) {
+                                        if (!canSend)
+                                            return;
+                                        e.preventDefault();
+                                        onQueue();
+                                        return;
+                                    }
+                                    if (!canSend)
+                                        return;
                                     e.preventDefault();
-                                    // Stash the live draft on the way in, so stepping back past the
-                                    // newest entry returns what you were writing.
-                                    if (histIdx.current < 0)
-                                        histDraft.current = value;
-                                    const next = stepBack
-                                        ? Math.min(histIdx.current + 1, history.length - 1)
-                                        : histIdx.current - 1;
-                                    histIdx.current = next;
-                                    const text = next < 0 ? histDraft.current : history[history.length - 1 - next];
-                                    onChange(text);
-                                    setSlashHidden(true);
-                                    // Caret to the end, as a shell does: the common case is a
-                                    // single-line entry you want to edit or resend immediately, and
-                                    // end-of-text leaves the next Up still on the first line.
-                                    requestAnimationFrame(() => {
-                                        const t = textareaRef.current;
-                                        if (t)
-                                            t.setSelectionRange(text.length, text.length);
-                                    });
-                                    return;
-                                }
-                            }
-                            if (e.key !== 'Enter')
-                                return;
-                            // Cmd/Ctrl+Enter: don't handle it -- let it bubble to the editor's
-                            // global handler so it runs the prompt. Shift+Enter: newline.
-                            if (e.metaKey || e.ctrlKey || e.shiftKey)
-                                return;
-                            // Alt+Enter pushes into the turn already running.
-                            if (e.altKey) {
-                                if (!running || !onInject)
-                                    return;
-                                // An empty composer normally has nothing to push -- EXCEPT when a
-                                // message is already in flight, where the second Alt+Enter is the
-                                // ladder's escalation to a hard inject.
-                                if (!canSend && !pending?.some((p) => p.state === 'injecting'))
-                                    return;
-                                e.preventDefault();
-                                onInject();
-                                return;
-                            }
-                            // Touch keyboards have no separate newline gesture within easy reach,
-                            // so on a coarse pointer plain Enter behaves like Shift+Enter (a
-                            // newline) instead of committing the message -- returning here without
-                            // preventDefault lets the browser insert it natively, same as the
-                            // shiftKey branch above. Only the two explicit chords (Alt+Enter,
-                            // Cmd/Ctrl+Enter) still act on Enter; the mention/slash acceptance
-                            // above already returned before this point.
-                            if (isCoarsePointer())
-                                return;
-                            // Only take the queue path when the host actually wired one. A host
-                            // that renders `running` but has not adopted the queue must get
-                            // today's behavior unchanged -- Enter falls through to onSend()
-                            // below exactly as it always has.
-                            if (running && onQueue) {
-                                if (!canSend)
-                                    return;
-                                e.preventDefault();
-                                onQueue();
-                                return;
-                            }
-                            if (!canSend)
-                                return;
-                            e.preventDefault();
-                            histIdx.current = -1;
-                            histDraft.current = '';
-                            onSend();
-                        }, placeholder: (() => {
-                            /* Listening beats every other invitation: the box is empty because
-                               nothing has been heard yet, and the send/newline hints describe keys
-                               that are disarmed right now anyway. */
-                            if (dictating)
-                                return LEAD_LISTENING;
-                            // The invitation is the host's; the key hints are this component's.
-                            const lead = placeholder ?? (onAttach ? LEAD_WITH_PASTE : LEAD_PLAIN);
-                            if (COARSE_POINTER)
-                                return lead;
-                            if (pending && onQueue && running) {
-                                return `${lead}  ·  ↵ queue · ⌥↵ push into run · ⇧↵ newline`;
-                            }
-                            const base = `${lead}  ·  ↵ send · ⇧↵ newline`;
-                            return runHint ? `${base} · ⌘↵ run` : base;
-                        })(), 
-                        // Rests at one line and grows with the text, up to the cap.
-                        rows: 1 }), _jsxs("div", { style: S.bottom, "data-testid": "composer-bottom", "data-box-surface": "", children: [leadSlot, !running && sendLater, _jsxs("div", { ref: stanceRef, style: S.stance, "data-testid": "composer-stance", children: [hasMode && (modeOpen ? (modeList.map((mm) => (_jsxs("button", { style: S.stanceOpt(mm.id === mode), title: mm.description || mm.label, onClick: () => { onModeChange?.(mm.id); setModeOpen(false); }, children: [_jsx("span", { style: { ...S.modeDot, background: modeAccent(mm) } }), mm.label] }, mm.id)))) : (_jsxs("button", { style: S.stanceCurrent, onClick: () => setModeOpen(true), title: curMode.description || curMode.label, children: [_jsx("span", { style: { ...S.modeDot, background: modeAccent(curMode) } }), _jsx("span", { style: S.stanceName, "data-testid": "composer-stance-name", children: curMode.label }), _jsx(IcChevron, { size: 12 })] }))), hasMode && _jsx("span", { style: S.stanceDivider }), running ? (_jsxs(_Fragment, { children: [onQueue && (_jsx("button", { style: S.queueBtn, onClick: onQueue, disabled: dictating || (!value.trim() && attachments.length === 0), title: "Park this for after the run (Enter). Alt+Enter pushes it into the run instead.", children: "Queue" })), _jsxs("button", { style: { ...S.sendBtn, background: 'var(--grad-stop)' }, onClick: onStop, children: [_jsx(IcStop, { size: 12 }), " Stop"] })] })) : (
+                                    histIdx.current = -1;
+                                    histDraft.current = '';
+                                    onSend();
+                                }, placeholder: (() => {
+                                    /* Listening beats every other invitation: the box is empty because
+                                       nothing has been heard yet, and the send/newline hints describe keys
+                                       that are disarmed right now anyway. */
+                                    if (dictating)
+                                        return LEAD_LISTENING;
+                                    // The invitation is the host's; the key hints are this component's.
+                                    const lead = placeholder ?? (onAttach ? LEAD_WITH_PASTE : LEAD_PLAIN);
+                                    if (COARSE_POINTER)
+                                        return lead;
+                                    if (pending && onQueue && running) {
+                                        return `${lead}  ·  ↵ queue · ⌥↵ push into run · ⇧↵ newline`;
+                                    }
+                                    const base = `${lead}  ·  ↵ send · ⇧↵ newline`;
+                                    return runHint ? `${base} · ⌘↵ run` : base;
+                                })(), 
+                                // Rests at one line and grows with the text, up to the cap.
+                                rows: 1 }), estTok > 0 && (_jsxs("span", { style: S.est, "data-testid": "composer-est", title: "Rough estimate of this message's input tokens and cost (text only)", children: ["~", fmtTok(estTok), " tok", estCost != null ? ` · est ${fmtCost(estCost)}` : ''] })), _jsxs("div", { ref: stanceRef, style: S.stance, "data-testid": "composer-stance", children: [hasMode && (modeOpen ? (modeList.map((mm) => (_jsxs("button", { style: S.stanceOpt(mm.id === mode), title: mm.description || mm.label, onClick: () => { onModeChange?.(mm.id); setModeOpen(false); }, children: [_jsx("span", { style: { ...S.modeDot, background: modeAccent(mm) } }), mm.label] }, mm.id)))) : (_jsxs("button", { style: S.stanceCurrent, onClick: () => setModeOpen(true), title: curMode.description || curMode.label, children: [_jsx("span", { style: { ...S.modeDot, background: modeAccent(curMode) } }), _jsx("span", { style: words.modeLabel ? S.stanceNamePrefixed : S.stanceName, "data-testid": "composer-stance-name", children: words.modeLabel ? words.modeLabel(curMode.label) : curMode.label }), _jsx(IcChevron, { size: 12 })] }))), hasMode && _jsx("span", { style: S.stanceDivider }), running ? (_jsxs(_Fragment, { children: [onQueue && (_jsx("button", { style: S.queueBtn, "data-chat-part": "queue", ...(words.queue ? { 'aria-label': 'Queue' } : {}), onClick: onQueue, disabled: dictating || (!value.trim() && attachments.length === 0), title: "Park this for after the run (Enter). Alt+Enter pushes it into the run instead.", children: words.queue ?? 'Queue' })), _jsxs("button", { style: { ...S.sendBtn, background: 'var(--grad-stop)' }, "data-chat-part": "stop", ...plainName(words.stop, 'Stop'), onClick: onStop, children: [_jsx(IcStop, { size: 12 }), " ", words.stop ?? 'Stop'] })] })) : (
                                     // One primary per app: a host that declares --grad-send (corenel.ai)
                                     // paints Send like every other primary button, and mode colour stays
                                     // on the dot. Without it (prompd.app) this falls back to the mode
                                     // gradient, which is the historical behaviour.
-                                    _jsxs("button", { style: { ...S.sendBtn, background: `var(--grad-send, ${hasMode ? modeAccent(curMode) : 'var(--accent)'})`, color: 'var(--text-on-accent, #fff)' }, onClick: onSend, disabled: !canSend, children: [_jsx(IcPlay, { size: 12 }), " ", sendLabel] }))] })] })] })] }));
+                                    _jsxs("button", { style: { ...S.sendBtn, background: `var(--grad-send, ${hasMode ? modeAccent(curMode) : 'var(--accent)'})`, color: 'var(--text-on-accent, #fff)' }, "data-chat-part": "send", ...plainName(words.send, sendLabel), onClick: onSend, disabled: !canSend, children: [_jsx(IcPlay, { size: 12 }), " ", words.send ?? sendLabel] }))] })] })] })] }));
 }
 const S = {
-    wrap: { position: 'relative', borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-1)', padding: 10, display: 'flex', flexDirection: 'column', gap: 8 },
+    wrap: { position: 'relative', borderTop: '1px solid var(--border-subtle)', background: 'var(--surface-1)', padding: '8px 10px 10px', display: 'flex', flexDirection: 'column', gap: 8 },
+    // S.wrap minus the divider line, on no surface band of its own.
+    wrapFloating: { position: 'relative', background: 'transparent', padding: '8px 10px 10px', display: 'flex', flexDirection: 'column', gap: 8 },
     slash: { position: 'absolute', bottom: 'calc(100% + 6px)', left: 10, right: 10, background: 'var(--surface-1)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-3)', padding: 4, zIndex: 200, maxHeight: 360, overflow: 'auto' },
     slashItem: (active) => ({ display: 'flex', alignItems: 'center', gap: 9, width: '100%', padding: '7px 9px', border: 0, borderRadius: 'var(--radius-sm)', background: active ? 'var(--accent-soft)' : 'transparent', color: 'var(--text-primary)', cursor: 'pointer', textAlign: 'left' }),
     slashIcon: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 16, color: 'var(--text-tertiary)', flexShrink: 0 },
@@ -450,13 +508,14 @@ const S = {
     slashSection: { padding: '6px 9px 3px', fontSize: 10.5, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.07em', color: 'var(--text-tertiary)' },
     slashFoot: { display: 'flex', gap: 14, padding: '7px 10px 4px', marginTop: 4, borderTop: '1px solid var(--border-subtle)', fontSize: 11, color: 'var(--text-disabled)', fontFamily: 'var(--font-mono)' },
     chips: { display: 'flex', flexWrap: 'wrap', gap: 6, alignItems: 'center' },
-    // marginLeft:auto pushes it to the right edge; minWidth:0 lets its own contents
-    // truncate rather than shoving the context chips off the row.
-    chipsRight: { marginLeft: 'auto', minWidth: 0, maxWidth: '60%', display: 'flex', justifyContent: 'flex-end' },
+    status: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8, minHeight: 28, padding: '0 6px', borderBottom: '1px solid var(--border-subtle)', fontSize: 12, color: 'var(--text-tertiary)', fontVariantNumeric: 'tabular-nums' },
     chip: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 6px 0 8px', borderRadius: 'var(--radius-pill)', background: 'var(--surface-3)', border: '1px solid var(--border-subtle)', color: 'var(--text-secondary)', fontSize: 11.5, fontFamily: 'var(--font-mono)', maxWidth: 200 },
     chipLabel: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
     chipX: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 14, height: 14, border: 0, borderRadius: 999, background: 'transparent', color: 'var(--text-tertiary)', cursor: 'pointer', padding: 0 },
-    addCtx: { display: 'inline-flex', alignItems: 'center', gap: 4, height: 22, padding: '0 8px', borderRadius: 'var(--radius-pill)', background: 'transparent', border: '1px dashed var(--border-default)', color: 'var(--text-tertiary)', fontSize: 11.5, cursor: 'pointer' },
+    toggleChip: { display: 'inline-flex', alignItems: 'center', gap: 5, height: 22, padding: '0 6px 0 8px', borderRadius: 'var(--radius-pill)', background: 'var(--accent-soft)', border: '1px solid var(--accent)', color: 'var(--accent)', fontSize: 11.5, fontWeight: 600, maxWidth: 200 },
+    toggleChipX: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 14, height: 14, border: 0, borderRadius: 999, background: 'transparent', color: 'var(--accent)', cursor: 'pointer', padding: 0 },
+    add: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 4, minWidth: 32, height: 32, padding: '0 6px', border: 0, borderRadius: 'var(--radius-sm)', background: 'transparent', color: 'var(--text-secondary)', fontSize: 11.5, fontWeight: 600, cursor: 'pointer', flexShrink: 0 },
+    hostSlot: { display: 'inline-flex', alignItems: 'center', gap: 6, flexShrink: 0 },
     thumbs: { display: 'flex', flexWrap: 'wrap', gap: 8 },
     thumbWrap: { position: 'relative', width: 60, height: 60 },
     thumb: { width: 60, height: 60, objectFit: 'cover', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)', cursor: 'zoom-in', display: 'block' },
@@ -467,25 +526,32 @@ const S = {
     // it rests at one line (rows={1}) and grows with the text.
     // One bordered box holds the chip row, this textarea and the send row (see
     // the JSX), so the textarea itself is borderless and transparent.
-    box: { display: 'flex', flexDirection: 'column', gap: 4, padding: 6, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg, 12px)', background: 'var(--surface-2)', minWidth: 0 },
+    boxTitle: { display: 'flex', alignItems: 'center', gap: 8, margin: '-4px -4px 0', padding: '5px 10px', borderBottom: '1px solid var(--border-default)', fontSize: 10, letterSpacing: '0.14em', color: 'var(--text-tertiary)' },
+    boxTitleState: { marginLeft: 'auto', color: 'var(--success)' },
+    box: { display: 'flex', flexDirection: 'column', gap: 4, padding: 4, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg, 12px)', background: 'var(--surface-2)', minWidth: 0 },
     textarea: { width: '100%', boxSizing: 'border-box', resize: 'none', padding: '4px 6px', border: 0, borderRadius: 0, background: 'transparent', color: 'var(--text-primary)', fontSize: 14, fontFamily: 'inherit', lineHeight: 1.5, outline: 'none', minHeight: 0, maxHeight: 'min(220px, 30vh)', overflowY: 'auto' },
-    // flexWrap + minWidth:0 are belt-and-braces: the token estimate (the main
-    // space hog) has already moved to the chips row (item A), but mic/history/
-    // lead-slot/queue can still fill this row on a narrow screen, so it must be
-    // able to wrap rather than clip.
+    // flexWrap + minWidth:0: the textarea, "+", mic, host icons and stance share
+    // this row, so on a narrow screen it must be able to wrap rather than clip.
     bottom: { display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap', minWidth: 0 },
-    // marginLeft:auto keeps it pushed toward chipsRight in the chips row;
-    // minWidth:0 + overflow/ellipsis make it the FIRST thing to truncate when
-    // that row is crowded, since it is purely informational.
+    // Basis 0 and a small minWidth: the textarea takes whatever the controls leave,
+    // so the resting row stays ONE line down to a ~350px box (a phone). A 160px
+    // basis wrapped the empty composer onto two rows at 390px.
+    textareaCompact: { flex: '1 1 0', minWidth: 48, order: 0 },
+    textareaStacked: { flex: '1 1 100%', order: -1 },
+    // Sits in the bottom row right before the stance; marginLeft:auto pushes both
+    // to the right. minWidth:0 + overflow/ellipsis make it the FIRST thing to
+    // truncate when the row is crowded, since it is purely informational.
     est: { marginLeft: 'auto', minWidth: 0, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', fontSize: 11.5, color: 'var(--text-tertiary)', fontFamily: 'var(--font-mono)', fontVariantNumeric: 'tabular-nums' },
     modeDot: { width: 8, height: 8, borderRadius: 999, flexShrink: 0 },
     // Fused stance + Send: one segmented control on the right of the bar.
     // flexShrink:0 -- Send must never be the thing that gets clipped when the
     // bottom row is crowded; the mode label truncates instead (S.stanceName).
-    stance: { marginLeft: 'auto', flexShrink: 0, display: 'inline-flex', alignItems: 'stretch', height: 34, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', overflow: 'hidden', background: 'var(--surface-2)', boxShadow: 'var(--shadow-1)' },
+    stance: { marginLeft: 'auto', flexShrink: 0, display: 'inline-flex', alignItems: 'stretch', height: 32, border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', overflow: 'hidden', background: 'var(--surface-2)', boxShadow: 'var(--shadow-1)' },
     stanceCurrent: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '0 10px', border: 0, background: 'transparent', color: 'var(--text-primary)', fontSize: 12.5, fontWeight: 600, fontFamily: 'inherit', textTransform: 'capitalize', cursor: 'pointer' },
     // maxWidth caps a long mode label so it truncates instead of widening the
     // fused control and pushing Send further toward (or off) the edge.
+    // The skin's own label sets its case; the button's capitalize must not reach it.
+    stanceNamePrefixed: { textTransform: 'none', maxWidth: 170, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
     stanceName: { textTransform: 'capitalize', maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
     stanceOpt: (active) => ({ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '0 9px', border: 0, background: active ? 'var(--surface-1)' : 'transparent', color: active ? 'var(--text-primary)' : 'var(--text-tertiary)', fontSize: 12, fontWeight: 600, fontFamily: 'inherit', textTransform: 'capitalize', cursor: 'pointer' }),
     stanceDivider: { width: 1, alignSelf: 'stretch', background: 'var(--border-subtle)' },