@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,330 +0,0 @@
-/**
- * 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

@@ -1,242 +0,0 @@
-/**
- * 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>
-  );
-}