@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,383 @@
+/**
+ * TerminalInteractivePanelRestty Component.
+ *
+ * Interactive terminal panel using restty's GPU-accelerated renderer.
+ * Mirrors TerminalInteractivePanel's UI (Ghostty chrome, action bar,
+ * footer) but uses restty for rendering and its own PTY transport
+ * instead of useTerminalWebSocket.
+ *
+ * @module components/devenv/terminal/panel/interactive-restty
+ */
+
+'use client';
+
+import {
+  useRef,
+  useState,
+  useCallback,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import type { Restty } from 'restty';
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+import { TerminalRestty, type ITerminalResttyRef } from '../TerminalRestty';
+import { useTerminalSettings } from '../hooks/useTerminalSettings';
+import { TerminalPanelChrome } from './TerminalPanelChrome';
+import { TerminalSettingsPopover } from './TerminalSettingsPopover';
+import { TerminalDebugPanel } from './TerminalDebugPanel';
+import { TerminalIcon, DeleteIcon, PlusIcon } from '@/react-ui/icons/lucide-animated';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Default font size for interactive terminal.
+ */
+const DEFAULT_FONT_SIZE = 14;
+
+/**
+ * Min/max font size bounds.
+ */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+
+/**
+ * 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';
+
+/**
+ * TerminalInteractivePanelRestty Component.
+ *
+ * GPU-accelerated interactive terminal combining:
+ * - TerminalPanelChrome (Ghostty glassmorphism shell)
+ * - restty with WebGPU/WebGL2 rendering
+ * - Custom DevenvPtyTransport for mks-devenv WebSocket protocol
+ * - Action bar (clear, font size controls, reconnect)
+ * - Footer with connection status and terminal dimensions
+ *
+ * @example
+ * ```tsx
+ * <TerminalInteractivePanelRestty
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ *   onConnect={() => console.log('Connected')}
+ * />
+ * ```
+ */
+export const TerminalInteractivePanelRestty = forwardRef<
+  ITerminalInteractivePanelRef,
+  Omit<ITerminalInteractivePanelProps, 'renderer' | 'ptyBackend'>
+>(
+  (
+    {
+      containerName,
+      wsUrl,
+      sessions,
+      activeSessionId,
+      onSessionChange,
+      onSessionClose,
+      onNewSession,
+      onConnect,
+      onDisconnect,
+      onError,
+      className,
+    },
+    ref
+  ) => {
+    const resttyRef = useRef<ITerminalResttyRef>(null);
+    const { settings } = useTerminalSettings();
+    const [fontSize, setFontSize] = useState(settings.fontSize);
+    const [dimensions, setDimensions] = useState({ cols: 80, rows: 24 });
+    const [connectionStatus, setConnectionStatus] = useState<'disconnected' | 'connecting' | 'connected' | 'error'>('disconnected');
+    const [uptimeStart, setUptimeStart] = useState<number | null>(null);
+
+    /**
+     * Handle PTY connection status changes from restty.
+     */
+    const handlePtyStatus = useCallback((status: string) => {
+      if (status === 'connected' || status === 'attached' || status === 'welcome' || status === 'created') {
+        setConnectionStatus('connected');
+      } else if (status === 'connecting') {
+        setConnectionStatus('connecting');
+      } else if (status === 'error') {
+        setConnectionStatus('error');
+      }
+    }, []);
+
+    /**
+     * Handle PTY connection open.
+     */
+    const handleConnect = useCallback(() => {
+      setConnectionStatus('connected');
+      setUptimeStart(Date.now());
+      onConnect?.();
+    }, [onConnect]);
+
+    /**
+     * Handle PTY connection close.
+     */
+    const handleDisconnect = useCallback(() => {
+      setConnectionStatus('disconnected');
+      setUptimeStart(null);
+      onDisconnect?.();
+    }, [onDisconnect]);
+
+    /**
+     * Handle PTY errors.
+     */
+    const handleError = useCallback((message: string) => {
+      setConnectionStatus('error');
+      onError?.(message);
+    }, [onError]);
+
+    /**
+     * Handle terminal resize from restty.
+     */
+    const handleResize = useCallback((cols: number, rows: number) => {
+      setDimensions({ cols, rows });
+    }, []);
+
+    const isConnected = connectionStatus === 'connected';
+
+    /**
+     * Clear terminal display.
+     */
+    const handleClear = useCallback(() => {
+      resttyRef.current?.clear();
+    }, []);
+
+    /**
+     * Increase font size.
+     */
+    const handleFontIncrease = useCallback(() => {
+      setFontSize((prev) => {
+        const next = Math.min(prev + 1, MAX_FONT_SIZE);
+        resttyRef.current?.setFontSize(next);
+        return next;
+      });
+    }, []);
+
+    /**
+     * Decrease font size.
+     */
+    const handleFontDecrease = useCallback(() => {
+      setFontSize((prev) => {
+        const next = Math.max(prev - 1, MIN_FONT_SIZE);
+        resttyRef.current?.setFontSize(next);
+        return next;
+      });
+    }, []);
+
+    /**
+     * Reconnect to PTY.
+     */
+    const handleReconnect = useCallback(() => {
+      if (!wsUrl) return;
+      resttyRef.current?.disconnectPty();
+      resttyRef.current?.connectPty(wsUrl);
+      setConnectionStatus('connecting');
+    }, [wsUrl]);
+
+    /**
+     * Expose imperative methods to parent.
+     */
+    useImperativeHandle(ref, () => ({
+      write: (_text: string) => {
+        // No-op for restty — status messages should use React overlays
+      },
+      clear: () => {
+        resttyRef.current?.clear();
+      },
+      focus: () => {
+        resttyRef.current?.focus();
+      },
+      sendInput: (data: string) => {
+        resttyRef.current?.sendInput(data);
+      },
+      isConnected: () => resttyRef.current?.isPtyConnected() ?? false,
+    }));
+
+    /**
+     * Get connection status label with color.
+     */
+    const getStatusLabel = (): { text: string; color: string } => {
+      switch (connectionStatus) {
+        case 'connected':
+          return { text: 'Connected (GPU)', 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"
+            >
+              <DeleteIcon className="w-3.5 h-3.5 flex-shrink-0" />
+              <span>Clear</span>
+            </button>
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* Settings */}
+            <TerminalSettingsPopover />
+
+            {/* Renderer badge */}
+            <span className="text-[10px] font-mono text-primary/70 uppercase tracking-wider px-1.5 py-0.5 rounded border border-primary/20 bg-primary/5">
+              restty
+            </span>
+
+            {/* Reconnect (shown when disconnected) */}
+            {connectionStatus === 'disconnected' && (
+              <button
+                type="button"
+                onClick={handleReconnect}
+                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}
+      >
+        {/* restty GPU Terminal */}
+        <div className="relative min-h-[400px]">
+          <TerminalRestty
+            ref={resttyRef}
+            wsUrl={wsUrl}
+            fontSize={fontSize}
+            resttyThemeName={settings.resttyThemeName}
+            gpuRenderer="auto"
+            onResize={handleResize}
+            onPtyStatus={handlePtyStatus}
+            onConnect={handleConnect}
+            onDisconnect={handleDisconnect}
+            onError={handleError}
+            className="w-full h-full min-h-[400px] bg-[#241B2F]"
+          />
+
+          {/* 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={handleReconnect}
+                  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>
+
+        {/* Debug Panel */}
+        <TerminalDebugPanel
+          visible={settings.debugPanel}
+          renderer={connectionStatus === 'connected' ? 'restty (GPU)' : undefined}
+          gridSize={dimensions.cols > 0 ? { cols: dimensions.cols, rows: dimensions.rows } : undefined}
+          font={`JetBrains Mono ${fontSize}px`}
+          ptyStatus={connectionStatus}
+          ptyUrl={wsUrl}
+          themeName={settings.resttyThemeName}
+          crtEffect={settings.crtEffect}
+          uptimeSeconds={uptimeStart ? Math.floor((Date.now() - uptimeStart) / 1000) : 0}
+        />
+      </TerminalPanelChrome>
+    );
+  }
+);
+
+TerminalInteractivePanelRestty.displayName = 'TerminalInteractivePanelRestty';