@mks2508/mks-ui 0.3.2 → 0.4.0

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

@@ -0,0 +1,343 @@
+/**
+ * Persistent circular buffer for log entries with periodic cleanup.
+ *
+ * Maintains a large history of logs without memory leaks by using
+ * a circular buffer with periodic cleanup. Supports pagination,
+ * search, and efficient querying.
+ *
+ * @module components/devenv/terminal/parsing/PersistentLogBuffer
+ */
+
+import type { IParsedLogEntry } from './LogParser.types';
+
+/**
+ * Configuration for the persistent log buffer.
+ */
+export interface IPersistentLogBufferConfig {
+  /** Maximum number of entries to store (default: 50,000) */
+  maxSize: number;
+
+  /** Soft limit that triggers cleanup (default: 40,000) */
+  softLimit: number;
+
+  /** Number of entries to remove per cleanup batch (default: 5,000) */
+  cleanupBatch: number;
+
+  /** Cleanup interval in milliseconds (default: 30,000 ms = 30s) */
+  cleanupInterval: number;
+}
+
+/**
+ * Buffer statistics for monitoring.
+ */
+export interface IBufferStats {
+  /** Current number of entries */
+  size: number;
+
+  /** Maximum configured size */
+  maxSize: number;
+
+  /** Usage ratio (0-1) */
+  usage: number;
+
+  /** First line number in buffer */
+  firstLine: number | undefined;
+
+  /** Last line number in buffer */
+  lastLine: number | undefined;
+
+  /** Memory usage estimate (bytes) */
+  memoryUsage: number;
+}
+
+/**
+ * Search options for querying the buffer.
+ */
+export interface ISearchOptions {
+  /** Start from line number */
+  fromLine?: number;
+
+  /** Maximum results to return */
+  limit?: number;
+
+  /** Case insensitive search */
+  caseInsensitive?: boolean;
+}
+
+/**
+ * Persistent circular buffer for log entries.
+ *
+ * Features:
+ * - Circular buffer with automatic cleanup
+ * - Pagination support for large datasets
+ * - Search by pattern
+ * - Memory-efficient storage
+ * - Periodic cleanup to prevent memory leaks
+ *
+ * @example
+ * ```ts
+ * const buffer = new PersistentLogBuffer({ maxSize: 50000 });
+ * buffer.append(entries);
+ * const page1 = buffer.getEntries({ offset: 0, limit: 100 });
+ * const results = buffer.search(/error/i);
+ * ```
+ */
+export class PersistentLogBuffer {
+  /** Internal storage for entries */
+  private buffer: IParsedLogEntry[] = [];
+
+  /** Buffer configuration */
+  private config: IPersistentLogBufferConfig;
+
+  /** Cleanup timer reference */
+  private cleanupTimer?: ReturnType<typeof setTimeout>;
+
+  /** Cleanup scheduled flag */
+  private cleanupScheduled = false;
+
+  /**
+   * Create a new persistent log buffer.
+   *
+   * @param config - Buffer configuration
+   */
+  constructor(config: Partial<IPersistentLogBufferConfig> = {}) {
+    this.config = {
+      maxSize: 50000,
+      softLimit: 40000,
+      cleanupBatch: 5000,
+      cleanupInterval: 30000,
+      ...config,
+    };
+    this.startCleanupTimer();
+  }
+
+  /**
+   * Append entries to the buffer.
+   *
+   * If the buffer exceeds the soft limit, schedules a cleanup.
+   *
+   * @param entries - Entries to append
+   */
+  append(entries: IParsedLogEntry[]): void {
+    if (entries.length === 0) return;
+
+    this.buffer.push(...entries);
+
+    if (this.buffer.length > this.config.softLimit && !this.cleanupScheduled) {
+      this.scheduleCleanup();
+    }
+  }
+
+  /**
+   * Prepend entries to the buffer (for loading historical logs).
+   *
+   * @param entries - Entries to prepend
+   */
+  prepend(entries: IParsedLogEntry[]): void {
+    if (entries.length === 0) return;
+
+    this.buffer = [...entries, ...this.buffer];
+
+    if (this.buffer.length > this.config.maxSize) {
+      // Trim from the end to stay within max size
+      this.buffer = this.buffer.slice(0, this.config.maxSize);
+    }
+  }
+
+  /**
+   * Get entries from the buffer with pagination.
+   *
+   * @param options - Query options
+   * @returns Array of entries
+   */
+  getEntries(options: {
+    offset?: number;
+    limit?: number;
+    fromLine?: number;
+    toLine?: number;
+  } = {}): IParsedLogEntry[] {
+    let { offset = 0, limit, fromLine, toLine } = options;
+
+    let start = offset;
+    let end: number | undefined;
+
+    if (fromLine !== undefined) {
+      start = this.buffer.findIndex((e) => e.line_number >= fromLine);
+      if (start === -1) start = this.buffer.length;
+    }
+
+    if (toLine !== undefined) {
+      end = this.buffer.findIndex((e) => e.line_number > toLine);
+      if (end === -1) end = this.buffer.length;
+    }
+
+    if (limit !== undefined && end === undefined) {
+      end = start + limit;
+    }
+
+    return this.buffer.slice(start, end);
+  }
+
+  /**
+   * Get all entries in the buffer.
+   *
+   * @returns All entries
+   */
+  getAllEntries(): IParsedLogEntry[] {
+    return this.buffer;
+  }
+
+  /**
+   * Get the total number of entries.
+   *
+   * @returns Entry count
+   */
+  getSize(): number {
+    return this.buffer.length;
+  }
+
+  /**
+   * Search entries by pattern.
+   *
+   * @param pattern - RegExp pattern or string to search
+   * @param options - Search options
+   * @returns Matching entries
+   */
+  search(pattern: RegExp | string, options: ISearchOptions = {}): IParsedLogEntry[] {
+    const { fromLine, limit = 100, caseInsensitive = true } = options;
+
+    const regex = typeof pattern === 'string'
+      ? new RegExp(pattern, caseInsensitive ? 'i' : undefined)
+      : pattern;
+
+    const results: IParsedLogEntry[] = [];
+    const start = fromLine !== undefined
+      ? this.buffer.findIndex((e) => e.line_number >= fromLine)
+      : 0;
+
+    for (let i = start; i < this.buffer.length && results.length < limit; i++) {
+      const entry = this.buffer[i];
+      if (regex.test(entry.raw) || regex.test(entry.message ?? '')) {
+        results.push(entry);
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * Find entries by line number.
+   *
+   * @param lineNumbers - Array of line numbers to find
+   * @returns Matching entries
+   */
+  findByLineNumbers(lineNumbers: number[]): IParsedLogEntry[] {
+    const lineSet = new Set(lineNumbers);
+    return this.buffer.filter((e) => lineSet.has(e.line_number));
+  }
+
+  /**
+   * Get entries filtered by log level.
+   *
+   * @param level - Log level to filter by
+   * @returns Filtered entries
+   */
+  getByLevel(level: string): IParsedLogEntry[] {
+    return this.buffer.filter((e) => e.level === level);
+  }
+
+  /**
+   * Clear all entries from the buffer.
+   */
+  clear(): void {
+    this.buffer = [];
+    this.cleanupScheduled = false;
+  }
+
+  /**
+   * Get buffer statistics.
+   *
+   * @returns Buffer statistics
+   */
+  getStats(): IBufferStats {
+    const size = this.buffer.length;
+    let memoryUsage = 0;
+
+    for (const entry of this.buffer) {
+      memoryUsage += entry.raw.length * 2; // UTF-16 = 2 bytes per char
+      if (entry.message) memoryUsage += entry.message.length * 2;
+      if (entry.formatted) memoryUsage += entry.formatted.length * 2;
+    }
+
+    return {
+      size,
+      maxSize: this.config.maxSize,
+      usage: size / this.config.maxSize,
+      firstLine: this.buffer[0]?.line_number,
+      lastLine: this.buffer[size - 1]?.line_number,
+      memoryUsage,
+    };
+  }
+
+  /**
+   * Schedule a cleanup operation.
+   */
+  private scheduleCleanup(): void {
+    if (this.cleanupScheduled) return;
+
+    this.cleanupScheduled = true;
+    // Use setTimeout to defer cleanup
+    setTimeout(() => this.cleanup(), 0);
+  }
+
+  /**
+   * Perform cleanup of old entries.
+   *
+   * Removes the oldest entries to keep the buffer within limits.
+   */
+  private cleanup(): void {
+    if (this.buffer.length <= this.config.softLimit) {
+      this.cleanupScheduled = false;
+      return;
+    }
+
+    // Remove oldest entries
+    const toRemove = Math.min(
+      this.buffer.length - this.config.softLimit,
+      this.config.cleanupBatch
+    );
+
+    this.buffer = this.buffer.slice(toRemove);
+    this.cleanupScheduled = false;
+  }
+
+  /**
+   * Start the periodic cleanup timer.
+   */
+  private startCleanupTimer(): void {
+    this.cleanupTimer = setInterval(() => {
+      this.cleanup();
+    }, this.config.cleanupInterval);
+  }
+
+  /**
+   * Stop the cleanup timer and clear resources.
+   */
+  destroy(): void {
+    if (this.cleanupTimer) {
+      clearInterval(this.cleanupTimer);
+      this.cleanupTimer = undefined;
+    }
+    this.clear();
+  }
+}
+
+/**
+ * Create a new persistent log buffer with default configuration.
+ *
+ * @param config - Optional configuration overrides
+ * @returns New buffer instance
+ */
+export function createPersistentLogBuffer(config?: Partial<IPersistentLogBufferConfig>): PersistentLogBuffer {
+  return new PersistentLogBuffer(config);
+}

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

@@ -0,0 +1,167 @@
+/**
+ * Syntax highlighter for log messages.
+ *
+ * Applies color highlighting to specific elements within log messages.
+ * Uses standard ANSI SGR codes compatible with xterm.js.
+ *
+ * IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
+ * to prevent mixing codes and creating visual artifacts.
+ *
+ * @module components/devenv/terminal/parsing/syntax
+ */
+
+/**
+ * ANSI color codes for syntax highlighting.
+ *
+ * Uses standard SGR (Select Graphic Rendition) codes for compatibility.
+ */
+const SYNTAX_COLORS = {
+  /** HTTP methods (GET, POST, PUT, DELETE) - Magenta */
+  httpMethod: '\x1b[35m',
+  /** Paths/URLs (/api/workspaces) - Cyan */
+  path: '\x1b[36m',
+  /** Braces and brackets ({ } [ ]) - Yellow */
+  brace: '\x1b[33m',
+  /** Property keys (filter:, name:) - Green */
+  key: '\x1b[32m',
+  /** String values - Bright green */
+  string: '\x1b[92m',
+  /** Numeric values - Bright yellow */
+  number: '\x1b[93m',
+  /** Boolean values - Blue */
+  boolean: '\x1b[34m',
+  /** Null/undefined - Gray */
+  nullish: '\x1b[90m',
+  /** Reset code */
+  reset: '\x1b[0m',
+} as const;
+
+/**
+ * HTTP method patterns.
+ */
+const HTTP_METHODS = ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'CONNECT', 'TRACE'] as const;
+
+/**
+ * Pattern to detect existing ANSI escape codes.
+ */
+const ANSI_PATTERN = /\x1b\[[0-9;]*m/g;
+
+/**
+ * Check if text contains ANSI escape codes.
+ */
+function hasAnsiCodes(text: string): boolean {
+  return ANSI_PATTERN.test(text);
+}
+
+/**
+ * Syntax highlighter class.
+ *
+ * Applies syntax highlighting to plain text messages.
+ * Skips messages that already contain ANSI codes to prevent
+ * visual artifacts from mixed escape sequences.
+ *
+ * @example
+ * ```ts
+ * const highlighter = new SyntaxHighlighter();
+ * const highlighted = highlighter.highlight('GET /api/workspaces { filter: {} }');
+ * ```
+ */
+export class SyntaxHighlighter {
+  /**
+   * Apply syntax highlighting to a message.
+   *
+   * Only processes plain text - messages with existing ANSI codes
+   * are returned unchanged to prevent visual artifacts.
+   *
+   * @param message - Message to highlight
+   * @returns Message with ANSI color codes applied, or original if already colored
+   */
+  highlight(message: string): string {
+    if (!message || message.length === 0) {
+      return message;
+    }
+
+    // Skip if already has ANSI codes - prevents mixing codes
+    if (hasAnsiCodes(message)) {
+      return message;
+    }
+
+    let result = message;
+
+    // Apply highlighting in order (most specific first)
+    result = this.highlightStrings(result);
+    result = this.highlightNumbers(result);
+    result = this.highlightBooleans(result);
+    result = this.highlightNullish(result);
+    result = this.highlightKeys(result);
+    result = this.highlightPaths(result);
+    result = this.highlightHttpMethods(result);
+    result = this.highlightBraces(result);
+
+    return result;
+  }
+
+  /**
+   * Highlight HTTP methods.
+   */
+  private highlightHttpMethods(text: string): string {
+    const methodPattern = new RegExp(`\\b(${HTTP_METHODS.join('|')})\\b`, 'g');
+    return text.replace(methodPattern, `${SYNTAX_COLORS.httpMethod}$1${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight URL paths.
+   */
+  private highlightPaths(text: string): string {
+    const pathPattern = /(^|[\s(])\/[a-zA-Z0-9_/-]+/g;
+    return text.replace(pathPattern, `$1${SYNTAX_COLORS.path}$2${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight braces and brackets.
+   */
+  private highlightBraces(text: string): string {
+    return text.replace(/([{}[\]])/g, `${SYNTAX_COLORS.brace}$1${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight property keys.
+   */
+  private highlightKeys(text: string): string {
+    // Match keys before colons, but not within URLs like https://
+    const keyPattern = /(^|[\s])([a-zA-Z_][a-zA-Z0-9_]*)(\s*:)/g;
+    return text.replace(keyPattern, `$1${SYNTAX_COLORS.key}$2${SYNTAX_COLORS.reset}$3`);
+  }
+
+  /**
+   * Highlight string values.
+   */
+  private highlightStrings(text: string): string {
+    const stringPattern = /([:=,]\s*)(['"])(.*?)\2/g;
+    return text.replace(stringPattern, `$1${SYNTAX_COLORS.string}$2$3$2${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight numeric values.
+   */
+  private highlightNumbers(text: string): string {
+    const numberPattern = /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g;
+    return text.replace(numberPattern, `${SYNTAX_COLORS.number}$1${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight boolean values.
+   */
+  private highlightBooleans(text: string): string {
+    const boolPattern = /\b(true|false)\b/g;
+    return text.replace(boolPattern, `${SYNTAX_COLORS.boolean}$1${SYNTAX_COLORS.reset}`);
+  }
+
+  /**
+   * Highlight null and undefined.
+   */
+  private highlightNullish(text: string): string {
+    const nullishPattern = /\b(null|undefined)\b/g;
+    return text.replace(nullishPattern, `${SYNTAX_COLORS.nullish}$1${SYNTAX_COLORS.reset}`);
+  }
+}