@molecule/app-ide-react 1.17.1 → 1.18.0

package/dist/components/ChatPanel.js

@@ -16,8 +16,9 @@ import { useCoarsePointer, useNarrowViewport } from '../hooks/useViewport.js';
 import { activityFromEvent } from './activity-utilities.js';
 import { ActivityCard } from './ActivityCard.js';
 import { AutoCommitBadge } from './AutoCommitBadge.js';
+import { BackgroundTasksStrip } from './BackgroundTasksStrip.js';
 import { AUTO_COMMIT_DISABLED, autoCommitReducer, isAutoCommitArmed, isAutoCommitDue, isAutoCommitEnabled, parseAutoCommitCommand, resolveAutoCommitSeconds, } from './chat-autocommit-utilities.js';
-import { CHAT_CARD_ICON_SIZE, chatCardBorder, chatCardStyle } from './chat-card-style.js';
+import { CHAT_CARD_ICON_SIZE, chatCardStyle } from './chat-card-style.js';
 import { COMMAND_CATEGORIES, COMMANDS, matchesSideChannelCommand, } from './chat-commands.js';
 import { stripCommitCoauthorTrailer } from './chat-commit-utilities.js';
 import { cachedPromptTokens, formatTokenTotal } from './chat-cost-utilities.js';
@@ -477,7 +478,9 @@ function ThinkingBlock({ content, durationMs, isStreaming, }) {
         : durationMs != null
             ? formatThinkingDuration(durationMs)
             : t('ide.chat.thoughtBriefly', undefined, { defaultValue: 'Thought briefly' });
-    return (_jsxs("div", { style: { marginBottom: '6px' }, children: [_jsxs("button", { type: "button", onClick: () => setManualToggle((v) => !(v ?? isStreaming === true)), style: {
+    return (_jsxs("div", { style: { marginBottom: '6px' }, children: [_jsxs("button", { 
+                /* mol-bespoke-button: thinking disclosure toggle — chevron + muted label, a summary/details affordance with no button frame */
+                type: "button", onClick: () => setManualToggle((v) => !(v ?? isStreaming === true)), style: {
                     display: 'inline-flex',
                     alignItems: 'center',
                     gap: '4px',
@@ -586,7 +589,9 @@ function CollapsibleUserMessage({ content, isLight, }) {
                         ? 'linear-gradient(transparent, var(--mol-color-surface-secondary, #f5f5f5))'
                         : 'linear-gradient(transparent, var(--mol-color-surface-secondary, #1e1e1e))',
                     pointerEvents: 'none',
-                } })), overflows && (_jsx("button", { type: "button", onClick: () => setExpanded((v) => !v), onMouseEnter: (e) => {
+                } })), overflows && (_jsx("button", { 
+                /* mol-bespoke-button: overflow disclosure strip — full-width unlabelled chevron that expands a clipped card */
+                type: "button", onClick: () => setExpanded((v) => !v), onMouseEnter: (e) => {
                     ;
                     e.currentTarget.style.background = isLight
                         ? 'rgba(99,102,241,0.12)'
@@ -675,7 +680,9 @@ function VerificationBadge({ status, output, categories, }) {
             border: `1px solid ${borderColor}`,
             background: bgColor,
             overflow: 'hidden',
-        }, children: [_jsxs("button", { type: "button", onClick: () => setExpanded((v) => !v), className: cm.cn(cm.textSize('xs'), cm.w('full')), style: {
+        }, children: [_jsxs("button", { 
+                /* mol-bespoke-button: verify-error card header — the card's own expand/collapse header, tinted by severity; a disclosure, not an action */
+                type: "button", onClick: () => setExpanded((v) => !v), className: cm.cn(cm.textSize('xs'), cm.w('full')), style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 6,
@@ -719,10 +726,26 @@ const NOTICE_TONE = {
     success: { accent: '#3fb950', icon: 'check-circle' },
     signup: { accent: 'var(--mol-color-primary, #6366f1)', icon: 'sign-in' },
 };
+/**
+ * The SEMANTIC button colour each notice tone falls back to when the host gives
+ * an action no explicit `color`. Every notice-card action is a design-system
+ * button; this is only about which semantic it takes when the caller did not
+ * say. Without it a coloured action and a colourless one rendered side by side
+ * in the SAME card with two different box models (13px/3px vs a hand-rolled
+ * 12px/6px) — the exact mismatch this treatment exists to prevent.
+ */
+const NOTICE_TONE_BUTTON_COLOR = {
+    info: 'primary',
+    gold: 'warning',
+    upgrade: 'warning',
+    success: 'success',
+    signup: 'primary',
+};
 /**
  * The single shared notice-card treatment: a matched-weight accent {@link Icon},
- * an optional composable body (or plain text), and a left-aligned row of accent
- * outline action buttons. EVERY inline notice renders through this — the system
+ * an optional composable body (or plain text), and a left-aligned row of
+ * design-system action buttons (`cm.button`, `sm`) whose semantic colour comes
+ * from the action or, failing that, the tone. EVERY inline notice renders through this — the system
  * tip/notice cards AND the resource-limit / upgrade banners (see
  * {@link ResourceLimitBanner}) — so their icon + buttons can never drift apart
  * again. The host owns the button routes/copy; it passes them in as `action`.
@@ -732,24 +755,13 @@ const NOTICE_TONE = {
  */
 function NoticeCard({ tone, text, content, action, icon: iconOverride, }) {
     const cm = getClassMap();
-    const isCoarse = useCoarsePointer();
     const { accent, icon: defaultIcon } = NOTICE_TONE[tone];
     const icon = iconOverride ?? defaultIcon;
     const actions = action ? (Array.isArray(action) ? action : [action]) : [];
     const multiLine = (text ?? '').includes('\n');
-    // Buttons sit ON the card's tint, so they need their OWN opaque background to read
-    // as real buttons (a transparent "ghost" fill blends into the card). Opaque surface
-    // + a stronger accent border than the card frame + a hairline shadow.
-    const buttonBg = 'var(--mol-color-surface, transparent)';
-    const buttonHoverBg = `color-mix(in srgb, ${accent} 15%, var(--mol-color-surface, transparent))`;
-    const onEnter = (e) => {
-        ;
-        e.currentTarget.style.background = buttonHoverBg;
-    };
-    const onLeave = (e) => {
-        ;
-        e.currentTarget.style.background = buttonBg;
-    };
+    // The semantic colour an action takes when the host did not name one, so every
+    // action on the card renders the same design-system button.
+    const defaultActionColor = NOTICE_TONE_BUTTON_COLOR[tone];
     return (_jsxs("div", { "data-mol-id": "chat-notice-card", "data-tone": tone, className: cm.textSize('xs'), style: {
             display: 'flex',
             alignItems: 'flex-start',
@@ -758,41 +770,20 @@ function NoticeCard({ tone, text, content, action, icon: iconOverride, }) {
             ...chatCardStyle(accent),
             lineHeight: 1.5,
         }, children: [_jsx(Icon, { name: icon, size: CHAT_CARD_ICON_SIZE, "aria-hidden": "true", style: { flexShrink: 0, marginTop: 1, color: accent } }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [content ? (content.map((seg, i) => renderCardSegment(seg, i))) : (_jsx("span", { style: multiLine ? { whiteSpace: 'pre-wrap' } : undefined, children: text })), !content && actions.length > 0 && (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }, children: actions.map((act, i) => {
-                            // An action with a semantic `color` renders as a REAL design-system
-                            // button (`cm.button`, sm) so the same CTA looks identical wherever
-                            // the app shows it (auth page, banners, chat cards). No inline
-                            // colors — the ClassMap owns the look, including hover states.
-                            // Colorless actions keep the legacy accent-outline treatment.
-                            if (act.color) {
-                                // touchTargetCompact (36px), not the full 44px touchTarget — these
-                                // sit inside a dense chat card (the floor agreed for its actions).
-                                const className = cm.cn(cm.button({ color: act.color, size: 'sm' }), cm.touchTargetCompact);
-                                const coloredStyle = {
-                                    textDecoration: 'none',
-                                    fontFamily: act.code ? 'var(--mol-font-mono, monospace)' : 'inherit',
-                                };
-                                return act.href ? (_jsx("a", { href: act.href, target: act.href.startsWith('http') ? '_blank' : undefined, rel: act.href.startsWith('http') ? 'noopener noreferrer' : undefined, className: className, style: coloredStyle, children: act.label }, i)) : (_jsx("button", { type: "button", onClick: act.onClick, className: className, style: coloredStyle, children: act.label }, i));
-                            }
-                            const style = {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                fontSize: 12,
-                                fontWeight: 600,
-                                padding: '4px 10px',
-                                // Secondary inline actions: 36px is the touch floor agreed for
-                                // these (44 would overwhelm the compact card).
-                                ...(isCoarse ? { minHeight: 36 } : {}),
-                                borderRadius: 6,
-                                cursor: 'pointer',
+                            // EVERY action is a REAL design-system button (`cm.button`, sm) so the
+                            // same CTA looks identical wherever the app shows it (auth page,
+                            // banners, chat cards) — and so two actions on the SAME card can't
+                            // render two different box models. The host names the semantic colour
+                            // when it has one; otherwise the tone supplies it. No inline colors —
+                            // the ClassMap owns the look, including hover/active/focus states.
+                            // touchTargetCompact (36px), not the full 44px touchTarget — these sit
+                            // inside a dense chat card (the floor agreed for its actions).
+                            const className = cm.cn(cm.button({ color: act.color ?? defaultActionColor, size: 'sm' }), cm.touchTargetCompact);
+                            const actionStyle = {
                                 textDecoration: 'none',
                                 fontFamily: act.code ? 'var(--mol-font-mono, monospace)' : 'inherit',
-                                border: `1px solid ${chatCardBorder(accent, 55)}`,
-                                color: accent,
-                                background: buttonBg,
-                                boxShadow: '0 1px 2px rgba(0, 0, 0, 0.08)',
-                                transition: 'background 100ms',
                             };
-                            return act.href ? (_jsx("a", { href: act.href, target: act.href.startsWith('http') ? '_blank' : undefined, rel: act.href.startsWith('http') ? 'noopener noreferrer' : undefined, style: style, onMouseEnter: onEnter, onMouseLeave: onLeave, children: act.label }, i)) : (_jsx("button", { type: "button", onClick: act.onClick, style: style, onMouseEnter: onEnter, onMouseLeave: onLeave, children: act.label }, i));
+                            return act.href ? (_jsx("a", { href: act.href, target: act.href.startsWith('http') ? '_blank' : undefined, rel: act.href.startsWith('http') ? 'noopener noreferrer' : undefined, className: className, style: actionStyle, children: act.label }, i)) : (_jsx("button", { type: "button", onClick: act.onClick, className: className, style: actionStyle, children: act.label }, i));
                         }) }))] })] }));
 }
 // ResourceLimitBanner — upgrade prompt when sandbox runs out of memory / a limit hits
@@ -855,7 +846,9 @@ export function CommitCardItem({ card, onRevert, }) {
             setIsReverting(false);
         }
     }, [canRevert, isReverting, isReverted, revertHash, card.hash, onRevert]);
-    return (_jsx("div", { style: { marginBottom: TIMELINE_ITEM_GAP }, children: _jsxs("div", { style: { marginBottom: '4px' }, children: [_jsxs("button", { type: "button", onClick: hasFiles ? () => setExpanded((e) => !e) : undefined, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+    return (_jsx("div", { style: { marginBottom: TIMELINE_ITEM_GAP }, children: _jsxs("div", { style: { marginBottom: '4px' }, children: [_jsxs("button", { 
+                    /* mol-bespoke-button: commit card header — expand/collapse disclosure for the commit's file list */
+                    type: "button", onClick: hasFiles ? () => setExpanded((e) => !e) : undefined, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
                         display: 'flex',
                         alignItems: 'flex-start',
                         gap: '6px',
@@ -884,7 +877,9 @@ export function CommitCardItem({ card, onRevert, }) {
                                             }, children: isRunning ? (t('ide.chat.committing', undefined, { defaultValue: 'Committing' })) : (_jsxs(_Fragment, { children: [t('ide.chat.commitLabel', undefined, { defaultValue: 'Commit' }), ' ', _jsx("code", { style: {
                                                             fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
                                                             fontSize: 'inherit',
-                                                        }, children: stripCommitCoauthorTrailer(card.message) })] })) }), canRevert && (_jsx("span", { role: "button", tabIndex: 0, title: isReverted
+                                                        }, children: stripCommitCoauthorTrailer(card.message) })] })) }), canRevert && (_jsx("span", { 
+                                            /* mol-bespoke-button: icon-only revert affordance — 20px (32px coarse) hit box inside a dense commit row, no label */
+                                            role: "button", tabIndex: 0, title: isReverted
                                                 ? t('ide.chat.redoCommit', undefined, {
                                                     defaultValue: 'Re-apply this commit',
                                                 })
@@ -952,7 +947,9 @@ export function CommitCardItem({ card, onRevert, }) {
  */
 function AuthorNameButton({ onClick, children, }) {
     const [hover, setHover] = useState(false);
-    return (_jsx("button", { type: "button", onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onFocus: () => setHover(true), onBlur: () => setHover(false), "data-mol-id": "chat-user-name-button", 
+    return (_jsx("button", { 
+        /* mol-bespoke-button: author name — a full <button> reset so the name renders byte-identical to the bold span it replaced; hover underline is the only affordance */
+        type: "button", onClick: onClick, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onFocus: () => setHover(true), onBlur: () => setHover(false), "data-mol-id": "chat-user-name-button", 
         // Full button reset so it is byte-identical to the former bold span at
         // rest — the underline affordance is the only visual change on hover.
         style: {
@@ -1579,7 +1576,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
         }
         onFileChange?.(path, content);
     }, [onFileChange, onFileOpen, autoFixCountdown]);
-    const { messages, isLoading, isRemoteStreaming, noteRemoteStreamEvent, error, errorMeta, mode, fastMode, streamingStatus, setMode, setFastMode, sendMessage, abort, clearHistory, editQueuedMessage, deleteQueuedMessage, clearQueuedForFile, applyRemoteEvent, reconcileHistory, retryCountdown, cancelRetry, } = useChat({
+    const { messages, isLoading, isRemoteStreaming, noteRemoteStreamEvent, error, errorMeta, mode, fastMode, streamingStatus, backgroundTasks, setMode, setFastMode, sendMessage, abort, clearHistory, editQueuedMessage, deleteQueuedMessage, clearQueuedForFile, applyRemoteEvent, reconcileHistory, retryCountdown, cancelRetry, } = useChat({
         endpoint,
         projectId,
         agentName,
@@ -5922,14 +5919,12 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                             textAlign: 'center',
                         }, children: [_jsx(Icon, { name: "logo-mark", size: 28, "aria-hidden": "true", style: { opacity: 0.5 } }), _jsx("span", { style: { maxWidth: 320 }, children: t('ide.chat.emptyState', undefined, {
                                     defaultValue: 'Describe what you want to build...',
-                                }) })] })), timeline.length > maxVisibleItems && (_jsx("div", { style: { textAlign: 'center', padding: '8px 0' }, children: _jsx("button", { onClick: () => setMaxVisibleItems((n) => n + 40), className: cm.cn(cm.textSize('xs'), cm.textMuted), style: {
-                                background: 'none',
-                                border: '1px solid currentColor',
-                                borderRadius: 4,
-                                padding: '4px 12px',
-                                cursor: 'pointer',
-                                opacity: 0.7,
-                            }, children: t('ide.chat.showEarlier', undefined, {
+                                }) })] })), timeline.length > maxVisibleItems && (_jsx("div", { style: { textAlign: 'center', padding: '8px 0' }, children: _jsx("button", { type: "button", "data-mol-id": "chat-show-earlier", onClick: () => setMaxVisibleItems((n) => n + 40), 
+                            // A quiet, non-committal timeline action — SECONDARY, the semantic
+                            // DESIGN.md reserves for what sits beside the real CTAs. Box model,
+                            // type scale and hover come from the ClassMap instead of the
+                            // hand-rolled 4px-radius currentColor frame this used to be.
+                            className: cm.cn(cm.button({ variant: 'solid', color: 'secondary', size: 'xs' }), cm.touchTargetCompact), children: t('ide.chat.showEarlier', undefined, {
                                 defaultValue: 'Show earlier messages',
                             }) }) })), renderedTimeline.map((item) => (_jsx(ChatItemBoundary, { onError: onRenderError, render: () => withTimelineTimestamp(item, (() => {
                             if (item.kind === 'commit')
@@ -5982,7 +5977,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     // from `count` if a caller passed none.
                                     const skillsLoadedLabel = item.card.text ||
                                         t('ide.chat.skills.loadedCount', { count: item.card.count ?? 0 }, { defaultValue: '🧠 Loaded {{count}} skills' });
-                                    return (_jsx("div", { style: { textAlign: 'center', marginBottom: TIMELINE_ITEM_GAP }, children: _jsx("button", { type: "button", "data-mol-id": "chat-skills-loaded", onClick: () => openPanelOverlay('skills'), className: cm.cn(cm.textSize('xs'), cm.textMuted), style: {
+                                    return (_jsx("div", { style: { textAlign: 'center', marginBottom: TIMELINE_ITEM_GAP }, children: _jsx("button", { 
+                                            /* mol-bespoke-button: skills-loaded notice — deliberately a plain centered phase message that happens to be clickable; a button frame would make it shout */
+                                            type: "button", "data-mol-id": "chat-skills-loaded", onClick: () => openPanelOverlay('skills'), className: cm.cn(cm.textSize('xs'), cm.textMuted), style: {
                                                 // Plain text like the build-phase notice — no border/fill/pill.
                                                 background: 'none',
                                                 border: 'none',
@@ -6121,7 +6118,7 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                 pointerEvents: showActivity ? 'auto' : 'none',
                                 transition: 'opacity 0.18s ease-out',
                             }, children: showActivity && (_jsx(StreamingIndicator, { label: label, tokens: streamingLike ? turnTokens : undefined, startedAt: streamingLike ? turnStartedAt : undefined })) }));
-                    })(), _jsx("div", { ref: messagesEndRef })] }), autoFixCountdown && (_jsxs("div", { className: cm.cn(cm.shrink0, cm.borderT), style: {
+                    })(), _jsx("div", { ref: messagesEndRef })] }), _jsx(BackgroundTasksStrip, { tasks: backgroundTasks }), autoFixCountdown && (_jsxs("div", { className: cm.cn(cm.shrink0, cm.borderT), style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 8,
@@ -6132,31 +6129,15 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                             ? t('ide.chat.autoFixPaused', undefined, { defaultValue: 'Auto-fix paused' })
                             : t('ide.chat.autoFixCountdown', { seconds: autoFixCountdown.secondsLeft }, {
                                 defaultValue: `Auto-fixing in ${autoFixCountdown.secondsLeft}s...`,
-                            }) }), autoFixCountdown.paused ? (_jsx("button", { type: "button", onClick: () => setAutoFixCountdown((prev) => prev ? { ...prev, paused: false, secondsLeft: 3 } : prev), style: {
-                            fontSize: 11,
-                            padding: '2px 8px',
-                            borderRadius: 4,
-                            border: '1px solid rgba(128,128,128,0.3)',
-                            background: 'transparent',
-                            color: 'inherit',
-                            cursor: 'pointer',
-                        }, children: t('ide.chat.autoFixResume', undefined, { defaultValue: 'Resume' }) })) : (_jsx("button", { type: "button", onClick: () => setAutoFixCountdown((prev) => (prev ? { ...prev, paused: true } : prev)), style: {
-                            fontSize: 11,
-                            padding: '2px 8px',
-                            borderRadius: 4,
-                            border: '1px solid rgba(128,128,128,0.3)',
-                            background: 'transparent',
-                            color: 'inherit',
-                            cursor: 'pointer',
-                        }, children: t('ide.chat.autoFixPause', undefined, { defaultValue: 'Pause' }) })), _jsx("button", { type: "button", onClick: () => setAutoFixCountdown(null), style: {
-                            fontSize: 11,
-                            padding: '2px 8px',
-                            borderRadius: 4,
-                            border: '1px solid rgba(128,128,128,0.3)',
-                            background: 'transparent',
-                            color: 'inherit',
-                            cursor: 'pointer',
-                        }, children: t('ide.chat.autoFixCancel', undefined, { defaultValue: 'Cancel' }) })] })), retryCountdown && (_jsxs("div", { className: cm.cn(cm.shrink0, cm.borderT), "data-mol-id": "chat-retry-countdown", style: {
+                            }) }), autoFixCountdown.paused ? (_jsx("button", { type: "button", "data-mol-id": "chat-autofix-resume", onClick: () => setAutoFixCountdown((prev) => prev ? { ...prev, paused: false, secondsLeft: 3 } : prev), 
+                        // This strip and the retry strip below it now share one button
+                        // treatment, so a user never sees four near-identical controls at
+                        // four slightly different sizes (they were 11px/4px-radius
+                        // hand-rolled frames with a hardcoded grey border). Semantics per
+                        // DESIGN.md's CTA table: Resume is the affirmative action
+                        // (primary), its sibling Pause is pause-like (warning), and the
+                        // Cancels are quiet dismissals (secondary).
+                        className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'xs' }), cm.touchTargetCompact), children: t('ide.chat.autoFixResume', undefined, { defaultValue: 'Resume' }) })) : (_jsx("button", { type: "button", "data-mol-id": "chat-autofix-pause", onClick: () => setAutoFixCountdown((prev) => (prev ? { ...prev, paused: true } : prev)), className: cm.cn(cm.button({ variant: 'solid', color: 'warning', size: 'xs' }), cm.touchTargetCompact), children: t('ide.chat.autoFixPause', undefined, { defaultValue: 'Pause' }) })), _jsx("button", { type: "button", "data-mol-id": "chat-autofix-cancel", onClick: () => setAutoFixCountdown(null), className: cm.cn(cm.button({ variant: 'solid', color: 'secondary', size: 'xs' }), cm.touchTargetCompact), children: t('ide.chat.autoFixCancel', undefined, { defaultValue: 'Cancel' }) })] })), retryCountdown && (_jsxs("div", { className: cm.cn(cm.shrink0, cm.borderT), "data-mol-id": "chat-retry-countdown", style: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 8,
@@ -6165,15 +6146,11 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                     background: 'rgba(234,179,8,0.06)',
                 }, children: [_jsx(Icon, { name: "exclamation-triangle", size: 14, "aria-hidden": "true", style: { flexShrink: 0, color: '#d4a017' } }), _jsx("span", { style: { flex: 1, opacity: 0.85 }, children: t('ide.chat.retryCountdown', { seconds: retryCountdown.secondsRemaining, attempt: retryCountdown.attempt }, {
                             defaultValue: `Server error — retrying in ${retryCountdown.secondsRemaining}s… (attempt ${retryCountdown.attempt})`,
-                        }) }), _jsx("button", { type: "button", "data-mol-id": "chat-retry-cancel", onClick: cancelRetry, style: {
-                            fontSize: 11,
-                            padding: '2px 8px',
-                            borderRadius: 4,
-                            border: '1px solid rgba(128,128,128,0.3)',
-                            background: 'transparent',
-                            color: 'inherit',
-                            cursor: 'pointer',
-                        }, children: t('ide.chat.autoFixCancel', undefined, { defaultValue: 'Cancel' }) })] })), _jsxs("div", { className: cm.shrink0, style: { position: 'relative' }, children: [relevantSkill && (_jsx(RelevantSkillSuggestion, { skill: relevantSkill, onLoad: loadSkill, onOpen: (s) => onFileOpen?.(s.path, { focus: true }), onDismiss: dismissRelevantSkill })), attachmentError && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textError), style: { padding: '4px 10px' }, children: attachmentError })), voiceError && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textError), style: { padding: '4px 10px' }, children: voiceError })), voiceNotice && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textMuted), style: { padding: '4px 10px' }, children: voiceNotice })), attachedFiles.length > 0 && (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', padding: '6px 10px 0' }, children: attachedFiles.map((f) => {
+                        }) }), _jsx("button", { type: "button", "data-mol-id": "chat-retry-cancel", onClick: cancelRetry, 
+                        // The same button as the auto-fix strip's Cancel directly above it —
+                        // the two strips mirror each other, and DESIGN.md's rule is that one
+                        // action keeps one colour on every surface.
+                        className: cm.cn(cm.button({ variant: 'solid', color: 'secondary', size: 'xs' }), cm.touchTargetCompact), children: t('ide.chat.autoFixCancel', undefined, { defaultValue: 'Cancel' }) })] })), _jsxs("div", { className: cm.shrink0, style: { position: 'relative' }, children: [relevantSkill && (_jsx(RelevantSkillSuggestion, { skill: relevantSkill, onLoad: loadSkill, onOpen: (s) => onFileOpen?.(s.path, { focus: true }), onDismiss: dismissRelevantSkill })), attachmentError && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textError), style: { padding: '4px 10px' }, children: attachmentError })), voiceError && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textError), style: { padding: '4px 10px' }, children: voiceError })), voiceNotice && (_jsx("div", { className: cm.cn(cm.textSize('xs'), cm.textMuted), style: { padding: '4px 10px' }, children: voiceNotice })), attachedFiles.length > 0 && (_jsx("div", { style: { display: 'flex', flexWrap: 'wrap', gap: '4px', padding: '6px 10px 0' }, children: attachedFiles.map((f) => {
                             const key = f.path ?? f.filename;
                             return (_jsxs("span", { className: cm.cn(cm.surfaceSecondary, cm.textSize('xs')), style: {
                                     display: 'inline-flex',
@@ -6181,7 +6158,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     gap: '4px',
                                     borderRadius: '4px',
                                     padding: '2px 6px',
-                                }, children: [f.previewUrl && (_jsx("img", { src: f.previewUrl, alt: f.filename, style: { width: 18, height: 18, objectFit: 'cover', borderRadius: 2 } })), _jsx("span", { style: { fontFamily: 'monospace', opacity: 0.85 }, children: f.path ? f.path.split('/').pop() : f.filename }), f.size > 0 && (_jsx("span", { className: cm.textMuted, style: { fontSize: 10 }, children: formatSize(f.size) })), _jsx("button", { type: "button", onClick: () => removeAttachment(key), style: {
+                                }, children: [f.previewUrl && (_jsx("img", { src: f.previewUrl, alt: f.filename, style: { width: 18, height: 18, objectFit: 'cover', borderRadius: 2 } })), _jsx("span", { style: { fontFamily: 'monospace', opacity: 0.85 }, children: f.path ? f.path.split('/').pop() : f.filename }), f.size > 0 && (_jsx("span", { className: cm.textMuted, style: { fontSize: 10 }, children: formatSize(f.size) })), _jsx("button", { 
+                                        /* mol-bespoke-button: attachment chip remove — icon-only x inside a 2px-padded chip, 32px coarse hit box */
+                                        type: "button", onClick: () => removeAttachment(key), style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',
@@ -6507,7 +6486,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                     textOverflow: 'ellipsis',
                                                 }, children: [_jsx("option", { value: "name", children: t('ide.chat.models.colName', undefined, { defaultValue: 'Model' }) }), _jsx("option", { value: "context", children: t('ide.chat.models.colContext', undefined, { defaultValue: 'Context' }) }), _jsx("option", { value: "cost", children: t('ide.chat.models.colUsageRate', undefined, { defaultValue: 'Usage rate' }) }), _jsx("option", { value: "cutoff", children: t('ide.chat.models.colCutoff', undefined, { defaultValue: 'Cutoff' }) }), _jsx("option", { value: "free", children: t('ide.chat.models.colFree', undefined, { defaultValue: 'Free' }) }), _jsx("option", { value: "region", children: t('ide.chat.models.colRegion', undefined, { defaultValue: 'Region' }) })] }), _jsx(Tooltip, { content: t('ide.chat.modelSortDirection', undefined, {
                                                     defaultValue: 'Toggle sort direction',
-                                                }), placement: "top", children: _jsx("button", { type: "button", "data-mol-id": "model-sort-direction", "aria-label": t('ide.chat.modelSortDirection', undefined, {
+                                                }), placement: "top", children: _jsx("button", { 
+                                                    /* mol-bespoke-button: icon-only sort-direction toggle — 24px square matched to the adjacent selects' height */
+                                                    type: "button", "data-mol-id": "model-sort-direction", "aria-label": t('ide.chat.modelSortDirection', undefined, {
                                                         defaultValue: 'Toggle sort direction',
                                                     }), onClick: () => setModelSort((s) => ({
                                                         ...s,
@@ -6623,14 +6604,18 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 : isLight
                                                     ? 'rgb(220,38,38)'
                                                     : 'rgb(248,113,113)';
-                                        return (_jsxs(Fragment, { children: [dividerBefore && (_jsx("button", { type: "button", onClick: () => setShowDeprecated((s) => !s), className: cm.cn(cm.textSize('xs'), cm.textMuted, cm.w('full')), style: {
+                                        return (_jsxs(Fragment, { children: [dividerBefore && (_jsx("button", { 
+                                                    /* mol-bespoke-button: older-models collapse row — full-width disclosure row inside the model list */
+                                                    type: "button", onClick: () => setShowDeprecated((s) => !s), className: cm.cn(cm.textSize('xs'), cm.textMuted, cm.w('full')), style: {
                                                         padding: '6px 12px',
                                                         border: 'none',
                                                         borderTop: '1px solid rgba(128,128,128,0.12)',
                                                         background: 'rgba(128,128,128,0.04)',
                                                         cursor: 'pointer',
                                                         textAlign: 'left',
-                                                    }, children: t('ide.chat.olderModelsCollapse', { count: deprecatedModels.length }, { defaultValue: 'Older models ⌃ ({{count}})' }) })), _jsxs("button", { type: "button", onClick: () => {
+                                                    }, children: t('ide.chat.olderModelsCollapse', { count: deprecatedModels.length }, { defaultValue: 'Older models ⌃ ({{count}})' }) })), _jsxs("button", { 
+                                                    /* mol-bespoke-button: model row — full-width list item in the model picker */
+                                                    type: "button", onClick: () => {
                                                         if (lockReason === 'paid') {
                                                             setModelPicker(null);
                                                             setInputValue('');
@@ -6882,14 +6867,18 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                                                             }, children: [_jsx(RegionFlag, { code: rMeta?.flagCode ?? r, height: 12 }), _jsx("span", { children: rLabel }), _jsxs("span", { className: active ? undefined : cm.textMuted, style: { fontSize: '10px' }, children: ["(", t('ide.chat.models.usageRateValue', { rate: rRate }, { defaultValue: '×{{rate}}' }), ")"] })] }, r));
                                                                                     }) }))] }));
                                                                     })()] }))] })] }, model.id));
-                                    }), !showDeprecated && deprecatedModels.length > 0 && (_jsx("button", { type: "button", onClick: () => setShowDeprecated(true), className: cm.cn(cm.textSize('xs'), cm.textMuted, cm.w('full')), style: {
+                                    }), !showDeprecated && deprecatedModels.length > 0 && (_jsx("button", { 
+                                        /* mol-bespoke-button: older-models expand row — full-width disclosure row inside the model list */
+                                        type: "button", onClick: () => setShowDeprecated(true), className: cm.cn(cm.textSize('xs'), cm.textMuted, cm.w('full')), style: {
                                             padding: '6px 12px',
                                             border: 'none',
                                             borderTop: '1px solid rgba(128,128,128,0.12)',
                                             background: 'rgba(128,128,128,0.04)',
                                             cursor: 'pointer',
                                             textAlign: 'left',
-                                        }, children: t('ide.chat.olderModelsExpand', { count: deprecatedModels.length }, { defaultValue: 'Older models ⌄ ({{count}})' }) }))] })), onManageCustomModels && (_jsx("button", { type: "button", "data-mol-id": "chat-model-manage-custom", onClick: () => {
+                                        }, children: t('ide.chat.olderModelsExpand', { count: deprecatedModels.length }, { defaultValue: 'Older models ⌄ ({{count}})' }) }))] })), onManageCustomModels && (_jsx("button", { 
+                                /* mol-bespoke-button: manage-custom-models footer — anchored full-width footer row of the model list, keyboard-indexed with the rows */
+                                type: "button", "data-mol-id": "chat-model-manage-custom", onClick: () => {
                                     const manageMode = modelPicker.mode === 'plan' || modelPicker.mode === 'execute'
                                         ? modelPicker.mode
                                         : liveModelMode;
@@ -6966,7 +6955,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                     overflow: 'hidden',
                                                     whiteSpace: 'nowrap',
                                                     textOverflow: 'ellipsis',
-                                                }, children: effortPickerModeOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }), _jsx("button", { type: "button", "data-mol-id": "chat-effort-picker-close", onClick: () => setEffortPicker(null), style: {
+                                                }, children: effortPickerModeOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) })] }), _jsx("button", { 
+                                        /* mol-bespoke-button: icon-only picker close — header x, no label */
+                                        type: "button", "data-mol-id": "chat-effort-picker-close", onClick: () => setEffortPicker(null), style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',
@@ -7041,7 +7032,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     alignItems: 'center',
                                 }, children: [_jsx("span", { children: t('ide.chat.notificationSounds', undefined, {
                                             defaultValue: 'Notification sounds',
-                                        }) }), _jsx("button", { type: "button", onClick: () => setSoundsPicker(null), style: {
+                                        }) }), _jsx("button", { 
+                                        /* mol-bespoke-button: icon-only picker close — header x, no label */
+                                        type: "button", onClick: () => setSoundsPicker(null), style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',
@@ -7075,7 +7068,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 defaultValue: SOUND_MODE_LABELS[allModes[0]],
                                             })
                                             : t('ide.chat.soundMode.mixed', undefined, { defaultValue: 'mixed' });
-                                        return (_jsxs("button", { type: "button", onClick: () => void cycleSoundMode('all'), onMouseEnter: (e) => {
+                                        return (_jsxs("button", { 
+                                            /* mol-bespoke-button: sounds "All" row — full-width list item in the /sounds popup */
+                                            type: "button", onClick: () => void cycleSoundMode('all'), onMouseEnter: (e) => {
                                                 ;
                                                 e.currentTarget.style.background = 'rgba(128,128,128,0.15)';
                                             }, onMouseLeave: (e) => {
@@ -7185,7 +7180,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 ? t('ide.chat.scripts.heading', undefined, { defaultValue: 'Scripts' })
                                                 : panelOverlay === 'tests'
                                                     ? t('ide.tests.heading', undefined, { defaultValue: 'Tests' })
-                                                    : t('ide.chat.settings.heading', undefined, { defaultValue: 'Settings' }) }), _jsx("button", { type: "button", "data-mol-id": "panel-overlay-close", "aria-label": t('ide.chat.closeOverlay', undefined, { defaultValue: 'Close' }), onClick: () => setPanelOverlay(null), style: {
+                                                    : t('ide.chat.settings.heading', undefined, { defaultValue: 'Settings' }) }), _jsx("button", { 
+                                        /* mol-bespoke-button: icon-only overlay close — header x, no label */
+                                        type: "button", "data-mol-id": "panel-overlay-close", "aria-label": t('ide.chat.closeOverlay', undefined, { defaultValue: 'Close' }), onClick: () => setPanelOverlay(null), style: {
                                             background: 'none',
                                             border: 'none',
                                             cursor: 'pointer',
@@ -7306,37 +7303,23 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 resize: 'vertical',
                                                 color: 'inherit',
                                                 fontFamily: 'inherit',
-                                            } }), _jsxs("div", { style: { display: 'flex', gap: 6, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", onClick: () => setEditingQueuedId(null), className: cm.textSize('xs'), style: {
-                                                        padding: '4px 12px',
-                                                        border: `1px solid ${isLight ? '#d1d9e0' : 'rgba(255,255,255,0.1)'}`,
-                                                        borderRadius: '4px',
-                                                        background: 'transparent',
-                                                        color: 'inherit',
-                                                        cursor: 'pointer',
-                                                        ...(isCoarse ? { minHeight: 32 } : {}),
-                                                    }, children: t('common.cancel', undefined, { defaultValue: 'Cancel' }) }), _jsx("button", { type: "button", onClick: () => {
+                                            } }), _jsxs("div", { style: { display: 'flex', gap: 6, justifyContent: 'flex-end' }, children: [_jsx("button", { type: "button", "data-mol-id": "chat-queued-edit-cancel", onClick: () => setEditingQueuedId(null), className: cm.cn(cm.button({ variant: 'solid', color: 'secondary', size: 'xs' }), cm.touchTargetCompact), children: t('common.cancel', undefined, { defaultValue: 'Cancel' }) }), _jsx("button", { type: "button", "data-mol-id": "chat-queued-edit-save", onClick: () => {
                                                         const trimmed = editingQueuedText.trim();
                                                         if (trimmed)
                                                             editQueuedMessage(qm.id, trimmed);
                                                         else
                                                             deleteQueuedMessage(qm.id);
                                                         setEditingQueuedId(null);
-                                                    }, className: cm.textSize('xs'), style: {
-                                                        padding: '4px 12px',
-                                                        border: `1px solid ${isLight ? '#d1d9e0' : 'rgba(255,255,255,0.1)'}`,
-                                                        borderRadius: '4px',
-                                                        background: 'rgba(128,128,128,0.1)',
-                                                        color: 'inherit',
-                                                        cursor: 'pointer',
-                                                        ...(isCoarse ? { minHeight: 32 } : {}),
-                                                    }, children: t('common.save', undefined, { defaultValue: 'Save' }) })] })] }, qm.id)) : (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [_jsx("span", { title: qm.content, className: cm.textSize('sm'), style: {
+                                                    }, className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'xs' }), cm.touchTargetCompact), children: t('common.save', undefined, { defaultValue: 'Save' }) })] })] }, qm.id)) : (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [_jsx("span", { title: qm.content, className: cm.textSize('sm'), style: {
                                                 flex: 1,
                                                 minWidth: 0,
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
                                                 whiteSpace: 'nowrap',
                                                 opacity: 0.8,
-                                            }, children: qm.content }), _jsx("button", { type: "button", title: t('ide.chat.editQueued', undefined, { defaultValue: 'Edit' }), onClick: () => {
+                                            }, children: qm.content }), _jsx("button", { 
+                                            /* mol-bespoke-button: icon-only edit affordance — 22px (32px coarse) pencil on a dense queued-message row */
+                                            type: "button", title: t('ide.chat.editQueued', undefined, { defaultValue: 'Edit' }), onClick: () => {
                                                 setEditingQueuedId(qm.id);
                                                 setEditingQueuedText(qm.content);
                                             }, style: {
@@ -7360,7 +7343,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                             }, onMouseLeave: (e) => {
                                                 e.currentTarget.style.opacity = '0.5';
                                                 e.currentTarget.style.background = 'none';
-                                            }, children: _jsx(Icon, { name: "pencil", size: 13, "aria-hidden": "true" }) }), _jsx("button", { type: "button", title: t('ide.chat.deleteQueued', undefined, { defaultValue: 'Delete' }), onClick: () => deleteQueuedMessage(qm.id), style: {
+                                            }, children: _jsx(Icon, { name: "pencil", size: 13, "aria-hidden": "true" }) }), _jsx("button", { 
+                                            /* mol-bespoke-button: icon-only delete affordance — 22px (32px coarse) trash on a dense queued-message row, theme error token */
+                                            type: "button", title: t('ide.chat.deleteQueued', undefined, { defaultValue: 'Delete' }), onClick: () => deleteQueuedMessage(qm.id), style: {
                                                 display: 'inline-flex',
                                                 alignItems: 'center',
                                                 justifyContent: 'center',
@@ -7370,18 +7355,23 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 border: 'none',
                                                 borderRadius: 4,
                                                 background: 'none',
-                                                color: isLight ? 'rgb(185,28,28)' : 'rgb(248,113,113)',
+                                                // Theme ERROR token, not a per-theme literal — the token
+                                                // already resolves per theme.
+                                                color: 'var(--mol-color-error, #dc2626)',
                                                 opacity: 0.6,
                                                 cursor: 'pointer',
                                                 padding: 0,
                                                 transition: 'opacity 100ms, background 100ms',
                                             }, onMouseEnter: (e) => {
                                                 e.currentTarget.style.opacity = '1';
-                                                e.currentTarget.style.background = 'rgba(220,38,38,0.12)';
+                                                e.currentTarget.style.background =
+                                                    'color-mix(in srgb, var(--mol-color-error, #dc2626) 12%, transparent)';
                                             }, onMouseLeave: (e) => {
                                                 e.currentTarget.style.opacity = '0.6';
                                                 e.currentTarget.style.background = 'none';
-                                            }, children: _jsx(Icon, { name: "trash", size: 13, "aria-hidden": "true" }) }), !isLoading && (_jsx("button", { type: "button", title: t('ide.chat.sendQueued', undefined, { defaultValue: 'Send' }), onClick: () => {
+                                            }, children: _jsx(Icon, { name: "trash", size: 13, "aria-hidden": "true" }) }), !isLoading && (_jsx("button", { 
+                                            /* mol-bespoke-button: icon-only send affordance — 22px (32px coarse) arrow on a dense queued-message row, theme success token */
+                                            type: "button", title: t('ide.chat.sendQueued', undefined, { defaultValue: 'Send' }), onClick: () => {
                                                 const content = qm.content;
                                                 deleteQueuedMessage(qm.id);
                                                 sendMessage(content);
@@ -7395,14 +7385,16 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                                 border: 'none',
                                                 borderRadius: 4,
                                                 background: 'none',
-                                                color: isLight ? 'rgb(21,128,61)' : 'rgb(74,222,128)',
+                                                // Theme SUCCESS token, not a per-theme literal.
+                                                color: 'var(--mol-color-success, #16a34a)',
                                                 opacity: 0.7,
                                                 cursor: 'pointer',
                                                 padding: 0,
                                                 transition: 'opacity 100ms, background 100ms',
                                             }, onMouseEnter: (e) => {
                                                 e.currentTarget.style.opacity = '1';
-                                                e.currentTarget.style.background = 'rgba(34,197,94,0.14)';
+                                                e.currentTarget.style.background =
+                                                    'color-mix(in srgb, var(--mol-color-success, #16a34a) 14%, transparent)';
                                             }, onMouseLeave: (e) => {
                                                 e.currentTarget.style.opacity = '0.7';
                                                 e.currentTarget.style.background = 'none';
@@ -7456,39 +7448,27 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         const commitBusy = commitState?.status === 'committing' ||
                                             commitState?.status === 'committed' ||
                                             autoCommitHeld;
-                                        return (_jsx("button", { type: "button", onClick: (e) => {
+                                        return (_jsx("button", { type: "button", "data-mol-id": "chat-commit-button", onClick: (e) => {
                                                 e.stopPropagation();
                                                 if (commitBusy)
                                                     return;
                                                 handleCommit();
-                                            }, disabled: commitBusy, onMouseEnter: (e) => {
-                                                if (!commitBusy) {
-                                                    e.currentTarget.style.background = 'rgba(64,112,224,0.3)';
-                                                    e.currentTarget.style.borderColor = 'rgba(64,112,224,0.65)';
-                                                    e.currentTarget.style.color = '#6090f0';
-                                                }
-                                            }, onMouseLeave: (e) => {
-                                                e.currentTarget.style.background = 'rgba(64,112,224,0.2)';
-                                                e.currentTarget.style.borderColor = 'rgba(64,112,224,0.4)';
-                                                e.currentTarget.style.color = '#4070e0';
-                                            }, style: {
-                                                fontSize: 12,
-                                                padding: '4px 10px',
-                                                // Touch floor for this inline bar action (36px, matching
-                                                // the notice-card buttons).
-                                                ...(isCoarse ? { minHeight: 36 } : {}),
-                                                borderRadius: 6,
-                                                border: '1px solid rgba(64,112,224,0.4)',
-                                                background: 'rgba(64,112,224,0.2)',
-                                                color: '#4070e0',
-                                                cursor: commitBusy ? 'not-allowed' : 'pointer',
-                                                opacity: commitBusy ? 0.5 : 1,
-                                                transition: 'background 100ms, border-color 100ms, color 100ms',
-                                            }, children: commitState?.status === 'committing'
+                                            }, disabled: commitBusy, 
+                                            // The SAME design-system button as the tests bar's action
+                                            // one strip above (and as the green AutoCommitBadge that
+                                            // replaces this one when auto-commit is on) — only the
+                                            // semantic colour differs. The CVA owns hover/active/focus
+                                            // and the disabled look, so there is nothing to hand-roll:
+                                            // this used to be an inline 12px/6px-radius button with
+                                            // hardcoded rgba(64,112,224,*) and hand-written hover, and
+                                            // it visibly mismatched the 13px/3px tests-bar button.
+                                            className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'xs' }), cm.touchTargetCompact), children: commitState?.status === 'committing'
                                                 ? t('ide.chat.committing')
                                                 : t('ide.chat.commit') }));
                                     })())] }), commitBarExpanded && (_jsx("div", { style: { marginTop: 4, paddingLeft: 16, maxHeight: 200, overflowY: 'auto' }, children: pendingFiles.map((f) => (_jsxs("button", { type: "button", onClick: () => onFileDiff?.(f.path), onMouseEnter: (e) => {
-                                        e.currentTarget.style.color = '#6090f0';
+                                        // Theme PRIMARY token, not a literal blue — the row sits in
+                                        // the same bar as the commit button, which is now primary.
+                                        e.currentTarget.style.color = 'var(--mol-color-primary, #4070e0)';
                                     }, onMouseLeave: (e) => {
                                         e.currentTarget.style.color = '';
                                     }, style: {
@@ -7510,7 +7490,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         width: '100%',
                                         overflow: 'hidden',
                                         whiteSpace: 'nowrap',
-                                    }, className: cm.textMuted, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: f.path }), (!!f.additions || !!f.deletions) && (_jsxs("span", { style: { marginLeft: 'auto', flexShrink: 0, fontSize: 10, opacity: 0.8 }, children: [!!f.additions && (_jsxs("span", { style: { color: '#3fb950' }, children: ["+", f.additions] })), !!f.additions && !!f.deletions && ' ', !!f.deletions && (_jsxs("span", { style: { color: '#f85149' }, children: ["-", f.deletions] }))] })), onFileRevert && (_jsx("span", { role: "button", tabIndex: 0, title: t('ide.chat.revertFile', undefined, {
+                                    }, className: cm.textMuted, children: [_jsx("span", { style: { overflow: 'hidden', textOverflow: 'ellipsis' }, children: f.path }), (!!f.additions || !!f.deletions) && (_jsxs("span", { style: { marginLeft: 'auto', flexShrink: 0, fontSize: 10, opacity: 0.8 }, children: [!!f.additions && (_jsxs("span", { style: { color: '#3fb950' }, children: ["+", f.additions] })), !!f.additions && !!f.deletions && ' ', !!f.deletions && (_jsxs("span", { style: { color: '#f85149' }, children: ["-", f.deletions] }))] })), onFileRevert && (_jsx("span", { 
+                                            /* mol-bespoke-button: icon-only per-file revert affordance — 18px (32px coarse) hit box on a dense file row */
+                                            role: "button", tabIndex: 0, title: t('ide.chat.revertFile', undefined, {
                                                 defaultValue: 'Revert to last commit',
                                             }), onClick: (e) => {
                                                 e.stopPropagation();
@@ -7605,7 +7587,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                     alignItems: 'center',
                                     marginTop: '6px',
                                     gap: '4px',
-                                }, children: [canEdit !== false && (_jsx("button", { type: "button", onClick: () => {
+                                }, children: [canEdit !== false && (_jsx("button", { 
+                                        /* mol-bespoke-button: icon-only composer toggle — shares the composer row's 24px / 40x32-coarse icon box model */
+                                        type: "button", onClick: () => {
                                             const newMode = mode === 'plan' ? 'execute' : 'plan';
                                             setMode(newMode);
                                             http
@@ -7650,7 +7634,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         }, onMouseLeave: (e) => {
                                             if (mode !== 'plan')
                                                 e.currentTarget.style.opacity = '0.4';
-                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" }) }) })), fastModeAvailable && canEdit !== false && (_jsx("button", { type: "button", "data-mol-id": "chat-fast-mode-toggle", disabled: !canEdit, onClick: () => {
+                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" }) }) })), fastModeAvailable && canEdit !== false && (_jsx("button", { 
+                                        /* mol-bespoke-button: icon-only composer toggle — shares the composer row's 24px / 40x32-coarse icon box model */
+                                        type: "button", "data-mol-id": "chat-fast-mode-toggle", disabled: !canEdit, onClick: () => {
                                             const next = !fastMode;
                                             setFastMode(next);
                                             http
@@ -7693,7 +7679,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         }, onMouseLeave: (e) => {
                                             if (!fastMode)
                                                 e.currentTarget.style.opacity = '0.4';
-                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M9.504.43a.75.75 0 0 1 .584.859l-.828 4.211h4.49a.75.75 0 0 1 .573 1.234l-7.25 8.5a.75.75 0 0 1-1.32-.658l.828-4.211H2.09a.75.75 0 0 1-.573-1.234l7.25-8.5a.75.75 0 0 1 .737-.201Z" }) }) })), _jsx("button", { type: "button", "data-mol-id": "chat-mic-button", onClick: toggleVoice, title: t('ide.chat.voice', undefined, {
+                                        }, children: _jsx("svg", { width: "14", height: "14", viewBox: "0 0 16 16", fill: "currentColor", children: _jsx("path", { d: "M9.504.43a.75.75 0 0 1 .584.859l-.828 4.211h4.49a.75.75 0 0 1 .573 1.234l-7.25 8.5a.75.75 0 0 1-1.32-.658l.828-4.211H2.09a.75.75 0 0 1-.573-1.234l7.25-8.5a.75.75 0 0 1 .737-.201Z" }) }) })), _jsx("button", { 
+                                        /* mol-bespoke-button: icon-only composer toggle — shares the composer row's 24px / 40x32-coarse icon box model */
+                                        type: "button", "data-mol-id": "chat-mic-button", onClick: toggleVoice, title: t('ide.chat.voice', undefined, {
                                             defaultValue: isListening ? 'Stop dictation' : 'Dictate',
                                         }), style: {
                                             display: 'inline-flex',
@@ -7715,7 +7703,9 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                         }, onMouseLeave: (e) => {
                                             if (!isListening)
                                                 e.currentTarget.style.opacity = '0.4';
-                                        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", style: { display: 'block' }, children: [_jsx("rect", { x: "6", y: "1", width: "4", height: "8", rx: "2", fill: isListening ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M4 7v1a4 4 0 008 0V7", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }), _jsx("line", { x1: "8", y1: "12", x2: "8", y2: "15", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "15", x2: "10", y2: "15", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })] }) }), canEdit !== false && (_jsx("button", { type: "button", onClick: () => fileInputRef.current?.click(), title: t('ide.chat.attachFile', undefined, { defaultValue: 'Attach file' }), style: {
+                                        }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "16", height: "16", style: { display: 'block' }, children: [_jsx("rect", { x: "6", y: "1", width: "4", height: "8", rx: "2", fill: isListening ? 'currentColor' : 'none', stroke: "currentColor", strokeWidth: "1.25" }), _jsx("path", { d: "M4 7v1a4 4 0 008 0V7", fill: "none", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }), _jsx("line", { x1: "8", y1: "12", x2: "8", y2: "15", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" }), _jsx("line", { x1: "6", y1: "15", x2: "10", y2: "15", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round" })] }) }), canEdit !== false && (_jsx("button", { 
+                                        /* mol-bespoke-button: icon-only composer affordance — shares the composer row's 24px / 40x32-coarse icon box model */
+                                        type: "button", onClick: () => fileInputRef.current?.click(), title: t('ide.chat.attachFile', undefined, { defaultValue: 'Attach file' }), style: {
                                             display: 'inline-flex',
                                             alignItems: 'center',
                                             justifyContent: 'center',
@@ -7892,46 +7882,27 @@ function ChatInner({ projectId, endpoint, initialMessage, onInitialMessageSent,
                                             display: 'flex',
                                             gap: '4px',
                                             alignItems: 'center',
-                                        }, children: [canEdit !== false && (isLoading || isRemoteStreaming) && (_jsx("button", { type: "button", onClick: handleAbort, title: t('ide.chat.stop', undefined, { defaultValue: 'Stop' }), onMouseEnter: (e) => {
-                                                    e.currentTarget.style.background = 'rgba(248,81,73,0.3)';
-                                                    e.currentTarget.style.borderColor = 'rgba(248,81,73,0.65)';
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.background = 'rgba(248,81,73,0.2)';
-                                                    e.currentTarget.style.borderColor = 'rgba(248,81,73,0.4)';
-                                                }, style: {
-                                                    padding: '5px 10px',
-                                                    borderRadius: 6,
-                                                    border: '1px solid rgba(248,81,73,0.4)',
-                                                    background: 'rgba(248,81,73,0.2)',
-                                                    color: '#f85149',
-                                                    cursor: 'pointer',
-                                                    transition: 'background 100ms, border-color 100ms',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    // Touch hit-area floor for the composer's action buttons.
+                                        }, children: [canEdit !== false && (isLoading || isRemoteStreaming) && (_jsx("button", { type: "button", "data-mol-id": "chat-stop-button", onClick: handleAbort, title: t('ide.chat.stop', undefined, { defaultValue: 'Stop' }), 
+                                                // The composer's two action buttons (Stop, Send) are design-system
+                                                // buttons in the ERROR and PRIMARY semantics — same radius, height
+                                                // and states as every other action button in the panel. They were a
+                                                // matched pair of hand-rolled 6px-radius frames with hardcoded
+                                                // rgba(248,81,73,*) / rgba(96,160,240,*) and hand-written hover.
+                                                className: cm.button({ variant: 'solid', color: 'error', size: 'xs' }), style: {
+                                                    // The composer's documented touch box: wide for hit spacing but
+                                                    // deliberately flat (40×32) so the row doesn't balloon. This is the
+                                                    // one thing the ClassMap can't express here, and the reason this is
+                                                    // NOT cm.touchTargetCompact — a 36px floor would out-grow the
+                                                    // neighbouring icon buttons.
                                                     ...(isCoarse ? { minWidth: 40, minHeight: 32 } : {}),
-                                                }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { display: 'block' }, children: _jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1.5", fill: "currentColor" }) }) })), _jsx("button", { type: "button", onClick: () => void handleSubmit(), title: t('ide.chat.send', undefined, { defaultValue: 'Send' }), disabled: !hasInput && attachedFiles.length === 0, onMouseEnter: (e) => {
-                                                    if (!e.currentTarget.disabled) {
-                                                        e.currentTarget.style.background = 'rgba(96,160,240,0.3)';
-                                                        e.currentTarget.style.borderColor = 'rgba(96,160,240,0.7)';
-                                                    }
-                                                }, onMouseLeave: (e) => {
-                                                    e.currentTarget.style.background = 'rgba(96,160,240,0.2)';
-                                                    e.currentTarget.style.borderColor = 'rgba(96,160,240,0.5)';
-                                                }, style: {
-                                                    padding: '5px 10px',
-                                                    borderRadius: 6,
-                                                    border: '1px solid rgba(96,160,240,0.5)',
-                                                    background: 'rgba(96,160,240,0.2)',
-                                                    color: '#6aa3f0',
-                                                    cursor: !hasInput && attachedFiles.length === 0 ? 'not-allowed' : 'pointer',
-                                                    opacity: !hasInput && attachedFiles.length === 0 ? 0.5 : 1,
-                                                    transition: 'background 100ms, border-color 100ms, color 100ms',
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                    // Touch hit-area floor for the composer's action buttons.
+                                                }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { display: 'block' }, children: _jsx("rect", { x: "2", y: "2", width: "8", height: "8", rx: "1.5", fill: "currentColor" }) }) })), _jsx("button", { type: "button", "data-mol-id": "chat-send-button", onClick: () => void handleSubmit(), title: t('ide.chat.send', undefined, { defaultValue: 'Send' }), disabled: !hasInput && attachedFiles.length === 0, 
+                                                // Stop's twin in the PRIMARY semantic. The real `disabled`
+                                                // attribute above carries the muted/inert look via the CVA
+                                                // (`disabled:opacity-50 disabled:pointer-events-none`), so the
+                                                // hand-rolled cursor/opacity pair is gone with the rest.
+                                                className: cm.button({ variant: 'solid', color: 'primary', size: 'xs' }), style: {
+                                                    // See the Stop button: the composer's documented flat 40×32 touch
+                                                    // box, which the ClassMap can't express.
                                                     ...(isCoarse ? { minWidth: 40, minHeight: 32 } : {}),
                                                 }, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", style: { display: 'block' }, children: _jsx("path", { d: "M 2.5,6.5 L 6,3 L 9.5,6.5 M 6,3.5 L 6,10", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] })] })] }), reportModal && (_jsx(ReportModal, { projectId: projectId, conversationId: conversationId, initialTitle: reportModal.title, productName: productName, appVersion: version || APP_VERSION, onClose: () => setReportModal(null), onSubmitted: (result) => {
                     setReportModal(null);
@@ -8091,7 +8062,9 @@ export function ChatPanel({ projectId, endpoint, initialMessage, onInitialMessag
                     height: isCoarse ? undefined : '33px',
                     minHeight: '33px',
                     zIndex: 10,
-                }, children: [_jsxs("button", { type: "button", onClick: handleToggleDropdown, className: cm.cn(cm.textSize('xs'), cm.textMuted), onMouseEnter: (e) => {
+                }, children: [_jsxs("button", { 
+                        /* mol-bespoke-button: conversation picker — the header title row, a full-width disclosure for the history dropdown */
+                        type: "button", onClick: handleToggleDropdown, className: cm.cn(cm.textSize('xs'), cm.textMuted), onMouseEnter: (e) => {
                             const s = e.currentTarget.querySelector('span');
                             if (s)
                                 s.style.opacity = '1';