@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/ActivityFeed.tsx

@@ -0,0 +1,216 @@
+/**
+ * ActivityFeed Component
+ *
+ * Displays a unified timeline of workspace events including:
+ * - Agent spawned/released
+ * - Agent online/offline
+ * - User joined/left
+ * - Broadcasts
+ */
+
+import React, { useMemo } from 'react';
+import type { ActivityEvent, ActivityEventType } from '../types';
+
+export interface ActivityFeedProps {
+  events: ActivityEvent[];
+  maxEvents?: number;
+  onEventClick?: (event: ActivityEvent) => void;
+}
+
+/**
+ * Get icon for activity event type
+ */
+function getEventIcon(type: ActivityEventType): string {
+  switch (type) {
+    case 'agent_spawned':
+      return '🚀';
+    case 'agent_released':
+      return '🛑';
+    case 'agent_online':
+      return '🟢';
+    case 'agent_offline':
+      return '⚫';
+    case 'user_joined':
+      return '👋';
+    case 'user_left':
+      return '👋';
+    case 'broadcast':
+      return '📢';
+    case 'error':
+      return '⚠️';
+    default:
+      return '📌';
+  }
+}
+
+/**
+ * Get color class for activity event type
+ */
+function getEventColorClass(type: ActivityEventType): string {
+  switch (type) {
+    case 'agent_spawned':
+      return 'text-green-400';
+    case 'agent_released':
+      return 'text-red-400';
+    case 'agent_online':
+      return 'text-green-400';
+    case 'agent_offline':
+      return 'text-gray-400';
+    case 'user_joined':
+      return 'text-cyan-400';
+    case 'user_left':
+      return 'text-gray-400';
+    case 'broadcast':
+      return 'text-yellow-400';
+    case 'error':
+      return 'text-red-500';
+    default:
+      return 'text-text-muted';
+  }
+}
+
+/**
+ * Format relative time (e.g., "2m ago", "1h ago")
+ */
+function formatRelativeTime(timestamp: string): string {
+  const now = new Date();
+  const then = new Date(timestamp);
+  const diffMs = now.getTime() - then.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return 'just now';
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return then.toLocaleDateString();
+}
+
+/**
+ * Single activity event item
+ */
+function ActivityEventItem({
+  event,
+  onClick,
+}: {
+  event: ActivityEvent;
+  onClick?: () => void;
+}) {
+  const icon = getEventIcon(event.type);
+  const colorClass = getEventColorClass(event.type);
+
+  return (
+    <div
+      className={`flex items-start gap-3 p-3 rounded-lg hover:bg-bg-hover transition-colors ${onClick ? 'cursor-pointer' : ''}`}
+      onClick={onClick}
+    >
+      {/* Avatar or Icon */}
+      <div className="flex-shrink-0 w-8 h-8 flex items-center justify-center">
+        {event.actorAvatarUrl ? (
+          <img
+            src={event.actorAvatarUrl}
+            alt={event.actor}
+            className="w-8 h-8 rounded-full"
+          />
+        ) : (
+          <span className="text-lg">{icon}</span>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2">
+          <span className={`font-medium ${colorClass}`}>{event.actor}</span>
+          <span className="text-text-muted text-sm">{event.title}</span>
+        </div>
+        {event.description && (
+          <p className="text-text-muted text-sm mt-1 line-clamp-2">
+            {event.description}
+          </p>
+        )}
+        {/* Metadata badges */}
+        {event.metadata && Object.keys(event.metadata).length > 0 && (() => {
+          const cli = event.metadata.cli;
+          const task = event.metadata.task;
+          return (
+            <div className="flex flex-wrap gap-1 mt-2">
+              {cli != null && (
+                <span className="px-2 py-0.5 bg-bg-secondary rounded text-xs text-text-muted">
+                  {String(cli)}
+                </span>
+              )}
+              {task != null && (
+                <span className="px-2 py-0.5 bg-bg-secondary rounded text-xs text-text-muted truncate max-w-[200px]">
+                  {String(task)}
+                </span>
+              )}
+            </div>
+          );
+        })()}
+      </div>
+
+      {/* Timestamp */}
+      <div className="flex-shrink-0 text-xs text-text-muted">
+        {formatRelativeTime(event.timestamp)}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Empty state when no events
+ */
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center p-8">
+      <div className="text-4xl mb-4">📋</div>
+      <h3 className="text-lg font-medium text-text-primary mb-2">No activity yet</h3>
+      <p className="text-text-muted text-sm max-w-xs">
+        Activity will appear here as agents spawn, users join, and broadcasts are sent.
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Activity Feed - displays timeline of workspace events
+ */
+export function ActivityFeed({ events, maxEvents = 100, onEventClick }: ActivityFeedProps) {
+  // Sort events by timestamp (newest first) and limit
+  const sortedEvents = useMemo(() => {
+    return [...events]
+      .sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+      .slice(0, maxEvents);
+  }, [events, maxEvents]);
+
+  if (sortedEvents.length === 0) {
+    return <EmptyState />;
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="flex-shrink-0 px-4 py-3 border-b border-border-subtle">
+        <h2 className="text-lg font-semibold text-text-primary">Activity</h2>
+        <p className="text-sm text-text-muted">
+          {sortedEvents.length} event{sortedEvents.length !== 1 ? 's' : ''}
+        </p>
+      </div>
+
+      {/* Event List */}
+      <div className="flex-1 overflow-y-auto px-2 py-2">
+        <div className="space-y-1">
+          {sortedEvents.map((event) => (
+            <ActivityEventItem
+              key={event.id}
+              event={event}
+              onClick={onEventClick ? () => onEventClick(event) : undefined}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/AddWorkspaceModal.tsx

@@ -0,0 +1,170 @@
+/**
+ * Add Workspace Modal
+ *
+ * Modal dialog for adding a new workspace (repository) to the orchestrator.
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+
+export interface AddWorkspaceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAdd: (path: string, name?: string) => Promise<void>;
+  isAdding?: boolean;
+  error?: string | null;
+}
+
+export function AddWorkspaceModal({
+  isOpen,
+  onClose,
+  onAdd,
+  isAdding = false,
+  error,
+}: AddWorkspaceModalProps) {
+  const [path, setPath] = useState('');
+  const [name, setName] = useState('');
+  const [localError, setLocalError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Focus input when modal opens
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Reset form when modal closes
+  useEffect(() => {
+    if (!isOpen) {
+      setPath('');
+      setName('');
+      setLocalError(null);
+    }
+  }, [isOpen]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!path.trim()) {
+      setLocalError('Path is required');
+      return;
+    }
+
+    try {
+      await onAdd(path.trim(), name.trim() || undefined);
+      onClose();
+    } catch (err) {
+      setLocalError(err instanceof Error ? err.message : 'Failed to add workspace');
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const displayError = error || localError;
+
+  return (
+    <div
+      className="fixed inset-0 bg-black/60 flex items-center justify-center z-[9999] backdrop-blur-sm"
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        className="bg-[#1a1a2e] border border-[#3a3a4e] rounded-xl p-6 min-w-[450px] max-w-[90vw] shadow-[0_20px_60px_rgba(0,0,0,0.5)]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between mb-6">
+          <h2 className="m-0 text-lg font-semibold text-[#e8e8e8]">Add Workspace</h2>
+          <button
+            className="bg-transparent border-none text-[#666] cursor-pointer p-1 flex items-center justify-center rounded transition-all hover:bg-white/10 hover:text-[#e8e8e8]"
+            onClick={onClose}
+          >
+            <CloseIcon />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit}>
+          <div className="mb-5">
+            <label htmlFor="workspace-path" className="block mb-2 text-[13px] font-medium text-[#e8e8e8]">
+              Repository Path
+            </label>
+            <input
+              ref={inputRef}
+              id="workspace-path"
+              type="text"
+              value={path}
+              onChange={(e) => {
+                setPath(e.target.value);
+                setLocalError(null);
+              }}
+              placeholder="/path/to/repository"
+              disabled={isAdding}
+              autoComplete="off"
+              className="w-full px-3 py-2.5 bg-[#2a2a3e] border border-[#3a3a4e] rounded-md text-[#e8e8e8] text-sm outline-none transition-colors box-border focus:border-[#00c896] placeholder:text-[#666] disabled:opacity-60 disabled:cursor-not-allowed"
+            />
+            <p className="mt-1.5 text-xs text-[#666] leading-relaxed">
+              Enter the full path to your repository. Use ~ for home directory.
+            </p>
+          </div>
+
+          <div className="mb-5">
+            <label htmlFor="workspace-name" className="block mb-2 text-[13px] font-medium text-[#e8e8e8]">
+              Display Name (optional)
+            </label>
+            <input
+              id="workspace-name"
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="My Project"
+              disabled={isAdding}
+              autoComplete="off"
+              className="w-full px-3 py-2.5 bg-[#2a2a3e] border border-[#3a3a4e] rounded-md text-[#e8e8e8] text-sm outline-none transition-colors box-border focus:border-[#00c896] placeholder:text-[#666] disabled:opacity-60 disabled:cursor-not-allowed"
+            />
+            <p className="mt-1.5 text-xs text-[#666] leading-relaxed">
+              A friendly name for this workspace. Defaults to the folder name.
+            </p>
+          </div>
+
+          {displayError && (
+            <div className="px-3 py-2.5 bg-red-500/10 border border-red-500/30 rounded-md text-red-500 text-[13px] mb-5">
+              {displayError}
+            </div>
+          )}
+
+          <div className="flex gap-3 justify-end mt-6">
+            <button
+              type="button"
+              className="px-5 py-2.5 rounded-md text-sm font-medium cursor-pointer transition-all bg-transparent border border-[#3a3a4e] text-[#e8e8e8] hover:bg-white/5 disabled:opacity-50 disabled:cursor-not-allowed"
+              onClick={onClose}
+              disabled={isAdding}
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="px-5 py-2.5 rounded-md text-sm font-medium cursor-pointer transition-all bg-[#00c896] border-none text-[#1a1a2e] hover:bg-[#00a87d] disabled:opacity-50 disabled:cursor-not-allowed"
+              disabled={isAdding || !path.trim()}
+            >
+              {isAdding ? 'Adding...' : 'Add Workspace'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}

package/src/components/AgentCard.test.tsx

@@ -0,0 +1,134 @@
+/**
+ * Tests for AgentCard component
+ *
+ * Covers: CLI type display, model display in compact view,
+ * and action button rendering.
+ */
+
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup } from '@testing-library/react';
+import { AgentCard } from './AgentCard';
+import type { Agent } from '../types';
+
+afterEach(() => {
+  cleanup();
+});
+
+function makeAgent(name: string, overrides: Partial<Agent> = {}): Agent {
+  return {
+    name,
+    status: 'online',
+    ...overrides,
+  };
+}
+
+describe('AgentCard', () => {
+  describe('compact view - CLI type', () => {
+    it('shows agent CLI type when available', () => {
+      const agent = makeAgent('backend-api', { cli: 'claude' });
+      render(<AgentCard agent={agent} compact />);
+      expect(screen.getByText('claude')).toBeTruthy();
+    });
+
+    it('shows codex CLI type', () => {
+      const agent = makeAgent('worker-1', { cli: 'codex' });
+      render(<AgentCard agent={agent} compact />);
+      expect(screen.getByText('codex')).toBeTruthy();
+    });
+
+    it('does not show CLI line when cli is not set', () => {
+      const agent = makeAgent('backend-api');
+      const { container } = render(<AgentCard agent={agent} compact />);
+      // Should not have the CLI text span (font-mono opacity-70)
+      const cliSpans = container.querySelectorAll('.font-mono.opacity-70');
+      expect(cliSpans.length).toBe(0);
+    });
+  });
+
+  describe('compact view - model display', () => {
+    it('shows model from agent.model', () => {
+      const agent = makeAgent('backend-api', { model: 'claude-sonnet-4-5-20250929' });
+      render(<AgentCard agent={agent} compact />);
+      expect(screen.getByText('claude-sonnet-4-5-20250929')).toBeTruthy();
+    });
+
+    it('shows model from agent.profile.model as fallback', () => {
+      const agent = makeAgent('backend-api', {
+        profile: { model: 'gpt-5.2-codex' },
+      });
+      render(<AgentCard agent={agent} compact />);
+      expect(screen.getByText('gpt-5.2-codex')).toBeTruthy();
+    });
+
+    it('prefers agent.model over profile.model', () => {
+      const agent = makeAgent('backend-api', {
+        model: 'claude-sonnet-4-5-20250929',
+        profile: { model: 'old-model' },
+      });
+      render(<AgentCard agent={agent} compact />);
+      expect(screen.getByText('claude-sonnet-4-5-20250929')).toBeTruthy();
+      expect(screen.queryByText('old-model')).toBeNull();
+    });
+
+    it('does not show model line when no model set', () => {
+      const agent = makeAgent('backend-api');
+      render(<AgentCard agent={agent} compact />);
+      const modelSpan = screen.queryByTitle(/Model:/);
+      expect(modelSpan).toBeNull();
+    });
+  });
+
+  describe('compact view - action buttons', () => {
+    it('renders pin button when onPinToggle provided', () => {
+      const agent = makeAgent('backend-api');
+      render(<AgentCard agent={agent} compact onPinToggle={vi.fn()} />);
+      expect(screen.getByTitle('Pin to top')).toBeTruthy();
+    });
+
+    it('renders profile button when onProfileClick provided', () => {
+      const agent = makeAgent('backend-api');
+      render(<AgentCard agent={agent} compact onProfileClick={vi.fn()} />);
+      expect(screen.getByTitle('View profile')).toBeTruthy();
+    });
+
+    it('renders logs button when onLogsClick provided', () => {
+      const agent = makeAgent('backend-api');
+      render(<AgentCard agent={agent} compact onLogsClick={vi.fn()} />);
+      expect(screen.getByTitle('View logs')).toBeTruthy();
+    });
+
+    it('renders logs button even for non-spawned agents', () => {
+      const agent = makeAgent('backend-api', { isSpawned: false });
+      render(<AgentCard agent={agent} compact onLogsClick={vi.fn()} />);
+      expect(screen.getByTitle('View logs')).toBeTruthy();
+    });
+
+    it('renders release button for spawned agents', () => {
+      const agent = makeAgent('backend-api', { isSpawned: true });
+      render(<AgentCard agent={agent} compact onReleaseClick={vi.fn()} />);
+      expect(screen.getByTitle('Kill agent')).toBeTruthy();
+    });
+
+    it('does not render release for non-spawned agents', () => {
+      const agent = makeAgent('backend-api', { isSpawned: false });
+      render(
+        <AgentCard
+          agent={agent}
+          compact
+          onReleaseClick={vi.fn()}
+        />
+      );
+      expect(screen.queryByTitle('Kill agent')).toBeNull();
+    });
+  });
+
+  describe('full view - model display', () => {
+    it('shows model badge in full view', () => {
+      const agent = makeAgent('backend-api', { model: 'haiku' });
+      render(<AgentCard agent={agent} />);
+      expect(screen.getByTitle('Model: haiku')).toBeTruthy();
+    });
+  });
+});