@mks2508/mks-ui 0.3.1 → 0.4.0

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

@@ -0,0 +1,334 @@
+/**
+ * TerminalSessionTabs Component.
+ *
+ * Ghostty-inspired session tab bar with status indicators,
+ * glassmorphic active state, and smooth animations.
+ *
+ * @module components/devenv/terminal/panel/session-tabs
+ */
+
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { XIcon } from '@/react-ui/icons/lucide-animated';
+import { PlusIcon } from '@/react-ui/icons/lucide-animated';
+import { cn } from '@/react-ui/lib/utils';
+import type { ITerminalSession } from './TerminalLogsPanel.types';
+import styles from './terminal-session-tabs.module.css';
+
+/**
+ * Container option for dropdown.
+ */
+export interface IContainerOption {
+  id: string;
+  name: string;
+  state: string;
+}
+
+/**
+ * Props for TerminalSessionTabs component.
+ */
+export interface ITerminalSessionTabsProps {
+  /** Available sessions to display */
+  sessions: ITerminalSession[];
+
+  /** Currently active session ID */
+  activeSessionId: string | null;
+
+  /** Callback when tab is clicked */
+  onTabClick: (sessionId: string) => void;
+
+  /** Callback when close button is clicked */
+  onClose: (sessionId: string) => void;
+
+  /** Callback when new session button is clicked (optional, for refresh) */
+  onNewSession?: () => void;
+
+  /** Available containers that can be added as new tabs */
+  availableContainers?: IContainerOption[];
+
+  /** Callback when a container is selected from dropdown */
+  onAddContainer?: (containerName: string) => void;
+
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * Get status color classes based on connection state.
+ */
+function getStatusColor(status: ITerminalSession['status']): string {
+  const statusColors = {
+    connected:
+      'bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)]',
+    connecting: 'bg-yellow-500/80 animate-pulse',
+    disconnected: 'bg-muted-foreground/60',
+    error: 'bg-destructive/80 shadow-[0_0_8px_hsla(0,84%,60%,0.5)]',
+  };
+  return statusColors[status];
+}
+
+/**
+ * TerminalSessionTabs Component.
+ *
+ * Displays horizontal tab bar with:
+ * - Session name tabs with glassmorphic active state
+ * - Status indicator dots (connected/connecting/error)
+ * - Close button with hover reveal
+ * - New session "+" button with dropdown to select containers
+ * - Smooth slide animation on tab switch
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionTabs
+ *   sessions={sessions}
+ *   activeSessionId="session-1"
+ *   onTabClick={(id) => setActiveSession(id)}
+ *   onClose={(id) => closeSession(id)}
+ *   availableContainers={containers}
+ *   onAddContainer={(name) => addContainerTab(name)}
+ *   onNewSession={() => refreshContainers()}
+ * />
+ * ```
+ */
+export function TerminalSessionTabs({
+  sessions,
+  activeSessionId,
+  onTabClick,
+  onClose,
+  onNewSession,
+  availableContainers = [],
+  onAddContainer,
+  className,
+}: ITerminalSessionTabsProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const addButtonContainerRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (addButtonContainerRef.current && !addButtonContainerRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    if (isDropdownOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isDropdownOpen]);
+
+  /** Toggle dropdown or trigger new session callback. */
+  const openDropdown = () => {
+    if (availableToAdd.length > 0 && onAddContainer) {
+      setIsDropdownOpen(!isDropdownOpen);
+    } else if (onNewSession) {
+      onNewSession();
+    }
+  };
+
+  // Get containers that are not already open as tabs
+  const availableToAdd = (availableContainers || []).filter(
+    (container) => !sessions.some((session) => session.id === container.name)
+  );
+
+  // Always render if there are containers available (for + button), or if there are sessions
+  if ((availableContainers || []).length === 0 && sessions.length === 0) {
+    return null;
+  }
+
+  const activeSession = sessions.find((s) => s.id === activeSessionId);
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-1 px-3 h-12',
+        'bg-background/60',
+        'border-b border-border/30',
+        'overflow-x-auto scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/30 hover:scrollbar-thumb-border/50',
+        className
+      )}
+    >
+      {/* Session Tabs */}
+      <div className="flex items-center gap-1">
+        <AnimatePresence initial={false}>
+          {sessions.map((session) => {
+            const isActive = session.id === activeSessionId;
+
+            return (
+              <motion.div
+                key={session.id}
+                layout
+                initial={{ opacity: 0, scale: 0.85, width: 0 }}
+                animate={{ opacity: 1, scale: 1, width: 'auto' }}
+                exit={{ opacity: 0, scale: 0.85, width: 0 }}
+                transition={{ type: 'spring', stiffness: 500, damping: 30, mass: 0.8 }}
+                role="button"
+                tabIndex={0}
+                onClick={() => onTabClick(session.id)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onTabClick(session.id);
+                  }
+                }}
+                className={cn(
+                  'group relative flex items-center gap-2 px-3 py-1.5 h-9 rounded-t-lg font-mono text-xs font-medium cursor-pointer overflow-hidden',
+                  'min-w-0 max-w-[200px] flex-shrink-0',
+                  isActive
+                    ? 'bg-background text-foreground'
+                    : 'bg-muted/40 text-muted-foreground/80 hover:bg-muted/60 hover:text-foreground'
+                )}
+                title={`${session.name} - ${session.status}${session.containerName ? ` (${session.containerName})` : ''}`}
+              >
+                {/* Animated Active Indicator (slides between tabs) */}
+                {isActive && (
+                  <motion.div
+                    layoutId="active-session-tab"
+                    className="absolute inset-0 rounded-t-lg bg-gradient-to-t from-primary/12 via-primary/5 to-transparent pointer-events-none"
+                    transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+                  />
+                )}
+
+                {/* Active bottom glow bar */}
+                {isActive && (
+                  <motion.div
+                    layoutId="active-tab-glow"
+                    className="absolute bottom-0 left-1 right-1 h-0.5 rounded-full bg-primary shadow-[0_0_12px_hsla(330,85%,43%,0.6),0_0_4px_hsla(330,85%,43%,0.8)] pointer-events-none"
+                    transition={{ type: 'spring', stiffness: 400, damping: 28 }}
+                  />
+                )}
+
+                {/* Status Indicator Dot */}
+                <div
+                  className={cn(
+                    'w-1.5 h-1.5 rounded-full flex-shrink-0 relative z-10',
+                    getStatusColor(session.status)
+                  )}
+                />
+
+                {/* Session Name */}
+                <span className="truncate relative z-10">{session.name}</span>
+
+                {/* Close Button */}
+                <button
+                  type="button"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onClose(session.id);
+                  }}
+                  className={cn(
+                    'flex-shrink-0 p-0.5 rounded-sm transition-all duration-200 relative z-10',
+                    'opacity-0 group-hover:opacity-100',
+                    'hover:bg-destructive/20 hover:text-destructive hover:scale-110',
+                    isActive && 'opacity-70 hover:opacity-100'
+                  )}
+                  aria-label={`Close ${session.name}`}
+                  title={`Close ${session.name}`}
+                >
+                  <XIcon size={12} />
+                </button>
+              </motion.div>
+            );
+          })}
+        </AnimatePresence>
+      </div>
+
+      {/* New Session Button with Dropdown */}
+      <div className="relative flex-shrink-0" ref={addButtonContainerRef}>
+        <motion.button
+          type="button"
+          onClick={openDropdown}
+          whileHover={{ scale: 1.08 }}
+          whileTap={{ scale: 0.95 }}
+          className={cn(
+            styles.addButton,
+            'flex items-center justify-center h-9 w-9 p-1.5 rounded-md transition-colors duration-200 flex-shrink-0',
+            'bg-muted/50 text-muted-foreground hover:bg-primary/30 hover:text-primary',
+            'border border-border/40 hover:border-primary/50',
+            'shadow-[inset_0_0.5px_0_rgba(255,255,255,0.15)] hover:shadow-[0_0_8px_hsla(330,85%,43%,0.4)]'
+          )}
+          aria-label="New session"
+          aria-expanded={isDropdownOpen}
+          title={availableToAdd.length > 0 ? "Add container tab" : "New session (Ctrl+Shift+T)"}
+        >
+          <motion.div
+            animate={isDropdownOpen ? { rotate: 45 } : { rotate: 0 }}
+            transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+          >
+            <PlusIcon size={16} />
+          </motion.div>
+        </motion.button>
+
+        {/* Dropdown Menu - CSS Anchor Positioned (no portal needed) */}
+        <div
+          className={styles.containerDropdown}
+          data-open={isDropdownOpen && availableToAdd.length > 0}
+        >
+          <div className="glass-subtle rounded-lg py-1">
+            <div className="px-3 py-2 text-xs font-mono text-muted-foreground border-b border-white/10">
+              Add Container
+            </div>
+            {availableToAdd.map((container) => (
+              <button
+                key={container.id}
+                type="button"
+                onClick={() => {
+                  onAddContainer?.(container.name);
+                  setIsDropdownOpen(false);
+                }}
+                className={cn(
+                  'w-full px-3 py-2 text-left flex items-center gap-2',
+                  'transition-all duration-150',
+                  'hover:bg-primary/10 hover:text-primary hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.15)]',
+                  container.state === 'running' && 'text-success'
+                )}
+              >
+                {/* Container status dot */}
+                <div
+                  className={cn(
+                    'w-1.5 h-1.5 rounded-full flex-shrink-0',
+                    container.state === 'running'
+                      ? 'bg-success shadow-[0_0_4px_hsla(142,100%,62%,0.4)]'
+                      : 'bg-muted-foreground'
+                  )}
+                />
+                <div className="flex-1 min-w-0">
+                  <div className="text-sm font-mono truncate">{container.name}</div>
+                  <div className="text-[10px] text-muted-foreground truncate">
+                    {container.state}
+                  </div>
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Spacer */}
+      <div className="flex-1" />
+
+      {/* Active Session Info Badge */}
+      <AnimatePresence>
+        {activeSession && (
+          <motion.div
+            initial={{ opacity: 0, x: 12 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 12 }}
+            transition={{ type: 'spring', stiffness: 400, damping: 25 }}
+            className="flex items-center gap-2 px-2.5 py-1 rounded-md bg-muted/15 border border-border/20"
+          >
+            <span className="text-[10px] font-mono text-muted-foreground/80 uppercase tracking-widest">
+              {activeSession.backend}
+            </span>
+            <span className="w-1 h-1 rounded-full bg-primary/40" />
+            <span className="text-[10px] font-mono text-muted-foreground/80 uppercase tracking-widest">
+              {activeSession.mode}
+            </span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

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

@@ -0,0 +1,261 @@
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Gear icon popover for global terminal settings:
+ * renderer (xterm/restty), theme (458 built-in), PTY backend,
+ * and font size. Reads and writes via useTerminalSettings hook.
+ *
+ * @module components/devenv/terminal/panel/TerminalSettingsPopover
+ */
+
+'use client';
+
+import { Popover, PopoverTrigger, PopoverPortal, PopoverPositioner, PopoverPopup } from '@/react-ui/ui/Popover';
+import { Separator } from '@/react-ui/ui/Separator';
+import { SettingsIcon } from '@/react-ui/icons/lucide-animated';
+import { useTerminalSettings } from '../hooks/useTerminalSettings';
+import { TerminalThemeSelector } from './TerminalThemeSelector';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Action button base styles for the trigger icon.
+ */
+const triggerBtnStyles =
+  'h-8 w-8 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground flex-shrink-0';
+
+/**
+ * Segmented control button styles.
+ */
+const segmentedBase = 'flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium transition-all';
+const segmentedInactive = 'text-muted-foreground hover:text-foreground hover:bg-white/5 hover:shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]';
+const segmentedActive = 'bg-primary/20 text-primary border border-primary/30 shadow-[0_0_8px_hsla(330,85%,43%,0.15)] hover:shadow-[0_0_12px_hsla(330,85%,43%,0.25)]';
+
+/**
+ * Min/max font size bounds.
+ */
+const MIN_FONT_SIZE = 10;
+const MAX_FONT_SIZE = 24;
+
+/**
+ * Small control button for font size +/-.
+ */
+const fontBtnStyles =
+  'h-7 w-7 rounded-md transition-all hover:bg-muted/20 active:bg-muted/30 flex items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-30 disabled:pointer-events-none';
+
+/**
+ * TerminalSettingsPopover Component.
+ *
+ * Renders a settings gear icon that opens a popover with
+ * terminal configuration options. Reads settings from
+ * `useTerminalSettings` — no prop drilling needed.
+ *
+ * @example
+ * ```tsx
+ * // In action bar:
+ * <TerminalSettingsPopover />
+ * ```
+ */
+export function TerminalSettingsPopover() {
+  const {
+    settings,
+    setRenderer,
+    setPtyBackend,
+    setResttyThemeName,
+    setFontSize,
+    setCrtEffect,
+    setDebugPanel,
+    resetToDefaults,
+  } = useTerminalSettings();
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <button type="button" className={triggerBtnStyles} title="Terminal settings">
+          <SettingsIcon size={16} />
+        </button>
+      </PopoverTrigger>
+
+      <PopoverPortal>
+        <PopoverPositioner align="end" sideOffset={6}>
+          <PopoverPopup className="w-72 p-0 glass-subtle">
+        {/* Header */}
+        <div className="flex items-center gap-2 px-4 py-3">
+          <SettingsIcon size={14} className="text-muted-foreground" />
+          <span className="text-sm font-medium text-foreground">Terminal Settings</span>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Renderer */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Renderer
+          </label>
+          <div className="flex items-center gap-1 bg-muted/10 rounded-lg p-0.5">
+            <button
+              type="button"
+              onClick={() => setRenderer('xterm')}
+              className={cn(segmentedBase, settings.renderer === 'xterm' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              xterm
+            </button>
+            <button
+              type="button"
+              onClick={() => setRenderer('restty')}
+              className={cn(segmentedBase, settings.renderer === 'restty' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              restty
+            </button>
+          </div>
+        </div>
+
+        {/* Theme (restty only) */}
+        {settings.renderer === 'restty' && (
+          <>
+            <Separator className="bg-border/30" />
+            <div className="px-4 py-3 space-y-2">
+              <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+                Theme
+              </label>
+              <TerminalThemeSelector
+                currentTheme={settings.resttyThemeName}
+                onThemeChange={setResttyThemeName}
+              />
+            </div>
+          </>
+        )}
+
+        <Separator className="bg-border/30" />
+
+        {/* PTY Backend */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            PTY Backend
+          </label>
+          <div className="flex items-center gap-1 bg-muted/10 rounded-lg p-0.5">
+            <button
+              type="button"
+              onClick={() => setPtyBackend('nodepty')}
+              className={cn(segmentedBase, settings.ptyBackend === 'nodepty' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              nodepty
+            </button>
+            <button
+              type="button"
+              onClick={() => setPtyBackend('webcontainer')}
+              className={cn(segmentedBase, settings.ptyBackend === 'webcontainer' ? segmentedActive : segmentedInactive, 'flex-1 justify-center')}
+            >
+              webcontainer
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Font Size */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Font Size
+          </label>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setFontSize(settings.fontSize - 1)}
+              className={fontBtnStyles}
+              disabled={settings.fontSize <= MIN_FONT_SIZE}
+              title="Decrease font size"
+            >
+              <span className="text-sm font-bold">&minus;</span>
+            </button>
+            <span className="text-sm font-mono text-foreground w-8 text-center">
+              {settings.fontSize}
+            </span>
+            <button
+              type="button"
+              onClick={() => setFontSize(settings.fontSize + 1)}
+              className={fontBtnStyles}
+              disabled={settings.fontSize >= MAX_FONT_SIZE}
+              title="Increase font size"
+            >
+              <span className="text-sm font-bold">+</span>
+            </button>
+            <span className="text-[10px] font-mono text-muted-foreground/50 ml-auto">px</span>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* CRT Effect */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            CRT Effect
+          </label>
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              Scanlines, bloom &amp; vignette
+            </span>
+            <button
+              type="button"
+              onClick={() => setCrtEffect(!settings.crtEffect)}
+              className={cn(
+                'relative w-9 h-5 rounded-full transition-colors',
+                settings.crtEffect
+                  ? 'bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]'
+                  : 'bg-muted/30'
+              )}
+            >
+              <span className={cn(
+                'absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all',
+                settings.crtEffect ? 'left-[18px]' : 'left-0.5'
+              )} />
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Debug Panel */}
+        <div className="px-4 py-3 space-y-2">
+          <label className="text-[10px] font-mono text-muted-foreground uppercase tracking-wider">
+            Debug Panel
+          </label>
+          <div className="flex items-center justify-between">
+            <span className="text-xs text-muted-foreground">
+              GPU, FPS, grid &amp; connection info
+            </span>
+            <button
+              type="button"
+              onClick={() => setDebugPanel(!settings.debugPanel)}
+              className={cn(
+                'relative w-9 h-5 rounded-full transition-colors',
+                settings.debugPanel
+                  ? 'bg-primary/60 shadow-[0_0_8px_hsla(330,85%,43%,0.3)]'
+                  : 'bg-muted/30'
+              )}
+            >
+              <span className={cn(
+                'absolute top-0.5 h-4 w-4 rounded-full bg-foreground transition-all',
+                settings.debugPanel ? 'left-[18px]' : 'left-0.5'
+              )} />
+            </button>
+          </div>
+        </div>
+
+        <Separator className="bg-border/30" />
+
+        {/* Reset */}
+        <div className="px-4 py-3">
+          <button
+            type="button"
+            onClick={resetToDefaults}
+            className="w-full h-8 rounded-md text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors"
+          >
+            Reset to Defaults
+          </button>
+        </div>
+          </PopoverPopup>
+        </PopoverPositioner>
+      </PopoverPortal>
+    </Popover>
+  );
+}