@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,330 @@
+/**
+ * Log lines viewer component (React mode).
+ *
+ * Displays parsed log entries with React components for:
+ * - Level badges with CSS styling
+ * - Syntax highlighted spans
+ * - Timestamps right-aligned
+ * - Virtual scrolling with @tanstack/react-virtual
+ * - Auto-scroll to bottom when following logs
+ *
+ * @module components/devenv/terminal/panel/LogLinesViewer
+ */
+
+'use client';
+
+import { useMemo, useRef, useEffect, memo } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import type { IParsedLogEntry, TLogLevel } from '../parsing';
+import {
+  LevelBadge,
+  ContentTypeBadge,
+  TagBadges,
+  TimestampBadge,
+} from '../components/LogLineBadges';
+import { SyntaxHighlightedText } from '../components/SyntaxHighlight';
+import { SpecializedSyntaxHighlighter } from '../components/SpecializedSyntaxHighlighter';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Props for LogLinesViewer component.
+ */
+export interface ILogLinesViewerProps {
+  /** Parsed log entries to display */
+  entries: IParsedLogEntry[];
+
+  /** Current log level filter */
+  filterLevel: TLogLevel | 'all';
+
+  /** Level counts for badges */
+  levelCounts: Partial<Record<TLogLevel, number>>;
+
+  /** Optional custom class name */
+  className?: string;
+
+  /** Whether to show line numbers */
+  showLineNumbers?: boolean;
+
+  /** Whether to enable syntax highlighting */
+  enableSyntaxHighlight?: boolean;
+
+  /** Whether to auto-scroll to bottom when new entries arrive */
+  followCursor?: boolean;
+
+  /** Callback when scroll position changes (optional) */
+  onScrollToBottom?: () => void;
+}
+
+/**
+ * Get the severity value for a log level for filtering comparison.
+ */
+function getSeverity(level: TLogLevel | 'all'): 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;
+}
+
+/**
+ * Log lines viewer component.
+ *
+ * Displays parsed log entries with React components:
+ * - Level badges (colored based on log level)
+ * - Syntax highlighted message content
+ * - Timestamps right-aligned
+ * - Tag badges for component identification
+ * - Virtual scrolling for performance with large logs
+ * - Auto-scroll to bottom when following logs
+ *
+ * @example
+ * ```tsx
+ * <LogLinesViewer
+ *   entries={parsedEntries}
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3 }}
+ *   showLineNumbers={true}
+ *   followCursor={true}
+ * />
+ * ```
+ */
+export function LogLinesViewer({
+  entries,
+  filterLevel,
+  levelCounts,
+  className,
+  showLineNumbers = false,
+  enableSyntaxHighlight = true,
+  followCursor = false,
+  onScrollToBottom,
+}: ILogLinesViewerProps): React.JSX.Element {
+  // Ref for the scroll container
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const prevEntriesLengthRef = useRef(entries.length);
+
+  /**
+   * Filter entries based on current filter level.
+   * Memoized to avoid re-filtering on every render.
+   */
+  const filteredEntries = useMemo(() => {
+    if (filterLevel === 'all') return entries;
+
+    const minSeverity = getSeverity(filterLevel);
+    return entries.filter((entry) => {
+      const entrySeverity = getSeverity(entry.level);
+      return entrySeverity >= minSeverity;
+    });
+  }, [entries, filterLevel]);
+
+  /**
+   * Virtual scrolling with @tanstack/react-virtual.
+   * Only renders visible rows + overscan buffer for optimal performance.
+   * Uses dynamic size measurement for variable-height rows.
+   */
+  const rowVirtualizer = useVirtualizer({
+    count: filteredEntries.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => 28,
+    overscan: 5, // Reduced for faster response
+  });
+
+  /**
+   * Auto-scroll to bottom when new entries arrive and followCursor is enabled.
+   * Uses requestAnimationFrame for non-blocking scroll.
+   */
+  useEffect(() => {
+    if (followCursor && entries.length > prevEntriesLengthRef.current) {
+      // Use RAF to avoid blocking the render
+      requestAnimationFrame(() => {
+        if (scrollContainerRef.current) {
+          scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+        }
+      });
+      onScrollToBottom?.();
+    }
+    prevEntriesLengthRef.current = entries.length;
+  }, [entries.length, followCursor, onScrollToBottom]);
+
+  /**
+   * Calculate stats.
+   */
+  const lineCount = filteredEntries.length;
+
+  return (
+    <div className={cn('flex flex-col h-full', className)}>
+      {/* Virtual scroll container */}
+      <div
+        ref={scrollContainerRef}
+        className="flex-1 overflow-auto font-mono text-[13px] leading-relaxed bg-[#241B2F]"
+        style={{ contain: 'layout style' }}
+      >
+        {filteredEntries.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full gap-2 text-muted-foreground/50">
+            <svg className="w-8 h-8 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+            </svg>
+            <span className="text-xs font-mono">No log entries to display</span>
+          </div>
+        ) : (
+          <div
+            style={{
+              height: `${rowVirtualizer.getTotalSize()}px`,
+              width: '100%',
+              position: 'relative',
+            }}
+          >
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+              const entry = filteredEntries[virtualRow.index];
+              return (
+                <div
+                  key={entry.line_number}
+                  data-index={virtualRow.index}
+                  ref={rowVirtualizer.measureElement}
+                  style={{
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    transform: `translateY(${virtualRow.start}px)`,
+                  }}
+                >
+                  <LogLine
+                    entry={entry}
+                    index={virtualRow.index}
+                    showLineNumbers={showLineNumbers}
+                    enableSyntaxHighlight={enableSyntaxHighlight}
+                  />
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Props for LogLine component.
+ */
+interface ILogLineProps {
+  /** Parsed log entry */
+  entry: IParsedLogEntry;
+
+  /** Row index for alternating styling */
+  index: number;
+
+  /** Whether to show line numbers */
+  showLineNumbers?: boolean;
+
+  /** Whether to enable syntax highlighting */
+  enableSyntaxHighlight?: boolean;
+}
+
+/**
+ * Level-specific left border color for log lines.
+ */
+const LEVEL_BORDER_COLORS: Record<string, string> = {
+  error: 'border-l-red-500/60',
+  fatal: 'border-l-pink-500/60',
+  warn: 'border-l-yellow-500/50',
+  info: 'border-l-blue-500/30',
+  debug: 'border-l-cyan-500/20',
+  trace: 'border-l-gray-500/15',
+  unknown: 'border-l-transparent',
+};
+
+/**
+ * Individual log line component (memoized).
+ *
+ * Renders a single log entry with badges and highlighted content.
+ * Memoized to prevent re-renders when entry hasn't changed.
+ */
+const LogLine = memo(function LogLine({ entry, index, showLineNumbers, enableSyntaxHighlight }: ILogLineProps): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        'flex items-start gap-2 px-3 py-1 border-l-2 transition-colors',
+        LEVEL_BORDER_COLORS[entry.level] || 'border-l-transparent',
+        index % 2 === 0 ? 'bg-white/[0.02]' : '',
+        'hover:bg-white/[0.06]'
+      )}
+    >
+      {/* Line number */}
+      {showLineNumbers && (
+        <span className="text-muted-foreground/50 text-xs w-12 flex-shrink-0 select-none">
+          {entry.line_number}
+        </span>
+      )}
+
+      {/* Level badge (skip for continuation lines) */}
+      {!entry.is_continuation && <LevelBadge level={entry.level} />}
+
+      {/* Content type badge (HTTP shows method like GET/POST, JSON shows JSON, etc.) */}
+      {!entry.is_continuation && entry.content_type && entry.content_type !== 'plain' && (
+        <ContentTypeBadge contentType={entry.content_type} httpMethod={entry.http_method} />
+      )}
+
+      {/* Tag badges */}
+      {!entry.is_continuation && entry.tags && entry.tags.length > 0 && (
+        <TagBadges tags={entry.tags} />
+      )}
+
+      {/* Message content with specialized highlighting */}
+      <div className="flex-1 min-w-0">
+        {enableSyntaxHighlight ? (
+          // Use specialized highlighter for HTTP and table content
+          (entry.content_type === 'http' || entry.content_type === 'table') ? (
+            <SpecializedSyntaxHighlighter
+              contentType={entry.content_type}
+              httpMethod={entry.http_method}
+              httpPath={entry.http_path}
+              tableData={entry.table_data}
+              text={entry.message ?? entry.raw}
+            />
+          ) : entry.content_type === 'json' && entry.structured ? (
+            <SpecializedSyntaxHighlighter
+              contentType="json"
+              jsonData={entry.structured}
+              text={entry.message ?? entry.raw}
+            />
+          ) : (
+            <SyntaxHighlightedText text={entry.message ?? entry.raw} />
+          )
+        ) : (
+          <span className="text-foreground/90">{entry.message ?? entry.raw}</span>
+        )}
+
+        {/* Structured data display (if present and not already shown) */}
+        {entry.structured && entry.content_type !== 'json' && (
+          <details className="mt-1 ml-4">
+            <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
+              JSON data
+            </summary>
+            <pre className="mt-1 text-xs bg-black/20 p-2 rounded overflow-x-auto">
+              {JSON.stringify(entry.structured, null, 2)}
+            </pre>
+          </details>
+        )}
+      </div>
+
+      {/* Timestamp (right-aligned) */}
+      {!entry.is_continuation && entry.timestamp_display && (
+        <TimestampBadge timestamp={entry.timestamp_display} />
+      )}
+    </div>
+  );
+}, (prevProps, nextProps) => {
+  return (
+    prevProps.entry.line_number === nextProps.entry.line_number &&
+    prevProps.entry.raw === nextProps.entry.raw &&
+    prevProps.index === nextProps.index &&
+    prevProps.showLineNumbers === nextProps.showLineNumbers &&
+    prevProps.enableSyntaxHighlight === nextProps.enableSyntaxHighlight
+  );
+});

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

@@ -0,0 +1,242 @@
+/**
+ * TerminalDebugPanel Component.
+ *
+ * Collapsible diagnostic panel below the terminal showing real-time
+ * GPU/renderer info, FPS, grid dimensions, PTY status, and connection details.
+ *
+ * @module components/devenv/terminal/panel/TerminalDebugPanel
+ */
+
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Props for the TerminalDebugPanel component.
+ */
+export interface ITerminalDebugPanelProps {
+  /** Whether the panel is visible */
+  visible: boolean;
+  /** Renderer name (e.g. "WebGPU", "WebGL2", "xterm") */
+  renderer?: string;
+  /** Current FPS */
+  fps?: number;
+  /** GPU adapter name (e.g. "Apple M3 Pro") */
+  gpu?: string;
+  /** Canvas pixel dimensions */
+  canvasSize?: { width: number; height: number };
+  /** Grid dimensions in cols/rows */
+  gridSize?: { cols: number; rows: number };
+  /** Cell size in pixels */
+  cellSize?: { width: number; height: number };
+  /** Font description (e.g. "JetBrains Mono 14px") */
+  font?: string;
+  /** PTY connection status */
+  ptyStatus?: string;
+  /** PTY WebSocket URL */
+  ptyUrl?: string;
+  /** Active remote label */
+  remoteName?: string;
+  /** Theme name */
+  themeName?: string;
+  /** CRT effect enabled */
+  crtEffect?: boolean;
+  /** Connection uptime in seconds */
+  uptimeSeconds?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * Format uptime from seconds to human-readable string.
+ *
+ * @param seconds - Total seconds of uptime
+ * @returns Formatted string (e.g. "5m 32s", "1h 23m")
+ */
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${Math.floor(seconds)}s`;
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  if (m < 60) return `${m}m ${s}s`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}h ${rm}m`;
+}
+
+/**
+ * Single row in the debug panel table.
+ */
+function DebugRow({ label, value, valueColor }: { label: string; value: string; valueColor?: string }) {
+  return (
+    <div className="flex items-center gap-3 px-3 py-1 hover:bg-white/5 transition-colors">
+      <span className="text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider w-24 flex-shrink-0">
+        {label}
+      </span>
+      <span className={cn('text-xs font-mono', valueColor ?? 'text-foreground/80')}>
+        {value}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * TerminalDebugPanel Component.
+ *
+ * Renders a compact diagnostic panel with terminal runtime information.
+ * Toggled via the debug panel setting in TerminalSettingsPopover.
+ *
+ * @param props - Debug panel props with runtime telemetry
+ * @returns React element or null when hidden
+ *
+ * @example
+ * ```tsx
+ * <TerminalDebugPanel
+ *   visible={settings.debugPanel}
+ *   renderer="WebGPU"
+ *   fps={60}
+ *   gridSize={{ cols: 120, rows: 30 }}
+ *   ptyStatus="connected"
+ * />
+ * ```
+ */
+export function TerminalDebugPanel({
+  visible,
+  renderer,
+  fps,
+  gpu,
+  canvasSize,
+  gridSize,
+  cellSize,
+  font,
+  ptyStatus,
+  ptyUrl,
+  remoteName,
+  themeName,
+  crtEffect,
+  uptimeSeconds,
+  className,
+}: ITerminalDebugPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [liveUptime, setLiveUptime] = useState(uptimeSeconds ?? 0);
+  const uptimeRef = useRef(uptimeSeconds ?? 0);
+
+  // Live uptime counter
+  useEffect(() => {
+    uptimeRef.current = uptimeSeconds ?? 0;
+    setLiveUptime(uptimeRef.current);
+  }, [uptimeSeconds]);
+
+  useEffect(() => {
+    if (!visible || ptyStatus !== 'connected') return;
+    const interval = setInterval(() => {
+      uptimeRef.current += 1;
+      setLiveUptime(uptimeRef.current);
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [visible, ptyStatus]);
+
+  if (!visible) return null;
+
+  const statusColor = ptyStatus === 'connected'
+    ? 'text-green-400'
+    : ptyStatus === 'connecting'
+      ? 'text-yellow-400'
+      : ptyStatus === 'error'
+        ? 'text-red-400'
+        : 'text-muted-foreground/50';
+
+  return (
+    <div className={cn(
+      'border-t border-white/10 bg-black/20',
+      className,
+    )}>
+      {/* Toggle header */}
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center gap-2 px-3 py-1.5 text-[10px] font-mono text-muted-foreground/60 uppercase tracking-wider hover:text-muted-foreground transition-colors"
+      >
+        <svg
+          className={cn('w-3 h-3 transition-transform', isExpanded && 'rotate-90')}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          strokeWidth={2}
+        >
+          <polyline points="9 18 15 12 9 6" />
+        </svg>
+        Debug Panel
+        {fps != null && (
+          <span className="ml-auto text-foreground/40">{fps.toFixed(0)} FPS</span>
+        )}
+      </button>
+
+      {/* Expanded content */}
+      {isExpanded && (
+        <div className="pb-2">
+          {renderer && (
+            <DebugRow
+              label="Renderer"
+              value={renderer}
+              valueColor="text-primary/80"
+            />
+          )}
+          {fps != null && (
+            <DebugRow label="FPS" value={fps.toFixed(1)} />
+          )}
+          {gpu && (
+            <DebugRow label="GPU" value={gpu} />
+          )}
+          {canvasSize && (
+            <DebugRow
+              label="Canvas"
+              value={`${canvasSize.width} \u00d7 ${canvasSize.height}`}
+            />
+          )}
+          {gridSize && (
+            <DebugRow
+              label="Grid"
+              value={`${gridSize.cols} cols \u00d7 ${gridSize.rows} rows`}
+            />
+          )}
+          {cellSize && (
+            <DebugRow
+              label="Cell"
+              value={`${cellSize.width.toFixed(1)} \u00d7 ${cellSize.height.toFixed(1)} px`}
+            />
+          )}
+          {font && (
+            <DebugRow label="Font" value={font} />
+          )}
+          <DebugRow
+            label="PTY Status"
+            value={ptyStatus ?? 'unknown'}
+            valueColor={statusColor}
+          />
+          {ptyUrl && (
+            <DebugRow
+              label="PTY URL"
+              value={ptyUrl}
+              valueColor="text-foreground/40"
+            />
+          )}
+          {remoteName && (
+            <DebugRow label="Remote" value={remoteName} />
+          )}
+          {themeName && (
+            <DebugRow label="Theme" value={themeName} />
+          )}
+          <DebugRow
+            label="CRT Effect"
+            value={crtEffect ? 'ON' : 'OFF'}
+            valueColor={crtEffect ? 'text-primary/60' : 'text-muted-foreground/40'}
+          />
+          {ptyStatus === 'connected' && (
+            <DebugRow label="Uptime" value={formatUptime(liveUptime)} />
+          )}
+        </div>
+      )}
+    </div>
+  );
+}