otherwise-cli 0.1.0

package/src/ui/hooks/useCommands.js

@@ -0,0 +1,280 @@
+/**
+ * Commands hook for Ink UI
+ * Handles slash command parsing and execution
+ */
+
+import { useCallback } from 'react';
+
+/**
+ * Available slash commands
+ */
+export const COMMANDS = {
+  help: {
+    aliases: ['h', '?'],
+    description: 'Show available commands',
+    usage: '/help',
+  },
+  new: {
+    aliases: ['n'],
+    description: 'Start a new chat',
+    usage: '/new',
+  },
+  history: {
+    aliases: ['list', 'ls'],
+    description: 'Show recent chats',
+    usage: '/history',
+  },
+  continue: {
+    aliases: ['c', 'cont', 'resume'],
+    description: 'Continue a previous chat',
+    usage: '/continue <number|id>',
+  },
+  model: {
+    aliases: ['m', 'models'],
+    description: 'Switch AI model',
+    usage: '/model [model-name]',
+  },
+  clear: {
+    aliases: ['cls'],
+    description: 'Clear the screen',
+    usage: '/clear',
+  },
+  exit: {
+    aliases: ['quit', 'q'],
+    description: 'Exit chat mode',
+    usage: '/exit',
+  },
+  status: {
+    aliases: ['s', 'info'],
+    description: 'Show current chat status',
+    usage: '/status',
+  },
+  delete: {
+    aliases: ['del', 'rm'],
+    description: 'Delete a chat',
+    usage: '/delete <number|id>',
+  },
+  config: {
+    aliases: ['settings'],
+    description: 'Show current configuration',
+    usage: '/config',
+  },
+  open: {
+    aliases: ['browser', 'web', 'ui'],
+    description: 'Open the web interface in browser',
+    usage: '/open',
+  },
+  attach: {
+    aliases: ['at', 'file', 'add'],
+    description: 'Open file picker to attach files/folders',
+    usage: '/attach',
+  },
+  clearfiles: {
+    aliases: ['cf', 'detach'],
+    description: 'Clear all attached files',
+    usage: '/clearfiles',
+  },
+  setbrowser: {
+    aliases: ['browser-select', 'automation-browser'],
+    description: 'Select browser for automation (tools & web search)',
+    usage: '/setbrowser',
+  },
+};
+
+/**
+ * Command result actions
+ */
+export const CommandAction = {
+  CONTINUE: 'continue',
+  EXIT: 'exit',
+  NEW_CHAT: 'new_chat',
+  CONTINUE_CHAT: 'continue_chat',
+  SET_MODEL: 'set_model',
+  DELETE_CHAT: 'delete_chat',
+  OPEN_FILE_PICKER: 'open_file_picker',
+  OPEN_MODEL_SELECTOR: 'open_model_selector',
+  CLEAR_FILES: 'clear_files',
+  SHOW_HELP: 'show_help',
+  SHOW_HISTORY: 'show_history',
+  SHOW_STATUS: 'show_status',
+  SHOW_CONFIG: 'show_config',
+  OPEN_BROWSER: 'open_browser',
+  OPEN_BROWSER_SELECT: 'open_browser_select',
+  CLEAR_SCREEN: 'clear_screen',
+  UNKNOWN: 'unknown',
+};
+
+/**
+ * Parse a command from input
+ * @param {string} input - User input
+ * @returns {object} - Parsed command
+ */
+export function parseCommand(input) {
+  const trimmed = input.trim();
+  
+  if (!trimmed.startsWith('/')) {
+    return { command: null, args: [], raw: trimmed };
+  }
+  
+  const parts = trimmed.slice(1).split(/\s+/);
+  const commandName = parts[0].toLowerCase();
+  const args = parts.slice(1);
+  
+  // Find command by name or alias
+  for (const [name, cmd] of Object.entries(COMMANDS)) {
+    if (name === commandName || cmd.aliases.includes(commandName)) {
+      return { command: name, args, raw: trimmed };
+    }
+  }
+  
+  return { command: 'unknown', args: [commandName, ...args], raw: trimmed };
+}
+
+/**
+ * Custom hook for command handling
+ * @returns {object} - Command methods
+ */
+export function useCommands() {
+  /**
+   * Execute a parsed command
+   * @param {string} command - Command name
+   * @param {string[]} args - Command arguments
+   * @returns {object} - Execution result with action and data
+   */
+  const execute = useCallback((command, args) => {
+    switch (command) {
+      case 'help':
+        return { action: CommandAction.SHOW_HELP };
+      
+      case 'new':
+        return { action: CommandAction.NEW_CHAT };
+      
+      case 'history':
+        return { action: CommandAction.SHOW_HISTORY };
+      
+      case 'continue': {
+        if (args.length === 0) {
+          return { 
+            action: CommandAction.CONTINUE, 
+            error: 'Usage: /continue <number|id>' 
+          };
+        }
+        
+        const identifier = args[0];
+        const num = parseInt(identifier, 10);
+        
+        if (isNaN(num)) {
+          return { 
+            action: CommandAction.CONTINUE, 
+            error: 'Invalid chat identifier' 
+          };
+        }
+        
+        return { 
+          action: CommandAction.CONTINUE_CHAT, 
+          data: { identifier: num, isIndex: num <= 20 } 
+        };
+      }
+      
+      case 'model':
+        if (args.length === 0) {
+          return { action: CommandAction.OPEN_MODEL_SELECTOR };
+        }
+        if (args[0] === '--list' || args[0] === '-l') {
+          return { action: CommandAction.OPEN_MODEL_SELECTOR, data: { listOnly: true } };
+        }
+        return { 
+          action: CommandAction.SET_MODEL, 
+          data: { modelName: args[0].toLowerCase() } 
+        };
+      
+      case 'clear':
+        return { action: CommandAction.CLEAR_SCREEN };
+      
+      case 'exit':
+        return { action: CommandAction.EXIT };
+      
+      case 'status':
+        return { action: CommandAction.SHOW_STATUS };
+      
+      case 'delete': {
+        if (args.length === 0) {
+          return { 
+            action: CommandAction.CONTINUE, 
+            error: 'Usage: /delete <number|id>' 
+          };
+        }
+        
+        const identifier = args[0];
+        const num = parseInt(identifier, 10);
+        
+        if (isNaN(num)) {
+          return { 
+            action: CommandAction.CONTINUE, 
+            error: 'Invalid chat identifier' 
+          };
+        }
+        
+        return { 
+          action: CommandAction.DELETE_CHAT, 
+          data: { identifier: num, isIndex: num <= 20 } 
+        };
+      }
+      
+      case 'config':
+        return { action: CommandAction.SHOW_CONFIG };
+      
+      case 'open':
+        return { action: CommandAction.OPEN_BROWSER };
+      
+      case 'setbrowser':
+        return { action: CommandAction.OPEN_BROWSER_SELECT };
+      
+      case 'attach':
+        return { action: CommandAction.OPEN_FILE_PICKER };
+      
+      case 'clearfiles':
+        return { action: CommandAction.CLEAR_FILES };
+      
+      case 'unknown':
+        return { 
+          action: CommandAction.UNKNOWN, 
+          error: `Unknown command: /${args[0]}` 
+        };
+      
+      default:
+        return { action: CommandAction.CONTINUE };
+    }
+  }, []);
+
+  /**
+   * Get all commands for help display
+   * @returns {Array} - Array of command objects
+   */
+  const getCommandList = useCallback(() => {
+    return Object.entries(COMMANDS).map(([name, cmd]) => ({
+      name,
+      ...cmd,
+    }));
+  }, []);
+
+  /**
+   * Check if input is a command
+   * @param {string} input - User input
+   * @returns {boolean} - True if command
+   */
+  const isCommand = useCallback((input) => {
+    return input.trim().startsWith('/');
+  }, []);
+
+  return {
+    parse: parseCommand,
+    execute,
+    getCommandList,
+    isCommand,
+    COMMANDS,
+    CommandAction,
+  };
+}
+
+export default useCommands;

package/src/ui/hooks/useFileAttachments.js

@@ -0,0 +1,216 @@
+/**
+ * File attachments hook for Ink UI
+ * Manages file/folder attachments for chat context
+ */
+
+import { useState, useCallback } from 'react';
+
+/**
+ * File types
+ */
+export const FileType = {
+  FILE: 'file',
+  FOLDER: 'folder',
+};
+
+/**
+ * Custom hook for file attachment management
+ * @param {string} serverUrl - Server URL for file API
+ * @returns {object} - File state and methods
+ */
+export function useFileAttachments(serverUrl) {
+  const [files, setFiles] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  /**
+   * Fetch file content from server
+   * @param {string} filePath - Path to file
+   * @returns {Promise<object|null>} - File data or null
+   */
+  const fetchFileContent = useCallback(async (filePath) => {
+    try {
+      const response = await fetch(
+        `${serverUrl}/api/files/read?path=${encodeURIComponent(filePath)}`
+      );
+      const result = await response.json();
+      
+      if (result.success) {
+        return {
+          name: result.name,
+          path: result.path,
+          content: result.content,
+          lineCount: result.lineCount,
+          size: result.size,
+          type: FileType.FILE,
+        };
+      }
+      return null;
+    } catch (err) {
+      setError(err.message);
+      return null;
+    }
+  }, [serverUrl]);
+
+  /**
+   * Fetch folder tree from server
+   * @param {string} folderPath - Path to folder
+   * @returns {Promise<object|null>} - Folder data or null
+   */
+  const fetchFolderTree = useCallback(async (folderPath) => {
+    try {
+      const cleanPath = folderPath.endsWith('/') 
+        ? folderPath.slice(0, -1) 
+        : folderPath;
+      
+      const response = await fetch(
+        `${serverUrl}/api/files/tree?path=${encodeURIComponent(cleanPath)}&maxDepth=5&maxFiles=100&includeContent=false`
+      );
+      const result = await response.json();
+      
+      if (result.success) {
+        return {
+          name: result.folderName,
+          path: result.folderPath,
+          content: result.treeDisplay || result.files.map(f => `  ${f.path}`).join('\n'),
+          lineCount: result.totalLines,
+          size: result.totalSize,
+          fileCount: result.fileCount,
+          directoryCount: result.directoryCount || 0,
+          type: FileType.FOLDER,
+          truncated: result.truncated,
+        };
+      }
+      return null;
+    } catch (err) {
+      setError(err.message);
+      return null;
+    }
+  }, [serverUrl]);
+
+  /**
+   * Attach a file
+   * @param {string} path - File path
+   * @returns {Promise<object|null>} - Attached file data or null
+   */
+  const attachFile = useCallback(async (path) => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const fileData = await fetchFileContent(path);
+      
+      if (fileData) {
+        // Check if already attached
+        const alreadyAttached = files.some(f => f.path === fileData.path);
+        if (!alreadyAttached) {
+          setFiles(prev => [...prev, fileData]);
+        }
+        return fileData;
+      }
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [files, fetchFileContent]);
+
+  /**
+   * Attach a folder
+   * @param {string} path - Folder path
+   * @returns {Promise<object|null>} - Attached folder data or null
+   */
+  const attachFolder = useCallback(async (path) => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const folderData = await fetchFolderTree(path);
+      
+      if (folderData) {
+        // Check if already attached
+        const alreadyAttached = files.some(f => f.path === folderData.path);
+        if (!alreadyAttached) {
+          setFiles(prev => [...prev, folderData]);
+        }
+        return folderData;
+      }
+      return null;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [files, fetchFolderTree]);
+
+  /**
+   * Detach a file by path
+   * @param {string} path - File path to detach
+   */
+  const detach = useCallback((path) => {
+    setFiles(prev => prev.filter(f => f.path !== path));
+  }, []);
+
+  /**
+   * Clear all attachments
+   */
+  const clear = useCallback(() => {
+    setFiles([]);
+    setError(null);
+  }, []);
+
+  /**
+   * Build file context string for message
+   * @returns {string} - Context string
+   */
+  const buildContext = useCallback(() => {
+    if (files.length === 0) return '';
+    
+    const contextParts = files.map(fileData => {
+      if (fileData.type === FileType.FOLDER) {
+        return `<folder_tree path="${fileData.path}" files="${fileData.fileCount}" total_lines="${fileData.lineCount}">
+The following files are available in this folder. Use read_file to access their contents if needed:
+
+${fileData.content}
+</folder_tree>`;
+      } else {
+        return `<file_context path="${fileData.path}" lines="${fileData.lineCount}">
+${fileData.content}
+</file_context>`;
+      }
+    });
+    
+    return contextParts.join('\n\n');
+  }, [files]);
+
+  /**
+   * Get total stats
+   * @returns {object} - Stats object
+   */
+  const getStats = useCallback(() => {
+    const totalFiles = files.filter(f => f.type === FileType.FILE).length;
+    const totalFolders = files.filter(f => f.type === FileType.FOLDER).length;
+    const totalLines = files.reduce((sum, f) => sum + (f.lineCount || 0), 0);
+    const totalSize = files.reduce((sum, f) => sum + (f.size || 0), 0);
+    
+    return {
+      count: files.length,
+      totalFiles,
+      totalFolders,
+      totalLines,
+      totalSize,
+    };
+  }, [files]);
+
+  return {
+    files,
+    isLoading,
+    error,
+    hasFiles: files.length > 0,
+    attachFile,
+    attachFolder,
+    detach,
+    clear,
+    buildContext,
+    getStats,
+  };
+}
+
+export default useFileAttachments;

package/src/ui/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,173 @@
+/**
+ * Keyboard shortcuts hook for Ink UI
+ * Provides a centralized way to handle keyboard shortcuts
+ */
+
+import { useCallback, useEffect, useRef } from 'react';
+import { useInput } from 'ink';
+
+/**
+ * Default keyboard shortcuts configuration
+ */
+export const DEFAULT_SHORTCUTS = {
+  // Global shortcuts
+  'ctrl+c': { action: 'stop', description: 'Stop generation / Exit' },
+  'ctrl+d': { action: 'exit', description: 'Exit application' },
+  'ctrl+l': { action: 'clear', description: 'Clear screen' },
+  'ctrl+n': { action: 'newChat', description: 'New chat' },
+  'ctrl+o': { action: 'openBrowser', description: 'Open in browser' },
+  
+  // Navigation
+  'ctrl+k': { action: 'clearInput', description: 'Clear input' },
+  'ctrl+u': { action: 'clearInput', description: 'Clear input' },
+  
+  // File picker
+  'tab': { action: 'openFilePicker', description: 'Open file picker' },
+  
+  // Model selector
+  'ctrl+m': { action: 'openModelSelector', description: 'Select model' },
+  
+  // Help
+  '?': { action: 'showHelp', description: 'Show help', requiresNoInput: true },
+  'ctrl+/': { action: 'showHelp', description: 'Show help' },
+  
+  // History
+  'up': { action: 'historyUp', description: 'Previous in history' },
+  'down': { action: 'historyDown', description: 'Next in history' },
+  
+  // Escape
+  'escape': { action: 'cancel', description: 'Cancel / Close overlay' },
+};
+
+/**
+ * Parse a key combination into parts
+ * @param {string} combo - Key combination (e.g., 'ctrl+c')
+ * @returns {object} - Parsed key parts
+ */
+function parseKeyCombo(combo) {
+  const parts = combo.toLowerCase().split('+');
+  return {
+    ctrl: parts.includes('ctrl'),
+    alt: parts.includes('alt'),
+    shift: parts.includes('shift'),
+    meta: parts.includes('meta') || parts.includes('cmd'),
+    key: parts[parts.length - 1],
+  };
+}
+
+/**
+ * Check if a key event matches a key combo
+ * @param {object} key - Key event from useInput
+ * @param {string} input - Input character
+ * @param {object} combo - Parsed key combo
+ * @returns {boolean} - Whether it matches
+ */
+function matchesCombo(key, input, combo) {
+  // Check modifiers
+  if (combo.ctrl && !key.ctrl) return false;
+  if (combo.alt && !key.alt) return false;
+  if (combo.shift && !key.shift) return false;
+  if (combo.meta && !key.meta) return false;
+  
+  // Check key
+  switch (combo.key) {
+    case 'up': return key.upArrow;
+    case 'down': return key.downArrow;
+    case 'left': return key.leftArrow;
+    case 'right': return key.rightArrow;
+    case 'enter': return key.return;
+    case 'escape': return key.escape;
+    case 'tab': return key.tab;
+    case 'backspace': return key.backspace;
+    case 'delete': return key.delete;
+    default:
+      // Match character
+      return input.toLowerCase() === combo.key;
+  }
+}
+
+/**
+ * Custom hook for keyboard shortcut handling
+ * @param {object} handlers - Map of action names to handler functions
+ * @param {object} options - Configuration options
+ * @returns {object} - Shortcut utilities
+ */
+export function useKeyboardShortcuts(handlers = {}, options = {}) {
+  const {
+    shortcuts = DEFAULT_SHORTCUTS,
+    enabled = true,
+    currentInput = '',
+  } = options;
+  
+  // Parse all shortcuts
+  const parsedShortcuts = useRef({});
+  
+  useEffect(() => {
+    parsedShortcuts.current = {};
+    for (const [combo, config] of Object.entries(shortcuts)) {
+      parsedShortcuts.current[combo] = {
+        ...config,
+        parsed: parseKeyCombo(combo),
+      };
+    }
+  }, [shortcuts]);
+  
+  // Handle input
+  useInput((input, key) => {
+    if (!enabled) return;
+    
+    for (const [combo, config] of Object.entries(parsedShortcuts.current)) {
+      // Check if shortcut requires no current input
+      if (config.requiresNoInput && currentInput) continue;
+      
+      if (matchesCombo(key, input, config.parsed)) {
+        const handler = handlers[config.action];
+        if (handler) {
+          handler();
+          return;
+        }
+      }
+    }
+  }, { isActive: enabled });
+  
+  // Get all shortcuts for help display
+  const getShortcutsList = useCallback(() => {
+    return Object.entries(shortcuts).map(([combo, config]) => ({
+      combo,
+      ...config,
+    }));
+  }, [shortcuts]);
+  
+  return {
+    shortcuts,
+    getShortcutsList,
+  };
+}
+
+/**
+ * Format a key combo for display
+ * @param {string} combo - Key combination
+ * @returns {string} - Formatted string
+ */
+export function formatKeyCombo(combo) {
+  const isMac = process.platform === 'darwin';
+  
+  return combo
+    .replace('ctrl', isMac ? '⌃' : 'Ctrl')
+    .replace('alt', isMac ? '⌥' : 'Alt')
+    .replace('shift', isMac ? '⇧' : 'Shift')
+    .replace('meta', isMac ? '⌘' : 'Win')
+    .replace('cmd', '⌘')
+    .replace('+', isMac ? '' : '+')
+    .replace('up', '↑')
+    .replace('down', '↓')
+    .replace('left', '←')
+    .replace('right', '→')
+    .replace('enter', '↵')
+    .replace('escape', 'Esc')
+    .replace('tab', 'Tab')
+    .replace('backspace', '⌫')
+    .toUpperCase();
+}
+
+export default useKeyboardShortcuts;