@mks2508/mks-ui 0.5.7 → 0.5.8

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

@@ -1,550 +0,0 @@
-/**
- * TerminalLogsPanel Component.
- *
- * Ghostty-inspired terminal panel with session tabs, glassmorphic header,
- * tab-style filters, compact actions, and premium visual effects.
- *
- * @module components/devenv/terminal/panel
- */
-
-'use client';
-
-import { useRef, useEffect, forwardRef, useImperativeHandle, useMemo } 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 { LogParserService, type TLogLevel } from '../parsing';
-import { useTerminalSettings } from '../hooks/useTerminalSettings';
-import type {
-  ITerminalLogsPanelProps,
-  TLogLevelFilter,
-  ITerminalSession,
-} from './TerminalLogsPanel.types';
-import { TerminalPanelChrome } from './TerminalPanelChrome';
-import { TerminalFilterDropdown } from './TerminalFilterDropdown';
-import { TerminalPanelFooter } from './TerminalPanelFooter';
-import { LogLinesViewer } from './LogLinesViewer';
-import { TerminalIcon } from '@/react-ui/icons/lucide-animated';
-import { ArrowDownToLineIcon, ArrowUpIcon, ListIcon, SearchIcon, DeleteIcon, DownloadIcon } from '@/react-ui/icons/lucide-animated';
-import { cn } from '@/react-ui/lib/utils';
-import { IconWrapper } from '@/react-ui/lib/icon-wrapper';
-import '@xterm/xterm/css/xterm.css';
-
-/**
- * Terminal display container styles.
- */
-const terminalContainerStyles =
-  'relative bg-[#241B2F] min-h-[400px] border-x border-border/10 terminal-scroll';
-
-/**
- * Toggle button styles.
- */
-const toggleStyles = {
-  base: 'h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0',
-  inactive: 'bg-muted/40 text-muted-foreground',
-  active: 'bg-primary/20 text-primary border border-primary/40 shadow-[0_0_10px_hsla(330,85%,43%,0.2)]',
-};
-
-/**
- * Action button styles.
- */
-const actionButtonStyles = {
-  base: 'h-9 w-9 p-2 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center flex-shrink-0',
-  default: 'bg-muted/40 text-muted-foreground hover:text-foreground',
-};
-
-/**
- * Imperative handle for TerminalLogsPanel component.
- * Exposes terminal control methods to parent components.
- */
-export interface ITerminalLogsPanelRef {
-  /** Search for term in terminal buffer */
-  search: (term: string) => void;
-
-  /** Clear terminal and reset position */
-  clear: () => void;
-
-  /** Write text to terminal */
-  write: (text: string) => void;
-
-  /** Scroll to bottom of terminal */
-  scrollToBottom: () => void;
-}
-
-/**
- * Get the severity value for a log level for filtering comparison.
- * Higher value = more severe.
- */
-function getSeverity(level: TLogLevelFilter): number {
-  const severity: Record<TLogLevel, number> = {
-    trace: 0,
-    debug: 1,
-    info: 2,
-    warn: 3,
-    error: 4,
-    fatal: 5,
-    unknown: 1,
-  };
-  return level === 'all' ? 0 : severity[level] ?? 1;
-}
-
-/**
- * Get the display name for the current session or container.
- */
-function getDisplayName(containerName: string, sessions?: ITerminalSession[], activeSessionId?: string | null): string {
-  if (!sessions || sessions.length === 0) {
-    return containerName;
-  }
-  const activeSession = sessions.find((s) => s.id === activeSessionId);
-  return activeSession?.name ?? containerName;
-}
-
-/**
- * TerminalLogsPanel Component.
- *
- * Ghostty-inspired complete terminal panel with:
- * - Session tabs (multi-session support)
- * - Enhanced glassmorphic header
- * - Tab-style filter buttons
- * - Compact action bar
- * - xterm.js terminal display
- * - Status footer with counts
- * - Multi-layer glassmorphism
- * - Noise texture for depth
- * - Animated accent lines
- *
- * @example
- * ```tsx
- * const panelRef = useRef<ITerminalLogsPanelRef>(null);
- *
- * <TerminalLogsPanel
- *   ref={panelRef}
- *   containerName="devenv-agent-backend"
- *   isConnected={true}
- *   parsedEntries={state.parsedEntries}
- *   filterLevel="all"
- *   followCursor={true}
- *   showLineNumbers={false}
- *   levelCounts={{ info: 42, warn: 3 }}
- *   sessions={sessions}
- *   activeSessionId="session-1"
- *   onSessionChange={(id) => setActiveSession(id)}
- *   onSessionClose={(id) => closeSession(id)}
- *   onNewSession={() => createSession()}
- *   onFilterChange={(level) => setFilterLevel(level)}
- *   onFollowCursorChange={(enabled) => setFollowCursor(enabled)}
- *   onShowLineNumbersChange={(enabled) => setShowLineNumbers(enabled)}
- *   onClear={() => clearLogs()}
- *   onDownload={() => downloadLogs()}
- *   onSearch={() => openSearch()}
- * />
- * ```
- */
-export const TerminalLogsPanel = forwardRef<ITerminalLogsPanelRef, ITerminalLogsPanelProps>(
-  (
-    {
-      containerName,
-      isConnected,
-      _logs = '', // Kept for API compatibility, unused in favor of parsedEntries
-      parsedEntries = [],
-      filterLevel,
-      followCursor,
-      showLineNumbers,
-      levelCounts,
-      className,
-      viewMode = 'terminal',
-      containers,
-      sessions,
-      activeSessionId,
-      onSessionChange,
-      onSessionClose,
-      onNewSession,
-      onContainerSelect,
-      onSessionStop,
-      onAddContainer,
-      onFilterChange,
-      onFollowCursorChange,
-      onShowLineNumbersChange,
-      onViewModeChange,
-      onClear,
-      onDownload,
-      onSearch,
-    },
-    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 lastWrittenCountRef = useRef(0);
-    const terminalReadyRef = useRef(false);
-
-    const { settings: terminalSettings } = useTerminalSettings();
-
-    // Create parser instance for formatting
-    const parser = useMemo(() => new LogParserService({ timestamp_format: 'time' }), []);
-
-    // Get display name from active session or container
-    const displayName = getDisplayName(containerName, sessions, activeSessionId);
-
-    const filteredEntries = useMemo(() => {
-      if (filterLevel === 'all') return parsedEntries;
-
-      const minSeverity = getSeverity(filterLevel);
-      return parsedEntries.filter((entry) => {
-        const entrySeverity = getSeverity(entry.level);
-        return entrySeverity >= minSeverity;
-      });
-    }, [parsedEntries, filterLevel]);
-
-    /**
-     * Calculate line and byte counts from logs.
-     */
-    const lineCount = filteredEntries.length;
-    const byteCount = filteredEntries.reduce((sum, e) => sum + e.raw.length, 0);
-
-    /**
-     * Initialize xterm.js instance with addons.
-     * Only runs in terminal mode.
-     */
-    useEffect(() => {
-      // Skip initialization if not in terminal mode
-      if (viewMode !== 'terminal') return;
-      if (!containerRef.current) return;
-
-      // Create terminal with readonly mode (no cursor)
-      const terminal = new Terminal({
-        cursorBlink: false,
-        cursorInactiveStyle: 'none',
-        scrollback: 10000,
-        fontSize: 13,
-        fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace",
-        theme: getTerminalTheme(),
-        allowProposedApi: true,
-        disableStdin: true,
-      });
-
-      // Load addons
-      const fitAddon = new FitAddon();
-      const webLinksAddon = new WebLinksAddon();
-      const searchAddon = new SearchAddon();
-
-      terminal.loadAddon(fitAddon);
-      terminal.loadAddon(webLinksAddon);
-      terminal.loadAddon(searchAddon);
-
-      // Open terminal in container
-      terminal.open(containerRef.current);
-
-      // Defer fit until after DOM has been painted to avoid dimension errors
-      const rafId = requestAnimationFrame(() => {
-        const rafId2 = requestAnimationFrame(() => {
-          try {
-            fitAddon.fit();
-          } catch (e) {
-            // Silently ignore fit errors during initialization
-            console.debug('[TerminalLogsPanel] Fit deferred:', e);
-          }
-        });
-        return () => cancelAnimationFrame(rafId2);
-      });
-
-      // Store references
-      terminalRef.current = terminal;
-      fitAddonRef.current = fitAddon;
-      searchAddonRef.current = searchAddon;
-
-      // Mark terminal as ready
-      terminalReadyRef.current = true;
-
-      // Cleanup on unmount
-      return () => {
-        cancelAnimationFrame(rafId);
-        terminalReadyRef.current = false;
-        terminal.dispose();
-      };
-    }, [viewMode]);
-
-    /**
-     * Write filtered and formatted entries to terminal.
-     * Only writes new entries since last update (incremental).
-     * Only runs in terminal mode.
-     */
-    useEffect(() => {
-      // Skip if not in terminal mode
-      if (viewMode !== 'terminal') return;
-      if (!terminalRef.current || !terminalReadyRef.current) return;
-
-      // Get new entries to write (incremental)
-      const newEntries = filteredEntries.slice(lastWrittenCountRef.current);
-      if (newEntries.length === 0) return;
-
-      // Format and write each entry (raw mode preserves original ANSI)
-      for (const entry of newEntries) {
-        const formatted = parser.formatForTerminal(entry, 'raw');
-        terminalRef.current.write(formatted + '\r\n');
-      }
-
-      lastWrittenCountRef.current = filteredEntries.length;
-
-      // Auto-scroll to bottom when follow cursor is enabled
-      if (followCursor) {
-        terminalRef.current.scrollToBottom();
-      }
-    }, [filteredEntries, followCursor, parser, viewMode]);
-
-    /**
-     * Clear terminal when filter changes to full refresh.
-     * Only runs in terminal mode.
-     */
-    useEffect(() => {
-      // Skip if not in terminal mode
-      if (viewMode !== 'terminal') return;
-      if (!terminalRef.current || !terminalReadyRef.current) return;
-
-      // Clear and rewrite when filter level changes
-      terminalRef.current.clear();
-      lastWrittenCountRef.current = 0;
-    }, [filterLevel, viewMode]);
-
-    /**
-     * Handle window resize with auto-fit.
-     */
-    useEffect(() => {
-      const handleResize = () => {
-        // Defer fit to avoid dimension errors during resize
-        requestAnimationFrame(() => {
-          if (fitAddonRef.current && terminalRef.current) {
-            try {
-              fitAddonRef.current.fit();
-            } catch (e) {
-              // Silently ignore fit errors during resize
-              console.debug('[TerminalLogsPanel] Resize fit error:', e);
-            }
-          }
-        });
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    /**
-     * Expose imperative methods to parent.
-     */
-    useImperativeHandle(ref, () => ({
-      search: (term: string) => {
-        searchAddonRef.current?.findNext(term);
-      },
-      clear: () => {
-        terminalRef.current?.clear();
-        lastWrittenCountRef.current = 0; // Reset counter when clearing
-      },
-      write: (text: string) => {
-        terminalRef.current?.write(text);
-      },
-      scrollToBottom: () => {
-        terminalRef.current?.scrollToBottom();
-      },
-    }));
-
-    return (
-      <TerminalPanelChrome
-        containerName={displayName}
-        isConnected={isConnected}
-        viewMode={viewMode}
-        onViewModeChange={onViewModeChange}
-        crtEffect={terminalSettings.crtEffect}
-        sessions={sessions}
-        activeSessionId={activeSessionId}
-        onSessionTabClick={(sessionId) => {
-          onSessionChange?.(sessionId);
-          onContainerSelect?.(sessionId);
-        }}
-        onSessionClose={(sessionId) => {
-          onSessionClose?.(sessionId);
-          if (sessionId === activeSessionId) {
-            onSessionStop?.();
-          }
-        }}
-        onNewSession={onNewSession}
-        availableContainers={containers}
-        onAddContainer={onAddContainer}
-        actionBar={
-          <>
-            {/* Unified Action Bar with Filter */}
-            <div className="flex items-center gap-2 px-3 h-12 bg-muted/10 border-b border-white/10">
-              {/* Filter Dropdown */}
-              <TerminalFilterDropdown
-                filterLevel={filterLevel}
-                levelCounts={levelCounts}
-                onFilterChange={onFilterChange}
-              />
-
-              {/* Divider */}
-              <div className="w-px h-6 bg-border/30 flex-shrink-0" />
-
-              {/* Toggles */}
-              <div className="flex items-center gap-1">
-                {/* Follow Cursor Toggle (only in terminal mode) */}
-                {viewMode === 'terminal' && (
-                  <button
-                    type="button"
-                    onClick={() => onFollowCursorChange(!followCursor)}
-                    className={cn(toggleStyles.base, followCursor ? toggleStyles.active : toggleStyles.inactive)}
-                    title={followCursor ? 'Disable auto-scroll (Ctrl+F)' : 'Enable auto-scroll (Ctrl+F)'}
-                  >
-                    {followCursor ? (
-                      <ArrowDownToLineIcon className="w-4 h-4 flex-shrink-0" />
-                    ) : (
-                      <ArrowUpIcon className="w-4 h-4 flex-shrink-0" />
-                    )}
-                  </button>
-                )}
-
-                {/* Line Numbers Toggle */}
-                <button
-                  type="button"
-                  onClick={() => onShowLineNumbersChange(!showLineNumbers)}
-                  className={cn(toggleStyles.base, showLineNumbers ? toggleStyles.active : toggleStyles.inactive)}
-                  title={showLineNumbers ? 'Hide line numbers (Ctrl+L)' : 'Show line numbers (Ctrl+L)'}
-                >
-                  <ListIcon className="w-4 h-4 flex-shrink-0" />
-                </button>
-              </div>
-
-              {/* Spacer */}
-              <div className="flex-1" />
-
-              {/* Action Buttons */}
-              <div className="flex items-center gap-1">
-                {/* Search */}
-                <button
-                  type="button"
-                  onClick={onSearch}
-                  className={cn(actionButtonStyles.base, actionButtonStyles.default)}
-                  title="Search in logs (Ctrl+Shift+F)"
-                >
-                  <IconWrapper icon={SearchIcon} size={16} />
-                </button>
-
-                {/* Clear */}
-                <button
-                  type="button"
-                  onClick={onClear}
-                  className={cn(actionButtonStyles.base, actionButtonStyles.default)}
-                  title="Clear logs (Ctrl+K)"
-                >
-                  <IconWrapper icon={DeleteIcon} size={16} />
-                </button>
-
-                {/* Download */}
-                <button
-                  type="button"
-                  onClick={onDownload}
-                  className={cn(actionButtonStyles.base, actionButtonStyles.default)}
-                  title="Download logs"
-                >
-                  <IconWrapper icon={DownloadIcon} size={16} />
-                </button>
-              </div>
-            </div>
-          </>
-        }
-        footer={<TerminalPanelFooter lineCount={lineCount} byteCount={byteCount} filterLevel={filterLevel} />}
-        className={className}
-      >
-        {/* Terminal Display or React Viewer */}
-        {activeSessionId ? (
-          viewMode === 'terminal' ? (
-            /* xterm.js Terminal Display */
-            <div className="relative min-h-[400px]">
-              <div ref={containerRef} className={terminalContainerStyles} />
-              {/* Terminal placeholder when no logs */}
-              {parsedEntries.length === 0 && (
-                <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                  <div className="text-center">
-                    <TerminalIcon className="w-12 h-12 mx-auto mb-3 text-muted-foreground/30" />
-                    <p className="text-sm text-muted-foreground/50 font-mono">
-                      Waiting for logs...
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : (
-            /* React Log Viewer */
-            <LogLinesViewer
-              entries={parsedEntries}
-              filterLevel={filterLevel}
-              levelCounts={levelCounts}
-              showLineNumbers={showLineNumbers}
-              followCursor={followCursor}
-              onScrollToBottom={() => {
-                if (followCursor && terminalRef.current) {
-                  terminalRef.current.scrollToBottom();
-                }
-              }}
-              className="min-h-[400px]"
-            />
-          )
-        ) : (
-          /* Empty State - No container selected */
-          <div className="flex flex-col items-center justify-center min-h-[400px] px-8 py-12 text-center">
-            {/* Empty State Icon */}
-            <div className="w-16 h-16 mb-4 rounded-full bg-muted/20 flex items-center justify-center">
-              <TerminalIcon className="w-8 h-8 text-muted-foreground/50" />
-            </div>
-
-            {/* Empty State Message */}
-            <h3 className="text-lg font-medium text-foreground mb-2">
-              No container selected
-            </h3>
-            <p className="text-sm text-muted-foreground mb-6 max-w-md">
-              Click the <span className="text-primary font-mono">+</span> button above to add a container tab and view its logs in real-time.
-            </p>
-
-            {/* Add Container Button (when no tabs open) */}
-            {containers && containers.length > 0 && onAddContainer && (
-              <div className="flex flex-col items-center gap-2">
-                <div className="text-xs text-muted-foreground mb-2">Available containers:</div>
-                <div className="flex flex-wrap gap-2 justify-center">
-                  {containers.slice(0, 3).map((container) => (
-                    <button
-                      key={container.id}
-                      type="button"
-                      onClick={() => onAddContainer(container.name)}
-                      className={cn(
-                        'px-3 py-1.5 rounded-lg text-sm font-mono transition-colors',
-                        'bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary',
-                        'hover:shadow-[0_0_10px_hsla(330,85%,43%,0.2)]'
-                      )}
-                    >
-                      {container.name}
-                    </button>
-                  ))}
-                  {containers.length > 3 && (
-                    <button
-                      type="button"
-                      onClick={() => onNewSession?.()}
-                      className={cn(
-                        'px-3 py-1.5 rounded-lg text-sm font-mono transition-colors',
-                        'bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary'
-                      )}
-                    >
-                      +{containers.length - 3} more
-                    </button>
-                  )}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-      </TerminalPanelChrome>
-    );
-  }
-);
-
-TerminalLogsPanel.displayName = 'TerminalLogsPanel';