agent-relay 2.0.22 → 2.0.24

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

@@ -1,278 +0,0 @@
-/**
- * FleetOverview Component
- *
- * Displays a grid of fleet servers with aggregate stats,
- * health monitoring, and quick server selection.
- */
-
-import React, { useMemo, useState } from 'react';
-import { ServerCard, type ServerInfo } from './ServerCard';
-import type { Agent } from '../types';
-import { getAgentColor, getAgentInitials } from '../lib/colors';
-
-export interface FleetOverviewProps {
-  servers: ServerInfo[];
-  agents: Agent[];
-  selectedServerId?: string;
-  onServerSelect?: (serverId: string) => void;
-  onServerReconnect?: (serverId: string) => void;
-  isLoading?: boolean;
-}
-
-export function FleetOverview({
-  servers,
-  agents,
-  selectedServerId,
-  onServerSelect,
-  onServerReconnect,
-  isLoading = false,
-}: FleetOverviewProps) {
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
-
-  // Aggregate stats
-  const stats = useMemo(() => {
-    const online = servers.filter((s) => s.status === 'online').length;
-    const totalAgents = servers.reduce((sum, s) => sum + s.agentCount, 0);
-    const avgLatency =
-      servers.filter((s) => s.latency !== undefined).length > 0
-        ? Math.round(
-            servers.reduce((sum, s) => sum + (s.latency || 0), 0) /
-              servers.filter((s) => s.latency !== undefined).length
-          )
-        : null;
-    const totalMessages = servers.reduce((sum, s) => sum + (s.messageRate || 0), 0);
-
-    return { online, total: servers.length, totalAgents, avgLatency, totalMessages };
-  }, [servers]);
-
-  // Group agents by server (using region as proxy for now)
-  const agentsByServer = useMemo(() => {
-    const groups: Record<string, Agent[]> = {};
-    servers.forEach((s) => {
-      groups[s.id] = [];
-    });
-    // In a real implementation, agents would have a serverId
-    // For now, distribute agents across servers
-    agents.forEach((agent, i) => {
-      const serverIndex = i % servers.length;
-      if (servers[serverIndex]) {
-        groups[servers[serverIndex].id].push(agent);
-      }
-    });
-    return groups;
-  }, [servers, agents]);
-
-  if (isLoading) {
-    return (
-      <div className="bg-bg-card rounded-lg border border-border-subtle overflow-hidden flex flex-col items-center justify-center p-12 text-text-muted text-center">
-        <Spinner />
-        <span className="mt-3 text-sm">Loading fleet data...</span>
-      </div>
-    );
-  }
-
-  if (servers.length === 0) {
-    return (
-      <div className="bg-bg-card rounded-lg border border-border-subtle overflow-hidden flex flex-col items-center justify-center p-12 text-text-muted text-center">
-        <EmptyIcon />
-        <h3 className="mt-4 mb-2 text-base font-semibold text-text-primary">No Fleet Servers</h3>
-        <p className="text-sm">Connect to peer servers to enable fleet view</p>
-      </div>
-    );
-  }
-
-  return (
-    <div className="bg-bg-card rounded-lg border border-border-subtle overflow-hidden">
-      {/* Header with stats */}
-      <div className="flex items-center gap-6 p-4 border-b border-border-subtle bg-bg-secondary">
-        <div className="flex items-center gap-2 font-semibold text-sm text-text-primary">
-          <FleetIcon />
-          <span>Fleet Overview</span>
-        </div>
-
-        <div className="flex gap-6 flex-1">
-          <div className="flex flex-col items-center">
-            <span className="text-base font-semibold text-text-primary">
-              {stats.online}/{stats.total}
-            </span>
-            <span className="text-xs text-text-muted uppercase tracking-wide">Servers</span>
-          </div>
-          <div className="flex flex-col items-center">
-            <span className="text-base font-semibold text-text-primary">{stats.totalAgents}</span>
-            <span className="text-xs text-text-muted uppercase tracking-wide">Agents</span>
-          </div>
-          {stats.avgLatency !== null && (
-            <div className="flex flex-col items-center">
-              <span className="text-base font-semibold text-text-primary">{stats.avgLatency}ms</span>
-              <span className="text-xs text-text-muted uppercase tracking-wide">Avg Latency</span>
-            </div>
-          )}
-          <div className="flex flex-col items-center">
-            <span className="text-base font-semibold text-text-primary">{stats.totalMessages}/s</span>
-            <span className="text-xs text-text-muted uppercase tracking-wide">Messages</span>
-          </div>
-        </div>
-
-        <div className="flex gap-1 bg-bg-tertiary rounded-md p-0.5">
-          <button
-            className={`flex items-center justify-center w-7 h-7 bg-transparent border-none rounded cursor-pointer transition-all duration-150 ${
-              viewMode === 'grid'
-                ? 'bg-bg-card text-text-primary shadow-sm'
-                : 'text-text-muted hover:text-text-secondary'
-            }`}
-            onClick={() => setViewMode('grid')}
-            title="Grid view"
-          >
-            <GridIcon />
-          </button>
-          <button
-            className={`flex items-center justify-center w-7 h-7 bg-transparent border-none rounded cursor-pointer transition-all duration-150 ${
-              viewMode === 'list'
-                ? 'bg-bg-card text-text-primary shadow-sm'
-                : 'text-text-muted hover:text-text-secondary'
-            }`}
-            onClick={() => setViewMode('list')}
-            title="List view"
-          >
-            <ListIcon />
-          </button>
-        </div>
-      </div>
-
-      {/* Health bar */}
-      <div className="flex h-1 bg-bg-tertiary">
-        {servers.map((server) => {
-          const statusColors: Record<string, string> = {
-            online: 'bg-success',
-            offline: 'bg-error',
-            degraded: 'bg-warning',
-            connecting: 'bg-accent-purple',
-          };
-          return (
-            <div
-              key={server.id}
-              className={`transition-all duration-300 ${statusColors[server.status] || 'bg-text-dim'}`}
-              style={{ flex: server.agentCount || 1 }}
-              title={`${server.name}: ${server.agentCount} agents`}
-            />
-          );
-        })}
-      </div>
-
-      {/* Server grid/list */}
-      <div
-        className={`p-4 ${
-          viewMode === 'grid'
-            ? 'grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4'
-            : 'flex flex-col gap-2'
-        }`}
-      >
-        {servers.map((server) => (
-          <div key={server.id} className="flex flex-col gap-2">
-            <ServerCard
-              server={server}
-              isSelected={server.id === selectedServerId}
-              onClick={() => onServerSelect?.(server.id)}
-              onReconnect={() => onServerReconnect?.(server.id)}
-              compact={viewMode === 'list'}
-            />
-
-            {/* Agent preview for grid view */}
-            {viewMode === 'grid' && agentsByServer[server.id]?.length > 0 && (
-              <div className="flex gap-1 px-2">
-                {agentsByServer[server.id].slice(0, 5).map((agent, idx) => {
-                  const colors = getAgentColor(agent.name);
-                  return (
-                    <div
-                      key={agent.name}
-                      className="w-6 h-6 rounded-md flex items-center justify-center text-[9px] font-semibold border-2 border-bg-card"
-                      style={{
-                        backgroundColor: colors.primary,
-                        color: colors.text,
-                        marginLeft: idx > 0 ? '-4px' : 0,
-                      }}
-                      title={agent.name}
-                    >
-                      {getAgentInitials(agent.name)}
-                    </div>
-                  );
-                })}
-                {agentsByServer[server.id].length > 5 && (
-                  <div
-                    className="w-6 h-6 rounded-md flex items-center justify-center text-[9px] font-semibold bg-bg-tertiary text-text-muted border-2 border-bg-card"
-                    style={{ marginLeft: '-4px' }}
-                  >
-                    +{agentsByServer[server.id].length - 5}
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// Icon components
-function FleetIcon() {
-  return (
-    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-      <line x1="8" y1="21" x2="16" y2="21" />
-      <line x1="12" y1="17" x2="12" y2="21" />
-    </svg>
-  );
-}
-
-function GridIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <rect x="3" y="3" width="7" height="7" />
-      <rect x="14" y="3" width="7" height="7" />
-      <rect x="3" y="14" width="7" height="7" />
-      <rect x="14" y="14" width="7" height="7" />
-    </svg>
-  );
-}
-
-function ListIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="8" y1="6" x2="21" y2="6" />
-      <line x1="8" y1="12" x2="21" y2="12" />
-      <line x1="8" y1="18" x2="21" y2="18" />
-      <line x1="3" y1="6" x2="3.01" y2="6" />
-      <line x1="3" y1="12" x2="3.01" y2="12" />
-      <line x1="3" y1="18" x2="3.01" y2="18" />
-    </svg>
-  );
-}
-
-function EmptyIcon() {
-  return (
-    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
-      <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 Spinner() {
-  return (
-    <svg className="animate-spin" width="24" height="24" viewBox="0 0 24 24">
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-        strokeDasharray="32"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}

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

@@ -1,310 +0,0 @@
-/**
- * LogViewer Component
- *
- * A real-time PTY log viewer with terminal-inspired aesthetics.
- * Supports inline (embedded in chat) and dedicated panel modes.
- * Features auto-scroll, search/filter, and ANSI color parsing.
- */
-
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import { useAgentLogs, type LogLine } from './hooks/useAgentLogs';
-import { getAgentColor } from '../lib/colors';
-import { XTermLogViewer } from './XTermLogViewer';
-
-export type LogViewerMode = 'inline' | 'panel';
-
-export interface LogViewerProps {
-  /** Agent name to stream logs from */
-  agentName: string;
-  /** Display mode: inline (compact) or panel (full-featured) */
-  mode?: LogViewerMode;
-  /** Maximum height in panel mode */
-  maxHeight?: string;
-  /** Whether to show the header bar */
-  showHeader?: boolean;
-  /** Whether to enable auto-scroll by default */
-  autoScrollDefault?: boolean;
-  /** Callback when close button is clicked (panel mode) */
-  onClose?: () => void;
-  /** Callback when expand button is clicked (inline mode) */
-  onExpand?: () => void;
-  /** Custom class name */
-  className?: string;
-}
-
-export function LogViewer({
-  agentName,
-  mode = 'panel',
-  maxHeight = '500px',
-  showHeader = true,
-  autoScrollDefault = true,
-  onClose,
-  onExpand,
-  className = '',
-}: LogViewerProps) {
-  const [autoScroll, setAutoScroll] = useState(autoScrollDefault);
-
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-
-  const {
-    logs,
-    isConnected,
-    isConnecting,
-  } = useAgentLogs({ agentName, autoConnect: true });
-
-  const colors = getAgentColor(agentName);
-
-  // Filter logs to remove empty, whitespace-only, and spinner-fragment lines
-  const filteredLogs = useMemo(() => {
-    return logs.filter((log) => {
-      const stripped = sanitizeLogContent(log.content).trim();
-
-      // Filter out empty lines
-      if (stripped.length === 0) return false;
-
-      // Filter out likely spinner fragments (single char or very short non-word content)
-      // Common spinner chars: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ | - \ / * . etc.
-      const spinnerPattern = /^[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏⣾⣽⣻⢿⡿⣟⣯⣷◐◓◑◒●○◉◎|\\\/\-*.\u2800-\u28FF]+$/;
-      if (stripped.length <= 2 && spinnerPattern.test(stripped)) return false;
-
-      return true;
-    });
-  }, [logs]);
-
-  // Auto-scroll to bottom when new logs arrive
-  useEffect(() => {
-    if (autoScroll && scrollContainerRef.current) {
-      const container = scrollContainerRef.current;
-      container.scrollTop = container.scrollHeight;
-    }
-  }, [logs, autoScroll]);
-
-  // Handle scroll to detect manual scroll (disable/enable auto-scroll)
-  const handleScroll = useCallback(() => {
-    if (!scrollContainerRef.current) return;
-
-    const container = scrollContainerRef.current;
-    const isAtBottom =
-      container.scrollHeight - container.scrollTop - container.clientHeight < 50;
-
-    // Re-enable auto-scroll when user scrolls to bottom
-    if (isAtBottom && !autoScroll) {
-      setAutoScroll(true);
-    }
-    // Disable auto-scroll when user scrolls away from bottom
-    else if (!isAtBottom && autoScroll) {
-      setAutoScroll(false);
-    }
-  }, [autoScroll]);
-
-  // Inline mode - compact view
-  if (mode === 'inline') {
-    return (
-      <div
-        className={`log-viewer-inline rounded-lg overflow-hidden border border-[#2a2d35] ${className}`}
-        style={{
-          background: 'linear-gradient(180deg, #0d0f14 0%, #12151c 100%)',
-          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.02), 0 4px 12px rgba(0,0,0,0.3)',
-        }}
-      >
-        <div
-          className="flex items-center justify-between px-3 py-2 border-b border-[#2a2d35]"
-          style={{
-            background: 'linear-gradient(180deg, #161b22 0%, #0d1117 100%)',
-          }}
-        >
-          <div className="flex items-center gap-2">
-            <TerminalIcon />
-            <span
-              className="text-xs font-medium"
-              style={{ color: colors.primary }}
-            >
-              Live logs
-            </span>
-            <ConnectionBadge isConnected={isConnected} isConnecting={isConnecting} />
-          </div>
-          <div className="flex items-center gap-1">
-            <button
-              className="p-1.5 rounded-lg hover:bg-[#21262d] text-[#8b949e] hover:text-accent-cyan transition-all duration-200 hover:shadow-[0_0_8px_rgba(0,217,255,0.15)]"
-              onClick={onExpand}
-              title="Expand"
-            >
-              <ExpandIcon />
-            </button>
-          </div>
-        </div>
-        <div
-          className="font-mono text-xs leading-relaxed p-3 overflow-y-auto touch-pan-y"
-          style={{
-            maxHeight: '150px',
-            WebkitOverflowScrolling: 'touch',
-            overscrollBehavior: 'contain',
-            touchAction: 'pan-y',
-          }}
-          ref={scrollContainerRef}
-          onScroll={handleScroll}
-        >
-          {filteredLogs.slice(-20).map((log) => (
-            <LogLineItem key={log.id} log={log} compact />
-          ))}
-          {filteredLogs.length === 0 && (
-            <div className="text-[#484f58] italic flex items-center gap-2">
-              <span className="w-1.5 h-1.5 rounded-full bg-[#484f58] animate-pulse" />
-              Waiting for output...
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-  // Panel mode - use xterm.js for proper terminal emulation
-  return (
-    <XTermLogViewer
-      agentName={agentName}
-      maxHeight={maxHeight}
-      showHeader={showHeader}
-      onClose={onClose}
-      className={className}
-    />
-  );
-}
-
-// Log line component for inline mode
-interface LogLineItemProps {
-  log: LogLine;
-  compact?: boolean;
-}
-
-function LogLineItem({ log, compact = false }: LogLineItemProps) {
-  const sanitizedContent = sanitizeLogContent(log.content);
-
-  const getTypeStyles = () => {
-    switch (log.type) {
-      case 'stderr':
-        return 'text-[#f85149]';
-      case 'system':
-        return 'text-[#58a6ff] italic';
-      case 'input':
-        return 'text-[#d29922]';
-      default:
-        return 'text-[#c9d1d9]';
-    }
-  };
-
-  return (
-    <div className={`${getTypeStyles()} leading-5 whitespace-pre-wrap break-all min-w-0 overflow-hidden`}>
-      {sanitizedContent}
-    </div>
-  );
-}
-
-// Connection status badge
-function ConnectionBadge({
-  isConnected,
-  isConnecting,
-}: {
-  isConnected: boolean;
-  isConnecting: boolean;
-}) {
-  if (isConnecting) {
-    return (
-      <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-[#d29922]/20 text-[10px] text-[#d29922] uppercase tracking-wider">
-        <span className="w-1.5 h-1.5 rounded-full bg-[#d29922] animate-pulse" />
-        connecting
-      </span>
-    );
-  }
-
-  if (isConnected) {
-    return (
-      <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-[#238636]/20 text-[10px] text-[#3fb950] uppercase tracking-wider">
-        <span className="w-1.5 h-1.5 rounded-full bg-[#3fb950] shadow-[0_0_4px_rgba(63,185,80,0.5)]" />
-        live
-      </span>
-    );
-  }
-
-  return (
-    <span className="flex items-center gap-1 px-1.5 py-0.5 rounded-full bg-[#484f58]/20 text-[10px] text-[#484f58] uppercase tracking-wider">
-      <span className="w-1.5 h-1.5 rounded-full bg-[#484f58]" />
-      offline
-    </span>
-  );
-}
-
-/**
- * Strip ANSI escape codes (including degraded sequences like "[38;5;216m")
- * and control characters so logs render as clean text.
- */
-function sanitizeLogContent(text: string): string {
-  if (!text) return '';
-
-  let result = text;
-
-  // Remove OSC sequences (like window title): \x1b]...(\x07|\x1b\\)
-  result = result.replace(/\x1b\].*?(?:\x07|\x1b\\)/gs, '');
-
-  // Remove DCS (Device Control String) sequences: \x1bP...\x1b\\
-  result = result.replace(/\x1bP.*?\x1b\\/gs, '');
-
-  // Remove standard ANSI escape sequences (CSI, SGR, etc.)
-  result = result.replace(/\x1b\[[0-9;?]*[ -/]*[@-~]/g, '');
-
-  // Remove single-character escapes
-  result = result.replace(/\x1b[@-Z\\-_]/g, '');
-
-  // Remove orphaned CSI sequences that lost their escape byte
-  result = result.replace(/^\[\??\d+[hlKJHfABCDGPXsu]/gm, '');
-
-  // Remove literal SGR sequences that show up without ESC (e.g. "[38;5;216m")
-  result = result.replace(/\[\d+(?:;\d+)*m/g, '');
-
-  // Remove carriage returns/backspaces and other control chars (except newline/tab)
-  result = result.replace(/\r/g, '');
-  result = result.replace(/.\x08/g, '');
-  result = result.replace(/\x08+/g, '');
-  result = result.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F]/g, '');
-
-  return result;
-}
-
-// Icon components
-function TerminalIcon({ size = 16 }: { size?: number }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className="text-[#8b949e]"
-    >
-      <polyline points="4 17 10 11 4 5" />
-      <line x1="12" y1="19" x2="20" y2="19" />
-    </svg>
-  );
-}
-
-function ExpandIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-    >
-      <polyline points="15 3 21 3 21 9" />
-      <polyline points="9 21 3 21 3 15" />
-      <line x1="21" y1="3" x2="14" y2="10" />
-      <line x1="3" y1="21" x2="10" y2="14" />
-    </svg>
-  );
-}
-
-export default LogViewer;