orquesta-cli 0.1.12

package/src/ui/hooks/atFileProcessor.ts

@@ -0,0 +1,167 @@
+/**
+ * @ File Processor
+ *
+ * Utilities for detecting @ triggers and processing file selections
+ */
+
+import * as fs from 'fs/promises';
+import * as path from 'path';
+
+export interface AtTriggerInfo {
+  detected: boolean;
+  position: number;
+  filter: string;
+}
+
+/**
+ * Detect '@' trigger in input string
+ * Returns position and filter text after @
+ */
+export function detectAtTrigger(input: string): AtTriggerInfo {
+  // Find '@' at start or after space
+  const atMatch = input.match(/(^|[\s])@([^\s]*?)$/);
+
+  if (!atMatch) {
+    return { detected: false, position: -1, filter: '' };
+  }
+
+  const position = atMatch.index! + atMatch[1]!.length; // Position of '@'
+  const filter = atMatch[2] || ''; // Text after '@'
+
+  return {
+    detected: true,
+    position,
+    filter,
+  };
+}
+
+/**
+ * Insert file paths into input string at cursor position
+ * Removes the '@' trigger and filter text
+ * Ensures cursor is positioned right after the inserted path for continued typing
+ */
+export function insertFilePaths(
+  input: string,
+  atPosition: number,
+  filterLength: number,
+  filePaths: string[]
+): string {
+  // Remove '@filter' from input
+  const before = input.slice(0, atPosition);
+  const after = input.slice(atPosition + 1 + filterLength);
+
+  // Format file paths as @path1 @path2 @path3
+  const formattedPaths = filePaths.map((p) => `@${p}`).join(' ');
+
+  // Insert paths with space after for continued typing
+  // If there's text after the cursor, trim the result
+  // Otherwise, keep trailing space so user can continue typing immediately
+  if (after.trim()) {
+    return `${before}${formattedPaths} ${after}`.trim();
+  } else {
+    // No text after cursor - add space for continued typing
+    return `${before}${formattedPaths} `;
+  }
+}
+
+/**
+ * Result of processing @file references
+ */
+export interface ProcessedMessage {
+  /** The processed message with file contents included */
+  content: string;
+  /** List of files that were successfully read */
+  includedFiles: string[];
+  /** List of files that failed to read */
+  failedFiles: string[];
+}
+
+/**
+ * Extract @path references from a message
+ * Matches patterns like @/path/to/file.ts or @relative/path.js
+ */
+export function extractFileReferences(input: string): string[] {
+  // Match @followed by a path (absolute or relative, with optional extension)
+  // Stops at whitespace or end of string
+  const regex = /@([^\s@]+)/g;
+  const matches: string[] = [];
+  let match;
+
+  while ((match = regex.exec(input)) !== null) {
+    const filePath = match[1];
+    // Filter out obvious non-paths (single characters, etc.)
+    if (filePath && filePath.length > 1 && (filePath.includes('/') || filePath.includes('.'))) {
+      matches.push(filePath);
+    }
+  }
+
+  return matches;
+}
+
+/**
+ * Process a message by reading @file references and including their contents
+ * Returns the processed message with file contents appended
+ */
+export async function processFileReferences(input: string): Promise<ProcessedMessage> {
+  const fileRefs = extractFileReferences(input);
+
+  if (fileRefs.length === 0) {
+    return {
+      content: input,
+      includedFiles: [],
+      failedFiles: [],
+    };
+  }
+
+  const includedFiles: string[] = [];
+  const failedFiles: string[] = [];
+  const fileContents: string[] = [];
+
+  for (const filePath of fileRefs) {
+    try {
+      // Resolve path (relative to cwd)
+      const resolvedPath = path.resolve(process.cwd(), filePath);
+
+      // Security: Prevent path traversal attacks
+      if (!resolvedPath.startsWith(process.cwd())) {
+        failedFiles.push(filePath);
+        continue;
+      }
+
+      // Check if file exists
+      const stat = await fs.stat(resolvedPath);
+
+      if (stat.isDirectory()) {
+        // For directories, list contents instead
+        const entries = await fs.readdir(resolvedPath);
+        fileContents.push(`\n--- Directory: ${filePath} ---\n${entries.join('\n')}\n---`);
+        includedFiles.push(filePath);
+      } else {
+        // Read file content
+        const content = await fs.readFile(resolvedPath, 'utf-8');
+        const ext = path.extname(filePath).slice(1) || 'txt';
+        fileContents.push(`\n--- File: ${filePath} ---\n\`\`\`${ext}\n${content}\n\`\`\`\n---`);
+        includedFiles.push(filePath);
+      }
+    } catch (error) {
+      failedFiles.push(filePath);
+    }
+  }
+
+  // Build final message
+  // Remove @path references from original message and append file contents
+  let cleanedInput = input;
+  for (const filePath of new Set(fileRefs)) {
+    cleanedInput = cleanedInput.replaceAll(`@${filePath}`, `[${filePath}]`);
+  }
+
+  const finalContent = fileContents.length > 0
+    ? `${cleanedInput}\n\n<attached_files>${fileContents.join('\n')}</attached_files>`
+    : cleanedInput;
+
+  return {
+    content: finalContent,
+    includedFiles,
+    failedFiles,
+  };
+}

package/src/ui/hooks/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Hooks barrel export
+ */
+
+export * from './atFileProcessor.js';
+export * from './useFileList.js';
+export * from './slashCommandProcessor.js';
+export * from './useFileBrowserState.js';
+export * from './useCommandBrowserState.js';
+export * from './usePlanExecution.js';
+export * from './useInputHistory.js';

package/src/ui/hooks/slashCommandProcessor.ts

@@ -0,0 +1,174 @@
+/**
+ * Slash Command Processor
+ *
+ * Utilities for detecting slash command triggers and processing command selections
+ */
+
+export interface SlashCommandInfo {
+  detected: boolean;
+  position: number;
+  partialCommand: string;
+  fullCommand: string | null;
+  args: string;
+}
+
+export interface CommandMetadata {
+  name: string;
+  description: string;
+  argsHint?: string;
+  aliases?: string[];
+  handler?: (args: string) => void | Promise<void>;
+}
+
+/**
+ * Available slash commands with descriptions
+ */
+export const SLASH_COMMANDS: CommandMetadata[] = [
+  {
+    name: '/exit',
+    description: 'Exit the application',
+    aliases: ['/quit'],
+  },
+  {
+    name: '/clear',
+    description: 'Clear conversation and TODOs',
+  },
+  {
+    name: '/compact',
+    description: 'Compact conversation to free up context',
+  },
+  {
+    name: '/settings',
+    description: 'Open settings menu',
+  },
+  {
+    name: '/model',
+    description: 'Switch between LLM models',
+  },
+  {
+    name: '/load',
+    description: 'Load a saved session',
+  },
+  {
+    name: '/docs',
+    description: 'Download framework documentation (agno, adk)',
+  },
+  {
+    name: '/tool',
+    description: 'Enable/disable optional tools (Browser, Background)',
+    aliases: ['/tools'],
+  },
+  {
+    name: '/usage',
+    description: 'Show token usage statistics',
+  },
+  {
+    name: '/help',
+    description: 'Show help message',
+  },
+];
+
+/**
+ * Detect slash command trigger in input string
+ * Returns position, partial command, and full command if complete
+ */
+export function detectSlashTrigger(input: string): SlashCommandInfo {
+  // Only match a single '/' at the start of input (no spaces before)
+  // Explicitly reject '//' or multiple slashes
+  if (input.startsWith('//')) {
+    return {
+      detected: false,
+      position: -1,
+      partialCommand: '',
+      fullCommand: null,
+      args: '',
+    };
+  }
+
+  const slashMatch = input.match(/^\/([^\s]*)([\s](.*))?$/);
+
+  if (!slashMatch) {
+    return {
+      detected: false,
+      position: -1,
+      partialCommand: '',
+      fullCommand: null,
+      args: '',
+    };
+  }
+
+  const partialCommand = slashMatch[1] || '';
+  const args = slashMatch[3] || '';
+  const fullInput = `/${partialCommand}`;
+
+  // Check if this is a complete command (including aliases)
+  const matchedCommand = SLASH_COMMANDS.find(
+    (cmd) => cmd.name === fullInput || cmd.aliases?.includes(fullInput)
+  );
+
+  return {
+    detected: true,
+    position: 0,
+    partialCommand,
+    fullCommand: matchedCommand ? matchedCommand.name : null,
+    args,
+  };
+}
+
+/**
+ * Filter commands based on partial input
+ * Returns up to maxResults commands that match the partial command
+ * Includes both primary commands and aliases
+ */
+export function filterCommands(
+  partialCommand: string,
+  maxResults: number = 10
+): CommandMetadata[] {
+  if (!partialCommand) {
+    return SLASH_COMMANDS.slice(0, maxResults);
+  }
+
+  const filtered = SLASH_COMMANDS.filter((cmd) => {
+    const searchTerm = `/${partialCommand.toLowerCase()}`;
+    // Match primary command or any alias
+    return (
+      cmd.name.toLowerCase().startsWith(searchTerm) ||
+      cmd.aliases?.some((alias) => alias.toLowerCase().startsWith(searchTerm))
+    );
+  });
+
+  return filtered.slice(0, maxResults);
+}
+
+/**
+ * Check if a command is valid and complete
+ * Validates both primary commands and aliases
+ */
+export function isValidCommand(input: string): boolean {
+  const trimmed = input.trim();
+  return SLASH_COMMANDS.some(
+    (cmd) =>
+      trimmed.startsWith(cmd.name) ||
+      cmd.aliases?.some((alias) => trimmed.startsWith(alias))
+  );
+}
+
+/**
+ * Get argument hint for a specific command
+ */
+export function getCommandArgsHint(commandName: string): string | undefined {
+  const command = SLASH_COMMANDS.find((cmd) => cmd.name === commandName);
+  return command?.argsHint;
+}
+
+/**
+ * Insert selected command into input
+ * Replaces the partial command with the full command
+ */
+export function insertSlashCommand(
+  _input: string,
+  selectedCommand: string
+): string {
+  // Replace everything with the selected command and add a space
+  return `${selectedCommand} `;
+}

package/src/ui/hooks/useCommandBrowserState.ts

@@ -0,0 +1,97 @@
+/**
+ * useCommandBrowserState Hook
+ *
+ * Manages command browser state for slash commands
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { detectSlashTrigger, insertSlashCommand } from './slashCommandProcessor.js';
+
+export interface CommandBrowserState {
+  showCommandBrowser: boolean;
+  partialCommand: string;
+  commandArgs: string;
+}
+
+export interface CommandBrowserActions {
+  handleCommandSelect: (command: string, shouldSubmit: boolean, input: string, onSubmit: (value: string) => void) => string | null;
+  handleCommandBrowserCancel: () => void;
+  resetCommandBrowser: () => void;
+}
+
+export function useCommandBrowserState(
+  input: string,
+  isProcessing: boolean
+): CommandBrowserState & CommandBrowserActions {
+  const [showCommandBrowser, setShowCommandBrowser] = useState(false);
+  const [partialCommand, setPartialCommand] = useState('');
+  const [commandArgs, setCommandArgs] = useState('');
+
+  // Monitor input for '/' slash command trigger
+  useEffect(() => {
+    if (isProcessing) {
+      return;
+    }
+
+    if (!input) {
+      if (showCommandBrowser) {
+        setShowCommandBrowser(false);
+        setPartialCommand('');
+        setCommandArgs('');
+      }
+      return;
+    }
+
+    const slashInfo = detectSlashTrigger(input);
+
+    if (slashInfo.detected && !showCommandBrowser) {
+      setShowCommandBrowser(true);
+      setPartialCommand(slashInfo.partialCommand);
+      setCommandArgs(slashInfo.args);
+    } else if (slashInfo.detected && showCommandBrowser) {
+      setPartialCommand(slashInfo.partialCommand);
+      setCommandArgs(slashInfo.args);
+    } else if (!slashInfo.detected && showCommandBrowser) {
+      setShowCommandBrowser(false);
+      setPartialCommand('');
+      setCommandArgs('');
+    }
+  }, [input, isProcessing, showCommandBrowser]);
+
+  const handleCommandSelect = useCallback(
+    (command: string, shouldSubmit: boolean, currentInput: string, onSubmit: (value: string) => void): string | null => {
+      setShowCommandBrowser(false);
+      setPartialCommand('');
+      setCommandArgs('');
+
+      if (shouldSubmit) {
+        onSubmit(command);
+        return null;
+      } else {
+        return insertSlashCommand(currentInput, command);
+      }
+    },
+    []
+  );
+
+  const handleCommandBrowserCancel = useCallback(() => {
+    setShowCommandBrowser(false);
+    setPartialCommand('');
+    setCommandArgs('');
+  }, []);
+
+  const resetCommandBrowser = useCallback(() => {
+    setShowCommandBrowser(false);
+    setPartialCommand('');
+    setCommandArgs('');
+  }, []);
+
+  return {
+    showCommandBrowser,
+    partialCommand,
+    commandArgs,
+    handleCommandSelect,
+    handleCommandBrowserCancel,
+    resetCommandBrowser,
+  };
+}

package/src/ui/hooks/useFileBrowserState.ts

@@ -0,0 +1,116 @@
+/**
+ * useFileBrowserState Hook
+ *
+ * Manages file browser state and file list caching
+ */
+
+import { useState, useEffect, useCallback } from 'react';
+import { loadFileList, FileItem } from './useFileList.js';
+import { detectAtTrigger, insertFilePaths } from './atFileProcessor.js';
+import { logger } from '../../utils/logger.js';
+
+export interface FileBrowserState {
+  showFileBrowser: boolean;
+  atPosition: number;
+  filterText: string;
+  cachedFileList: FileItem[];
+  isLoadingFiles: boolean;
+}
+
+export interface FileBrowserActions {
+  handleFileSelect: (filePaths: string[], input: string) => string;
+  handleFileBrowserCancel: () => void;
+  resetFileBrowser: () => void;
+}
+
+export function useFileBrowserState(
+  input: string,
+  isProcessing: boolean
+): FileBrowserState & FileBrowserActions {
+  const [showFileBrowser, setShowFileBrowser] = useState(false);
+  const [atPosition, setAtPosition] = useState(-1);
+  const [filterText, setFilterText] = useState('');
+  const [cachedFileList, setCachedFileList] = useState<FileItem[]>([]);
+  const [isLoadingFiles, setIsLoadingFiles] = useState(true);
+
+  // Load file list once on mount (background loading)
+  useEffect(() => {
+    let mounted = true;
+
+    const preloadFiles = async () => {
+      try {
+        const files = await loadFileList();
+        if (mounted) {
+          setCachedFileList(files);
+          setIsLoadingFiles(false);
+        }
+      } catch (error) {
+        if (mounted) {
+          logger.error('Failed to preload file list', error);
+          setIsLoadingFiles(false);
+        }
+      }
+    };
+
+    preloadFiles();
+
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  // Monitor input for '@' trigger
+  useEffect(() => {
+    if (isProcessing) {
+      return;
+    }
+
+    const triggerInfo = detectAtTrigger(input);
+
+    if (triggerInfo.detected && !showFileBrowser) {
+      setShowFileBrowser(true);
+      setAtPosition(triggerInfo.position);
+      setFilterText(triggerInfo.filter);
+    } else if (triggerInfo.detected && showFileBrowser) {
+      setFilterText(triggerInfo.filter);
+    } else if (!triggerInfo.detected && showFileBrowser) {
+      setShowFileBrowser(false);
+      setAtPosition(-1);
+      setFilterText('');
+    }
+  }, [input, isProcessing, showFileBrowser]);
+
+  const handleFileSelect = useCallback(
+    (filePaths: string[], currentInput: string): string => {
+      const newInput = insertFilePaths(currentInput, atPosition, filterText.length, filePaths);
+      setShowFileBrowser(false);
+      setAtPosition(-1);
+      setFilterText('');
+      return newInput;
+    },
+    [atPosition, filterText.length]
+  );
+
+  const handleFileBrowserCancel = useCallback(() => {
+    setShowFileBrowser(false);
+    setAtPosition(-1);
+    setFilterText('');
+  }, []);
+
+  const resetFileBrowser = useCallback(() => {
+    setShowFileBrowser(false);
+    setAtPosition(-1);
+    setFilterText('');
+  }, []);
+
+  return {
+    showFileBrowser,
+    atPosition,
+    filterText,
+    cachedFileList,
+    isLoadingFiles,
+    handleFileSelect,
+    handleFileBrowserCancel,
+    resetFileBrowser,
+  };
+}

package/src/ui/hooks/useFileList.ts

@@ -0,0 +1,132 @@
+/**
+ * useFileList Hook
+ *
+ * Load and filter file list for file browser
+ */
+
+import { useMemo } from 'react';
+import { listFilesTool } from '../../tools/llm/simple/file-tools.js';
+import { logger } from '../../utils/logger.js';
+
+export interface FileItem {
+  name: string;
+  type: 'file' | 'directory';
+  path: string;
+}
+
+interface UseFileListOptions {
+  filter?: string;
+  maxResults?: number;
+  cachedFiles?: FileItem[]; // Use pre-loaded file list for instant display
+}
+
+interface UseFileListResult {
+  files: FileItem[];
+  loading: boolean;
+  error: string | null;
+  totalCount: number;
+}
+
+/**
+ * Load and process file list from file system
+ * This should be called once at app startup and cached
+ */
+export async function loadFileList(): Promise<FileItem[]> {
+  try {
+    // Get recursive file list from current directory
+    const result = await listFilesTool.execute({ directory_path: '.', recursive: true });
+
+    if (!result.success) {
+      logger.error('Failed to load files', new Error(result.error || 'Unknown error'));
+      return [];
+    }
+
+    // Parse JSON result
+    const files = JSON.parse(result.result || '[]') as FileItem[];
+
+    // Filter out node_modules and hidden files/directories
+    const filteredFiles = files.filter((file) => {
+      const pathParts = file.path.split('/');
+      // Exclude node_modules, .git, and other common exclusions
+      return !pathParts.some((part) =>
+        part.startsWith('.') ||
+        part === 'node_modules' ||
+        part === 'dist' ||
+        part === 'build' ||
+        part === 'coverage'
+      );
+    });
+
+    // ============================================================
+    // TODO: Directory Navigation Feature
+    // ============================================================
+    // Currently, directories are excluded from the file browser
+    // because there's no directory processing logic implemented yet.
+    //
+    // To enable directory navigation in the future:
+    // 1. Remove or comment out the filter below
+    // 2. Implement directory selection handler in FileBrowser.tsx
+    // 3. Add logic to navigate into selected directory
+    // 4. Update atFileProcessor.ts to handle directory paths
+    //
+    // For now, only show files to prevent errors when directories
+    // are selected.
+    // ============================================================
+    const filesOnly = filteredFiles.filter((file) => file.type === 'file');
+
+    // Sort files by depth first (root files first), then alphabetically
+    filesOnly.sort((a, b) => {
+      // Count path depth (number of slashes)
+      const depthA = a.path.split('/').length - 1;
+      const depthB = b.path.split('/').length - 1;
+
+      // Sort by depth first (shallower paths come first)
+      if (depthA !== depthB) {
+        return depthA - depthB;
+      }
+
+      // Same depth - sort alphabetically
+      return a.path.localeCompare(b.path);
+    });
+
+    return filesOnly;
+  } catch (err) {
+    logger.error('Error loading file list', err);
+    return [];
+  }
+}
+
+/**
+ * Custom hook to filter pre-loaded file list
+ * This hook expects cachedFiles to be provided for instant filtering
+ */
+export function useFileList(options: UseFileListOptions = {}): UseFileListResult {
+  const { filter = '', maxResults = 10, cachedFiles = [] } = options;
+
+  // Use cached files if provided, otherwise empty (no loading in this hook)
+  const allFiles = cachedFiles;
+  const loading = false; // Loading is handled externally
+  const error = null;
+
+  // Filter files based on search pattern (memoized for performance)
+  const filteredFiles = useMemo(() => {
+    if (!filter) return allFiles;
+
+    const lowerFilter = filter.toLowerCase();
+    return allFiles.filter((file) =>
+      file.path.toLowerCase().includes(lowerFilter)
+    );
+  }, [allFiles, filter]);
+
+  // Limit results (memoized)
+  const limitedFiles = useMemo(() => {
+    return filteredFiles.slice(0, maxResults);
+  }, [filteredFiles, maxResults]);
+
+  return {
+    files: limitedFiles,
+    loading,
+    error,
+    totalCount: filteredFiles.length,
+  };
+}