agent-relay 2.0.21 → 2.0.23

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

@@ -1,730 +0,0 @@
-/**
- * ProvisioningProgress - A visually striking progress indicator for workspace provisioning
- *
- * Design: Terminal-inspired with holographic accents, featuring a vertical stage timeline
- * with animated connections, pulsing indicators, and a typewriter terminal output effect.
- */
-import React, { useState, useEffect, useMemo } from 'react';
-
-export interface ProvisioningStage {
-  id: string;
-  name: string;
-  description: string;
-  estimatedSeconds: number;
-  icon: string;
-}
-
-export interface ProvisioningProgressProps {
-  /** Current stage ID from backend, or null if unknown */
-  currentStage?: string | null;
-  /** Whether provisioning has started */
-  isProvisioning: boolean;
-  /** Workspace name being provisioned */
-  workspaceName?: string;
-  /** Error message if provisioning failed */
-  error?: string | null;
-  /** Callback when user wants to cancel */
-  onCancel?: () => void;
-}
-
-const PROVISIONING_STAGES: ProvisioningStage[] = [
-  {
-    id: 'creating',
-    name: 'Initialize',
-    description: 'Creating workspace container',
-    estimatedSeconds: 5,
-    icon: '◈',
-  },
-  {
-    id: 'networking',
-    name: 'Network',
-    description: 'Configuring DNS & IP allocation',
-    estimatedSeconds: 8,
-    icon: '◇',
-  },
-  {
-    id: 'secrets',
-    name: 'Secure',
-    description: 'Encrypting credentials',
-    estimatedSeconds: 3,
-    icon: '◆',
-  },
-  {
-    id: 'machine',
-    name: 'Deploy',
-    description: 'Launching cloud instance',
-    estimatedSeconds: 25,
-    icon: '▣',
-  },
-  {
-    id: 'booting',
-    name: 'Boot',
-    description: 'Starting relay services',
-    estimatedSeconds: 20,
-    icon: '▢',
-  },
-  {
-    id: 'health',
-    name: 'Verify',
-    description: 'Running health checks',
-    estimatedSeconds: 15,
-    icon: '◉',
-  },
-];
-
-// Terminal-style loading messages
-const TERMINAL_MESSAGES = [
-  '> Establishing secure connection...',
-  '> Allocating compute resources...',
-  '> Configuring agent protocols...',
-  '> Initializing relay daemon...',
-  '> Syncing workspace state...',
-  '> Warming up inference engine...',
-  '> Connecting to neural mesh...',
-  '> Deploying agent swarm...',
-];
-
-export function ProvisioningProgress({
-  currentStage,
-  isProvisioning,
-  workspaceName,
-  error,
-  onCancel,
-}: ProvisioningProgressProps) {
-  const [elapsedSeconds, setElapsedSeconds] = useState(0);
-  const [terminalLines, setTerminalLines] = useState<string[]>([]);
-  const [cursorVisible, setCursorVisible] = useState(true);
-
-  // Track elapsed time
-  useEffect(() => {
-    if (!isProvisioning) {
-      setElapsedSeconds(0);
-      return;
-    }
-    const interval = setInterval(() => {
-      setElapsedSeconds((prev) => prev + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [isProvisioning]);
-
-  // Cursor blink
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCursorVisible((prev) => !prev);
-    }, 530);
-    return () => clearInterval(interval);
-  }, []);
-
-  // Add terminal messages over time
-  useEffect(() => {
-    if (!isProvisioning) {
-      setTerminalLines([]);
-      return;
-    }
-
-    const addMessage = () => {
-      const randomMsg = TERMINAL_MESSAGES[Math.floor(Math.random() * TERMINAL_MESSAGES.length)];
-      setTerminalLines((prev) => [...prev.slice(-4), randomMsg]);
-    };
-
-    addMessage(); // Initial message
-    const interval = setInterval(addMessage, 3500);
-    return () => clearInterval(interval);
-  }, [isProvisioning]);
-
-  // Calculate current stage index
-  const currentStageIndex = useMemo(() => {
-    if (currentStage) {
-      const idx = PROVISIONING_STAGES.findIndex((s) => s.id === currentStage);
-      return idx >= 0 ? idx : 0;
-    }
-    // Estimate based on elapsed time
-    let accumulated = 0;
-    for (let i = 0; i < PROVISIONING_STAGES.length; i++) {
-      accumulated += PROVISIONING_STAGES[i].estimatedSeconds;
-      if (elapsedSeconds < accumulated) return i;
-    }
-    return PROVISIONING_STAGES.length - 1;
-  }, [currentStage, elapsedSeconds]);
-
-  // Calculate progress
-  const totalEstimatedSeconds = useMemo(
-    () => PROVISIONING_STAGES.reduce((sum, s) => sum + s.estimatedSeconds, 0),
-    []
-  );
-
-  const progressPercent = useMemo(() => {
-    return Math.min(95, Math.round((elapsedSeconds / totalEstimatedSeconds) * 100));
-  }, [elapsedSeconds, totalEstimatedSeconds]);
-
-  const formatTime = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return mins > 0 ? `${mins}:${secs.toString().padStart(2, '0')}` : `0:${secs.toString().padStart(2, '0')}`;
-  };
-
-  if (error) {
-    return (
-      <div className="prov-container prov-error">
-        <div className="error-glitch">
-          <span className="error-icon">✕</span>
-        </div>
-        <h3 className="error-title">PROVISIONING FAILED</h3>
-        <p className="error-message">{error}</p>
-        {onCancel && (
-          <button onClick={onCancel} className="retry-btn">
-            <span>RETRY</span>
-          </button>
-        )}
-        <style>{errorStyles}</style>
-      </div>
-    );
-  }
-
-  return (
-    <div className="prov-container">
-      {/* Ambient background effects */}
-      <div className="ambient-glow" />
-      <div className="scan-line" />
-
-      {/* Header */}
-      <header className="prov-header">
-        <div className="header-badge">PROVISIONING</div>
-        <h1 className="header-title">
-          {workspaceName || 'Workspace'}
-        </h1>
-        <div className="header-meta">
-          <span className="meta-time">{formatTime(elapsedSeconds)}</span>
-          <span className="meta-sep">•</span>
-          <span className="meta-percent">{progressPercent}%</span>
-        </div>
-      </header>
-
-      {/* Progress bar */}
-      <div className="progress-track">
-        <div
-          className="progress-fill"
-          style={{ width: `${progressPercent}%` }}
-        />
-        <div
-          className="progress-glow"
-          style={{ left: `${progressPercent}%` }}
-        />
-      </div>
-
-      {/* Stage timeline */}
-      <div className="stages-timeline">
-        {PROVISIONING_STAGES.map((stage, index) => {
-          const isCompleted = index < currentStageIndex;
-          const isCurrent = index === currentStageIndex;
-          const isPending = index > currentStageIndex;
-
-          return (
-            <div
-              key={stage.id}
-              className={`stage-row ${isCompleted ? 'completed' : ''} ${isCurrent ? 'current' : ''} ${isPending ? 'pending' : ''}`}
-            >
-              {/* Connector */}
-              {index > 0 && (
-                <div className={`stage-connector ${isCompleted ? 'active' : ''}`}>
-                  <div className="connector-line" />
-                  {isCompleted && <div className="connector-pulse" />}
-                </div>
-              )}
-
-              {/* Node */}
-              <div className="stage-node">
-                <span className="node-icon">{stage.icon}</span>
-                {isCurrent && <div className="node-ring" />}
-              </div>
-
-              {/* Content */}
-              <div className="stage-content">
-                <span className="stage-name">{stage.name}</span>
-                {isCurrent && (
-                  <span className="stage-desc">{stage.description}</span>
-                )}
-              </div>
-
-              {/* Status */}
-              <div className="stage-status">
-                {isCompleted && <span className="status-done">DONE</span>}
-                {isCurrent && <span className="status-active">ACTIVE</span>}
-                {isPending && <span className="status-wait">~{stage.estimatedSeconds}s</span>}
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Terminal output */}
-      <div className="terminal-window">
-        <div className="terminal-header">
-          <span className="terminal-dot red" />
-          <span className="terminal-dot yellow" />
-          <span className="terminal-dot green" />
-          <span className="terminal-title">agent-relay</span>
-        </div>
-        <div className="terminal-body">
-          {terminalLines.map((line, i) => (
-            <div key={i} className="terminal-line" style={{ animationDelay: `${i * 0.1}s` }}>
-              {line}
-            </div>
-          ))}
-          <div className="terminal-cursor">
-            <span className="cursor-prompt">$</span>
-            <span className={`cursor-block ${cursorVisible ? 'visible' : ''}`}>_</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Cancel button */}
-      {onCancel && (
-        <button onClick={onCancel} className="cancel-btn">
-          Cancel
-        </button>
-      )}
-
-      <style>{mainStyles}</style>
-    </div>
-  );
-}
-
-const mainStyles = `
-  .prov-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    padding: 40px 32px;
-    background: linear-gradient(145deg, rgba(10, 15, 25, 0.95) 0%, rgba(5, 10, 18, 0.98) 100%);
-    border: 1px solid rgba(6, 182, 212, 0.15);
-    border-radius: 16px;
-    overflow: hidden;
-    font-family: 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace;
-  }
-
-  /* Ambient effects */
-  .ambient-glow {
-    position: absolute;
-    top: -100px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 300px;
-    height: 200px;
-    background: radial-gradient(ellipse, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
-    pointer-events: none;
-  }
-
-  .scan-line {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.4), transparent);
-    animation: scanMove 3s ease-in-out infinite;
-    pointer-events: none;
-  }
-
-  @keyframes scanMove {
-    0%, 100% { top: 0; opacity: 0.5; }
-    50% { top: 100%; opacity: 0.2; }
-  }
-
-  /* Header */
-  .prov-header {
-    text-align: center;
-    position: relative;
-    z-index: 1;
-  }
-
-  .header-badge {
-    display: inline-block;
-    padding: 4px 12px;
-    background: rgba(6, 182, 212, 0.1);
-    border: 1px solid rgba(6, 182, 212, 0.3);
-    border-radius: 4px;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 2px;
-    color: #06b6d4;
-    margin-bottom: 12px;
-  }
-
-  .header-title {
-    font-size: 22px;
-    font-weight: 600;
-    color: #f1f5f9;
-    margin: 0 0 8px 0;
-    letter-spacing: -0.5px;
-  }
-
-  .header-meta {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    font-size: 13px;
-    color: #64748b;
-  }
-
-  .meta-time {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .meta-percent {
-    color: #06b6d4;
-    font-weight: 500;
-  }
-
-  .meta-sep {
-    opacity: 0.3;
-  }
-
-  /* Progress bar */
-  .progress-track {
-    position: relative;
-    height: 4px;
-    background: rgba(100, 116, 139, 0.2);
-    border-radius: 2px;
-    overflow: visible;
-  }
-
-  .progress-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #0891b2, #06b6d4, #22d3ee);
-    border-radius: 2px;
-    transition: width 0.5s ease;
-  }
-
-  .progress-glow {
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 8px;
-    height: 8px;
-    background: #22d3ee;
-    border-radius: 50%;
-    box-shadow: 0 0 16px rgba(34, 211, 238, 0.6);
-    transition: left 0.5s ease;
-  }
-
-  /* Stages */
-  .stages-timeline {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    padding: 16px 0;
-  }
-
-  .stage-row {
-    display: grid;
-    grid-template-columns: 40px 1fr auto;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 0;
-    position: relative;
-  }
-
-  .stage-connector {
-    position: absolute;
-    left: 19px;
-    top: -10px;
-    width: 2px;
-    height: 20px;
-  }
-
-  .connector-line {
-    width: 100%;
-    height: 100%;
-    background: rgba(100, 116, 139, 0.3);
-    transition: background 0.3s ease;
-  }
-
-  .stage-connector.active .connector-line {
-    background: linear-gradient(180deg, #06b6d4, rgba(6, 182, 212, 0.3));
-  }
-
-  .connector-pulse {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(180deg, rgba(34, 211, 238, 0.8), transparent);
-    animation: pulseLine 1.5s ease-out infinite;
-  }
-
-  @keyframes pulseLine {
-    0% { opacity: 1; transform: translateY(-100%); }
-    100% { opacity: 0; transform: translateY(100%); }
-  }
-
-  .stage-node {
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-  }
-
-  .node-icon {
-    font-size: 18px;
-    color: #475569;
-    transition: all 0.3s ease;
-  }
-
-  .stage-row.completed .node-icon {
-    color: #06b6d4;
-  }
-
-  .stage-row.current .node-icon {
-    color: #22d3ee;
-    text-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
-  }
-
-  .node-ring {
-    position: absolute;
-    inset: 4px;
-    border: 2px solid rgba(34, 211, 238, 0.4);
-    border-radius: 50%;
-    animation: ringPulse 2s ease-in-out infinite;
-  }
-
-  @keyframes ringPulse {
-    0%, 100% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(1.2); opacity: 0.5; }
-  }
-
-  .stage-content {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  .stage-name {
-    font-size: 13px;
-    font-weight: 500;
-    color: #64748b;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    transition: color 0.3s ease;
-  }
-
-  .stage-row.completed .stage-name {
-    color: #475569;
-  }
-
-  .stage-row.current .stage-name {
-    color: #f1f5f9;
-  }
-
-  .stage-desc {
-    font-size: 11px;
-    color: #64748b;
-    animation: fadeSlideIn 0.3s ease;
-  }
-
-  @keyframes fadeSlideIn {
-    from { opacity: 0; transform: translateX(-8px); }
-    to { opacity: 1; transform: translateX(0); }
-  }
-
-  .stage-status {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 1px;
-  }
-
-  .status-done {
-    color: #06b6d4;
-  }
-
-  .status-active {
-    color: #22d3ee;
-    animation: blink 1s ease-in-out infinite;
-  }
-
-  @keyframes blink {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-
-  .status-wait {
-    color: #475569;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Terminal */
-  .terminal-window {
-    background: rgba(0, 0, 0, 0.4);
-    border: 1px solid rgba(100, 116, 139, 0.2);
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  .terminal-header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    padding: 8px 12px;
-    background: rgba(30, 41, 59, 0.5);
-    border-bottom: 1px solid rgba(100, 116, 139, 0.15);
-  }
-
-  .terminal-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-  }
-
-  .terminal-dot.red { background: #ef4444; }
-  .terminal-dot.yellow { background: #eab308; }
-  .terminal-dot.green { background: #22c55e; }
-
-  .terminal-title {
-    margin-left: auto;
-    font-size: 11px;
-    color: #64748b;
-  }
-
-  .terminal-body {
-    padding: 12px;
-    min-height: 100px;
-  }
-
-  .terminal-line {
-    font-size: 12px;
-    color: #94a3b8;
-    padding: 2px 0;
-    animation: typeIn 0.3s ease;
-  }
-
-  @keyframes typeIn {
-    from { opacity: 0; transform: translateY(4px); }
-    to { opacity: 1; transform: translateY(0); }
-  }
-
-  .terminal-cursor {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-top: 8px;
-  }
-
-  .cursor-prompt {
-    color: #06b6d4;
-    font-weight: 600;
-  }
-
-  .cursor-block {
-    color: #22d3ee;
-    opacity: 0;
-    transition: opacity 0.1s;
-  }
-
-  .cursor-block.visible {
-    opacity: 1;
-  }
-
-  /* Cancel button */
-  .cancel-btn {
-    align-self: center;
-    padding: 8px 20px;
-    background: transparent;
-    border: 1px solid rgba(100, 116, 139, 0.3);
-    border-radius: 6px;
-    color: #64748b;
-    font-family: inherit;
-    font-size: 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .cancel-btn:hover {
-    border-color: rgba(239, 68, 68, 0.5);
-    color: #ef4444;
-  }
-`;
-
-const errorStyles = `
-  .prov-container.prov-error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    padding: 48px 32px;
-    background: linear-gradient(145deg, rgba(25, 10, 10, 0.95) 0%, rgba(15, 5, 8, 0.98) 100%);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-    border-radius: 16px;
-    text-align: center;
-    font-family: 'SF Mono', 'JetBrains Mono', monospace;
-  }
-
-  .error-glitch {
-    position: relative;
-    width: 64px;
-    height: 64px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    border-radius: 12px;
-  }
-
-  .error-icon {
-    font-size: 28px;
-    color: #ef4444;
-    animation: glitch 0.3s ease infinite;
-  }
-
-  @keyframes glitch {
-    0%, 100% { transform: translate(0); }
-    25% { transform: translate(-2px, 1px); }
-    50% { transform: translate(2px, -1px); }
-    75% { transform: translate(-1px, -1px); }
-  }
-
-  .error-title {
-    font-size: 14px;
-    font-weight: 600;
-    letter-spacing: 2px;
-    color: #ef4444;
-    margin: 0;
-  }
-
-  .error-message {
-    font-size: 13px;
-    color: #94a3b8;
-    max-width: 350px;
-    margin: 0;
-    line-height: 1.5;
-  }
-
-  .retry-btn {
-    margin-top: 8px;
-    padding: 10px 28px;
-    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
-    border: 1px solid rgba(239, 68, 68, 0.4);
-    border-radius: 6px;
-    color: #ef4444;
-    font-family: inherit;
-    font-size: 12px;
-    font-weight: 600;
-    letter-spacing: 1px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
-
-  .retry-btn:hover {
-    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 38, 0.3) 100%);
-    border-color: rgba(239, 68, 68, 0.6);
-    transform: translateY(-1px);
-  }
-`;
-
-export default ProvisioningProgress;