agent-relay 2.0.22 → 2.0.24

package/packages/dashboard/ui/react-components/WorkspaceSelector.tsx

@@ -1,234 +0,0 @@
-/**
- * Workspace Selector Component
- *
- * Dropdown/list for switching between workspaces (repositories).
- * Connects to the orchestrator API for workspace management.
- */
-
-import React, { useState, useRef, useEffect } from 'react';
-
-export interface Workspace {
-  id: string;
-  name: string;
-  path: string;
-  status: 'active' | 'inactive' | 'error';
-  provider: 'claude' | 'codex' | 'gemini' | 'generic';
-  gitBranch?: string;
-  gitRemote?: string;
-  lastActiveAt: Date;
-}
-
-export interface WorkspaceSelectorProps {
-  workspaces: Workspace[];
-  activeWorkspaceId?: string;
-  onSelect: (workspace: Workspace) => void;
-  onAddWorkspace: () => void;
-  onWorkspaceSettings?: () => void;
-  isLoading?: boolean;
-}
-
-export function WorkspaceSelector({
-  workspaces,
-  activeWorkspaceId,
-  onSelect,
-  onAddWorkspace,
-  onWorkspaceSettings,
-  isLoading = false,
-}: WorkspaceSelectorProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const activeWorkspace = workspaces.find((w) => w.id === activeWorkspaceId);
-
-  // Close on outside click
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  // Close on escape
-  useEffect(() => {
-    const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, []);
-
-  return (
-    <div className="relative w-full" ref={dropdownRef}>
-      <button
-        className="w-full flex items-center gap-2 px-3 py-2.5 bg-[#2a2a3e] border border-[#3a3a4e] rounded-lg text-[#e8e8e8] text-sm cursor-pointer transition-all hover:bg-[#3a3a4e] hover:border-[#4a4a5e] disabled:opacity-60 disabled:cursor-not-allowed"
-        onClick={() => setIsOpen(!isOpen)}
-        disabled={isLoading}
-      >
-        {isLoading ? (
-          <span className="flex-1 text-left text-[#666]">Loading...</span>
-        ) : activeWorkspace ? (
-          <>
-            <ProviderIcon provider={activeWorkspace.provider} />
-            <span className="flex-1 text-left font-medium">{activeWorkspace.name}</span>
-            {activeWorkspace.gitBranch && (
-              <span className="flex items-center gap-1 text-xs text-[#888] bg-white/5 px-1.5 py-0.5 rounded">
-                <BranchIcon />
-                {activeWorkspace.gitBranch}
-              </span>
-            )}
-          </>
-        ) : (
-          <span className="flex-1 text-left text-[#666]">Select workspace...</span>
-        )}
-        <ChevronIcon isOpen={isOpen} />
-      </button>
-
-      {isOpen && (
-        <div className="absolute top-[calc(100%+4px)] left-0 right-0 bg-[#1a1a2e] border border-[#3a3a4e] rounded-lg shadow-[0_10px_40px_rgba(0,0,0,0.4)] z-[1000] overflow-hidden">
-          <div className="max-h-[300px] overflow-y-auto">
-            {workspaces.length === 0 ? (
-              <div className="py-6 px-4 text-center text-[#666] text-[13px] leading-relaxed">
-                No workspaces added yet.
-                <br />
-                Add a repository to get started.
-              </div>
-            ) : (
-              workspaces.map((workspace) => (
-                <button
-                  key={workspace.id}
-                  className={`w-full flex items-center gap-2.5 px-3 py-2.5 bg-transparent border-none text-[#e8e8e8] text-sm cursor-pointer transition-colors text-left hover:bg-white/5 ${
-                    workspace.id === activeWorkspaceId ? 'bg-[rgba(0,200,150,0.1)]' : ''
-                  }`}
-                  onClick={() => {
-                    onSelect(workspace);
-                    setIsOpen(false);
-                  }}
-                >
-                  <ProviderIcon provider={workspace.provider} />
-                  <div className="flex-1 flex flex-col gap-0.5 min-w-0">
-                    <span className="font-medium">{workspace.name}</span>
-                    <span className="text-[11px] text-[#666] overflow-hidden text-ellipsis whitespace-nowrap">
-                      {workspace.path}
-                    </span>
-                  </div>
-                  <StatusIndicator status={workspace.status} />
-                </button>
-              ))
-            )}
-          </div>
-
-          <div className="p-2 border-t border-[#3a3a4e] space-y-1.5">
-            {onWorkspaceSettings && activeWorkspace && (
-              <button
-                className="w-full flex items-center justify-center gap-1.5 px-3 py-2 bg-transparent border border-[#3a3a4e] rounded-md text-[#888] text-[13px] cursor-pointer transition-all hover:bg-white/5 hover:border-[#4a4a5e] hover:text-[#e8e8e8]"
-                onClick={() => {
-                  onWorkspaceSettings();
-                  setIsOpen(false);
-                }}
-              >
-                <SettingsIcon />
-                Workspace Settings
-              </button>
-            )}
-            <button
-              className="w-full flex items-center justify-center gap-1.5 px-3 py-2 bg-transparent border border-dashed border-[#3a3a4e] rounded-md text-[#888] text-[13px] cursor-pointer transition-all hover:bg-white/5 hover:border-[#4a4a5e] hover:text-[#e8e8e8]"
-              onClick={onAddWorkspace}
-            >
-              <PlusIcon />
-              Add Workspace
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function ProviderIcon({ provider }: { provider: string }) {
-  const icons: Record<string, string> = {
-    claude: '🤖',
-    codex: '🧠',
-    gemini: '✨',
-    generic: '📁',
-  };
-
-  return (
-    <span className="text-base" title={provider}>
-      {icons[provider] || icons.generic}
-    </span>
-  );
-}
-
-function StatusIndicator({ status }: { status: string }) {
-  const colors: Record<string, string> = {
-    active: 'bg-green-500',
-    inactive: 'bg-gray-500',
-    error: 'bg-red-500',
-  };
-
-  return (
-    <span
-      className={`w-2 h-2 rounded-full flex-shrink-0 ${colors[status] || colors.inactive}`}
-      title={status}
-    />
-  );
-}
-
-function ChevronIcon({ isOpen }: { isOpen: boolean }) {
-  return (
-    <svg
-      className={`text-[#666] transition-transform ${isOpen ? 'rotate-180' : ''}`}
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <polyline points="6 9 12 15 18 9" />
-    </svg>
-  );
-}
-
-function BranchIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <line x1="6" y1="3" x2="6" y2="15" />
-      <circle cx="18" cy="6" r="3" />
-      <circle cx="6" cy="18" r="3" />
-      <path d="M18 9a9 9 0 0 1-9 9" />
-    </svg>
-  );
-}
-
-function PlusIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  );
-}
-
-function SettingsIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="12" cy="12" r="3" />
-      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-    </svg>
-  );
-}

package/packages/dashboard/ui/react-components/WorkspaceStatusIndicator.tsx

@@ -1,370 +0,0 @@
-/**
- * Workspace Status Indicator
- *
- * Shows workspace status in the dashboard with visual indicators:
- * - Running (green): Workspace is active and ready
- * - Stopped (amber): Workspace is idle, can be woken up
- * - Provisioning (cyan): Workspace is being created
- * - Error (red): Workspace has an issue
- * - None (gray): No workspace exists
- */
-
-import React, { useCallback, useState } from 'react';
-import { useWorkspaceStatus } from './hooks/useWorkspaceStatus';
-
-export interface WorkspaceStatusIndicatorProps {
-  /** Show expanded view with details (default: false) */
-  expanded?: boolean;
-  /** Auto-wakeup when workspace is stopped (default: false) */
-  autoWakeup?: boolean;
-  /** Callback when wakeup is triggered */
-  onWakeup?: () => void;
-  /** Callback when status changes */
-  onStatusChange?: (status: string) => void;
-  /** Custom class name */
-  className?: string;
-}
-
-export function WorkspaceStatusIndicator({
-  expanded = false,
-  autoWakeup = false,
-  onWakeup,
-  onStatusChange,
-  className = '',
-}: WorkspaceStatusIndicatorProps) {
-  const [showToast, setShowToast] = useState(false);
-  const [toastMessage, setToastMessage] = useState('');
-
-  const {
-    workspace,
-    exists,
-    isLoading,
-    isWakingUp,
-    statusMessage,
-    actionNeeded,
-    wakeup,
-  } = useWorkspaceStatus({
-    autoWakeup,
-    onStatusChange: (status, wasRestarted) => {
-      onStatusChange?.(status);
-      if (wasRestarted) {
-        setToastMessage('Workspace is starting up...');
-        setShowToast(true);
-        setTimeout(() => setShowToast(false), 5000);
-      } else if (status === 'running') {
-        setToastMessage('Workspace is ready!');
-        setShowToast(true);
-        setTimeout(() => setShowToast(false), 3000);
-      }
-    },
-  });
-
-  const handleWakeup = useCallback(async () => {
-    const result = await wakeup();
-    if (result.success) {
-      onWakeup?.();
-      setToastMessage(result.message);
-      setShowToast(true);
-      setTimeout(() => setShowToast(false), 5000);
-    }
-  }, [wakeup, onWakeup]);
-
-  // Get status color and icon
-  const getStatusConfig = () => {
-    if (!exists) {
-      return {
-        color: 'text-text-muted',
-        bgColor: 'bg-bg-tertiary',
-        borderColor: 'border-border-subtle',
-        icon: <NoWorkspaceIcon />,
-        label: 'No workspace',
-        pulseColor: null,
-      };
-    }
-
-    if (isLoading && !workspace) {
-      return {
-        color: 'text-text-muted',
-        bgColor: 'bg-bg-tertiary',
-        borderColor: 'border-border-subtle',
-        icon: <LoadingIcon />,
-        label: 'Loading...',
-        pulseColor: null,
-      };
-    }
-
-    if (workspace?.isRunning) {
-      return {
-        color: 'text-success',
-        bgColor: 'bg-success/10',
-        borderColor: 'border-success/30',
-        icon: <RunningIcon />,
-        label: 'Running',
-        pulseColor: 'bg-success',
-      };
-    }
-
-    if (workspace?.isStopped) {
-      return {
-        color: 'text-amber-400',
-        bgColor: 'bg-amber-400/10',
-        borderColor: 'border-amber-400/30',
-        icon: <StoppedIcon />,
-        label: 'Stopped',
-        pulseColor: null,
-      };
-    }
-
-    if (workspace?.isProvisioning || isWakingUp) {
-      return {
-        color: 'text-accent-cyan',
-        bgColor: 'bg-accent-cyan/10',
-        borderColor: 'border-accent-cyan/30',
-        icon: <ProvisioningIcon />,
-        label: isWakingUp ? 'Starting...' : 'Provisioning',
-        pulseColor: 'bg-accent-cyan',
-      };
-    }
-
-    if (workspace?.hasError) {
-      return {
-        color: 'text-error',
-        bgColor: 'bg-error/10',
-        borderColor: 'border-error/30',
-        icon: <ErrorIcon />,
-        label: 'Error',
-        pulseColor: null,
-      };
-    }
-
-    return {
-      color: 'text-text-muted',
-      bgColor: 'bg-bg-tertiary',
-      borderColor: 'border-border-subtle',
-      icon: <NoWorkspaceIcon />,
-      label: 'Unknown',
-      pulseColor: null,
-    };
-  };
-
-  const config = getStatusConfig();
-
-  // Compact indicator (for header)
-  if (!expanded) {
-    return (
-      <div className={`relative ${className}`}>
-        <div
-          className={`flex items-center gap-2 px-2.5 py-1.5 rounded-lg border ${config.bgColor} ${config.borderColor} cursor-default`}
-          title={statusMessage || config.label}
-        >
-          <span className={config.color}>{config.icon}</span>
-          <span
-            className={`text-xs font-medium ${config.color} truncate max-w-[100px]`}
-            title={statusMessage || config.label}
-          >
-            {config.label}
-          </span>
-          {config.pulseColor && (
-            <span
-              className={`w-2 h-2 rounded-full ${config.pulseColor} animate-pulse`}
-            />
-          )}
-        </div>
-
-        {/* Wakeup button for stopped state */}
-        {actionNeeded === 'wakeup' && !isWakingUp && (
-          <button
-            onClick={handleWakeup}
-            className="ml-2 px-2 py-1 text-xs font-medium text-amber-400 bg-amber-400/10 border border-amber-400/30 rounded hover:bg-amber-400/20 transition-colors"
-          >
-            Wake up
-          </button>
-        )}
-
-        {/* Toast notification */}
-        {showToast && (
-          <div className="absolute top-full mt-2 left-0 z-50 px-3 py-2 bg-bg-card border border-border-medium rounded-lg shadow-lg text-sm text-text-primary whitespace-nowrap animate-in fade-in slide-in-from-top-2">
-            {toastMessage}
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Expanded view (for sidebar or dedicated panel)
-  return (
-    <div
-      className={`rounded-lg border ${config.borderColor} ${config.bgColor} p-4 ${className}`}
-    >
-      <div className="flex items-center justify-between mb-3">
-        <div className="flex items-center gap-2">
-          <span className={config.color}>{config.icon}</span>
-          <span className={`text-sm font-semibold ${config.color}`}>
-            Workspace Status
-          </span>
-        </div>
-        {config.pulseColor && (
-          <span
-            className={`w-2.5 h-2.5 rounded-full ${config.pulseColor} animate-pulse`}
-          />
-        )}
-      </div>
-
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-text-muted">Name</span>
-          <span className="text-sm text-text-primary font-medium truncate max-w-[150px]">
-            {workspace?.name || 'None'}
-          </span>
-        </div>
-
-        <div className="flex items-center justify-between">
-          <span className="text-xs text-text-muted">Status</span>
-          <span className={`text-sm font-medium ${config.color}`}>
-            {config.label}
-          </span>
-        </div>
-
-        {statusMessage && (
-          <p className="text-xs text-text-muted mt-2">{statusMessage}</p>
-        )}
-
-        {/* Action buttons */}
-        {actionNeeded === 'wakeup' && !isWakingUp && (
-          <button
-            onClick={handleWakeup}
-            className="w-full mt-3 px-3 py-2 text-sm font-medium text-amber-400 bg-amber-400/10 border border-amber-400/30 rounded-lg hover:bg-amber-400/20 transition-colors"
-          >
-            Wake up workspace
-          </button>
-        )}
-
-        {actionNeeded === 'check_error' && (
-          <a
-            href={`/workspaces/${workspace?.id}`}
-            className="block w-full mt-3 px-3 py-2 text-sm font-medium text-center text-error bg-error/10 border border-error/30 rounded-lg hover:bg-error/20 transition-colors no-underline"
-          >
-            View error details
-          </a>
-        )}
-      </div>
-
-      {/* Toast notification */}
-      {showToast && (
-        <div className="mt-3 px-3 py-2 bg-bg-card border border-border-medium rounded-lg text-sm text-text-primary animate-in fade-in">
-          {toastMessage}
-        </div>
-      )}
-    </div>
-  );
-}
-
-// Icons
-function RunningIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polygon points="5 3 19 12 5 21 5 3" />
-    </svg>
-  );
-}
-
-function StoppedIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="6" y="6" width="12" height="12" />
-    </svg>
-  );
-}
-
-function ProvisioningIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="animate-spin"
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  );
-}
-
-function ErrorIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="15" y1="9" x2="9" y2="15" />
-      <line x1="9" y1="9" x2="15" y2="15" />
-    </svg>
-  );
-}
-
-function NoWorkspaceIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
-      <line x1="12" y1="8" x2="12" y2="16" />
-      <line x1="8" y1="12" x2="16" y2="12" />
-    </svg>
-  );
-}
-
-function LoadingIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="animate-spin"
-    >
-      <circle cx="12" cy="12" r="10" strokeOpacity="0.25" />
-      <path d="M12 2a10 10 0 0 1 10 10" />
-    </svg>
-  );
-}