@siteboon/claude-code-ui 1.8.2 → 1.8.3

package/src/components/StandaloneShell.jsx

@@ -1,106 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Shell from './Shell.jsx';
-
-/**
- * Generic Shell wrapper that can be used in tabs, modals, and other contexts.
- * Provides a flexible API for both standalone and session-based usage.
- * 
- * @param {Object} project - Project object with name, fullPath/path, displayName
- * @param {Object} session - Session object (optional, for tab usage)
- * @param {string} command - Initial command to run (optional)
- * @param {boolean} isActive - Whether the shell is active (for tab usage, default: true)
- * @param {boolean} isPlainShell - Use plain shell mode vs Claude CLI (default: auto-detect)
- * @param {boolean} autoConnect - Whether to auto-connect when mounted (default: true)
- * @param {function} onComplete - Callback when process completes (receives exitCode)
- * @param {function} onClose - Callback for close button (optional)
- * @param {string} title - Custom header title (optional)
- * @param {string} className - Additional CSS classes
- * @param {boolean} showHeader - Whether to show custom header (default: true)
- * @param {boolean} compact - Use compact layout (default: false)
- */
-function StandaloneShell({
-  project,
-  session = null,
-  command = null,
-  isActive = true,
-  isPlainShell = null, // Auto-detect: true if command provided, false if session provided
-  autoConnect = true,
-  onComplete = null,
-  onClose = null,
-  title = null,
-  className = "",
-  showHeader = true,
-  compact = false
-}) {
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  // Auto-detect isPlainShell based on props
-  const shouldUsePlainShell = isPlainShell !== null ? isPlainShell : (command !== null);
-
-  // Handle process completion
-  const handleProcessComplete = (exitCode) => {
-    setIsCompleted(true);
-    if (onComplete) {
-      onComplete(exitCode);
-    }
-  };
-
-  if (!project) {
-    return (
-      <div className={`h-full flex items-center justify-center ${className}`}>
-        <div className="text-center text-gray-500 dark:text-gray-400">
-          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center">
-            <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 002 2z" />
-            </svg>
-          </div>
-          <h3 className="text-lg font-semibold mb-2">No Project Selected</h3>
-          <p>A project is required to open a shell</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={`h-full flex flex-col ${className}`}>
-      {/* Optional custom header */}
-      {showHeader && title && (
-        <div className="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center space-x-2">
-              <h3 className="text-sm font-medium text-gray-200">{title}</h3>
-              {isCompleted && (
-                <span className="text-xs text-green-400">(Completed)</span>
-              )}
-            </div>
-            {onClose && (
-              <button
-                onClick={onClose}
-                className="text-gray-400 hover:text-white"
-                title="Close"
-              >
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Shell component wrapper */}
-      <div className="flex-1">
-        <Shell
-          selectedProject={project}
-          selectedSession={session}
-          isActive={isActive}
-          initialCommand={command}
-          isPlainShell={shouldUsePlainShell}
-          onProcessComplete={handleProcessComplete}
-        />
-      </div>
-    </div>
-  );
-}
-
-export default StandaloneShell;

package/src/components/TaskCard.jsx

@@ -1,210 +0,0 @@
-import React from 'react';
-import { Clock, CheckCircle, Circle, AlertCircle, Pause, X, ArrowRight, ChevronUp, Minus, Flag } from 'lucide-react';
-import { cn } from '../lib/utils';
-import Tooltip from './Tooltip';
-
-const TaskCard = ({ 
-  task,
-  onClick,
-  showParent = false,
-  className = ''
-}) => {
-  const getStatusConfig = (status) => {
-    switch (status) {
-      case 'done':
-        return {
-          icon: CheckCircle,
-          bgColor: 'bg-green-50 dark:bg-green-950',
-          borderColor: 'border-green-200 dark:border-green-800',
-          iconColor: 'text-green-600 dark:text-green-400',
-          textColor: 'text-green-900 dark:text-green-100',
-          statusText: 'Done'
-        };
-      
-      case 'in-progress':
-        return {
-          icon: Clock,
-          bgColor: 'bg-blue-50 dark:bg-blue-950',
-          borderColor: 'border-blue-200 dark:border-blue-800',
-          iconColor: 'text-blue-600 dark:text-blue-400',
-          textColor: 'text-blue-900 dark:text-blue-100',
-          statusText: 'In Progress'
-        };
-      
-      case 'review':
-        return {
-          icon: AlertCircle,
-          bgColor: 'bg-amber-50 dark:bg-amber-950',
-          borderColor: 'border-amber-200 dark:border-amber-800',
-          iconColor: 'text-amber-600 dark:text-amber-400',
-          textColor: 'text-amber-900 dark:text-amber-100',
-          statusText: 'Review'
-        };
-      
-      case 'deferred':
-        return {
-          icon: Pause,
-          bgColor: 'bg-gray-50 dark:bg-gray-800',
-          borderColor: 'border-gray-200 dark:border-gray-700',
-          iconColor: 'text-gray-500 dark:text-gray-400',
-          textColor: 'text-gray-700 dark:text-gray-300',
-          statusText: 'Deferred'
-        };
-      
-      case 'cancelled':
-        return {
-          icon: X,
-          bgColor: 'bg-red-50 dark:bg-red-950',
-          borderColor: 'border-red-200 dark:border-red-800',
-          iconColor: 'text-red-600 dark:text-red-400',
-          textColor: 'text-red-900 dark:text-red-100',
-          statusText: 'Cancelled'
-        };
-      
-      case 'pending':
-      default:
-        return {
-          icon: Circle,
-          bgColor: 'bg-slate-50 dark:bg-slate-800',
-          borderColor: 'border-slate-200 dark:border-slate-700',
-          iconColor: 'text-slate-500 dark:text-slate-400',
-          textColor: 'text-slate-900 dark:text-slate-100',
-          statusText: 'Pending'
-        };
-    }
-  };
-
-  const config = getStatusConfig(task.status);
-  const Icon = config.icon;
-
-  const getPriorityIcon = (priority) => {
-    switch (priority) {
-      case 'high':
-        return (
-          <Tooltip content="High Priority">
-            <div className="w-4 h-4 bg-red-100 dark:bg-red-900/30 rounded flex items-center justify-center">
-              <ChevronUp className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'medium':
-        return (
-          <Tooltip content="Medium Priority">
-            <div className="w-4 h-4 bg-amber-100 dark:bg-amber-900/30 rounded flex items-center justify-center">
-              <Minus className="w-2.5 h-2.5 text-amber-600 dark:text-amber-400" />
-            </div>
-          </Tooltip>
-        );
-      case 'low':
-        return (
-          <Tooltip content="Low Priority">
-            <div className="w-4 h-4 bg-blue-100 dark:bg-blue-900/30 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-blue-600 dark:text-blue-400 fill-current" />
-            </div>
-          </Tooltip>
-        );
-      default:
-        return (
-          <Tooltip content="No Priority Set">
-            <div className="w-4 h-4 bg-gray-100 dark:bg-gray-800 rounded flex items-center justify-center">
-              <Circle className="w-1.5 h-1.5 text-gray-400 dark:text-gray-500" />
-            </div>
-          </Tooltip>
-        );
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700',
-        'hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 cursor-pointer',
-        'p-3 space-y-3',
-        onClick && 'hover:-translate-y-0.5',
-        className
-      )}
-      onClick={onClick}
-    >
-      {/* Header with Task ID, Title, and Priority */}
-      <div className="flex items-start justify-between gap-2 mb-2">
-        {/* Task ID and Title */}
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
-            <Tooltip content={`Task ID: ${task.id}`}>
-              <span className="text-xs font-mono text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded">
-                {task.id}
-              </span>
-            </Tooltip>
-          </div>
-          <h3 className="font-medium text-sm text-gray-900 dark:text-white line-clamp-2 leading-tight">
-            {task.title}
-          </h3>
-          {showParent && task.parentId && (
-            <span className="text-xs text-gray-500 dark:text-gray-400 font-medium">
-              Task {task.parentId}
-            </span>
-          )}
-        </div>
-        
-        {/* Priority Icon */}
-        <div className="flex-shrink-0">
-          {getPriorityIcon(task.priority)}
-        </div>
-      </div>
-
-      {/* Footer with Dependencies and Status */}
-      <div className="flex items-center justify-between">
-        {/* Dependencies */}
-        <div className="flex items-center">
-          {task.dependencies && Array.isArray(task.dependencies) && task.dependencies.length > 0 && (
-            <Tooltip content={`Depends on: ${task.dependencies.map(dep => `Task ${dep}`).join(', ')}`}>
-              <div className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
-                <ArrowRight className="w-3 h-3" />
-                <span>Depends on: {task.dependencies.join(', ')}</span>
-              </div>
-            </Tooltip>
-          )}
-        </div>
-
-        {/* Status Badge */}
-        <Tooltip content={`Status: ${config.statusText}`}>
-          <div className="flex items-center gap-1">
-            <div className={cn('w-2 h-2 rounded-full', config.iconColor.replace('text-', 'bg-'))} />
-            <span className={cn('text-xs font-medium', config.textColor)}>
-              {config.statusText}
-            </span>
-          </div>
-        </Tooltip>
-      </div>
-
-      {/* Subtask Progress (if applicable) */}
-      {task.subtasks && task.subtasks.length > 0 && (
-        <div className="ml-3">
-          <div className="flex items-center gap-2 mb-1">
-            <span className="text-xs text-gray-500 dark:text-gray-400">Progress:</span>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} of ${task.subtasks.length} subtasks completed`}>
-              <div className="flex-1 bg-gray-200 dark:bg-gray-700 rounded-full h-1.5">
-                <div 
-                  className={cn(
-                    'h-full rounded-full transition-all duration-300',
-                    task.status === 'done' ? 'bg-green-500' : 'bg-blue-500'
-                  )}
-                  style={{
-                    width: `${Math.round((task.subtasks.filter(st => st.status === 'done').length / task.subtasks.length) * 100)}%`
-                  }}
-                />
-              </div>
-            </Tooltip>
-            <Tooltip content={`${task.subtasks.filter(st => st.status === 'done').length} completed, ${task.subtasks.filter(st => st.status === 'pending').length} pending, ${task.subtasks.filter(st => st.status === 'in-progress').length} in progress`}>
-              <span className="text-xs text-gray-500 dark:text-gray-400">
-                {task.subtasks.filter(st => st.status === 'done').length}/{task.subtasks.length}
-              </span>
-            </Tooltip>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TaskCard;