@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,180 +0,0 @@
-/**
- * Badge formatter for terminal logs.
- *
- * Creates stylized badges using standard ANSI escape codes
- * compatible with xterm.js.
- *
- * @module components/devenv/terminal/parsing/badge
- */
-
-import type { TLogLevel } from './LogParser.types';
-
-/**
- * ANSI color combinations for badges.
- *
- * Uses standard 16-color palette for maximum compatibility.
- */
-const BADGE_COLORS = {
-  info: '\x1b[44m\x1b[97m',      // Blue bg, bright white fg
-  warn: '\x1b[43m\x1b[30m',      // Yellow bg, black fg
-  error: '\x1b[41m\x1b[97m',     // Red bg, bright white fg
-  debug: '\x1b[46m\x1b[30m',     // Cyan bg, black fg
-  fatal: '\x1b[45m\x1b[97m',     // Magenta bg, bright white fg
-  trace: '\x1b[47m\x1b[30m',     // White bg, black fg
-  unknown: '\x1b[47m\x1b[30m',   // White bg, black fg
-} as const;
-
-/**
- * Tag badge colors (cyan on gray).
- */
-const TAG_COLORS = '\x1b[90m\x1b[36m'; // Dim bg, cyan fg
-
-/**
- * Timestamp colors (gray).
- */
-const TIMESTAMP_COLORS = '\x1b[90m\x1b[37m'; // Dim bg, white fg
-
-/**
- * Reset code.
- */
-const RESET = '\x1b[0m';
-
-/**
- * Bold modifier.
- */
-const BOLD = '\x1b[1m';
-
-/**
- * Level badge icons.
- */
-const LEVEL_ICONS: Record<TLogLevel, string> = {
-  info: 'I',
-  warn: 'W',
-  error: 'E',
-  fatal: 'F',
-  debug: 'D',
-  trace: 'T',
-  unknown: '?',
-};
-
-/**
- * Badge formatter class.
- *
- * Creates simple ANSI badges for log levels, tags, and timestamps.
- *
- * @example
- * ```ts
- * const formatter = new BadgeFormatter();
- * const infoBadge = formatter.createLevelBadge('info');
- * // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
- * ```
- */
-export class BadgeFormatter {
-  /**
-   * Create a level badge.
-   *
-   * Badge format: [ INFO ] with background color
-   *
-   * @param level - Log level
-   * @returns ANSI-formatted level badge string
-   */
-  createLevelBadge(level: TLogLevel): string {
-    const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
-    const icon = LEVEL_ICONS[level] ?? LEVEL_ICONS.unknown;
-    const label = level.toUpperCase().padEnd(4); // "INFO", "WARN", etc.
-
-    // Badge: [INFO] with background color
-    return `${BOLD}${colors}[${icon}${label}]${RESET}`;
-  }
-
-  /**
-   * Create a timestamp badge for end of line.
-   *
-   * Badge format: " 22:55:20" aligned to right
-   *
-   * @param timestamp - Display timestamp string
-   * @returns ANSI-formatted timestamp string
-   */
-  createTimestampBadge(timestamp: string): string {
-    if (!timestamp) return '';
-
-    // Truncate to HH:MM:SS format for consistent width
-    const timeOnly = timestamp.includes('.')
-      ? timestamp.split('.')[0] // 22:55:20.916 -> 22:55:20
-      : timestamp;
-
-    // Pad to 12 chars for right alignment visual
-    const padded = timeOnly.padStart(12);
-
-    return `${TIMESTAMP_COLORS}${padded}${RESET}`;
-  }
-
-  /**
-   * Create a tag badge.
-   *
-   * Badge format: [TAG] with subtle styling
-   *
-   * @param tag - Tag string
-   * @returns ANSI-formatted tag badge string
-   */
-  createTagBadge(tag: string): string {
-    // Truncate long tags
-    const displayTag = tag.length > 12 ? tag.slice(0, 9) + '...' : tag;
-
-    return `${TAG_COLORS}[${displayTag}]${RESET}`;
-  }
-
-  /**
-   * Create multiple tag badges joined with space.
-   *
-   * @param tags - Array of tag strings
-   * @returns ANSI-formatted tag badges string
-   */
-  createTagBadges(tags: string[]): string {
-    if (!tags || tags.length === 0) return '';
-    return tags.map(tag => this.createTagBadge(tag)).join('');
-  }
-
-  /**
-   * Create a status indicator.
-   *
-   * @param status - Status type
-   * @returns ANSI-formatted status indicator
-   */
-  createStatusIndicator(status: 'success' | 'warning' | 'error' | 'info'): string {
-    const colors = {
-      success: '\x1b[42m\x1b[97m', // Green
-      warning: '\x1b[43m\x1b[30m', // Yellow
-      error: '\x1b[41m\x1b[97m',   // Red
-      info: '\x1b[44m\x1b[97m',    // Blue
-    } as const;
-
-    const symbols = {
-      success: '✓',
-      warning: '⚠',
-      error: '✖',
-      info: 'i',
-    } as const;
-
-    return `${colors[status]} ${symbols[status]} ${RESET}`;
-  }
-
-  /**
-   * Create a box badge (multi-line).
-   *
-   * @param text - Text to display
-   * @param level - Log level for color
-   * @returns Multi-line ANSI box
-   */
-  createBoxBadge(text: string, level: TLogLevel = 'info'): string {
-    const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
-    const padding = 2;
-    const width = text.length + padding * 2 + 2;
-
-    const topBorder = `\x1b[90m┌${'─'.repeat(width)}┐${RESET}`;
-    const middle = `${colors}│${' '.repeat(padding)}${text}${' '.repeat(padding)}│${RESET}`;
-    const bottomBorder = `\x1b[90m└${'─'.repeat(width)}┘${RESET}`;
-
-    return `${topBorder}\r\n${middle}\r\n${bottomBorder}`;
-  }
-}

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

@@ -1,248 +0,0 @@
-/**
- * HTTP log parser for specialized HTTP request detection.
- *
- * Detects and parses HTTP request logs with syntax highlighting
- * for methods (GET, POST, etc.), routes, and parameters.
- *
- * @module components/devenv/terminal/parsing/HttpLogParser
- */
-
-import type { IParsedLogEntry } from './LogParser.types';
-
-/**
- * HTTP method enumeration.
- */
-export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
-
-/**
- * Parsed HTTP request data.
- */
-export interface IHttpParsedData {
-  /** HTTP method */
-  method: THttpMethod;
-
-  /** Request path/route */
-  path: string;
-
-  /** Query parameters extracted from path */
-  params?: Record<string, string>;
-
-  /** Whether request opens a multiline block (has brace) */
-  opensMultiline: boolean;
-}
-
-/**
- * HTTP log parser class.
- *
- * Detects HTTP requests in log lines and extracts structured data.
- * Supports various log formats:
- *
- * - `GET /api/endpoint`
- * - `GET /api/endpoint/:param {`
- * - `POST /api/users HTTP/1.1`
- *
- * @example
- * ```ts
- * const parser = new HttpLogParser();
- * const parsed = parser.parseLine('GET /api/logs/containers/:name/stream {');
- * // parsed.method = 'GET'
- * // parsed.path = '/api/logs/containers/:name/stream'
- * // parsed.opensMultiline = true
- * ```
- */
-export class HttpLogParser {
-  /** HTTP method pattern */
-  private readonly HTTP_PATTERN = /^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\s+(.+?)(?:\s+(\{))?$/i;
-
-  /** URL path with parameters pattern */
-  private readonly PATH_PARAM_PATTERN = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
-
-  /**
-   * Parse a log line for HTTP request data.
-   *
-   * @param line - Log line to parse
-   * @returns Parsed HTTP data or null if not an HTTP line
-   */
-  parseLine(line: string): IHttpParsedData | null {
-    const match = line.match(this.HTTP_PATTERN);
-    if (!match) return null;
-
-    const [, method, path, hasBrace] = match;
-
-    return {
-      method: method.toUpperCase() as THttpMethod,
-      path: path.trim(),
-      params: this.extractPathParams(path),
-      opensMultiline: hasBrace === '{',
-    };
-  }
-
-  /**
-   * Check if a line is an HTTP request line.
-   *
-   * @param line - Line to check
-   * @returns true if line is an HTTP request
-   */
-  isHttpLine(line: string): boolean {
-    return this.HTTP_PATTERN.test(line);
-  }
-
-  /**
-   * Extract path parameters from a route path.
-   *
-   * @param path - Route path (e.g., `/api/users/:id`)
-   * @returns Object with parameter names
-   */
-  extractPathParams(path: string): Record<string, string> | undefined {
-    const matches = path.matchAll(this.PATH_PARAM_PATTERN);
-    const params: Record<string, string> = {};
-
-    for (const match of matches) {
-      params[match[1]] = `:${match[1]}`;
-    }
-
-    return Object.keys(params).length > 0 ? params : undefined;
-  }
-
-  /**
-   * Format HTTP method with syntax highlighting class.
-   *
-   * @param _method - HTTP method
-   * @returns CSS class for highlighting
-   */
-  getMethodClass(_method: THttpMethod): string {
-    // All methods get the same pink color
-    return 'text-pink-400 font-semibold';
-  }
-
-  /**
-   * Format path with syntax highlighting.
-   *
-   * @param path - Request path
-   * @returns CSS class for path highlighting
-   */
-  getPathClass(): string {
-    return 'text-cyan-400';
-  }
-
-  /**
-   * Highlight an HTTP request line.
-   *
-   * Returns an array of parts with their associated CSS classes.
-   *
-   * @param line - HTTP request line
-   * @returns Array of {text, className} parts
-   */
-  highlightLine(line: string): Array<{ text: string; className?: string }> {
-    const parts: Array<{ text: string; className?: string }> = [];
-
-    const match = line.match(this.HTTP_PATTERN);
-    if (!match) {
-      return [{ text: line }];
-    }
-
-    const [fullMatch, method, path, hasBrace] = match;
-    const beforeMethod = line.indexOf(fullMatch);
-
-    // Text before the HTTP request (timestamp, level, etc)
-    if (beforeMethod > 0) {
-      parts.push({ text: line.slice(0, beforeMethod) });
-    }
-
-    // HTTP method
-    parts.push({
-      text: method.toUpperCase(),
-      className: this.getMethodClass(method as THttpMethod),
-    });
-
-    // Space after method
-    parts.push({ text: ' ' });
-
-    // Path - highlight segments
-    const pathParts = this.highlightPath(path.trim());
-    parts.push(...pathParts);
-
-    // Opening brace if present
-    if (hasBrace) {
-      parts.push({
-        text: ' {',
-        className: 'text-yellow-500',
-      });
-    }
-
-    return parts;
-  }
-
-  /**
-   * Highlight path segments (routes and parameters).
-   *
-   * @param path - Path string
-   * @returns Highlighted parts
-   * @private
-   */
-  private highlightPath(path: string): Array<{ text: string; className?: string }> {
-    const parts: Array<{ text: string; className?: string }> = [];
-    let remaining = path;
-
-    while (remaining.length > 0) {
-      // Find next path parameter
-      const paramMatch = remaining.match(/^\/?:([a-zA-Z_][a-zA-Z0-9_]*)/);
-
-      if (paramMatch) {
-        // Text before parameter (path segments)
-        const beforeParam = remaining.slice(0, paramMatch.index);
-        if (beforeParam.length > 0) {
-          parts.push({ text: beforeParam, className: this.getPathClass() });
-        }
-
-        // Parameter
-        parts.push({
-          text: paramMatch[0],
-          className: 'text-purple-400 bg-purple-500/10 px-0.5 rounded',
-        });
-
-        remaining = remaining.slice(paramMatch[0].length);
-      } else {
-        // No more parameters, add remaining text
-        parts.push({ text: remaining, className: this.getPathClass() });
-        break;
-      }
-    }
-
-    return parts;
-  }
-
-  /**
-   * Parse a multiline HTTP request block.
-   *
-   * Combines the initial request line with continuation lines
-   * that form JSON or structured data.
-   *
-   * @param lines - Array of log lines
-   * @returns Parsed entry with HTTP data
-   */
-  parseHttpBlock(lines: string[]): IParsedLogEntry | null {
-    if (lines.length === 0) return null;
-
-    const firstLine = lines[0];
-    const httpData = this.parseLine(firstLine);
-
-    if (!httpData) return null;
-
-    // Combine all lines into the raw text
-    const raw = lines.join('\n');
-
-    return {
-      raw,
-      formatted: raw,
-      level: 'info',
-      line_number: 0, // Set by caller
-      is_stderr: false,
-      message: firstLine,
-      content_type: 'http',
-      http_method: httpData.method,
-      http_path: httpData.path,
-      is_continuation: false,
-    };
-  }
-}

package/src/react-ui/blocks/Terminal/parsing/LogParser.types.ts

@@ -1,283 +0,0 @@
-/**
- * Log parser types for terminal log processing.
- *
- * Provides interfaces and types for parsing raw log strings into
- * structured, formatted output with ANSI colorization, log level detection,
- * timestamp extraction, and structured data handling.
- *
- * @module components/devenv/terminal/parsing/types
- */
-
-/**
- * Log level enumeration matching common logging frameworks.
- *
- * Ordered from least to most severe for filtering operations.
- * Maps to Synthwave design system colors:
- * - trace: gray (hsl(240, 10%, 50%))
- * - debug: cyan (hsl(190, 100%, 50%))
- * - info: blue (hsl(210, 100%, 60%))
- * - warn: yellow (hsl(45, 100%, 50%))
- * - error: red (hsl(350, 100%, 63%))
- * - fatal: magenta (hsl(330, 85%, 43%))
- */
-export type TLogLevel =
-  | 'trace'
-  | 'debug'
-  | 'info'
-  | 'warn'
-  | 'error'
-  | 'fatal'
-  | 'unknown';
-
-/**
- * Content type for specialized syntax highlighting.
- */
-export type TContentType = 'plain' | 'http' | 'json' | 'table' | 'error';
-
-/**
- * Filter type for log level filtering.
- *
- * Extends TLogLevel to include 'all' for showing all logs.
- */
-export type TLogLevelFilter = TLogLevel | 'all';
-
-/**
- * Parsed log entry representing a single line from a log stream.
- *
- * Contains the original raw text along with parsed metadata including
- * formatted text with ANSI codes, detected log level, timestamp, and
- * any structured data extracted from JSON logs.
- */
-export interface IParsedLogEntry {
-  /** Original raw text from log stream */
-  raw: string;
-
-  /** Parsed and formatted text with ANSI escape codes for xterm.js */
-  formatted: string;
-
-  /** Detected log level based on pattern matching */
-  level: TLogLevel;
-
-  /** ISO 8601 timestamp if present in the log line */
-  timestamp?: string;
-
-  /** Display-formatted timestamp (time, date, or relative) */
-  timestamp_display?: string;
-
-  /** Line number in the stream (1-indexed) */
-  line_number: number;
-
-  /** Whether this line is from stderr (vs stdout) */
-  is_stderr: boolean;
-
-  /** Structured data if log line contains valid JSON */
-  structured?: Record<string, unknown>;
-
-  /** Detected components/tags (e.g., ⦗COMPONENT⦘ ⦗LOGSROUTES⦘) */
-  tags?: string[];
-
-  /** Message content after removing metadata */
-  message?: string;
-
-  /** Whether this line is a continuation of a multiline JSON/structured entry */
-  is_continuation?: boolean;
-
-  /** Line number of parent entry if this is a continuation line */
-  parent_line_number?: number;
-
-  /** Content type for specialized syntax highlighting */
-  content_type?: TContentType;
-
-  /** HTTP method if this is an HTTP request line */
-  http_method?: string;
-
-  /** HTTP path if this is an HTTP request line */
-  http_path?: string;
-
-  /** Table data if this is part of a table */
-  table_data?: unknown;
-}
-
-/**
- * Parser state for incremental parsing of streaming logs.
- *
- * Maintains buffer and context between chunks for proper
- * multiline log aggregation.
- */
-export interface IParserState {
-  /** Incomplete multiline log buffer */
-  buffer: string;
-
-  /** Current line number (continues across chunks) */
-  line_number: number;
-
-  /** Last detected level (for multiline continuation) */
-  last_level: TLogLevel;
-
-  /** Last detected timestamp (for multiline continuation) */
-  last_timestamp?: string;
-
-  /** Multiline aggregation state (persists across chunks) */
-  multiline_state?: {
-    /** Whether currently in multiline mode */
-    isMultiline: boolean;
-    /** Parent entry for continuation lines */
-    parentEntry?: {
-      line_number: number;
-      level: TLogLevel;
-    };
-    /** Current depth of nested braces/brackets */
-    depth: number;
-    /** Expected closing character */
-    expectedClose?: '}' | ']';
-  };
-}
-
-/**
- * ANSI style information extracted from escape codes.
- *
- * Represents parsed ANSI SGR (Select Graphic Rendition) sequences
- * for color and text styling.
- */
-export interface IAnsiStyle {
-  /** Foreground color code (30-37, 90-97) or undefined */
-  fg_color?: number;
-
-  /** Background color code (40-47, 100-107) or undefined */
-  bg_color?: number;
-
-  /** Text modifiers: bold, dim, italic, underline, blink, inverse, hidden */
-  modifiers: string[];
-
-  /** Index in the styles array (for tracking order) */
-  index?: number;
-}
-
-/**
- * ANSI parse result with converted text and extracted styles.
- *
- * Result of parsing ANSI escape codes from a text string.
- */
-export interface IAnsiParseResult {
-  /** Text with ANSI codes converted to xterm.js format */
-  text: string;
-
-  /** Detected styles (for potential CSS mapping) */
-  styles: IAnsiStyle[];
-}
-
-/**
- * Log level detection result with confidence scoring.
- *
- * Provides the detected level along with metadata about
- * the match for filtering and display purposes.
- */
-export interface ILogLevelDetection {
-  /** Detected log level */
-  level: TLogLevel;
-
-  /** Confidence score (0-1, higher = more certain) */
-  confidence: number;
-
-  /** Matched string that triggered the detection */
-  matched: string;
-
-  /** Position of match in the string (0-indexed) */
-  position: number;
-}
-
-/**
- * Log parser options for customization.
- *
- * Configuration options for the LogParserService to customize
- * parsing behavior for different log formats.
- */
-export interface ILogParserOptions {
-  /** Enable ANSI escape code parsing (default: true) */
-  enable_ansi?: boolean;
-
-  /** Timestamp format for display (default: 'time') */
-  timestamp_format?: 'full' | 'time' | 'relative' | 'none';
-
-  /** Custom log level pattern overrides */
-  level_patterns?: Partial<Record<TLogLevel, RegExp>>;
-
-  /** Whether to detect and parse JSON structured logs (default: true) */
-  enable_structured?: boolean;
-
-  /** Whether to extract tags from log lines (default: true) */
-  enable_tags?: boolean;
-
-  /** Maximum line length before truncation (default: 10000) */
-  max_line_length?: number;
-}
-
-/**
- * Log filter options for filtering parsed entries.
- *
- * Options for filtering log entries by level, time range, or content.
- */
-export interface ILogFilterOptions {
-  /** Minimum log level to include (trace is most permissive) */
-  min_level?: TLogLevel;
-
-  /** Only include logs after this timestamp (ISO string) */
-  after?: string;
-
-  /** Only include logs before this timestamp (ISO string) */
-  before?: string;
-
-  /** Only include logs matching this regex pattern */
-  pattern?: RegExp;
-
-  /** Only include logs from stderr (if true) or stdout (if false) */
-  stderr_only?: boolean;
-
-  /** Only include logs containing specific tags */
-  tags?: string[];
-}
-
-/**
- * Timestamp format options for display.
- */
-export type TTimestampFormat = 'full' | 'time' | 'relative' | 'none';
-
-/**
- * Log statistics for a collection of entries.
- *
- * Aggregate statistics about log entries for display in
- * status bars and footers.
- */
-export interface ILogStats {
-  /** Total number of log entries */
-  total: number;
-
-  /** Count per log level */
-  by_level: Partial<Record<TLogLevel, number>>;
-
-  /** Total bytes (raw text size) */
-  bytes: number;
-
-  /** Earliest timestamp (ISO string) */
-  earliest?: string;
-
-  /** Latest timestamp (ISO string) */
-  latest?: string;
-}
-
-/**
- * Log export options for downloading logs.
- */
-export interface ILogExportOptions {
-  /** Format for export */
-  format: 'raw' | 'json' | 'csv';
-
-  /** Whether to include ANSI codes in raw export */
-  include_ansi?: boolean;
-
-  /** Filter options to apply before export */
-  filter?: ILogFilterOptions;
-
-  /** Filename for download (without extension) */
-  filename?: string;
-}