@qduc/term2 0.14.0 → 0.16.0

package/dist/components/prompt/ApprovalPrompt.js

@@ -5,9 +5,11 @@ import { READ_FILE_SESSION_APPROVE_ANSWER, supportsFolderSessionRead, } from '..
 import { resolveSessionReadFolder } from '../../services/approval/session-read-grant-target.js';
 import { generateDiff } from '../../utils/output/diff.js';
 import { TOOL_NAME_APPLY_PATCH, TOOL_NAME_ASK_USER, TOOL_NAME_SEARCH_REPLACE } from '../../tools/tool-names.js';
-import { ASK_USER_CUSTOM_ANSWER_LABEL, ASK_USER_DECLINE_LABEL, ASK_USER_DECLINE_RESULT, ASK_USER_SUBMIT_LABEL, ASK_USER_PREV_QUESTION_LABEL, ASK_USER_NEXT_QUESTION_LABEL, } from '../../tools/agent/ask-user-constants.js';
+import { ASK_USER_CUSTOM_ANSWER_LABEL, ASK_USER_SUBMIT_LABEL } from '../../tools/agent/ask-user-constants.js';
 import DiffView from '../layout/DiffView.js';
 import { requestsDockerHostControl } from '../../utils/shell/sandbox/docker-host-control.js';
+import { COLOR_ACCENT, COLOR_BORDER, COLOR_DANGER, COLOR_SUCCESS, COLOR_TEXT, COLOR_TEXT_MUTED, COLOR_TEXT_SUBTLE, COLOR_WARNING, } from '../theme.js';
+import { MenuFooter, SelectionMarker } from '../common/MenuContainer.js';
 function parseShellApprovalArgs(input) {
     if (input === null || input === undefined) {
         return null;
@@ -52,12 +54,12 @@ function parseShellApprovalArgs(input) {
     };
 }
 const operationLabels = {
-    create_file: { label: 'CREATE', color: 'green' },
-    update_file: { label: 'UPDATE', color: 'yellow' },
-    delete_file: { label: 'DELETE', color: 'red' },
+    create_file: { label: 'CREATE', color: COLOR_SUCCESS },
+    update_file: { label: 'UPDATE', color: COLOR_WARNING },
+    delete_file: { label: 'DELETE', color: COLOR_DANGER },
 };
 const ApplyPatchPrompt = ({ args }) => {
-    const op = operationLabels[args.type] || { label: args.type, color: 'white' };
+    const op = operationLabels[args.type] || { label: args.type, color: COLOR_TEXT };
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, null,
             React.createElement(Text, { color: op.color, bold: true },
@@ -73,18 +75,18 @@ const ShellPrompt = ({ args }) => {
     const cmd = args.command ?? args.commands ?? '';
     return (React.createElement(Box, { flexDirection: "column", marginLeft: 2, marginTop: 1 },
         React.createElement(Box, null,
-            React.createElement(Text, { bold: true, color: "cyan" }, cmd)),
+            React.createElement(Text, { bold: true, color: COLOR_ACCENT }, cmd)),
         args.cwd && (React.createElement(Box, null,
-            React.createElement(Text, { color: "#64748b" },
+            React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
                 "Cwd: ",
                 args.cwd))),
         args.timeout_ms && (React.createElement(Box, null,
-            React.createElement(Text, { color: "#64748b" },
+            React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
                 "Timeout: ",
                 args.timeout_ms,
                 "ms"))),
         args.max_output_length && (React.createElement(Box, null,
-            React.createElement(Text, { color: "#64748b" },
+            React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
                 "Max output: ",
                 args.max_output_length,
                 " chars")))));
@@ -92,14 +94,14 @@ const ShellPrompt = ({ args }) => {
 const SearchReplacePrompt = ({ args }) => {
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, null,
-            React.createElement(Text, { color: "yellow", bold: true }, "[SEARCH & REPLACE]"),
+            React.createElement(Text, { color: COLOR_WARNING, bold: true }, "[SEARCH & REPLACE]"),
             React.createElement(Text, null,
                 " ",
                 args.path)),
         (args.replacements || []).map((rep, idx) => {
             const diff = generateDiff(rep.search_content, rep.replace_content);
             return (React.createElement(Box, { key: idx, flexDirection: "column", marginTop: idx > 0 ? 1 : 0 },
-                args.replacements.length > 1 && React.createElement(Text, { color: "gray" },
+                args.replacements.length > 1 && React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
                     "Replacement #",
                     idx + 1,
                     ":"),
@@ -114,7 +116,7 @@ const CreateFilePrompt = ({ args }) => {
         .join('\n');
     return (React.createElement(Box, { flexDirection: "column" },
         React.createElement(Box, null,
-            React.createElement(Text, { color: "green", bold: true }, "[CREATE]"),
+            React.createElement(Text, { color: COLOR_SUCCESS, bold: true }, "[CREATE]"),
             React.createElement(Text, null,
                 " ",
                 args.path)),
@@ -122,18 +124,95 @@ const CreateFilePrompt = ({ args }) => {
 };
 const LLMAdvisory = ({ advisory }) => {
     const isSystem = advisory.source === 'system';
-    const borderColor = isSystem ? 'red' : advisory.approved ? 'green' : 'yellow';
-    const headerColor = isSystem ? 'red' : advisory.approved ? 'green' : 'yellow';
+    const advisoryColor = isSystem ? COLOR_DANGER : advisory.approved ? COLOR_SUCCESS : COLOR_WARNING;
+    const borderColor = advisoryColor;
+    const headerColor = advisoryColor;
     const label = isSystem ? 'System Safety Check: BLOCKED ' : `AI Advisor: ${advisory.approved ? 'SAFE ' : 'CAUTION '}`;
     return (React.createElement(Box, { flexDirection: "column", marginTop: 1, paddingX: 1, paddingY: 0, borderStyle: "round", borderColor: borderColor },
         React.createElement(Box, null,
             React.createElement(Text, { color: headerColor, bold: true }, label),
-            React.createElement(Text, { color: "#94a3b8" },
+            React.createElement(Text, { color: COLOR_TEXT_MUTED },
                 " (",
                 isSystem ? 'automated heuristic' : advisory.model,
                 ") ")),
-        React.createElement(Text, { italic: true, color: "#cbd5e1" }, isSystem ? advisory.reasoning : `"${advisory.reasoning}"`)));
+        React.createElement(Text, { italic: true, color: COLOR_TEXT_MUTED }, isSystem ? advisory.reasoning : `"${advisory.reasoning}"`)));
 };
+/**
+ * The shared two-pane approval shape: an option list on the left, and a
+ * description of the highlighted option on the right. Previously only the
+ * ask_user branch explained its options; every other approval was a bare
+ * list, so a reviewer had to already know what "Allow this folder for this
+ * session" does. Reusing one layout means every approval gets that
+ * explanation for free.
+ */
+const TwoPaneApprovalLayout = ({ leftWidth, left, rightTitle, rightDescription }) => (React.createElement(Box, { flexDirection: "row", width: "100%", marginTop: 1 },
+    React.createElement(Box, { flexDirection: "column", width: leftWidth, flexShrink: 0, flexGrow: 0 }, left),
+    React.createElement(Box, { flexDirection: "column", flexGrow: 1, flexShrink: 1, paddingLeft: 2, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, borderLeft: true, borderColor: COLOR_BORDER },
+        React.createElement(Text, { bold: true, color: COLOR_WARNING }, rightTitle),
+        React.createElement(Box, { marginTop: 1 }, rightDescription ? (React.createElement(Text, { color: COLOR_TEXT }, rightDescription)) : (React.createElement(Text, { color: COLOR_TEXT_SUBTLE, italic: true }, "No description available."))))));
+/**
+ * Descriptions for the standard (non-ask_user) approval menus. Several
+ * contexts reuse the same label ("Allow once", "Reject") for different scope,
+ * so the description depends on which approval is showing, not just the
+ * label text.
+ */
+function describeStandardApprovalOption(item, ctx) {
+    if (ctx.isDockerHostControlApproval) {
+        switch (item) {
+            case 'Allow this command':
+                return 'Run this Docker host control command once.';
+            case 'Deny':
+                return 'Block this command.';
+            case 'Allow for this session':
+                return 'Allow Docker host control commands for the rest of this session without asking again.';
+            case 'Always allow for this project':
+                return 'Always allow Docker host control commands in this project, persisted across sessions.';
+        }
+    }
+    if (ctx.isSandboxNetworkApproval) {
+        switch (item) {
+            case 'Allow once':
+                return 'Allow network access to this host for this command only.';
+            case 'Deny':
+                return 'Block network access to this host.';
+            case 'Allow host for this session':
+                return 'Allow this host for the rest of this session.';
+            case 'Always allow host for this project':
+                return 'Always allow this host in this project, persisted across sessions.';
+        }
+    }
+    if (ctx.isOutsideWorkspaceEdit) {
+        switch (item) {
+            case 'Allow once':
+                return 'Allow this edit this one time.';
+            case 'Allow this file for this session':
+                return 'Allow edits to this exact file for the rest of this session.';
+            case 'Allow this folder for this session':
+                return 'Allow edits anywhere under this folder for the rest of this session.';
+            case 'Reject':
+                return 'Deny this edit.';
+        }
+    }
+    if (ctx.isFolderReadApproval) {
+        switch (item) {
+            case 'Allow once':
+                return 'Allow this read this one time.';
+            case 'Allow this folder for this session':
+                return ctx.folderReadGrantPath
+                    ? `Allow read_file, grep, and glob to read ${ctx.folderReadGrantPath} for the rest of this session.`
+                    : 'Allow read_file, grep, and glob to read this folder for the rest of this session.';
+            case 'Reject':
+                return 'Deny this read.';
+        }
+    }
+    switch (item) {
+        case 'Approve':
+            return 'Allow this tool call.';
+        case 'Reject':
+            return 'Deny this tool call.';
+    }
+    return '';
+}
 const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer, onNavigateQuestion, currentQuestionIndex = 0, waitingForAskUserAnswer = false, }) => {
     const [selectedIndex, setSelectedIndex] = React.useState(0);
     const [selectedIndices, setSelectedIndices] = React.useState(new Set());
@@ -245,20 +324,13 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
         if (isDeniedReadShell) {
             return deniedReadMenuItems;
         }
-        const items = isMultiSelect
-            ? [...askUserOptionLabels, ASK_USER_SUBMIT_LABEL, ASK_USER_CUSTOM_ANSWER_LABEL, ASK_USER_DECLINE_LABEL]
-            : [...askUserOptionLabels, ASK_USER_CUSTOM_ANSWER_LABEL, ASK_USER_DECLINE_LABEL];
-        // Add navigation items only when there are multiple questions
-        if (hasMultipleQuestions) {
-            items.push(ASK_USER_PREV_QUESTION_LABEL);
-            items.push(ASK_USER_NEXT_QUESTION_LABEL);
-        }
-        return items;
+        return isMultiSelect
+            ? [...askUserOptionLabels, ASK_USER_SUBMIT_LABEL, ASK_USER_CUSTOM_ANSWER_LABEL]
+            : [...askUserOptionLabels, ASK_USER_CUSTOM_ANSWER_LABEL];
     }, [
         isAskUser,
         isMultiSelect,
         askUserOptionLabels,
-        hasMultipleQuestions,
         deniedReadMenuItems,
         isDeniedReadShell,
         isFolderReadApproval,
@@ -273,13 +345,69 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
         setSelectedIndices(new Set());
     }, [currentQuestionIndex, approval.argumentsText, approval.toolName]);
     useInput((input, key) => {
-        if (isAskUser && key.escape) {
+        if (key.escape) {
+            // Escape cancels/interrupts the pending action for every approval type.
+            // The parent routes it (ask_user → graceful cancel; anything else →
+            // interrupt the turn). Kept ahead of the `waitingForAskUserAnswer` guard
+            // to match the historical ask_user Esc behavior exactly.
             onCancel?.();
             return;
         }
         if (waitingForAskUserAnswer) {
             return;
         }
+        if (isAskUser) {
+            // Question navigation with p / n or left / right arrow keys
+            if (hasMultipleQuestions) {
+                if (input.toLowerCase() === 'p' || key.leftArrow) {
+                    onNavigateQuestion?.('prev');
+                    return;
+                }
+                if (input.toLowerCase() === 'n' || key.rightArrow) {
+                    onNavigateQuestion?.('next');
+                    return;
+                }
+            }
+            // Direct number key selection: '1'..'9'
+            const num = parseInt(input, 10);
+            if (!isNaN(num) && num >= 1 && num <= askUserMenuItems.length && String(num) === input) {
+                const targetIndex = num - 1;
+                const selected = askUserMenuItems[targetIndex];
+                if (selected === ASK_USER_CUSTOM_ANSWER_LABEL) {
+                    onTypeAnswer?.();
+                    return;
+                }
+                if (isMultiSelect) {
+                    if (selected === ASK_USER_SUBMIT_LABEL) {
+                        const chosen = Array.from(selectedIndices)
+                            .map((idx) => askUserOptions[idx]?.label)
+                            .filter((label) => typeof label === 'string');
+                        onApprove(JSON.stringify(chosen));
+                        return;
+                    }
+                    if (targetIndex < askUserOptions.length) {
+                        setSelectedIndices((prev) => {
+                            const next = new Set(prev);
+                            if (next.has(targetIndex)) {
+                                next.delete(targetIndex);
+                            }
+                            else {
+                                next.add(targetIndex);
+                            }
+                            return next;
+                        });
+                        setSelectedIndex(targetIndex);
+                        return;
+                    }
+                }
+                else {
+                    if (targetIndex < askUserOptions.length) {
+                        onApprove(askUserOptions[targetIndex]?.label);
+                        return;
+                    }
+                }
+            }
+        }
         if (key.upArrow) {
             setSelectedIndex((prev) => (prev === 0 ? askUserMenuItems.length - 1 : prev - 1));
         }
@@ -288,7 +416,7 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
         }
         // Spacebar for multi-select toggle
         if (input === ' ' && isMultiSelect) {
-            // Only toggle if it's an actual option (not a navigation/submit/custom/decline item)
+            // Only toggle if it's an actual option (not submit/custom item)
             if (selectedIndex < askUserOptions.length) {
                 setSelectedIndices((prev) => {
                     const next = new Set(prev);
@@ -348,15 +476,6 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
                 if (selected === ASK_USER_CUSTOM_ANSWER_LABEL) {
                     onTypeAnswer?.();
                 }
-                else if (selected === ASK_USER_DECLINE_LABEL) {
-                    onApprove(ASK_USER_DECLINE_RESULT);
-                }
-                else if (selected === ASK_USER_PREV_QUESTION_LABEL) {
-                    onNavigateQuestion?.('prev');
-                }
-                else if (selected === ASK_USER_NEXT_QUESTION_LABEL) {
-                    onNavigateQuestion?.('next');
-                }
                 else if (isMultiSelect) {
                     if (selected === ASK_USER_SUBMIT_LABEL) {
                         const chosen = Array.from(selectedIndices)
@@ -399,23 +518,25 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
             }
         }
     });
-    // Special handling for max turns exceeded prompt
-    if (approval.toolName === 'max_turns_exceeded') {
+    // A system check-in, not a tool approval: continue or stop, no denial reason.
+    if (approval.checkIn) {
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { color: "yellow", bold: true }, approval.argumentsText),
+            React.createElement(Text, { color: COLOR_WARNING, bold: true }, approval.argumentsText),
             React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-                React.createElement(Text, null, "Do you want to continue?"),
+                React.createElement(Text, null, approval.checkIn === 'run_budget'
+                    ? 'Continue with one finite budget extension, or stop?'
+                    : 'Continue with one finite extension, or stop?'),
                 React.createElement(Box, { flexDirection: "column", marginLeft: 1 },
-                    React.createElement(Text, { color: selectedIndex === 0 ? 'green' : undefined },
-                        selectedIndex === 0 ? '❯ ' : '  ',
-                        "Yes"),
-                    React.createElement(Text, { color: selectedIndex === 1 ? 'red' : undefined },
-                        selectedIndex === 1 ? '❯ ' : '  ',
-                        "No")))));
+                    React.createElement(Box, null,
+                        React.createElement(SelectionMarker, { selected: selectedIndex === 0 }),
+                        React.createElement(Text, { color: selectedIndex === 0 ? COLOR_SUCCESS : undefined }, "Continue")),
+                    React.createElement(Box, null,
+                        React.createElement(SelectionMarker, { selected: selectedIndex === 1 }),
+                        React.createElement(Text, { color: selectedIndex === 1 ? COLOR_DANGER : undefined }, "Stop"))))));
     }
     // Try to parse and render arguments nicely based on tool type
     let content = (React.createElement(Box, { marginTop: 1 },
-        React.createElement(Text, { bold: true, color: "cyan" }, approval.argumentsText)));
+        React.createElement(Text, { bold: true, color: COLOR_ACCENT }, approval.argumentsText)));
     if (approval.toolName === TOOL_NAME_APPLY_PATCH) {
         let parsedApplyPatch = null;
         try {
@@ -467,110 +588,145 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
         // Provide default descriptions for built-in actions
         if (!highlightedDescription) {
             if (highlightedMenuItem === ASK_USER_CUSTOM_ANSWER_LABEL) {
-                highlightedDescription = 'Type a custom write-in response.';
-            }
-            else if (highlightedMenuItem === ASK_USER_DECLINE_LABEL) {
-                highlightedDescription = 'Decline to answer and skip this question.';
+                highlightedDescription =
+                    'Discuss or provide a custom response. The agent will respond and can re-ask if needed.';
             }
             else if (highlightedMenuItem === ASK_USER_SUBMIT_LABEL) {
                 highlightedDescription = 'Submit the selected options.';
             }
-            else if (highlightedMenuItem === ASK_USER_PREV_QUESTION_LABEL) {
-                highlightedDescription = 'Navigate to the previous question.';
-            }
-            else if (highlightedMenuItem === ASK_USER_NEXT_QUESTION_LABEL) {
-                highlightedDescription = 'Navigate to the next question.';
-            }
         }
+        const rightPaneTitle = isOptionHighlighted
+            ? highlightedOption?.label ?? 'Option'
+            : highlightedMenuItem === ASK_USER_CUSTOM_ANSWER_LABEL
+                ? 'Something else…'
+                : highlightedMenuItem === ASK_USER_SUBMIT_LABEL
+                    ? 'Submit answer'
+                    : highlightedMenuItem ?? 'Details';
         // Calculate dynamic left column width
         const leftColWidth = Math.max(...askUserMenuItems.map((item, idx) => {
             const isOption = idx < askUserOptions.length;
-            const isRecommended = idx === 0 && isOption;
-            const isNavigation = item === ASK_USER_PREV_QUESTION_LABEL || item === ASK_USER_NEXT_QUESTION_LABEL;
-            let label = item;
-            if (item === ASK_USER_CUSTOM_ANSWER_LABEL || item === ASK_USER_DECLINE_LABEL || isNavigation) {
-                // leave as is
-            }
-            else if (isMultiSelect && isOption) {
-                const checkbox = selectedIndices.has(idx) ? '[x] ' : '[ ] ';
-                label = checkbox + item + (isRecommended ? ' (recommended)' : '');
-            }
-            else {
-                label = item + (isRecommended ? ' (recommended)' : '');
+            let label = `${idx + 1}. ${item}`;
+            if (isMultiSelect && isOption) {
+                label = `${idx + 1}. [x] ${item}`;
             }
-            return label.length + 4; // Add padding/arrow prefix
-        }), 40);
+            return label.length + 6; // Add padding/gutter prefix
+        }), 36);
+        const askUserFooterHints = [
+            [
+                isMultiSelect ? `1-${askUserOptions.length}` : `1-${askUserMenuItems.length}`,
+                isMultiSelect ? 'toggle' : 'select',
+            ],
+            ...(hasMultipleQuestions ? [['p/n', 'prev/next question']] : []),
+            ...(isMultiSelect ? [['space', 'toggle']] : []),
+            ['⏎', isMultiSelect ? 'submit' : 'confirm'],
+            ['esc', 'cancel'],
+        ];
         content = (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, { borderStyle: "round", borderColor: "yellow", paddingX: 1, paddingY: 0 },
-                React.createElement(Text, { color: "yellow", bold: true },
-                    totalQuestions > 1 ? `[Question ${currentQuestionIndex + 1}/${totalQuestions}] ` : '',
-                    questionText)),
-            waitingForAskUserAnswer ? (React.createElement(Box, { marginTop: 1, marginLeft: 1 },
-                React.createElement(Text, { color: "cyan" }, "\u276F Type your custom answer in the prompt below..."))) : (React.createElement(Box, { flexDirection: "row", width: "100%", marginTop: 1 },
-                React.createElement(Box, { flexDirection: "column", width: leftColWidth }, askUserMenuItems.map((item, idx) => {
+            totalQuestions > 1 && (React.createElement(Box, { marginLeft: 1 },
+                React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+                    "Question ",
+                    currentQuestionIndex + 1,
+                    " of ",
+                    totalQuestions))),
+            React.createElement(Box, { borderStyle: "round", borderColor: COLOR_WARNING, paddingX: 1, paddingY: 0 },
+                React.createElement(Text, { color: COLOR_WARNING, bold: true }, questionText)),
+            waitingForAskUserAnswer && (React.createElement(Box, { marginTop: 1, marginLeft: 1 },
+                React.createElement(Text, { color: COLOR_ACCENT }, "\u276F Type your custom answer in the prompt below..."))),
+            React.createElement(TwoPaneApprovalLayout, { leftWidth: leftColWidth, left: askUserMenuItems.map((item, idx) => {
                     const isOption = idx < askUserOptions.length;
                     const isRecommended = idx === 0 && isOption;
-                    const isNavigation = item === ASK_USER_PREV_QUESTION_LABEL || item === ASK_USER_NEXT_QUESTION_LABEL;
-                    let label = item;
-                    if (item === ASK_USER_CUSTOM_ANSWER_LABEL || item === ASK_USER_DECLINE_LABEL) {
-                        // leave as is
-                    }
-                    else if (isNavigation) {
-                        // leave as is
-                    }
-                    else if (isMultiSelect && isOption) {
-                        const checkbox = selectedIndices.has(idx) ? '[x] ' : '[ ] ';
-                        label = checkbox + item + (isRecommended ? ' (recommended)' : '');
-                    }
-                    else {
-                        label = item + (isRecommended ? ' (recommended)' : '');
+                    const isSelected = selectedIndex === idx;
+                    let checkbox = '';
+                    if (isMultiSelect && isOption) {
+                        checkbox = selectedIndices.has(idx) ? '[x] ' : '[ ] ';
                     }
-                    const color = isNavigation
-                        ? selectedIndex === idx
-                            ? 'cyan'
-                            : undefined
-                        : selectedIndex === idx
-                            ? item === ASK_USER_DECLINE_LABEL
-                                ? 'red'
-                                : item === ASK_USER_CUSTOM_ANSWER_LABEL
-                                    ? 'cyan'
-                                    : 'green'
-                            : isRecommended
-                                ? 'yellow'
-                                : undefined;
-                    return (React.createElement(Text, { key: item, color: color },
-                        selectedIndex === idx ? '❯ ' : '  ',
-                        label));
-                })),
-                React.createElement(Box, { flexDirection: "column", flexGrow: 1, paddingLeft: 2, borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, borderLeft: true, borderColor: "#334155" },
-                    React.createElement(Text, { bold: true, color: "yellow" }, "HELP & DETAILS"),
-                    React.createElement(Box, { marginTop: 1 }, highlightedDescription ? (React.createElement(Text, { color: "white" }, highlightedDescription)) : (React.createElement(Text, { color: "#64748b", italic: true }, "No description available."))))))));
+                    const color = isSelected
+                        ? item === ASK_USER_CUSTOM_ANSWER_LABEL
+                            ? COLOR_ACCENT
+                            : COLOR_SUCCESS
+                        : undefined;
+                    return (React.createElement(Box, { key: item, flexDirection: "row", width: "100%" },
+                        React.createElement(SelectionMarker, { selected: isSelected }),
+                        React.createElement(Box, { width: 2, flexShrink: 0 },
+                            React.createElement(Text, { color: COLOR_TEXT_SUBTLE, dimColor: true }, isRecommended ? '★' : ' ')),
+                        React.createElement(Box, { flexDirection: "row", flexShrink: 1, flexWrap: "wrap" },
+                            React.createElement(Text, { color: color, bold: isSelected },
+                                idx + 1,
+                                ". ",
+                                checkbox,
+                                item))));
+                }), rightTitle: rightPaneTitle, rightDescription: highlightedDescription }),
+            React.createElement(Box, { marginTop: 1, marginLeft: 1 },
+                React.createElement(MenuFooter, { hints: askUserFooterHints }))));
     }
     if (isDeniedReadShell && deniedRead) {
         // Compact the denied path for display (replace $HOME with ~).
         const displayPath = deniedRead.deniedPath.replace(os.homedir(), '~');
         const displaySuggestedParent = deniedRead.suggestedParent.replace(os.homedir(), '~');
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { color: "red", bold: true }, "Sandbox blocked read access:"),
-            React.createElement(Text, { color: "red" },
+            React.createElement(Text, { color: COLOR_DANGER, bold: true }, "Sandbox blocked read access:"),
+            React.createElement(Text, { color: COLOR_DANGER },
                 " ",
                 displayPath),
-            content,
-            React.createElement(Box, { flexDirection: "column", marginTop: 1, marginLeft: 1 }, deniedReadMenuItems.map((item, idx) => {
-                const color = idx === 0 ? 'red' : item === 'Run unsandboxed once' ? 'yellow' : 'green';
-                return (React.createElement(Text, { key: item, color: selectedIndex === idx ? color : undefined },
-                    selectedIndex === idx ? '❯ ' : '  ',
-                    item));
-            })),
-            !deniedRead.sensitive && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#64748b" },
-                    "\"Allow and remember\" persists this path for this project: ",
-                    displaySuggestedParent))),
-            deniedRead.sensitive && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#64748b" }, "This is a sensitive path \u2014 \"allow once\" is available but remember is suppressed.")))));
+            React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, borderLeft: true, borderColor: COLOR_DANGER, paddingLeft: 1, marginTop: 1 },
+                content,
+                React.createElement(Box, { flexDirection: "column", marginTop: 1 }, deniedReadMenuItems.map((item, idx) => {
+                    const color = idx === 0 ? COLOR_DANGER : item === 'Run unsandboxed once' ? COLOR_WARNING : COLOR_SUCCESS;
+                    return (React.createElement(Box, { key: item },
+                        React.createElement(SelectionMarker, { selected: selectedIndex === idx }),
+                        React.createElement(Text, { color: selectedIndex === idx ? color : undefined }, item)));
+                })),
+                !deniedRead.sensitive && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+                        "\"Allow and remember\" persists this path for this project: ",
+                        displaySuggestedParent))),
+                deniedRead.sensitive && (React.createElement(Box, { marginTop: 1 },
+                    React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, "This is a sensitive path \u2014 \"allow once\" is available but remember is suppressed."))))));
     }
+    // Left column width scales with the longest option label so the description
+    // pane's border lands in the same place regardless of which approval this is.
+    const plainApprovalLeftWidth = Math.max(...askUserMenuItems.map((item) => item.length + 4), 20);
+    const plainApprovalSection = !isAskUser && !isDeniedReadShell && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+        React.createElement(Text, null, isDockerHostControlApproval
+            ? 'Allow Docker host access?'
+            : isOutsideWorkspaceEdit
+                ? 'Allow permission to edit this file outside the workspace?'
+                : isFolderReadApproval
+                    ? 'Allow this read outside the workspace?'
+                    : 'Allow this action?'),
+        React.createElement(TwoPaneApprovalLayout, { leftWidth: plainApprovalLeftWidth, left: askUserMenuItems.map((item, index) => {
+                const isSelected = selectedIndex === index;
+                const isDangerLabel = item === 'Reject' || item === 'Deny';
+                return (React.createElement(Box, { key: item },
+                    React.createElement(SelectionMarker, { selected: isSelected }),
+                    React.createElement(Text, { color: isSelected ? (isDangerLabel ? COLOR_DANGER : COLOR_SUCCESS) : undefined }, item)));
+            }), rightTitle: askUserMenuItems[selectedIndex] ?? 'Option', rightDescription: describeStandardApprovalOption(askUserMenuItems[selectedIndex] ?? '', {
+                isDockerHostControlApproval,
+                isSandboxNetworkApproval,
+                isOutsideWorkspaceEdit,
+                isFolderReadApproval,
+                folderReadGrantPath,
+            }) }),
+        isFolderReadApproval && folderReadGrantPath && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+                "\"Allow this folder\" lets read_file, grep and glob read ",
+                folderReadGrantPath,
+                " for the rest of this session."))),
+        isOutsideWorkspaceEdit && approval.outsideWorkspaceEdit && (React.createElement(Box, { marginTop: 1 },
+            React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+                "File scope permits only ",
+                approval.outsideWorkspaceEdit.path,
+                "; folder scope permits edits beneath",
+                ' ',
+                approval.outsideWorkspaceEdit.folder,
+                " for this session.")))));
+    const bodyContent = (React.createElement(React.Fragment, null,
+        content,
+        isDockerHostControlApproval && (React.createElement(Text, { color: COLOR_DANGER }, "This command can control your Docker daemon. It can bypass filesystem and network sandbox restrictions, mount host files, run privileged or persistent workloads, and is effectively equivalent to host access.")),
+        approval.llmAdvisory && React.createElement(LLMAdvisory, { advisory: approval.llmAdvisory }),
+        plainApprovalSection));
     return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Text, { color: "yellow" }, isDockerHostControlApproval ? (React.createElement(Text, { bold: true, color: "red" }, "Docker Host Control")) : (React.createElement(React.Fragment, null,
+        React.createElement(Text, { color: COLOR_WARNING }, isDockerHostControlApproval ? (React.createElement(Text, { bold: true, color: COLOR_DANGER }, "Docker Host Control")) : (React.createElement(React.Fragment, null,
             approval.agentName,
             isOutsideWorkspaceEdit
                 ? ' is requesting permission to edit a file outside the workspace with '
@@ -580,33 +736,7 @@ const ApprovalPrompt = ({ approval, onApprove, onReject, onCancel, onTypeAnswer,
                         ? ' wants to run in unsandboxed mode: '
                         : ' wants to run: ',
             React.createElement(Text, { bold: true }, approval.toolName)))),
-        content,
-        isDockerHostControlApproval && (React.createElement(Text, { color: "red" }, "This command can control your Docker daemon. It can bypass filesystem and network sandbox restrictions, mount host files, run privileged or persistent workloads, and is effectively equivalent to host access.")),
-        approval.llmAdvisory && React.createElement(LLMAdvisory, { advisory: approval.llmAdvisory }),
-        !isAskUser && !isDeniedReadShell && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
-            React.createElement(Text, null, isDockerHostControlApproval
-                ? 'Allow Docker host access?'
-                : isOutsideWorkspaceEdit
-                    ? 'Allow permission to edit this file outside the workspace?'
-                    : isFolderReadApproval
-                        ? 'Allow this read outside the workspace?'
-                        : 'Allow this action?'),
-            React.createElement(Box, { flexDirection: "column", marginLeft: 1 }, askUserMenuItems.map((item, index) => (React.createElement(Text, { key: item, color: selectedIndex === index ? (item === 'Reject' || item === 'Deny' ? 'red' : 'green') : undefined },
-                selectedIndex === index ? '❯ ' : '  ',
-                item)))),
-            isFolderReadApproval && folderReadGrantPath && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#64748b" },
-                    "\"Allow this folder\" lets read_file, grep and glob read ",
-                    folderReadGrantPath,
-                    " for the rest of this session."))),
-            isOutsideWorkspaceEdit && approval.outsideWorkspaceEdit && (React.createElement(Box, { marginTop: 1 },
-                React.createElement(Text, { color: "#64748b" },
-                    "File scope permits only ",
-                    approval.outsideWorkspaceEdit.path,
-                    "; folder scope permits edits beneath",
-                    ' ',
-                    approval.outsideWorkspaceEdit.folder,
-                    " for this session.")))))));
+        isDockerHostControlApproval ? (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderTop: false, borderBottom: false, borderRight: false, borderLeft: true, borderColor: COLOR_DANGER, paddingLeft: 1, marginTop: 1 }, bodyContent)) : (bodyContent)));
 };
 export default ApprovalPrompt;
 //# sourceMappingURL=ApprovalPrompt.js.map