onbuzz 3.3.0

package/src/interfaces/terminal/components/SearchPanel.js

@@ -0,0 +1,265 @@
+/**
+ * SearchPanel Component
+ * Command palette overlay for finding messages
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+/**
+ * Fuzzy match score
+ * @param {string} str - String to search in
+ * @param {string} query - Query to search for
+ * @returns {number} - Match score (higher is better, 0 = no match)
+ */
+function fuzzyScore(str, query) {
+  if (!query) return 1;
+
+  const lowerStr = str.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+
+  // Exact match gets highest score
+  if (lowerStr.includes(lowerQuery)) {
+    return 1000;
+  }
+
+  // Character-by-character matching
+  let score = 0;
+  let queryIndex = 0;
+
+  for (let i = 0; i < lowerStr.length && queryIndex < lowerQuery.length; i++) {
+    if (lowerStr[i] === lowerQuery[queryIndex]) {
+      score += 1;
+      queryIndex++;
+    }
+  }
+
+  // All query characters found
+  if (queryIndex === lowerQuery.length) {
+    return score;
+  }
+
+  return 0; // No match
+}
+
+/**
+ * Format timestamp
+ */
+function formatTime(timestamp) {
+  if (!timestamp) return '';
+
+  const date = new Date(timestamp);
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  return `${hours}:${minutes}`;
+}
+
+/**
+ * SearchPanel Component
+ * @param {Object} props
+ * @param {Array} props.messages - Array of messages to search
+ * @param {Function} props.onSelect - Called when a message is selected
+ * @param {Function} props.onClose - Called when search is closed
+ */
+export function SearchPanel({ messages = [], onSelect, onClose }) {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [filterType, setFilterType] = useState('all'); // 'all', 'user', 'assistant', 'system'
+
+  // Filter and search messages
+  const filteredMessages = messages
+    .filter(msg => {
+      // Filter by type
+      if (filterType !== 'all' && msg.role !== filterType) {
+        return false;
+      }
+
+      // Filter by search query
+      if (!searchQuery) return true;
+
+      const content = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
+      return fuzzyScore(content, searchQuery) > 0;
+    })
+    .map(msg => {
+      const content = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content);
+      return {
+        ...msg,
+        score: fuzzyScore(content, searchQuery),
+        displayContent: content,
+      };
+    })
+    .sort((a, b) => b.score - a.score)
+    .slice(0, 10); // Show top 10 results
+
+  // Reset selection when results change
+  useEffect(() => {
+    setSelectedIndex(0);
+  }, [searchQuery, filterType]);
+
+  // Handle keyboard input
+  useInput((char, key) => {
+    // Close on Escape
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    // Select on Enter
+    if (key.return && filteredMessages[selectedIndex]) {
+      onSelect(filteredMessages[selectedIndex]);
+      return;
+    }
+
+    // Navigate with arrow keys
+    if (key.upArrow) {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(prev => Math.min(filteredMessages.length - 1, prev + 1));
+    }
+    // Cycle filter type with Tab
+    else if (key.tab) {
+      const types = ['all', 'user', 'assistant', 'system'];
+      const currentIndex = types.indexOf(filterType);
+      const nextIndex = (currentIndex + 1) % types.length;
+      setFilterType(types[nextIndex]);
+    }
+    // Backspace to delete search query
+    else if (key.backspace || key.delete) {
+      setSearchQuery(prev => prev.slice(0, -1));
+    }
+    // Type to search
+    else if (char && !key.ctrl && !key.meta) {
+      setSearchQuery(prev => prev + char);
+    }
+  });
+
+  // Get role color
+  const getRoleColor = (role) => {
+    switch (role) {
+      case 'user':
+        return 'cyan';
+      case 'assistant':
+        return 'green';
+      case 'system':
+        return 'yellow';
+      default:
+        return 'white';
+    }
+  };
+
+  // Get role indicator
+  const getRoleIndicator = (role) => {
+    switch (role) {
+      case 'user':
+        return 'U';
+      case 'assistant':
+        return 'A';
+      case 'system':
+        return 'S';
+      default:
+        return '?';
+    }
+  };
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      width: 70,
+      height: 20,
+      borderStyle: 'round',
+      borderColor: 'cyan',
+      paddingX: 1,
+      paddingY: 1,
+    },
+    // Title and filter type
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'Search Messages'),
+      React.createElement(Text, { dimColor: true }, ' ('),
+      React.createElement(Text, { color: 'yellow' }, filterType),
+      React.createElement(Text, { dimColor: true }, ')')
+    ),
+
+    // Search input
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, {}, '> '),
+      React.createElement(Text, { color: 'yellow' }, searchQuery),
+      React.createElement(Text, {}, String.fromCharCode(0x2588)) // Cursor
+    ),
+
+    // Results
+    React.createElement(
+      Box,
+      { flexDirection: 'column', flexGrow: 1 },
+      filteredMessages.length === 0
+        ? React.createElement(
+            Text,
+            { dimColor: true },
+            searchQuery ? 'No matching messages' : 'Type to search...'
+          )
+        : filteredMessages.map((msg, index) => {
+            const isSelected = index === selectedIndex;
+            const preview = msg.displayContent.substring(0, 60).replace(/\n/g, ' ');
+            const truncated = msg.displayContent.length > 60 ? '...' : '';
+
+            return React.createElement(
+              Box,
+              { key: msg.id || index, marginBottom: 0 },
+              React.createElement(
+                Text,
+                {
+                  backgroundColor: isSelected ? 'blue' : undefined,
+                  color: isSelected ? 'white' : undefined,
+                },
+                isSelected ? '> ' : '  ',
+                React.createElement(
+                  Text,
+                  { color: getRoleColor(msg.role) },
+                  `[${getRoleIndicator(msg.role)}]`
+                ),
+                ' ',
+                React.createElement(
+                  Text,
+                  { dimColor: true },
+                  msg.timestamp ? formatTime(msg.timestamp) : ''
+                ),
+                ' ',
+                React.createElement(
+                  Text,
+                  {},
+                  preview + truncated
+                )
+              )
+            );
+          })
+    ),
+
+    // Help text
+    React.createElement(
+      Box,
+      { marginTop: 1, borderTop: true, borderStyle: 'single', paddingTop: 1 },
+      React.createElement(
+        Text,
+        { dimColor: true },
+        'Tab: Filter type  ↑/↓: Navigate  Enter: Select  Esc: Cancel'
+      )
+    ),
+
+    // Results count
+    React.createElement(
+      Box,
+      {},
+      React.createElement(
+        Text,
+        { dimColor: true },
+        `${filteredMessages.length} result${filteredMessages.length !== 1 ? 's' : ''}`
+      )
+    )
+  );
+}
+
+export default SearchPanel;

package/src/interfaces/terminal/components/SettingsPanel.js

@@ -0,0 +1,415 @@
+/**
+ * SettingsPanel Component
+ * Modal configuration screen with categorized settings
+ */
+
+import React, { useState } from 'react';
+import { Box, Text, useInput } from 'ink';
+import TextInput from './TextInput.js';
+
+const CATEGORIES = {
+  CONNECTION: 0,
+  DISPLAY: 1,
+  API_KEYS: 2,
+  SHORTCUTS: 3,
+};
+
+const CATEGORY_TITLES = ['Connection', 'Display', 'API Keys', 'Shortcuts'];
+
+const BOOLEANS = {
+  TRUE: 'enabled',
+  FALSE: 'disabled',
+};
+
+/**
+ * SettingsPanel Component
+ * @param {Object} props
+ * @param {Object} props.settings - Current settings object
+ * @param {Function} props.onSave - Called when settings are saved
+ * @param {Function} props.onCancel - Called when panel is closed without saving
+ * @param {Number} props.terminalHeight - Terminal height for responsive sizing
+ * @param {Number} props.terminalWidth - Terminal width for responsive sizing
+ */
+export function SettingsPanel({ settings = {}, onSave, onCancel, terminalHeight = 24, terminalWidth = 80 }) {
+  const [category, setCategory] = useState(CATEGORIES.API_KEYS); // Start on API Keys for onboarding
+  const [localSettings, setLocalSettings] = useState({
+    // Connection settings
+    reconnectDelay: settings.reconnectDelay ?? 3000,
+    heartbeatInterval: settings.heartbeatInterval ?? 30000,
+
+    // Display settings
+    showTimestamps: settings.showTimestamps ?? true,
+    colorScheme: settings.colorScheme ?? 'default',
+
+    // API Keys
+    apiKeys: {
+      loxia: settings.apiKeys?.loxia || '',
+      anthropic: settings.apiKeys?.anthropic || '',
+      openai: settings.apiKeys?.openai || '',
+      deepseek: settings.apiKeys?.deepseek || '',
+    },
+
+    // Shortcuts (read-only display)
+    shortcuts: {
+      'Agent Switcher': 'Ctrl+S',
+      'New Agent': 'Ctrl+N',
+      'Settings': 'Alt+S',
+      'Search': 'Ctrl+F',
+      'Help': 'Alt+H',
+      'Reconnect': 'Ctrl+R',
+      'Clear': 'Ctrl+L',
+      'Reload Agents': 'Ctrl+A',
+      'Reload Tools': 'Ctrl+T',
+    },
+  });
+
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  // Get available options for current category and selected index
+  const getOptions = () => {
+    if (category === CATEGORIES.CONNECTION) {
+      return [
+        { key: 'reconnectDelay', label: 'Reconnect delay (ms)', type: 'number', min: 1000, max: 30000, step: 1000 },
+        { key: 'heartbeatInterval', label: 'Heartbeat interval (ms)', type: 'number', min: 10000, max: 60000, step: 5000 },
+      ];
+    } else if (category === CATEGORIES.DISPLAY) {
+      return [
+        { key: 'showTimestamps', label: 'Show timestamps', type: 'boolean' },
+        { key: 'colorScheme', label: 'Color scheme', type: 'select', options: ['default', 'light', 'dark', 'high-contrast'] },
+      ];
+    } else if (category === CATEGORIES.API_KEYS) {
+      return [
+        { key: 'loxia', label: 'Loxia Platform API Key', type: 'text', masked: true, required: true },
+        { key: 'anthropic', label: 'Anthropic API Key (optional)', type: 'text', masked: true },
+        { key: 'openai', label: 'OpenAI API Key (optional)', type: 'text', masked: true },
+        { key: 'deepseek', label: 'DeepSeek API Key (optional)', type: 'text', masked: true },
+      ];
+    } else if (category === CATEGORIES.SHORTCUTS) {
+      return Object.entries(localSettings.shortcuts).map(([label, shortcut]) => ({
+        label,
+        shortcut,
+      }));
+    }
+    return [];
+  };
+
+  const options = getOptions();
+
+  // Handle keyboard input
+  useInput((char, key) => {
+    // Cancel on Escape
+    if (key.escape) {
+      onCancel();
+      return;
+    }
+
+    // Save on Ctrl+S (allow saving from any category)
+    if (key.ctrl && char === 's') {
+      onSave(localSettings);
+      return;
+    }
+
+    // Navigate categories with Tab or Left/Right arrows
+    if (key.tab && !key.shift) {
+      setCategory(prev => (prev + 1) % Object.keys(CATEGORIES).length);
+      setSelectedIndex(0);
+      return;
+    } else if (key.tab && key.shift) {
+      setCategory(prev => (prev - 1 + Object.keys(CATEGORIES).length) % Object.keys(CATEGORIES).length);
+      setSelectedIndex(0);
+      return;
+    } else if (key.leftArrow && key.ctrl) {
+      setCategory(prev => Math.max(0, prev - 1));
+      setSelectedIndex(0);
+      return;
+    } else if (key.rightArrow && key.ctrl) {
+      setCategory(prev => Math.min(Object.keys(CATEGORIES).length - 1, prev + 1));
+      setSelectedIndex(0);
+      return;
+    }
+
+    // Shortcuts category is read-only
+    if (category === CATEGORIES.SHORTCUTS) {
+      if (key.upArrow) {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+      } else if (key.downArrow) {
+        setSelectedIndex(prev => Math.min(options.length - 1, prev + 1));
+      }
+      return;
+    }
+
+    // API Keys category uses text inputs (handled by TextInput component)
+    if (category === CATEGORIES.API_KEYS) {
+      if (key.upArrow) {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+      } else if (key.downArrow) {
+        setSelectedIndex(prev => Math.min(options.length - 1, prev + 1));
+      }
+      return; // TextInput handles Enter/edit mode
+    }
+
+    // Navigate settings
+    if (key.upArrow) {
+      setSelectedIndex(prev => Math.max(0, prev - 1));
+    } else if (key.downArrow) {
+      setSelectedIndex(prev => Math.min(options.length - 1, prev + 1));
+    }
+    // Toggle or modify selected setting
+    else if (key.leftArrow || key.rightArrow) {
+      const option = options[selectedIndex];
+      if (!option) return;
+
+      if (option.type === 'boolean') {
+        setLocalSettings(prev => ({
+          ...prev,
+          [option.key]: key.rightArrow ? true : false,
+        }));
+      } else if (option.type === 'number') {
+        const current = localSettings[option.key];
+        const step = option.step || 1;
+        const newValue = key.rightArrow
+          ? Math.min(option.max, current + step)
+          : Math.max(option.min, current - step);
+        setLocalSettings(prev => ({
+          ...prev,
+          [option.key]: newValue,
+        }));
+      } else if (option.type === 'select') {
+        const currentIndex = option.options.indexOf(localSettings[option.key]);
+        const newIndex = key.rightArrow
+          ? (currentIndex + 1) % option.options.length
+          : (currentIndex - 1 + option.options.length) % option.options.length;
+        setLocalSettings(prev => ({
+          ...prev,
+          [option.key]: option.options[newIndex],
+        }));
+      }
+    }
+    // Space to toggle boolean
+    else if (char === ' ') {
+      const option = options[selectedIndex];
+      if (option && option.type === 'boolean') {
+        setLocalSettings(prev => ({
+          ...prev,
+          [option.key]: !prev[option.key],
+        }));
+      }
+    }
+  });
+
+  // Handle text input change for API keys
+  const handleApiKeyChange = (key, value) => {
+    setLocalSettings(prev => ({
+      ...prev,
+      apiKeys: {
+        ...prev.apiKeys,
+        [key]: value,
+      },
+    }));
+  };
+
+  // Render category tabs
+  const renderTabs = () => {
+    return React.createElement(
+      Box,
+      { marginBottom: 1 },
+      CATEGORY_TITLES.map((title, index) =>
+        React.createElement(
+          Box,
+          { key: title, marginRight: 1 },
+          React.createElement(
+            Text,
+            {
+              backgroundColor: index === category ? 'cyan' : undefined,
+              color: index === category ? 'black' : 'cyan',
+              bold: index === category,
+            },
+            ` ${title} `
+          )
+        )
+      )
+    );
+  };
+
+  // Render settings based on category
+  const renderSettings = () => {
+    if (category === CATEGORIES.SHORTCUTS) {
+      return React.createElement(
+        Box,
+        { flexDirection: 'column' },
+        React.createElement(
+          Text,
+          { dimColor: true, marginBottom: 1 },
+          'Keyboard shortcuts (read-only):'
+        ),
+        options.map((item, index) =>
+          React.createElement(
+            Box,
+            { key: item.label, marginBottom: 0 },
+            React.createElement(
+              Text,
+              {
+                backgroundColor: index === selectedIndex ? 'blue' : undefined,
+                color: index === selectedIndex ? 'white' : undefined,
+              },
+              index === selectedIndex ? '> ' : '  ',
+              item.label.padEnd(20),
+              ' ',
+              React.createElement(Text, { color: 'yellow' }, item.shortcut)
+            )
+          )
+        )
+      );
+    }
+
+    if (category === CATEGORIES.API_KEYS) {
+      return React.createElement(
+        Box,
+        { flexDirection: 'column' },
+        React.createElement(
+          Text,
+          { dimColor: true, marginBottom: 1 },
+          'Configure your API keys for model access:'
+        ),
+        options.map((option, index) =>
+          React.createElement(TextInput, {
+            key: option.key,
+            value: localSettings.apiKeys[option.key],
+            label: option.label,
+            onChange: (value) => handleApiKeyChange(option.key, value),
+            masked: option.masked,
+            focused: index === selectedIndex,
+            placeholder: option.required ? 'Required - Press Enter to edit' : 'Optional - Press Enter to edit',
+          })
+        )
+      );
+    }
+
+    return React.createElement(
+      Box,
+      { flexDirection: 'column' },
+      options.map((option, index) => {
+        const isSelected = index === selectedIndex;
+        let valueDisplay;
+
+        if (option.type === 'boolean') {
+          const value = localSettings[option.key];
+          valueDisplay = React.createElement(
+            Text,
+            { color: value ? 'green' : 'red' },
+            value ? 'enabled' : 'disabled'
+          );
+        } else if (option.type === 'number') {
+          valueDisplay = React.createElement(
+            Text,
+            { color: 'cyan' },
+            localSettings[option.key]
+          );
+        } else if (option.type === 'select') {
+          valueDisplay = React.createElement(
+            Text,
+            { color: 'cyan' },
+            localSettings[option.key]
+          );
+        }
+
+        return React.createElement(
+          Box,
+          { key: option.key, marginBottom: 0 },
+          React.createElement(
+            Text,
+            {
+              backgroundColor: isSelected ? 'blue' : undefined,
+              color: isSelected ? 'white' : undefined,
+            },
+            isSelected ? '> ' : '  ',
+            option.label.padEnd(25),
+            ' ',
+            valueDisplay
+          )
+        );
+      })
+    );
+  };
+
+  // Render help text based on category
+  const renderHelp = () => {
+    if (category === CATEGORIES.SHORTCUTS) {
+      return React.createElement(
+        Text,
+        { dimColor: true },
+        'Tab: Next category  Ctrl+S: Save  Esc: Cancel'
+      );
+    }
+
+    if (category === CATEGORIES.API_KEYS) {
+      return React.createElement(
+        Text,
+        { dimColor: true },
+        '↑↓: Navigate  Enter: Edit  Tab: Next category  Ctrl+S: Save  Esc: Cancel'
+      );
+    }
+
+    return React.createElement(
+      Text,
+      { dimColor: true },
+      '←/→: Change value  Space: Toggle  Tab: Next category  Ctrl+S: Save  Esc: Cancel'
+    );
+  };
+
+  // Calculate responsive dialog size
+  const dialogWidth = Math.min(80, Math.floor(terminalWidth * 0.9));
+  const dialogHeight = Math.min(28, Math.floor(terminalHeight * 0.9));
+
+  // Fullscreen container with centered dialog
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      width: terminalWidth,
+      height: terminalHeight,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'black',
+    },
+    // Dialog box (centered and responsive)
+    React.createElement(
+      Box,
+      {
+        flexDirection: 'column',
+        width: dialogWidth,
+        height: dialogHeight,
+        borderStyle: 'round',
+        borderColor: 'cyan',
+        backgroundColor: 'black',
+        paddingX: 2,
+        paddingY: 1,
+      },
+      // Title
+      React.createElement(
+        Box,
+        { marginBottom: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Settings')
+      ),
+
+      // Category tabs
+      renderTabs(),
+
+      // Settings content
+      React.createElement(
+        Box,
+        { flexDirection: 'column', flexGrow: 1, marginBottom: 1 },
+        renderSettings()
+      ),
+
+      // Help text
+      React.createElement(
+        Box,
+        { borderTop: true, borderStyle: 'single', paddingTop: 1 },
+        renderHelp()
+      )
+    )
+  );
+}
+
+export default SettingsPanel;