@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/ServerCard.tsx

@@ -0,0 +1,202 @@
+/**
+ * ServerCard Component
+ *
+ * Displays a fleet server's status, connected agents,
+ * and health metrics in a compact card format.
+ */
+
+import React from 'react';
+
+export interface ServerInfo {
+  id: string;
+  name: string;
+  url: string;
+  status: 'online' | 'offline' | 'degraded' | 'connecting';
+  agentCount: number;
+  messageRate?: number;
+  latency?: number;
+  uptime?: number;
+  version?: string;
+  region?: string;
+  lastSeen?: string | number;
+}
+
+export interface ServerCardProps {
+  server: ServerInfo;
+  isSelected?: boolean;
+  onClick?: () => void;
+  onReconnect?: () => void;
+  compact?: boolean;
+}
+
+export function ServerCard({
+  server,
+  isSelected = false,
+  onClick,
+  onReconnect,
+  compact = false,
+}: ServerCardProps) {
+  const statusColor = getStatusColor(server.status);
+  const statusLabel = getStatusLabel(server.status);
+
+  if (compact) {
+    return (
+      <button
+        className={`
+          flex items-center gap-2 py-2 px-3 bg-bg-tertiary border border-border-subtle rounded-md cursor-pointer font-inherit transition-all duration-150
+          hover:bg-bg-hover
+          ${isSelected ? 'bg-bg-elevated border-accent-cyan' : ''}
+          ${server.status === 'offline' ? 'opacity-70' : ''}
+        `}
+        onClick={onClick}
+      >
+        <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: statusColor }} />
+        <span className="flex-1 text-sm font-medium text-text-primary text-left">{server.name}</span>
+        <span className="text-xs text-text-muted bg-bg-tertiary px-1.5 py-0.5 rounded-full">{server.agentCount}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={`
+        bg-bg-card border border-border-subtle rounded-lg p-4 cursor-pointer transition-all duration-150
+        hover:border-border-hover hover:shadow-md
+        ${isSelected ? 'border-accent-cyan bg-bg-elevated' : ''}
+        ${server.status === 'offline' ? 'opacity-70' : ''}
+        ${server.status === 'degraded' ? 'border-l-[3px] border-l-warning' : ''}
+      `}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+    >
+      {/* Header */}
+      <div className="flex items-start justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <ServerIcon />
+          <div className="flex flex-col">
+            <span className="font-semibold text-sm text-text-primary">{server.name}</span>
+            {server.region && (
+              <span className="text-xs text-text-muted">{server.region}</span>
+            )}
+          </div>
+        </div>
+        <div className="flex items-center gap-1.5 text-xs font-medium" style={{ color: statusColor }}>
+          <span
+            className={`w-2 h-2 rounded-full flex-shrink-0 ${server.status === 'connecting' ? 'animate-pulse' : ''}`}
+            style={{ backgroundColor: statusColor }}
+          />
+          <span>{statusLabel}</span>
+        </div>
+      </div>
+
+      {/* Metrics */}
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(60px,1fr))] gap-3 mb-4">
+        <div className="flex flex-col items-center text-center">
+          <span className="text-lg font-semibold text-text-primary">{server.agentCount}</span>
+          <span className="text-[11px] text-text-muted uppercase tracking-wide">Agents</span>
+        </div>
+        {server.messageRate !== undefined && (
+          <div className="flex flex-col items-center text-center">
+            <span className="text-lg font-semibold text-text-primary">{server.messageRate}/s</span>
+            <span className="text-[11px] text-text-muted uppercase tracking-wide">Messages</span>
+          </div>
+        )}
+        {server.latency !== undefined && (
+          <div className="flex flex-col items-center text-center">
+            <span className="text-lg font-semibold text-text-primary">{server.latency}ms</span>
+            <span className="text-[11px] text-text-muted uppercase tracking-wide">Latency</span>
+          </div>
+        )}
+        {server.uptime !== undefined && (
+          <div className="flex flex-col items-center text-center">
+            <span className="text-lg font-semibold text-text-primary">{formatUptime(server.uptime)}</span>
+            <span className="text-[11px] text-text-muted uppercase tracking-wide">Uptime</span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
+        <span className="text-[11px] text-text-muted font-mono">{server.url}</span>
+        {server.version && (
+          <span className="text-[11px] text-text-muted bg-bg-tertiary px-1.5 py-0.5 rounded">v{server.version}</span>
+        )}
+      </div>
+
+      {/* Reconnect button */}
+      {server.status === 'offline' && onReconnect && (
+        <button
+          className="flex items-center justify-center gap-1.5 w-full mt-3 py-2 px-3 bg-error/10 border border-error/30 rounded-md text-error text-xs font-medium cursor-pointer font-inherit transition-all duration-150 hover:bg-error/20 hover:border-error/50"
+          onClick={(e) => {
+            e.stopPropagation();
+            onReconnect();
+          }}
+        >
+          <RefreshIcon />
+          Reconnect
+        </button>
+      )}
+    </div>
+  );
+}
+
+// Helper functions
+function getStatusColor(status: ServerInfo['status']): string {
+  switch (status) {
+    case 'online':
+      return '#10b981';
+    case 'offline':
+      return '#ef4444';
+    case 'degraded':
+      return '#f59e0b';
+    case 'connecting':
+      return '#6366f1';
+    default:
+      return '#888888';
+  }
+}
+
+function getStatusLabel(status: ServerInfo['status']): string {
+  switch (status) {
+    case 'online':
+      return 'Online';
+    case 'offline':
+      return 'Offline';
+    case 'degraded':
+      return 'Degraded';
+    case 'connecting':
+      return 'Connecting...';
+    default:
+      return 'Unknown';
+  }
+}
+
+function formatUptime(seconds: number): string {
+  if (seconds < 60) return `${seconds}s`;
+  if (seconds < 3600) return `${Math.floor(seconds / 60)}m`;
+  if (seconds < 86400) return `${Math.floor(seconds / 3600)}h`;
+  return `${Math.floor(seconds / 86400)}d`;
+}
+
+// Icon components
+function ServerIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="2" y="2" width="20" height="8" rx="2" ry="2" />
+      <rect x="2" y="14" width="20" height="8" rx="2" ry="2" />
+      <line x1="6" y1="6" x2="6.01" y2="6" />
+      <line x1="6" y1="18" x2="6.01" y2="18" />
+    </svg>
+  );
+}
+
+function RefreshIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 4 23 10 17 10" />
+      <polyline points="1 20 1 14 7 14" />
+      <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+    </svg>
+  );
+}

package/src/components/SessionExpiredModal.tsx

@@ -0,0 +1,128 @@
+/**
+ * Session Expired Modal
+ *
+ * Displayed when the user's session has expired and they need to log in again.
+ * Provides a clear message and easy path to re-authenticate.
+ */
+
+import React from 'react';
+import type { SessionError } from './hooks/useSession';
+
+export interface SessionExpiredModalProps {
+  /** Whether the modal is visible */
+  isOpen: boolean;
+  /** Session error details */
+  error: SessionError | null;
+  /** Called when user clicks to log in */
+  onLogin: () => void;
+  /** Called when modal is dismissed (optional) */
+  onDismiss?: () => void;
+}
+
+export function SessionExpiredModal({
+  isOpen,
+  error,
+  onLogin,
+  onDismiss,
+}: SessionExpiredModalProps) {
+  if (!isOpen) return null;
+
+  const getMessage = () => {
+    if (!error) return 'Your session has expired. Please log in again to continue.';
+
+    switch (error.code) {
+      case 'SESSION_EXPIRED':
+        return 'Your session has expired. Please log in again to continue.';
+      case 'USER_NOT_FOUND':
+        return 'Your account was not found. Please log in again.';
+      case 'SESSION_ERROR':
+        return 'There was a problem with your session. Please log in again.';
+      default:
+        return error.message || 'Your session has expired. Please log in again.';
+    }
+  };
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-[9998]"
+        onClick={onDismiss}
+        aria-hidden="true"
+      />
+
+      {/* Modal */}
+      <div
+        className="fixed inset-0 flex items-center justify-center z-[9999] p-4"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="session-expired-title"
+      >
+        <div className="bg-bg-primary rounded-lg shadow-xl max-w-md w-full p-6 animate-in fade-in zoom-in-95 duration-200">
+          {/* Icon */}
+          <div className="flex justify-center mb-4">
+            <div className="w-16 h-16 rounded-full bg-warning/10 flex items-center justify-center">
+              <svg
+                className="w-8 h-8 text-warning"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+          </div>
+
+          {/* Title */}
+          <h2
+            id="session-expired-title"
+            className="text-xl font-semibold text-text-primary text-center mb-2"
+          >
+            Session Expired
+          </h2>
+
+          {/* Message */}
+          <p className="text-text-muted text-center mb-6">
+            {getMessage()}
+          </p>
+
+          {/* Actions */}
+          <div className="flex flex-col gap-3">
+            <button
+              onClick={onLogin}
+              className="w-full py-3 px-4 bg-accent text-white font-medium rounded-lg
+                         hover:bg-accent-hover transition-colors duration-200
+                         focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
+                         focus:ring-offset-bg-primary"
+            >
+              Log In Again
+            </button>
+
+            {onDismiss && (
+              <button
+                onClick={onDismiss}
+                className="w-full py-3 px-4 text-text-muted hover:text-text-primary
+                           font-medium rounded-lg transition-colors duration-200
+                           hover:bg-bg-secondary"
+              >
+                Dismiss
+              </button>
+            )}
+          </div>
+
+          {/* Help text */}
+          <p className="text-xs text-text-muted text-center mt-4">
+            You'll be redirected to the login page where you can sign in with GitHub.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default SessionExpiredModal;

package/src/components/SpawnModal.test.tsx

@@ -0,0 +1,190 @@
+/**
+ * Tests for SpawnModal component
+ *
+ * Covers: repo dropdown in cloud mode, working directory in local mode,
+ * cwd derivation from selected repo, and activeRepoId pre-selection.
+ */
+
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, fireEvent, waitFor, cleanup } from '@testing-library/react';
+import { SpawnModal } from './SpawnModal';
+
+const MOCK_WORKSPACE_ID = '12345678-1234-1234-1234-123456789012';
+
+// Mock cloudApi to return connected providers so the button is enabled
+vi.mock('../lib/cloudApi', () => ({
+  cloudApi: {
+    getProviders: vi.fn().mockResolvedValue({
+      success: true,
+      data: {
+        providers: [
+          { id: 'anthropic', name: 'Claude', displayName: 'Claude', isConnected: true },
+          { id: 'codex', name: 'Codex', displayName: 'Codex', isConnected: true },
+        ],
+      },
+    }),
+  },
+}));
+
+const mockRepos = [
+  { id: 'repo-1', githubFullName: 'AgentWorkforce/relay' },
+  { id: 'repo-2', githubFullName: 'AgentWorkforce/trajectories' },
+  { id: 'repo-3', githubFullName: 'AgentWorkforce/relay-cloud' },
+];
+
+function getForm(): HTMLFormElement {
+  const form = document.querySelector('form');
+  if (!form) throw new Error('Form not found');
+  return form;
+}
+
+function renderSpawnModal(overrides: Partial<React.ComponentProps<typeof SpawnModal>> = {}) {
+  const defaultProps: React.ComponentProps<typeof SpawnModal> = {
+    isOpen: true,
+    onClose: vi.fn(),
+    onSpawn: vi.fn().mockResolvedValue(true),
+    existingAgents: [],
+    ...overrides,
+  };
+  return { ...render(<SpawnModal {...defaultProps} />), props: defaultProps };
+}
+
+describe('SpawnModal', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  describe('repo dropdown (cloud mode)', () => {
+    it('shows repo dropdown when isCloudMode and repos are provided', () => {
+      renderSpawnModal({ isCloudMode: true, repos: mockRepos });
+      expect(screen.getByLabelText('Repository')).toBeTruthy();
+      expect(screen.queryByLabelText(/Working Directory/)).toBeNull();
+    });
+
+    it('lists all repos in the dropdown', () => {
+      renderSpawnModal({ isCloudMode: true, repos: mockRepos });
+      const select = screen.getByLabelText('Repository') as HTMLSelectElement;
+      const options = select.querySelectorAll('option');
+      // 3 repos + "All Repositories (Coordinator)" option when repos.length > 1
+      expect(options.length).toBe(4);
+      expect(options[0].textContent).toBe('All Repositories (Coordinator)');
+      expect(options[1].textContent).toBe('AgentWorkforce/relay');
+      expect(options[2].textContent).toBe('AgentWorkforce/trajectories');
+      expect(options[3].textContent).toBe('AgentWorkforce/relay-cloud');
+    });
+
+    it('pre-selects the active repo', async () => {
+      renderSpawnModal({
+        isCloudMode: true,
+        repos: mockRepos,
+        activeRepoId: 'repo-2',
+      });
+      // Wait for useEffect to run and set selectedRepoId
+      await waitFor(() => {
+        const select = screen.getByLabelText('Repository') as HTMLSelectElement;
+        expect(select.value).toBe('repo-2');
+      });
+    });
+
+    it('defaults to All Repositories when no activeRepoId and multiple repos', () => {
+      renderSpawnModal({ isCloudMode: true, repos: mockRepos });
+      const select = screen.getByLabelText('Repository') as HTMLSelectElement;
+      expect(select.value).toBe('__all__');
+    });
+
+    it('derives cwd from selected repo githubFullName on submit', async () => {
+      const onSpawn = vi.fn().mockResolvedValue(true);
+      renderSpawnModal({
+        isCloudMode: true,
+        repos: mockRepos,
+        activeRepoId: 'repo-2',
+        workspaceId: MOCK_WORKSPACE_ID,
+        onSpawn,
+      });
+
+      // Wait for credential check to resolve and button to be enabled
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        const spawnBtn = buttons.find((b) => b.textContent?.includes('Spawn Agent'));
+        expect(spawnBtn).toBeTruthy();
+        expect((spawnBtn as HTMLButtonElement).disabled).toBe(false);
+      });
+
+      fireEvent.submit(getForm());
+
+      await waitFor(() => {
+        expect(onSpawn).toHaveBeenCalled();
+      });
+
+      const config = onSpawn.mock.calls[0][0];
+      expect(config.cwd).toBe('trajectories');
+    });
+
+    it('allows changing the selected repo', async () => {
+      const onSpawn = vi.fn().mockResolvedValue(true);
+      renderSpawnModal({
+        isCloudMode: true,
+        repos: mockRepos,
+        activeRepoId: 'repo-1',
+        workspaceId: MOCK_WORKSPACE_ID,
+        onSpawn,
+      });
+
+      await waitFor(() => {
+        const buttons = screen.getAllByRole('button');
+        const spawnBtn = buttons.find((b) => b.textContent?.includes('Spawn Agent'));
+        expect((spawnBtn as HTMLButtonElement).disabled).toBe(false);
+      });
+
+      const select = screen.getByLabelText('Repository') as HTMLSelectElement;
+      fireEvent.change(select, { target: { value: 'repo-3' } });
+      expect(select.value).toBe('repo-3');
+
+      fireEvent.submit(getForm());
+
+      await waitFor(() => {
+        expect(onSpawn).toHaveBeenCalled();
+      });
+
+      const config = onSpawn.mock.calls[0][0];
+      expect(config.cwd).toBe('relay-cloud');
+    });
+  });
+
+  describe('working directory (local mode)', () => {
+    it('shows working directory input when not in cloud mode', () => {
+      renderSpawnModal({ isCloudMode: false });
+      expect(screen.getByLabelText(/Working Directory/)).toBeTruthy();
+      expect(screen.queryByLabelText('Repository')).toBeNull();
+    });
+
+    it('shows working directory input when cloud mode but no repos', () => {
+      renderSpawnModal({ isCloudMode: true, repos: [] });
+      expect(screen.getByLabelText(/Working Directory/)).toBeTruthy();
+      expect(screen.queryByLabelText('Repository')).toBeNull();
+    });
+
+    it('passes cwd from text input on submit', async () => {
+      const onSpawn = vi.fn().mockResolvedValue(true);
+      renderSpawnModal({ isCloudMode: false, onSpawn });
+
+      const cwdInput = screen.getByLabelText(/Working Directory/) as HTMLInputElement;
+      fireEvent.change(cwdInput, { target: { value: '/custom/path' } });
+
+      fireEvent.submit(getForm());
+
+      await waitFor(() => {
+        expect(onSpawn).toHaveBeenCalled();
+      });
+
+      const config = onSpawn.mock.calls[0][0];
+      expect(config.cwd).toBe('/custom/path');
+    });
+  });
+});