rl-rockcli 0.0.9 → 0.0.11

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

@@ -0,0 +1,80 @@
+/**
+ * Adapter for ink-repl/builtinCommands.js
+ *
+ * Reuses the existing command handlers (which are UI-agnostic)
+ * and wires them into the OpenTUI REPL's state management.
+ */
+
+import { createRequire } from 'module';
+
+// Use sync require for reliable path resolution across TypeScript runtimes
+let _builtinModule: any = null;
+
+function getBuiltinModule() {
+  if (!_builtinModule) {
+    try {
+      const require = createRequire(import.meta.url);
+      _builtinModule = require('../ink-repl/builtinCommands.js');
+    } catch (err) {
+      console.error('[builtinCommands] Failed to load ink-repl/builtinCommands.js:', err);
+      throw err;
+    }
+  }
+  return _builtinModule;
+}
+
+export async function isBuiltinCommand(input: string): Promise<boolean> {
+  const mod = getBuiltinModule();
+  return mod.isBuiltinCommand(input);
+}
+
+export interface ConfirmOption {
+  label: string;
+  value: boolean;
+}
+
+export interface ConfirmData {
+  title: string;
+  message: string;
+  items?: string[];
+  moreCount?: number;
+  options: ConfirmOption[];
+  onConfirm: (confirmed: boolean) => Promise<{ output: string; exitCode: number }>;
+}
+
+export interface BuiltinResult {
+  output?: string;
+  exitCode?: number;
+  action?: 'exit' | 'clear' | 'retry' | 'confirm';
+  command?: string;
+  confirmData?: ConfirmData;
+}
+
+export interface BuiltinContext {
+  client: any;
+  sessionManager: any;
+  historyManager: any;
+  sandboxId: string;
+  version: string;
+  stats: { startTime: number; shellCommands: number; builtinCommands: number };
+  lastCommand: string;
+  lastOutput: string;
+  themeManager?: any;
+  setTheme?: (name: string) => void;
+  setUIConfig?: (key: string, value: any) => void;
+}
+
+export async function executeBuiltinCommand(
+  input: string,
+  context: BuiltinContext
+): Promise<BuiltinResult> {
+  const mod = getBuiltinModule();
+  return mod.executeBuiltinCommand(input, context);
+}
+
+export async function checkInteractiveCommand(
+  command: string
+): Promise<{ isInteractive: boolean; cmdName: string; alternative: string | null }> {
+  const mod = getBuiltinModule();
+  return mod.checkInteractiveCommand(command);
+}

package/commands/attach/opentui-repl/components/ConfirmDialog.tsx

@@ -0,0 +1,116 @@
+import { Show, For, createMemo } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl, useReplSetters } from '../contexts/ReplContext.tsx';
+
+export interface ConfirmOption {
+  label: string;
+  value: boolean;
+}
+
+export interface ConfirmData {
+  title: string;
+  message: string;
+  items?: string[];
+  moreCount?: number;
+  options: ConfirmOption[];
+  onConfirm: (confirmed: boolean) => Promise<{ output: string; exitCode: number }>;
+}
+
+export function ConfirmDialog() {
+  const theme = useTheme();
+  const [state] = useRepl();
+  const setState = useReplSetters();
+
+  const confirmData = () => state.confirmData as ConfirmData | undefined;
+  const selectedIndex = () => state.confirmSelectedIndex || 0;
+
+  const hasItems = () => confirmData()?.items && confirmData()!.items!.length > 0;
+  const showMoreCount = () => (confirmData()?.moreCount || 0) > 0;
+
+  return (
+    <Show when={confirmData()}>
+      <box
+        flexDirection="column"
+        flexGrow={1}
+        backgroundColor={theme.colors.background}
+        border={{ type: 'line', fg: theme.colors.border }}
+        paddingX={2}
+        paddingY={1}
+      >
+        {/* Title */}
+        <text>
+          <span style={{ fg: theme.colors.accent, bold: true }}>
+            {confirmData()!.title}
+          </span>
+        </text>
+
+        {/* Message */}
+        <text marginTop={1}>
+          <span style={{ fg: theme.colors.textPrimary }}>
+            {confirmData()!.message}
+          </span>
+        </text>
+
+        {/* Items list */}
+        <Show when={hasItems()}>
+          <box marginTop={1} flexDirection="column">
+            <text marginBottom={1}>
+              <span style={{ fg: theme.colors.textSecondary }}>
+                {'─'.repeat(50)}
+              </span>
+            </text>
+            <For each={confirmData()!.items}>
+              {(item) => (
+                <text>
+                  <span style={{ fg: theme.colors.textPrimary }}>
+                    {'  '}{item}
+                  </span>
+                </text>
+              )}
+            </For>
+            <Show when={showMoreCount()}>
+              <text>
+                <span style={{ fg: theme.colors.textSecondary }}>
+                  {'  '}and {confirmData()!.moreCount} more sessions not shown
+                </span>
+              </text>
+            </Show>
+            <text marginTop={1}>
+              <span style={{ fg: theme.colors.textSecondary }}>
+                {'─'.repeat(50)}
+              </span>
+            </text>
+          </box>
+        </Show>
+
+        {/* Options */}
+        <box marginTop={1} flexDirection="column">
+          <For each={confirmData()!.options}>
+            {(option, i) => {
+              const isSelected = () => i() === selectedIndex();
+              return (
+                <text>
+                  <span
+                    style={{
+                      fg: isSelected() ? theme.colors.accent : theme.colors.textPrimary,
+                      bold: isSelected(),
+                    }}
+                  >
+                    {isSelected() ? '● ' : '○ '}{option.label}
+                  </span>
+                </text>
+              );
+            }}
+          </For>
+        </box>
+
+        {/* Help text */}
+        <text marginTop={1}>
+          <span style={{ fg: theme.colors.textSecondary }}>
+            ↑/↓ Select  Enter Confirm  Esc Cancel
+          </span>
+        </text>
+      </box>
+    </Show>
+  );
+}

package/commands/attach/opentui-repl/components/ConnectingScreen.tsx

@@ -0,0 +1,131 @@
+import { Show, createSignal, onCleanup } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext';
+import i18n from '../../../../utils/i18n.js';
+import { getLogoLines, getGradientColors } from '../../../../utils/asciiArt.js';
+const { t } = i18n;
+
+const SPINNER_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+
+interface ConnectingScreenProps {
+  sandboxId: string;
+  attempt?: number;
+  maxAttempts?: number;
+  error?: string;
+}
+
+export function ConnectingScreen(props: ConnectingScreenProps) {
+  const theme = useTheme();
+  const [spinnerIndex, setSpinnerIndex] = createSignal(0);
+  const gradient = getGradientColors();
+  const ROCK_ASCII_LINES = getLogoLines();
+
+  const timer = setInterval(() => {
+    setSpinnerIndex((i) => (i + 1) % SPINNER_FRAMES.length);
+  }, 80);
+
+  onCleanup(() => clearInterval(timer));
+
+  const connectingText = () => t('connecting.message');
+  const attemptText = () => {
+    if ((props.attempt ?? 1) > 1) {
+      return t('connecting.attempt')
+        .replace('${attempt}', String(props.attempt))
+        .replace('${maxAttempts}', String(props.maxAttempts ?? 30));
+    }
+    return '';
+  };
+
+  // If error is provided, show error screen
+  if (props.error) {
+    return (
+      <box
+        width="100%"
+        height="100%"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        backgroundColor={theme.colors.background}
+      >
+        {/* ASCII Art */}
+        <box flexDirection="column" alignItems="center">
+          {ROCK_ASCII_LINES.map((line, index) => (
+            <text selectable={false}>
+              <span style={{ fg: gradient[index % gradient.length], bold: true }}>{line}</span>
+            </text>
+          ))}
+        </box>
+
+        {/* Error message */}
+        <box marginTop={2}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.danger }}>❌ {props.error}</span>
+          </text>
+        </box>
+
+        {/* Sandbox ID */}
+        <box marginTop={1}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>{props.sandboxId}</span>
+          </text>
+        </box>
+
+        {/* Exit hint */}
+        <box marginTop={2}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>Exiting...</span>
+          </text>
+        </box>
+      </box>
+    );
+  }
+
+  return (
+    <box
+      width="100%"
+      height="100%"
+      flexDirection="column"
+      justifyContent="center"
+      alignItems="center"
+      backgroundColor={theme.colors.background}
+    >
+      {/* ASCII Art */}
+      <box flexDirection="column" alignItems="center">
+        {ROCK_ASCII_LINES.map((line, index) => (
+          <text selectable={false}>
+            <span style={{ fg: gradient[index % gradient.length], bold: true }}>{line}</span>
+          </text>
+        ))}
+      </box>
+
+      {/* Connecting message */}
+      <box marginTop={2}>
+        <text selectable={false}>
+          <span style={{ fg: theme.colors.accent }}>{connectingText()}</span>
+        </text>
+      </box>
+
+      {/* Sandbox ID */}
+      <box marginTop={1}>
+        <text selectable={false}>
+          <span style={{ fg: theme.colors.textSecondary }}>{props.sandboxId}</span>
+        </text>
+      </box>
+
+      {/* Spinner */}
+      <box marginTop={2}>
+        <text selectable={false}>
+          <span style={{ fg: theme.colors.accent }}>{SPINNER_FRAMES[spinnerIndex()]} Loading...</span>
+        </text>
+      </box>
+
+      {/* Attempt counter (only show if attempt > 1) */}
+      <Show when={(props.attempt ?? 1) > 1}>
+        <box marginTop={1}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>{attemptText()}</span>
+          </text>
+        </box>
+      </Show>
+    </box>
+  );
+}

package/commands/attach/opentui-repl/components/Console.tsx

@@ -0,0 +1,73 @@
+import { Show, For } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+
+/**
+ * Get color based on log level
+ */
+function getLogColor(level: string, theme: any): string {
+  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;
+  }
+}
+
+export function Console() {
+  const theme = useTheme();
+  const [state] = useRepl();
+
+  return (
+    <Show when={state.consoleVisible}>
+      <box
+        flexDirection="column"
+        height={10}
+        minHeight={5}
+        borderStyle="rounded"
+        border
+        borderColor={theme.colors.border}
+        backgroundColor={theme.colors.surface}
+        paddingLeft={1}
+        paddingRight={1}
+      >
+        {/* Header */}
+        <box justifyContent="flex-start">
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.accent, bold: true }}>CONSOLE</span>
+            <span style={{ fg: theme.colors.textSecondary }}>
+              {'  '}{state.consoleLogs.length} logs  F12 close
+            </span>
+          </text>
+        </box>
+
+        {/* Log entries */}
+        <scrollbox
+          flexGrow={1}
+          scrollY
+          stickyScroll
+          stickyStart="bottom"
+        >
+          <box flexDirection="column">
+            <Show when={state.consoleLogs.length === 0}>
+              <text selectable={false}>
+                <span style={{ fg: theme.colors.textSecondary }}>No logs yet</span>
+              </text>
+            </Show>
+            <For each={state.consoleLogs}>
+              {(log: any) => (
+                <text selectable={true}>
+                  <span style={{ fg: theme.colors.textSecondary }}>[{log.timestamp}]</span>
+                  <span style={{ fg: getLogColor(log.level, theme), bold: log.level === 'error' }}>
+                    {' '}{log.message}
+                  </span>
+                </text>
+              )}
+            </For>
+          </box>
+        </scrollbox>
+      </box>
+    </Show>
+  );
+}

package/commands/attach/opentui-repl/components/DetailView.tsx

@@ -0,0 +1,45 @@
+import { Show } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+
+export function DetailView() {
+  const theme = useTheme();
+  const [state] = useRepl();
+
+  return (
+    <Show when={state.viewMode === 'detail' && state.detailContent !== null}>
+      <box
+        width="100%"
+        height="100%"
+        flexDirection="column"
+        backgroundColor={theme.colors.background}
+      >
+        <box
+          flexShrink={0}
+          paddingLeft={2}
+          paddingRight={2}
+          borderStyle="single"
+          border={['bottom']}
+          borderColor={theme.colors.border}
+        >
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.accent, bold: true }}>Full Output</span>
+            <span style={{ fg: theme.colors.textSecondary }}>{'  '}Press Esc to go back</span>
+          </text>
+        </box>
+        <scrollbox
+          flexGrow={1}
+          scrollY
+          stickyStart="top"
+          paddingLeft={2}
+          paddingRight={2}
+          paddingTop={1}
+        >
+          <text>
+            <span style={{ fg: theme.colors.textPrimary }}>{state.detailContent}</span>
+          </text>
+        </scrollbox>
+      </box>
+    </Show>
+  );
+}

package/commands/attach/opentui-repl/components/DropdownMenu.tsx

@@ -0,0 +1,130 @@
+import { Show, For, createMemo } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+import { useRenderer } from '@opentui/solid';
+
+/**
+ * Truncate text with ellipsis if it exceeds maxLength
+ */
+export function truncateText(text: string, maxLength: number): string {
+  if (!text || text.length <= maxLength) return text || '';
+  return text.slice(0, maxLength - 1) + '…';
+}
+
+/**
+ * Calculate the label width based on the longest label in items
+ * Adds padding and caps at 40 characters
+ */
+export function calculateLabelWidth(items: Array<{ label: string }>): number {
+  if (!items || items.length === 0) return 10;
+  const maxLabel = Math.max(...items.map(i => i.label.length));
+  return Math.min(maxLabel + 2, 40); // Cap at 40 chars
+}
+
+/**
+ * Dropdown menu with scrolling - Claude Code style
+ * No border, uses › prefix for selection indicator.
+ *
+ * Layout:
+ *   ↑ 2 more
+ * › /command     description text...
+ *   /other       another description
+ *   ↓ 3 more
+ */
+export function DropdownMenu() {
+  const theme = useTheme();
+  const [state] = useRepl();
+  const renderer = useRenderer();
+  const maxVisible = 8;
+
+  // Calculate column widths based on terminal size and item labels
+  const labelWidth = createMemo(() => calculateLabelWidth(state.menuItems));
+
+  // Get terminal width for description truncation
+  const termWidth = createMemo(() => {
+    const width = renderer?.width || 80;
+    return Math.max(40, width);
+  });
+
+  // Description takes remaining space (minus prefix and gaps: 2 + 4 + some buffer)
+  const descWidth = createMemo(() => {
+    return Math.max(20, termWidth() - labelWidth() - 10);
+  });
+
+  // Calculate scroll offset
+  const scrollOffset = createMemo(() => {
+    const items = state.menuItems;
+    if (items.length <= maxVisible) return 0;
+    const halfVisible = Math.floor(maxVisible / 2);
+    let offset = state.selectedIndex - halfVisible;
+    offset = Math.max(0, offset);
+    offset = Math.min(items.length - maxVisible, offset);
+    return offset;
+  });
+
+  const visibleItems = createMemo(() => {
+    return state.menuItems.slice(scrollOffset(), scrollOffset() + maxVisible);
+  });
+
+  const hasMoreAbove = createMemo(() => scrollOffset() > 0);
+  const hasMoreBelow = createMemo(() => scrollOffset() + maxVisible < state.menuItems.length);
+
+  return (
+    <Show when={state.menuVisible && state.menuItems.length > 0}>
+      <box flexDirection="column" paddingLeft={2}>
+        {/* Scroll up indicator */}
+        <Show when={hasMoreAbove()}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>  ↑ {scrollOffset()} more</span>
+          </text>
+        </Show>
+
+        {/* Menu items */}
+        <For each={visibleItems()}>
+          {(item, i) => {
+            const actualIndex = () => i() + scrollOffset();
+            const isSelected = () => actualIndex() === state.selectedIndex;
+            // Pad label to fixed width for alignment
+            const paddedLabel = () => item.label.padEnd(labelWidth());
+            // Truncate description to prevent overflow
+            const truncatedDesc = () => truncateText(item.description, descWidth());
+            // Use › indicator for selected item
+            const prefix = () => isSelected() ? '› ' : '  ';
+
+            return (
+              <text selectable={false}>
+                <span
+                  style={{
+                    fg: isSelected() ? theme.colors.accent : theme.colors.textSecondary,
+                  }}
+                >
+                  {prefix()}
+                </span>
+                <span
+                  style={{
+                    fg: isSelected() ? theme.colors.accent : theme.colors.textPrimary,
+                    bold: isSelected(),
+                  }}
+                >
+                  {paddedLabel()}
+                </span>
+                <span style={{ fg: theme.colors.textSecondary }}>
+                  {'    '}{truncatedDesc()}
+                </span>
+              </text>
+            );
+          }}
+        </For>
+
+        {/* Scroll down indicator */}
+        <Show when={hasMoreBelow()}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>
+              {'  '}↓ {state.menuItems.length - scrollOffset() - maxVisible} more
+            </span>
+          </text>
+        </Show>
+      </box>
+    </Show>
+  );
+}

package/commands/attach/opentui-repl/components/ExecutionStatus.tsx

@@ -0,0 +1,66 @@
+import { Show } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+import { useSpinner, formatSpinnerText } from '../hooks/useSpinner.ts';
+
+/**
+ * Format duration in human readable format
+ */
+export function formatDuration(ms: number | null | undefined): string {
+  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`;
+}
+
+/**
+ * Execution status area - shows spinner when executing, duration when done.
+ * This component sits in the output area (not input area) like in the Ink version.
+ *
+ * Layout when executing:
+ *   ⏵ executing command...
+ *
+ * Layout when done:
+ *   ⏵ completed in 1.5s
+ *
+ * Layout when ready:
+ *   ⏵ ready
+ */
+export function ExecutionStatus(props: {
+  isExecuting: boolean;
+  command?: string;
+  lastDuration?: number | null;
+  maxWidth?: number;
+}) {
+  const theme = useTheme();
+  const spinnerFrame = useSpinner(() => props.isExecuting);
+  const maxWidth = props.maxWidth || 60;
+
+  return (
+    <box flexDirection="column" marginTop={1} marginBottom={1} flexShrink={0}>
+      <box paddingLeft={1}>
+        <Show when={props.isExecuting} fallback={
+          <Show when={props.lastDuration !== null && props.lastDuration !== undefined} fallback={
+            <text selectable={false}>
+              <span style={{ fg: theme.colors.textSecondary }}>⏵ ready</span>
+            </text>
+          }>
+            <text selectable={false}>
+              <span style={{ fg: theme.colors.textSecondary }}>
+                ⏵ completed in {formatDuration(props.lastDuration)}
+              </span>
+            </text>
+          </Show>
+        }>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.warning }}>
+              {formatSpinnerText(spinnerFrame(), props.command || '', maxWidth)}
+            </span>
+          </text>
+        </Show>
+      </box>
+    </box>
+  );
+}

package/commands/attach/opentui-repl/components/Header.tsx

@@ -0,0 +1,24 @@
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useSession } from '../contexts/SessionContext.tsx';
+
+export function Header() {
+  const theme = useTheme();
+  const session = useSession();
+
+  return (
+    <box
+      flexShrink={0}
+      flexDirection="row"
+      paddingLeft={2}
+      paddingRight={2}
+      borderStyle="single"
+      border={['bottom']}
+      borderColor={theme.colors.border}
+    >
+      <box flexGrow={1} />
+      <text selectable={false}>
+        <span style={{ fg: theme.colors.textSecondary }}>v{session.version}</span>
+      </text>
+    </box>
+  );
+}

package/commands/attach/opentui-repl/components/OutputArea.tsx

@@ -0,0 +1,25 @@
+import { For } from 'solid-js';
+import { useRepl } from '../contexts/ReplContext.tsx';
+import { OutputBlock } from './OutputBlock.tsx';
+import { WelcomeBanner } from './WelcomeBanner.tsx';
+
+export function OutputArea() {
+  const [state] = useRepl();
+
+  return (
+    <scrollbox
+      flexGrow={1}
+      flexShrink={1}
+      stickyScroll
+      stickyStart="bottom"
+      scrollY
+    >
+      <box flexDirection="column" gap={1}>
+        <WelcomeBanner />
+        <For each={state.outputs}>
+          {(item) => <OutputBlock item={item} />}
+        </For>
+      </box>
+    </scrollbox>
+  );
+}