orquesta-cli 0.1.13 → 0.1.14

package/src/ui/components/ToolSelector.tsx

@@ -1,215 +0,0 @@
-/**
- * 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

@@ -1,259 +0,0 @@
-/**
- * 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

@@ -1,159 +0,0 @@
-/**
- * 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;