agent-relay 2.0.21 → 2.0.23

package/packages/dashboard/ui/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "@agent-relay/dashboard-v2",
-  "version": "1.0.0",
-  "private": true,
-  "scripts": {
-    "dev": "next dev -p 3888",
-    "build": "next build",
-    "start": "next start -p 3888",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@nangohq/frontend": "^0.69.20",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@xterm/addon-fit": "^0.11.0",
-    "@xterm/addon-search": "^0.16.0",
-    "@xterm/xterm": "^6.0.0",
-    "next": "^14.0.4",
-    "react-syntax-highlighter": "^16.1.0"
-  },
-  "devDependencies": {
-    "@testing-library/react": "^14.3.1",
-    "@types/node": "^20.10.5",
-    "@types/react": "18.3.27",
-    "@types/react-dom": "^18.2.18",
-    "@types/react-syntax-highlighter": "^15.5.13",
-    "autoprefixer": "^10.4.23",
-    "postcss": "^8.5.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "tailwindcss": "^4.1.18",
-    "typescript": "^5.3.3"
-  }
-}

package/packages/dashboard/ui/postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

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

@@ -1,216 +0,0 @@
-/**
- * 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/packages/dashboard/ui/react-components/AddWorkspaceModal.tsx

@@ -1,170 +0,0 @@
-/**
- * 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>
-  );
-}