@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/WorkspaceSelector.tsx

@@ -0,0 +1,234 @@
+/**
+ * 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-bg-secondary border border-border rounded-lg text-text-primary text-sm cursor-pointer transition-all hover:bg-bg-tertiary hover:border-border-medium disabled:opacity-60 disabled:cursor-not-allowed"
+        onClick={() => setIsOpen(!isOpen)}
+        disabled={isLoading}
+      >
+        {isLoading ? (
+          <span className="flex-1 text-left text-text-muted">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-text-muted bg-bg-hover px-1.5 py-0.5 rounded">
+                <BranchIcon />
+                {activeWorkspace.gitBranch}
+              </span>
+            )}
+          </>
+        ) : (
+          <span className="flex-1 text-left text-text-muted">Select workspace...</span>
+        )}
+        <ChevronIcon isOpen={isOpen} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute top-[calc(100%+4px)] left-0 right-0 bg-bg-card border border-border rounded-lg shadow-modal z-[1000] overflow-hidden">
+          <div className="max-h-[300px] overflow-y-auto">
+            {workspaces.length === 0 ? (
+              <div className="py-6 px-4 text-center text-text-muted 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-text-primary text-sm cursor-pointer transition-colors text-left hover:bg-bg-hover ${
+                    workspace.id === activeWorkspaceId ? 'bg-success-light' : ''
+                  }`}
+                  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-text-muted overflow-hidden text-ellipsis whitespace-nowrap">
+                      {workspace.path}
+                    </span>
+                  </div>
+                  <StatusIndicator status={workspace.status} />
+                </button>
+              ))
+            )}
+          </div>
+
+          <div className="p-2 border-t border-border 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-border rounded-md text-text-muted text-[13px] cursor-pointer transition-all hover:bg-bg-hover hover:border-border-medium hover:text-text-primary"
+                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-border rounded-md text-text-muted text-[13px] cursor-pointer transition-all hover:bg-bg-hover hover:border-border-medium hover:text-text-primary"
+              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-text-muted 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/src/components/WorkspaceStatusIndicator.tsx

@@ -0,0 +1,396 @@
+/**
+ * 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 { cloudApi } from '../lib/cloudApi';
+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 [isRestarting, setIsRestarting] = useState(false);
+
+  const handleWakeup = useCallback(async () => {
+    const result = await wakeup();
+    if (result.success) {
+      onWakeup?.();
+      setToastMessage(result.message);
+      setShowToast(true);
+      setTimeout(() => setShowToast(false), 5000);
+    }
+  }, [wakeup, onWakeup]);
+
+  const handleRestart = useCallback(async () => {
+    if (!workspace) return;
+    setIsRestarting(true);
+    const result = await cloudApi.restartWorkspace(workspace.id);
+    if (result.success) {
+      setToastMessage(result.data.message);
+    } else {
+      setToastMessage(result.error);
+    }
+    setShowToast(true);
+    setTimeout(() => setShowToast(false), 5000);
+    setIsRestarting(false);
+  }, [workspace]);
+
+  // 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' && (
+          <div className="flex gap-2 mt-3">
+            <button
+              onClick={handleRestart}
+              disabled={isRestarting}
+              className="flex-1 px-3 py-2 text-sm font-medium text-accent-cyan bg-accent-cyan/10 border border-accent-cyan/30 rounded-lg hover:bg-accent-cyan/20 transition-colors disabled:opacity-50"
+            >
+              {isRestarting ? 'Restarting...' : 'Restart'}
+            </button>
+            <a
+              href="/app/settings/workspace"
+              className="px-3 py-2 text-sm font-medium text-center text-text-muted bg-bg-tertiary border border-border-subtle rounded-lg hover:bg-bg-hover transition-colors no-underline"
+            >
+              Settings
+            </a>
+          </div>
+        )}
+      </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>
+  );
+}