@mks2508/mks-ui 0.5.4 → 0.5.8

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

@@ -1,259 +0,0 @@
-/**
- * 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.styles.ts

@@ -1,75 +0,0 @@
-/**
- * TerminalPanelChrome style definitions.
- *
- * StyleSlots + CVA variants for the Ghostty-inspired glassmorphism shell.
- * Follows the mks-ui composable pattern: base styles via StyleSlots,
- * visual variants via CVA, consumer overrides via SlotOverrides.
- *
- * @module components/devenv/terminal/panel/chrome/styles
- */
-
-import { cva, type VariantProps } from 'class-variance-authority';
-import type { StyleSlots } from '@/core/types';
-
-/** Slot names for TerminalPanelChrome sub-regions */
-export type TerminalChromeSlot =
-  | 'root'
-  | 'accentLine'
-  | 'accentGradient'
-  | 'accentShimmer'
-  | 'header'
-  | 'sessionTabs'
-  | 'actionBar'
-  | 'content'
-  | 'footer';
-
-/**
- * Default style slots for each chrome sub-region.
- */
-export const terminalChromeStyles: StyleSlots<TerminalChromeSlot> = {
-  root: 'glass-heavy glass-noise rounded-2xl overflow-hidden relative',
-  accentLine: 'absolute top-0 left-0 right-0 h-px z-10 pointer-events-none overflow-hidden',
-  accentGradient: 'h-full w-full',
-  accentShimmer: 'absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent',
-  header: '',
-  sessionTabs: '',
-  actionBar: '',
-  content: '',
-  footer: '',
-};
-
-/**
- * Accent line gradient classes per variant.
- */
-export const ACCENT_GRADIENTS = {
-  default: 'bg-gradient-to-r from-transparent via-primary/70 to-transparent shadow-[0_0_12px_hsla(330,85%,43%,0.5)]',
-  error: 'bg-gradient-to-r from-transparent via-destructive/70 to-transparent shadow-[0_0_12px_hsla(0,72%,51%,0.5)]',
-  minimal: '',
-} as const;
-
-/**
- * CVA variants for the chrome root element.
- */
-export const terminalChromeVariants = cva(terminalChromeStyles.root, {
-  variants: {
-    variant: {
-      /** Default: magenta accent line, full glassmorphism */
-      default: '',
-      /** Minimal: no accent line, no noise texture, simpler rounding */
-      minimal: 'rounded-lg',
-      /** Error: red/destructive accent line instead of magenta */
-      error: '',
-    },
-    size: {
-      default: '',
-      compact: 'rounded-xl',
-    },
-  },
-  defaultVariants: {
-    variant: 'default',
-    size: 'default',
-  },
-});
-
-/** Extracted variant props type for consumer use */
-export type TerminalChromeVariantProps = VariantProps<typeof terminalChromeVariants>;

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

@@ -1,266 +0,0 @@
-/**
- * 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
- * - StyleSlots + CVA variants for customization
- *
- * @module components/devenv/terminal/panel/chrome
- */
-
-'use client';
-
-import type { ITerminalPanelChromeProps } from './TerminalPanelChrome.types';
-import {
-  terminalChromeStyles,
-  terminalChromeVariants,
-  ACCENT_GRADIENTS,
-} from './TerminalPanelChrome.styles';
-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).
- *
- * Supports StyleSlots for class overrides and CVA variants
- * for visual presets (default, minimal, error).
- *
- * @example
- * ```tsx
- * <TerminalPanelChrome
- *   containerName="devenv-agent-backend"
- *   isConnected={true}
- *   variant="error"
- *   slots={{ root: 'max-h-[400px]', content: 'p-2' }}
- *   actionBar={<TerminalFilterTabs ... />}
- *   footer={<TerminalPanelFooter ... />}
- * >
- *   <div ref={containerRef} className="terminal-container" />
- * </TerminalPanelChrome>
- * ```
- */
-export function TerminalPanelChrome({
-  containerName,
-  isConnected,
-  variant = 'default',
-  size = 'default',
-  viewMode = 'terminal',
-  onViewModeChange,
-  sessions,
-  activeSessionId,
-  onSessionTabClick,
-  onSessionClose,
-  onNewSession,
-  availableContainers,
-  onAddContainer,
-  children,
-  actionBar,
-  footer,
-  onClose,
-  onMinimize,
-  onMaximize,
-  crtEffect,
-  slots,
-  className,
-}: ITerminalPanelChromeProps) {
-  /** Whether to render session tabs (multi-session mode) */
-  const showSessionTabs =
-    (sessions && sessions.length > 0) ||
-    (availableContainers && availableContainers.length > 0);
-
-  /** Whether to show the accent line (hidden in minimal variant) */
-  const showAccentLine = variant !== 'minimal';
-
-  /** Accent gradient based on variant */
-  const accentGradient = ACCENT_GRADIENTS[variant ?? 'default'] ?? ACCENT_GRADIENTS.default;
-
-  return (
-    <div
-      className={cn(
-        terminalChromeVariants({ variant, size }),
-        slots?.root,
-        className,
-      )}
-    >
-      {/* Animated top accent line with shimmer */}
-      {showAccentLine && (
-        <div className={cn(terminalChromeStyles.accentLine, slots?.accentLine)}>
-          <div className={cn(accentGradient, slots?.accentGradient)} />
-          <div
-            className={cn(terminalChromeStyles.accentShimmer, slots?.accentShimmer)}
-            style={{
-              backgroundSize: '200% 100%',
-              animation: 'shimmer-line 4s ease-in-out infinite',
-            }}
-          />
-        </div>
-      )}
-
-      {/* Session Tabs */}
-      {showSessionTabs && (
-        <div className={cn(slots?.sessionTabs)}>
-          <TerminalSessionTabs
-            sessions={sessions || []}
-            activeSessionId={activeSessionId || null}
-            onTabClick={(sessionId) => onSessionTabClick?.(sessionId)}
-            onClose={(sessionId) => onSessionClose?.(sessionId)}
-            onNewSession={onNewSession}
-            availableContainers={availableContainers}
-            onAddContainer={onAddContainer}
-          />
-        </div>
-      )}
-
-      {/* Header */}
-      <div className={cn(slots?.header)}>
-        <TerminalPanelHeader
-          containerName={containerName}
-          isConnected={isConnected}
-          viewMode={viewMode}
-          onViewModeChange={onViewModeChange}
-          onClose={onClose}
-          onMinimize={onMinimize}
-          onMaximize={onMaximize}
-        />
-      </div>
-
-      {/* Action Bar Slot */}
-      {actionBar && (
-        <div className={cn(slots?.actionBar)}>
-          {actionBar}
-        </div>
-      )}
-
-      {/* Terminal Content - with optional CRT effects */}
-      <div className={cn(
-        crtEffect && 'terminal-crt terminal-bloom',
-        slots?.content,
-      )}>
-        {children}
-      </div>
-
-      {/* Footer Slot */}
-      {footer && (
-        <div className={cn(slots?.footer)}>
-          {footer}
-        </div>
-      )}
-
-      {/* Terminal scroll styles */}
-      <style>{terminalScrollStyles}</style>
-    </div>
-  );
-}

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

@@ -1,82 +0,0 @@
-/**
- * Types for TerminalPanelChrome component.
- *
- * @module components/devenv/terminal/panel/chrome/types
- */
-
-import type { SlotOverrides } from '@/core/types';
-import type { ITerminalSession } from './TerminalLogsPanel.types';
-import type { TerminalChromeSlot, TerminalChromeVariantProps } from './TerminalPanelChrome.styles';
-
-/**
- * Props for TerminalPanelChrome - reusable Ghostty-styled wrapper.
- *
- * Provides the shared visual shell for both log viewer
- * and interactive terminal panels. Supports StyleSlots for
- * class overrides and CVA variants for visual presets.
- */
-export interface ITerminalPanelChromeProps extends TerminalChromeVariantProps {
-  /** 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;
-
-  /** Slot class overrides for each chrome sub-region */
-  slots?: SlotOverrides<TerminalChromeSlot>;
-
-  /** Custom class name appended to outer wrapper */
-  className?: string;
-}