@mks2508/mks-ui 0.5.4 → 0.5.8

package/src/react-ui/blocks/Terminal/panel/TerminalInteractivePanelXterm.tsx

@@ -1,439 +0,0 @@
-/**
- * TerminalInteractivePanelXterm Component.
- *
- * Full interactive terminal panel with WebSocket-backed I/O,
- * Ghostty-inspired chrome (via TerminalPanelChrome), xterm.js
- * rendering, and action bar controls. Includes settings popover.
- *
- * @module components/devenv/terminal/panel/interactive-xterm
- */
-
-'use client';
-
-import {
-  useRef,
-  useState,
-  useEffect,
-  useCallback,
-  forwardRef,
-  useImperativeHandle,
-} from 'react';
-import { Terminal } from '@xterm/xterm';
-import { FitAddon } from '@xterm/addon-fit';
-import { WebLinksAddon } from '@xterm/addon-web-links';
-import { SearchAddon } from '@xterm/addon-search';
-import { getTerminalTheme } from '../Terminal.theme';
-import { useTerminalWebSocket } from '../hooks/useTerminalWebSocket';
-import { useTerminalSettings } from '../hooks/useTerminalSettings';
-import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
-import { TerminalPanelChrome } from './TerminalPanelChrome';
-import { TerminalSettingsPopover } from './TerminalSettingsPopover';
-import { TerminalIcon, DeleteIcon, PlusIcon } from '@/react-ui/icons/lucide-animated';
-import { cn } from '@/react-ui/lib/utils';
-import '@xterm/xterm/css/xterm.css';
-
-/**
- * Terminal display container styles for interactive mode.
- */
-const terminalContainerStyles =
-  'relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll';
-
-/**
- * Action button base styles.
- */
-const actionBtnStyles =
-  'h-8 px-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center gap-1 text-xs font-mono text-muted-foreground hover:text-foreground flex-shrink-0';
-
-/**
- * Min/max font size bounds.
- */
-const MIN_FONT_SIZE = 10;
-const MAX_FONT_SIZE = 24;
-
-/**
- * TerminalInteractivePanelXterm Component.
- *
- * Interactive terminal panel combining:
- * - TerminalPanelChrome (Ghostty glassmorphism shell)
- * - xterm.js with interactive mode (cursorBlink, stdin enabled)
- * - WebSocket connection via useTerminalWebSocket
- * - Action bar (clear, settings, font size controls)
- * - Footer with connection status and terminal dimensions
- *
- * @example
- * ```tsx
- * const termRef = useRef<ITerminalInteractivePanelRef>(null);
- *
- * <TerminalInteractivePanelXterm
- *   ref={termRef}
- *   containerName="mks-devenv"
- *   wsUrl="ws://localhost:3100/terminal/session-1"
- *   onConnect={() => console.log('Connected')}
- *   onDisconnect={() => console.log('Disconnected')}
- * />
- * ```
- */
-export const TerminalInteractivePanelXterm = forwardRef<
-  ITerminalInteractivePanelRef,
-  ITerminalInteractivePanelProps
->(
-  (
-    {
-      containerName,
-      wsUrl,
-      sessions,
-      activeSessionId,
-      onSessionChange,
-      onSessionClose,
-      onNewSession,
-      onConnect,
-      onDisconnect,
-      onError,
-      className,
-    },
-    ref
-  ) => {
-    const terminalRef = useRef<Terminal | null>(null);
-    const fitAddonRef = useRef<FitAddon | null>(null);
-    const searchAddonRef = useRef<SearchAddon | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const terminalReadyRef = useRef(false);
-
-    const { settings } = useTerminalSettings();
-    const [fontSize, setFontSize] = useState(settings.fontSize);
-    const [dimensions, setDimensions] = useState({ cols: 80, rows: 24 });
-
-    /**
-     * WebSocket connection for terminal I/O.
-     */
-    const {
-      status: connectionStatus,
-      sendInput,
-      sendResize,
-      reconnect,
-    } = useTerminalWebSocket({
-      wsUrl,
-      onConnect: () => {
-        onConnect?.();
-        terminalRef.current?.write('\r\n\x1b[32m✓ Connected to terminal\x1b[0m\r\n');
-      },
-      onDisconnect: () => {
-        onDisconnect?.();
-        terminalRef.current?.write('\r\n\x1b[31m✗ Disconnected from terminal\x1b[0m\r\n');
-      },
-      onOutput: (data) => {
-        terminalRef.current?.write(data);
-      },
-      onError: (error) => {
-        onError?.(error);
-        terminalRef.current?.write(`\r\n\x1b[31mError: ${error}\x1b[0m\r\n`);
-      },
-    });
-
-    const isConnected = connectionStatus === 'connected';
-
-    /**
-     * Initialize xterm.js with interactive mode.
-     */
-    useEffect(() => {
-      if (!containerRef.current) return;
-
-      const terminal = new Terminal({
-        cursorBlink: true,
-        cursorStyle: 'bar',
-        scrollback: 10000,
-        fontSize,
-        fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace",
-        theme: getTerminalTheme(),
-        allowProposedApi: true,
-        disableStdin: false,
-      });
-
-      const fitAddon = new FitAddon();
-      const webLinksAddon = new WebLinksAddon();
-      const searchAddon = new SearchAddon();
-
-      terminal.loadAddon(fitAddon);
-      terminal.loadAddon(webLinksAddon);
-      terminal.loadAddon(searchAddon);
-
-      terminal.open(containerRef.current);
-
-      // Defer fit until after DOM paint
-      const rafId = requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          try {
-            fitAddon.fit();
-            setDimensions({ cols: terminal.cols, rows: terminal.rows });
-          } catch {
-            // Silently ignore fit errors during initialization
-          }
-        });
-      });
-
-      // Wire user input to WebSocket
-      terminal.onData((data: string) => {
-        sendInput(data);
-      });
-
-      // Track resize for footer display
-      terminal.onResize(({ cols, rows }: { cols: number; rows: number }) => {
-        setDimensions({ cols, rows });
-        sendResize(cols, rows);
-      });
-
-      terminalRef.current = terminal;
-      fitAddonRef.current = fitAddon;
-      searchAddonRef.current = searchAddon;
-      terminalReadyRef.current = true;
-
-      // Focus terminal on mount
-      terminal.focus();
-
-      return () => {
-        cancelAnimationFrame(rafId);
-        terminalReadyRef.current = false;
-        terminal.dispose();
-        terminalRef.current = null;
-        fitAddonRef.current = null;
-        searchAddonRef.current = null;
-      };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []); // Only mount once - fontSize changes handled separately
-
-    /**
-     * Update font size on existing terminal.
-     */
-    useEffect(() => {
-      if (!terminalRef.current || !terminalReadyRef.current) return;
-
-      terminalRef.current.options.fontSize = fontSize;
-
-      // Re-fit after font size change
-      requestAnimationFrame(() => {
-        try {
-          fitAddonRef.current?.fit();
-          if (terminalRef.current) {
-            setDimensions({ cols: terminalRef.current.cols, rows: terminalRef.current.rows });
-          }
-        } catch {
-          // Silently ignore fit errors
-        }
-      });
-    }, [fontSize]);
-
-    /**
-     * Handle window resize.
-     */
-    useEffect(() => {
-      const handleResize = () => {
-        requestAnimationFrame(() => {
-          if (fitAddonRef.current && terminalRef.current) {
-            try {
-              fitAddonRef.current.fit();
-              setDimensions({ cols: terminalRef.current.cols, rows: terminalRef.current.rows });
-            } catch {
-              // Silently ignore fit errors during resize
-            }
-          }
-        });
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    /**
-     * Clear terminal display.
-     */
-    const handleClear = useCallback(() => {
-      terminalRef.current?.clear();
-    }, []);
-
-    /**
-     * Increase font size.
-     */
-    const handleFontIncrease = useCallback(() => {
-      setFontSize((prev) => Math.min(prev + 1, MAX_FONT_SIZE));
-    }, []);
-
-    /**
-     * Decrease font size.
-     */
-    const handleFontDecrease = useCallback(() => {
-      setFontSize((prev) => Math.max(prev - 1, MIN_FONT_SIZE));
-    }, []);
-
-    /**
-     * Expose imperative methods to parent.
-     */
-    useImperativeHandle(ref, () => ({
-      write: (text: string) => {
-        terminalRef.current?.write(text);
-      },
-      clear: () => {
-        terminalRef.current?.clear();
-      },
-      focus: () => {
-        terminalRef.current?.focus();
-      },
-      sendInput: (data: string) => {
-        sendInput(data);
-      },
-      isConnected: () => connectionStatus === 'connected',
-    }));
-
-    /**
-     * Get connection status label with color.
-     */
-    const getStatusLabel = (): { text: string; color: string } => {
-      switch (connectionStatus) {
-        case 'connected':
-          return { text: 'Connected', color: 'text-success' };
-        case 'connecting':
-          return { text: 'Connecting...', color: 'text-yellow-500' };
-        case 'error':
-          return { text: 'Error', color: 'text-destructive' };
-        default:
-          return { text: 'Disconnected', color: 'text-muted-foreground' };
-      }
-    };
-
-    const statusLabel = getStatusLabel();
-
-    return (
-      <TerminalPanelChrome
-        containerName={containerName}
-        isConnected={isConnected}
-        crtEffect={settings.crtEffect}
-        sessions={sessions}
-        activeSessionId={activeSessionId}
-        onSessionTabClick={onSessionChange}
-        onSessionClose={onSessionClose}
-        onNewSession={onNewSession}
-        actionBar={
-          <div className="flex items-center gap-2 px-3 h-10 bg-muted/10 border-b border-white/10">
-            {/* Clear */}
-            <button
-              type="button"
-              onClick={handleClear}
-              className={actionBtnStyles}
-              title="Clear terminal (Ctrl+L)"
-            >
-              <DeleteIcon className="w-3.5 h-3.5 flex-shrink-0" />
-              <span>Clear</span>
-            </button>
-
-            {/* Spacer */}
-            <div className="flex-1" />
-
-            {/* Settings */}
-            <TerminalSettingsPopover />
-
-            {/* Reconnect (shown when disconnected) */}
-            {connectionStatus === 'disconnected' && (
-              <button
-                type="button"
-                onClick={reconnect}
-                className={cn(actionBtnStyles, 'text-primary hover:text-primary')}
-                title="Reconnect"
-              >
-                Reconnect
-              </button>
-            )}
-
-            {/* Font Size Controls */}
-            <div className="flex items-center gap-1">
-              <span className="text-[10px] text-muted-foreground font-mono uppercase tracking-wider mr-1">Font</span>
-              <button
-                type="button"
-                onClick={handleFontDecrease}
-                className={cn(actionBtnStyles, 'w-7 h-7 px-0')}
-                title="Decrease font size"
-                disabled={fontSize <= MIN_FONT_SIZE}
-              >
-                <span className="text-sm font-bold">&minus;</span>
-              </button>
-              <span className="text-xs font-mono text-foreground w-7 text-center">{fontSize}</span>
-              <button
-                type="button"
-                onClick={handleFontIncrease}
-                className={cn(actionBtnStyles, 'w-7 h-7 px-0')}
-                title="Increase font size"
-                disabled={fontSize >= MAX_FONT_SIZE}
-              >
-                <PlusIcon className="w-3 h-3 flex-shrink-0" />
-              </button>
-            </div>
-          </div>
-        }
-        footer={
-          <div className="flex items-center justify-between px-4 h-10 bg-muted/20 border-t border-white/10">
-            {/* Left: Connection Status */}
-            <div className="flex items-center gap-3">
-              <div className="flex items-center gap-1.5">
-                <div
-                  className={cn(
-                    'w-2 h-2 rounded-full transition-all duration-300',
-                    isConnected
-                      ? 'bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)]'
-                      : connectionStatus === 'connecting'
-                        ? 'bg-yellow-500/80 animate-pulse'
-                        : connectionStatus === 'error'
-                          ? 'bg-destructive/80'
-                          : 'bg-muted-foreground/60'
-                  )}
-                />
-                <span className={cn('text-xs font-mono', statusLabel.color)}>
-                  {statusLabel.text}
-                </span>
-              </div>
-            </div>
-
-            {/* Right: Terminal Dimensions */}
-            <div className="flex items-center gap-3">
-              <span className="text-xs font-mono text-muted-foreground">
-                {dimensions.cols}&times;{dimensions.rows}
-              </span>
-              <span className="text-xs font-mono text-muted-foreground">
-                {fontSize}px
-              </span>
-            </div>
-          </div>
-        }
-        className={className}
-      >
-        {/* xterm.js Interactive Terminal */}
-        <div className="relative min-h-[400px]">
-          <div ref={containerRef} className={terminalContainerStyles} />
-
-          {/* Connection overlay when disconnected */}
-          {connectionStatus === 'disconnected' && (
-            <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm pointer-events-none">
-              <div className="text-center pointer-events-auto">
-                <TerminalIcon className="w-12 h-12 mx-auto mb-3 text-muted-foreground/50" />
-                <p className="text-sm text-muted-foreground/70 font-mono mb-3">
-                  Terminal disconnected
-                </p>
-                <button
-                  type="button"
-                  onClick={reconnect}
-                  className={cn(
-                    'px-4 py-2 rounded-lg text-sm font-mono transition-colors',
-                    'bg-primary/20 text-primary hover:bg-primary/30',
-                    'border border-primary/40',
-                    'shadow-[0_0_10px_hsla(330,85%,43%,0.2)]'
-                  )}
-                >
-                  Reconnect
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      </TerminalPanelChrome>
-    );
-  }
-);
-
-TerminalInteractivePanelXterm.displayName = 'TerminalInteractivePanelXterm';