dexto 1.3.0 → 1.5.0

package/dist/cli/ink-cli/components/ApprovalPrompt.js

@@ -1,55 +1,192 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text, useInput } from 'ink';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useImperativeHandle, useRef, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { ElicitationForm } from './ElicitationForm.js';
+import { DiffPreview, CreateFilePreview } from './renderers/index.js';
+import { isEditWriteTool } from '../utils/toolUtils.js';
 /**
  * Compact approval prompt component that displays above the input area
- * Shows three options in a vertical list: Yes, Yes for Session, and No
+ * Shows options based on approval type:
+ * - Tool confirmation: Yes, Yes (Session), No
+ * - Bash with patterns: Yes (once), pattern options, Yes (all bash), No
+ * - Elicitation: Form with input fields
  */
-export function ApprovalPrompt({ approval, onApprove, onDeny, onCancel }) {
+export const ApprovalPrompt = forwardRef(({ approval, onApprove, onDeny, onCancel }, ref) => {
     const isCommandConfirmation = approval.type === 'command_confirmation';
-    const [selectedOption, setSelectedOption] = useState('yes');
-    // Handle keyboard navigation (vertical)
-    useInput((input, key) => {
-        if (key.upArrow) {
-            // Move up (skip yes-session for command confirmations)
-            setSelectedOption((current) => {
-                if (current === 'yes')
-                    return 'no';
-                if (current === 'yes-session')
-                    return 'yes';
-                // no -> yes-session (or yes for command confirmations)
-                return isCommandConfirmation ? 'yes' : 'yes-session';
-            });
-        }
-        else if (key.downArrow) {
-            // Move down (skip yes-session for command confirmations)
-            setSelectedOption((current) => {
-                if (current === 'yes')
-                    return isCommandConfirmation ? 'no' : 'yes-session';
-                if (current === 'yes-session')
-                    return 'no';
-                return 'yes'; // no -> yes (wrap)
+    const isElicitation = approval.type === 'elicitation';
+    const isDirectoryAccess = approval.type === 'directory_access';
+    // Extract suggested patterns for bash tools
+    const suggestedPatterns = approval.metadata.suggestedPatterns ?? [];
+    const hasBashPatterns = suggestedPatterns.length > 0;
+    // Check if this is an edit/write file tool
+    const toolName = approval.metadata.toolName;
+    const isEditOrWriteTool = isEditWriteTool(toolName);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    // Ref for elicitation form
+    const elicitationFormRef = useRef(null);
+    // Use ref to avoid stale closure issues in handleInput
+    const selectedIndexRef = useRef(0);
+    // Build the list of options based on approval type
+    const options = [];
+    if (hasBashPatterns) {
+        // Bash tool with pattern suggestions
+        options.push({ id: 'yes', label: 'Yes (once)' });
+        suggestedPatterns.forEach((pattern, i) => {
+            options.push({
+                id: `pattern-${i}`,
+                label: `Yes, allow "${pattern}"`,
             });
-        }
-        else if (key.return) {
-            // Enter key - confirm selection
-            if (selectedOption === 'yes') {
-                onApprove(false);
+        });
+        options.push({ id: 'yes-session', label: 'Yes, allow all bash' });
+        options.push({ id: 'no', label: 'No' });
+    }
+    else if (isCommandConfirmation) {
+        // Command confirmation (no session option)
+        options.push({ id: 'yes', label: 'Yes' });
+        options.push({ id: 'no', label: 'No' });
+    }
+    else if (isDirectoryAccess) {
+        // Directory access - offer session-scoped access
+        const parentDir = approval.metadata.parentDir;
+        const dirLabel = parentDir ? ` "${parentDir}"` : '';
+        options.push({ id: 'yes', label: 'Yes (once)' });
+        options.push({ id: 'yes-session', label: `Yes, allow${dirLabel} (session)` });
+        options.push({ id: 'no', label: 'No' });
+    }
+    else if (isEditOrWriteTool) {
+        // Edit/write file tools - offer "accept all edits" mode instead of session
+        options.push({ id: 'yes', label: 'Yes' });
+        options.push({ id: 'yes-accept-edits', label: 'Yes, and accept all edits' });
+        options.push({ id: 'no', label: 'No' });
+    }
+    else {
+        // Standard tool confirmation
+        options.push({ id: 'yes', label: 'Yes' });
+        options.push({ id: 'yes-session', label: 'Yes (Session)' });
+        options.push({ id: 'no', label: 'No' });
+    }
+    // Keep ref in sync with state
+    useEffect(() => {
+        selectedIndexRef.current = selectedIndex;
+    }, [selectedIndex]);
+    // Helper to get the option at current index
+    const getCurrentOption = () => options[selectedIndexRef.current];
+    // Expose handleInput method via ref
+    useImperativeHandle(ref, () => ({
+        handleInput: (input, key) => {
+            // For elicitation, delegate to the form
+            if (isElicitation && elicitationFormRef.current) {
+                return elicitationFormRef.current.handleInput(input, key);
             }
-            else if (selectedOption === 'yes-session') {
-                onApprove(true);
+            if (key.upArrow) {
+                setSelectedIndex((current) => current === 0 ? options.length - 1 : current - 1);
+                return true;
             }
-            else {
-                onDeny();
+            else if (key.downArrow) {
+                setSelectedIndex((current) => current === options.length - 1 ? 0 : current + 1);
+                return true;
             }
-        }
-        else if (key.escape) {
-            // Escape key - cancel
-            onCancel();
-        }
-    }, { isActive: true });
+            else if (key.return) {
+                const option = getCurrentOption();
+                if (!option)
+                    return false;
+                if (option.id === 'yes') {
+                    onApprove({});
+                }
+                else if (option.id === 'yes-session') {
+                    // For directory access, remember the directory; otherwise remember the tool
+                    if (isDirectoryAccess) {
+                        onApprove({ rememberDirectory: true });
+                    }
+                    else {
+                        onApprove({ rememberChoice: true });
+                    }
+                }
+                else if (option.id === 'yes-accept-edits') {
+                    // Approve and enable "accept all edits" mode
+                    onApprove({ enableAcceptEditsMode: true });
+                }
+                else if (option.id === 'no') {
+                    onDeny();
+                }
+                else if (option.id.startsWith('pattern-')) {
+                    // Extract pattern index and get the pattern string
+                    const patternIndex = parseInt(option.id.replace('pattern-', ''), 10);
+                    const pattern = suggestedPatterns[patternIndex];
+                    if (pattern) {
+                        onApprove({ rememberPattern: pattern });
+                    }
+                    else {
+                        onApprove({});
+                    }
+                }
+                return true;
+            }
+            else if (key.shift && key.tab && isEditOrWriteTool) {
+                // Shift+Tab on edit/write tool: approve and enable "accept all edits" mode
+                onApprove({ enableAcceptEditsMode: true });
+                return true;
+            }
+            else if (key.escape) {
+                onCancel();
+                return true;
+            }
+            return false;
+        },
+    }), [
+        isElicitation,
+        isEditOrWriteTool,
+        isDirectoryAccess,
+        options,
+        suggestedPatterns,
+        onApprove,
+        onDeny,
+        onCancel,
+    ]);
+    // For elicitation, render the form
+    if (isElicitation) {
+        const metadata = approval.metadata;
+        return (_jsx(ElicitationForm, { ref: elicitationFormRef, metadata: metadata, onSubmit: (formData) => onApprove({ formData }), onCancel: onCancel }));
+    }
     // Extract information from metadata based on approval type
-    const toolName = approval.metadata.toolName;
     const command = approval.metadata.command;
-    return (_jsxs(Box, { borderStyle: "single", borderColor: "yellow", paddingX: 1, paddingY: 0, flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", marginBottom: 0, children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "yellow", bold: true, children: ["\uD83D\uDD10 Approval:", ' '] }), toolName && _jsx(Text, { color: "cyan", children: toolName })] }), isCommandConfirmation && command && (_jsxs(Box, { flexDirection: "row", marginTop: 0, children: [_jsx(Text, { color: "gray", children: '  Command: ' }), _jsx(Text, { color: "red", children: command })] }))] }), _jsxs(Box, { flexDirection: "column", marginTop: 0, children: [_jsx(Box, { children: selectedOption === 'yes' ? (_jsxs(Text, { color: "green", bold: true, children: ['  ▶ ', "Yes"] })) : (_jsxs(Text, { color: "gray", children: ['    ', "Yes"] })) }), !isCommandConfirmation && (_jsx(Box, { children: selectedOption === 'yes-session' ? (_jsxs(Text, { color: "green", bold: true, children: ['  ▶ ', "Yes (Session)"] })) : (_jsxs(Text, { color: "gray", children: ['    ', "Yes (Session)"] })) })), _jsx(Box, { children: selectedOption === 'no' ? (_jsxs(Text, { color: "red", bold: true, children: ['  ▶ ', "No"] })) : (_jsxs(Text, { color: "gray", children: ['    ', "No"] })) })] }), _jsx(Box, { marginTop: 0, children: _jsxs(Text, { color: "gray", dimColor: true, children: ['  ', "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"] }) })] }));
-}
+    const displayPreview = approval.metadata.displayPreview;
+    // Render preview based on display type
+    const renderPreview = () => {
+        if (!displayPreview)
+            return null;
+        switch (displayPreview.type) {
+            case 'diff': {
+                const isOverwrite = toolName === 'custom--write_file' ||
+                    toolName === 'internal--write_file' ||
+                    toolName === 'write_file';
+                return (_jsx(DiffPreview, { data: displayPreview, headerType: isOverwrite ? 'overwrite' : 'edit' }));
+            }
+            case 'shell':
+                // For shell preview, just show the command (no output yet)
+                return (_jsxs(Box, { marginBottom: 1, flexDirection: "row", children: [_jsx(Text, { color: "gray", children: "$ " }), _jsx(Text, { color: "yellowBright", children: displayPreview.command }), displayPreview.isBackground && _jsx(Text, { color: "gray", children: " (background)" })] }));
+            case 'file':
+                // Use enhanced file preview with full content for new file creation
+                if (displayPreview.operation === 'create' && displayPreview.content) {
+                    return _jsx(CreateFilePreview, { data: displayPreview });
+                }
+                // Fallback for other file operations
+                return (_jsx(Box, { marginBottom: 1, children: _jsxs(Text, { color: "gray", children: [displayPreview.operation === 'read' &&
+                                `Read ${displayPreview.lineCount ?? 'file'} lines`, displayPreview.operation === 'write' &&
+                                `Write to ${displayPreview.path}`, displayPreview.operation === 'delete' &&
+                                `Delete ${displayPreview.path}`] }) }));
+            default:
+                return null;
+        }
+    };
+    // Extract directory access metadata
+    const directoryPath = approval.metadata.path;
+    const parentDir = approval.metadata.parentDir;
+    const operation = approval.metadata.operation;
+    return (_jsxs(Box, { paddingX: 0, paddingY: 0, flexDirection: "column", children: [_jsx(Box, { flexDirection: "column", marginBottom: 0, children: isDirectoryAccess ? (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "yellowBright", bold: true, children: ["\uD83D\uDD10 Directory Access:", ' '] }), _jsx(Text, { color: "cyan", children: parentDir || directoryPath })] }), _jsxs(Box, { flexDirection: "row", marginTop: 0, children: [_jsx(Text, { color: "gray", children: '  ' }), _jsxs(Text, { color: "gray", children: [toolName ? `"${toolName}"` : 'Tool', " wants to", ' ', operation || 'access', " files outside working directory"] })] })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { flexDirection: "row", children: [_jsxs(Text, { color: "yellowBright", bold: true, children: ["\uD83D\uDD10 Approval:", ' '] }), toolName && _jsx(Text, { color: "cyan", children: toolName })] }), isCommandConfirmation && command && (_jsxs(Box, { flexDirection: "row", marginTop: 0, children: [_jsx(Text, { color: "gray", children: '  Command: ' }), _jsx(Text, { color: "red", children: command })] }))] })) }), renderPreview(), _jsx(Box, { flexDirection: "column", marginTop: 0, children: options.map((option, index) => {
+                    const isSelected = index === selectedIndex;
+                    const isNo = option.id === 'no';
+                    return (_jsx(Box, { children: isSelected ? (_jsxs(Text, { color: isNo ? 'red' : 'green', bold: true, children: ['  ▶ ', option.label] })) : (_jsxs(Text, { color: "gray", children: ['    ', option.label] })) }, option.id));
+                }) }), _jsx(Box, { marginTop: 0, children: _jsxs(Text, { color: "gray", children: ['  ', "\u2191\u2193 to select \u2022 Enter to confirm \u2022 Esc to cancel"] }) })] }));
+});
+ApprovalPrompt.displayName = 'ApprovalPrompt';

package/dist/cli/ink-cli/components/CustomInput.js

@@ -44,7 +44,7 @@ export default function CustomInput({ value, onChange, onSubmit, placeholder, is
         // Empty input - highlight first character of placeholder
         const firstChar = placeholder[0] || ' ';
         const rest = placeholder.slice(1);
-        return (_jsxs(Text, { children: [_jsx(Text, { color: "black", backgroundColor: "green", children: firstChar }), _jsx(Text, { dimColor: true, children: rest })] }));
+        return (_jsxs(Text, { children: [_jsx(Text, { color: "black", backgroundColor: "green", children: firstChar }), _jsx(Text, { color: "gray", children: rest })] }));
     }
     // Has value - highlight character after end (space)
     return (_jsxs(Text, { children: [value, _jsx(Text, { color: "black", backgroundColor: "green", children: ' ' })] }));

package/dist/cli/ink-cli/components/EditableMultiLineInput.js

@@ -104,17 +104,17 @@ export default function EditableMultiLineInput({ value, onChange, onSubmit, plac
         const prefix = lineIdx === 0 ? '» ' : '  ';
         if (cursorCol < 0) {
             // No cursor on this line
-            return (_jsxs(Text, { children: [_jsx(Text, { color: "magenta", children: prefix }), _jsx(Text, { children: line || ' ' })] }, lineIdx));
+            return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: prefix }), _jsx(Text, { children: line || ' ' })] }, lineIdx));
         }
         // Cursor on this line - highlight character at cursor
         const before = line.slice(0, cursorCol);
         const atCursor = line.charAt(cursorCol) || ' ';
         const after = line.slice(cursorCol + 1);
-        return (_jsxs(Text, { children: [_jsx(Text, { color: "magenta", children: prefix }), _jsx(Text, { children: before }), _jsx(Text, { backgroundColor: "green", color: "black", children: atCursor }), _jsx(Text, { children: after })] }, lineIdx));
+        return (_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: prefix }), _jsx(Text, { children: before }), _jsx(Text, { backgroundColor: "green", color: "black", children: atCursor }), _jsx(Text, { children: after })] }, lineIdx));
     };
     // Show placeholder if empty
     if (!value && placeholder) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "magenta", children: '» ' }), _jsx(Text, { backgroundColor: "green", color: "black", children: ' ' }), _jsxs(Text, { dimColor: true, children: [" ", placeholder] })] }), _jsx(Text, { dimColor: true, children: "Multi-line mode \u2022 Cmd/Ctrl+Enter to submit \u2022 Shift+Enter for single-line" })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { color: "cyan", children: '» ' }), _jsx(Text, { backgroundColor: "green", color: "black", children: ' ' }), _jsxs(Text, { color: "gray", children: [" ", placeholder] })] }), _jsx(Text, { color: "gray", children: "Multi-line mode \u2022 Cmd/Ctrl+Enter to submit \u2022 Shift+Enter for single-line" })] }));
     }
-    return (_jsxs(Box, { flexDirection: "column", children: [lines.map((line, idx) => renderLine(line, idx)), _jsx(Text, { dimColor: true, children: "Multi-line mode \u2022 Cmd/Ctrl+Enter to submit \u2022 Shift+Enter for single-line" })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [lines.map((line, idx) => renderLine(line, idx)), _jsx(Text, { color: "gray", children: "Multi-line mode \u2022 Cmd/Ctrl+Enter to submit \u2022 Shift+Enter for single-line" })] }));
 }

package/dist/cli/ink-cli/components/ElicitationForm.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ElicitationForm Component
+ * Renders a form for ask_user/elicitation requests in the CLI
+ * Supports string, number, boolean, and enum field types
+ */
+import React from 'react';
+import type { Key } from '../hooks/useInputOrchestrator.js';
+import type { ElicitationMetadata } from '@dexto/core';
+export interface ElicitationFormHandle {
+    handleInput: (input: string, key: Key) => boolean;
+}
+interface ElicitationFormProps {
+    metadata: ElicitationMetadata;
+    onSubmit: (formData: Record<string, unknown>) => void;
+    onCancel: () => void;
+}
+/**
+ * Form component for elicitation/ask_user requests
+ */
+export declare const ElicitationForm: React.ForwardRefExoticComponent<ElicitationFormProps & React.RefAttributes<ElicitationFormHandle>>;
+export {};
+//# sourceMappingURL=ElicitationForm.d.ts.map

package/dist/cli/ink-cli/components/ElicitationForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElicitationForm.d.ts","sourceRoot":"","sources":["../../../../src/cli/ink-cli/components/ElicitationForm.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA0E,MAAM,OAAO,CAAC;AAE/F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,kCAAkC,CAAC;AAC5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAEvD,MAAM,WAAW,qBAAqB;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC;CACrD;AAED,UAAU,oBAAoB;IAC1B,QAAQ,EAAE,mBAAmB,CAAC;IAC9B,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACtD,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAWD;;GAEG;AACH,eAAO,MAAM,eAAe,oGAygB3B,CAAC"}