otherwise-cli 0.1.0

package/src/ui/components/BrowserSelect.jsx

@@ -0,0 +1,111 @@
+/**
+ * Terminal browser selector for CLI automation.
+ * Fetches /api/browsers/detect, lets user pick one, saves via PUT /api/config.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { config } from '../../config.js';
+
+export function BrowserSelect({ serverUrl, onSelect, onCancel, isVisible }) {
+  const [browsers, setBrowsers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  useEffect(() => {
+    if (!isVisible || !serverUrl) return;
+    setLoading(true);
+    setError(null);
+    fetch(`${serverUrl}/api/browsers/detect`)
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error('Failed to detect'))))
+      .then((data) => {
+        const list = Array.isArray(data?.browsers) ? data.browsers : [];
+        setBrowsers(list);
+        setSelectedIndex(0);
+      })
+      .catch((e) => setError(e?.message || 'Could not load browsers'))
+      .finally(() => setLoading(false));
+  }, [isVisible, serverUrl]);
+
+  const handleSelect = useCallback(() => {
+    const b = browsers[selectedIndex];
+    if (!b) return;
+    fetch(`${serverUrl}/api/config`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ browserChannel: b.id }),
+    })
+      .then((r) => {
+        if (!r.ok) throw new Error('Failed to save');
+        config.set('browserChannel', b.id);
+        onSelect?.(b.id);
+      })
+      .catch((e) => setError(e?.message || 'Could not save'));
+  }, [serverUrl, browsers, selectedIndex, onSelect]);
+
+  useInput(
+    (input, key) => {
+      if (!isVisible) return;
+      if (key.upArrow) {
+        setSelectedIndex((i) => (i <= 0 ? browsers.length - 1 : i - 1));
+        return;
+      }
+      if (key.downArrow) {
+        setSelectedIndex((i) => (i >= browsers.length - 1 ? 0 : i + 1));
+        return;
+      }
+      if (key.return) {
+        if (browsers.length > 0) handleSelect();
+        return;
+      }
+      if (key.escape) {
+        onCancel?.();
+      }
+    },
+    { isActive: isVisible }
+  );
+
+  if (!isVisible) return null;
+
+  return (
+    <Box flexDirection="column" paddingY={1}>
+      <Text color="cyan" bold>
+        Select browser for automation
+      </Text>
+      <Text dimColor>
+        Used for browser tools and web search. Arrow keys to move, Enter to select, Esc to cancel.
+      </Text>
+      {loading && (
+        <Box marginTop={1}>
+          <Text dimColor>Detecting browsers…</Text>
+        </Box>
+      )}
+      {error && (
+        <Box marginTop={1}>
+          <Text color="red">{error}</Text>
+        </Box>
+      )}
+      {!loading && browsers.length > 0 && (
+        <Box flexDirection="column" marginTop={1}>
+          {browsers.map((b, i) => (
+            <Box key={b.id}>
+              <Text color={i === selectedIndex ? 'cyan' : undefined}>
+                {i === selectedIndex ? '❯ ' : '  '}
+                {b.name}
+                {b.available === false ? ' (may not be installed)' : ''}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      )}
+      {!loading && browsers.length === 0 && !error && (
+        <Text dimColor marginTop={1}>
+          No browsers detected.
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export default BrowserSelect;

package/src/ui/components/FilePicker.jsx

@@ -0,0 +1,472 @@
+/**
+ * FilePicker component
+ * Interactive file browser using Ink
+ * Now also shows RAG documents for @ mentions
+ * 
+ * Responsive: adapts to terminal width
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Box, Text, useInput, useFocus } from 'ink';
+import { useTerminal } from '../context/TerminalContext.jsx';
+import { truncatePath } from '../utils/formatters.js';
+
+/**
+ * RAG Document item
+ */
+function RagDocumentItem({ doc, isSelected }) {
+  const prefix = isSelected ? '❯ ' : '  ';
+  
+  return (
+    <Box>
+      <Text color={isSelected ? 'cyan' : undefined}>{prefix}</Text>
+      <Text>📚 </Text>
+      {isSelected ? (
+        <Text color="cyan" bold>@{doc.name}</Text>
+      ) : (
+        <Text color="#10b981">@{doc.name}</Text>
+      )}
+      <Text dimColor> ({doc.chunkCount || doc.chunk_count} chunks)</Text>
+    </Box>
+  );
+}
+
+/**
+ * File type icon
+ */
+function FileIcon({ file }) {
+  if (file.isDirectory) {
+    return <Text color="yellow">📁</Text>;
+  }
+  
+  const typeIcons = {
+    javascript: <Text color="yellow"></Text>,
+    typescript: <Text color="blue"></Text>,
+    python: <Text color="green">🐍</Text>,
+    json: <Text color="#f59e0b">{'{}'}</Text>,
+    markdown: <Text dimColor>📝</Text>,
+    html: <Text color="red">🌐</Text>,
+    css: <Text color="blue">🎨</Text>,
+  };
+  
+  return typeIcons[file.type] || <Text dimColor>📄</Text>;
+}
+
+/**
+ * File list item
+ */
+function FileItem({ file, isSelected, showPath = false }) {
+  const prefix = isSelected ? '❯ ' : '  ';
+  
+  let nameDisplay;
+  if (file.isDirectory) {
+    nameDisplay = isSelected 
+      ? <Text color="cyan" bold>{file.name}/</Text>
+      : <Text color="yellow">{file.name}/</Text>;
+  } else {
+    nameDisplay = isSelected 
+      ? <Text color="cyan" bold>{file.name}</Text>
+      : <Text>{file.name}</Text>;
+  }
+  
+  return (
+    <Box>
+      <Text color={isSelected ? 'cyan' : undefined}>{prefix}</Text>
+      <FileIcon file={file} />
+      <Text> </Text>
+      {nameDisplay}
+      {showPath && file.path !== file.name && (
+        <Text dimColor> {file.path}</Text>
+      )}
+    </Box>
+  );
+}
+
+/**
+ * Go up directory item
+ */
+function GoUpItem({ isSelected }) {
+  const prefix = isSelected ? '❯ ' : '  ';
+  
+  return (
+    <Box>
+      <Text color={isSelected ? 'cyan' : 'gray'}>{prefix}</Text>
+      <Text color={isSelected ? 'cyan' : 'gray'} bold>..</Text>
+      <Text dimColor> (Go up)</Text>
+    </Box>
+  );
+}
+
+/**
+ * FilePicker component
+ * Responsive: adapts layout and visible items to terminal size
+ */
+export function FilePicker({
+  serverUrl,
+  onSelect,
+  onCancel,
+  isVisible = true,
+}) {
+  const { rows, columns, isNarrow, useCompactMode } = useTerminal();
+  const [files, setFiles] = useState([]);
+  const [ragDocuments, setRagDocuments] = useState([]);
+  const [currentPath, setCurrentPath] = useState('');
+  const [workspaceRoot, setWorkspaceRoot] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [filter, setFilter] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  
+  // Responsive: adjust visible items based on terminal height
+  const maxVisible = Math.max(5, Math.min(15, rows - 10));
+  const maxPathLength = Math.max(20, columns - 20);
+  const { isFocused } = useFocus({ autoFocus: true, isActive: isVisible });
+  
+  // Fetch RAG documents from server
+  const fetchRagDocuments = useCallback(async () => {
+    try {
+      const response = await fetch(`${serverUrl}/api/rag/documents`);
+      if (response.ok) {
+        const result = await response.json();
+        if (result.success && result.documents) {
+          setRagDocuments(result.documents);
+        }
+      }
+    } catch (err) {
+      // Silently fail - RAG documents are optional
+      console.log('[FilePicker] Could not fetch RAG documents:', err.message);
+    }
+  }, [serverUrl]);
+  
+  // Fetch files from server
+  const fetchFiles = useCallback(async (path = '', query = '') => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      let url;
+      if (query && query.length > 0) {
+        url = `${serverUrl}/api/files/search?query=${encodeURIComponent(query)}&maxResults=30`;
+      } else {
+        const params = new URLSearchParams();
+        if (path) params.set('path', path);
+        url = `${serverUrl}/api/files?${params.toString()}`;
+      }
+      
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        setError(`Server error: ${response.status}`);
+        setFiles([]);
+        return;
+      }
+      
+      const result = await response.json();
+      
+      if (result.success === false) {
+        setError(result.error || 'Unknown error');
+        setFiles([]);
+        return;
+      }
+      
+      if (query) {
+        setFiles(result.results || []);
+        setWorkspaceRoot(result.workspaceRoot || '');
+      } else {
+        setFiles(result.items || []);
+        setCurrentPath(result.path || '');
+        setWorkspaceRoot(result.workspaceRoot || '');
+      }
+      
+      // Set initial selection to first RAG doc if available, otherwise first file
+      const ragDocsCount = ragDocuments.length;
+      const hasGoUp = currentPath && currentPath !== '.';
+      setSelectedIndex(ragDocsCount > 0 ? 0 : (hasGoUp ? 1 : 0));
+      setScrollOffset(0);
+    } catch (err) {
+      setError(`Connection error: ${err.message}`);
+      setFiles([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [serverUrl, currentPath, ragDocuments.length]);
+  
+  // Initial fetch - both RAG documents and files
+  useEffect(() => {
+    if (isVisible) {
+      fetchRagDocuments();
+      fetchFiles();
+    }
+  }, [isVisible, fetchRagDocuments, fetchFiles]);
+  
+  // Filter files
+  const filteredFiles = filter
+    ? files.filter(f => 
+        f.name.toLowerCase().includes(filter.toLowerCase()) ||
+        f.path.toLowerCase().includes(filter.toLowerCase())
+      )
+    : files;
+  
+  // Filter RAG documents
+  const filteredRagDocs = filter
+    ? ragDocuments.filter(d => 
+        d.name.toLowerCase().includes(filter.toLowerCase())
+      )
+    : ragDocuments;
+  
+  // Has go up option
+  const hasGoUp = currentPath && currentPath !== '.';
+  // Total items: RAG docs + go up option + files
+  const totalItems = filteredRagDocs.length + (hasGoUp ? 1 : 0) + filteredFiles.length;
+  
+  // Handle keyboard input
+  useInput((input, key) => {
+    if (!isVisible || !isFocused) return;
+    
+    // Navigation
+    if (key.upArrow) {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+      return;
+    }
+    
+    if (key.downArrow) {
+      setSelectedIndex(prev => Math.min(totalItems - 1, prev + 1));
+      return;
+    }
+    
+    // Escape to cancel
+    if (key.escape) {
+      onCancel?.();
+      return;
+    }
+    
+    // Enter to select/navigate
+    if (key.return) {
+      // Check if selecting a RAG document
+      if (selectedIndex < filteredRagDocs.length) {
+        const selectedDoc = filteredRagDocs[selectedIndex];
+        onSelect?.({
+          path: `@${selectedDoc.name}`,
+          name: selectedDoc.name,
+          isRagDocument: true,
+          ragDocId: selectedDoc.id,
+        });
+        return;
+      }
+      
+      // Adjust index for files (after RAG docs)
+      const adjustedIndex = selectedIndex - filteredRagDocs.length;
+      
+      // Go up
+      if (hasGoUp && adjustedIndex === 0) {
+        const parentPath = currentPath.split('/').slice(0, -1).join('/') || '';
+        setCurrentPath(parentPath);
+        setFilter('');
+        fetchFiles(parentPath);
+        return;
+      }
+      
+      const itemIndex = hasGoUp ? adjustedIndex - 1 : adjustedIndex;
+      const selectedFile = filteredFiles[itemIndex];
+      
+      if (!selectedFile) return;
+      
+      if (selectedFile.isDirectory) {
+        // Navigate into folder
+        setCurrentPath(selectedFile.path);
+        setFilter('');
+        fetchFiles(selectedFile.path);
+      } else {
+        // Select file
+        onSelect?.({
+          path: selectedFile.path,
+          name: selectedFile.name,
+          isFolder: false,
+        });
+      }
+      return;
+    }
+    
+    // Tab to select folder with contents (or RAG document)
+    if (key.tab) {
+      // If on RAG document, same as Enter
+      if (selectedIndex < filteredRagDocs.length) {
+        const selectedDoc = filteredRagDocs[selectedIndex];
+        onSelect?.({
+          path: `@${selectedDoc.name}`,
+          name: selectedDoc.name,
+          isRagDocument: true,
+          ragDocId: selectedDoc.id,
+        });
+        return;
+      }
+      
+      const adjustedIndex = selectedIndex - filteredRagDocs.length;
+      if (hasGoUp && adjustedIndex === 0) return;
+      
+      const itemIndex = hasGoUp ? adjustedIndex - 1 : adjustedIndex;
+      const selectedFile = filteredFiles[itemIndex];
+      
+      if (selectedFile?.isDirectory) {
+        onSelect?.({
+          path: selectedFile.path + '/',
+          name: selectedFile.name,
+          isFolder: true,
+        });
+      }
+      return;
+    }
+    
+    // Backspace to go up or clear filter
+    if (key.backspace || key.delete) {
+      if (filter.length > 0) {
+        setFilter(prev => prev.slice(0, -1));
+        setSelectedIndex(hasGoUp ? 1 : 0);
+      } else if (hasGoUp) {
+        const parentPath = currentPath.split('/').slice(0, -1).join('/') || '';
+        setCurrentPath(parentPath);
+        fetchFiles(parentPath);
+      } else {
+        onCancel?.();
+      }
+      return;
+    }
+    
+    // Type to filter
+    if (input && input.length === 1 && input >= ' ' && input <= '~') {
+      const newFilter = filter + input;
+      setFilter(newFilter);
+      setSelectedIndex(hasGoUp ? 1 : 0);
+      
+      // Server-side search for longer filters
+      if (newFilter.length >= 2) {
+        fetchFiles('', newFilter);
+      }
+    }
+  }, { isActive: isVisible && isFocused });
+  
+  // Adjust scroll offset
+  useEffect(() => {
+    if (selectedIndex < scrollOffset) {
+      setScrollOffset(selectedIndex);
+    } else if (selectedIndex >= scrollOffset + maxVisible) {
+      setScrollOffset(selectedIndex - maxVisible + 1);
+    }
+  }, [selectedIndex, scrollOffset]);
+  
+  if (!isVisible) return null;
+  
+  // Calculate visible items
+  const visibleFiles = filteredFiles.slice(scrollOffset, scrollOffset + maxVisible);
+  
+  // Calculate responsive path display
+  const displayPath = currentPath 
+    ? truncatePath(`/${currentPath}`, maxPathLength)
+    : workspaceRoot 
+      ? `Workspace: ${workspaceRoot.split('/').pop()}`
+      : 'Select file or folder';
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color="cyan">📂 </Text>
+        <Text dimColor wrap="truncate">{displayPath}</Text>
+        {filter && (
+          <Text color="yellow"> (filter: "{filter}")</Text>
+        )}
+        {isLoading && (
+          <Text dimColor> Loading...</Text>
+        )}
+      </Box>
+      
+      {/* Navigation hints - shorter on narrow terminals */}
+      <Box marginBottom={1}>
+        {useCompactMode ? (
+          <Text dimColor>↑↓ Enter Tab Esc</Text>
+        ) : isNarrow ? (
+          <Text dimColor>↑↓ navigate • Enter • Tab folder • Esc</Text>
+        ) : (
+          <Text dimColor>↑↓ navigate • Enter select • Tab folder contents • Esc cancel</Text>
+        )}
+      </Box>
+      
+      {/* Error display */}
+      {error && (
+        <Box>
+          <Text color="red">Error: {error}</Text>
+        </Box>
+      )}
+      
+      {/* RAG Documents section */}
+      {filteredRagDocs.length > 0 && (
+        <Box flexDirection="column" marginBottom={1}>
+          <Box>
+            <Text color="#10b981" bold>📚 Documents (type @name to mention)</Text>
+          </Box>
+          {filteredRagDocs.map((doc, i) => (
+            <RagDocumentItem
+              key={doc.id}
+              doc={doc}
+              isSelected={selectedIndex === i}
+            />
+          ))}
+        </Box>
+      )}
+      
+      {/* Separator if we have both RAG docs and files */}
+      {filteredRagDocs.length > 0 && filteredFiles.length > 0 && (
+        <Box marginBottom={1}>
+          <Text dimColor>─── Files ───</Text>
+        </Box>
+      )}
+      
+      {/* Scroll up indicator */}
+      {scrollOffset > 0 && (
+        <Box>
+          <Text dimColor>  ↑ more files above...</Text>
+        </Box>
+      )}
+      
+      {/* Go up option */}
+      {hasGoUp && scrollOffset === 0 && (
+        <GoUpItem isSelected={selectedIndex === filteredRagDocs.length} />
+      )}
+      
+      {/* File list */}
+      {filteredFiles.length === 0 && filteredRagDocs.length === 0 && !isLoading && (
+        <Box>
+          <Text dimColor>  No files or documents found</Text>
+        </Box>
+      )}
+      
+      {visibleFiles.map((file, i) => {
+        // Adjust index to account for RAG docs
+        const actualIndex = filteredRagDocs.length + (hasGoUp ? 1 : 0) + scrollOffset + i;
+        return (
+          <FileItem
+            key={file.path}
+            file={file}
+            isSelected={selectedIndex === actualIndex}
+            showPath={filter.length > 0}
+          />
+        );
+      })}
+      
+      {/* Scroll down indicator */}
+      {scrollOffset + maxVisible < filteredFiles.length && (
+        <Box>
+          <Text dimColor>  ↓ more files below...</Text>
+        </Box>
+      )}
+      
+      {/* Footer */}
+      <Box marginTop={1}>
+        <Text dimColor>{filteredFiles.length} items</Text>
+      </Box>
+    </Box>
+  );
+}
+
+export default FilePicker;