rl-rockcli 0.0.9 → 0.0.11

package/commands/attach/ink-repl/components/ConnectingScreen.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../contexts/ThemeContext.js';
+import { useSpinner } from '../hooks/useSpinner.js';
+import i18n from '../../../../utils/i18n.js';
+const { t } = i18n;
+
+const h = React.createElement;
+
+const ASCII_LINES = [
+  '██████╗   ██████    ██████╗ ██╗  ██╗     ██████╗ ██╗      ██╗',
+  '██╔══██╗ ██╔═══██╗ ██╔════╝ ██║ ██╔╝    ██╔════╝ ██║      ██║',
+  '██████╔╝ ██║   ██║ ██║      █████╔╝     ██║      ██║      ██║',
+  '██╔══██╗ ██║   ██║ ██║      ██╔═██╗     ██║      ██║      ██║',
+  '██║  ██║ ╚██████╔╝ ╚██████╗ ██║  ██╗    ╚██████╗ ███████╗ ██║',
+  '╚═╝  ╚═╝  ╚═════╝   ╚═════╝ ╚═╝  ╚═╝     ╚═════╝ ╚══════╝ ╚═╝',
+];
+
+/**
+ * Connecting screen with ROCK CLI branding
+ * @param {Object} props
+ * @param {string} props.sandboxId - Sandbox ID being connected to
+ * @param {number} props.attempt - Current attempt number
+ * @param {number} props.maxAttempts - Maximum number of attempts
+ */
+export function ConnectingScreen({ sandboxId, attempt = 1, maxAttempts = 30 }) {
+  const { theme } = useTheme();
+  const { frame } = useSpinner(true);
+
+  let gradient = theme.colors.gradient || ['#89b4fa', '#cba6f7', '#f38ba8'];
+  if (theme.semantic && theme.semantic.banner) {
+    gradient = theme.semantic.banner;
+  }
+
+  const connectingText = t('connecting.message') || '🔄 正在连接沙箱...';
+  const attemptText = attempt > 1 ? t('connecting.attempt') || `尝试 ${attempt}/${maxAttempts} 次...` : '';
+
+  return h(Box, { 
+    flexDirection: 'column', 
+    alignItems: 'center', 
+    justifyContent: 'center',
+    paddingTop: 2,
+    paddingBottom: 2,
+  },
+    // ASCII Art Banner
+    h(Box, { flexDirection: 'column', alignItems: 'center', marginBottom: 2 },
+      ASCII_LINES.map((line, index) =>
+        h(Text, {
+          key: `banner-line-${index}`,
+          color: gradient[index % gradient.length],
+          bold: true,
+        }, line)
+      )
+    ),
+    
+    // Connecting message
+    h(Box, { marginBottom: 1 },
+      h(Text, { color: theme.colors.primary || '#89b4fa' }, connectingText)
+    ),
+
+    // Sandbox ID
+    h(Box, { marginBottom: 1 },
+      h(Text, { color: theme.colors.textSecondary || 'gray' }, sandboxId)
+    ),
+
+    // Spinner
+    h(Box, { marginBottom: 1 },
+      h(Text, { color: 'yellow' }, `${frame} Loading...`)
+    ),
+
+    // Attempt counter (only show if attempt > 1)
+    attempt > 1 ? h(Box, {},
+      h(Text, { color: theme.colors.textSecondary || 'gray' }, attemptText.replace('${attempt}', attempt).replace('${maxAttempts}', maxAttempts))
+    ) : null
+  );
+}

package/commands/attach/ink-repl/components/Console.js

@@ -0,0 +1,191 @@
+import React from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { getLineSelectionRanges } from '../replState.js';
+import { useTheme } from '../contexts/ThemeContext.js';
+
+const h = React.createElement;
+
+/**
+ * Truncate text to fit terminal width
+ * @param {string} text Text to truncate
+ * @param {number} maxWidth Maximum width
+ * @returns {string} Truncated text
+ */
+function truncateText(text, maxWidth) {
+  if (!text || text.length <= maxWidth) return text;
+  return text.slice(0, maxWidth - 3) + '...';
+}
+
+/**
+ * Render a log line with selection highlighting
+ * @param {string} text - The log message
+ * @param {number} lineIndex - 0-based line index in visible area
+ * @param {number} scrollOffset - Current scroll offset
+ * @param {Object} selection - Selection state
+ * @param {string} color - Log level color
+ * @param {boolean} isBold - Whether to bold text
+ * @returns {React.Element}
+ */
+function renderLogWithSelection(text, lineIndex, scrollOffset, selection, color, isBold) {
+  const actualLineIndex = scrollOffset + lineIndex;
+  const maxWidth = text.length;
+
+  if (!selection || selection.source !== 'console') {
+    return h(Text, {
+      color,
+      bold: isBold,
+      wrap: 'truncate',
+    }, text);
+  }
+
+  const ranges = getLineSelectionRanges(selection, actualLineIndex, maxWidth);
+
+  if (ranges.length === 0) {
+    return h(Text, {
+      color,
+      bold: isBold,
+      wrap: 'truncate',
+    }, text);
+  }
+
+  // Split text into segments based on selection ranges
+  const segments = [];
+  let lastEnd = 0;
+
+  for (const range of ranges) {
+    // Unselected part before this range
+    if (range.start > lastEnd) {
+      segments.push(
+        h(Text, {
+          key: `seg-${lastEnd}-unselected`,
+          color,
+          bold: isBold,
+        }, text.substring(lastEnd, range.start))
+      );
+    }
+
+    // Selected part
+    segments.push(
+      h(Text,
+        {
+          key: `seg-${range.start}-selected`,
+          inverse: true,
+          color: 'cyan',
+          bold: isBold,
+        },
+        text.substring(range.start, range.end)
+      )
+    );
+
+    lastEnd = range.end;
+  }
+
+  // Unselected part after last range
+  if (lastEnd < text.length) {
+    segments.push(
+      h(Text, {
+        key: `seg-${lastEnd}-tail`,
+        color,
+        bold: isBold,
+      }, text.substring(lastEnd))
+    );
+  }
+
+  return h(Text, { wrap: 'truncate' }, ...segments);
+}
+
+/**
+ * Console component - Developer console for debug logs
+ * Toggle visibility with F12
+ * Use ↑↓ to select, Enter to copy
+ * Supports mouse drag selection
+ */
+export function Console({
+  visible = false,
+  logs = [],
+  height = 8,
+  scrollOffset = 0,
+  selectedIndex = -1,
+  selection = null,
+}) {
+  const { stdout } = useStdout();
+  const { theme } = useTheme();
+
+  if (!visible) return null;
+
+  // Get terminal width, subtract border (2) and padding (2) and selection indicator (2)
+  const terminalWidth = stdout?.columns || 120;
+  const contentWidth = terminalWidth - 6;
+
+  // Calculate visible lines
+  const visibleLogs = logs.slice(scrollOffset, scrollOffset + height);
+
+  // Build hint text based on selection state
+  const hasDragSelection = selection && selection.source === 'console' && selection.content;
+  const hintText = hasDragSelection
+    ? `${logs.length} logs  selection active  ⏎ copy  esc clear`
+    : selectedIndex >= 0
+      ? `${logs.length} logs  ↑↓ select  ⏎ copy  esc cancel`
+      : `${logs.length} logs  ↑↓ select  F12 close`;
+
+  return h(Box, {
+    flexDirection: 'column',
+    borderStyle: 'round',
+    borderColor: hasDragSelection ? theme.colors.accent : theme.colors.border,
+    paddingLeft: 1,
+    paddingRight: 1,
+    height: height + 2,
+  },
+    // Header
+    h(Box, { justifyContent: 'flex-start' },
+      h(Text, { color: theme.colors.accent, bold: true }, 'CONSOLE'),
+      h(Text, { color: theme.colors.textSecondary }, `  ${hintText}`)
+    ),
+    // Log entries with selection support
+    ...visibleLogs.map((log, index) => {
+      const logIndex = scrollOffset + index;
+      const isSelected = logIndex === selectedIndex;
+      const displayText = truncateText(log.message, contentWidth);
+
+      return h(Box, { key: `log-${logIndex}` },
+        // Selection indicator (keyboard selection)
+        h(Text, { color: theme.colors.accent }, isSelected ? '› ' : '  '),
+        // Log text with drag selection support
+        renderLogWithSelection(
+          displayText,
+          index,
+          scrollOffset,
+          selection,
+          getLogColor(log.level, theme),
+          log.level === 'error'
+        )
+      );
+    }),
+    // Empty lines if not enough logs
+    ...Array(Math.max(0, height - visibleLogs.length - 1)).fill(null).map((_, i) =>
+      h(Box, { key: `empty-${i}` }, h(Text, null, ' '))
+    )
+  );
+}
+
+/**
+ * Get color based on log level
+ */
+function getLogColor(level, theme) {
+  switch (level) {
+    case 'error': return theme.colors.danger;
+    case 'warn': return theme.colors.warning;
+    case 'info': return theme.colors.accent;
+    case 'debug': return theme.colors.textSecondary;
+    default: return theme.colors.textPrimary;
+  }
+}
+
+/**
+ * Format timestamp for display
+ */
+function formatTime(date) {
+  if (!date) return '--:--:--';
+  const d = date instanceof Date ? date : new Date(date);
+  return d.toTimeString().slice(0, 8);
+}

package/commands/attach/ink-repl/components/DetailView.js

@@ -0,0 +1,148 @@
+import React, { useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { getLineSelectionRanges } from '../replState.js';
+
+const h = React.createElement;
+
+/**
+ * Render a line with selection highlighting
+ * @param {string} line - The text line
+ * @param {number} lineIndex - 0-based line index in visible area
+ * @param {number} scrollOffset - Current scroll offset
+ * @param {Object} selection - Selection state
+ * @returns {React.Element}
+ */
+function renderLineWithSelection(line, lineIndex, scrollOffset, selection) {
+  const actualLineIndex = scrollOffset + lineIndex;
+  const lineText = line || ' ';
+
+  if (!selection) {
+    return h(Text, { key: `line-${lineIndex}` }, lineText);
+  }
+
+  const ranges = getLineSelectionRanges(selection, actualLineIndex, lineText.length);
+
+  if (ranges.length === 0) {
+    return h(Text, { key: `line-${lineIndex}` }, lineText);
+  }
+
+  // Split line into segments based on selection ranges
+  const segments = [];
+  let lastEnd = 0;
+
+  for (const range of ranges) {
+    // Unselected part before this range
+    if (range.start > lastEnd) {
+      segments.push(
+        h(Text, { key: `seg-${lastEnd}-unselected` },
+          lineText.substring(lastEnd, range.start)
+        )
+      );
+    }
+
+    // Selected part
+    segments.push(
+      h(Text,
+        {
+          key: `seg-${range.start}-selected`,
+          inverse: true,
+          color: 'cyan',
+        },
+        lineText.substring(range.start, range.end)
+      )
+    );
+
+    lastEnd = range.end;
+  }
+
+  // Unselected part after last range
+  if (lastEnd < lineText.length) {
+    segments.push(
+      h(Text, { key: `seg-${lastEnd}-tail` },
+        lineText.substring(lastEnd)
+      )
+    );
+  }
+
+  return h(Text, { key: `line-${lineIndex}` }, ...segments);
+}
+
+/**
+ * Detail view for full output
+ * @param {string} title - Command title
+ * @param {string} content - Full output content
+ * @param {string[]} lines - Pre-wrapped content lines (optional)
+ * @param {number} scrollOffset - Current scroll position
+ * @param {number} availableHeight - Available height passed from parent (excludes status bar)
+ * @param {Object} selection - Selection state for highlighting
+ * @param {Object} paginatedFile - Paginated file state (if applicable)
+ */
+export function DetailView({ title, content, lines = null, scrollOffset = 0, availableHeight, selection = null, paginatedFile = null }) {
+  const { stdout } = useStdout();
+  const width = stdout ? stdout.columns || 80 : 80;
+  const terminalHeight = stdout ? stdout.rows || 24 : 24;
+
+  // Use passed height or calculate from terminal (minus status bar)
+  const totalHeight = availableHeight || (terminalHeight - 1);
+
+  // Fixed layout: header (2) + content area (rest)
+  const headerHeight = 2;
+
+  // Use wrapped lines if provided; otherwise fallback to logical lines.
+  const allLines = useMemo(() => {
+    if (Array.isArray(lines) && lines.length >= 0) return lines;
+    return String(content ?? '').split('\n');
+  }, [content, lines]);
+
+  // Fixed content height (total - header)
+  const contentHeight = totalHeight - headerHeight;
+
+  // Check if scrolling is needed
+  const needsScrolling = allLines.length > contentHeight;
+
+  // Get visible lines - exactly contentHeight lines
+  const visibleLines = allLines.slice(scrollOffset, scrollOffset + contentHeight);
+
+  // Build scroll info string (shown in header area)
+  let scrollInfo = '';
+  if (needsScrolling) {
+    const endLine = Math.min(scrollOffset + contentHeight, allLines.length);
+    scrollInfo = ` [${scrollOffset + 1}-${endLine}/${allLines.length}]`;
+  }
+  
+  // Add loading indicator if paginated file is loading
+  let loadingIndicator = '';
+  if (paginatedFile && paginatedFile.isLoading) {
+    loadingIndicator = ' ⟳ Loading...';
+  }
+
+  // Build all output lines (exactly contentHeight lines)
+  // This ensures stable rendering without relying on Ink's flexbox
+  const outputLines = [];
+  for (let i = 0; i < contentHeight; i++) {
+    if (i < visibleLines.length) {
+      outputLines.push(visibleLines[i]);
+    } else {
+      outputLines.push(''); // Empty padding line
+    }
+  }
+
+  return h(Box, { flexDirection: 'column' },
+    // Fixed Header with scroll info
+    h(Text, null,
+      h(Text, { color: 'cyan' }, '← back (esc)'),
+      h(Text, { dimColor: true }, ' │ '),
+      h(Text, { color: 'green' }, 'Ctrl+Y copy'),
+      h(Text, { dimColor: true }, scrollInfo),
+      h(Text, { color: 'yellow' }, loadingIndicator),
+      h(Text, null, ' '.repeat(Math.max(1, width - 12 - 11 - scrollInfo.length - loadingIndicator.length - title.length - 10))),
+      h(Text, { dimColor: true }, 'Output: ', title)
+    ),
+    h(Text, { dimColor: true }, '─'.repeat(width)),
+
+    // Content area - render exactly contentHeight lines with selection support
+    ...outputLines.map((line, i) =>
+      renderLineWithSelection(line, i, scrollOffset, selection)
+    )
+  );
+}

package/commands/attach/ink-repl/components/DropdownMenu.js

@@ -0,0 +1,86 @@
+import React, { useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+
+const h = React.createElement;
+
+/**
+ * Truncate text with ellipsis
+ */
+export function truncateText(text, maxLength) {
+  if (!text || text.length <= maxLength) return text || '';
+  return text.slice(0, maxLength - 1) + '…';
+}
+
+/**
+ * Single menu item - Claude Code style
+ * Layout: "› /command                              description text..."
+ */
+export function MenuItem({ item, isSelected, labelWidth, descWidth }) {
+  const label = item.label.padEnd(labelWidth);
+  const desc = truncateText(item.description, descWidth);
+
+  // Use › indicator for selected item
+  const prefix = isSelected ? '› ' : '  ';
+  const labelStyle = isSelected
+    ? { color: 'cyan', bold: true }
+    : { color: 'white' };
+
+  return h(Box, null,
+    h(Text, { color: isSelected ? 'cyan' : undefined }, prefix),
+    h(Text, labelStyle, label),
+    h(Text, null, '    '),  // 4 spaces gap between command and description
+    h(Text, { dimColor: true }, desc)
+  );
+}
+
+/**
+ * Dropdown menu with scrolling - Claude Code style
+ */
+export function DropdownMenu({ items, selectedIndex, maxVisible = 8 }) {
+  const { stdout } = useStdout();
+  const termWidth = stdout ? stdout.columns || 80 : 80;
+
+  // Calculate scroll offset
+  const scrollOffset = useMemo(() => {
+    if (items.length <= maxVisible) return 0;
+    const halfVisible = Math.floor(maxVisible / 2);
+    let offset = selectedIndex - halfVisible;
+    offset = Math.max(0, offset);
+    offset = Math.min(items.length - maxVisible, offset);
+    return offset;
+  }, [items.length, selectedIndex, maxVisible]);
+
+  // Calculate column widths based on longest label
+  const labelWidth = useMemo(() => {
+    const maxLabel = Math.max(...items.map(i => i.label.length));
+    return Math.min(maxLabel + 2, 40); // Cap at 40 chars
+  }, [items]);
+
+  // Description takes remaining space (minus prefix and gaps: 2 + 4 + some buffer)
+  const descWidth = Math.max(20, termWidth - labelWidth - 10);
+
+  const visibleItems = items.slice(scrollOffset, scrollOffset + maxVisible);
+  const hasMoreAbove = scrollOffset > 0;
+  const hasMoreBelow = scrollOffset + maxVisible < items.length;
+
+  return h(Box, { flexDirection: 'column' },
+    // Scroll up indicator
+    hasMoreAbove
+      ? h(Text, { dimColor: true }, '  ↑ ', scrollOffset, ' more')
+      : null,
+    // Menu items
+    ...visibleItems.map((item, index) =>
+      h(MenuItem, {
+        key: item.value || `item-${index}`,
+        item: item,
+        isSelected: (index + scrollOffset) === selectedIndex,
+        labelWidth: labelWidth,
+        descWidth: descWidth,
+      })
+    ),
+    // Scroll down indicator
+    hasMoreBelow
+      ? h(Text, { dimColor: true }, '  ↓ ', items.length - scrollOffset - maxVisible, ' more')
+      : null
+  );
+}

package/commands/attach/ink-repl/components/InputArea.js

@@ -0,0 +1,125 @@
+import React, { useMemo } from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { useTheme } from '../contexts/ThemeContext.js';
+import { useLayout } from '../contexts/LayoutContext.js';
+import { getPlaceholderText } from '../utils/paramHint.js';
+
+/**
+ * Create ANSI background color escape sequence from hex color
+ * This avoids issues with the bgHex method being obfuscated incorrectly
+ */
+function hexToAnsiBg(hexColor) {
+  // Remove # if present
+  const hex = hexColor.replace('#', '');
+  // Parse RGB values
+  const r = parseInt(hex.substring(0, 2), 16);
+  const g = parseInt(hex.substring(2, 4), 16);
+  const b = parseInt(hex.substring(4, 6), 16);
+  // Return ANSI escape sequence for background color
+  return `\x1b[48;2;${r};${g};${b}m`;
+}
+
+const h = React.createElement;
+
+/**
+ * Calculate the display width of a string (handling wide characters like CJK)
+ */
+function stringWidth(str) {
+  let width = 0;
+  for (const char of str) {
+    const code = char.codePointAt(0);
+    // CJK characters and other wide characters
+    if (
+      (code >= 0x1100 && code <= 0x115f) || // Hangul Jamo
+      (code >= 0x2e80 && code <= 0xa4cf) || // CJK
+      (code >= 0xac00 && code <= 0xd7a3) || // Hangul Syllables
+      (code >= 0xf900 && code <= 0xfaff) || // CJK Compatibility Ideographs
+      (code >= 0xfe10 && code <= 0xfe1f) || // Vertical forms
+      (code >= 0xfe30 && code <= 0xfe6f) || // CJK Compatibility Forms
+      (code >= 0xff00 && code <= 0xff60) || // Fullwidth Forms
+      (code >= 0xffe0 && code <= 0xffe6) || // Fullwidth Forms
+      (code >= 0x20000 && code <= 0x2fffd) || // CJK Extension B
+      (code >= 0x30000 && code <= 0x3fffd)    // CJK Extension C
+    ) {
+      width += 2;
+    } else {
+      width += 1;
+    }
+  }
+  return width;
+}
+
+/**
+ * Input area with separator lines (like Claude Code style)
+ *
+ * Layout:
+ * ────────────────────────────
+ * ❯ user input here█ @<param>
+ * ────────────────────────────
+ *
+ * Shows parameter hints (placeholder text) for /upload and /download commands.
+ */
+export function InputArea({ 
+  prompt = '❯ ', 
+  buffer = '', 
+  cursorPosition = null, 
+  showCursor = true,
+  menuVisible = false,
+  menuType = null 
+}) {
+  const { stdout } = useStdout();
+  const { theme } = useTheme();
+  const { width: layoutWidth } = useLayout();
+  const fallbackWidth = stdout ? stdout.columns || 80 : 80;
+  const width = Math.max(1, layoutWidth || fallbackWidth);
+
+  // Memoize separator to avoid recalculating on every render
+  // Use bold line character '━' for thicker appearance
+  const separator = useMemo(() => '━'.repeat(width), [width]);
+  
+  // Blue color for input area separator (like Claude Code style)
+  const separatorColor = '#4a90d9';
+
+  // Cursor position defaults to end of buffer if not specified
+  const actualCursorPos = cursorPosition !== null && cursorPosition !== undefined ? cursorPosition : buffer.length;
+  
+  // Split buffer at cursor position
+  const beforeCursor = buffer.slice(0, actualCursorPos);
+  const atCursor = buffer.slice(actualCursorPos, actualCursorPos + 1); // Character at cursor
+  const afterCursor = buffer.slice(actualCursorPos + 1);
+
+  // Calculate placeholder text for parameter hints
+  const placeholderText = useMemo(() => {
+    // Don't show if menu is visible and it's a slash menu
+    if (menuVisible && menuType === 'slash') {
+      return null;
+    }
+    return getPlaceholderText(buffer, actualCursorPos);
+  }, [buffer, actualCursorPos, menuVisible, menuType]);
+
+  return h(Box, { flexDirection: 'column', width, marginTop: 0, flexShrink: 0 },
+    // Top separator (bold and dark)
+    h(Text, { color: separatorColor, wrap: 'truncate' }, separator),
+    // Input line with padding
+    h(Box, { paddingLeft: 1, paddingTop: 1, paddingBottom: 1, width: Math.max(1, width - 1) },
+      h(Text, { color: theme.colors.prompt }, prompt),
+      // Render buffer before cursor
+      h(Text, null, beforeCursor),
+      // Render cursor block: either covering a character or showing as space at end
+      showCursor ? h(Text, null,
+        hexToAnsiBg(theme.colors.cursor) + (atCursor || ' ') + '\x1b[0m'
+      ) : (
+        // When cursor is hidden, still show the character at cursor position
+        atCursor ? h(Text, null, atCursor) : null
+      ),
+      // Render buffer after cursor
+      h(Text, null, afterCursor),
+      // Render placeholder (FR-005: secondary text color)
+      placeholderText ? h(Text, { color: theme.colors.textSecondary }, 
+        ' ' + placeholderText
+      ) : null
+    ),
+    // Bottom separator (bold and dark)
+    h(Text, { color: separatorColor, wrap: 'truncate' }, separator)
+  );
+}

package/commands/attach/ink-repl/components/InputLine.js

@@ -0,0 +1,18 @@
+'use strict';
+
+const React = require('react');
+const { Box, Text } = require('ink');
+const h = React.createElement;
+
+/**
+ * Input line with prompt, buffer, and cursor
+ */
+function InputLine({ prompt = '', buffer = '', showCursor = true }) {
+  return h(Box, null,
+    h(Text, { color: 'green' }, prompt),
+    h(Text, null, buffer),
+    showCursor ? h(Text, { inverse: true }, ' ') : null
+  );
+}
+
+module.exports = { InputLine };

package/commands/attach/ink-repl/components/OutputArea.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, useStdout } from 'ink';
+import { useLayout } from '../contexts/LayoutContext.js';
+
+const h = React.createElement;
+
+export function OutputArea({ children }) {
+  const { stdout } = useStdout();
+  const { width: layoutWidth } = useLayout();
+  const fallbackWidth = stdout?.columns || 80;
+  const width = Math.max(1, layoutWidth || fallbackWidth);
+
+  return h(Box, {
+    flexDirection: 'column',
+    width,
+    flexGrow: 1,
+    flexShrink: 1,
+    minHeight: 1,
+    rowGap: 0,
+    paddingBottom: 0,  // Remove padding, handled by RESERVED_FIXED_ROWS
+  }, children);
+}