rl-rockcli 0.0.9 → 0.0.10

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

@@ -0,0 +1,108 @@
+import { Show } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import type { OutputItem } from '../contexts/ReplContext.tsx';
+
+const MAX_OUTPUT_LINES = 50;
+
+function formatTime(ts: number): string {
+  const d = new Date(ts);
+  const hh = String(d.getHours()).padStart(2, '0');
+  const mm = String(d.getMinutes()).padStart(2, '0');
+  const ss = String(d.getSeconds()).padStart(2, '0');
+  return `${hh}:${mm}:${ss}`;
+}
+
+function truncateOutput(output: string, maxLines: number): { lines: string[]; truncated: number } {
+  if (!output) return { lines: [], truncated: 0 };
+  const allLines = output.split('\n');
+  if (allLines.length <= maxLines) {
+    return { lines: allLines, truncated: 0 };
+  }
+  return {
+    lines: allLines.slice(0, maxLines),
+    truncated: allLines.length - maxLines,
+  };
+}
+
+export function OutputBlock(props: { item: OutputItem }) {
+  const theme = useTheme();
+
+  // 判断是否显示错误样式：exitCode 不为 0 且不为 null，或者 exitCode 为 null 但有 tips（超时/网络错误）
+  const showErrorStyle = 
+    (props.item.exitCode !== 0 && props.item.exitCode !== null) || 
+    (props.item.exitCode === null && !!props.item.tips);
+  
+  // 判断是否显示 tips：有 tips 且（exitCode 不为 0 或 exitCode 为 null）
+  const showTips = props.item.tips && (props.item.exitCode !== 0 || props.item.exitCode === null);
+
+  return (
+    <Show when={!props.item.isWelcome}>
+      <box
+        flexDirection="column"
+        marginLeft={2}
+        marginRight={2}
+        borderStyle="single"
+        border
+        borderColor={showErrorStyle ? theme.colors.danger : theme.colors.border}
+        paddingLeft={1}
+        paddingRight={1}
+        paddingTop={0}
+        paddingBottom={0}
+      >
+        {/* Command line */}
+        <text>
+          <span style={{ fg: theme.colors.textSecondary }}>[{formatTime(props.item.timestamp)}] </span>
+          <span style={{ fg: theme.colors.prompt }}>{props.item.prompt || '$ '}</span>
+          <span style={{ fg: theme.colors.textPrimary }}>{props.item.command}</span>
+        </text>
+
+        {/* Output - only this part is selectable */}
+        <Show when={props.item.output !== null && props.item.output !== undefined}>
+          {(() => {
+            const { lines, truncated } = truncateOutput(props.item.output, MAX_OUTPUT_LINES);
+            return (
+              <box flexDirection="column">
+                {/* Output content */}
+                <text>
+                  <span
+                    style={{
+                      fg: showErrorStyle ? theme.colors.danger : theme.colors.textPrimary,
+                    }}
+                  >
+                    {lines.join('\n')}
+                  </span>
+                </text>
+                {/* Truncation hint - not selectable */}
+                <Show when={truncated > 0}>
+                  <text>
+                    <span style={{ fg: theme.colors.warning }}>
+                      ... {truncated} more lines (use Ctrl+V to view full output)
+                    </span>
+                  </text>
+                </Show>
+
+                {/* Meta info (exit code) - displayed in gray when command fails */}
+                <Show when={props.item.metaInfo && showErrorStyle}>
+                  <text>
+                    <span style={{ fg: theme.colors.textSecondary, dim: true }}>
+                      {props.item.metaInfo}
+                    </span>
+                  </text>
+                </Show>
+
+                {/* Tips - helpful hints when command fails */}
+                <Show when={showTips}>
+                  <text>
+                    <span style={{ fg: theme.colors.warning }}>
+                      💡 {props.item.tips}
+                    </span>
+                  </text>
+                </Show>
+              </box>
+            );
+          })()}
+        </Show>
+      </box>
+    </Show>
+  );
+}

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

@@ -0,0 +1,109 @@
+import { Show, createMemo } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+import type { InputRenderable } from '@opentui/core';
+
+// Import paramHint from ink-repl (shared logic)
+import { getPlaceholderText } from '../../ink-repl/utils/paramHint.js';
+
+/**
+ * Input area with separator lines (like Ink InputArea / Claude Code style)
+ *
+ * Layout:
+ * ────────────────────────────────
+ *  prompt> user input here█ @<param>
+ * ────────────────────────────────
+ *
+ * Shows parameter hints for /upload and /download commands.
+ * Input is always visible even during execution (spinner is separate).
+ */
+export function PromptInput(props: {
+  onSubmit?: (value: string) => void;
+  onInputChange?: (value: string) => void;
+  onInputRef?: (ref: InputRenderable) => void;
+}) {
+  const theme = useTheme();
+  const [state, setState] = useRepl();
+  let inputRef: InputRenderable | undefined;
+
+  function handleSubmit(value: string) {
+    const trimmed = value.trim();
+    if (!trimmed) return;
+
+    // Clear input
+    setState('buffer', '');
+    if (inputRef) {
+      inputRef.value = '';
+    }
+
+    if (props.onSubmit) {
+      props.onSubmit(trimmed);
+    }
+  }
+
+  function handleInput(value: string) {
+    setState('buffer', value);
+    if (props.onInputChange) {
+      props.onInputChange(value);
+    }
+  }
+
+  // Calculate parameter hint text for /upload and /download commands
+  // Use createMemo for reactivity - recalculates when state.buffer changes
+  const hintText = createMemo(() => getPlaceholderText(state.buffer, state.buffer.length));
+
+  return (
+    <box
+      flexShrink={0}
+      flexDirection="column"
+      marginLeft={2}
+      marginRight={2}
+      borderStyle="single"
+      border
+      borderColor="#4a90d9"
+      paddingLeft={1}
+      paddingRight={1}
+      paddingTop={1}
+      paddingBottom={1}
+    >
+      {/* Input line - always visible */}
+      <box flexDirection="row" width="100%" overflow="hidden" position="relative">
+        {/* Prompt label: never shrink so long input won't cover it */}
+        <box flexShrink={0}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.accent, bold: true }}>{state.shellPrompt}</span>
+          </text>
+        </box>
+        {/* Input container */}
+        <box flexGrow={1} overflow="hidden" minWidth={0}>
+          <input
+            ref={(el) => {
+              inputRef = el;
+              if (props.onInputRef && el) {
+                props.onInputRef(el);
+              }
+            }}
+            width="100%"
+            focused={state.viewMode === 'repl' && !state.consoleVisible}
+            value={state.buffer}
+            placeholder="Enter command..."
+            textColor={theme.colors.textPrimary}
+            focusedTextColor={theme.colors.textPrimary}
+            backgroundColor={theme.colors.background}
+            focusedBackgroundColor={theme.colors.background}
+            onSubmit={handleSubmit}
+            onInput={handleInput}
+          />
+        </box>
+        {/* Parameter hint - overlay positioned after input content */}
+        <Show when={hintText()}>
+          <box position="absolute" left={state.shellPrompt.length + state.buffer.length + 1}>
+            <text selectable={false}>
+              <span style={{ fg: theme.colors.textHint }}> {hintText()}</span>
+            </text>
+          </box>
+        </Show>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,63 @@
+import { Show } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useSession } from '../contexts/SessionContext.tsx';
+import { useRepl } from '../contexts/ReplContext.tsx';
+
+function formatResources(resources: any): string {
+  if (!resources) return '';
+  const parts: string[] = [];
+  if (resources.cpu) parts.push(`CPU ${resources.cpu}`);
+  if (resources.load) 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('  ');
+}
+
+export function StatusBar() {
+  const theme = useTheme();
+  const session = useSession();
+  const [state] = useRepl();
+
+  function getKeyHints(): string {
+    if (state.isExecuting) return 'ctrl+c cancel';
+    if (state.menuVisible) return '↑↓ select  enter confirm  esc cancel';
+    return '/ commands  ↑↓ history  ctrl+c×2 exit';
+  }
+
+  return (
+    <box flexShrink={0} flexDirection="column">
+      <Show when={state.exitPending}>
+        <box paddingLeft={2}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.warning, bold: true }}>Press Ctrl+C again to exit</span>
+          </text>
+        </box>
+      </Show>
+      <box flexDirection="row" paddingLeft={2} paddingRight={2}>
+        {/* Left: sandbox info */}
+        <box flexGrow={1} flexBasis={0}>
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.accent }}>● {session.sandboxId}</span>
+            <Show when={session.hostIp}>
+              <span style={{ fg: theme.colors.textSecondary }}> ({session.hostIp})</span>
+            </Show>
+          </text>
+        </box>
+
+        {/* Center: resources */}
+        <box flexGrow={1} flexBasis={0} justifyContent="center">
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.warning }}>{formatResources(state.resources)}</span>
+          </text>
+        </box>
+
+        {/* Right: key hints */}
+        <box flexGrow={1} flexBasis={0} alignItems="flex-end">
+          <text selectable={false}>
+            <span style={{ fg: theme.colors.textSecondary }}>{getKeyHints()}</span>
+          </text>
+        </box>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { Show } from 'solid-js';
+import { useTerminalDimensions } from '@opentui/solid';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import { useToast } from '../contexts/ToastContext.tsx';
+
+/**
+ * Variant-to-theme-color mapping.
+ */
+const VARIANT_COLOR_MAP = {
+  info: 'accent',
+  success: 'success',
+  warning: 'warning',
+  error: 'danger',
+} as const;
+
+/**
+ * Floating toast notification component.
+ *
+ * Renders in the top-right corner of the terminal as an
+ * absolute-positioned overlay. Auto-dismisses based on the
+ * duration set by ToastContext.
+ */
+export function Toast() {
+  const toast = useToast();
+  const theme = useTheme();
+  const dimensions = useTerminalDimensions();
+
+  return (
+    <Show when={toast.currentToast}>
+      {(current) => {
+        const borderColor = () => {
+          const colorKey = VARIANT_COLOR_MAP[current().variant];
+          return theme.colors[colorKey];
+        };
+
+        return (
+          <box
+            position="absolute"
+            justifyContent="center"
+            alignItems="flex-start"
+            top={2}
+            right={2}
+            maxWidth={Math.min(50, dimensions().width - 6)}
+            paddingLeft={2}
+            paddingRight={2}
+            paddingTop={1}
+            paddingBottom={1}
+            backgroundColor={theme.colors.surface}
+            borderColor={borderColor()}
+            border={['left', 'right']}
+          >
+            <Show when={current().title}>
+              <text marginBottom={1} fg={theme.colors.textPrimary}>
+                <span style={{ bold: true }}>{current().title}</span>
+              </text>
+            </Show>
+            <text fg={theme.colors.textPrimary} wrapMode="word" width="100%">
+              {current().message}
+            </text>
+          </box>
+        );
+      }}
+    </Show>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { For } from 'solid-js';
+import { useTheme } from '../contexts/ThemeContext.tsx';
+import i18n from '../../../../utils/i18n.js';
+import { getLogoLines, getGradientColors } from '../../../../utils/asciiArt.js';
+const { t } = i18n;
+
+export function WelcomeBanner() {
+  const theme = useTheme();
+  const gradient = getGradientColors();
+  const ASCII_LINES = getLogoLines();
+
+  const TIPS = [
+    t('welcome.tip.commands'),
+    t('welcome.tip.execute'),
+    t('welcome.tip.console'),
+    t('welcome.tip.exit'),
+  ];
+
+  return (
+    <box flexDirection="column" alignItems="center" paddingTop={1} paddingBottom={1} width="100%">
+      <box flexDirection="column" alignItems="center">
+        <For each={ASCII_LINES}>
+          {(line, i) => (
+            <text selectable={false}>
+              <span style={{ fg: gradient[i() % gradient.length], bold: true }}>{line}</span>
+            </text>
+          )}
+        </For>
+      </box>
+      <box marginTop={1} flexDirection="column">
+        <For each={TIPS}>
+          {(tip) => (
+            <text selectable={false}>
+              <span style={{ fg: theme.colors.textSecondary }}>{tip}</span>
+            </text>
+          )}
+        </For>
+      </box>
+    </box>
+  );
+}

package/commands/attach/opentui-repl/contexts/ReplContext.tsx

@@ -0,0 +1,137 @@
+import { createContext, useContext } from 'solid-js';
+import { createStore, type SetStoreFunction } from 'solid-js/store';
+
+export interface OutputItem {
+  id: string;
+  command: string;
+  output: string;
+  exitCode: number | null;
+  timestamp: number;
+  prompt: string;
+  isWelcome?: boolean;
+  metaInfo?: string | null;
+  tips?: string | null;
+}
+
+export interface ConsoleLog {
+  id: string;
+  timestamp: string;
+  level: 'info' | 'warn' | 'error' | 'debug';
+  message: string;
+}
+
+export interface ReplState {
+  outputs: OutputItem[];
+  buffer: string;
+  isExecuting: boolean;
+  executingCommand: string;
+  lastExecutionDuration: number | null;
+  executionStartTime: number | null;
+  historyIndex: number;
+  commandHistory: string[];
+  savedBuffer: string;
+  shellPrompt: string;
+  exitPending: boolean;
+  resources: {
+    cpu: string;
+    load: string;
+    memory: { used: string; total: string };
+    disk: { used: string; total: string };
+  } | null;
+  menuVisible: boolean;
+  menuItems: { label: string; value: string; description: string }[];
+  selectedIndex: number;
+  menuType: 'slash' | 'path' | 'at' | null;
+  atContext: any;
+  viewMode: 'repl' | 'detail';
+  detailContent: string | null;
+  consoleVisible: boolean;
+  consoleLogs: ConsoleLog[];
+}
+
+let _nextId = 0;
+function nextId(): string {
+  return `out-${++_nextId}`;
+}
+
+export function createInitialState(shellPrompt: string): ReplState {
+  return {
+    outputs: [
+      {
+        id: nextId(),
+        command: '',
+        output: '',
+        exitCode: 0,
+        timestamp: Date.now(),
+        prompt: shellPrompt,
+        isWelcome: true,
+      },
+    ],
+    buffer: '',
+    isExecuting: false,
+    executingCommand: '',
+    lastExecutionDuration: null,
+    executionStartTime: null,
+    historyIndex: -1,
+    commandHistory: [],
+    savedBuffer: '',
+    shellPrompt,
+    exitPending: false,
+    resources: null,
+    menuVisible: false,
+    menuItems: [],
+    selectedIndex: 0,
+    menuType: null,
+    atContext: null,
+    viewMode: 'repl',
+    detailContent: null,
+    consoleVisible: false,
+    consoleLogs: [],
+  };
+}
+
+/**
+ * Add a log entry to the console
+ */
+function createAddLog(setState: SetStoreFunction<ReplState>) {
+  return (level: ConsoleLog['level'], message: string) => {
+    const timestamp = new Date().toTimeString().slice(0, 8);
+    const newLog: ConsoleLog = {
+      id: `log-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
+      timestamp,
+      level,
+      message,
+    };
+    setState('consoleLogs', (logs) => [...logs, newLog]);
+  };
+}
+
+export interface ReplActions {
+  nextId: () => string;
+  addLog: (level: ConsoleLog['level'], message: string) => void;
+}
+
+type ReplContextValue = [ReplState, SetStoreFunction<ReplState>, ReplActions];
+
+const ReplContext = createContext<ReplContextValue>();
+
+export function ReplProvider(props: { shellPrompt: string; children: any }) {
+  const [state, setState] = createStore<ReplState>(createInitialState(props.shellPrompt));
+
+  const actions: ReplActions = {
+    nextId,
+    addLog: createAddLog(setState),
+  };
+
+  return (
+    <ReplContext.Provider value={[state, setState, actions]}>
+      {props.children}
+    </ReplContext.Provider>
+  );
+}
+
+export function useRepl(): ReplContextValue {
+  const ctx = useContext(ReplContext);
+  if (!ctx) throw new Error('useRepl must be used within ReplProvider');
+  return ctx;
+}

package/commands/attach/opentui-repl/contexts/SessionContext.tsx

@@ -0,0 +1,32 @@
+import { createContext, useContext } from 'solid-js';
+
+export interface SessionInfo {
+  sandboxId: string;
+  hostname: string;
+  hostIp: string | null;
+  user: string;
+  version: string;
+  client: any;
+  sessionManager: any;
+  historyManager: any;
+  initialPrompt: string;
+  triggers: any[];
+  onExit?: () => void;
+  onThemeChange?: (name: string) => void;
+}
+
+const SessionContext = createContext<SessionInfo>();
+
+export function SessionProvider(props: { session: SessionInfo; children: any }) {
+  return (
+    <SessionContext.Provider value={props.session}>
+      {props.children}
+    </SessionContext.Provider>
+  );
+}
+
+export function useSession(): SessionInfo {
+  const ctx = useContext(SessionContext);
+  if (!ctx) throw new Error('useSession must be used within SessionProvider');
+  return ctx;
+}

package/commands/attach/opentui-repl/contexts/ThemeContext.tsx

@@ -0,0 +1,70 @@
+import { createContext, useContext } from 'solid-js';
+
+const defaultGradient = ['#2563EB', '#3B82F6', '#4F46E5', '#6366F1', '#7C3AED', '#8B5CF6'];
+
+export const themes = {
+  'rock-dark': {
+    name: 'rock-dark',
+    type: 'dark',
+    colors: {
+      background: '#000000',
+      surface: '#181825',
+      surfaceHighlight: '#11111b',
+      border: '#313244',
+      textPrimary: '#cdd6f4',
+      textSecondary: '#a6adc8',
+      textHint: '#6c7086',
+      accent: '#89b4fa',
+      accentMuted: '#b4befe',
+      warning: '#f9e2af',
+      success: '#a6e3a1',
+      danger: '#f38ba8',
+      prompt: '#89dceb',
+      cursor: '#cdd6f4',
+      gradient: defaultGradient,
+    },
+  },
+  'rock-light': {
+    name: 'rock-light',
+    type: 'light',
+    colors: {
+      background: '#eff1f5',
+      surface: '#e6e9ef',
+      surfaceHighlight: '#dce0e8',
+      border: '#9ca0b0',
+      textPrimary: '#4c4f69',
+      textSecondary: '#6c6f85',
+      textHint: '#9ca0b0',
+      accent: '#1e66f5',
+      accentMuted: '#7287fd',
+      warning: '#df8e1d',
+      success: '#40a02b',
+      danger: '#d20f39',
+      prompt: '#04a5e5',
+      cursor: '#4c4f69',
+      gradient: defaultGradient,
+    },
+  },
+};
+
+export type ThemeColors = typeof themes['rock-dark']['colors'];
+export type Theme = typeof themes['rock-dark'];
+
+const ThemeContext = createContext<Theme>(themes['rock-dark']);
+
+export function ThemeProvider(props: { theme?: string; children: any }) {
+  const themeName = props.theme && themes[props.theme as keyof typeof themes]
+    ? (props.theme as keyof typeof themes)
+    : 'rock-dark';
+  const theme = themes[themeName];
+
+  return (
+    <ThemeContext.Provider value={theme}>
+      {props.children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): Theme {
+  return useContext(ThemeContext);
+}

package/commands/attach/opentui-repl/contexts/ToastContext.tsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, type ParentProps } from 'solid-js';
+import { createStore } from 'solid-js/store';
+
+export interface ToastOptions {
+  title?: string;
+  message: string;
+  variant: 'info' | 'success' | 'warning' | 'error';
+  duration?: number;
+}
+
+export type ToastData = Omit<ToastOptions, 'duration'>;
+
+const DEFAULT_DURATION = 3000;
+
+function createToastState() {
+  const [store, setStore] = createStore({
+    currentToast: null as ToastData | null,
+  });
+
+  let timeoutHandle: ReturnType<typeof setTimeout> | null = null;
+
+  const toast = {
+    show(options: ToastOptions) {
+      const { duration, ...toastData } = options;
+      const dismissAfter = duration != null ? duration : DEFAULT_DURATION;
+
+      setStore('currentToast', toastData);
+
+      if (timeoutHandle) clearTimeout(timeoutHandle);
+      timeoutHandle = setTimeout(() => {
+        setStore('currentToast', null);
+        timeoutHandle = null;
+      }, dismissAfter);
+    },
+
+    error(err: unknown) {
+      if (err instanceof Error) {
+        toast.show({ variant: 'error', message: err.message });
+      } else if (typeof err === 'string') {
+        toast.show({ variant: 'error', message: err });
+      } else {
+        toast.show({ variant: 'error', message: 'An unknown error occurred' });
+      }
+    },
+
+    get currentToast(): ToastData | null {
+      return store.currentToast;
+    },
+  };
+
+  return toast;
+}
+
+export type ToastContext = ReturnType<typeof createToastState>;
+
+const ToastCtx = createContext<ToastContext>();
+
+export function ToastProvider(props: ParentProps) {
+  const value = createToastState();
+  return <ToastCtx.Provider value={value}>{props.children}</ToastCtx.Provider>;
+}
+
+export function useToast(): ToastContext {
+  const value = useContext(ToastCtx);
+  if (!value) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return value;
+}