orquesta-cli 0.1.12

package/src/ui/components/ToolSelector.tsx

@@ -0,0 +1,215 @@
+/**
+ * Tool Selector Component
+ *
+ * Allows enabling/disabling optional tool groups via /tool command
+ * UI style matches ModelSelector for consistency
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import SelectInput from 'ink-select-input';
+import { execSync } from 'child_process';
+import Spinner from 'ink-spinner';
+import { toolRegistry, OptionalToolGroup } from '../../tools/registry.js';
+import { getPlatform } from '../../utils/platform-utils.js';
+
+/**
+ * Check if browser is available for CDP connection
+ * CDP approach uses PowerShell to launch Chrome/Edge directly (no browser-server.exe needed)
+ */
+function isBrowserAvailable(): boolean {
+  const platform = getPlatform();
+
+  // Native Windows: browser-client.ts launches Chrome/Edge directly
+  // Actual browser detection happens at launch time
+  if (platform === 'native-windows') {
+    return true;
+  }
+
+  // WSL: browser-client.ts uses PowerShell to launch Windows Chrome/Edge
+  // Actual browser detection happens at launch time
+  if (platform === 'wsl') {
+    return true;
+  }
+
+  // Native Linux: check if Chrome/Chromium is installed
+  try {
+    execSync('which google-chrome || which chromium-browser || which chromium', { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+interface ToolSelectorProps {
+  onClose: () => void;
+}
+
+interface SelectItem {
+  label: string;
+  value: string;
+}
+
+export const ToolSelector: React.FC<ToolSelectorProps> = ({ onClose }) => {
+  const [toolGroups, setToolGroups] = useState<OptionalToolGroup[]>(() =>
+    toolRegistry.getOptionalToolGroups()
+  );
+  const [isToggling, setIsToggling] = useState(false);
+  const [togglingGroup, setTogglingGroup] = useState<{ name: string; enabling: boolean } | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  // Handle keyboard input
+  useInput((_input, key) => {
+    if (key.escape && !isToggling) {
+      onClose();
+    }
+    // Clear error message on any key press
+    if (errorMessage) {
+      setErrorMessage(null);
+    }
+  });
+
+  // Handle tool group selection (toggle)
+  const handleSelect = useCallback(
+    async (item: SelectItem) => {
+      if (isToggling) return;
+
+      const groupId = item.value;
+      const group = toolGroups.find(g => g.id === groupId);
+      const groupName = group?.name || groupId;
+      const isEnabling = !group?.enabled;
+
+      // Check browser availability when enabling browser tools (Linux only)
+      if (groupId === 'browser' && isEnabling && !isBrowserAvailable()) {
+        setErrorMessage('Chrome/Chromium not found. Please install Chrome or Chromium.');
+        return;
+      }
+
+      setIsToggling(true);
+      setTogglingGroup({ name: groupName, enabling: isEnabling });
+      setErrorMessage(null);
+
+      try {
+        const result = await toolRegistry.toggleToolGroup(groupId);
+        setToolGroups(toolRegistry.getOptionalToolGroups());
+
+        // Show error if validation failed
+        if (!result.success && result.error) {
+          setErrorMessage(result.error);
+        }
+      } finally {
+        setIsToggling(false);
+        setTogglingGroup(null);
+      }
+    },
+    [isToggling, toolGroups]
+  );
+
+  // Build menu items
+  const menuItems: SelectItem[] = toolGroups.map((group) => {
+    const statusIcon = group.enabled ? '●' : '○';
+    const statusText = group.enabled ? ' (enabled)' : '';
+    const toolCount = group.tools.length;
+
+    return {
+      label: `${statusIcon} ${group.name} (${toolCount} tools)${statusText}`,
+      value: group.id,
+    };
+  });
+
+  if (toolGroups.length === 0) {
+    return (
+      <Box flexDirection="column">
+        <Box borderStyle="single" borderColor="cyan" paddingX={1}>
+          <Text color="cyan" bold>
+            Optional Tools
+          </Text>
+        </Box>
+        <Box borderStyle="single" borderColor="gray" paddingX={1}>
+          <Text color="gray">No optional tools available.</Text>
+        </Box>
+        <Box marginTop={1}>
+          <Text dimColor>ESC: close</Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box flexDirection="column">
+      {/* Header */}
+      <Box borderStyle="single" borderColor="cyan" paddingX={1}>
+        <Text color="cyan" bold>
+          Optional Tools
+        </Text>
+      </Box>
+
+      {/* Performance Notice */}
+      <Box paddingX={1} marginBottom={1} flexDirection="column">
+        <Text color="yellow" dimColor>
+          ⚠ Too many tools can slow down performance. Enable only what you need.
+        </Text>
+      </Box>
+
+      {/* Tool Groups List */}
+      <Box borderStyle="single" borderColor="gray" paddingX={1}>
+        <SelectInput items={menuItems} onSelect={handleSelect} />
+      </Box>
+
+      {/* Legend */}
+      <Box marginTop={1} paddingX={1}>
+        <Text color="green">● enabled </Text>
+        <Text color="gray">○ disabled</Text>
+      </Box>
+
+      {/* Description of selected tools */}
+      {toolGroups.some((g) => g.enabled) && (
+        <Box paddingX={1}>
+          <Text color="yellow">Active: </Text>
+          <Text color="white">
+            {toolGroups
+              .filter((g) => g.enabled)
+              .map((g) => g.name)
+              .join(', ')}
+          </Text>
+        </Box>
+      )}
+
+      {/* Error Message */}
+      {errorMessage && (
+        <Box
+          marginTop={1}
+          borderStyle="single"
+          borderColor="red"
+          paddingX={1}
+          flexDirection="column"
+        >
+          <Text color="red" bold>
+            ✗ Enable Failed
+          </Text>
+          <Text color="white">{errorMessage}</Text>
+        </Box>
+      )}
+
+      {/* Loading indicator with spinner */}
+      {isToggling && togglingGroup && (
+        <Box marginTop={1} paddingX={1}>
+          <Text color="cyan">
+            <Spinner type="dots" />
+          </Text>
+          <Text color="yellow">
+            {' '}
+            {togglingGroup.enabling
+              ? `Starting ${togglingGroup.name}...`
+              : `Stopping ${togglingGroup.name}...`}
+          </Text>
+        </Box>
+      )}
+
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>↑↓: move | Enter: toggle | ESC: close</Text>
+      </Box>
+    </Box>
+  );
+};

package/src/ui/components/dialogs/ApprovalDialog.tsx

@@ -0,0 +1,259 @@
+/**
+ * Approval Dialog Component
+ *
+ * UI for requesting user approval before Tool execution in Supervised Mode
+ * - Approve: Approve this time only
+ * - Always Approve: Always approve this Tool in this session
+ * - Reject: Reject + Enter comment to send to AI
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { CustomTextInput } from '../CustomTextInput.js';
+import { logger } from '../../../utils/logger.js';
+
+export interface ApprovalDialogProps {
+  toolName: string;
+  args: Record<string, unknown>;
+  reason?: string;
+  onResponse: (result: 'approve' | 'always' | { reject: true; comment: string }) => void;
+}
+
+/**
+ * Format tool arguments for display
+ */
+function formatArgs(args: Record<string, unknown>): { key: string; value: string; isLong: boolean }[] {
+  const result: { key: string; value: string; isLong: boolean }[] = [];
+
+  for (const [key, value] of Object.entries(args)) {
+    if (value === undefined || value === null) continue;
+
+    let displayValue: string;
+    let isLong = false;
+
+    if (typeof value === 'string') {
+      // Truncate long strings
+      if (value.length > 200) {
+        displayValue = value.substring(0, 200) + '...';
+        isLong = true;
+      } else if (value.includes('\n')) {
+        // Multi-line content
+        const lines = value.split('\n');
+        if (lines.length > 10) {
+          displayValue = lines.slice(0, 10).join('\n') + '\n...';
+          isLong = true;
+        } else {
+          displayValue = value;
+          isLong = lines.length > 3;
+        }
+      } else {
+        displayValue = value;
+      }
+    } else if (typeof value === 'object') {
+      displayValue = JSON.stringify(value, null, 2);
+      isLong = displayValue.length > 100;
+    } else {
+      displayValue = String(value);
+    }
+
+    result.push({ key, value: displayValue, isLong });
+  }
+
+  return result;
+}
+
+/**
+ * Get icon for parameter key
+ */
+function getParamIcon(key: string): string {
+  const icons: Record<string, string> = {
+    file_path: '📁',
+    path: '📁',
+    content: '📝',
+    old_string: '➖',
+    new_string: '➕',
+    pattern: '🔍',
+    message: '💬',
+    reason: '💡',
+  };
+  return icons[key] || '•';
+}
+
+/**
+ * Approval Dialog - Tool execution approval dialog
+ */
+export const ApprovalDialog: React.FC<ApprovalDialogProps> = ({
+  toolName,
+  args,
+  reason,
+  onResponse,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isRejectMode, setIsRejectMode] = useState(false);
+  const [rejectComment, setRejectComment] = useState('');
+
+  logger.enter('ApprovalDialog', { toolName, argsKeys: Object.keys(args) });
+
+  const options = [
+    { label: 'Approve', description: 'Approve this tool execution', icon: '✅' },
+    { label: `Always Approve (${toolName})`, description: 'Always approve in this session', icon: '✅' },
+    { label: 'Reject', description: 'Reject + add comment', icon: '❌' },
+  ];
+
+  const handleSelect = useCallback(() => {
+    logger.flow('User selected option', { selectedIndex });
+
+    if (selectedIndex === 0) {
+      onResponse('approve');
+    } else if (selectedIndex === 1) {
+      onResponse('always');
+    } else if (selectedIndex === 2) {
+      setIsRejectMode(true);
+    }
+  }, [selectedIndex, onResponse]);
+
+  const handleRejectSubmit = useCallback((text: string) => {
+    if (!text.trim()) {
+      // Empty comment - just reject without comment
+      onResponse({ reject: true, comment: '' });
+      return;
+    }
+
+    logger.flow('User submitted reject comment', { commentLength: text.length });
+    onResponse({ reject: true, comment: text.trim() });
+  }, [onResponse]);
+
+  const handleRejectCancel = useCallback(() => {
+    logger.flow('User cancelled reject mode');
+    setIsRejectMode(false);
+    setRejectComment('');
+  }, []);
+
+  // Keyboard navigation
+  useInput((input, key) => {
+    if (isRejectMode) {
+      if (key.escape) {
+        handleRejectCancel();
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : options.length - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(prev => (prev < options.length - 1 ? prev + 1 : 0));
+    } else if (key.return) {
+      handleSelect();
+    } else if (input >= '1' && input <= '3') {
+      const numIndex = parseInt(input, 10) - 1;
+      if (numIndex >= 0 && numIndex < options.length) {
+        setSelectedIndex(numIndex);
+        // Auto-select after number key
+        setTimeout(() => {
+          if (numIndex === 2) {
+            setIsRejectMode(true);
+          } else {
+            onResponse(numIndex === 0 ? 'approve' : 'always');
+          }
+        }, 100);
+      }
+    }
+  }, { isActive: !isRejectMode });
+
+  const formattedArgs = formatArgs(args);
+
+  // Reject mode: comment input
+  if (isRejectMode) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="red" paddingX={1} paddingY={0}>
+        <Box marginBottom={1}>
+          <Text color="red" bold>❌ Reject Tool: {toolName}</Text>
+        </Box>
+        <Box>
+          <Text color="gray">Comment for AI (ESC: cancel, Enter: send): </Text>
+        </Box>
+        <Box>
+          <Text color="yellow">&gt; </Text>
+          <CustomTextInput
+            value={rejectComment}
+            onChange={setRejectComment}
+            onSubmit={handleRejectSubmit}
+            placeholder="Enter reason or alternative..."
+            focus={true}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Normal mode: approval selection
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} paddingY={0}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color="yellow" bold>🔧 Tool Execution Approval</Text>
+      </Box>
+
+      {/* Tool name */}
+      <Box>
+        <Text color="cyan" bold>{toolName}</Text>
+        {reason && (
+          <Text color="gray"> - {reason}</Text>
+        )}
+      </Box>
+
+      {/* Separator */}
+      <Box marginY={0}>
+        <Text color="gray">{'─'.repeat(50)}</Text>
+      </Box>
+
+      {/* Arguments */}
+      <Box flexDirection="column" marginBottom={1}>
+        {formattedArgs.map(({ key, value, isLong }, idx) => (
+          <Box key={idx} flexDirection={isLong ? 'column' : 'row'}>
+            <Text color="magenta">{getParamIcon(key)} {key}: </Text>
+            {isLong ? (
+              <Box marginLeft={2} flexDirection="column">
+                {value.split('\n').map((line, lineIdx) => (
+                  <Text key={lineIdx} color="white" dimColor>{line}</Text>
+                ))}
+              </Box>
+            ) : (
+              <Text color="white">{value}</Text>
+            )}
+          </Box>
+        ))}
+      </Box>
+
+      {/* Separator */}
+      <Box marginY={0}>
+        <Text color="gray">{'─'.repeat(50)}</Text>
+      </Box>
+
+      {/* Options */}
+      {options.map((option, index) => {
+        const isSelected = index === selectedIndex;
+        return (
+          <Box key={index}>
+            <Text color={isSelected ? 'cyan' : 'gray'}>
+              {isSelected ? '▸ ' : '  '}
+              [{index + 1}] {option.icon} {option.label}
+            </Text>
+            {isSelected && (
+              <Text color="gray" dimColor> - {option.description}</Text>
+            )}
+          </Box>
+        );
+      })}
+
+      {/* Help */}
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>
+          ↑↓ Move | Enter Select | 1-3 Number Select
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ApprovalDialog;

package/src/ui/components/dialogs/AskUserDialog.tsx

@@ -0,0 +1,159 @@
+/**
+ * Ask User Dialog Component
+ *
+ * Multiple choice UI displayed when LLM asks user a question
+ * Phase 2: Approval mode / Autonomous mode
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { CustomTextInput } from '../CustomTextInput.js';
+import { logger } from '../../../utils/logger.js';
+import type { AskUserRequest, AskUserResponse } from '../../../tools/llm/simple/ask-user-tool.js';
+
+export interface AskUserDialogProps {
+  request: AskUserRequest;
+  onResponse: (response: AskUserResponse) => void;
+}
+
+/**
+ * Ask User Dialog - Dialog providing choices to user
+ * - Choices provided by LLM (2-4 options)
+ * - + "Other (direct input)" option (always shown)
+ */
+export const AskUserDialog: React.FC<AskUserDialogProps> = ({ request, onResponse }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isOtherMode, setIsOtherMode] = useState(false);
+  const [customText, setCustomText] = useState('');
+
+  logger.enter('AskUserDialog', { question: request.question, optionCount: request.options.length });
+
+  // Options provided by LLM + "Other (direct input)" option (always added)
+  const allOptions = [...request.options, 'Other (direct input)'];
+
+  const handleSelect = useCallback(() => {
+    logger.flow('User selected option', { selectedIndex });
+
+    // Check if "Other" was selected (always last option)
+    if (selectedIndex === request.options.length) {
+      setIsOtherMode(true);
+      return;
+    }
+
+    const selectedOption = request.options[selectedIndex];
+    if (selectedOption) {
+      onResponse({
+        selectedOption,
+        isOther: false,
+      });
+    }
+  }, [selectedIndex, request.options, onResponse]);
+
+  const handleOtherSubmit = useCallback((text: string) => {
+    if (!text.trim()) return;
+
+    logger.flow('User submitted custom text', { textLength: text.length });
+    onResponse({
+      selectedOption: 'Other',
+      isOther: true,
+      customText: text.trim(),
+    });
+  }, [onResponse]);
+
+  const handleOtherCancel = useCallback(() => {
+    logger.flow('User cancelled other mode');
+    setIsOtherMode(false);
+    setCustomText('');
+  }, []);
+
+  // Keyboard navigation
+  useInput((input, key) => {
+    if (isOtherMode) {
+      if (key.escape) {
+        handleOtherCancel();
+      }
+      return;
+    }
+
+    if (key.upArrow) {
+      setSelectedIndex(prev => (prev > 0 ? prev - 1 : allOptions.length - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(prev => (prev < allOptions.length - 1 ? prev + 1 : 0));
+    } else if (key.return) {
+      handleSelect();
+    } else if (input >= '1' && input <= '9') {
+      const numIndex = parseInt(input, 10) - 1;
+      if (numIndex >= 0 && numIndex < allOptions.length) {
+        setSelectedIndex(numIndex);
+        // Auto-select after number key
+        setTimeout(() => {
+          // Last option is always "Other"
+          if (numIndex === request.options.length) {
+            setIsOtherMode(true);
+          } else {
+            const option = request.options[numIndex];
+            if (option) {
+              onResponse({
+                selectedOption: option,
+                isOther: false,
+              });
+            }
+          }
+        }, 100);
+      }
+    }
+  }, { isActive: !isOtherMode });
+
+  // Other mode: text input
+  if (isOtherMode) {
+    return (
+      <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} paddingY={0}>
+        <Box marginBottom={1}>
+          <Text color="yellow" bold>💬 {request.question}</Text>
+        </Box>
+        <Box>
+          <Text color="gray">Custom input (ESC: cancel): </Text>
+          <CustomTextInput
+            value={customText}
+            onChange={setCustomText}
+            onSubmit={handleOtherSubmit}
+            placeholder="Enter your response..."
+            focus={true}
+          />
+        </Box>
+      </Box>
+    );
+  }
+
+  // Normal mode: option selection
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} paddingY={0}>
+      <Box marginBottom={1}>
+        <Text color="yellow" bold>💬 {request.question}</Text>
+      </Box>
+
+      {allOptions.map((option, index) => {
+        const isSelected = index === selectedIndex;
+        const isOtherOption = index === request.options.length; // Last option is always "Other"
+
+        return (
+          <Box key={index}>
+            <Text color={isSelected ? 'cyan' : 'gray'}>
+              {isSelected ? '▸ ' : '  '}
+              [{index + 1}] {option}
+              {isOtherOption && <Text color="gray" dimColor> (free response)</Text>}
+            </Text>
+          </Box>
+        );
+      })}
+
+      <Box marginTop={1}>
+        <Text color="gray" dimColor>
+          ↑↓ Move | Enter Select | 1-{allOptions.length} Number Select
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default AskUserDialog;