@molecule/app-ide-react 1.16.0 → 1.17.0

package/dist/components/ToolCallCard.js

@@ -5,7 +5,7 @@ import { useThemeMode } from '@molecule/app-react';
 import { getClassMap } from '@molecule/app-ui';
 import { useCoarsePointer, useNarrowViewport } from '../hooks/useViewport.js';
 import { MarkdownContent } from './MarkdownContent.js';
-import { basename, extractFilePath, fileDiffStats, isSkippedByUser, moleculeDocPath, normalizeAskUserInput, num, str, toolLabel, toolSummary, } from './tool-call-utilities.js';
+import { basename, extractFilePath, fileDiffStats, isSkippedByUser, moleculeDocPath, normalizeAskUserInput, normalizeTaskListInput, num, parseJudgeVerdict, str, toolLabel, toolSummary, } from './tool-call-utilities.js';
 /**
  * Normalize a model-authored string for display: models sometimes double-escape
  * tool arguments, so a literal "\n"/"\t"/"\r" (backslash + letter) ends up in
@@ -442,6 +442,145 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
                     setExpanded((e) => !e);
                 }
                 : undefined;
+    // ── update_task_list: the working checklist the user watches ───────────────
+    if (name === 'update_task_list') {
+        const todos = normalizeTaskListInput(input);
+        const completed = todos.filter((todo) => todo.status === 'completed').length;
+        const borderClr = isLight ? '#d0d7de' : '#3d444d';
+        const statusGlyph = (status) => status === 'completed' ? '✓' : status === 'in_progress' ? '◐' : '○';
+        const statusColor = (status) => status === 'completed'
+            ? '#3fb950'
+            : status === 'in_progress'
+                ? isLight
+                    ? '#2563eb'
+                    : '#60a5fa'
+                : isLight
+                    ? '#848d97'
+                    : '#6e7681';
+        return (_jsxs("div", { className: className, "data-mol-id": "task-list-card", style: {
+                marginBottom: '8px',
+                marginTop: '8px',
+                borderRadius: '8px',
+                border: `1px solid ${borderClr}`,
+                background: isLight ? '#f6f8fa' : 'rgba(255,255,255,0.04)',
+                overflow: 'hidden',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: '8px',
+                        padding: '6px 12px',
+                        borderBottom: todos.length > 0 ? `1px solid ${borderClr}` : 'none',
+                        fontSize: '12px',
+                        fontWeight: 600,
+                    }, children: [_jsx("span", { children: t('ide.chat.taskListTitle', undefined, { defaultValue: 'Working plan' }) }), todos.length > 0 && (_jsx("span", { style: { fontWeight: 400, opacity: 0.65 }, children: t('ide.chat.taskListProgress', { done: completed, total: todos.length }, {
+                                defaultValue: '{{done}} of {{total}} done',
+                            }) }))] }), todos.map((todo, i) => (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'flex-start',
+                        gap: '8px',
+                        padding: '4px 12px',
+                        borderTop: i > 0 ? `1px solid ${isLight ? '#eaeef2' : 'rgba(255,255,255,0.06)'}` : 'none',
+                        fontSize: '12.5px',
+                        ...(todo.status === 'completed'
+                            ? { opacity: 0.55, textDecoration: 'line-through' }
+                            : {}),
+                    }, children: [_jsx("span", { "aria-hidden": true, style: {
+                                flexShrink: 0,
+                                width: 16,
+                                fontSize: '12px',
+                                lineHeight: '17px',
+                                color: statusColor(todo.status),
+                                fontWeight: 600,
+                            }, children: statusGlyph(todo.status) }), _jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [todo.priority === 'high' && todo.status !== 'completed' && (_jsx("span", { style: {
+                                        color: isLight ? '#d63a2f' : '#f87171',
+                                        fontWeight: 600,
+                                        marginRight: '4px',
+                                    }, children: "!" })), todo.content] })] }, i)))] }));
+    }
+    // ── spawn_agent: subagent card — explore report / judge verdict ─────────────
+    if (name === 'spawn_agent') {
+        const inp = (input ?? {});
+        const kind = inp.type === 'judge' ? 'judge' : 'explore';
+        const out = (output ?? {});
+        const errorText = typeof out.error === 'string' ? out.error : '';
+        const report = typeof out.report === 'string' ? out.report : '';
+        const verdict = kind === 'judge' ? parseJudgeVerdict(report) : null;
+        const [expanded, setExpanded] = useState(false);
+        const borderClr = isLight ? '#d0d7de' : '#3d444d';
+        const verdictTint = isLight ? 'rgba(63,185,80,0.08)' : 'rgba(63,185,80,0.12)';
+        const failTint = isLight ? 'rgba(248,81,73,0.08)' : 'rgba(248,81,73,0.14)';
+        const verdictColor = verdict?.verdict === 'PASS' ? '#3fb950' : '#f8554f';
+        const bodyText = verdict ? verdict.rest : report;
+        return (_jsxs("div", { className: className, "data-mol-id": "subagent-card", style: {
+                marginBottom: '8px',
+                marginTop: '8px',
+                borderRadius: '8px',
+                border: `1px solid ${borderClr}`,
+                background: isLight ? '#f6f8fa' : 'rgba(255,255,255,0.04)',
+                overflow: 'hidden',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        padding: '6px 12px',
+                        fontSize: '12px',
+                        fontWeight: 600,
+                        borderBottom: report || errorText ? `1px solid ${borderClr}` : 'none',
+                    }, children: [_jsx("span", { "aria-hidden": true, style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: '50%',
+                                flexShrink: 0,
+                                background: status === 'error' || errorText
+                                    ? '#f04040'
+                                    : status === 'done'
+                                        ? '#3fb950'
+                                        : status === 'running'
+                                            ? '#e8a000'
+                                            : '#888888',
+                            } }), _jsx("span", { children: kind === 'judge'
+                                ? t('ide.chat.subagent.judge', undefined, { defaultValue: 'Acceptance judge' })
+                                : t('ide.chat.subagent.explore', undefined, { defaultValue: 'Research subagent' }) }), status === 'running' && (_jsx("span", { style: { fontWeight: 400, opacity: 0.6 }, children: t('ide.chat.subagent.working', undefined, { defaultValue: 'working…' }) }))] }), errorText && (_jsx("div", { style: {
+                        padding: '8px 12px',
+                        fontSize: '12px',
+                        color: '#f8554f',
+                        borderBottom: `1px solid ${borderClr}`,
+                    }, children: errorText })), verdict && (_jsxs("div", { "data-mol-id": "subagent-verdict", style: {
+                        padding: '8px 12px',
+                        background: verdict.verdict === 'PASS' ? verdictTint : failTint,
+                        borderBottom: `1px solid ${borderClr}`,
+                    }, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '6px',
+                                fontSize: '13px',
+                                fontWeight: 700,
+                                color: verdictColor,
+                            }, children: [verdict.verdict === 'PASS' ? '✓' : '✕', verdict.verdict === 'PASS'
+                                    ? t('ide.chat.subagent.verdictPass', undefined, { defaultValue: 'PASS' })
+                                    : t('ide.chat.subagent.verdictFail', undefined, { defaultValue: 'FAIL' })] }), verdict.issues.length > 0 && (_jsx("ul", { style: {
+                                margin: '6px 0 0',
+                                paddingLeft: '18px',
+                                fontSize: '12px',
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '2px',
+                                opacity: 0.9,
+                            }, children: verdict.issues.map((issue, i) => (_jsx("li", { children: issue }, i))) }))] })), bodyText && (_jsxs("div", { style: { padding: '8px 12px' }, children: [_jsx("div", { style: {
+                                fontSize: '12px',
+                                whiteSpace: 'pre-wrap',
+                                maxHeight: expanded ? undefined : 150,
+                                overflow: 'hidden',
+                                opacity: 0.9,
+                            }, children: bodyText }), bodyText.length > 600 && (_jsx("button", { type: "button", "data-mol-id": "subagent-report-toggle", className: cm.button({ variant: 'link', color: 'primary', size: 'xs' }), onClick: () => setExpanded((e) => !e), style: { marginTop: '4px' }, children: expanded
+                                ? t('ide.chat.subagent.hideReport', undefined, {
+                                    defaultValue: 'Show less',
+                                })
+                                : t('ide.chat.subagent.showReport', undefined, {
+                                    defaultValue: 'Show full report',
+                                }) }))] }))] }));
+    }
     // ── save_plan: clickable row that opens the plan file in the editor ──────────
     if (name === 'save_plan') {
         const planOutput = (output ?? {});
@@ -481,10 +620,11 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
     }
     // ── ask_user: render interactive option list instead of a normal tool card ──
     if (name === 'ask_user') {
-        // NEVER render raw tool input. `options` is declared `string[]` in the tool
-        // schema, but the schema is a request to a language model, not a guarantee —
-        // weaker models send `[{ label: 'Recipe box' }]`, and an object reaching JSX
-        // throws React error #31 during render, which takes down the entire IDE.
+        // NEVER render raw tool input. `options` is declared as strings-or-objects
+        // in the tool schema, but the schema is a request to a language model, not
+        // a guarantee — weaker models send `[{ label: 'Recipe box' }]`, nested
+        // arrays, or quote-escaped pseudo-JSON, and an object reaching JSX throws
+        // React error #31 during render, which takes down the entire IDE.
         const askInput = normalizeAskUserInput(input);
         const askOutput = output;
         const serverAwaiting = typeof askOutput === 'object' && askOutput?.status === 'awaiting_response';
@@ -494,6 +634,12 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
         const selectedAnswer = isResponded ? askOutput : localAnswer;
         const [freeText, setFreeText] = useState('');
         const [hoveredIdx, setHoveredIdx] = useState(null);
+        // Multi-select picks in progress (labels); sent as one string joined with
+        // '; ' on confirm — the same shape an answered multi-select persists as.
+        const [multiPicks, setMultiPicks] = useState([]);
+        // Narrow screens have no room for the side-by-side preview pane; there a
+        // preview expands inline under its option row instead.
+        const [expandedPreviewIdx, setExpandedPreviewIdx] = useState(null);
         // Don't render until the question has streamed in. `tool_use_start` surfaces
         // the card the instant the call begins — before its input arrives — which
         // would otherwise flash an empty question + option list. Once the full input
@@ -503,6 +649,34 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
             return null;
         const borderClr = isLight ? '#d0d7de' : '#3d444d';
         const labelChar = (i) => String.fromCharCode(65 + i); // A, B, C, …
+        const hasPreviews = askInput.options.some((option) => option.preview);
+        const multi = askInput.multiSelect && askInput.options.length > 0;
+        // The plan-approval card renders its two decisions as prominent design-
+        // system CTAs (approve = primary solid, request changes = outline) instead
+        // of letter-badged rows — this is the product's single most consequential
+        // click, and it should look like it.
+        const reviewCtas = !!askInput.planReview && !multi && askInput.options.length === 2 && !hasPreviews;
+        const answeredLabels = multi && typeof selectedAnswer === 'string'
+            ? selectedAnswer
+                .split('; ')
+                .map((part) => part.trim())
+                .filter(Boolean)
+            : [];
+        const selectedSet = new Set([...multiPicks, ...answeredLabels]);
+        // Which option's preview the pane shows: the hovered/focused one, else the
+        // picked one, else the first option that has a preview at all.
+        const previewIdx = (() => {
+            if (!hasPreviews)
+                return null;
+            const candidate = hoveredIdx ?? expandedPreviewIdx;
+            if (candidate != null && askInput.options[candidate]?.preview)
+                return candidate;
+            const pickedIdx = askInput.options.findIndex((option) => selectedSet.has(option.label));
+            if (pickedIdx >= 0 && askInput.options[pickedIdx].preview)
+                return pickedIdx;
+            return askInput.options.findIndex((option) => option.preview);
+        })();
+        const previewOption = previewIdx != null ? askInput.options[previewIdx] : undefined;
         return (_jsxs("div", { className: className, style: {
                 marginBottom: '8px',
                 marginTop: '8px',
@@ -510,71 +684,213 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
                 border: `1px solid ${borderClr}`,
                 background: isLight ? '#f6f8fa' : 'rgba(255,255,255,0.04)',
                 overflow: 'hidden',
-            }, children: [_jsx("div", { style: {
+            }, children: [askInput.planReview ? (_jsxs("div", { "data-mol-id": "plan-review-card", style: {
+                        padding: '10px 12px 10px',
+                        fontSize: '13px',
+                        borderBottom: `1px solid ${borderClr}`,
+                    }, children: [_jsx("div", { style: {
+                                fontSize: '11px',
+                                fontWeight: 600,
+                                letterSpacing: '0.03em',
+                                textTransform: 'uppercase',
+                                opacity: 0.6,
+                                marginBottom: '6px',
+                            }, children: t('ide.chat.planReview.badge', undefined, {
+                                defaultValue: 'Plan ready for review',
+                            }) }), _jsx("div", { style: { fontSize: '14px', fontWeight: 600, marginBottom: '4px' }, children: askInput.planReview.name ||
+                                (askInput.planReview.path ? basename(askInput.planReview.path) : '') ||
+                                t('ide.chat.planReview.fallbackTitle', undefined, {
+                                    defaultValue: 'Implementation plan',
+                                }) }), _jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '10px',
+                                fontSize: '12px',
+                                opacity: 0.75,
+                                marginBottom: askInput.planReview.preview.length > 0 ? '8px' : 0,
+                            }, children: [_jsx("span", { children: t('ide.chat.planReview.steps', { count: askInput.planReview.steps }, {
+                                        defaultValue: '{{count}} steps',
+                                    }) }), askInput.planReview.path && onFileOpen && (_jsx("button", { type: "button", "data-mol-id": "plan-review-open", className: cm.button({ variant: 'link', color: 'primary', size: 'xs' }), onClick: () => onFileOpen(askInput.planReview.path), children: t('ide.chat.planReview.openPlan', undefined, { defaultValue: 'Open plan' }) }))] }), askInput.planReview.preview.length > 0 && (_jsx("ul", { style: {
+                                margin: 0,
+                                paddingLeft: '18px',
+                                fontSize: '12px',
+                                opacity: 0.8,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: '2px',
+                            }, children: askInput.planReview.preview.map((step, i) => (_jsx("li", { children: step }, i))) })), askInput.planReview.steps > askInput.planReview.preview.length && (_jsx("div", { style: { fontSize: '11px', opacity: 0.55, marginTop: '4px' }, children: t('ide.chat.planReview.more', { count: askInput.planReview.steps - askInput.planReview.preview.length }, { defaultValue: '+ {{count}} more steps' }) }))] })) : (_jsxs("div", { style: {
                         padding: '4px 12px 10px',
                         fontSize: '13px',
                         borderBottom: `1px solid ${borderClr}`,
-                    }, children: _jsx(MarkdownContent, { text: unescapeLiterals(askInput.question), isStreaming: false }) }), askInput.options.map((option, i) => {
-                    const isSelected = selectedAnswer === option;
-                    const isFaded = !isAwaiting && !isSelected;
-                    const isHover = isAwaiting && hoveredIdx === i;
-                    return (_jsxs("button", { type: "button", "data-mol-id": `ask-user-option-${i}`, disabled: !isAwaiting || onAskUserResponse == null, onClick: () => {
-                            // No handler = read-only (a project viewer): answering is editor work.
-                            if (onAskUserResponse == null)
-                                return;
-                            setLocalAnswer(option);
-                            onAskUserResponse(option);
-                        }, onMouseEnter: () => {
-                            if (isAwaiting)
-                                setHoveredIdx(i);
-                        }, onMouseLeave: () => setHoveredIdx(null), style: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '10px',
-                            width: '100%',
-                            padding: '8px 12px',
-                            // Touch: full 44px rows — these are the PRIMARY discovery answers,
-                            // so they get the standalone-control floor, not the dense-row 32.
-                            ...(isCoarse ? { minHeight: 44 } : {}),
-                            border: 'none',
-                            borderTop: i > 0 ? `1px solid ${borderClr}` : 'none',
-                            background: isSelected
-                                ? isLight
-                                    ? '#dbeafe'
-                                    : 'rgba(59,130,246,0.2)'
-                                : isHover
-                                    ? isLight
-                                        ? '#eaeef2'
-                                        : 'rgba(255,255,255,0.06)'
-                                    : 'transparent',
-                            color: 'inherit',
-                            cursor: isAwaiting ? 'pointer' : 'default',
-                            textAlign: 'left',
-                            fontSize: '13px',
-                            opacity: isFaded ? 0.4 : 1,
-                            transition: 'background 80ms, opacity 80ms',
-                        }, children: [_jsx("span", { style: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    width: 22,
-                                    height: 22,
-                                    borderRadius: '5px',
-                                    border: `1px solid ${isSelected ? (isLight ? '#93c5fd' : '#3b82f6') : borderClr}`,
-                                    background: isSelected
-                                        ? isLight
-                                            ? '#3b82f6'
-                                            : '#2563eb'
-                                        : isLight
-                                            ? '#fff'
-                                            : 'rgba(255,255,255,0.08)',
-                                    color: isSelected ? '#fff' : isLight ? '#57606a' : '#848d97',
-                                    fontSize: '11px',
-                                    fontWeight: 600,
-                                    flexShrink: 0,
-                                    fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
-                                }, children: labelChar(i) }), _jsx("span", { style: { flex: 1 }, children: option }), isSelected && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "14", height: "14", fill: isLight ? '#2563eb' : '#60a5fa', children: _jsx("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" }) }))] }, i));
-                }), isAwaiting && askInput.allowFreeText !== false && onAskUserResponse != null && (_jsxs("div", { style: {
+                    }, children: [_jsx(MarkdownContent, { text: unescapeLiterals(askInput.question), isStreaming: false }), multi && isAwaiting && (_jsx("div", { style: { fontSize: '11px', fontStyle: 'italic', opacity: 0.55, marginTop: '4px' }, children: t('ide.chat.askUserMultiHint', undefined, {
+                                defaultValue: 'You can choose more than one.',
+                            }) }))] })), _jsxs("div", { style: { display: 'flex', alignItems: 'stretch' }, children: [_jsxs("div", { style: {
+                                flex: hasPreviews && !isNarrow ? '1 1 55%' : '1 1 100%',
+                                minWidth: 0,
+                                display: 'flex',
+                                flexDirection: 'column',
+                            }, children: [reviewCtas ? (_jsx("div", { style: {
+                                        display: 'flex',
+                                        flexWrap: 'wrap',
+                                        gap: '8px',
+                                        padding: '10px 12px',
+                                    }, children: askInput.options.map((option, i) => {
+                                        const isPicked = selectedAnswer === option.label;
+                                        return (_jsx("button", { type: "button", "data-mol-id": `plan-review-cta-${i}`, disabled: !isAwaiting || onAskUserResponse == null, className: cm.cn(cm.button(i === 0
+                                                ? { variant: 'solid', color: 'primary', size: 'sm' }
+                                                : { variant: 'outline', color: 'secondary', size: 'sm' }), cm.touchTargetCompact), style: {
+                                                flex: isNarrow ? '1 1 100%' : '1 1 auto',
+                                                ...(isPicked ? { outline: '2px solid #3fb950', outlineOffset: '1px' } : {}),
+                                            }, onClick: () => {
+                                                if (onAskUserResponse == null)
+                                                    return;
+                                                setLocalAnswer(option.label);
+                                                onAskUserResponse(option.label);
+                                            }, children: isPicked ? `✓ ${option.label}` : option.label }, i));
+                                    }) })) : (askInput.options.map((option, i) => {
+                                    const isSelected = selectedSet.has(option.label);
+                                    const isFaded = !isAwaiting && !isSelected;
+                                    const isHover = isAwaiting && hoveredIdx === i;
+                                    const isPreviewExpanded = expandedPreviewIdx === i;
+                                    return (_jsxs("div", { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'stretch' }, children: [_jsxs("button", { type: "button", "data-mol-id": `ask-user-option-${i}`, disabled: !isAwaiting || onAskUserResponse == null, onClick: () => {
+                                                            // No handler = read-only (a project viewer): answering is editor work.
+                                                            if (onAskUserResponse == null)
+                                                                return;
+                                                            if (multi) {
+                                                                // Multi-select toggles a pick; a Confirm row submits them.
+                                                                setMultiPicks((picks) => picks.includes(option.label)
+                                                                    ? picks.filter((p) => p !== option.label)
+                                                                    : [...picks, option.label]);
+                                                                return;
+                                                            }
+                                                            setLocalAnswer(option.label);
+                                                            onAskUserResponse(option.label);
+                                                        }, onFocus: () => {
+                                                            if (isAwaiting)
+                                                                setHoveredIdx(i);
+                                                        }, onMouseEnter: () => {
+                                                            if (isAwaiting)
+                                                                setHoveredIdx(i);
+                                                        }, onMouseLeave: () => setHoveredIdx(null), style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '10px',
+                                                            flex: 1,
+                                                            minWidth: 0,
+                                                            padding: option.description ? '7px 12px' : '8px 12px',
+                                                            // Touch: full 44px rows — these are the PRIMARY discovery answers,
+                                                            // so they get the standalone-control floor, not the dense-row 32.
+                                                            ...(isCoarse ? { minHeight: 44 } : {}),
+                                                            border: 'none',
+                                                            borderTop: i > 0 ? `1px solid ${borderClr}` : 'none',
+                                                            background: isSelected
+                                                                ? isLight
+                                                                    ? '#dbeafe'
+                                                                    : 'rgba(59,130,246,0.2)'
+                                                                : isHover
+                                                                    ? isLight
+                                                                        ? '#eaeef2'
+                                                                        : 'rgba(255,255,255,0.06)'
+                                                                    : 'transparent',
+                                                            color: 'inherit',
+                                                            cursor: isAwaiting ? 'pointer' : 'default',
+                                                            textAlign: 'left',
+                                                            fontSize: '13px',
+                                                            opacity: isFaded ? 0.4 : 1,
+                                                            transition: 'background 80ms, opacity 80ms',
+                                                        }, children: [_jsx("span", { style: {
+                                                                    display: 'inline-flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'center',
+                                                                    width: 22,
+                                                                    height: 22,
+                                                                    borderRadius: multi ? '6px' : '5px',
+                                                                    border: `1px solid ${isSelected ? (isLight ? '#93c5fd' : '#3b82f6') : borderClr}`,
+                                                                    background: isSelected
+                                                                        ? isLight
+                                                                            ? '#3b82f6'
+                                                                            : '#2563eb'
+                                                                        : isLight
+                                                                            ? '#fff'
+                                                                            : 'rgba(255,255,255,0.08)',
+                                                                    color: isSelected ? '#fff' : isLight ? '#57606a' : '#848d97',
+                                                                    fontSize: '11px',
+                                                                    fontWeight: 600,
+                                                                    flexShrink: 0,
+                                                                    fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
+                                                                }, children: multi && isSelected ? '✓' : labelChar(i) }), _jsxs("span", { style: { flex: 1, minWidth: 0 }, children: [_jsx("span", { style: { display: 'block' }, children: option.label }), option.description && (_jsx("span", { style: {
+                                                                            display: 'block',
+                                                                            fontSize: '11px',
+                                                                            opacity: 0.65,
+                                                                            marginTop: '1px',
+                                                                        }, children: option.description }))] }), !multi && isSelected && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "14", height: "14", fill: isLight ? '#2563eb' : '#60a5fa', children: _jsx("path", { d: "M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" }) }))] }), hasPreviews && isNarrow && option.preview && (_jsx("button", { type: "button", "data-mol-id": `ask-user-option-preview-${i}`, "aria-label": t('ide.chat.askUserPreview', undefined, {
+                                                            defaultValue: 'Preview',
+                                                        }), disabled: !isAwaiting, onClick: () => setExpandedPreviewIdx(isPreviewExpanded ? null : i), style: {
+                                                            flexShrink: 0,
+                                                            width: 36,
+                                                            border: 'none',
+                                                            borderTop: i > 0 ? `1px solid ${borderClr}` : 'none',
+                                                            borderLeft: `1px solid ${borderClr}`,
+                                                            background: isPreviewExpanded
+                                                                ? isLight
+                                                                    ? '#eaeef2'
+                                                                    : 'rgba(255,255,255,0.06)'
+                                                                : 'transparent',
+                                                            color: 'inherit',
+                                                            cursor: isAwaiting ? 'pointer' : 'default',
+                                                            fontSize: '14px',
+                                                            opacity: 0.7,
+                                                            transform: isPreviewExpanded ? 'rotate(90deg)' : 'none',
+                                                            transition: 'transform 80ms',
+                                                        }, children: "\u203A" }))] }), hasPreviews && isNarrow && option.preview && isPreviewExpanded && (_jsx("div", { style: {
+                                                    borderTop: `1px solid ${borderClr}`,
+                                                    background: isLight ? '#fff' : 'rgba(255,255,255,0.03)',
+                                                    padding: '8px 12px',
+                                                    maxHeight: 240,
+                                                    overflowY: 'auto',
+                                                    fontSize: '12px',
+                                                }, children: _jsx(MarkdownContent, { text: option.preview, isStreaming: false }) }))] }, i));
+                                })), multi && isAwaiting && onAskUserResponse != null && (_jsxs("div", { style: {
+                                        display: 'flex',
+                                        justifyContent: 'flex-end',
+                                        gap: '8px',
+                                        alignItems: 'center',
+                                        padding: '8px 12px',
+                                        borderTop: `1px solid ${borderClr}`,
+                                    }, children: [_jsx("span", { style: { fontSize: '11px', opacity: 0.6 }, children: t('ide.chat.askUserSelectedCount', undefined, {
+                                                defaultValue: '{{count}} selected',
+                                                count: multiPicks.length,
+                                            }) }), _jsx("button", { type: "button", "data-mol-id": "ask-user-multiselect-confirm", disabled: multiPicks.length === 0, className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'xs' }), cm.touchTargetCompact), onClick: () => {
+                                                if (multiPicks.length === 0)
+                                                    return;
+                                                setLocalAnswer(multiPicks.join('; '));
+                                                onAskUserResponse(multiPicks.join('; '));
+                                            }, children: t('ide.chat.askUserMultiConfirm', undefined, {
+                                                defaultValue: 'Confirm choice',
+                                            }) })] }))] }), hasPreviews && !isNarrow && (_jsxs("div", { style: {
+                                flex: '1 1 45%',
+                                minWidth: 0,
+                                borderLeft: `1px solid ${borderClr}`,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                background: isLight ? '#fff' : 'rgba(255,255,255,0.03)',
+                            }, children: [_jsx("div", { style: {
+                                        padding: '6px 12px',
+                                        fontSize: '11px',
+                                        fontWeight: 600,
+                                        opacity: 0.6,
+                                        borderBottom: `1px solid ${borderClr}`,
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                    }, children: previewOption
+                                        ? previewOption.label
+                                        : t('ide.chat.askUserPreview', undefined, { defaultValue: 'Preview' }) }), _jsx("div", { style: {
+                                        padding: '8px 12px',
+                                        maxHeight: 360,
+                                        overflowY: 'auto',
+                                        fontSize: '12px',
+                                    }, children: previewOption?.preview && (_jsx(MarkdownContent, { text: previewOption.preview, isStreaming: false })) })] }))] }), isAwaiting && askInput.allowFreeText !== false && onAskUserResponse != null && (_jsxs("div", { style: {
                         display: 'flex',
                         gap: '4px',
                         padding: '8px 12px',
@@ -639,7 +955,7 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
                                 fontWeight: 500,
                                 opacity: freeText.trim() ? 1 : 0.3,
                                 transition: 'background 100ms, border-color 100ms, color 100ms',
-                            }, children: t('ide.chat.askUserSubmit', undefined, { defaultValue: 'Send' }) })] })), selectedAnswer && !askInput.options.includes(selectedAnswer) && (_jsx("div", { style: {
+                            }, children: t('ide.chat.askUserSubmit', undefined, { defaultValue: 'Send' }) })] })), selectedAnswer && !askInput.options.some((option) => option.label === selectedAnswer) && (_jsx("div", { style: {
                         padding: '8px 12px',
                         borderTop: `1px solid ${borderClr}`,
                         fontSize: '12px',