onbuzz 3.3.0

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

@@ -0,0 +1,28 @@
+/**
+ * Header Component
+ * Displays application title, current agent, and connection status
+ */
+
+import React from 'react';
+import { Box, Text } from 'ink';
+
+export function Header({ currentAgent, connectionStatus, isConnected }) {
+  const statusColor = isConnected ? 'green' : 'red';
+  const statusText = isConnected ? '● Connected' : '● Disconnected';
+
+  return React.createElement(
+    Box,
+    { borderStyle: 'round', borderColor: 'cyan', paddingX: 1 },
+    React.createElement(Box, { flexDirection: 'row', justifyContent: 'space-between', width: '100%' },
+      // Title and agent
+      React.createElement(Box, {},
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Loxia Autopilot One'),
+        currentAgent && React.createElement(Text, { dimColor: true }, ` | Agent: ${currentAgent.name}`)
+      ),
+      // Connection status
+      React.createElement(Text, { color: statusColor }, statusText)
+    )
+  );
+}
+
+export default Header;

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

@@ -0,0 +1,231 @@
+/**
+ * HelpPanel Component
+ * Context-sensitive help overlay with keyboard shortcuts
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+const SHORTCUTS = {
+  'Navigation': [
+    { key: '↑/↓', description: 'Navigate messages' },
+    { key: 'Ctrl+S', description: 'Switch agent' },
+    { key: 'Ctrl+F', description: 'Search messages' },
+  ],
+  'Agent Management': [
+    { key: 'Ctrl+N', description: 'Create new agent' },
+    { key: 'Ctrl+E', description: 'Edit agent (in switcher)' },
+    { key: 'Ctrl+D or Del', description: 'Delete agent (in switcher)' },
+    { key: 'Ctrl+A', description: 'Reload agents list' },
+  ],
+  'Connection': [
+    { key: 'Ctrl+R', description: 'Reconnect to server' },
+    { key: 'Ctrl+L', description: 'Clear messages' },
+    { key: 'Ctrl+T', description: 'Reload tools' },
+  ],
+  'Settings & Help': [
+    { key: 'Alt+S', description: 'Open settings' },
+    { key: 'Alt+H', description: 'Show this help' },
+  ],
+  'Input': [
+    { key: 'Enter', description: 'Send message' },
+    { key: '↑/↓', description: 'Navigate command history' },
+    { key: 'Esc', description: 'Close overlays' },
+  ],
+};
+
+const TIPS = [
+  'Use Tab in settings to switch between categories',
+  'Search supports fuzzy matching and filtering by role',
+  'Agent switcher sorts by recent activity',
+  'Command history saves your last 100 commands',
+  'Press Space to toggle boolean settings',
+  'Use ←/→ to change numeric and select settings',
+];
+
+/**
+ * HelpPanel Component
+ * @param {Object} props
+ * @param {Function} props.onClose - Called when help is closed
+ * @param {Number} props.terminalHeight - Terminal height for fullscreen rendering
+ * @param {Number} props.terminalWidth - Terminal width for fullscreen rendering
+ */
+export function HelpPanel({ onClose, terminalHeight = 24, terminalWidth = 80 }) {
+  const [selectedCategory, setSelectedCategory] = useState(0);
+  const [tipStartIndex, setTipStartIndex] = useState(0);
+  const categories = Object.keys(SHORTCUTS);
+
+  // Cycle tips every 30 seconds
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTipStartIndex(prev => (prev + 3) % TIPS.length);
+    }, 30000); // 30 seconds
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Handle keyboard input
+  useInput((char, key) => {
+    // Close on Escape
+    if (key.escape) {
+      onClose();
+      return;
+    }
+
+    // Navigate categories with Tab or Left/Right
+    if (key.tab && !key.shift) {
+      setSelectedCategory(prev => (prev + 1) % categories.length);
+    } else if (key.tab && key.shift) {
+      setSelectedCategory(prev => (prev - 1 + categories.length) % categories.length);
+    } else if (key.leftArrow) {
+      setSelectedCategory(prev => Math.max(0, prev - 1));
+    } else if (key.rightArrow) {
+      setSelectedCategory(prev => Math.min(categories.length - 1, prev + 1));
+    }
+    // Close on Enter or h
+    else if (key.return || char === 'h') {
+      onClose();
+    }
+  });
+
+  // Render category tabs
+  const renderTabs = () => {
+    return React.createElement(
+      Box,
+      { marginBottom: 1 },
+      categories.map((category, index) =>
+        React.createElement(
+          Box,
+          { key: category, marginRight: 1 },
+          React.createElement(
+            Text,
+            {
+              backgroundColor: index === selectedCategory ? 'cyan' : undefined,
+              color: index === selectedCategory ? 'black' : 'cyan',
+              bold: index === selectedCategory,
+            },
+            ` ${category} `
+          )
+        )
+      )
+    );
+  };
+
+  // Render shortcuts for selected category
+  const renderShortcuts = () => {
+    const categoryName = categories[selectedCategory];
+    const shortcuts = SHORTCUTS[categoryName];
+
+    return React.createElement(
+      Box,
+      { flexDirection: 'column', marginBottom: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: 'cyan', marginBottom: 1 },
+        categoryName
+      ),
+      shortcuts.map((shortcut, index) =>
+        React.createElement(
+          Box,
+          { key: index, marginBottom: 0 },
+          React.createElement(
+            Text,
+            { color: 'yellow', bold: true },
+            shortcut.key.padEnd(20)
+          ),
+          React.createElement(
+            Text,
+            {},
+            shortcut.description
+          )
+        )
+      )
+    );
+  };
+
+  // Render tips section
+  const renderTips = () => {
+    // Show 3 tips starting from tipStartIndex, cycling through all tips
+    const selectedTips = [];
+    for (let i = 0; i < 3; i++) {
+      selectedTips.push(TIPS[(tipStartIndex + i) % TIPS.length]);
+    }
+
+    return React.createElement(
+      Box,
+      { flexDirection: 'column', marginTop: 1, marginBottom: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: 'green' },
+        'Tips:'
+      ),
+      selectedTips.map((tip, index) =>
+        React.createElement(
+          Box,
+          { key: index, marginTop: 0 },
+          React.createElement(Text, { dimColor: true }, '• '),
+          React.createElement(Text, { dimColor: true }, tip)
+        )
+      )
+    );
+  };
+
+  // Fullscreen container with centered dialog
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      width: terminalWidth,
+      height: terminalHeight,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: 'black',
+    },
+    // Dialog box (centered)
+    React.createElement(
+      Box,
+      {
+        flexDirection: 'column',
+        width: 70,
+        height: 22,
+        borderStyle: 'round',
+        borderColor: 'cyan',
+        backgroundColor: 'black',
+        paddingX: 2,
+        paddingY: 1,
+      },
+      // Title
+      React.createElement(
+        Box,
+        { marginBottom: 1 },
+        React.createElement(Text, { bold: true, color: 'cyan' }, 'Keyboard Shortcuts & Help')
+      ),
+
+      // Category tabs
+      renderTabs(),
+
+      // Shortcuts list
+      React.createElement(
+        Box,
+        { flexDirection: 'column', flexGrow: 1 },
+        renderShortcuts()
+      ),
+
+      // Tips
+      renderTips(),
+
+      // Help text
+      React.createElement(
+        Box,
+        { borderTop: true, borderStyle: 'single', paddingTop: 1 },
+        React.createElement(
+          Text,
+          { dimColor: true },
+          'Tab: Next category  Enter/Esc: Close'
+        )
+      )
+    )
+  );
+}
+
+export default HelpPanel;

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

@@ -0,0 +1,118 @@
+/**
+ * InputBox Component
+ * Text input for sending messages with command history
+ */
+
+import React, { useState, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { debugLog } from '../utils/debugLogger.js';
+
+const MAX_HISTORY = 100; // Maximum number of commands to remember
+
+export function InputBox({ onSubmit, disabled = false, placeholder = 'Type a message...' }) {
+  const [input, setInput] = useState('');
+  const [historyIndex, setHistoryIndex] = useState(-1);
+  const historyRef = useRef([]);
+  const tempInputRef = useRef('');
+
+  useInput((char, key) => {
+    if (disabled) return;
+
+    // Submit on Enter
+    if (key.return) {
+      // Capture input value IMMEDIATELY before any operations
+      const currentInput = input;
+      const trimmedInput = currentInput.trim();
+
+      // DEBUG: Log captured values
+      debugLog('InputBox', 'ENTER pressed - input state:', input);
+      debugLog('InputBox', 'currentInput:', currentInput);
+      debugLog('InputBox', 'trimmedInput:', trimmedInput);
+      debugLog('InputBox', `trimmedInput type: ${typeof trimmedInput}, truthy: ${!!trimmedInput}`);
+
+      // Only proceed if we have actual content
+      if (!trimmedInput) {
+        debugLog('InputBox', 'BLOCKED: trimmedInput is falsy, returning early');
+        return;
+      }
+
+      // Add to history (avoid duplicates of last command)
+      if (historyRef.current[historyRef.current.length - 1] !== trimmedInput) {
+        historyRef.current.push(trimmedInput);
+
+        // Limit history size
+        if (historyRef.current.length > MAX_HISTORY) {
+          historyRef.current.shift();
+        }
+      }
+
+      // Call onSubmit BEFORE clearing to ensure value is captured
+      debugLog('InputBox', 'Calling onSubmit with:', trimmedInput);
+      onSubmit(trimmedInput);
+
+      // Clear input only after onSubmit is called
+      setInput('');
+      setHistoryIndex(-1);
+      tempInputRef.current = '';
+    }
+    // Navigate up in history
+    else if (key.upArrow) {
+      if (historyRef.current.length === 0) return;
+
+      // Store current input before navigating
+      if (historyIndex === -1) {
+        tempInputRef.current = input;
+      }
+
+      const newIndex = Math.min(historyIndex + 1, historyRef.current.length - 1);
+      setHistoryIndex(newIndex);
+
+      // Get command from history (newest to oldest)
+      const historyCommand = historyRef.current[historyRef.current.length - 1 - newIndex];
+      setInput(historyCommand || '');
+    }
+    // Navigate down in history
+    else if (key.downArrow) {
+      if (historyIndex === -1) return;
+
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+
+      if (newIndex === -1) {
+        // Restore the input we had before navigating history
+        setInput(tempInputRef.current);
+      } else {
+        const historyCommand = historyRef.current[historyRef.current.length - 1 - newIndex];
+        setInput(historyCommand || '');
+      }
+    }
+    // Backspace/Delete
+    else if (key.backspace || key.delete) {
+      setInput(prev => prev.slice(0, -1));
+      // Exit history mode when editing
+      if (historyIndex !== -1) {
+        setHistoryIndex(-1);
+        tempInputRef.current = '';
+      }
+    }
+    // Regular character input
+    else if (char && !key.ctrl && !key.meta) {
+      setInput(prev => prev + char);
+      // Exit history mode when typing
+      if (historyIndex !== -1) {
+        setHistoryIndex(-1);
+        tempInputRef.current = '';
+      }
+    }
+  });
+
+  const displayText = disabled ? placeholder : '> ' + input + String.fromCharCode(0x2588);
+
+  return React.createElement(
+    Box,
+    { borderStyle: 'round', borderColor: disabled ? 'gray' : 'green', paddingX: 1 },
+    React.createElement(Text, { dimColor: disabled }, displayText)
+  );
+}
+
+export default InputBox;