rl-rockcli 0.0.9 → 0.0.10

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Box, Text, useStdout } from 'ink';
+import { truncateOutputToLines, formatTruncationHint } from '../utils/truncate.js';
+import { formatTimestamp } from '../utils/formatTime.js';
+import { useTheme } from '../contexts/ThemeContext.js';
+import { useLayout } from '../contexts/LayoutContext.js';
+import { sliceByWidth } from '../utils/textWrap.js';
+
+const h = React.createElement;
+
+/**
+ * Single output item (command + output)
+ */
+export function OutputItem({ item, prompt, maxLines = 20, onViewFull }) {
+  const { command, output, exitCode, isWelcome, timestamp, metaInfo, tips } = item;
+  const { stdout } = useStdout();
+  const terminalWidth = stdout?.columns || 80;
+  const { width: layoutWidth } = useLayout();
+  const contentWidth = Math.max(20, layoutWidth || terminalWidth);
+  const { theme } = useTheme();
+  // Outer width: border(2) + padding(2) = 4 chars overhead
+  // Use extra safety margin to prevent any overflow
+  const boxInnerWidth = Math.max(10, contentWidth - 4);
+  // Width for text content with extra safety buffer
+  const textSafeWidth = Math.max(5, boxInnerWidth - 2);
+
+  const hasOutput = typeof output === 'string' ? output.length > 0 : !!output;
+  const { lines: outputLines, truncated, hiddenLines } = hasOutput
+    ? truncateOutputToLines(String(output), boxInnerWidth, maxLines)
+    : { lines: [], truncated: false, hiddenLines: 0 };
+
+  // Welcome message - no command line, just output
+  if (isWelcome) {
+    return h(Box, { flexDirection: 'column', paddingLeft: 1 },
+      h(Text, { color: theme.colors.accent, wrap: 'wrap' }, output)
+    );
+  }
+
+  const outputColor = exitCode === 0 ? theme.colors.textPrimary : theme.colors.danger;
+
+  return h(Box, {
+    flexDirection: 'column',
+    width: contentWidth,
+    flexShrink: 0,  // Never shrink - prevents content overlap
+    borderStyle: 'round',
+    borderColor: exitCode === 0 ? theme.colors.border : theme.colors.danger,
+  },
+    // Inner content box: adds padding so mouse selection naturally stays inside
+    h(Box, {
+      flexDirection: 'column',
+      paddingLeft: 1,
+      paddingRight: 1,
+      paddingTop: 0,
+      paddingBottom: hasOutput ? 0 : 0,
+    },
+      // Command line with timestamp
+      h(Box, { width: boxInnerWidth, flexDirection: 'row' },
+        h(Text, { wrap: 'truncate' },
+          timestamp ? h(Text, { color: theme.colors.textSecondary, dimColor: true }, `[${formatTimestamp(timestamp)}] `) : null,
+          h(Text, { color: theme.colors.prompt }, String(prompt)),
+          h(Text, { color: theme.colors.textPrimary }, String(command))
+        )
+      ),
+      // Output - render wrapped lines with proper width constraint
+      hasOutput ? h(Box, { flexDirection: 'column', width: boxInnerWidth, paddingTop: 0 },
+        ...outputLines.map((line, i) => {
+          // Truncate line to safe width
+          const safeLine = sliceByWidth(line, textSafeWidth).head || ' ';
+          return h(Box, { key: `out-${i}`, width: textSafeWidth },
+            h(Text, { color: outputColor }, safeLine)
+          );
+        }),
+        // Truncation hint - wrap in Box to ensure it's on its own line
+        truncated
+          ? h(Box, { key: 'hint' },
+              h(Text, { color: theme.colors.warning, dimColor: true },
+                formatTruncationHint(hiddenLines)
+              )
+            )
+          : null
+      ) : null,
+      // Meta info (exit code) - displayed in gray when command fails
+      metaInfo && exitCode !== 0
+        ? h(Box, { key: 'meta', marginTop: 1 },
+            h(Text, { dimColor: true }, metaInfo)
+          )
+        : null,
+      // Tips - helpful hints when command fails
+      tips && exitCode !== 0
+        ? h(Box, { key: 'tips' },
+            h(Text, { color: theme.colors.warning }, `💡 ${tips}`)
+          )
+        : null
+    )
+  );
+}

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

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import { Box, useStdout } from 'ink';
+import { LayoutProvider } from '../contexts/LayoutContext.js';
+
+const h = React.createElement;
+
+const DEFAULT_WIDTH_FRACTION = 1;
+const MAX_WIDTH = Infinity;
+const VERTICAL_PADDING = 2;
+const SMALL_TERMINAL_ROWS = 16;
+
+export function ShellLayout({ children, widthFraction = DEFAULT_WIDTH_FRACTION }) {
+  const { stdout } = useStdout();
+  const columns = stdout?.columns || 100;
+  const rows = stdout?.rows || 30;
+  const verticalPadding = rows <= SMALL_TERMINAL_ROWS ? 0 : VERTICAL_PADDING;
+
+  const contentWidth = useMemo(() => {
+    const maxByFraction = Math.floor(columns * widthFraction);
+    const clamped = Math.min(maxByFraction, MAX_WIDTH);
+    // fallback to full width when terminal too narrow
+    if (columns < 80) {
+      return columns;
+    }
+    return clamped;
+  }, [columns, widthFraction]);
+
+  const horizontalPadding = Math.max(0, Math.floor((columns - contentWidth) / 2));
+
+  // Separate children into content and statusBar
+  const childArray = React.Children.toArray(children);
+  const statusBar = childArray[childArray.length - 1]; // Last child is StatusBar
+  const content = childArray.slice(0, -1); // Everything else
+
+  return h(Box, {
+    flexDirection: 'column',
+    height: rows,
+    width: columns,
+    paddingLeft: horizontalPadding,
+    paddingRight: horizontalPadding,
+  },
+    h(LayoutProvider, { width: contentWidth },
+      h(Box, { flexDirection: 'column', height: rows },
+        // Scrollable content area
+        h(Box, {
+          flexDirection: 'column',
+          width: contentWidth,
+          flexGrow: 1,
+          overflow: 'hidden',
+          paddingTop: verticalPadding,
+        }, content),
+        // Fixed status bar at bottom
+        h(Box, {
+          flexDirection: 'column',
+          width: contentWidth,
+          flexShrink: 0,
+        }, statusBar)
+      )
+    )
+  );
+}

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

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Text } from 'ink';
+import { useSpinner, formatSpinnerText } from '../hooks/useSpinner.js';
+
+const h = React.createElement;
+
+/**
+ * Format duration in human readable format
+ */
+export function formatDuration(ms) {
+  if (ms === null || ms === undefined) return '';
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  const minutes = Math.floor(ms / 60000);
+  const seconds = ((ms % 60000) / 1000).toFixed(0);
+  return `${minutes}m${seconds}s`;
+}
+
+/**
+ * Executing spinner - shows in output area (not input area)
+ * Layout:
+ *   ⏵ executing command...
+ */
+export function ExecutingSpinner({ command, maxWidth = 60 }) {
+  const { frame } = useSpinner(true);
+  const text = formatSpinnerText(frame, command, maxWidth);
+
+  return h(Box, { flexDirection: 'column' },
+    h(Text, null, ''),  // Empty line before
+    h(Box, null,
+      h(Text, { color: 'yellow' }, text)
+    ),
+    h(Text, null, '')   // Empty line after
+  );
+}
+
+/**
+ * Execution status area - shows spinner when executing, duration when done
+ * Shows elapsed time when executing for more than 1 minute
+ */
+export function ExecutionStatus({ isExecuting, command, lastDuration, executionStartTime, maxWidth = 60 }) {
+  const { frame } = useSpinner(isExecuting);
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  // Update elapsed time every second when executing
+  useEffect(() => {
+    if (!isExecuting || !executionStartTime) {
+      setElapsedTime(0);
+      return;
+    }
+
+    const updateElapsed = () => {
+      setElapsedTime(Date.now() - executionStartTime);
+    };
+
+    updateElapsed();
+    const interval = setInterval(updateElapsed, 1000);
+    return () => clearInterval(interval);
+  }, [isExecuting, executionStartTime]);
+
+  let content;
+  if (isExecuting) {
+    const text = formatSpinnerText(frame, command, maxWidth);
+    // Show elapsed time if executing for more than 1 minute (60000ms)
+    if (elapsedTime > 60000) {
+      content = h(Text, { color: 'yellow' }, `${text} (${formatDuration(elapsedTime)})`);
+    } else {
+      content = h(Text, { color: 'yellow' }, text);
+    }
+  } else if (lastDuration !== null) {
+    content = h(Text, { dimColor: true }, `⏵ completed in ${formatDuration(lastDuration)}`);
+  } else {
+    content = h(Text, { dimColor: true }, '⏵ ready');
+  }
+
+  return h(Box, { flexDirection: 'column', flexShrink: 0 },
+    h(Box, { paddingLeft: 1 }, content)
+  );
+}

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

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { keybindingManager } from '../shortcuts/index.js';
+import { useTheme } from '../contexts/ThemeContext.js';
+
+const h = React.createElement;
+
+/**
+ * Format resource usage for display
+ */
+export function formatResources(resources) {
+  if (!resources) return '';
+
+  const parts = [];
+
+  if (resources.cpu !== undefined) {
+    parts.push(`CPU ${resources.cpu}`);
+  }
+
+  if (resources.load !== undefined) {
+    parts.push(`LOAD ${resources.load}`);
+  }
+
+  if (resources.memory) {
+    parts.push(`MEM ${resources.memory.used}/${resources.memory.total}`);
+  }
+
+  if (resources.disk) {
+    parts.push(`DISK ${resources.disk.used}/${resources.disk.total}`);
+  }
+
+  return parts.join('  ');
+}
+
+/**
+ * StatusBar component
+ * Layout: {sandboxId}  {systemInfo}  {keyHints}
+ * Uses flexbox for proper spacing without wrapping
+ */
+export function StatusBar({
+  sandboxId = '',
+  hostIp = null,
+  resources = null,
+  mode = 'repl',
+  menuVisible = false,
+  isExecuting = false,
+  consoleVisible = false,
+  exitPending = false,
+  hasSelection = false,
+  mouseCaptureEnabled = true,
+}) {
+  const { theme } = useTheme();
+  // Build sections: left=sandboxId + hostIp, middle=resources, right=keyHints
+  const idPart = sandboxId ? `◉ ${sandboxId}` : '';
+  const leftSection = hostIp ? `${idPart}  ${hostIp}` : idPart;
+  const middleSection = formatResources(resources);
+
+  // Build simplified key hints based on mode and state
+  let rightSection = '';
+
+  if (hasSelection) {
+    // Text selected: copy mode
+    rightSection = '⏎ copy selection  esc cancel';
+  } else if (mode === 'detail') {
+    // Detail view: minimal hints
+    rightSection = 'esc back';
+  } else if (isExecuting) {
+    // Command executing
+    rightSection = 'ctrl+c cancel  F12 console';
+  } else if (menuVisible) {
+    // Menu visible
+    rightSection = '⏎ confirm';
+  } else {
+    // Default REPL mode: minimal hints
+    rightSection = '/ commands  F12 console  ctrl+c exit';
+  }
+
+  // Exit pending warning message
+  const exitWarning = exitPending ? 'Press ctrl+c again to exit' : null;
+
+  // Use flexbox layout: left | center | right (三栏等宽布局)
+  return h(Box, { flexDirection: 'column', marginTop: 1 },
+    // Exit pending warning - shown above the status bar
+    exitWarning && h(Box, { paddingLeft: 2 },
+      h(Text, { color: theme.colors.warning, bold: true }, `⚠ ${exitWarning}`)
+    ),
+    h(Box, {
+      paddingLeft: 2,
+      paddingRight: 2,
+      paddingTop: exitWarning ? 0 : 1,
+    },
+      // Left section: sandbox ID (cyan)
+      h(Box, { flexGrow: 1, flexBasis: 0 },
+        h(Text, { color: theme.colors.accent }, leftSection)
+      ),
+      // Center section: resources (yellow) - centered
+      h(Box, { flexGrow: 1, flexBasis: 0, justifyContent: 'center' },
+        middleSection ? h(Text, { color: theme.colors.warning }, middleSection) : null
+      ),
+      // Right section: key hints (dim) - right aligned
+      h(Box, { flexGrow: 1, flexBasis: 0, justifyContent: 'flex-end' },
+        h(Text, { color: theme.colors.textSecondary }, rightSection)
+      )
+    )
+  );
+}

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from '../contexts/ThemeContext.js';
+import i18n from '../../../../utils/i18n.js';
+const { t } = i18n;
+
+const h = React.createElement;
+
+const ASCII_LINES = [
+  '██████╗   ██████    ██████╗ ██╗  ██╗     ██████╗ ██╗      ██╗',
+  '██╔══██╗ ██╔═══██╗ ██╔════╝ ██║ ██╔╝    ██╔════╝ ██║      ██║',
+  '██████╔╝ ██║   ██║ ██║      █████╔╝     ██║      ██║      ██║',
+  '██╔══██╗ ██║   ██║ ██║      ██╔═██╗     ██║      ██║      ██║',
+  '██║  ██║ ╚██████╔╝ ╚██████╗ ██║  ██╗    ╚██████╗ ███████╗ ██║',
+  '╚═╝  ╚═╝  ╚═════╝   ╚═════╝ ╚═╝  ╚═╝     ╚═════╝ ╚══════╝ ╚═╝',
+];
+
+export function WelcomeBanner({ title = 'ROCK' }) {
+  const { theme } = useTheme();
+
+  let gradient = theme.colors.gradient || ['#89b4fa', '#cba6f7', '#f38ba8'];
+  if (theme.semantic && theme.semantic.banner) {
+    gradient = theme.semantic.banner;
+  }
+
+  const TIPS = [
+    t('welcome.tip.commands'),
+    t('welcome.tip.execute'),
+    t('welcome.tip.console'),
+    t('welcome.tip.exit'),
+  ];
+
+  return h(Box, { flexDirection: 'column', alignItems: 'center', marginBottom: 1 },
+    ASCII_LINES.map((line, index) =>
+      h(Text, {
+        key: `banner-line-${index}`,
+        color: gradient[index % gradient.length],
+        bold: true,
+      }, line)
+    ),
+    h(Box, { flexDirection: 'column', alignItems: 'center', marginTop: 1 },
+      TIPS.map((tip, idx) => h(Text, {
+        key: `tip-${idx}`,
+        color: theme.colors.textSecondary,
+      }, tip))
+    )
+  );
+}

package/commands/attach/ink-repl/contexts/LayoutContext.js

@@ -0,0 +1,12 @@
+import React, { createContext, useContext, useMemo } from 'react';
+
+const LayoutContext = createContext({ width: undefined });
+
+export function LayoutProvider({ width, children }) {
+  const value = useMemo(() => ({ width }), [width]);
+  return React.createElement(LayoutContext.Provider, { value }, children);
+}
+
+export function useLayout() {
+  return useContext(LayoutContext);
+}

package/commands/attach/ink-repl/contexts/ThemeContext.js

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useMemo, useState } from 'react';
+import { themeManager } from '../themes/index.js';
+
+const ThemeContext = createContext({
+  theme: themeManager.getActiveTheme(),
+  themeName: themeManager.getActiveTheme().name,
+  setTheme: () => false,
+  listThemes: () => [],
+});
+
+export function ThemeProvider({ initialTheme, onThemeChange, children }) {
+  const [themeName, setThemeName] = useState(() => {
+    if (initialTheme && themeManager.setActiveTheme(initialTheme)) {
+      return initialTheme;
+    }
+    return themeManager.getActiveTheme().name;
+  });
+
+  const value = useMemo(() => {
+    const activeTheme = themeManager.getActiveTheme();
+    return {
+      theme: activeTheme,
+      themeName: activeTheme.name,
+      setTheme: (name) => {
+        if (themeManager.setActiveTheme(name)) {
+          setThemeName(name);
+          if (onThemeChange) {
+            onThemeChange(name);
+          }
+          return true;
+        }
+        return false;
+      },
+      listThemes: () => themeManager.listThemes(),
+    };
+  }, [themeName, onThemeChange]);
+
+  return React.createElement(ThemeContext.Provider, { value }, children);
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}

package/commands/attach/ink-repl/hooks/useFunctionKeys.js

@@ -0,0 +1,70 @@
+import { useEffect } from 'react';
+import { useStdin } from 'ink';
+import { keybindingManager, FN_KEY_SEQUENCES } from '../shortcuts/index.js';
+
+/**
+ * Hook to detect function keys (F1-F12) and map them to actions
+ * Ink's useInput doesn't expose function keys, so we need to listen to raw input
+ *
+ * @param {Object} actionHandlers - Object mapping action names to handler functions
+ *   e.g., { toggleConsole: () => setState(s => toggleConsole(s)) }
+ * @param {Object} options - Options
+ * @param {boolean} options.isActive - Whether the hook is active
+ */
+export function useFunctionKeys(actionHandlers, options = {}) {
+  // Access Ink's internal event emitter for input events
+  const stdinContext = useStdin();
+  const isActive = options.isActive !== false;
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Use Ink's internal_eventEmitter if available (Ink v6+)
+    const eventEmitter = stdinContext.internal_eventEmitter;
+
+    if (eventEmitter) {
+      // Listen to raw input events from Ink's internal emitter
+      const handleInput = (data) => {
+        const input = String(data);
+
+        // Try to match against each action
+        for (const [action, handler] of Object.entries(actionHandlers)) {
+          if (keybindingManager.matchesFunctionKeyAction(action, input)) {
+            handler();
+            return;
+          }
+        }
+      };
+
+      eventEmitter.on('input', handleInput);
+      return () => {
+        eventEmitter.off('input', handleInput);
+      };
+    }
+
+    // Fallback: listen directly to stdin (older Ink versions)
+    const { stdin, setRawMode } = stdinContext;
+    if (!stdin) return;
+
+    setRawMode(true);
+
+    const handleData = (data) => {
+      const input = String(data);
+
+      // Try to match against each action
+      for (const [action, handler] of Object.entries(actionHandlers)) {
+        if (keybindingManager.matchesFunctionKeyAction(action, input)) {
+          handler();
+          return;
+        }
+      }
+    };
+
+    stdin.on('data', handleData);
+    return () => {
+      stdin.off('data', handleData);
+    };
+  }, [stdinContext, isActive, actionHandlers]);
+}
+
+export default useFunctionKeys;

package/commands/attach/ink-repl/hooks/useMouse.js

@@ -0,0 +1,162 @@
+import React, { useEffect } from 'react';
+import { useStdin, useStdout } from 'ink';
+
+/**
+ * Parse SGR mouse event (ESC[<button;x;yM/m)
+ * @param {string} input - Raw input string
+ * @returns {Object|null} Parsed mouse event or null
+ */
+function parseMouseEvent(input) {
+  // SGR format: ESC[<button;x;yM (press) or ESC[<button;x;ym (release)
+  const match = input.match(/\x1b\[<(\d+);(\d+);(\d+)([Mm])/);
+  if (!match) return null;
+
+  const button = parseInt(match[1], 10);
+  const x = parseInt(match[2], 10);
+  const y = parseInt(match[3], 10);
+  const isRelease = match[4] === 'm';
+
+  // Decode button:
+  // 0 = left click, 1 = middle, 2 = right
+  // 64 = scroll up, 65 = scroll down
+  // 32+ = motion with button held
+  let type = 'click';
+  let scrollDirection = null;
+
+  if (button === 64) {
+    type = 'scroll';
+    scrollDirection = 'up';
+  } else if (button === 65) {
+    type = 'scroll';
+    scrollDirection = 'down';
+  } else if (button >= 32 && button < 64) {
+    type = 'motion';
+  }
+
+  return {
+    type,
+    button: button & 3, // Extract actual button (0, 1, 2)
+    x,
+    y,
+    isRelease,
+    scrollDirection,
+  };
+}
+
+/**
+ * Hook to handle mouse events including scroll wheel and drag selection
+ *
+ * @param {Object} handlers - Event handlers
+ * @param {Function} handlers.onScroll - Called with (direction: 'up'|'down', x, y)
+ * @param {Function} handlers.onClick - Called with (button, x, y, isRelease)
+ * @param {Function} handlers.onMouseDown - Called with (button, x, y) when mouse button is pressed
+ * @param {Function} handlers.onMouseMove - Called with (x, y, isDragging) when mouse moves
+ * @param {Function} handlers.onMouseUp - Called with (button, x, y) when mouse button is released
+ * @param {Object} options - Options
+ * @param {boolean} options.isActive - Whether mouse mode is active (default: true)
+ */
+export function useMouse(handlers, options = {}) {
+  const { stdout } = useStdout();
+  const stdinContext = useStdin();
+  const isActive = options.isActive !== false;
+
+  // Track dragging state using refs to avoid re-renders
+  const dragStateRef = React.useRef({
+    isDragging: false,
+    button: null,
+    startX: 0,
+    startY: 0,
+  });
+
+  // Enable/disable mouse mode
+  useEffect(() => {
+    if (!stdout || !isActive) return;
+
+    // Skip in test environment (ink-testing-library doesn't have isTTY)
+    if (!stdout.isTTY) return;
+
+    // Enable SGR mouse mode (1006) for better coordinate handling
+    // Enable button event mode (1002) for scroll wheel + click + drag
+    // Note: 1002 is a superset of 1000, no need to enable both
+    // (gemini-cli also uses only 1002h + 1006h)
+    const enableMouse = '\x1b[?1002h\x1b[?1006h';
+    const disableMouse = '\x1b[?1006l\x1b[?1002l';
+
+    stdout.write(enableMouse);
+
+    return () => {
+      stdout.write(disableMouse);
+    };
+  }, [stdout, isActive]);
+
+  // Handle mouse events
+  useEffect(() => {
+    if (!isActive) return;
+
+    const eventEmitter = stdinContext.internal_eventEmitter;
+
+    const handleInput = (data) => {
+      const input = String(data);
+
+      // Check for mouse event
+      if (!input.includes('\x1b[<')) return;
+
+      const event = parseMouseEvent(input);
+      if (!event) return;
+
+      if (event.type === 'scroll' && handlers.onScroll) {
+        handlers.onScroll(event.scrollDirection, event.x, event.y);
+      } else if (event.type === 'click') {
+        // Handle click press/release for drag detection
+        if (!event.isRelease) {
+          // Mouse down
+          dragStateRef.current = {
+            isDragging: true,
+            button: event.button,
+            startX: event.x,
+            startY: event.y,
+          };
+          if (handlers.onMouseDown) {
+            handlers.onMouseDown(event.button, event.x, event.y);
+          }
+        } else {
+          // Mouse up
+          if (handlers.onMouseUp) {
+            handlers.onMouseUp(event.button, event.x, event.y);
+          }
+          // Reset drag state
+          dragStateRef.current.isDragging = false;
+          dragStateRef.current.button = null;
+        }
+
+        // Also call onClick for backward compatibility
+        if (handlers.onClick) {
+          handlers.onClick(event.button, event.x, event.y, event.isRelease);
+        }
+      } else if (event.type === 'motion') {
+        // Mouse move with button held
+        if (handlers.onMouseMove) {
+          handlers.onMouseMove(event.x, event.y, dragStateRef.current.isDragging);
+        }
+      }
+    };
+
+    if (eventEmitter) {
+      eventEmitter.on('input', handleInput);
+      return () => {
+        eventEmitter.off('input', handleInput);
+      };
+    }
+
+    // Fallback for older Ink versions
+    const { stdin } = stdinContext;
+    if (!stdin) return;
+
+    stdin.on('data', handleInput);
+    return () => {
+      stdin.off('data', handleInput);
+    };
+  }, [stdinContext, isActive, handlers]);
+}
+
+export default useMouse;