@mks2508/mks-ui 0.3.1 → 0.4.0

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

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