@mks2508/mks-ui 0.3.2 → 0.5.0

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

@@ -0,0 +1,252 @@
+/**
+ * TerminalSessionControl Component.
+ *
+ * Ghostty-inspired session control with current session display,
+ * dropdown selector for containers, and close button.
+ *
+ * @module components/devenv/terminal/panel/session-control
+ */
+
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { PlusIcon, XIcon } from '@/react-ui/icons/lucide-animated';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Container information for dropdown display.
+ */
+export interface IContainerOption {
+  id: string;
+  name: string;
+  state: string;
+}
+
+/**
+ * Props for TerminalSessionControl component.
+ */
+export interface ITerminalSessionControlProps {
+  /** Current container name */
+  currentContainer?: string | null;
+
+  /** Available containers to select from */
+  containers: IContainerOption[];
+
+  /** Whether currently connected/streaming */
+  isConnected: boolean;
+
+  /** Callback when container is selected */
+  onContainerSelect: (containerName: string) => void;
+
+  /** Callback when close button is clicked (stop streaming) */
+  onClose: () => void;
+
+  /** Callback when refresh is clicked */
+  onRefresh?: () => void;
+
+  /** Custom class name */
+  className?: string;
+}
+
+/**
+ * TerminalSessionControl Component.
+ *
+ * Displays compact session control with:
+ * - Current container name with status indicator
+ * - Dropdown button (+) to select from available containers
+ * - Close button (X) to stop streaming and deselect
+ * - Refresh button (optional)
+ *
+ * @example
+ * ```tsx
+ * <TerminalSessionControl
+ *   currentContainer="devenv-agent-backend"
+ *   containers={containers}
+ *   isConnected={true}
+ *   onContainerSelect={(name) => selectContainer(name)}
+ *   onClose={() => stopStreaming()}
+ *   onRefresh={() => loadContainers()}
+ * />
+ * ```
+ */
+export function TerminalSessionControl({
+  currentContainer,
+  containers,
+  isConnected,
+  onContainerSelect,
+  onClose,
+  onRefresh,
+  className,
+}: ITerminalSessionControlProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Get display name for current container
+  const displayName = currentContainer || 'No container selected';
+
+  // Get available containers (excluding current)
+  const availableContainers = currentContainer
+    ? containers.filter((c) => c.name !== currentContainer)
+    : containers;
+
+  const handleContainerClick = (containerName: string) => {
+    onContainerSelect(containerName);
+    setIsDropdownOpen(false);
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center gap-2 px-4 h-12',
+        'bg-background/60 border-b border-border/30',
+        className
+      )}
+    >
+      {/* Current Session Info */}
+      <div className="flex items-center gap-3 flex-1 min-w-0">
+        {/* Status Indicator */}
+        <div
+          className={cn(
+            'w-2 h-2 rounded-full flex-shrink-0 transition-all duration-300',
+            isConnected
+              ? 'bg-success/80 shadow-[0_0_8px_hsla(142,100%,62%,0.5)] animate-pulse'
+              : 'bg-muted-foreground/60'
+          )}
+        />
+
+        {/* Container Name */}
+        <div className="flex-1 min-w-0">
+          <h3 className="text-sm font-mono font-medium text-foreground/90 truncate">
+            {displayName}
+          </h3>
+          {currentContainer && (
+            <span className="text-[10px] font-mono text-muted-foreground/70 ml-2">
+              {isConnected ? '● Live' : '○ Connecting'}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className="flex items-center gap-1">
+        {/* Dropdown Selector Button */}
+        {availableContainers.length > 0 && (
+          <div className="relative" ref={dropdownRef}>
+            <button
+              type="button"
+              onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+              className={cn(
+                'flex items-center justify-center h-8 px-2 rounded-md',
+                'transition-colors duration-200 flex-shrink-0',
+                'bg-muted/30 text-muted-foreground hover:bg-primary/20 hover:text-primary',
+                'hover:shadow-[0_0_10px_hsla(330,85%,43%,0.2)]'
+              )}
+              aria-label="Select container"
+              title="Select container (Ctrl+Tab)"
+            >
+              <PlusIcon className="w-4 h-4 flex-shrink-0" />
+            </button>
+
+            {/* Dropdown Menu */}
+            {isDropdownOpen && (
+              <div className="absolute right-0 top-full mt-1 z-50 min-w-[200px]">
+                <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">
+                    Select Container
+                  </div>
+                  {availableContainers.map((container) => (
+                    <button
+                      key={container.id}
+                      type="button"
+                      onClick={() => handleContainerClick(container.name)}
+                      className={cn(
+                        'w-full px-3 py-2 text-left flex items-center gap-2',
+                        'transition-colors duration-150',
+                        'hover:bg-primary/10 hover:text-primary',
+                        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>
+        )}
+
+        {/* Refresh Button (optional) */}
+        {onRefresh && (
+          <button
+            type="button"
+            onClick={onRefresh}
+            className={cn(
+              'flex items-center justify-center h-8 w-8 rounded-md',
+              'transition-colors duration-200 flex-shrink-0',
+              'bg-muted/30 text-muted-foreground hover:bg-muted/50'
+            )}
+            aria-label="Refresh containers"
+            title="Refresh containers"
+          >
+            <svg
+              className="w-4 h-4 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              strokeWidth={2}
+            >
+              <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+              <path d="M3 3v5h5" />
+              <path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" />
+              <path d="M16 16h5v5" />
+            </svg>
+          </button>
+        )}
+
+        {/* Close Session Button */}
+        {currentContainer && (
+          <button
+            type="button"
+            onClick={onClose}
+            className={cn(
+              'flex items-center justify-center h-8 w-8 rounded-md',
+              'transition-colors duration-200 flex-shrink-0',
+              'bg-muted/30 text-muted-foreground hover:bg-destructive/20 hover:text-destructive',
+              'hover:shadow-[0_0_10px_hsla(0,84%,60%,0.2)]'
+            )}
+            aria-label="Close session"
+            title="Close session and stop streaming"
+          >
+            <XIcon className="w-4 h-4 flex-shrink-0" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

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>
+  );
+}