rl-rockcli 0.0.8 → 0.0.10

package/commands/attach/opentui-repl/contexts/toast-logic.js

@@ -0,0 +1,71 @@
+/**
+ * Toast notification state management logic.
+ *
+ * Framework-agnostic: no SolidJS dependency.
+ * Used by ToastContext.tsx for SolidJS integration,
+ * and directly testable via Jest.
+ */
+
+export const DEFAULT_DURATION = 3000;
+
+/**
+ * Create a toast manager instance.
+ * Manages currentToast state and auto-dismiss timers.
+ *
+ * @returns {object} Toast manager with show(), error(), and currentToast
+ */
+export function createToastManager() {
+  let _currentToast = null;
+  let _timeoutHandle = null;
+
+  const manager = {
+    /**
+     * Show a toast notification.
+     * @param {object} options
+     * @param {string} options.message - Toast message (required)
+     * @param {'info'|'success'|'warning'|'error'} options.variant - Toast variant (required)
+     * @param {string} [options.title] - Optional title
+     * @param {number} [options.duration=3000] - Auto-dismiss duration in ms
+     */
+    show(options) {
+      const { duration, ...toastData } = options;
+      const dismissAfter = duration != null ? duration : DEFAULT_DURATION;
+
+      _currentToast = toastData;
+
+      // Clear previous timer
+      if (_timeoutHandle) {
+        clearTimeout(_timeoutHandle);
+      }
+
+      // Set auto-dismiss timer
+      _timeoutHandle = setTimeout(() => {
+        _currentToast = null;
+        _timeoutHandle = null;
+      }, dismissAfter);
+    },
+
+    /**
+     * Show an error toast from an Error, string, or unknown value.
+     * @param {*} err
+     */
+    error(err) {
+      if (err instanceof Error) {
+        manager.show({ variant: 'error', message: err.message });
+      } else if (typeof err === 'string') {
+        manager.show({ variant: 'error', message: err });
+      } else {
+        manager.show({ variant: 'error', message: 'An unknown error occurred' });
+      }
+    },
+
+    /**
+     * Current toast or null.
+     */
+    get currentToast() {
+      return _currentToast;
+    },
+  };
+
+  return manager;
+}

package/commands/attach/opentui-repl/hooks/useResources.ts

@@ -0,0 +1,102 @@
+import { onCleanup } from 'solid-js';
+import { useRepl } from '../contexts/ReplContext.tsx';
+import { useSession } from '../contexts/SessionContext.tsx';
+
+const REFRESH_INTERVAL = 10000;
+const INITIAL_DELAY = 1000;
+const RESOURCE_COMMAND =
+  "cat /proc/loadavg; top -bn1 | head -3; free -b | head -2; df -B1 / | tail -1";
+
+function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)}G`;
+}
+
+function parseResourceOutput(output: string) {
+  try {
+    const lines = output.split('\n');
+    const result: any = {};
+
+    // Parse load average from /proc/loadavg (first line)
+    const loadLine = lines[0];
+    if (loadLine) {
+      const loadParts = loadLine.split(/\s+/);
+      result.load = loadParts[0] || '?';
+    }
+
+    // Parse CPU from top output
+    for (const line of lines) {
+      const cpuMatch = line.match(/(\d+[\.,]\d+)\s*(?:id|idle)/i);
+      if (cpuMatch) {
+        const idle = parseFloat(cpuMatch[1].replace(',', '.'));
+        result.cpu = `${(100 - idle).toFixed(0)}%`;
+        break;
+      }
+    }
+
+    // Parse memory from free -b
+    for (const line of lines) {
+      const memMatch = line.match(/^Mem:\s+(\d+)\s+(\d+)/);
+      if (memMatch) {
+        const total = parseInt(memMatch[1], 10);
+        const used = parseInt(memMatch[2], 10);
+        result.memory = {
+          used: formatBytes(used),
+          total: formatBytes(total),
+        };
+        break;
+      }
+    }
+
+    // Parse disk from df
+    for (const line of lines) {
+      const dfMatch = line.match(/\s+(\d+)\s+(\d+)\s+(\d+)\s+\d+%\s+\/$/);
+      if (dfMatch) {
+        const total = parseInt(dfMatch[1], 10);
+        const used = parseInt(dfMatch[2], 10);
+        result.disk = {
+          used: formatBytes(used),
+          total: formatBytes(total),
+        };
+        break;
+      }
+    }
+
+    return result;
+  } catch {
+    return null;
+  }
+}
+
+export function useResources() {
+  const [, setState] = useRepl();
+  const session = useSession();
+
+  async function fetchResources() {
+    try {
+      // Use client.execute() instead of sessionManager.execute() to avoid
+      // resource monitoring output mixing into the user's command output.
+      // client.execute() runs commands via a separate exec API, not the shared session.
+      const result = await session.client.execute(RESOURCE_COMMAND);
+      if (result?.stdout) {
+        const parsed = parseResourceOutput(result.stdout);
+        if (parsed) {
+          setState('resources', parsed);
+        }
+      }
+    } catch {
+      // Keep last known values
+    }
+  }
+
+  // Initial fetch after delay
+  const initialTimer = setTimeout(fetchResources, INITIAL_DELAY);
+  const intervalTimer = setInterval(fetchResources, REFRESH_INTERVAL);
+
+  onCleanup(() => {
+    clearTimeout(initialTimer);
+    clearInterval(intervalTimer);
+  });
+}

package/commands/attach/opentui-repl/hooks/useSpinner.ts

@@ -0,0 +1,46 @@
+import { createSignal, onCleanup } from 'solid-js';
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+const SPINNER_INTERVAL = 120;
+
+export function useSpinner(isActive: () => boolean) {
+  const [frame, setFrame] = createSignal(0);
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  function start() {
+    if (timer) return;
+    setFrame(0);
+    timer = setInterval(() => {
+      setFrame((prev) => (prev + 1) % SPINNER_FRAMES.length);
+    }, SPINNER_INTERVAL);
+  }
+
+  function stop() {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    setFrame(0);
+  }
+
+  // Watch isActive reactively
+  // We use a simple polling approach via createEffect equivalent
+  const checkTimer = setInterval(() => {
+    if (isActive() && !timer) {
+      start();
+    } else if (!isActive() && timer) {
+      stop();
+    }
+  }, 50);
+
+  onCleanup(() => {
+    stop();
+    clearInterval(checkTimer);
+  });
+
+  return () => SPINNER_FRAMES[frame()];
+}
+
+export function formatSpinnerText(frame: string, command: string): string {
+  return `${frame} ${command}`;
+}

package/commands/attach/opentui-repl/index.js

@@ -0,0 +1,99 @@
+/**
+ * OpenTUI REPL entry point
+ *
+ * Provides the same interface as ink-repl/index.js but renders
+ * using @opentui/solid (SolidJS) instead of React/Ink.
+ */
+
+/**
+ * Start the OpenTUI-based REPL
+ *
+ * @param {Object} options
+ * @param {string} options.sandboxId - Sandbox ID
+ * @param {string} options.hostname - Hostname for prompt
+ * @param {string} options.hostIp - Host IP address
+ * @param {string} options.user - Current user
+ * @param {Object} options.client - Sandbox client
+ * @param {Object} options.sessionManager - Session manager
+ * @param {Object} options.historyManager - History manager
+ * @param {string} options.initialPrompt - Initial shell prompt
+ * @param {string} options.version - CLI version
+ * @param {Array} options.triggers - Trigger definitions
+ * @param {string} options.theme - Initial theme name
+ * @param {Function} options.onThemeChange - Theme change callback
+ * @param {Function} options.onExit - Callback when REPL exits
+ * @returns {Promise<void>}
+ */
+export async function startOpenTuiREPL(options) {
+  const {
+    sandboxId,
+    hostname,
+    hostIp,
+    user,
+    client,
+    sessionManager,
+    historyManager,
+    initialPrompt = '$ ',
+    version,
+    triggers = [],
+    onExit,
+    theme,
+    onThemeChange,
+  } = options;
+
+  const session = {
+    sandboxId,
+    hostname,
+    hostIp,
+    user,
+    version,
+    client,
+    sessionManager,
+    historyManager,
+    initialPrompt,
+    triggers,
+    onExit,
+    onThemeChange,
+  };
+
+  let cleaned = false;
+  const cleanup = async () => {
+    if (cleaned) return;
+    cleaned = true;
+    if (onExit) {
+      await onExit();
+    }
+  };
+
+  try {
+    // First, show connecting screen using the existing ANSI-based approach
+    // but integrate it better with the OpenTUI flow
+    
+    // Connection is already handled by repl.js before this function is called
+    // So we can start the main REPL directly
+    const { renderApp } = await import('./render.tsx');
+    await renderApp({ session, theme });
+    
+    // Call onExit AFTER exiting alternate screen, so banner shows on main screen
+    await cleanup();
+  } catch (error) {
+    await cleanup();
+    throw error;
+  }
+}
+
+/**
+ * Create a slash command trigger (shared interface with ink-repl)
+ */
+export function createSlashTrigger(commands) {
+  return {
+    symbol: '/',
+    getItems: (prefix) => {
+      return commands.map((cmd) => ({
+        label: `/${cmd.name}`,
+        value: `/${cmd.name}`,
+        description: cmd.description || '',
+      }));
+    },
+  };
+}

package/commands/attach/opentui-repl/keybindings.ts

@@ -0,0 +1,39 @@
+/**
+ * Keyboard shortcut definitions for the OpenTUI REPL.
+ *
+ * These mirror the ink-repl/shortcuts/defaultKeybindings.js but are
+ * expressed as OpenTUI KeyEvent matchers.
+ */
+
+export interface KeyBinding {
+  name: string;
+  key: string;
+  ctrl?: boolean;
+  shift?: boolean;
+  meta?: boolean;
+  description: string;
+}
+
+export const keybindings: KeyBinding[] = [
+  { name: 'exit', key: 'c', ctrl: true, description: 'Exit (press twice)' },
+  { name: 'cancel', key: 'escape', description: 'Cancel / close menu / back from detail' },
+  { name: 'historyUp', key: 'up', description: 'Previous command in history' },
+  { name: 'historyDown', key: 'down', description: 'Next command in history' },
+  { name: 'detailView', key: 'v', ctrl: true, description: 'View full output of last command' },
+  { name: 'copy', key: 'y', ctrl: true, description: 'Copy last output to clipboard' },
+  { name: 'menuUp', key: 'up', description: 'Move up in dropdown menu' },
+  { name: 'menuDown', key: 'down', description: 'Move down in dropdown menu' },
+  { name: 'menuConfirm', key: 'return', description: 'Confirm menu selection' },
+  { name: 'menuConfirmTab', key: 'tab', description: 'Confirm menu selection (Tab)' },
+];
+
+export function matchKeybinding(
+  event: { name: string; ctrl?: boolean; shift?: boolean; meta?: boolean },
+  binding: KeyBinding
+): boolean {
+  if (event.name !== binding.key) return false;
+  if (binding.ctrl && !event.ctrl) return false;
+  if (binding.shift && !event.shift) return false;
+  if (binding.meta && !event.meta) return false;
+  return true;
+}

package/commands/attach/opentui-repl/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/commands/attach/opentui-repl/render.tsx

@@ -0,0 +1,72 @@
+import { render } from '@opentui/solid';
+import { App } from './App.tsx';
+import type { SessionInfo } from './contexts/SessionContext.tsx';
+
+function copyToClipboard(text: string) {
+  try {
+    const { execSync } = require('child_process');
+    if (process.platform === 'darwin') {
+      execSync('pbcopy', { input: text });
+    } else {
+      // Try multiple Linux clipboard tools
+      const clipboardTools = [
+        'xclip -selection clipboard',
+        'xsel -b',
+        'wl-copy',
+      ];
+      
+      let copied = false;
+      for (const tool of clipboardTools) {
+        try {
+          execSync(tool, { input: text });
+          copied = true;
+          break;
+        } catch {
+          // Try next tool
+        }
+      }
+      
+      if (!copied) {
+        // Fallback: save to temp file and show hint
+        const fs = require('fs');
+        const os = require('os');
+        const path = require('path');
+        const tmpFile = path.join(os.tmpdir(), 'rock-clipboard-' + Date.now() + '.txt');
+        fs.writeFileSync(tmpFile, text);
+        // Silently fail - user can still select and copy manually
+      }
+    }
+  } catch {
+    // Clipboard not available
+  }
+}
+
+export async function renderApp(options: {
+  session: SessionInfo;
+  theme?: string;
+  onExit?: () => void;
+}) {
+  // Use Promise pattern like opencode: resolve when exit is triggered
+  // Note: onExit callback should be called AFTER the renderer exits (outside alternate screen)
+  return new Promise<void>((resolve) => {
+    const handleExit = () => {
+      // Just resolve - onExit will be called after renderer exits
+      resolve();
+    };
+
+    render(() => <App session={options.session} theme={options.theme} onExit={handleExit} />, {
+      exitOnCtrlC: false,
+      useAlternateScreen: true,
+      targetFps: 30,
+      // Enable mouse for OpenTUI internal text selection (selectable property)
+      // OpenTUI captures mouse escape sequences at framework level,
+      // so they won't appear as garbled text in input components.
+      consoleOptions: {
+        keyBindings: [{ name: 'y', ctrl: true, action: 'copy-selection' }],
+        onCopySelection: (text: string) => {
+          copyToClipboard(text);
+        },
+      },
+    });
+  });
+}

package/commands/attach/opentui-repl/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@opentui/solid",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true
+  }
+}