@molecule/app-ide-react 1.15.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, 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
@@ -305,7 +305,7 @@ function renderOut(name, output) {
  * @param props - Component props.
  * @returns The rendered tool call card element.
  */
-export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output, status, fileDiff, isUndone: isUndoneProp, onUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onAskUserResponse, className, }) {
+export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output, status, fileDiff, isUndone: isUndoneProp, onUndoToggle, onFileOpen, onFileDoubleClick, onFileDiff, onFileRevert, onAskUserResponse, onSkip, skipDisabledReason, className, }) {
     const cm = getClassMap();
     const isLight = useThemeMode() === 'light';
     // Touch/phone branches (called unconditionally, before the per-tool early
@@ -319,7 +319,14 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
     const [isUndoneLocal, setIsUndoneLocal] = useState(false);
     const isUndone = isUndoneProp ?? isUndoneLocal;
     const [isReverting, setIsReverting] = useState(false);
+    const [skipRequested, setSkipRequested] = useState(false);
+    // The person skipped this call. It is neither a success nor a failure, and
+    // the row has to say so — a green dot on a command that never ran is exactly
+    // the kind of quiet lie the honesty rule exists to stop.
+    const wasSkipped = isSkippedByUser(output);
     const hasError = (() => {
+        if (wasSkipped)
+            return false;
         if (status === 'error')
             return true;
         if (typeof output !== 'object' || output === null)
@@ -337,8 +344,9 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
         }
         return false;
     })();
-    // gray → orange → green or red
-    const dotColor = status === 'pending'
+    // gray → orange → green or red; a skipped call stays gray, because it did
+    // not happen.
+    const dotColor = status === 'pending' || wasSkipped
         ? '#888888'
         : status === 'running'
             ? '#e8a000'
@@ -382,6 +390,27 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
             setIsReverting(false);
         }
     }, [canRevert, isReverting, isUndone, fileDiff, filePath, onFileRevert, onUndoToggle, id]);
+    // Skip this call while it is still running — the turn keeps going, the model
+    // is told the command did not run. A host that answers `false` means the call
+    // had already finished (the stale-button race), which is not an error: the
+    // button simply returns to its resting state.
+    const canSkip = status === 'running' && onSkip != null;
+    const handleSkip = useCallback(async () => {
+        if (!onSkip || skipRequested || skipDisabledReason)
+            return;
+        setSkipRequested(true);
+        try {
+            const accepted = await onSkip(id);
+            if (accepted === false)
+                setSkipRequested(false);
+        }
+        catch (_error) {
+            // Deliberate noop: the host already logs whatever went wrong on its side,
+            // and there is nothing for the PERSON to do here — the call is still
+            // running, so the honest UI is the button back at rest to try again.
+            setSkipRequested(false);
+        }
+    }, [onSkip, skipRequested, skipDisabledReason, id]);
     // Tools that expand to show details inline.
     const EXPANDABLE = new Set([
         'exec_command',
@@ -413,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 ?? {});
@@ -452,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';
@@ -465,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
@@ -474,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',
@@ -481,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',
@@ -610,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',
@@ -623,97 +968,107 @@ export const ToolCallCard = memo(function ToolCallCard({ id, name, input, output
                         opacity: 0.5,
                     }, children: askInput.hint }))] }));
     }
-    return (_jsxs("div", { className: className, style: { marginBottom: '4px' }, children: [_jsxs("button", { type: "button", onClick: handleClick, onDoubleClick: isNewFile && filePath && onFileDoubleClick
-                    ? () => {
-                        onFileDoubleClick(filePath);
-                    }
-                    : undefined, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
-                    display: 'flex',
-                    // Coarse: the undo icon's 32px touch box inflates the label row, so
-                    // top-alignment would leave the diff stats/chevron riding high —
-                    // center everything instead. Desktop keeps flex-start + px nudges.
-                    alignItems: isCoarse ? 'center' : 'flex-start',
-                    gap: '6px',
-                    background: 'none',
-                    border: 'none',
-                    cursor: handleClick ? 'pointer' : 'default',
-                    color: 'inherit',
-                    textAlign: 'left',
-                    padding: '2px 0',
-                    // Touch: ~20px rows are untappable — 32px is the dense-row floor.
-                    ...(isCoarse ? { minHeight: 32 } : {}),
-                    width: '100%',
-                }, children: [_jsx("span", { style: { flex: 1, minWidth: 0 }, children: _jsxs("span", { style: { fontSize: '13px', display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsxs("svg", { width: "10", height: "10", viewBox: "0 0 10 10", style: { flexShrink: 0 }, children: [_jsx("circle", { cx: "5", cy: "5", r: "3", fill: dotColor, opacity: "0.35" }), _jsx("circle", { cx: "5", cy: "5", r: "3", fill: "none", stroke: dotColor, strokeWidth: "2" })] }), _jsx("span", { style: {
-                                        flex: 1,
-                                        minWidth: 0,
-                                        overflow: 'hidden',
-                                        textOverflow: 'ellipsis',
-                                        whiteSpace: 'nowrap',
-                                    }, children: renderLabel(name, input, filePath, onFileOpen, onFileDoubleClick) }), summary && (_jsx("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { flexShrink: 0, marginLeft: '8px', whiteSpace: 'nowrap' }, children: summary })), canRevert && status !== 'running' && (_jsx("span", { role: "button", tabIndex: 0, title: isUndone
-                                        ? t('ide.chat.redoChange', undefined, { defaultValue: 'Re-apply this change' })
-                                        : t('ide.chat.undoChange', undefined, { defaultValue: 'Undo this change' }), onClick: handleRevert, onKeyDown: (e) => {
-                                        if (e.key === 'Enter' || e.key === ' ') {
-                                            e.preventDefault();
-                                            handleRevert(e);
-                                        }
-                                    }, onMouseEnter: (e) => {
-                                        e.currentTarget.style.background = 'rgba(128,128,128,0.2)';
-                                        e.currentTarget.style.opacity = '1';
-                                    }, onMouseLeave: (e) => {
-                                        e.currentTarget.style.background = 'transparent';
-                                        e.currentTarget.style.opacity = '';
-                                    }, style: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        // Touch: hover can't reveal it, so it rests visible at 0.6 and
-                                        // gets a 32px hit box (the floor for these dense inline rows).
-                                        width: isCoarse ? 32 : 20,
-                                        height: isCoarse ? 32 : 20,
-                                        borderRadius: 4,
-                                        flexShrink: 0,
-                                        // Nudge up 1px: the 13px glyph sat slightly below the text's
-                                        // optical center of the compact 20px box (moot at 32px).
-                                        position: 'relative',
-                                        top: isCoarse ? 0 : '-1px',
-                                        cursor: isReverting ? 'wait' : 'pointer',
-                                        opacity: isReverting ? 0.3 : isHovered || isCoarse ? 0.6 : 0,
-                                        transition: 'opacity 100ms, background 100ms',
-                                    }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: isUndone ? (_jsx("path", { d: "M14.78 6.28a.749.749 0 0 0 0-1.06l-3.5-3.5a.749.749 0 1 0-1.06 1.06L12.439 5H5.251l-.001.007L5.251 5a.8.8 0 0 0-.171.019A4.501 4.501 0 0 0 5.5 14h1.704a.75.75 0 0 0 0-1.5H5.5a3 3 0 1 1 0-6h6.939L10.22 8.72a.749.749 0 1 0 1.06 1.06l3.5-3.5Z" })) : (_jsx("path", { d: "M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.561 5h7.188l.001.007L10.749 5c.058 0 .116.007.171.019A4.501 4.501 0 0 1 10.5 14H8.796a.75.75 0 0 1 0-1.5H10.5a3 3 0 1 0 0-6H3.561L5.78 8.72a.749.749 0 1 1-1.06 1.06l-3.5-3.5Z" })) }) }))] }) }), diffStats && (_jsxs("span", { style: {
+    return (_jsxs("div", { className: className, style: { marginBottom: '4px' }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 }, children: [_jsxs("button", { type: "button", onClick: handleClick, onDoubleClick: isNewFile && filePath && onFileDoubleClick
+                            ? () => {
+                                onFileDoubleClick(filePath);
+                            }
+                            : undefined, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
                             display: 'flex',
-                            gap: '4px',
-                            flexShrink: 0,
-                            marginTop: isCoarse ? 0 : '2px',
-                            fontSize: '11px',
-                            fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
-                            opacity: isHovered ? 1 : 0.6,
-                            transition: 'opacity 100ms',
-                        }, children: [diffStats.added > 0 && (_jsxs("span", { style: {
-                                    color: isUndone
-                                        ? isLight
-                                            ? '#cf222e'
-                                            : '#f47067'
-                                        : isLight
-                                            ? '#1a7f37'
-                                            : '#57ab5a',
-                                    textDecoration: isUndone ? 'line-through' : undefined,
-                                }, children: ["+", diffStats.added] })), diffStats.removed > 0 && (_jsxs("span", { style: {
-                                    color: isUndone
-                                        ? isLight
-                                            ? '#1a7f37'
-                                            : '#57ab5a'
-                                        : isLight
-                                            ? '#cf222e'
-                                            : '#f47067',
-                                    textDecoration: isUndone ? 'line-through' : undefined,
-                                }, children: ["-", diffStats.removed] }))] })), (hasDetails || isFileDiff || isDocOpen || (isNewFile && filePath && onFileOpen)) && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "14", height: "14", style: {
-                            display: 'block',
-                            flexShrink: 0,
-                            marginTop: isCoarse ? 0 : '3px',
-                            transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
-                            transition: 'transform 150ms, opacity 100ms',
-                            opacity: isHovered ? 0.85 : 0.35,
-                        }, children: _jsx("polyline", { points: "6,4 10,8 6,12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }), expanded && hasDetails && (_jsx("div", { className: cm.surfaceSecondary, style: {
+                            // Coarse: the undo icon's 32px touch box inflates the label row, so
+                            // top-alignment would leave the diff stats/chevron riding high —
+                            // center everything instead. Desktop keeps flex-start + px nudges.
+                            alignItems: isCoarse ? 'center' : 'flex-start',
+                            gap: '6px',
+                            background: 'none',
+                            border: 'none',
+                            cursor: handleClick ? 'pointer' : 'default',
+                            color: 'inherit',
+                            textAlign: 'left',
+                            padding: '2px 0',
+                            // Touch: ~20px rows are untappable — 32px is the dense-row floor.
+                            ...(isCoarse ? { minHeight: 32 } : {}),
+                            width: '100%',
+                            // The row shares its line with the Skip button: without this it
+                            // keeps its intrinsic min-width and pushes the Skip off a 390px
+                            // screen instead of letting the label ellipsise.
+                            minWidth: 0,
+                        }, children: [_jsx("span", { style: { flex: 1, minWidth: 0 }, children: _jsxs("span", { style: { fontSize: '13px', display: 'flex', alignItems: 'center', gap: '6px' }, children: [_jsxs("svg", { width: "10", height: "10", viewBox: "0 0 10 10", style: { flexShrink: 0 }, children: [_jsx("circle", { cx: "5", cy: "5", r: "3", fill: dotColor, opacity: "0.35" }), _jsx("circle", { cx: "5", cy: "5", r: "3", fill: "none", stroke: dotColor, strokeWidth: "2" })] }), _jsx("span", { style: {
+                                                flex: 1,
+                                                minWidth: 0,
+                                                overflow: 'hidden',
+                                                textOverflow: 'ellipsis',
+                                                whiteSpace: 'nowrap',
+                                            }, children: renderLabel(name, input, filePath, onFileOpen, onFileDoubleClick) }), summary && (_jsx("span", { className: cm.cn(cm.textMuted, cm.textSize('xs')), style: { flexShrink: 0, marginLeft: '8px', whiteSpace: 'nowrap' }, children: summary })), canRevert && status !== 'running' && (_jsx("span", { role: "button", tabIndex: 0, title: isUndone
+                                                ? t('ide.chat.redoChange', undefined, {
+                                                    defaultValue: 'Re-apply this change',
+                                                })
+                                                : t('ide.chat.undoChange', undefined, { defaultValue: 'Undo this change' }), onClick: handleRevert, onKeyDown: (e) => {
+                                                if (e.key === 'Enter' || e.key === ' ') {
+                                                    e.preventDefault();
+                                                    handleRevert(e);
+                                                }
+                                            }, onMouseEnter: (e) => {
+                                                e.currentTarget.style.background = 'rgba(128,128,128,0.2)';
+                                                e.currentTarget.style.opacity = '1';
+                                            }, onMouseLeave: (e) => {
+                                                e.currentTarget.style.background = 'transparent';
+                                                e.currentTarget.style.opacity = '';
+                                            }, style: {
+                                                display: 'inline-flex',
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                                // Touch: hover can't reveal it, so it rests visible at 0.6 and
+                                                // gets a 32px hit box (the floor for these dense inline rows).
+                                                width: isCoarse ? 32 : 20,
+                                                height: isCoarse ? 32 : 20,
+                                                borderRadius: 4,
+                                                flexShrink: 0,
+                                                // Nudge up 1px: the 13px glyph sat slightly below the text's
+                                                // optical center of the compact 20px box (moot at 32px).
+                                                position: 'relative',
+                                                top: isCoarse ? 0 : '-1px',
+                                                cursor: isReverting ? 'wait' : 'pointer',
+                                                opacity: isReverting ? 0.3 : isHovered || isCoarse ? 0.6 : 0,
+                                                transition: 'opacity 100ms, background 100ms',
+                                            }, children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "13", height: "13", fill: "currentColor", children: isUndone ? (_jsx("path", { d: "M14.78 6.28a.749.749 0 0 0 0-1.06l-3.5-3.5a.749.749 0 1 0-1.06 1.06L12.439 5H5.251l-.001.007L5.251 5a.8.8 0 0 0-.171.019A4.501 4.501 0 0 0 5.5 14h1.704a.75.75 0 0 0 0-1.5H5.5a3 3 0 1 1 0-6h6.939L10.22 8.72a.749.749 0 1 0 1.06 1.06l3.5-3.5Z" })) : (_jsx("path", { d: "M1.22 6.28a.749.749 0 0 1 0-1.06l3.5-3.5a.749.749 0 1 1 1.06 1.06L3.561 5h7.188l.001.007L10.749 5c.058 0 .116.007.171.019A4.501 4.501 0 0 1 10.5 14H8.796a.75.75 0 0 1 0-1.5H10.5a3 3 0 1 0 0-6H3.561L5.78 8.72a.749.749 0 1 1-1.06 1.06l-3.5-3.5Z" })) }) }))] }) }), diffStats && (_jsxs("span", { style: {
+                                    display: 'flex',
+                                    gap: '4px',
+                                    flexShrink: 0,
+                                    marginTop: isCoarse ? 0 : '2px',
+                                    fontSize: '11px',
+                                    fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
+                                    opacity: isHovered ? 1 : 0.6,
+                                    transition: 'opacity 100ms',
+                                }, children: [diffStats.added > 0 && (_jsxs("span", { style: {
+                                            color: isUndone
+                                                ? isLight
+                                                    ? '#cf222e'
+                                                    : '#f47067'
+                                                : isLight
+                                                    ? '#1a7f37'
+                                                    : '#57ab5a',
+                                            textDecoration: isUndone ? 'line-through' : undefined,
+                                        }, children: ["+", diffStats.added] })), diffStats.removed > 0 && (_jsxs("span", { style: {
+                                            color: isUndone
+                                                ? isLight
+                                                    ? '#1a7f37'
+                                                    : '#57ab5a'
+                                                : isLight
+                                                    ? '#cf222e'
+                                                    : '#f47067',
+                                            textDecoration: isUndone ? 'line-through' : undefined,
+                                        }, children: ["-", diffStats.removed] }))] })), (hasDetails || isFileDiff || isDocOpen || (isNewFile && filePath && onFileOpen)) && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "14", height: "14", style: {
+                                    display: 'block',
+                                    flexShrink: 0,
+                                    marginTop: isCoarse ? 0 : '3px',
+                                    transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                    transition: 'transform 150ms, opacity 100ms',
+                                    opacity: isHovered ? 0.85 : 0.35,
+                                }, children: _jsx("polyline", { points: "6,4 10,8 6,12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))] }), canSkip && (_jsx("button", { type: "button", "data-mol-id": `tool-call-skip-${id}`, onClick: () => {
+                            void handleSkip();
+                        }, disabled: skipRequested || skipDisabledReason != null, title: skipDisabledReason ?? undefined, className: cm.cn(cm.button({ variant: 'solid', color: 'primary', size: 'xs' })), style: { flexShrink: 0 }, children: skipRequested
+                            ? t('ide.chat.skippingToolCall', undefined, { defaultValue: 'Skipping…' })
+                            : t('ide.chat.skipToolCall', undefined, { defaultValue: 'Skip' }) }))] }), expanded && hasDetails && (_jsx("div", { className: cm.surfaceSecondary, style: {
                     marginLeft: '14px',
                     marginTop: '4px',
                     marginBottom: '4px',