onbuzz 3.3.0

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

@@ -0,0 +1,281 @@
+/**
+ * MessageList Component
+ * Displays chat messages with scrolling
+ * Supports compact mode for small terminals
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { debugLog } from '../utils/debugLogger.js';
+import { getTheme } from '../utils/theme.js';
+
+/**
+ * Format timestamp for display
+ * @param {string|number|Date} timestamp - Timestamp to format
+ * @returns {string} Formatted timestamp string
+ */
+function formatTimestamp(timestamp) {
+  if (!timestamp) return '';
+
+  const date = new Date(timestamp);
+  if (isNaN(date.getTime())) return '';
+
+  const hours = date.getHours().toString().padStart(2, '0');
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  const seconds = date.getSeconds().toString().padStart(2, '0');
+
+  return `${hours}:${minutes}:${seconds}`;
+}
+
+export function MessageList({
+  messages = [],
+  loading = false,
+  error = null,
+  onError,
+  compactMode = false,
+  currentAgent = null,
+  isConnected = false,
+  terminalHeight = 24,
+  terminalWidth = 80,
+  showTimestamps = true,
+  colorScheme = 'default',
+}) {
+  // Get theme colors based on color scheme
+  const theme = getTheme(colorScheme);
+
+  // LINE-based scrolling (not message-based)
+  // scrollLineOffset = how many lines from the END to skip (0 = showing latest lines)
+  const [scrollLineOffset, setScrollLineOffset] = useState(0);
+  const prevMessagesLength = useRef(messages.length);
+
+  // Store terminal height to prevent recalculation
+  const [viewportHeight] = useState(terminalHeight);
+
+  // Don't display errors inline - they go to ErrorPanel via onError callback
+  // Use useEffect to avoid calling setState during render
+  useEffect(() => {
+    if (error && onError) {
+      onError(error);
+    }
+  }, [error, onError]);
+
+  // Calculate available height for messages (ONCE on mount, stored in viewportHeight)
+  // Terminal layout: Header (3 rows) + MessageList + InputBox (3 rows) + StatusBar (1 row)
+  // In compact mode: MessageList (compact header 1 row) + InputBox (3 rows)
+  const headerHeight = compactMode ? 1 : 3; // Compact header or full header
+  const inputHeight = 3; // Input box with border
+  const statusBarHeight = compactMode ? 0 : 1; // Status bar (hidden in compact)
+  const borderPadding = 2; // Top and bottom borders + padding of MessageList box
+
+  const availableHeight = Math.max(
+    5, // Minimum 5 rows for messages
+    viewportHeight - headerHeight - inputHeight - statusBarHeight - borderPadding
+  );
+
+  // Account for scroll indicators and compact header
+  const reservedRows = (compactMode && currentAgent ? 1 : 0) +
+                       (messages.length > 0 ? 2 : 0); // 2 for scroll indicators
+
+  const availableRowsForMessages = Math.max(4, availableHeight - reservedRows);
+
+  // Flatten all messages into individual line objects
+  // Each line knows which message it belongs to and what content to render
+  const allLines = [];
+
+  messages.forEach((msg, msgIndex) => {
+    // Header line (timestamp + role)
+    allLines.push({
+      type: 'header',
+      messageId: msg.id,
+      messageIndex: msgIndex,
+      role: msg.role,
+      timestamp: showTimestamps ? msg.timestamp : null,
+    });
+
+    // Content lines (split by newline)
+    const content = msg.content || msg.text || '';
+    const contentLines = content.split('\n');
+
+    contentLines.forEach((line, lineIndex) => {
+      allLines.push({
+        type: 'content',
+        messageId: msg.id,
+        messageIndex: msgIndex,
+        content: line,
+        lineIndex,
+      });
+    });
+
+    // Spacing line after each message
+    allLines.push({
+      type: 'spacing',
+      messageId: msg.id,
+      messageIndex: msgIndex,
+    });
+  });
+
+  const totalLines = allLines.length;
+
+  // Calculate visible line range based on scroll offset (from end)
+  const startLineIndex = Math.max(0, totalLines - availableRowsForMessages - scrollLineOffset);
+  const endLineIndex = Math.min(totalLines, startLineIndex + availableRowsForMessages);
+
+  // Get visible lines slice
+  const visibleLines = allLines.slice(startLineIndex, endLineIndex);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (messages.length > prevMessagesLength.current) {
+      // New message arrived - scroll to bottom
+      setScrollLineOffset(0);
+      debugLog('MessageList', `Auto-scrolled to bottom (new message)`);
+    }
+    prevMessagesLength.current = messages.length;
+  }, [messages.length]);
+
+  // Handle keyboard input for scrolling (line-based)
+  useInput((char, key) => {
+    const maxLineScroll = Math.max(0, totalLines - availableRowsForMessages);
+    const pageSize = Math.floor(availableRowsForMessages * 0.8); // 80% of viewport for page scroll
+
+    // Scroll UP (toward older messages) with PageUp or Ctrl+Up
+    if (key.pageUp || (key.upArrow && key.ctrl)) {
+      setScrollLineOffset(prev => {
+        const newOffset = Math.min(maxLineScroll, prev + pageSize);
+        debugLog('MessageList', `Scroll up (older), new line offset: ${newOffset}`);
+        return newOffset;
+      });
+      return;
+    }
+
+    // Scroll DOWN (toward newer messages) with PageDown or Ctrl+Down
+    if (key.pageDown || (key.downArrow && key.ctrl)) {
+      setScrollLineOffset(prev => {
+        const newOffset = Math.max(0, prev - pageSize);
+        debugLog('MessageList', `Scroll down (newer), new line offset: ${newOffset}`);
+        return newOffset;
+      });
+      return;
+    }
+
+    // Jump to bottom (newest messages) with End
+    if (key.end) {
+      setScrollLineOffset(0);
+      debugLog('MessageList', 'Jump to bottom (newest)');
+      return;
+    }
+
+    // Jump to top (oldest messages) with Home
+    if (key.home) {
+      setScrollLineOffset(maxLineScroll);
+      debugLog('MessageList', 'Jump to top (oldest)');
+      return;
+    }
+  });
+
+  // Scroll indicators (line-based)
+  const hasOlderMessages = startLineIndex > 0;
+  const hasNewerMessages = scrollLineOffset > 0;
+  const olderLinesCount = startLineIndex;
+  const newerLinesCount = scrollLineOffset;
+
+  if (loading && messages.length === 0) {
+    return React.createElement(
+      Box,
+      {
+        height: availableHeight,
+        padding: 1,
+        borderStyle: 'round',
+        borderColor: theme.borderLoading,
+        flexDirection: 'column'
+      },
+      compactMode && currentAgent && React.createElement(
+        Box,
+        { marginBottom: 1, justifyContent: 'space-between', flexDirection: 'row' },
+        React.createElement(Text, { bold: true, color: theme.secondary }, currentAgent.name),
+        React.createElement(Text, { color: isConnected ? theme.success : theme.error }, isConnected ? '● Connected' : '● Disconnected')
+      ),
+      React.createElement(Text, { color: theme.warning }, 'Loading messages...')
+    );
+  }
+
+  return React.createElement(
+    Box,
+    {
+      height: availableHeight,
+      padding: 1,
+      borderStyle: 'round',
+      borderColor: theme.border,
+      flexDirection: 'column'
+    },
+    // Show compact header in compact mode
+    compactMode && currentAgent && React.createElement(
+      Box,
+      { marginBottom: 1, justifyContent: 'space-between', flexDirection: 'row' },
+      React.createElement(Text, { bold: true, color: theme.secondary }, currentAgent.name),
+      React.createElement(Text, { color: isConnected ? theme.success : theme.error }, isConnected ? '●' : '●')
+    ),
+
+    // Scroll indicator - older messages above
+    hasOlderMessages && React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(
+        Text,
+        { color: theme.dim, italic: true },
+        `▲ ${olderLinesCount} more lines above (PgUp/Home to scroll)`
+      )
+    ),
+
+    // Message list (line-based rendering)
+    messages.length === 0
+      ? React.createElement(Text, { color: theme.dim }, 'No messages yet. Start chatting!')
+      : React.createElement(
+          Box,
+          { flexDirection: 'column' },
+          visibleLines.map((line, idx) => {
+            if (line.type === 'header') {
+              // Render header line (timestamp + role)
+              return React.createElement(
+                Box,
+                { key: `${line.messageId}-header`, flexDirection: 'row' },
+                line.timestamp && React.createElement(
+                  Text,
+                  { color: theme.dim },
+                  '[' + formatTimestamp(line.timestamp) + '] '
+                ),
+                React.createElement(
+                  Text,
+                  { bold: true, color: line.role === 'user' ? theme.success : theme.secondary },
+                  '[' + line.role + ']: '
+                )
+              );
+            } else if (line.type === 'content') {
+              // Render content line
+              return React.createElement(
+                Box,
+                { key: `${line.messageId}-content-${line.lineIndex}` },
+                React.createElement(Text, { color: theme.primary }, line.content)
+              );
+            } else if (line.type === 'spacing') {
+              // Render spacing line
+              return React.createElement(Box, { key: `${line.messageId}-spacing`, height: 1 });
+            }
+            return null;
+          })
+        ),
+
+    // Scroll indicator - newer messages below
+    hasNewerMessages && React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { color: theme.dim, italic: true },
+        `▼ ${newerLinesCount} more lines below (PgDn/End to scroll)`
+      )
+    )
+  );
+}
+
+export default MessageList;

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

@@ -0,0 +1,251 @@
+/**
+ * MultilineTextInput Component
+ * Editable multi-line text area for terminal UI
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Box, Text, useInput } from 'ink';
+
+const CURSOR_BLINK_INTERVAL = 500; // milliseconds
+
+/**
+ * MultilineTextInput Component
+ * @param {Object} props
+ * @param {string} props.value - Current text value
+ * @param {Function} props.onChange - Called when text changes
+ * @param {string} props.label - Input label
+ * @param {string} props.placeholder - Placeholder text
+ * @param {boolean} props.focused - Whether this input is focused
+ * @param {number} props.minHeight - Minimum height in lines
+ * @param {number} props.maxHeight - Maximum height in lines
+ * @param {number} props.width - Width of the text area
+ * @param {string} props.borderColor - Border color
+ */
+export function MultilineTextInput({
+  value = '',
+  onChange,
+  label = '',
+  placeholder = '',
+  focused = false,
+  minHeight = 5,
+  maxHeight = 15,
+  width = 60,
+  borderColor = 'cyan',
+}) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [localValue, setLocalValue] = useState(value);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  const [cursorPos, setCursorPos] = useState(0);
+
+  // Sync with external value when not editing
+  useEffect(() => {
+    if (!isEditing) {
+      setLocalValue(value);
+      setCursorPos(value.length);
+    }
+  }, [value, isEditing]);
+
+  // Cursor blinking
+  useEffect(() => {
+    if (!isEditing || !focused) {
+      setCursorVisible(true);
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setCursorVisible(prev => !prev);
+    }, CURSOR_BLINK_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, [isEditing, focused]);
+
+  // Handle keyboard input
+  useInput((char, key) => {
+    if (!focused) return;
+
+    // Enter edit mode on Enter key
+    if (key.return && !isEditing) {
+      setIsEditing(true);
+      return;
+    }
+
+    // Exit edit mode on Escape
+    if (key.escape && isEditing) {
+      setIsEditing(false);
+      setLocalValue(value); // Reset to original value
+      setCursorPos(value.length);
+      return;
+    }
+
+    // Save on Ctrl+S (handled by parent, but exit edit mode)
+    if (key.ctrl && char === 's' && isEditing) {
+      setIsEditing(false);
+      onChange(localValue);
+      return;
+    }
+
+    // Only process input when editing
+    if (!isEditing) return;
+
+    // Handle character input
+    if (char && !key.ctrl && !key.meta) {
+      const before = localValue.substring(0, cursorPos);
+      const after = localValue.substring(cursorPos);
+      const newValue = before + char + after;
+      setLocalValue(newValue);
+      setCursorPos(cursorPos + 1);
+      onChange(newValue);
+      return;
+    }
+
+    // Handle newline
+    if (key.return) {
+      const before = localValue.substring(0, cursorPos);
+      const after = localValue.substring(cursorPos);
+      const newValue = before + '\n' + after;
+      setLocalValue(newValue);
+      setCursorPos(cursorPos + 1);
+      onChange(newValue);
+      return;
+    }
+
+    // Handle backspace
+    if (key.backspace && cursorPos > 0) {
+      const before = localValue.substring(0, cursorPos - 1);
+      const after = localValue.substring(cursorPos);
+      const newValue = before + after;
+      setLocalValue(newValue);
+      setCursorPos(cursorPos - 1);
+      onChange(newValue);
+      return;
+    }
+
+    // Handle delete
+    if (key.delete && cursorPos < localValue.length) {
+      const before = localValue.substring(0, cursorPos);
+      const after = localValue.substring(cursorPos + 1);
+      const newValue = before + after;
+      setLocalValue(newValue);
+      onChange(newValue);
+      return;
+    }
+
+    // Handle arrow keys for cursor movement
+    if (key.leftArrow && cursorPos > 0) {
+      setCursorPos(cursorPos - 1);
+      return;
+    }
+
+    if (key.rightArrow && cursorPos < localValue.length) {
+      setCursorPos(cursorPos + 1);
+      return;
+    }
+
+    // Home - move to start of current line
+    if (key.home) {
+      const lines = localValue.substring(0, cursorPos).split('\n');
+      const currentLineStart = cursorPos - lines[lines.length - 1].length;
+      setCursorPos(currentLineStart);
+      return;
+    }
+
+    // End - move to end of current line
+    if (key.end) {
+      const afterCursor = localValue.substring(cursorPos);
+      const nextNewline = afterCursor.indexOf('\n');
+      if (nextNewline === -1) {
+        setCursorPos(localValue.length);
+      } else {
+        setCursorPos(cursorPos + nextNewline);
+      }
+      return;
+    }
+  });
+
+  // Split text into lines for rendering
+  const displayValue = localValue || (isEditing ? '' : placeholder);
+  const lines = displayValue.split('\n');
+
+  // Calculate visible line range
+  const visibleLines = lines.slice(0, maxHeight);
+  const actualHeight = Math.max(minHeight, Math.min(maxHeight, lines.length));
+
+  // Render cursor at correct position if editing
+  const renderLinesWithCursor = () => {
+    if (!isEditing || !focused) {
+      return visibleLines.map((line, index) =>
+        React.createElement(
+          Text,
+          { key: index, color: localValue ? 'white' : 'gray', dimColor: !localValue },
+          line || ' '
+        )
+      );
+    }
+
+    // Find which line the cursor is on
+    let charCount = 0;
+    return visibleLines.map((line, lineIndex) => {
+      const lineStart = charCount;
+      const lineEnd = charCount + line.length;
+      const hasNewline = lineIndex < lines.length - 1;
+
+      const cursorInThisLine = cursorPos >= lineStart && cursorPos <= lineEnd + (hasNewline ? 1 : 0);
+
+      charCount = lineEnd + (hasNewline ? 1 : 0);
+
+      if (cursorInThisLine) {
+        const posInLine = cursorPos - lineStart;
+        const before = line.substring(0, posInLine);
+        const cursorChar = line.charAt(posInLine) || ' ';
+        const after = line.substring(posInLine + 1);
+
+        return React.createElement(
+          Text,
+          { key: lineIndex },
+          React.createElement(Text, {}, before),
+          cursorVisible
+            ? React.createElement(Text, { inverse: true }, cursorChar)
+            : React.createElement(Text, {}, cursorChar),
+          React.createElement(Text, {}, after)
+        );
+      }
+
+      return React.createElement(Text, { key: lineIndex }, line || ' ');
+    });
+  };
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column' },
+    // Label
+    label && React.createElement(
+      Text,
+      { bold: true, color: focused ? borderColor : 'gray', marginBottom: 1 },
+      label
+    ),
+    // Text area with border
+    React.createElement(
+      Box,
+      {
+        flexDirection: 'column',
+        borderStyle: 'round',
+        borderColor: isEditing ? 'yellow' : (focused ? borderColor : 'gray'),
+        paddingX: 1,
+        paddingY: 0,
+        height: actualHeight + 2, // +2 for borders
+        width: width,
+      },
+      ...renderLinesWithCursor()
+    ),
+    // Help text
+    React.createElement(
+      Text,
+      { dimColor: true, color: 'gray' },
+      focused && !isEditing ? 'Press Enter to edit' :
+      focused && isEditing ? 'Esc: Cancel  Ctrl+S: Save' :
+      ''
+    )
+  );
+}
+
+export default MultilineTextInput;