@mks2508/mks-ui 0.3.1 → 0.4.0

package/src/react-ui/blocks/Terminal/parsing/TableParser.ts

@@ -0,0 +1,348 @@
+/**
+ * Table parser for box-drawing character tables.
+ *
+ * Detects and parses tables created with box-drawing characters
+ * (├─│└┌) commonly found in CLI output.
+ *
+ * @module components/devenv/terminal/parsing/TableParser
+ */
+
+import type { IParsedLogEntry } from './LogParser.types';
+
+/**
+ * Box-drawing characters used for table borders.
+ * Unicode range: U+2500-U+257F
+ */
+export const TABLE_CHARS = [
+  '─', '│', '┌', '┐', '└', '┘',
+  '├', '┤', '┬', '┴', '┼',
+  '═', '║', '╔', '╗', '╚', '╝',
+  '╠', '╣', '╦', '╩', '╬',
+  '╒', '╓', '╕', '╖', '╘', '╙',
+  '╛', '╜', '╢', '╡', '╤', '╧',
+  '╟', '╞', '╡', '╢', '╪', '╫',
+] as const;
+
+/**
+ * Table row type.
+ */
+export type TTableRowType = 'top' | 'header' | 'separator' | 'data' | 'bottom' | 'unknown';
+
+/**
+ * Parsed table row.
+ */
+export interface ITableRow {
+  /** Raw line */
+  raw: string;
+
+  /** Row type */
+  type: TTableRowType;
+
+  /** Cells extracted from the row (for data rows) */
+  cells?: string[];
+
+  /** Line number */
+  lineNumber: number;
+}
+
+/**
+ * Parsed table data.
+ */
+export interface ITableData {
+  /** All rows in the table */
+  rows: ITableRow[];
+
+  /** Number of columns */
+  columnCount: number;
+
+  /** Header row if present */
+  headers?: string[];
+
+  /** Data rows (excluding borders) */
+  dataRows: string[][];
+
+  /** Line number of first row */
+  startLine: number;
+
+  /** Line number of last row */
+  endLine: number;
+}
+
+/**
+ * Table parser class.
+ *
+ * Detects and parses tables created with box-drawing characters.
+ * Groups consecutive table lines and extracts cell data.
+ *
+ * @example
+ * ```ts
+ * const parser = new TableParser();
+ * const isTable = parser.isTableLine('├──────────┼──────────┤');
+ * const table = parser.parseTable(lines);
+ * ```
+ */
+export class TableParser {
+  /** Minimum box-drawing characters to consider a line a table */
+  private readonly MIN_TABLE_CHARS = 2;
+
+  /**
+   * Check if a line is a table line.
+   *
+   * A line is considered a table line if it contains multiple
+   * box-drawing characters.
+   *
+   * @param line - Line to check
+   * @returns true if line is part of a table
+   */
+  isTableLine(line: string): boolean {
+    let count = 0;
+
+    for (const char of TABLE_CHARS) {
+      if (line.includes(char)) {
+        count++;
+        if (count >= this.MIN_TABLE_CHARS) {
+          return true;
+        }
+      }
+    }
+
+    return count >= this.MIN_TABLE_CHARS;
+  }
+
+  /**
+   * Determine the type of a table row.
+   *
+   * @param line - Table row line
+   * @returns Row type
+   */
+  getRowType(line: string): TTableRowType {
+    const trimmed = line.trim();
+
+    // Top border: starts with ┌ or ╒
+    if (/^[┌╒]/.test(trimmed)) {
+      return 'top';
+    }
+
+    // Bottom border: starts with └ or ╘
+    if (/^[└╘]/.test(trimmed)) {
+      return 'bottom';
+    }
+
+    // Separator: contains ├, ┼, ┬, ┴, ╪, ╤, ╧, etc.
+    if (/[├┼┬┴╪╤╧╠╦╩╬]/.test(trimmed)) {
+      return 'separator';
+    }
+
+    // Header separator: usually has ═ or ─
+    if (/[═]/.test(trimmed) && /[│║]/.test(trimmed)) {
+      return 'separator';
+    }
+
+    // Data or header row: contains │ with text
+    if (/[│║]/.test(trimmed) && /[a-zA-Z0-9]/.test(trimmed)) {
+      // Check if it looks like a header (all caps or specific patterns)
+      const content = trimmed.replace(/[│║═─┼┬┴├╪╤╧]/g, ' ').trim();
+      if (content.length > 0 && content === content.toUpperCase() && content.length < 50) {
+        return 'header';
+      }
+      return 'data';
+    }
+
+    return 'unknown';
+  }
+
+  /**
+   * Extract cells from a table row.
+   *
+   * Splits the row by │ characters and trims each cell.
+   *
+   * @param line - Table row line
+   * @returns Array of cell contents
+   */
+  extractCells(line: string): string[] {
+    // Remove border characters and split by │
+    const cleaned = line.replace(/^[│║]|[│║]$/g, '');
+    const cells = cleaned.split(/[│║]/);
+
+    return cells.map((cell) => cell.trim()).filter((cell) => cell.length > 0);
+  }
+
+  /**
+   * Parse a complete table from an array of lines.
+   *
+   * Groups consecutive table lines and extracts structured data.
+   *
+   * @param lines - Array of table lines
+   * @param startLine - Starting line number
+   * @returns Parsed table data
+   */
+  parseTable(lines: string[], startLine: number): ITableData {
+    const rows: ITableRow[] = [];
+    const dataRows: string[][] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const type = this.getRowType(line);
+      const cells = type === 'data' || type === 'header' ? this.extractCells(line) : undefined;
+
+      const row: ITableRow = {
+        raw: line,
+        type,
+        cells,
+        lineNumber: startLine + i,
+      };
+
+      rows.push(row);
+
+      if (cells) {
+        dataRows.push(cells);
+      }
+    }
+
+    // Determine column count from the widest row
+    const columnCount = Math.max(...dataRows.map((r) => r.length), 1);
+
+    // Extract headers if present (first data row that looks like headers)
+    const headerRow = rows.find((r) => r.type === 'header');
+    const headers = headerRow?.cells;
+
+    return {
+      rows,
+      columnCount,
+      headers,
+      dataRows,
+      startLine,
+      endLine: startLine + lines.length - 1,
+    };
+  }
+
+  /**
+   * Parse table entries from a log stream.
+   *
+   * Scans through lines, grouping table lines into entries.
+   *
+   * @param lines - Array of log lines
+   * @param startLine - Starting line number
+   * @returns Array of parsed log entries
+   */
+  parseTableEntries(lines: string[], startLine: number): IParsedLogEntry[] {
+    const entries: IParsedLogEntry[] = [];
+    let inTable = false;
+    let tableStartLine = 0;
+    const tableLines: string[] = [];
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const isTable = this.isTableLine(line);
+
+      if (isTable && !inTable) {
+        // Start of a new table
+        inTable = true;
+        tableStartLine = startLine + i;
+        tableLines.push(line);
+      } else if (isTable && inTable) {
+        // Continuation of table
+        tableLines.push(line);
+      } else if (!isTable && inTable) {
+        // End of table - create entry
+        const tableData = this.parseTable(tableLines, tableStartLine);
+
+        entries.push({
+          raw: tableLines.join('\n'),
+          formatted: tableLines.join('\n'),
+          level: 'info',
+          line_number: tableStartLine,
+          is_stderr: false,
+          content_type: 'table',
+          table_data: tableData,
+          is_continuation: false,
+        });
+
+        // Mark continuation lines
+        for (let j = 1; j < tableLines.length; j++) {
+          entries.push({
+            raw: tableLines[j],
+            formatted: tableLines[j],
+            level: 'info',
+            line_number: tableStartLine + j,
+            is_stderr: false,
+            content_type: 'table',
+            is_continuation: true,
+            parent_line_number: tableStartLine,
+          });
+        }
+
+        // Reset state
+        inTable = false;
+        tableLines.length = 0;
+
+        // Process current line as normal entry (will be handled by caller)
+        // Don't add non-table line here - let other parsers handle it
+      } else {
+        // Not a table line, not in table - skip (handled by other parsers)
+      }
+    }
+
+    // Handle table that ends at the end of the batch
+    if (tableLines.length > 0) {
+      const tableData = this.parseTable(tableLines, tableStartLine);
+
+      entries.push({
+        raw: tableLines.join('\n'),
+        formatted: tableLines.join('\n'),
+        level: 'info',
+        line_number: tableStartLine,
+        is_stderr: false,
+        content_type: 'table',
+        table_data: tableData,
+        is_continuation: false,
+      });
+
+      for (let j = 1; j < tableLines.length; j++) {
+        entries.push({
+          raw: tableLines[j],
+          formatted: tableLines[j],
+          level: 'info',
+          line_number: tableStartLine + j,
+          is_stderr: false,
+          content_type: 'table',
+          is_continuation: true,
+          parent_line_number: tableStartLine,
+        });
+      }
+    }
+
+    return entries;
+  }
+
+  /**
+   * Get CSS class for a table row type.
+   *
+   * @param type - Row type
+   * @returns CSS class string
+   */
+  getRowClass(type: TTableRowType): string {
+    switch (type) {
+      case 'top':
+      case 'bottom':
+        return 'text-gray-500';
+      case 'separator':
+        return 'text-gray-600';
+      case 'header':
+        return 'font-semibold text-foreground';
+      case 'data':
+        return 'text-foreground';
+      default:
+        return 'text-foreground';
+    }
+  }
+}
+
+/**
+ * Create a new table parser instance.
+ *
+ * @returns New TableParser instance
+ */
+export function createTableParser(): TableParser {
+  return new TableParser();
+}

package/src/react-ui/blocks/Terminal/parsing/ansi/AnsiColorMapper.ts

@@ -0,0 +1,251 @@
+/**
+ * ANSI color mapper for Synthwave theme integration.
+ *
+ * Maps ANSI color codes to Synthwave Industrial Dark theme colors
+ * from Terminal.theme.ts. Provides utilities for converting between
+ * different color representations and applying theme-aware coloring.
+ *
+ * @module components/devenv/terminal/parsing/ansi/mapper
+ */
+
+import { SYNTHWAVE_ANSI_COLORS } from './ansi.constants';
+import type { IAnsiStyle } from '../LogParser.types';
+
+/**
+ * ANSI color mapper class.
+ *
+ * Provides static methods for mapping ANSI color codes to
+ * Synthwave theme colors and converting between color formats.
+ */
+export class AnsiColorMapper {
+  /**
+   * Get hex color for ANSI foreground color code.
+   *
+   * Converts ANSI SGR foreground color codes (30-37, 90-97) to
+   * their corresponding hex colors in the Synthwave theme.
+   *
+   * @param code - ANSI color code (e.g., 31 for red, 32 for green)
+   * @returns Hex color string (e.g., '#ff4466') or undefined if unknown
+   *
+   * @example
+   * ```ts
+   * const red = AnsiColorMapper.fgColor(31); // '#ff4466'
+   * const green = AnsiColorMapper.fgColor(32); // '#44ffaa'
+   * ```
+   */
+  static fgColor(code: number): string | undefined {
+    return SYNTHWAVE_ANSI_COLORS[code];
+  }
+
+  /**
+   * Get hex color for ANSI background color code.
+   *
+   * Converts ANSI SGR background color codes (40-47, 100-107) to
+   * their corresponding hex colors by converting to foreground
+   * code and looking up in theme.
+   *
+   * @param code - ANSI background color code (e.g., 41 for red bg)
+   * @returns Hex color string or undefined if unknown
+   *
+   * @example
+   * ```ts
+   * const redBg = AnsiColorMapper.bgColor(41); // '#ff4466'
+   * ```
+   */
+  static bgColor(code: number): string | undefined {
+    // Convert background code (40-47, 100-107) to foreground (30-37, 90-97)
+    const fgCode = code >= 100 ? code - 10 : code - 10;
+    return SYNTHWAVE_ANSI_COLORS[fgCode];
+  }
+
+  /**
+   * Check if color code is bright variant.
+   *
+   * @param code - ANSI color code
+   * @returns true if code is bright (90-97 or 100-107)
+   */
+  static isBright(code: number): boolean {
+    return (code >= 90 && code <= 97) || (code >= 100 && code <= 107);
+  }
+
+  /**
+   * Check if color code is background color.
+   *
+   * @param code - ANSI color code
+   * @returns true if code is background (40-47 or 100-107)
+   */
+  static isBackground(code: number): boolean {
+    return (code >= 40 && code <= 47) || (code >= 100 && code <= 107);
+  }
+
+  /**
+   * Convert ANSI style to hex color pair.
+   *
+   * Takes a parsed ANSI style and returns foreground and background
+   * hex colors for use in xterm.js or CSS styling.
+   *
+   * @param style - Parsed ANSI style
+   * @returns Object with fg and bg hex colors (undefined if not set)
+   *
+   * @example
+   * ```ts
+   * const colors = AnsiColorMapper.styleToHex({
+   *   fg_color: 31,
+   *   bg_color: 44,
+   *   modifiers: ['bold']
+   * });
+   * // { fg: '#ff4466', bg: '#00d9ff' }
+   * ```
+   */
+  static styleToHex(style: IAnsiStyle): { fg?: string; bg?: string } {
+    const result: { fg?: string; bg?: string } = {};
+
+    if (style.fg_color !== undefined) {
+      result.fg = this.fgColor(style.fg_color);
+    }
+
+    if (style.bg_color !== undefined) {
+      result.bg = this.bgColor(style.bg_color);
+    }
+
+    return result;
+  }
+
+  /**
+   * Convert hex color to xterm.js color index.
+   *
+   * xterm.js uses a 256-color palette. This method maps Synthwave
+   * hex colors to the closest xterm.js color index.
+   *
+   * @param hex - Hex color string (e.g., '#ff4466')
+   * @returns xterm.js color index (0-255) or closest match
+   */
+  static hexToXtermColor(hex: string): number {
+    // Map Synthwave colors to xterm.js palette indices
+    const colorMap: Record<string, number> = {
+      '#1a1a2e': 0,    // Black
+      '#ff4466': 197,  // Red (closest)
+      '#44ffaa': 84,   // Green (closest)
+      '#ffcc00': 226,  // Yellow
+      '#00d9ff': 87,   // Cyan
+      '#D40C67': 198,  // Magenta (closest)
+      '#e8e8ec': 255,  // White
+      '#2d2d44': 8,    // Bright Black
+      '#ff6b6b': 203,  // Bright Red
+      '#66ffcc': 86,   // Bright Green
+      '#ffdd33': 227,  // Bright Yellow
+      '#33e0ff': 117,  // Bright Cyan
+      '#ff3399': 205,  // Bright Magenta
+      '#ffffff': 15,   // Bright White
+    };
+
+    // Normalize hex
+    const normalized = hex.toLowerCase();
+    return colorMap[normalized] ?? 7; // Default to white
+  }
+
+  /**
+   * Get log level color as hex.
+   *
+   * Returns the Synthwave theme color for a given log level.
+   *
+   * @param level - Log level
+   * @returns Hex color string for the log level
+   *
+   * @example
+   * ```ts
+   * const errorColor = AnsiColorMapper.logLevelColor('error'); // '#ff4466'
+   * const infoColor = AnsiColorMapper.logLevelColor('info'); // '#00d9ff'
+   * ```
+   */
+  static logLevelColor(level: string): string {
+    const levelColors: Record<string, string> = {
+      trace: '#8b9bb4',    // Gray (hsl(240, 10%, 50%))
+      debug: '#00d9ff',    // Cyan (hsl(190, 100%, 50%))
+      info: '#4db8ff',     // Blue (hsl(210, 100%, 60%))
+      warn: '#ffcc00',     // Yellow (hsl(45, 100%, 50%))
+      error: '#ff4466',    // Red (hsl(350, 100%, 63%))
+      fatal: '#D40C67',    // Magenta (hsl(330, 85%, 43%))
+      unknown: '#e8e8ec',  // White
+    };
+
+    return levelColors[level] ?? levelColors.unknown;
+  }
+
+  /**
+   * Get log level background color (semi-transparent).
+   *
+   * Returns the background color for log level badges with
+   * transparency for overlay effects.
+   *
+   * @param level - Log level
+   * @returns RGBA color string for background
+   *
+   * @example
+   * ```ts
+   * const errorBg = AnsiColorMapper.logLevelBgColor('error'); // 'rgba(255, 68, 102, 0.1)'
+   * ```
+   */
+  static logLevelBgColor(level: string): string {
+    const hex = this.logLevelColor(level);
+    // Convert hex to rgba with 10% opacity
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, 0.1)`;
+  }
+
+  /**
+   * Create xterm.js color sequence from hex.
+   *
+   * Generates xterm.js escape sequence for setting text color
+   * from a hex color value.
+   *
+   * @param hex - Hex color string
+   * @param isBackground - true for background color, false for foreground
+   * @returns xterm.js escape sequence
+   *
+   * @example
+   * ```ts
+   * const seq = AnsiColorMapper.xtermColorSequence('#ff4466', false);
+   * // '\x1b]4;196;#ff4466\x07' (OSC 4 sequence for true color)
+   * ```
+   */
+  static xtermColorSequence(hex: string, isBackground = false): string {
+    const prefix = isBackground ? '4' : '10';
+    return `\x1b]${prefix};#${hex.slice(1)}\x07`;
+  }
+
+  /**
+   * Convert RGB values to hex color.
+   *
+   * @param r - Red value (0-255)
+   * @param g - Green value (0-255)
+   * @param b - Blue value (0-255)
+   * @returns Hex color string (e.g., '#ff4466')
+   */
+  static rgbToHex(r: number, g: number, b: number): string {
+    const toHex = (n: number): string => {
+      const hex = Math.round(Math.min(255, Math.max(0, n))).toString(16);
+      return hex.length === 1 ? '0' + hex : hex;
+    };
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  /**
+   * Convert hex color to RGB values.
+   *
+   * @param hex - Hex color string
+   * @returns Object with r, g, b values (0-255)
+   */
+  static hexToRgb(hex: string): { r: number; g: number; b: number } {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+      ? {
+          r: parseInt(result[1], 16),
+          g: parseInt(result[2], 16),
+          b: parseInt(result[3], 16),
+        }
+      : { r: 255, g: 255, b: 255 };
+  }
+}