@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,439 @@
+/**
+ * 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';