@mks2508/mks-ui 0.3.1 → 0.4.0

package/src/react-ui/blocks/Terminal/panel/TerminalLogsPanel.types.ts

@@ -0,0 +1,259 @@
+/**
+ * Types for TerminalLogsPanel components.
+ *
+ * @module components/devenv/terminal/panel/types
+ */
+
+import type { IParsedLogEntry, TLogLevel } from "../parsing";
+
+// Re-export TLogLevel for convenience
+export type { TLogLevel };
+
+/**
+ * Terminal session information for multi-session support.
+ */
+export interface ITerminalSession {
+  /** Unique session identifier */
+  id: string;
+  /** Display name for the session */
+  name: string;
+  /** Current connection status */
+  status: "connected" | "connecting" | "disconnected" | "error";
+  /** Associated container name (optional) */
+  containerName?: string;
+  /** Backend type for this session */
+  backend: "xterm" | "webcontainer";
+  /** Session mode - interactive or readonly */
+  mode: "interactive" | "readonly";
+  /** Session creation timestamp */
+  createdAt: number;
+}
+
+// Re-export component props types from their respective files
+export type { ITerminalSessionTabsProps } from "./TerminalSessionTabs";
+export type { ITerminalFilterTabsProps } from "./TerminalFilterTabs";
+export type { ITerminalFilterDropdownProps } from "./TerminalFilterDropdown";
+export type { ITerminalSessionControlProps } from "./TerminalSessionControl";
+
+/**
+ * Props for TerminalLogsPanel main component.
+ */
+export interface ITerminalLogsPanelProps {
+  /** Container name to display in header */
+  containerName: string;
+
+  /** Whether container connection is active */
+  isConnected: boolean;
+
+  /** Raw logs content (kept for compatibility, will be removed) */
+  logs?: string;
+
+  /** Internal raw logs content (kept for API compatibility, unused in favor of parsedEntries) */
+  _logs?: string;
+
+  /** Parsed log entries with level detection and metadata */
+  parsedEntries: IParsedLogEntry[];
+
+  /** Log level filter state */
+  filterLevel: TLogLevelFilter;
+
+  /** Follow cursor state (auto-scroll) */
+  followCursor: boolean;
+
+  /** Show line numbers state */
+  showLineNumbers: boolean;
+
+  /** Level counts for badges */
+  levelCounts: Partial<Record<TLogLevel, number>>;
+
+  /** Custom class name */
+  className?: string;
+
+  /** View mode: 'terminal' for xterm.js, 'react' for React viewer */
+  viewMode?: "terminal" | "react";
+
+  /** Container management: Available containers (for session control) */
+  containers?: Array<{
+    id: string;
+    name: string;
+    state: string;
+  }>;
+
+  /** Session management: Available sessions (optional for single-session mode) */
+  sessions?: ITerminalSession[];
+
+  /** Session management: Currently active session ID (optional) */
+  activeSessionId?: string | null;
+
+  /** Session management: Callback when session changes */
+  onSessionChange?: (sessionId: string) => void;
+
+  /** Session management: Callback when session is closed */
+  onSessionClose?: (sessionId: string) => void;
+
+  /** Session management: Callback when new session button is clicked */
+  onNewSession?: () => void;
+
+  /** Available containers for adding new tabs */
+  availableContainers?: Array<{
+    id: string;
+    name: string;
+    state: string;
+  }>;
+
+  /** Callback when a container is selected to add as a new tab */
+  onAddContainer?: (containerName: string) => void;
+
+  /** Callback when container is selected from session control */
+  onContainerSelect?: (containerName: string) => void;
+
+  /** Callback when session close button is clicked */
+  onSessionStop?: () => void;
+
+  /** Callback when filter level changes */
+  onFilterChange: (level: TLogLevelFilter) => void;
+
+  /** Callback when follow cursor toggle changes */
+  onFollowCursorChange: (enabled: boolean) => void;
+
+  /** Callback when line numbers toggle changes */
+  onShowLineNumbersChange: (enabled: boolean) => void;
+
+  /** Callback when view mode changes */
+  onViewModeChange?: (mode: "terminal" | "react") => void;
+
+  /** Callback when clear button is clicked */
+  onClear: () => void;
+
+  /** Callback when download button is clicked */
+  onDownload: () => void;
+
+  /** Callback when search button is clicked */
+  onSearch: () => void;
+}
+
+/**
+ * Props for TerminalPanelHeader component.
+ */
+export interface ITerminalPanelHeaderProps {
+  /** Container name to display */
+  containerName: string;
+
+  /** Whether container connection is active */
+  isConnected: boolean;
+
+  /** Current view mode */
+  viewMode?: "terminal" | "react";
+
+  /** Callback when view mode changes */
+  onViewModeChange?: (mode: "terminal" | "react") => void;
+
+  /** Callback when close button is clicked */
+  onClose?: () => void;
+
+  /** Callback when minimize button is clicked */
+  onMinimize?: () => void;
+
+  /** Callback when maximize button is clicked */
+  onMaximize?: () => void;
+}
+
+/**
+ * Props for TerminalPanelToolbar component.
+ */
+export interface ITerminalPanelToolbarProps {
+  /** Current log level filter */
+  filterLevel: TLogLevelFilter;
+
+  /** Follow cursor state */
+  followCursor: boolean;
+
+  /** Show line numbers state */
+  showLineNumbers: boolean;
+
+  /** Log level counts for badges */
+  levelCounts: Partial<Record<TLogLevel, number>>;
+
+  /** Callback when filter level changes */
+  onFilterChange: (level: TLogLevelFilter) => void;
+
+  /** Callback when follow cursor toggle changes */
+  onFollowCursorChange: (enabled: boolean) => void;
+
+  /** Callback when line numbers toggle changes */
+  onShowLineNumbersChange: (enabled: boolean) => void;
+
+  /** Callback when clear button is clicked */
+  onClear: () => void;
+
+  /** Callback when download button is clicked */
+  onDownload: () => void;
+
+  /** Callback when search button is clicked */
+  onSearch: () => void;
+}
+
+/**
+ * Props for TerminalPanelFooter component.
+ */
+export interface ITerminalPanelFooterProps {
+  /** Number of log lines */
+  lineCount: number;
+
+  /** Number of bytes */
+  byteCount: number;
+
+  /** Current filter level display */
+  filterLevel: TLogLevelFilter;
+
+  /** Current filter count (filtered vs total) */
+  filteredCount?: number;
+  totalCount?: number;
+}
+
+/**
+ * Log level filter options.
+ * - 'all': Show all log levels
+ * - Specific level: Show only that level and above (by severity)
+ */
+export type TLogLevelFilter = "all" | TLogLevel;
+
+/**
+ * Level filter button configuration.
+ */
+export interface ILevelFilterButton {
+  /** Filter value */
+  value: TLogLevelFilter;
+
+  /** Display label */
+  label: string;
+
+  /** Icon component (optional) */
+  icon?: React.ComponentType<{ className?: string }>;
+
+  /** Badge count */
+  count?: number;
+}
+
+/**
+ * Terminal panel action button types.
+ */
+export type TTerminalAction = "clear" | "download" | "search" | "copy";
+
+/**
+ * Imperative handle for TerminalLogsPanel.
+ * Exposes terminal control methods to parent components.
+ */
+export interface ITerminalLogsPanelRef {
+  /** Search for term in terminal buffer */
+  search: (term: string) => void;
+
+  /** Clear terminal and reset position */
+  clear: () => void;
+
+  /** Write text to terminal */
+  write: (text: string) => void;
+
+  /** Scroll to bottom of terminal */
+  scrollToBottom: () => void;
+}

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

@@ -0,0 +1,237 @@
+/**
+ * TerminalPanelChrome Component.
+ *
+ * Reusable Ghostty-styled wrapper providing shared visual chrome
+ * for both log viewer and interactive terminal panels.
+ *
+ * Includes:
+ * - Multi-layer glassmorphism shell
+ * - Noise texture SVG overlay for depth
+ * - Animated top accent line (primary gradient with glow)
+ * - Session tabs (TerminalSessionTabs)
+ * - macOS-style header (TerminalPanelHeader)
+ * - Slots for action bar, children (terminal content), and footer
+ * - Neon magenta scrollbar styles
+ *
+ * @module components/devenv/terminal/panel/chrome
+ */
+
+'use client';
+
+import type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
+import { TerminalPanelHeader } from './TerminalPanelHeader';
+import { TerminalSessionTabs } from './TerminalSessionTabs';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Noise texture SVG for glassmorphism depth.
+ * Fractal noise pattern applied as background image.
+ */
+export const NOISE_TEXTURE_SVG = `"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"`;
+
+/**
+ * Terminal scroll customization with neon magenta glow effect.
+ * Applied to xterm.js viewport scrollbar.
+ */
+export const terminalScrollStyles = `
+  @keyframes shimmer-line {
+    0%, 100% { background-position: 200% 0; }
+    50% { background-position: -200% 0; }
+  }
+  .terminal-scroll .xterm-viewport {
+    overflow-y: auto;
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar {
+    width: 8px;
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-track {
+    background: rgba(36, 27, 47, 0.5);
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb {
+    background: linear-gradient(
+      180deg,
+      rgba(212, 12, 103, 0.3) 0%,
+      rgba(212, 12, 103, 0.5) 50%,
+      rgba(212, 12, 103, 0.3) 100%
+    );
+    border-radius: 4px;
+    box-shadow: 0 0 10px rgba(212, 12, 103, 0.3);
+  }
+  .terminal-scroll .xterm-viewport::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(
+      180deg,
+      rgba(212, 12, 103, 0.5) 0%,
+      rgba(212, 12, 103, 0.7) 50%,
+      rgba(212, 12, 103, 0.5) 100%
+    );
+    box-shadow: 0 0 15px rgba(212, 12, 103, 0.5);
+  }
+
+  /* === CRT Shader Effects (opt-in via settings) === */
+
+  /* Scanline overlay - replicates bettercrt.glsl scanline effect */
+  .terminal-crt {
+    position: relative;
+  }
+  .terminal-crt::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 20;
+    background: repeating-linear-gradient(
+      0deg,
+      rgba(0, 0, 0, 0.12) 0px,
+      rgba(0, 0, 0, 0.12) 1px,
+      transparent 1px,
+      transparent 2px
+    );
+    mix-blend-mode: multiply;
+  }
+
+  /* Vignette - CRT monitor light falloff */
+  .terminal-crt::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 19;
+    background: radial-gradient(
+      ellipse at center,
+      transparent 60%,
+      rgba(0, 0, 0, 0.15) 100%
+    );
+  }
+
+  /* Bloom/glow - replicates bloom.glsl text glow on bright text */
+  .terminal-bloom * {
+    text-shadow: 0 0 4px currentColor;
+  }
+
+  /* Bloom on xterm canvas - subtle drop-shadow filter on the canvas element */
+  .terminal-bloom canvas {
+    filter: drop-shadow(0 0 1px rgba(255, 200, 100, 0.15));
+  }
+
+  /* Reduced motion - disable all CRT effects */
+  @media (prefers-reduced-motion: reduce) {
+    .terminal-crt::after,
+    .terminal-crt::before { display: none; }
+    .terminal-bloom * { text-shadow: none !important; }
+    .terminal-bloom canvas { filter: none !important; }
+  }
+`;
+
+/**
+ * TerminalPanelChrome Component.
+ *
+ * Reusable Ghostty-styled shell that wraps terminal content with
+ * consistent visual chrome. Used by both TerminalLogsPanel (readonly)
+ * and TerminalInteractivePanel (interactive).
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelChrome
+ *   containerName="devenv-agent-backend"
+ *   isConnected={true}
+ *   sessions={sessions}
+ *   activeSessionId="session-1"
+ *   onSessionTabClick={(id) => setActiveSession(id)}
+ *   onSessionClose={(id) => closeSession(id)}
+ *   onNewSession={() => createSession()}
+ *   actionBar={<TerminalFilterTabs ... />}
+ *   footer={<TerminalPanelFooter ... />}
+ * >
+ *   <div ref={containerRef} className="terminal-container" />
+ * </TerminalPanelChrome>
+ * ```
+ */
+export function TerminalPanelChrome({
+  containerName,
+  isConnected,
+  viewMode = 'terminal',
+  onViewModeChange,
+  sessions,
+  activeSessionId,
+  onSessionTabClick,
+  onSessionClose,
+  onNewSession,
+  availableContainers,
+  onAddContainer,
+  children,
+  actionBar,
+  footer,
+  onClose,
+  onMinimize,
+  onMaximize,
+  crtEffect,
+  className,
+}: ITerminalPanelChromeProps) {
+  /** Whether to render session tabs (multi-session mode) */
+  const showSessionTabs =
+    (sessions && sessions.length > 0) ||
+    (availableContainers && availableContainers.length > 0);
+
+  return (
+    <div
+      className={cn(
+        'glass-heavy glass-noise rounded-2xl overflow-hidden',
+        className
+      )}
+    >
+      {/* Animated top accent line with shimmer */}
+      <div className="absolute top-0 left-0 right-0 h-px z-10 pointer-events-none overflow-hidden">
+        <div
+          className="h-full w-full bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]"
+        />
+        <div
+          className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent"
+          style={{
+            backgroundSize: '200% 100%',
+            animation: 'shimmer-line 4s ease-in-out infinite',
+          }}
+        />
+      </div>
+
+      {/* Session Tabs */}
+      {showSessionTabs && (
+        <TerminalSessionTabs
+          sessions={sessions || []}
+          activeSessionId={activeSessionId || null}
+          onTabClick={(sessionId) => onSessionTabClick?.(sessionId)}
+          onClose={(sessionId) => onSessionClose?.(sessionId)}
+          onNewSession={onNewSession}
+          availableContainers={availableContainers}
+          onAddContainer={onAddContainer}
+        />
+      )}
+
+      {/* Header */}
+      <TerminalPanelHeader
+        containerName={containerName}
+        isConnected={isConnected}
+        viewMode={viewMode}
+        onViewModeChange={onViewModeChange}
+        onClose={onClose}
+        onMinimize={onMinimize}
+        onMaximize={onMaximize}
+      />
+
+      {/* Action Bar Slot */}
+      {actionBar}
+
+      {/* Terminal Content - with optional CRT effects */}
+      <div className={cn(
+        crtEffect && 'terminal-crt terminal-bloom'
+      )}>
+        {children}
+      </div>
+
+      {/* Footer Slot */}
+      {footer}
+
+      {/* Terminal scroll styles */}
+      <style>{terminalScrollStyles}</style>
+    </div>
+  );
+}

package/src/react-ui/blocks/Terminal/panel/TerminalPanelChrome.types.ts

@@ -0,0 +1,76 @@
+/**
+ * Types for TerminalPanelChrome component.
+ *
+ * @module components/devenv/terminal/panel/chrome/types
+ */
+
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+
+/**
+ * Props for TerminalPanelChrome - reusable Ghostty-styled wrapper.
+ *
+ * Provides the shared visual shell for both log viewer
+ * and interactive terminal panels.
+ */
+export interface ITerminalPanelChromeProps {
+  /** Container/session name displayed in header */
+  containerName: string;
+
+  /** Connection status indicator */
+  isConnected: boolean;
+
+  /** Current view mode (terminal xterm.js or react viewer) */
+  viewMode?: 'terminal' | 'react';
+
+  /** Callback when view mode changes */
+  onViewModeChange?: (mode: 'terminal' | 'react') => void;
+
+  /** Available sessions for tab bar */
+  sessions?: ITerminalSession[];
+
+  /** Currently active session ID */
+  activeSessionId?: string | null;
+
+  /** Callback when a session tab is clicked */
+  onSessionTabClick?: (sessionId: string) => void;
+
+  /** Callback when a session tab close button is clicked */
+  onSessionClose?: (sessionId: string) => void;
+
+  /** Callback when new session button is clicked */
+  onNewSession?: () => void;
+
+  /** Available containers for the add-container dropdown */
+  availableContainers?: Array<{
+    id: string;
+    name: string;
+    state: string;
+  }>;
+
+  /** Callback when a container is selected from the dropdown */
+  onAddContainer?: (containerName: string) => void;
+
+  /** Terminal content (children) */
+  children: React.ReactNode;
+
+  /** Action bar slot rendered between header and children */
+  actionBar?: React.ReactNode;
+
+  /** Footer slot rendered after children */
+  footer?: React.ReactNode;
+
+  /** Traffic light close handler */
+  onClose?: () => void;
+
+  /** Traffic light minimize handler */
+  onMinimize?: () => void;
+
+  /** Traffic light maximize handler */
+  onMaximize?: () => void;
+
+  /** Enable CRT shader effects (scanlines, bloom, vignette) */
+  crtEffect?: boolean;
+
+  /** Custom class name appended to outer wrapper */
+  className?: string;
+}

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

@@ -0,0 +1,112 @@
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Footer displaying line count, byte count, and current filter.
+ *
+ * @module components/devenv/terminal/panel/footer
+ */
+
+'use client';
+
+import type { ITerminalPanelFooterProps } from './TerminalLogsPanel.types';
+
+/**
+ * Stat item styles.
+ */
+const statItemStyles = 'flex items-center gap-1 text-xs text-muted-foreground';
+const statValueStyles = 'font-mono font-medium text-foreground';
+
+/**
+ * TerminalPanelFooter Component.
+ *
+ * Displays footer with:
+ * - Line count
+ * - Byte count
+ * - Current filter level
+ * - Filtered count (if applicable)
+ *
+ * @example
+ * ```tsx
+ * <TerminalPanelFooter
+ *   lineCount={1234}
+ *   byteCount={45678}
+ *   filterLevel="all"
+ *   filteredCount={1200}
+ *   totalCount={1234}
+ * />
+ * ```
+ */
+export function TerminalPanelFooter({
+  lineCount,
+  byteCount,
+  filterLevel,
+  filteredCount,
+  totalCount,
+}: ITerminalPanelFooterProps) {
+  /**
+   * Format byte count for human-readable display.
+   */
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 B';
+    const k = 1024;
+    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+  };
+
+  /**
+   * Format line count with thousands separator.
+   */
+  const formatLines = (lines: number): string => {
+    return lines.toLocaleString();
+  };
+
+  /**
+   * Get filter display label.
+   */
+  const getFilterLabel = (): string => {
+    if (filterLevel === 'all') return 'All Levels';
+    return filterLevel.toUpperCase();
+  };
+
+  return (
+    <div className="relative">
+      {/* Gradient separator */}
+      <div className="absolute top-0 left-4 right-4 h-px bg-gradient-to-r from-transparent via-border/40 to-transparent" />
+
+      <div className="flex items-center justify-between px-4 h-9 bg-background/40">
+        {/* Left: Stats */}
+        <div className="flex items-center gap-3">
+          <div className={statItemStyles}>
+            <span className="text-muted-foreground/50">Lines</span>
+            <span className={statValueStyles}>{formatLines(lineCount)}</span>
+          </div>
+          <div className="w-px h-3 bg-border/20" />
+          <div className={statItemStyles}>
+            <span className="text-muted-foreground/50">Size</span>
+            <span className={statValueStyles}>{formatBytes(byteCount)}</span>
+          </div>
+        </div>
+
+        {/* Right: Filter info */}
+        <div className="flex items-center gap-3">
+          {filteredCount !== undefined && totalCount !== undefined && filteredCount < totalCount && (
+            <>
+              <div className={statItemStyles}>
+                <span className="text-muted-foreground/50">Showing</span>
+                <span className={statValueStyles}>
+                  {formatLines(filteredCount)}<span className="text-muted-foreground/40">/{formatLines(totalCount)}</span>
+                </span>
+              </div>
+              <div className="w-px h-3 bg-border/20" />
+            </>
+          )}
+          <div className={statItemStyles}>
+            <span className="text-muted-foreground/50">Filter</span>
+            <span className={`${statValueStyles} text-primary/80`}>{getFilterLabel()}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}