@mks2508/mks-ui 0.5.7 → 0.6.0

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

@@ -1,252 +0,0 @@
-/**
- * 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

@@ -1,334 +0,0 @@
-/**
- * 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>
-  );
-}