@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,202 @@
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Dropdown menu for log level filtering.
+ * Replaces tab-style filters with a compact dropdown menu.
+ *
+ * @module components/devenv/terminal/panel/filter-dropdown
+ */
+
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { cn } from '@/react-ui/lib/utils';
+import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
+import styles from './terminal-filter-dropdown.module.css';
+
+/**
+ * Props for TerminalFilterDropdown component.
+ */
+export interface ITerminalFilterDropdownProps {
+  /** Current log level filter */
+  filterLevel: TLogLevelFilter;
+
+  /** Log level counts for badges */
+  levelCounts: Partial<Record<TLogLevel, number>>;
+
+  /** Callback when filter level changes */
+  onFilterChange: (level: TLogLevelFilter) => void;
+
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Log level filter configurations.
+ */
+const FILTER_OPTIONS: Array<{ value: TLogLevelFilter; label: string; color: string }> = [
+  { value: 'all', label: 'All Levels', color: 'text-foreground' },
+  { value: 'trace', label: 'Trace', color: 'text-slate-400' },
+  { value: 'debug', label: 'Debug', color: 'text-blue-400' },
+  { value: 'info', label: 'Info', color: 'text-green-400' },
+  { value: 'warn', label: 'Warn', color: 'text-yellow-400' },
+  { value: 'error', label: 'Error', color: 'text-orange-400' },
+  { value: 'fatal', label: 'Fatal', color: 'text-red-400' },
+];
+
+/**
+ * Get count for a specific log level.
+ */
+function getCount(level: TLogLevelFilter, levelCounts: Partial<Record<TLogLevel, number>>): number {
+  if (level === 'all') {
+    return Object.values(levelCounts).reduce((sum, count) => sum + (count ?? 0), 0);
+  }
+  return levelCounts[level] ?? 0;
+}
+
+/**
+ * TerminalFilterDropdown Component.
+ *
+ * Displays a dropdown menu with:
+ * - Current filter level as button label
+ * - Filter options with badges
+ * - Keyboard shortcuts
+ * - Glassmorphic dropdown menu
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterDropdown
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ * />
+ * ```
+ */
+export function TerminalFilterDropdown({
+  filterLevel,
+  levelCounts,
+  onFilterChange,
+  className,
+}: ITerminalFilterDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
+
+  const currentOption = FILTER_OPTIONS.find((opt) => opt.value === filterLevel);
+  const currentCount = getCount(filterLevel, levelCounts);
+
+  return (
+    <div className={cn('relative', className)} ref={containerRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={cn(
+          styles.triggerButton,
+          'flex items-center gap-2 px-3 py-2 h-9 rounded-md transition-all duration-200',
+          'bg-muted/40 text-muted-foreground hover:bg-muted/60 hover:text-foreground',
+          'border border-border/30 hover:border-border/50',
+          'shadow-[inset_0_0.5px_0_rgba(255,255,255,0.1)] hover:shadow-[0_0_8px_rgba(0,0,0,0.1)]',
+          'text-xs font-mono font-medium uppercase tracking-wider'
+        )}
+        aria-label="Filter logs by level"
+        aria-expanded={isOpen}
+      >
+        {/* Filter Icon */}
+        <svg className="w-3.5 h-3.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+
+        {/* Current Filter Label */}
+        <span className="flex-shrink-0">{currentOption?.label}</span>
+
+        {/* Badge with count */}
+        {currentCount > 0 && (
+          <span className="inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 bg-primary/20 text-primary rounded font-mono text-[10px] font-bold">
+            {currentCount}
+          </span>
+        )}
+
+        {/* Chevron */}
+        <svg
+          className={cn('w-3 h-3 transition-transform duration-200 flex-shrink-0', isOpen && 'rotate-180')}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+
+      {/* Dropdown Menu - CSS Anchor Positioned */}
+      <div
+        className={styles.dropdownMenu}
+        data-open={isOpen}
+      >
+        <div className="glass-subtle rounded-lg py-1">
+            {FILTER_OPTIONS.map((option) => {
+              const count = getCount(option.value, levelCounts);
+              const isActive = filterLevel === option.value;
+
+              return (
+                <button
+                  key={option.value}
+                  type="button"
+                  onClick={() => {
+                    onFilterChange(option.value);
+                    setIsOpen(false);
+                  }}
+                  className={cn(
+                    'w-full px-3 py-2 flex items-center justify-between gap-3',
+                    'transition-all duration-150',
+                    'hover:bg-primary/10',
+                    isActive && 'bg-primary/15'
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    {/* Color indicator dot */}
+                    <div
+                      className={cn(
+                        'w-2 h-2 rounded-full flex-shrink-0',
+                        option.value === 'all' ? 'bg-foreground' : `bg-${option.label.toLowerCase()}-400`
+                      )}
+                      style={{
+                        backgroundColor: option.value === 'all' ? 'hsl(var(--foreground))' : undefined
+                      }}
+                    />
+                    <span className={cn('text-sm font-mono', isActive ? option.color : 'text-muted-foreground')}>
+                      {option.label}
+                    </span>
+                  </div>
+
+                  {/* Count badge */}
+                  {count > 0 && (
+                    <span
+                      className={cn(
+                        'inline-flex items-center justify-center px-1.5 py-0.5 min-w-[1.25rem] h-4 rounded font-mono text-[10px] font-bold',
+                        isActive ? 'bg-primary/30 text-primary' : 'bg-muted/40 text-muted-foreground'
+                      )}
+                    >
+                      {count}
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,140 @@
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Tab-style filter buttons with badge counts and glow effects.
+ * Replaces pill-style filter buttons with Ghostty-inspired tab design.
+ *
+ * @module components/devenv/terminal/panel/filter-tabs
+ */
+
+'use client';
+
+import { cn } from '@/react-ui/lib/utils';
+import type { TLogLevelFilter, TLogLevel } from './TerminalLogsPanel.types';
+
+/**
+ * Props for TerminalFilterTabs component.
+ */
+export interface ITerminalFilterTabsProps {
+  /** Current log level filter */
+  filterLevel: TLogLevelFilter;
+
+  /** Log level counts for badges */
+  levelCounts: Partial<Record<TLogLevel, number>>;
+
+  /** Callback when filter level changes */
+  onFilterChange: (level: TLogLevelFilter) => void;
+
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Log level filter tab configurations.
+ */
+const FILTER_TABS: Array<{ value: TLogLevelFilter; label: string; shortcut: string }> = [
+  { value: 'all', label: 'ALL', shortcut: 'Ctrl+1' },
+  { value: 'trace', label: 'TRACE', shortcut: 'Ctrl+2' },
+  { value: 'debug', label: 'DEBUG', shortcut: 'Ctrl+3' },
+  { value: 'info', label: 'INFO', shortcut: 'Ctrl+4' },
+  { value: 'warn', label: 'WARN', shortcut: 'Ctrl+5' },
+  { value: 'error', label: 'ERROR', shortcut: 'Ctrl+6' },
+  { value: 'fatal', label: 'FATAL', shortcut: 'Ctrl+7' },
+];
+
+/**
+ * Get count for a specific log level.
+ */
+function getCount(level: TLogLevelFilter, levelCounts: Partial<Record<TLogLevel, number>>): number {
+  if (level === 'all') {
+    return Object.values(levelCounts).reduce((sum, count) => sum + (count ?? 0), 0);
+  }
+  return levelCounts[level] ?? 0;
+}
+
+/**
+ * TerminalFilterTabs Component.
+ *
+ * Displays tab-style filter buttons with:
+ * - Tab-style layout (not pill buttons)
+ * - Badge count integration with glow on active
+ * - Keyboard shortcuts in tooltips
+ * - Compact horizontal arrangement
+ * - Smooth animations on state changes
+ *
+ * @example
+ * ```tsx
+ * <TerminalFilterTabs
+ *   filterLevel="all"
+ *   levelCounts={{ info: 42, warn: 3, error: 1 }}
+ *   onFilterChange={(level) => setFilterLevel(level)}
+ * />
+ * ```
+ */
+export function TerminalFilterTabs({
+  filterLevel,
+  levelCounts,
+  onFilterChange,
+  className,
+}: ITerminalFilterTabsProps) {
+  return (
+    <div className={cn(
+      'flex items-center gap-1 px-3 h-12',
+      // Stepping colors para más contraste
+      'bg-gradient-to-b from-background/90 to-background/85',
+      // Enhanced border: top light reflection, bottom dark shadow
+      'border-t border-white/10 border-b border-border/60',
+      // Multi-layer inset shadows for depth
+      'shadow-[inset_0_1px_0_0_rgba(255,255,255,0.2),inset_0_-1px_0_0_rgba(0,0,0,0.08)]',
+      className
+    )}>
+      {FILTER_TABS.map((tab) => {
+        const count = getCount(tab.value, levelCounts);
+        const isActive = filterLevel === tab.value;
+        const showBadge = count > 0;
+
+        return (
+          <button
+            key={tab.value}
+            type="button"
+            onClick={() => onFilterChange(tab.value)}
+            className={cn(
+              'group relative flex items-center gap-1.5 px-3 py-1.5 h-9 rounded-t-md font-mono text-xs font-bold uppercase tracking-wider transition-all duration-200 flex-shrink-0',
+              isActive
+                ? 'bg-background text-foreground border-b-2 border-b-primary shadow-[0_0_8px_hsla(330,85%,43%,0.25)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.35)]'
+                : 'bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)] hover:-translate-y-0.5'
+            )}
+            title={`${tab.label} logs (${count}) - ${tab.shortcut}`}
+          >
+            {/* Tab Label */}
+            <span>{tab.label}</span>
+
+            {/* Badge with Enhanced Glow on Active */}
+            {showBadge && (
+              <span
+                className={cn(
+                  'inline-flex items-center justify-center',
+                  'px-1.5 py-0.5 min-w-[1.25rem] h-4',
+                  'rounded font-mono text-[10px] font-bold transition-all duration-200',
+                  isActive
+                    ? 'bg-primary/20 text-primary shadow-[0_0_6px_hsla(330,85%,43%,0.4),0_0_12px_hsla(330,85%,43%,0.2)]'
+                    : 'bg-muted/40 text-muted-foreground'
+                )}
+              >
+                {count}
+              </span>
+            )}
+
+            {/* Active Tab Glow Effect */}
+            {isActive && (
+              <>
+                <div className="absolute inset-0 rounded-t-md bg-primary/5 pointer-events-none" />
+                <div className="absolute inset-0 rounded-t-md bg-gradient-to-t from-primary/10 to-transparent pointer-events-none" />
+              </>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,68 @@
+/**
+ * TerminalInteractivePanel Router.
+ *
+ * Thin router that delegates to the xterm or restty panel based on
+ * the `renderer` prop or global terminal settings. Both panels are
+ * lazy-loaded for code-splitting — restty's WASM bundle is only
+ * fetched when the user selects the GPU renderer.
+ *
+ * @module components/devenv/terminal/panel/interactive
+ */
+
+'use client';
+
+import { lazy, Suspense, forwardRef } from 'react';
+import type { ITerminalInteractivePanelProps, ITerminalInteractivePanelRef } from './TerminalInteractivePanel.types';
+import { useTerminalSettings } from '../hooks/useTerminalSettings';
+
+const TerminalInteractivePanelXterm = lazy(() =>
+  import('./TerminalInteractivePanelXterm').then((m) => ({ default: m.TerminalInteractivePanelXterm }))
+);
+const TerminalInteractivePanelRestty = lazy(() =>
+  import('./TerminalInteractivePanelRestty').then((m) => ({ default: m.TerminalInteractivePanelRestty }))
+);
+
+/**
+ * TerminalInteractivePanel Component.
+ *
+ * Routes to the appropriate renderer-specific panel. The `renderer`
+ * prop overrides the global setting from `useTerminalSettings`,
+ * allowing per-panel control when needed.
+ *
+ * Consumer code is unchanged — same component name, same props, same ref.
+ *
+ * @example
+ * ```tsx
+ * // Uses global setting (default: xterm)
+ * <TerminalInteractivePanel
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ * />
+ *
+ * // Force restty renderer for this instance
+ * <TerminalInteractivePanel
+ *   renderer="restty"
+ *   containerName="mks-devenv"
+ *   wsUrl="ws://localhost:3100/terminal/session-1"
+ * />
+ * ```
+ */
+export const TerminalInteractivePanel = forwardRef<
+  ITerminalInteractivePanelRef,
+  ITerminalInteractivePanelProps
+>((props, ref) => {
+  const { settings } = useTerminalSettings();
+  const renderer = props.renderer ?? settings.renderer;
+
+  return (
+    <Suspense fallback={<div className="min-h-[400px] bg-[#241B2F]" />}>
+      {renderer === 'restty' ? (
+        <TerminalInteractivePanelRestty ref={ref} {...props} />
+      ) : (
+        <TerminalInteractivePanelXterm ref={ref} {...props} />
+      )}
+    </Suspense>
+  );
+});
+
+TerminalInteractivePanel.displayName = 'TerminalInteractivePanel';

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

@@ -0,0 +1,85 @@
+/**
+ * Types for TerminalInteractivePanel component.
+ *
+ * @module components/devenv/terminal/panel/interactive/types
+ */
+
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+
+/**
+ * Props for TerminalInteractivePanel component.
+ *
+ * Configures the interactive terminal with WebSocket connection,
+ * session management, and lifecycle callbacks.
+ */
+export interface ITerminalInteractivePanelProps {
+  /** Container/session name displayed in header */
+  containerName: string;
+
+  /** WebSocket URL for terminal connection (ws:// or wss://) */
+  wsUrl: string;
+
+  /**
+   * Terminal renderer to use.
+   * - `xterm`: xterm.js DOM/canvas renderer (default)
+   * - `restty`: GPU-accelerated WebGPU/WebGL2 renderer
+   */
+  renderer?: 'xterm' | 'restty';
+
+  /**
+   * PTY backend type.
+   * - `nodepty`: node-pty via WebSocket (default)
+   * - `webcontainer`: @webcontainer/api in-browser
+   */
+  ptyBackend?: 'nodepty' | 'webcontainer';
+
+  /** Session tabs (optional for single-session mode) */
+  sessions?: ITerminalSession[];
+
+  /** Currently active session ID */
+  activeSessionId?: string | null;
+
+  /** Callback when session tab is clicked */
+  onSessionChange?: (sessionId: string) => void;
+
+  /** Callback when session tab close is clicked */
+  onSessionClose?: (sessionId: string) => void;
+
+  /** Callback when new session button is clicked */
+  onNewSession?: () => void;
+
+  /** Lifecycle: connection established */
+  onConnect?: () => void;
+
+  /** Lifecycle: connection lost */
+  onDisconnect?: () => void;
+
+  /** Lifecycle: error occurred */
+  onError?: (error: string) => void;
+
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Imperative handle for TerminalInteractivePanel.
+ *
+ * Exposes terminal control methods to parent components
+ * via React.forwardRef + useImperativeHandle.
+ */
+export interface ITerminalInteractivePanelRef {
+  /** Write text directly to terminal display */
+  write: (text: string) => void;
+
+  /** Clear terminal display */
+  clear: () => void;
+
+  /** Focus terminal for input */
+  focus: () => void;
+
+  /** Send raw input to backend via WebSocket */
+  sendInput: (data: string) => void;
+
+  /** Check if WebSocket is connected */
+  isConnected: () => boolean;
+}