@mks2508/mks-ui 0.5.7 → 0.6.0

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

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