agent-relay 1.6.0 → 2.0.0

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

@@ -0,0 +1,278 @@
+/**
+ * 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

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