@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/blocks/Terminal/TerminalDisplay.tsx

@@ -1,254 +0,0 @@
-/**
- * TerminalDisplay — Readonly GPU-rendered terminal for ANSI content.
- *
- * Uses restty directly (not xterm) for GPU-accelerated rendering of
- * ANSI-formatted text without PTY connection. Content is written via
- * `restty.sendInput(data, "pty")` which feeds text to the WASM terminal
- * engine for parsing and rendering.
- *
- * Optionally wrapped in TerminalPanelChrome glassmorphism shell.
- *
- * @module components/devenv/terminal/TerminalDisplay
- */
-
-'use client';
-
-import {
-  useRef,
-  useEffect,
-  useCallback,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from 'react';
-import type { Restty } from 'restty';
-import type { ITerminalDisplayProps, ITerminalDisplayRef } from './TerminalDisplay.types';
-import { terminalDisplayStyles, terminalDisplayVariants } from './TerminalDisplay.styles';
-import { TerminalPanelChrome } from './panel/TerminalPanelChrome';
-import { getSynthwaveGhosttyTheme, xtermThemeToGhostty } from './Terminal.theme.restty';
-import { cn } from '@/react-ui/lib/utils';
-
-/**
- * TerminalDisplay — Readonly restty terminal for displaying ANSI content.
- *
- * @example
- * ```tsx
- * <TerminalDisplay
- *   content={"\x1b[31mError:\x1b[0m Something failed"}
- *   title="Error Output"
- *   variant="error"
- *   fontSize={12}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // Without chrome shell
- * <TerminalDisplay
- *   content={ansiOutput}
- *   chrome={false}
- *   minHeight={100}
- * />
- * ```
- *
- * @example
- * ```tsx
- * // With imperative handle
- * const ref = useRef<ITerminalDisplayRef>(null);
- * ref.current?.write("Additional output\r\n");
- * ref.current?.clear();
- * ```
- */
-export const TerminalDisplay = forwardRef<ITerminalDisplayRef, ITerminalDisplayProps>(
-  (
-    {
-      content,
-      title = 'Output',
-      variant = 'default',
-      chrome = true,
-      fontSize = 13,
-      minHeight = 200,
-      theme,
-      resttyThemeName,
-      gpuRenderer = 'auto',
-      slots,
-      className,
-      emptyText,
-      onReady,
-    },
-    ref,
-  ) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const resttyRef = useRef<Restty | null>(null);
-    const [isReady, setIsReady] = useState(false);
-
-    // Store callbacks in refs
-    const callbacksRef = useRef({ onReady });
-    callbacksRef.current = { onReady };
-
-    // Store content in ref to avoid re-creating restty on content change
-    const contentRef = useRef(content);
-    contentRef.current = content;
-
-    /**
-     * Initialize restty on mount.
-     * Dynamic import for SSR safety and code-splitting.
-     */
-    useEffect(() => {
-      if (!containerRef.current) return;
-      let destroyed = false;
-
-      const init = async () => {
-        const { Restty: ResttyClass, getBuiltinTheme } = await import('restty');
-        if (destroyed || !containerRef.current) return;
-
-        const restty = new ResttyClass({
-          root: containerRef.current,
-          appOptions: {
-            renderer: gpuRenderer,
-            fontSize,
-            autoResize: true,
-          },
-          fontSources: [
-            {
-              type: 'local',
-              matchers: [
-                'jetbrains mono',
-                'fira code',
-                'sf mono',
-                'cascadia code',
-                'meslo',
-              ],
-            },
-          ],
-          createInitialPane: true,
-          shortcuts: false,
-          defaultContextMenu: false,
-        });
-
-        resttyRef.current = restty;
-
-        // Apply theme
-        if (resttyThemeName) {
-          const builtinTheme = getBuiltinTheme(resttyThemeName);
-          if (builtinTheme) restty.applyTheme(builtinTheme);
-        } else if (theme) {
-          restty.applyTheme(xtermThemeToGhostty(theme));
-        } else {
-          restty.applyTheme(getSynthwaveGhosttyTheme());
-        }
-
-        // Wait for WASM to be ready before writing content.
-        // Restty loads WASM async internally — panes() returns empty until ready.
-        const waitForWasm = () => {
-          if (destroyed) return;
-          const panes = restty.panes();
-          if (panes && panes.length > 0) {
-            // WASM loaded, pane created — safe to write
-            if (contentRef.current) {
-              restty.sendInput(contentRef.current, 'pty');
-            }
-            setIsReady(true);
-            callbacksRef.current.onReady?.(restty);
-          } else {
-            // Not ready yet, retry
-            requestAnimationFrame(waitForWasm);
-          }
-        };
-        requestAnimationFrame(waitForWasm);
-      };
-
-      init().catch(() => {
-        // Silently fail — container will show empty
-      });
-
-      return () => {
-        destroyed = true;
-        resttyRef.current?.destroy();
-        resttyRef.current = null;
-        setIsReady(false);
-      };
-    }, []); // Mount once
-
-    /**
-     * Re-write content when it changes after initialization.
-     */
-    useEffect(() => {
-      if (!isReady || !resttyRef.current) return;
-      resttyRef.current.clearScreen();
-      if (content) {
-        resttyRef.current.sendInput(content, 'pty');
-      }
-    }, [content, isReady]);
-
-    /**
-     * Handle fontSize changes after initialization.
-     */
-    useEffect(() => {
-      if (!isReady || !resttyRef.current) return;
-      resttyRef.current.setFontSize(fontSize);
-    }, [fontSize, isReady]);
-
-    /**
-     * Expose imperative handle.
-     */
-    useImperativeHandle(ref, () => ({
-      getRestty: () => resttyRef.current,
-      clear: () => resttyRef.current?.clearScreen(),
-      write: (data: string) => resttyRef.current?.sendInput(data, 'pty'),
-    }));
-
-    /** Map variant to chrome variant */
-    const chromeVariant = variant === 'error' ? 'error' : 'default';
-    const chromeSize = variant === 'compact' ? 'compact' : 'default';
-
-    /** The terminal content area */
-    const terminalElement = (
-      <div
-        className={cn(
-          terminalDisplayVariants({ variant }),
-          slots?.root,
-          className,
-        )}
-        style={{ minHeight: `${minHeight}px` }}
-      >
-        {/* Empty state */}
-        {!content && emptyText && (
-          <div
-            className={cn(terminalDisplayStyles.emptyState, slots?.emptyState)}
-            style={{ minHeight: `${minHeight}px` }}
-          >
-            {emptyText}
-          </div>
-        )}
-
-        {/* Restty container */}
-        <div
-          ref={containerRef}
-          className={cn(terminalDisplayStyles.terminal, slots?.terminal)}
-          style={{
-            minHeight: `${minHeight}px`,
-            display: !content && emptyText ? 'none' : undefined,
-          }}
-        />
-      </div>
-    );
-
-    if (!chrome) return terminalElement;
-
-    return (
-      <TerminalPanelChrome
-        containerName={title}
-        isConnected={isReady}
-        variant={chromeVariant}
-        size={chromeSize}
-        slots={{ root: slots?.chrome }}
-        className={className}
-      >
-        {terminalElement}
-      </TerminalPanelChrome>
-    );
-  },
-);
-
-TerminalDisplay.displayName = 'TerminalDisplay';

package/src/react-ui/blocks/Terminal/TerminalDisplay.types.ts

@@ -1,73 +0,0 @@
-/**
- * TerminalDisplay component types.
- *
- * Readonly GPU-rendered terminal for displaying ANSI-formatted text
- * without PTY connection, using restty.
- *
- * @module components/devenv/terminal/TerminalDisplay.types
- */
-
-import type { SlotOverrides } from '@/core/types';
-import type { Restty } from 'restty';
-import type { ITerminalTheme } from './Terminal.types';
-
-/** Slot names for TerminalDisplay sub-regions */
-export type TerminalDisplaySlot = 'root' | 'chrome' | 'terminal' | 'emptyState';
-
-/**
- * Props for TerminalDisplay component.
- */
-export interface ITerminalDisplayProps {
-  /** ANSI-formatted string content to display */
-  content: string;
-
-  /** Title shown in the chrome header */
-  title?: string;
-
-  /** Visual variant — 'error' uses red accent line */
-  variant?: 'default' | 'compact' | 'error';
-
-  /** Whether to show the glassmorphism chrome shell (default: true) */
-  chrome?: boolean;
-
-  /** Font size in CSS pixels (default: 13) */
-  fontSize?: number;
-
-  /** Minimum height in CSS pixels (default: 200) */
-  minHeight?: number;
-
-  /** Terminal theme in xterm.js format (auto-converted to Ghostty) */
-  theme?: ITerminalTheme;
-
-  /** Restty built-in theme name from the 458-theme catalog */
-  resttyThemeName?: string;
-
-  /** GPU renderer preference (default: 'auto') */
-  gpuRenderer?: 'auto' | 'webgpu' | 'webgl2';
-
-  /** Slot class overrides for each visual region */
-  slots?: SlotOverrides<TerminalDisplaySlot>;
-
-  /** Custom class name on root element */
-  className?: string;
-
-  /** Placeholder text when content is empty */
-  emptyText?: string;
-
-  /** Callback when restty instance is ready */
-  onReady?: (restty: Restty) => void;
-}
-
-/**
- * Imperative handle for TerminalDisplay.
- */
-export interface ITerminalDisplayRef {
-  /** Get the underlying Restty instance */
-  getRestty: () => Restty | null;
-
-  /** Clear the terminal display */
-  clear: () => void;
-
-  /** Write additional ANSI content (appends) */
-  write: (data: string) => void;
-}

package/src/react-ui/blocks/Terminal/TerminalPanel.tsx

@@ -1,269 +0,0 @@
-/**
- * Terminal Panel Component.
- *
- * Main UI component with toolbar, terminal display, and status indicator.
- * Configurable backend adapter (xterm.js, WebContainer, Monaco) with
- * Synthwave Industrial Dark theme matching the design system.
- *
- * @module components/devenv/terminal
- */
-
-'use client';
-
-import { useState, useCallback, useRef, useEffect } from 'react';
-import { XTermWrapper } from './TerminalXterm';
-import { getTerminalTheme } from './Terminal.theme';
-import { TerminalIcon } from '@/react-ui/icons/lucide-animated';
-import type { ITerminalBackendType, ITerminalMode } from './Terminal.types';
-
-/**
- * Props for the TerminalPanel component.
- */
-export interface ITerminalPanelProps {
-  /** Backend type to use (default: 'xterm') */
-  backend?: ITerminalBackendType;
-
-  /** Terminal mode (default: 'interactive') */
-  mode?: ITerminalMode;
-
-  /** WebSocket URL for interactive mode */
-  wsUrl?: string;
-
-  /** SSE URL for readonly mode */
-  sseUrl?: string;
-
-  /** Custom class name for styling */
-  className?: string;
-
-  /** Display title (default: 'Terminal') */
-  title?: string;
-
-  /** Show/hide toolbar (default: true) */
-  showToolbar?: boolean;
-
-  /** Enable search functionality (default: true) */
-  enableSearch?: boolean;
-
-  /** Callback when connection status changes */
-  onStatusChange?: (status: 'connected' | 'disconnected' | 'error' | 'connecting') => void;
-
-  /** Callback when user types data */
-  onData?: (data: string) => void;
-}
-
-/**
- * Connection status type for state management.
- */
-type TConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
-
-/**
- * Terminal Panel Component.
- *
- * Full-featured terminal UI with toolbar, status indicator, search,
- * and xterm.js integration. Supports both interactive (WebSocket)
- * and readonly (SSE) modes with proper cleanup and error handling.
- *
- * @example
- * ```tsx
- * // Interactive mode with WebSocket
- * <TerminalPanel
- *   mode="interactive"
- *   wsUrl="ws://localhost:3100/api/terminal/session-123"
- *   onData={(data) => sendMessage({ type: 'input', data })}
- * />
- *
- * // Readonly mode with SSE
- * <TerminalPanel
- *   mode="readonly"
- *   sseUrl="http://localhost:3100/api/logs/containers/devenv/stream"
- * />
- * ```
- */
-export function TerminalPanel({
-  backend = 'xterm',
-  mode = 'interactive',
-  wsUrl,
-  sseUrl,
-  className,
-  title = 'Terminal',
-  showToolbar = true,
-  onStatusChange,
-  onData,
-}: ITerminalPanelProps) {
-  const [status, setStatus] = useState<TConnectionStatus>('disconnected');
-  const terminalRef = useRef<any>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const eventSourceRef = useRef<EventSource | null>(null);
-
-  /**
-   * Update connection status and notify parent.
-   */
-  const updateStatus = useCallback(
-    (newStatus: TConnectionStatus) => {
-      setStatus(newStatus);
-      onStatusChange?.(newStatus);
-    },
-    [onStatusChange]
-  );
-
-  /**
-   * Handle terminal data input from user.
-   */
-  const handleData = useCallback(
-    (data: string) => {
-      // Send to parent callback
-      onData?.(data);
-
-      // Send to WebSocket if connected
-      if (mode === 'interactive' && wsRef.current?.readyState === WebSocket.OPEN) {
-        wsRef.current.send(data);
-      }
-    },
-    [mode, onData]
-  );
-
-  /**
-   * Handle terminal ready state.
-   */
-  const handleReady = useCallback(
-    (terminal: any) => {
-      terminalRef.current = terminal;
-      updateStatus('connected');
-
-      // Establish WebSocket or SSE connection
-      if (mode === 'interactive' && wsUrl) {
-        connectWebSocket(wsUrl);
-      } else if (mode === 'readonly' && sseUrl) {
-        connectSSE(sseUrl);
-      }
-    },
-    [mode, wsUrl, sseUrl, updateStatus]
-  );
-
-  /**
-   * Establish WebSocket connection for interactive mode.
-   */
-  const connectWebSocket = useCallback((url: string) => {
-    updateStatus('connecting');
-
-    const ws = new WebSocket(url);
-    wsRef.current = ws;
-
-    ws.onopen = () => {
-      updateStatus('connected');
-    };
-
-    ws.onmessage = (event) => {
-      terminalRef.current?.write(event.data);
-    };
-
-    ws.onerror = () => {
-      updateStatus('error');
-    };
-
-    ws.onclose = () => {
-      updateStatus('disconnected');
-    };
-  }, [updateStatus]);
-
-  /**
-   * Establish SSE connection for readonly mode.
-   */
-  const connectSSE = useCallback((url: string) => {
-    updateStatus('connecting');
-
-    const eventSource = new EventSource(url);
-    eventSourceRef.current = eventSource;
-
-    eventSource.onopen = () => {
-      updateStatus('connected');
-    };
-
-    eventSource.onmessage = (event) => {
-      terminalRef.current?.writeln(event.data);
-    };
-
-    eventSource.onerror = () => {
-      updateStatus('error');
-      eventSource.close();
-    };
-  }, [updateStatus]);
-
-  /**
-   * Cleanup connections on unmount.
-   */
-  useEffect(() => {
-    return () => {
-      wsRef.current?.close();
-      eventSourceRef.current?.close();
-    };
-  }, []);
-
-  /**
-   * Get status color class.
-   */
-  const getStatusColor = (): string => {
-    switch (status) {
-      case 'connected':
-        return 'text-success';
-      case 'error':
-        return 'text-destructive';
-      case 'connecting':
-        return 'text-warning';
-      default:
-        return 'text-muted-foreground';
-    }
-  };
-
-  return (
-    <section className={className}>
-      {/* Toolbar */}
-      {showToolbar && (
-        <div className="flex items-center justify-between mb-2 px-2">
-          {/* Left: Title and Status */}
-          <div className="flex items-center gap-2">
-            <TerminalIcon className="w-4 h-4 text-primary" />
-            <h2 className="text-sm font-semibold font-mono text-foreground">{title}</h2>
-
-            {/* Status Badge */}
-            <span
-              className={`text-xs font-mono font-medium ${getStatusColor()}`}
-              data-terminal-status
-            >
-              {status.toUpperCase()}
-            </span>
-          </div>
-
-          {/* Right: Toolbar Actions */}
-          <div className="flex items-center gap-1" />
-        </div>
-      )}
-
-      {/* Terminal Display */}
-      <XTermWrapper
-        options={{
-          backend,
-          mode,
-          wsUrl,
-          sseUrl,
-          onData: handleData,
-          onError: (error) => {
-            console.error('[TerminalPanel] Error:', error);
-            updateStatus('error');
-          },
-        }}
-        theme={getTerminalTheme()}
-        onReady={handleReady}
-      />
-
-      {/* Footer with hints */}
-      {mode === 'interactive' && status === 'connected' && (
-        <div className="mt-2 px-2 flex items-center justify-between text-xs text-muted-foreground font-mono">
-          <span>Ctrl+C to interrupt • Ctrl+D to exit</span>
-          <span>{terminalRef.current?.cols ?? 0}x{terminalRef.current?.rows ?? 0}</span>
-        </div>
-      )}
-    </section>
-  );
-}
-