@mks2508/mks-ui 0.3.2 → 0.5.0

package/src/react-ui/blocks/Terminal/components/SyntaxHighlight.tsx

@@ -0,0 +1,386 @@
+/**
+ * Syntax highlighting for log messages (React spans).
+ *
+ * Applies color highlighting to specific elements within log messages
+ * using React span elements with Tailwind CSS classes.
+ *
+ * IMPORTANT: Only highlights plain text - skips lines with existing ANSI codes
+ * to prevent mixing codes and creating visual artifacts.
+ *
+ * Features LRU cache to avoid re-parsing identical text.
+ *
+ * @module components/devenv/terminal/SyntaxHighlight
+ */
+
+'use client';
+
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * LRU cache for syntax highlighting results.
+ * Avoids re-parsing identical text on every render.
+ */
+const highlightCache = new Map<string, React.ReactNode>();
+const MAX_CACHE_SIZE = 1000;
+
+/**
+ * Strip ANSI escape codes from text.
+ *
+ * @param text - Text with ANSI codes
+ * @returns Text without ANSI codes
+ */
+function stripAnsiCodes(text: string): string {
+  // CSI sequences: \x1b[... (parameters)
+  // OSC sequences: \x1b]... (ST is \x07 or \x1b\\)
+  // General escape sequences
+  return text
+    .replace(/\x1b\[[0-9;]*[mGKH]/g, '') // CSI SGR sequences
+    .replace(/\x1b\][^\x07\x1b\\]*[\x07\x1b\\]/g, '') // OSC sequences
+    .replace(/\x1b\\/g, ''); // ST (String Terminator)
+}
+
+/**
+ * Get cached highlighted text or compute and cache it.
+ */
+function getCachedHighlight(text: string): React.ReactNode {
+  if (highlightCache.has(text)) {
+    return highlightCache.get(text)!;
+  }
+
+  const result = highlightText(text);
+
+  // LRU: remove oldest entry if cache is full
+  if (highlightCache.size >= MAX_CACHE_SIZE) {
+    const firstKey = highlightCache.keys().next().value;
+    if (firstKey) highlightCache.delete(firstKey);
+  }
+
+  highlightCache.set(text, result);
+  return result;
+}
+
+/**
+ * Clear the highlight cache (useful for memory management).
+ */
+export function clearHighlightCache(): void {
+  highlightCache.clear();
+}
+
+/**
+ * Check if text contains ANSI escape codes.
+ *
+ * Detects all types of ANSI escape sequences:
+ * - CSI (Control Sequence Introducer): \x1b[... (parameters)
+ * - OSC (Operating System Command): \x1b]...
+ * - General escape sequences: \x1b...
+ */
+function hasAnsiCodes(text: string): boolean {
+  // CSI sequences: \x1b[ followed by params and final byte
+  // OSC sequences: \x1b] followed by content and ST
+  // Any ESC character: \x1b
+  return /\x1b\[/.test(text) || /\x1b\]/.test(text) || /\x1b/.test(text);
+}
+
+/**
+ * Props for SyntaxHighlightedText component.
+ */
+export interface ISyntaxHighlightedTextProps {
+  /** Text to highlight */
+  text: string;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Syntax highlighted text component.
+ *
+ * Applies syntax highlighting to plain text messages.
+ * Strips ANSI codes before highlighting to prevent visual artifacts
+ * from mixed escape sequences.
+ *
+ * @example
+ * ```tsx
+ * <SyntaxHighlightedText text="GET /api/workspaces { filter: {} }" />
+ * ```
+ */
+export function SyntaxHighlightedText({ text, className }: ISyntaxHighlightedTextProps): React.JSX.Element {
+  if (!text || text.length === 0) {
+    return <span className={className}>{text}</span>;
+  }
+
+  // Strip ANSI codes before highlighting to enable syntax highlighting on colored logs
+  const cleanText = hasAnsiCodes(text) ? stripAnsiCodes(text) : text;
+
+  const highlighted = getCachedHighlight(cleanText);
+
+  return (
+    <span className={cn('font-mono text-sm', className)}>
+      {highlighted}
+    </span>
+  );
+}
+
+/**
+ * Apply syntax highlighting to text.
+ *
+ * Returns an array of React nodes with appropriate styling.
+ * Patterns are applied in order (most specific first).
+ */
+function highlightText(text: string): React.ReactNode {
+  let result = text;
+  const tokens: { text: string; className?: string }[] = [];
+
+  // Apply highlighting in order (most specific first)
+  result = extractTokens(result, tokens, [
+    // Timestamps (HH:MM:SS, HH:MM:SS.mmm)
+    { pattern: /\b\d{1,2}:\d{2}:\d{2}(\.\d{1,3})?\b/g, className: 'text-cyan-400/70' },
+
+    // Bracketed badges: [INFO], [WARN], etc.
+    { pattern: /\[([A-Z][A-Z0-9_]*)\]/g, className: 'text-purple-400 bg-purple-500/10 px-1 rounded font-semibold' },
+
+    // Source location: file.ts:7:45 or file.TS:7:45 or NATIVE:7:39
+    { pattern: /\b([a-zA-Z0-9_-]+\.([a-zA-Z]{2,4}|[A-Z]{2})(?::\d+:\d+)?)\b/g, className: 'text-orange-400 bg-orange-500/10 px-1 rounded text-xs' },
+
+    // Source location: (file.ts:42:10)
+    { pattern: /\(([a-zA-Z0-9_-]+\.[a-zA-Z]{2,4}:\d+:\d+)\)/g, className: 'text-orange-400/80' },
+
+    // Curly braces content: {key} or {value}
+    { pattern: /\{([^}]+)\}/g, className: 'text-yellow-400 bg-yellow-500/5 px-0.5 rounded' },
+
+    // Parentheses content: (WARN), (debug)
+    { pattern: /\(([^)]+)\)/g, className: 'text-purple-300/80' },
+
+    // Angle brackets: <ERROR>, <path>
+    { pattern: /\b<([^>]+)>/g, className: 'text-cyan-300/80' },
+
+    // Version numbers: v1.2.3, 2.0.0-beta
+    { pattern: /\bv?\d+\.\d+\.\d+(-[a-z0-9.]+)?\b/gi, className: 'text-green-400 font-semibold' },
+
+    // Property keys (before colons): key:
+    { pattern: /\b([a-zA-Z_][a-zA-Z0-9_-]*)\s*:/g, className: 'text-green-500' },
+
+    // Keyword badges with colon: success:, error:, failed:, warning:
+    { pattern: /\b(success|error|failed|warning|warn|info|debug|trace|fatal):/gi, className: 'text-pink-400 font-semibold' },
+
+    // Strings (quoted values)
+    { pattern: /(['"])(.*?)\1/g, className: 'text-green-400' },
+
+    // Numbers (integers and floats)
+    { pattern: /(?<!\w)(-?\d+(?:\.\d+)?)(?!\w)/g, className: 'text-yellow-400' },
+
+    // Booleans
+    { pattern: /\b(true|false)\b/gi, className: 'text-blue-400' },
+
+    // Null/undefined
+    { pattern: /\b(null|undefined)\b/gi, className: 'text-gray-500' },
+
+    // HTTP methods
+    { pattern: /\b(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\b/g, className: 'text-pink-400 font-semibold' },
+
+    // URL paths: /api/users
+    { pattern: /(^|[\s(])\/[a-zA-Z0-9_/-]+/g, className: 'text-cyan-400' },
+
+    // File extensions: .js, .ts, .json, .py
+    { pattern: /\b\w+\.(js|ts|jsx|tsx|json|py|rs|go|java|c|cpp|h|cs|sh|bash|yml|yaml|toml|md|txt|log)\b/g, className: 'text-orange-400' },
+
+    // Standalone braces and brackets (structural)
+    { pattern: /([{}[\]()])/g, className: 'text-yellow-500' },
+
+    // Equals signs in assignments
+    { pattern: /\s*=\s*/g, className: 'text-gray-400' },
+
+    // Arrows: ->, =>
+    { pattern: /->|=>/g, className: 'text-purple-400 font-semibold' },
+  ]);
+
+  // Build React nodes from tokens
+  return tokens.map((token, index) => (
+    <span key={index} className={token.className}>
+      {token.text}
+    </span>
+  ));
+}
+
+/**
+ * Extract tokens from text using patterns.
+ *
+ * Iteratively applies patterns and extracts matched tokens.
+ */
+function extractTokens(
+  text: string,
+  tokens: { text: string; className?: string }[],
+  patterns: { pattern: RegExp; className?: string }[]
+): string {
+  let result = text;
+  let hasMatches = true;
+
+  while (hasMatches) {
+    hasMatches = false;
+
+    for (const { pattern, className } of patterns) {
+      const match = pattern.exec(result);
+      if (match) {
+        hasMatches = true;
+
+        // Extract matched portion
+        const matchedText = match[0];
+        const startIndex = match.index;
+        const endIndex = startIndex + matchedText.length;
+
+        // Add text before match (if any) as plain token
+        if (startIndex > 0) {
+          const beforeText = result.slice(0, startIndex);
+          if (beforeText) {
+            tokens.push({ text: beforeText });
+          }
+        }
+
+        // Add matched text with styling
+        tokens.push({ text: matchedText, className });
+
+        // Update result to continue after match
+        result = result.slice(endIndex);
+
+        // Reset pattern for next iteration
+        pattern.lastIndex = 0;
+        break;
+      }
+    }
+  }
+
+  // Add remaining text
+  if (result) {
+    tokens.push({ text: result });
+  }
+
+  return result;
+}
+
+/**
+ * Props for HighlightedJson component.
+ */
+export interface IHighlightedJsonProps {
+  /** JSON object to highlight */
+  json: Record<string, unknown>;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Highlighted JSON component.
+ *
+ * Displays JSON with syntax highlighting and proper indentation.
+ *
+ * @example
+ * ```tsx
+ * <HighlightedJson json={{ filter: {}, name: "test" }} />
+ * ```
+ */
+export function HighlightedJson({ json, className }: IHighlightedJsonProps): React.JSX.Element {
+  const formatted = JSON.stringify(json, null, 2);
+
+  try {
+    const parsed = JSON.parse(formatted);
+    const highlighted = highlightJson(parsed);
+
+    return (
+      <pre className={cn('font-mono text-xs', className)}>
+        {highlighted}
+      </pre>
+    );
+  } catch {
+    return (
+      <pre className={cn('font-mono text-xs text-gray-400', className)}>
+        {formatted}
+      </pre>
+    );
+  }
+}
+
+/**
+ * Recursively highlight JSON.
+ */
+function highlightJson(value: unknown, indent = 0): React.ReactNode {
+  const indentStr = '  '.repeat(indent);
+
+  if (value === null) {
+    return <span className="text-gray-500">null</span>;
+  }
+
+  if (value === undefined) {
+    return <span className="text-gray-500">undefined</span>;
+  }
+
+  if (typeof value === 'boolean') {
+    return <span className="text-blue-400">{String(value)}</span>;
+  }
+
+  if (typeof value === 'number') {
+    return <span className="text-yellow-400">{String(value)}</span>;
+  }
+
+  if (typeof value === 'string') {
+    return <span className="text-green-400">"{value}"</span>;
+  }
+
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return (
+        <span>
+          <span className="text-yellow-500">[</span>
+          <span className="text-yellow-500">]</span>
+        </span>
+      );
+    }
+
+    return (
+      <span>
+        <span className="text-yellow-500">[</span>
+        {'\n'}
+        {value.map((item, index) => (
+          <span key={index}>
+            {indentStr + '  '}
+            {highlightJson(item, indent + 1)}
+            {index < value.length - 1 ? <span className="text-gray-500">,</span> : null}
+            {'\n'}
+          </span>
+        ))}
+        {indentStr}
+        <span className="text-yellow-500">]</span>
+      </span>
+    );
+  }
+
+  if (typeof value === 'object') {
+    const entries = Object.entries(value as Record<string, unknown>);
+    if (entries.length === 0) {
+      return (
+        <span>
+          <span className="text-yellow-500">{'{'}</span>
+          <span className="text-yellow-500">{'}'}</span>
+        </span>
+      );
+    }
+
+    return (
+      <span>
+        <span className="text-yellow-500">{'{'}</span>
+        {'\n'}
+        {entries.map(([key, val], index) => (
+          <span key={key}>
+            {indentStr + '  '}
+            <span className="text-green-500">"{key}"</span>
+            <span className="text-gray-500">: </span>
+            {highlightJson(val, indent + 1)}
+            {index < entries.length - 1 ? <span className="text-gray-500">,</span> : null}
+            {'\n'}
+          </span>
+        ))}
+        {indentStr}
+        <span className="text-yellow-500">{'}'}</span>
+      </span>
+    );
+  }
+
+  return <span className="text-gray-500">{String(value)}</span>;
+}

package/src/react-ui/blocks/Terminal/components/TerminalLogBadge.tsx

@@ -0,0 +1,67 @@
+/**
+ * TerminalLogBadge Component.
+ *
+ * Wraps the base Badge component with terminal log level color styling.
+ * Maps log levels to appropriate Tailwind color classes matching the
+ * Synthwave Dark design system.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components/TerminalLogBadge
+ */
+
+'use client';
+
+import type { ReactNode } from 'react';
+import { Badge } from '@/react-ui/ui/Badge';
+import { cn } from '@/react-ui/lib/utils';
+
+import type { TLogLevelFilter } from '../parsing/LogParser.types';
+
+/**
+ * Color classes for each log level.
+ */
+const LEVEL_COLORS: Record<string, string> = {
+  all: 'bg-muted/40 text-muted-foreground border-muted/60',
+  trace: 'bg-slate-500/20 text-slate-400 border-slate-500/30',
+  debug: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  info: 'bg-green-500/20 text-green-400 border-green-500/30',
+  warn: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+  error: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
+  fatal: 'bg-red-500/20 text-red-400 border-red-500/30',
+  unknown: 'bg-muted/40 text-muted-foreground border-muted/60',
+};
+
+/**
+ * Props for the TerminalLogBadge component.
+ */
+export interface ITerminalLogBadgeProps {
+  /** Log level to display */
+  level: TLogLevelFilter | string;
+  /** Badge content (typically a count) */
+  children: ReactNode;
+  /** Additional class name */
+  className?: string;
+}
+
+/**
+ * TerminalLogBadge Component.
+ *
+ * Renders a Badge styled for terminal log levels with appropriate
+ * color coding for each severity level.
+ *
+ * @example
+ * ```tsx
+ * <TerminalLogBadge level="error">3</TerminalLogBadge>
+ * <TerminalLogBadge level="info">42</TerminalLogBadge>
+ * ```
+ */
+export function TerminalLogBadge({ level, children, className }: ITerminalLogBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      size="sm"
+      className={cn(LEVEL_COLORS[level] ?? LEVEL_COLORS.unknown, className)}
+    >
+      {children}
+    </Badge>
+  );
+}

package/src/react-ui/blocks/Terminal/components/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Terminal components barrel export.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/components
+ */
+
+export * from './LogLineBadges';
+export * from './SyntaxHighlight';
+export * from './SpecializedSyntaxHighlighter';
+export * from './TerminalLogBadge';

package/src/react-ui/blocks/Terminal/display.ts

@@ -0,0 +1,46 @@
+/**
+ * Terminal Display — lightweight barrel export.
+ *
+ * Exports the readonly TerminalDisplay component + restty wrapper + chrome.
+ * Depends on restty only (not xterm, not shiki, not xterm addons).
+ * Use `@mks2508/mks-ui/react/blocks/Terminal/display` for minimal deps.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/display
+ */
+
+// TerminalDisplay (readonly restty terminal)
+export { TerminalDisplay } from './TerminalDisplay';
+export {
+  terminalDisplayStyles,
+  terminalDisplayVariants,
+  type TerminalDisplayVariantProps,
+} from './TerminalDisplay.styles';
+export type {
+  ITerminalDisplayProps,
+  ITerminalDisplayRef,
+  TerminalDisplaySlot,
+} from './TerminalDisplay.types';
+
+// Restty React wrapper (for advanced use)
+export { TerminalRestty } from './TerminalRestty';
+export type { ITerminalResttyProps, ITerminalResttyRef } from './TerminalRestty';
+
+// Chrome (re-exported for convenience)
+export { TerminalPanelChrome, NOISE_TEXTURE_SVG, terminalScrollStyles } from './panel/TerminalPanelChrome';
+export type { ITerminalPanelChromeProps } from './panel/TerminalPanelChrome.types';
+export {
+  terminalChromeStyles,
+  terminalChromeVariants,
+  ACCENT_GRADIENTS,
+  type TerminalChromeSlot,
+} from './panel/TerminalPanelChrome.styles';
+
+// Theme utilities (needed for display customization)
+export { SYNTHWAVE_TERMINAL_THEME, getTerminalTheme } from './Terminal.theme';
+export {
+  hexToResttyColor,
+  xtermThemeToGhostty,
+  getSynthwaveGhosttyTheme,
+  type IResttyThemeColor,
+  type IResttyGhosttyTheme,
+} from './Terminal.theme.restty';

package/src/react-ui/blocks/Terminal/hooks/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Terminal Hooks Module.
+ *
+ * Reusable hooks for terminal WebSocket connections
+ * and global settings management.
+ *
+ * @module @mks2508/mks-ui/react/blocks/Terminal/hooks
+ */
+
+export {
+  useTerminalWebSocket,
+  type IUseTerminalWebSocketOptions,
+  type IUseTerminalWebSocketReturn,
+  type ITerminalWsServerMessage,
+  type TTerminalWsStatus,
+} from './useTerminalWebSocket';
+
+export {
+  useTerminalSettings,
+  type ITerminalSettings,
+  type IUseTerminalSettingsReturn,
+} from './useTerminalSettings';