@molecule/app-ide-react 1.0.0

package/dist/components/ToolCallCard.js

@@ -0,0 +1,716 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useMemo, useState } from 'react';
+import { t } from '@molecule/app-i18n';
+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, 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
+ * the text instead of a real control character. Convert those back so markdown
+ * line breaks render correctly.
+ *
+ * @param s - The raw string.
+ * @returns The string with literal escape sequences turned into real ones.
+ */
+function unescapeLiterals(s) {
+    return s.replace(/\\r\\n|\\n|\\r/g, '\n').replace(/\\t/g, '\t');
+}
+// ---------------------------------------------------------------------------
+// Label renderer — turns `backtick` segments into inline <code> spans
+// ---------------------------------------------------------------------------
+const CODE_STYLE = {
+    fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
+    fontSize: 'inherit',
+};
+/**
+ * Clickable filename code — single click opens preview, double click pins tab.
+ * @param props - Component props.
+ * @returns The rendered clickable code element.
+ */
+function FileCodeLink({ filePath, onFileOpen, onFileDoubleClick, children, }) {
+    return (_jsx("code", { style: { ...CODE_STYLE, cursor: 'pointer', opacity: 0.75, transition: 'opacity 100ms' }, onClick: (e) => {
+            e.stopPropagation();
+            onFileOpen(filePath);
+        }, onDoubleClick: (e) => {
+            e.stopPropagation();
+            onFileDoubleClick?.(filePath);
+        }, onMouseEnter: (e) => {
+            ;
+            e.currentTarget.style.opacity = '1';
+        }, onMouseLeave: (e) => {
+            ;
+            e.currentTarget.style.opacity = '0.75';
+        }, children: children }));
+}
+/**
+ * Renders a tool label with backtick segments converted to clickable code spans.
+ * @param name - The tool name.
+ * @param input - The raw tool input payload.
+ * @param filePath - The primary file path for clickable code links, or null.
+ * @param onFileOpen - Callback to preview a file on single click.
+ * @param onFileDoubleClick - Callback to pin a file tab on double click.
+ * @returns A ReactNode with formatted label text and clickable file references.
+ */
+function renderLabel(name, input, filePath, onFileOpen, onFileDoubleClick) {
+    const text = toolLabel(name, input);
+    const parts = text.split(new RegExp('`([^`]+)`'));
+    if (parts.length === 1)
+        return text;
+    return (_jsx(_Fragment, { children: parts.map((part, i) => i % 2 === 0 ? (part) : filePath && onFileOpen ? (_jsx(FileCodeLink, { filePath: filePath, onFileOpen: onFileOpen, onFileDoubleClick: onFileDoubleClick, children: part }, i)) : (_jsx("code", { style: { ...CODE_STYLE, opacity: 0.75 }, children: part }, i))) }));
+}
+/**
+ * Extract the package matches from a find_package output. Prefers the
+ * structured `results` array; falls back to parsing package names out of the
+ * model-facing `packages` markdown (conversations recorded before `results`
+ * existed).
+ * @param output - The raw find_package output payload.
+ * @returns The package results, possibly empty.
+ */
+function packageResults(output) {
+    const out = (output ?? {});
+    if (Array.isArray(out.results)) {
+        return out.results.filter((r) => typeof r?.name === 'string');
+    }
+    if (typeof out.packages === 'string') {
+        return [...out.packages.matchAll(/^### `([^`]+)`(?: — (.+))?$/gm)].map((m) => ({
+            name: m[1],
+            label: m[2],
+        }));
+    }
+    return [];
+}
+/**
+ * Clickable rows for find_package matches — each opens the package's
+ * MOLECULE.md in the editor.
+ * @param props - Component props.
+ * @returns The rendered result rows.
+ */
+function PackageResultRows({ results, onFileOpen, }) {
+    const isCoarse = useCoarsePointer();
+    if (results.length === 0) {
+        return (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.noMatches', undefined, { defaultValue: 'No matches' }) }));
+    }
+    return (_jsx("div", { style: { fontFamily: PRE.fontFamily, fontSize: '11px', lineHeight: 1.7 }, children: results.map((r, i) => {
+            const docPath = moleculeDocPath(r.name);
+            const clickable = docPath != null && onFileOpen != null;
+            return (_jsxs("div", { role: clickable ? 'button' : undefined, tabIndex: clickable ? 0 : undefined, "data-mol-id": `find-package-result-${i}`, title: clickable
+                    ? t('ide.toolCall.openPackageDoc', undefined, {
+                        defaultValue: 'Open package docs',
+                    })
+                    : undefined, onClick: clickable
+                    ? (e) => {
+                        e.stopPropagation();
+                        onFileOpen(docPath);
+                    }
+                    : undefined, onKeyDown: clickable
+                    ? (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onFileOpen(docPath);
+                        }
+                    }
+                    : undefined, onMouseEnter: (e) => {
+                    if (clickable)
+                        e.currentTarget.style.opacity = '1';
+                }, onMouseLeave: (e) => {
+                    if (clickable)
+                        e.currentTarget.style.opacity = '0.8';
+                }, style: {
+                    display: 'flex',
+                    gap: '8px',
+                    alignItems: 'baseline',
+                    // Touch: ~19px result rows are untappable — 32px dense-row floor.
+                    ...(isCoarse && clickable ? { minHeight: 32, alignItems: 'center' } : {}),
+                    cursor: clickable ? 'pointer' : 'default',
+                    opacity: clickable ? 0.8 : 1,
+                    transition: 'opacity 100ms',
+                }, children: [_jsx("span", { style: { whiteSpace: 'nowrap' }, children: r.name }), r.label && (_jsx("span", { style: {
+                            opacity: 0.55,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                        }, children: r.label }))] }, i));
+        }) }));
+}
+// ---------------------------------------------------------------------------
+// Detail renderers — IN and OUT panes
+// ---------------------------------------------------------------------------
+const PRE = {
+    margin: 0,
+    whiteSpace: 'pre',
+    overflowX: 'auto',
+    fontFamily: '"SF Mono", Menlo, Consolas, "Courier New", monospace',
+    fontSize: '11px',
+    lineHeight: 1.5,
+};
+/**
+ * Render the input section for a tool call.
+ * @param name - The tool name.
+ * @param input - The raw tool input payload.
+ * @returns A ReactNode showing the formatted input content.
+ */
+function renderIn(name, input) {
+    const inp = (input ?? {});
+    switch (name) {
+        case 'exec_command':
+            return (_jsxs("pre", { style: PRE, children: [_jsx("span", { style: { opacity: 0.5 }, children: "$ " }), inp.command ?? ''] }));
+        case 'write_file':
+            // Full file content is too noisy — show only the path
+            return _jsx("pre", { style: PRE, children: inp.path ?? '' });
+        case 'edit_file': {
+            const replacements = Array.isArray(inp.replacements)
+                ? inp.replacements
+                : [];
+            const nodes = [];
+            replacements.forEach((r, i) => {
+                if (i > 0)
+                    nodes.push('\n\n');
+                r.old_string.split('\n').forEach((line, li) => {
+                    if (li > 0)
+                        nodes.push('\n');
+                    nodes.push(_jsxs("span", { style: { color: '#f47067', fontFamily: 'inherit' }, children: ['- ', line] }, `r${i}-${li}`));
+                });
+                nodes.push('\n');
+                r.new_string.split('\n').forEach((line, li) => {
+                    if (li > 0)
+                        nodes.push('\n');
+                    nodes.push(_jsxs("span", { style: { color: '#57ab5a', fontFamily: 'inherit' }, children: ['+ ', line] }, `a${i}-${li}`));
+                });
+            });
+            return _jsx("pre", { style: PRE, children: nodes });
+        }
+        case 'search_files':
+            return (_jsxs("pre", { style: PRE, children: [`/${inp.pattern ?? ''}/`, inp.path ? ` in ${inp.path}` : '', inp.include ? ` (${inp.include})` : ''] }));
+        case 'find_files':
+            return (_jsxs("pre", { style: PRE, children: [inp.pattern ?? '', inp.path ? ` in ${inp.path}` : ''] }));
+        case 'read_file':
+        case 'delete_file':
+        case 'list_files':
+        case 'create_directory':
+            return _jsx("pre", { style: PRE, children: inp.path ?? '' });
+        case 'rename_file':
+            return (_jsxs("pre", { style: PRE, children: [inp.old_path ?? '', " \u2192 ", inp.new_path ?? ''] }));
+        case 'web_fetch':
+            return (_jsxs("pre", { style: PRE, children: [inp.method ?? 'GET', " ", inp.url ?? ''] }));
+        default:
+            return _jsx("pre", { style: PRE, children: JSON.stringify(input, null, 2) });
+    }
+}
+/**
+ * Render the output section for a tool call.
+ * @param name - The tool name.
+ * @param output - The raw tool output payload.
+ * @returns A ReactNode showing the formatted output content.
+ */
+function renderOut(name, output) {
+    const out = (output ?? {});
+    if (typeof out === 'object' && out !== null && 'error' in out) {
+        return _jsx("pre", { style: { ...PRE, color: '#f47067' }, children: out.error });
+    }
+    switch (name) {
+        case 'exec_command': {
+            const stdout = (out.stdout ?? '').trimEnd();
+            const stderr = (out.stderr ?? '').trimEnd();
+            const exitCode = out.exitCode;
+            return (_jsxs("div", { children: [stdout && _jsx("pre", { style: PRE, children: stdout }), stderr && (_jsx("pre", { style: { ...PRE, color: '#f47067', marginTop: stdout ? '4px' : 0 }, children: stderr })), exitCode != null && exitCode !== 0 && (_jsxs("div", { style: { marginTop: '4px', color: '#f47067', fontSize: '10px' }, children: ["exit code ", exitCode] })), !stdout && !stderr && (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.noOutput', undefined, { defaultValue: '(no output)' }) }))] }));
+        }
+        case 'write_file': {
+            const diff = out.diff;
+            if (!diff)
+                return (_jsx("span", { style: { opacity: 0.6 }, children: t('ide.toolCall.written', undefined, { defaultValue: 'Written' }) }));
+            if (diff.type === 'unchanged')
+                return (_jsx("span", { style: { opacity: 0.6 }, children: t('ide.toolCall.statusUnchanged', undefined, { defaultValue: 'Unchanged' }) }));
+            return (_jsxs("div", { style: { fontFamily: PRE.fontFamily, fontSize: '11px' }, children: [diff.type === 'new' && (_jsx("div", { style: { color: '#57ab5a' }, children: t('ide.toolCall.newFileLines', { count: diff.linesAdded }, { defaultValue: 'new file, {{count}} lines' }) })), diff.type === 'modified' && (_jsxs(_Fragment, { children: [diff.linesAdded > 0 && (_jsx("div", { style: { color: '#57ab5a' }, children: t('ide.toolCall.linesAdded', { count: diff.linesAdded }, { defaultValue: '+{{count}} lines' }) })), diff.linesRemoved > 0 && (_jsx("div", { style: { color: '#f47067' }, children: t('ide.toolCall.linesRemoved', { count: diff.linesRemoved }, { defaultValue: '−{{count}} lines' }) }))] }))] }));
+        }
+        case 'edit_file': {
+            const n = out.replacementsApplied;
+            return (_jsx("span", { style: { opacity: 0.6, fontSize: '11px' }, children: n != null
+                    ? t('ide.toolCall.changesApplied', { count: n }, { defaultValue: '{{count}} changes applied' })
+                    : t('ide.toolCall.applied', undefined, { defaultValue: 'Applied' }) }));
+        }
+        case 'read_file': {
+            const content = out.content;
+            if (!content)
+                return (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.empty', undefined, { defaultValue: '(empty)' }) }));
+            const truncated = content.length > 3000;
+            return (_jsx("pre", { style: PRE, children: truncated
+                    ? content.slice(0, 3000) +
+                        '\n' +
+                        t('ide.toolCall.truncated', undefined, { defaultValue: '… (truncated)' })
+                    : content }));
+        }
+        case 'list_files': {
+            const entries = out.entries;
+            if (!entries?.length)
+                return (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.empty', undefined, { defaultValue: '(empty)' }) }));
+            return (_jsx("div", { style: { fontFamily: PRE.fontFamily, fontSize: '11px', lineHeight: 1.6 }, children: entries.map((e, i) => (_jsxs("div", { style: { display: 'flex', gap: '6px' }, children: [_jsx("span", { style: { opacity: 0.4, width: '10px', flexShrink: 0 }, children: e.type === 'directory' ? '▶' : '' }), _jsxs("span", { children: [e.name, e.type === 'directory' ? '/' : ''] })] }, i))) }));
+        }
+        case 'find_files': {
+            const files = out.files;
+            if (!files?.length)
+                return (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.noFilesFound', undefined, { defaultValue: 'No files found' }) }));
+            return (_jsx("div", { style: { fontFamily: PRE.fontFamily, fontSize: '11px', lineHeight: 1.6 }, children: files.map((f, i) => (_jsx("div", { children: f }, i))) }));
+        }
+        case 'search_files': {
+            const matches = out.matches;
+            if (!matches?.length)
+                return (_jsx("span", { style: { opacity: 0.5 }, children: t('ide.toolCall.noMatches', undefined, { defaultValue: 'No matches' }) }));
+            return (_jsxs("div", { style: { fontFamily: PRE.fontFamily, fontSize: '11px', lineHeight: 1.6 }, children: [matches.slice(0, 30).map((m, i) => (_jsxs("div", { style: { display: 'flex', gap: '8px', marginBottom: '2px' }, children: [_jsxs("span", { style: { opacity: 0.5, flexShrink: 0, whiteSpace: 'nowrap' }, children: [basename(m.file), ":", m.line] }), _jsx("span", { style: { whiteSpace: 'pre' }, children: m.content.trim() })] }, i))), matches.length > 30 && (_jsx("div", { style: { opacity: 0.5, marginTop: '4px' }, children: t('ide.toolCall.andMore', { count: matches.length - 30 }, { defaultValue: '… and {{count}} more' }) }))] }));
+        }
+        case 'web_fetch': {
+            const status = out.status;
+            const body = out.body;
+            const ok = status != null && status >= 200 && status < 300;
+            return (_jsxs("div", { children: [status != null && (_jsxs("div", { style: {
+                            color: ok ? '#57ab5a' : '#f47067',
+                            marginBottom: body ? '4px' : 0,
+                            fontSize: '11px',
+                        }, children: ["HTTP ", status] })), body && (_jsx("pre", { style: PRE, children: body.length > 2000
+                            ? body.slice(0, 2000) +
+                                '\n' +
+                                t('ide.toolCall.truncated', undefined, { defaultValue: '… (truncated)' })
+                            : body }))] }));
+        }
+        default:
+            return _jsx("pre", { style: PRE, children: JSON.stringify(output, null, 2) });
+    }
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Compact tool-call row with status dot, label, summary, and expandable detail pane.
+ * @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, }) {
+    const cm = getClassMap();
+    const isLight = useThemeMode() === 'light';
+    // Touch/phone branches (called unconditionally, before the per-tool early
+    // returns, so the hook order stays stable): hover-revealed controls become
+    // visible-by-default and compact hit areas grow; fine-pointer desktop
+    // rendering is unchanged.
+    const isCoarse = useCoarsePointer();
+    const isNarrow = useNarrowViewport();
+    const [expanded, setExpanded] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const [isUndoneLocal, setIsUndoneLocal] = useState(false);
+    const isUndone = isUndoneProp ?? isUndoneLocal;
+    const [isReverting, setIsReverting] = useState(false);
+    const hasError = (() => {
+        if (status === 'error')
+            return true;
+        if (typeof output !== 'object' || output === null)
+            return false;
+        const out = output;
+        if ('error' in out)
+            return true;
+        if (name === 'exec_command') {
+            const exitCode = out.exitCode;
+            return exitCode != null && exitCode !== 0;
+        }
+        if (name === 'web_fetch') {
+            const s = out.status;
+            return s != null && s >= 400;
+        }
+        return false;
+    })();
+    // gray → orange → green or red
+    const dotColor = status === 'pending'
+        ? '#888888'
+        : status === 'running'
+            ? '#e8a000'
+            : hasError
+                ? '#f04040'
+                : '#3fb950';
+    const summary = toolSummary(name, output, status);
+    // File path for the clickable filename <code> in the label. For load_skill the
+    // path isn't in the input — the loaded skill's SKILL.md path comes back in the
+    // output ({ name, path, content }) — so clicking the skill name opens its markdown.
+    const filePath = name === 'load_skill'
+        ? (output?.path ?? null)
+        : extractFilePath(name, input);
+    // New files open directly (no diff to show); edits/modifications open the diff viewer.
+    const isNewFile = name === 'write_file' && output?.diff?.type === 'new';
+    const isFileDiff = !isNewFile &&
+        (name === 'edit_file' || name === 'write_file') &&
+        filePath != null &&
+        onFileDiff != null;
+    // Memoize the expensive O(n*m) LCS diff computation so it only re-runs when inputs change.
+    const diffStats = useMemo(() => fileDiffStats(name, input, output), [name, input, output]);
+    // Undo/redo: available for file modifications (not new files) when a snapshot exists.
+    const canRevert = !isNewFile &&
+        (name === 'edit_file' || name === 'write_file') &&
+        filePath != null &&
+        fileDiff != null &&
+        onFileRevert != null;
+    const handleRevert = useCallback(async (e) => {
+        e.stopPropagation();
+        if (!canRevert || isReverting)
+            return;
+        const content = isUndone ? fileDiff.modified : fileDiff.original;
+        setIsReverting(true);
+        try {
+            await onFileRevert(filePath, content);
+            const newUndone = !isUndone;
+            setIsUndoneLocal(newUndone);
+            onUndoToggle?.(id, newUndone);
+        }
+        finally {
+            setIsReverting(false);
+        }
+    }, [canRevert, isReverting, isUndone, fileDiff, filePath, onFileRevert, onUndoToggle, id]);
+    // Tools that expand to show details inline.
+    const EXPANDABLE = new Set([
+        'exec_command',
+        'web_fetch',
+        'rename_file',
+        'list_files',
+        'find_files',
+        'search_files',
+        'find_package',
+    ]);
+    const hasDetails = EXPANDABLE.has(name) && (input !== undefined || output !== undefined);
+    // read_molecule_doc: clicking the row opens the package's MOLECULE.md in the
+    // editor (filePath is derived from the input's package name).
+    const isDocOpen = name === 'read_molecule_doc' && filePath != null && onFileOpen != null;
+    // Only exec_command and web_fetch get the labeled IN / OUT pane treatment.
+    const showInOut = name === 'exec_command' || name === 'web_fetch';
+    const inContent = showInOut && input !== undefined ? renderIn(name, input) : null;
+    const outContent = showInOut && output !== undefined ? renderOut(name, output) : null;
+    const handleClick = (isNewFile || isDocOpen) && filePath && onFileOpen
+        ? () => {
+            onFileOpen(filePath);
+        }
+        : isFileDiff
+            ? () => {
+                onFileDiff(filePath, fileDiff);
+            }
+            : hasDetails
+                ? () => {
+                    setExpanded((e) => !e);
+                }
+                : undefined;
+    // ── save_plan: clickable row that opens the plan file in the editor ──────────
+    if (name === 'save_plan') {
+        const planOutput = (output ?? {});
+        const planPath = planOutput.path ?? null;
+        // Render as a standard tool card row — click opens the plan file
+        const planHandleClick = planPath && onFileOpen
+            ? () => {
+                onFileOpen(planPath);
+            }
+            : undefined;
+        return (_jsx("div", { className: className, style: { marginBottom: '4px' }, children: _jsxs("button", { type: "button", onClick: planHandleClick, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: '6px',
+                    background: 'none',
+                    border: 'none',
+                    cursor: planHandleClick ? '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, planPath, onFileOpen, onFileDoubleClick) })] }) }), planHandleClick && (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: "14", height: "14", style: {
+                            display: 'block',
+                            flexShrink: 0,
+                            marginTop: '3px',
+                            transition: '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" }) }))] }) }));
+    }
+    // ── ask_user: render interactive option list instead of a normal tool card ──
+    if (name === 'ask_user') {
+        const askInput = (input ?? {});
+        const askOutput = output;
+        const serverAwaiting = typeof askOutput === 'object' && askOutput?.status === 'awaiting_response';
+        const isResponded = typeof askOutput === 'string';
+        const [localAnswer, setLocalAnswer] = useState(null);
+        const isAwaiting = serverAwaiting && localAnswer === null;
+        const selectedAnswer = isResponded ? askOutput : localAnswer;
+        const [freeText, setFreeText] = useState('');
+        const [hoveredIdx, setHoveredIdx] = 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
+        // is parsed (final `tool_use`), the card appears fully formed. (Placed after
+        // the hooks above so the hook order stays stable across renders.)
+        if (!askInput.question)
+            return null;
+        const borderClr = isLight ? '#d0d7de' : '#3d444d';
+        const labelChar = (i) => String.fromCharCode(65 + i); // A, B, C, …
+        return (_jsxs("div", { className: className, style: {
+                marginBottom: '8px',
+                marginTop: '8px',
+                borderRadius: '8px',
+                border: `1px solid ${borderClr}`,
+                background: isLight ? '#f6f8fa' : 'rgba(255,255,255,0.04)',
+                overflow: 'hidden',
+            }, children: [_jsx("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, onClick: () => {
+                            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 && (_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: '4px',
+                        padding: '8px 12px',
+                        borderTop: `1px solid ${borderClr}`,
+                    }, children: [_jsx("input", { type: "text", value: freeText, onChange: (e) => setFreeText(e.target.value), onKeyDown: (e) => {
+                                if (e.key === 'Enter' && freeText.trim()) {
+                                    setLocalAnswer(freeText.trim());
+                                    onAskUserResponse?.(freeText.trim());
+                                    setFreeText('');
+                                }
+                            }, placeholder: (askInput.options?.length ?? 0) === 0
+                                ? t('ide.chat.askUserPlaceholderEmpty', undefined, {
+                                    defaultValue: 'Type your answer…',
+                                })
+                                : t('ide.chat.askUserPlaceholder', undefined, {
+                                    defaultValue: 'Or something else…',
+                                }), style: {
+                                flex: 1,
+                                minWidth: 0,
+                                padding: '5px 8px',
+                                borderRadius: '5px',
+                                border: `1px solid ${borderClr}`,
+                                background: 'transparent',
+                                color: 'inherit',
+                                // Deliberate iOS-zoom guard: a focused input below 16px makes iOS
+                                // Safari zoom the whole page on phone-width / touch-first viewports.
+                                fontSize: isNarrow || isCoarse ? '16px' : '12px',
+                                outline: 'none',
+                            } }), _jsx("button", { type: "button", disabled: !freeText.trim(), onClick: () => {
+                                if (freeText.trim()) {
+                                    setLocalAnswer(freeText.trim());
+                                    onAskUserResponse?.(freeText.trim());
+                                    setFreeText('');
+                                }
+                            }, onMouseEnter: (e) => {
+                                if (freeText.trim()) {
+                                    e.currentTarget.style.background = 'rgba(64,112,224,0.3)';
+                                    e.currentTarget.style.borderColor = 'rgba(64,112,224,0.65)';
+                                    e.currentTarget.style.color = '#6090f0';
+                                }
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.background = freeText.trim()
+                                    ? 'rgba(64,112,224,0.2)'
+                                    : 'transparent';
+                                e.currentTarget.style.borderColor = freeText.trim()
+                                    ? 'rgba(64,112,224,0.4)'
+                                    : 'transparent';
+                                e.currentTarget.style.color = freeText.trim() ? '#4070e0' : 'inherit';
+                            }, style: {
+                                // Touch floor for the free-text Send action (40px in this dense
+                                // composer row); fine pointers keep the compact 30px.
+                                height: isCoarse ? 40 : 30,
+                                padding: '0 10px',
+                                borderRadius: 6,
+                                border: freeText.trim()
+                                    ? '1px solid rgba(64,112,224,0.4)'
+                                    : '1px solid transparent',
+                                background: freeText.trim() ? 'rgba(64,112,224,0.2)' : 'transparent',
+                                color: freeText.trim() ? '#4070e0' : 'inherit',
+                                cursor: freeText.trim() ? 'pointer' : 'default',
+                                fontSize: '12px',
+                                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: {
+                        padding: '8px 12px',
+                        borderTop: `1px solid ${borderClr}`,
+                        fontSize: '12px',
+                        fontStyle: 'italic',
+                    }, children: selectedAnswer })), askInput.hint && (_jsx("div", { style: {
+                        padding: '8px 12px',
+                        borderTop: `1px solid ${borderClr}`,
+                        fontSize: '11px',
+                        fontStyle: 'italic',
+                        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: {
+                            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: {
+                    marginLeft: '14px',
+                    marginTop: '4px',
+                    marginBottom: '4px',
+                    borderRadius: '4px',
+                    overflowX: 'auto',
+                }, children: showInOut ? (_jsxs(_Fragment, { children: [inContent && (_jsxs("div", { style: { padding: '6px 10px' }, children: [_jsx("div", { className: cm.textMuted, style: {
+                                        fontSize: '9px',
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.6px',
+                                        marginBottom: '4px',
+                                        fontWeight: 600,
+                                    }, children: "IN" }), inContent] })), outContent && (_jsxs("div", { style: {
+                                padding: '6px 10px',
+                                borderTop: inContent ? '1px solid rgba(128,128,128,0.15)' : undefined,
+                            }, children: [_jsx("div", { className: cm.textMuted, style: {
+                                        fontSize: '9px',
+                                        textTransform: 'uppercase',
+                                        letterSpacing: '0.6px',
+                                        marginBottom: '4px',
+                                        fontWeight: 600,
+                                    }, children: "OUT" }), outContent] }))] })) : (_jsxs("div", { style: { padding: '6px 10px' }, children: [name === 'rename_file' && (_jsxs("pre", { style: PRE, children: [(input ?? {}).old_path ?? '', ' → ', (input ?? {}).new_path ?? ''] })), (name === 'list_files' || name === 'find_files' || name === 'search_files') &&
+                            output !== undefined &&
+                            renderOut(name, output), name === 'find_package' && output !== undefined && (_jsx(PackageResultRows, { results: packageResults(output), onFileOpen: onFileOpen }))] })) }))] }));
+});
+//# sourceMappingURL=ToolCallCard.js.map