agent-relay 2.0.21 → 2.0.23

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

@@ -1,587 +0,0 @@
-/**
- * AgentCard Component
- *
- * Displays an agent with a distinctive neural/holographic design language.
- * Features gradient backgrounds, animated status indicators, and depth effects.
- */
-
-import React from 'react';
-import type { Agent } from '../types';
-import {
-  getAgentColor,
-  getAgentInitials,
-  STATUS_COLORS,
-  type AgentStatus,
-} from '../lib/colors';
-import { getAgentDisplayName, getAgentBreadcrumb } from '../lib/hierarchy';
-import { ThinkingIndicator, ThinkingDot } from './ThinkingIndicator';
-import { getStuckDuration, formatStuckDuration } from '../lib/stuckDetection';
-
-export interface AgentCardProps {
-  agent: Agent;
-  isSelected?: boolean;
-  showBreadcrumb?: boolean;
-  compact?: boolean;
-  displayNameOverride?: string;
-  /** Whether the agent is pinned to the top */
-  isPinned?: boolean;
-  /** Whether max pins has been reached (disables pin button for unpinned agents) */
-  isMaxPinned?: boolean;
-  onClick?: (agent: Agent) => void;
-  onMessageClick?: (agent: Agent) => void;
-  onReleaseClick?: (agent: Agent) => void;
-  onLogsClick?: (agent: Agent) => void;
-  onProfileClick?: (agent: Agent) => void;
-  /** Handler for pin/unpin toggle */
-  onPinToggle?: (agent: Agent) => void;
-}
-
-/**
- * Get a descriptive tooltip for an agent's connection status.
- */
-function getStatusTooltip(status: AgentStatus, isProcessing?: boolean, isStuck?: boolean, stuckDuration?: number): string {
-  if (isStuck && stuckDuration) {
-    return `Stuck - Agent received message ${formatStuckDuration(stuckDuration)} ago but hasn't responded`;
-  }
-  if (isProcessing) {
-    return 'Processing - Agent is actively working';
-  }
-  switch (status) {
-    case 'online':
-      return 'Connected - Agent is online and ready';
-    case 'offline':
-      return 'Disconnected - Agent is not connected';
-    case 'busy':
-      return 'Busy - Agent is occupied with a task';
-    case 'processing':
-      return 'Processing - Agent is actively working';
-    case 'error':
-      return 'Error - Agent encountered an error';
-    case 'attention':
-      return 'Attention - Agent requires user input';
-    case 'stuck':
-      return 'Stuck - Agent may be blocked or unresponsive';
-    default:
-      return `Status: ${status}`;
-  }
-}
-
-export function AgentCard({
-  agent,
-  isSelected = false,
-  showBreadcrumb = false,
-  compact = false,
-  displayNameOverride,
-  isPinned = false,
-  isMaxPinned = false,
-  onClick,
-  onMessageClick,
-  onReleaseClick,
-  onLogsClick,
-  onProfileClick,
-  onPinToggle,
-}: AgentCardProps) {
-  const colors = getAgentColor(agent.name);
-  const initials = getAgentInitials(agent.name);
-  const displayName = displayNameOverride || getAgentDisplayName(agent.name);
-  const stuckDuration = getStuckDuration(agent);
-  const isStuck = agent.isStuck || stuckDuration > 0;
-  const statusColor = isStuck ? STATUS_COLORS.stuck : (STATUS_COLORS[agent.status] || STATUS_COLORS.offline);
-  const isOnline = agent.status === 'online';
-  const statusTooltip = getStatusTooltip(agent.status, agent.isProcessing, isStuck, stuckDuration);
-
-  const handleClick = () => {
-    onClick?.(agent);
-  };
-
-  const handleMessageClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onMessageClick?.(agent);
-  };
-
-  const handleReleaseClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onReleaseClick?.(agent);
-  };
-
-  const handleLogsClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onLogsClick?.(agent);
-  };
-
-  const handleProfileClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onProfileClick?.(agent);
-  };
-
-  const handlePinToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onPinToggle?.(agent);
-  };
-
-  if (compact) {
-    return (
-      <div
-        className={`
-          group relative flex items-start gap-3 py-2.5 px-3 rounded-lg cursor-pointer
-          transition-all duration-300 ease-out
-          hover:bg-gradient-to-r hover:from-[rgba(255,255,255,0.03)] hover:to-transparent
-          ${isSelected
-            ? 'bg-gradient-to-r from-[rgba(255,255,255,0.06)] to-transparent'
-            : ''
-          }
-        `}
-        onClick={handleClick}
-        style={{
-          borderLeft: isSelected ? `2px solid ${colors.primary}` : '2px solid transparent',
-          boxShadow: isSelected ? `inset 4px 0 12px -4px ${colors.primary}40` : 'none',
-        }}
-      >
-        {/* Agent Avatar with Glow */}
-        <div className="relative">
-          <div
-            className={`
-              w-8 h-8 rounded-lg flex items-center justify-center font-bold text-[11px] tracking-wide
-              transition-all duration-300 relative overflow-hidden
-              ${isOnline ? 'shadow-lg' : 'opacity-60'}
-            `}
-            style={{
-              background: `linear-gradient(135deg, ${colors.primary}, ${colors.primary}99)`,
-              boxShadow: isOnline ? `0 2px 12px ${colors.primary}50` : 'none',
-            }}
-          >
-            {/* Subtle shine effect */}
-            <div
-              className="absolute inset-0 opacity-30"
-              style={{
-                background: 'linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%)',
-              }}
-            />
-            <span className="relative z-10" style={{ color: colors.text }}>{initials}</span>
-          </div>
-          {/* Status Ring */}
-          {isOnline && (
-            <div
-              className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-bg-primary"
-              style={{
-                backgroundColor: statusColor,
-                boxShadow: `0 0 8px ${statusColor}`,
-              }}
-              title={statusTooltip}
-            />
-          )}
-        </div>
-
-        {/* Agent Info */}
-        <div className="flex-1 min-w-0 flex flex-col">
-          <div className="flex items-start gap-1.5 flex-wrap">
-            <span
-              className={`
-                text-[13px] font-semibold tracking-tight transition-colors duration-200
-                whitespace-normal break-words leading-snug
-                ${isOnline ? 'text-text-primary' : 'text-text-secondary'}
-              `}
-            >
-              {displayName}
-            </span>
-            {agent.isLocal && (
-              <span
-                className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium uppercase tracking-wider
-                           bg-gradient-to-r from-orange-500/20 to-amber-500/20 text-orange-400 border border-orange-500/30"
-                title={`Local agent from ${agent.daemonName || 'linked daemon'}`}
-              >
-                Local
-              </span>
-            )}
-            {isPinned && (
-              <span
-                className="inline-flex items-center text-amber-400"
-                title="Pinned to top"
-              >
-                <PinIcon size={12} filled />
-              </span>
-            )}
-          </div>
-          {!displayNameOverride && (
-            <span className="text-[10px] text-text-muted truncate font-mono opacity-70 mt-0.5">
-              {agent.isLocal ? agent.daemonName || agent.machineId : getAgentBreadcrumb(agent.name)}
-            </span>
-          )}
-
-          {/* Actions & Status */}
-          <div className="mt-2 flex items-center flex-wrap gap-2">
-            {onPinToggle && (
-              <button
-                className={`
-                  relative bg-transparent border border-transparent p-1.5 cursor-pointer
-                  flex items-center justify-center rounded-md transition-all duration-200
-                  ${isPinned
-                    ? 'text-amber-400 hover:bg-amber-400/10 hover:border-amber-400/30'
-                    : 'text-text-dim hover:bg-amber-400/10 hover:border-amber-400/30 hover:text-amber-400'}
-                  ${!isPinned && isMaxPinned ? 'opacity-40 cursor-not-allowed' : ''}
-                  hover:shadow-[0_0_12px_rgba(251,191,36,0.25)]
-                `}
-                onClick={handlePinToggle}
-                title={isPinned ? 'Unpin from top' : isMaxPinned ? 'Maximum pins reached (5)' : 'Pin to top'}
-                disabled={!isPinned && isMaxPinned}
-              >
-                <PinIcon size={16} filled={isPinned} />
-              </button>
-            )}
-            {onProfileClick && (
-              <button
-                className="relative bg-transparent border border-transparent text-text-dim p-1.5 cursor-pointer
-                           flex items-center justify-center rounded-md transition-all duration-200
-                           opacity-100
-                           hover:bg-[#a855f7]/10 hover:border-[#a855f7]/30 hover:text-[#a855f7]
-                           hover:shadow-[0_0_12px_rgba(168,85,247,0.25)]"
-                onClick={handleProfileClick}
-                title="View profile"
-              >
-                <ProfileIcon />
-              </button>
-            )}
-            {agent.isSpawned && onLogsClick && (
-              <button
-                className="relative bg-transparent border border-transparent text-text-dim p-1.5 cursor-pointer
-                           flex items-center justify-center rounded-md transition-all duration-200
-                           opacity-100
-                           hover:bg-accent-cyan/10 hover:border-accent-cyan/30 hover:text-accent-cyan
-                           hover:shadow-[0_0_12px_rgba(0,217,255,0.25)]"
-                onClick={handleLogsClick}
-                title="View logs"
-              >
-                <LogsIcon />
-              </button>
-            )}
-            {agent.isSpawned && onReleaseClick && (
-              <button
-                className="relative bg-transparent border border-transparent text-text-dim p-1.5 cursor-pointer
-                           flex items-center justify-center rounded-md transition-all duration-200
-                           opacity-100
-                           hover:bg-error/10 hover:border-error/30 hover:text-error
-                           hover:shadow-[0_0_12px_rgba(255,68,68,0.25)]"
-                onClick={handleReleaseClick}
-                title="Kill agent"
-              >
-                <ReleaseIcon />
-              </button>
-            )}
-            {agent.isProcessing ? (
-              <div title={statusTooltip}>
-                <ThinkingDot isProcessing={true} />
-              </div>
-            ) : (
-              <div
-                className={`
-                  w-2 h-2 rounded-full transition-all duration-300
-                  ${isOnline ? 'animate-pulse' : ''}
-                `}
-                style={{
-                  backgroundColor: statusColor,
-                  boxShadow: isOnline ? `0 0 6px ${statusColor}` : 'none',
-                }}
-                title={statusTooltip}
-              />
-            )}
-            {agent.needsAttention && (
-              <div
-                className="w-2 h-2 rounded-full bg-warning animate-pulse shadow-[0_0_8px_rgba(255,107,53,0.5)]"
-                title="Needs Attention - Agent requires user input or has pending decisions"
-              />
-            )}
-            {isStuck && (
-              <div
-                className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-[#f97316]/20 text-[#f97316] text-[10px] font-medium animate-pulse"
-                title={statusTooltip}
-              >
-                <StuckIcon />
-                <span>{formatStuckDuration(stuckDuration)}</span>
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={`
-        rounded-lg p-3 cursor-pointer transition-all duration-200
-        hover:shadow-md hover:-translate-y-px
-        ${isSelected ? 'border-2 shadow-[0_0_0_2px_rgba(74,158,255,0.15)]' : 'border'}
-      `}
-      onClick={handleClick}
-      style={{
-        backgroundColor: colors.light,
-        borderColor: colors.primary,
-      }}
-    >
-      <div className="flex items-center gap-3">
-        <div
-          className="w-10 h-10 rounded-lg flex items-center justify-center font-semibold text-sm relative"
-          style={{ backgroundColor: colors.primary }}
-        >
-          <span style={{ color: colors.text }}>{initials}</span>
-          <div
-            className="absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-white"
-            style={{ backgroundColor: statusColor }}
-            title={statusTooltip}
-          />
-        </div>
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2">
-            <span className="font-semibold text-sm text-text-primary">{displayName}</span>
-            {agent.isLocal && (
-              <span
-                className="inline-flex items-center px-1.5 py-0.5 rounded text-[9px] font-medium uppercase tracking-wider
-                           bg-gradient-to-r from-orange-500/20 to-amber-500/20 text-orange-400 border border-orange-500/30"
-                title={`Local agent from ${agent.daemonName || 'linked daemon'}`}
-              >
-                Local
-              </span>
-            )}
-            {isPinned && (
-              <span
-                className="inline-flex items-center text-amber-400"
-                title="Pinned to top"
-              >
-                <PinIcon size={14} filled />
-              </span>
-            )}
-            {agent.needsAttention && (
-              <span className="bg-red-500 text-white text-[10px] font-bold w-4 h-4 rounded-full flex items-center justify-center" title="Needs Attention - Agent requires user input or has pending decisions">!</span>
-            )}
-            {isStuck && (
-              <span className="bg-[#f97316] text-white text-[10px] font-bold px-1.5 py-0.5 rounded flex items-center gap-1" title={statusTooltip}>
-                <StuckIcon /> {formatStuckDuration(stuckDuration)}
-              </span>
-            )}
-          </div>
-          {showBreadcrumb ? (
-            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.daemonName || agent.machineId : getAgentBreadcrumb(agent.name)}</span>
-          ) : (
-            <span className="text-xs text-text-muted truncate block">{agent.isLocal ? agent.daemonName || agent.machineId : agent.name}</span>
-          )}
-          {agent.agentId && (
-            <span className="text-[10px] text-text-muted font-mono opacity-70" title="Agent ID (use to resume)">
-              ID: {agent.agentId}
-            </span>
-          )}
-        </div>
-      </div>
-
-      {agent.isProcessing && (
-        <div className="mt-2 p-2 bg-indigo-50 rounded flex items-center gap-2 border border-indigo-200">
-          <ThinkingIndicator
-            isProcessing={true}
-            processingStartedAt={agent.processingStartedAt}
-            size="medium"
-            showElapsed={true}
-          />
-          <span className="text-xs text-indigo-500 font-medium">Thinking...</span>
-        </div>
-      )}
-
-      {agent.currentTask && !agent.isProcessing && (
-        <div className="mt-2 p-2 bg-bg-hover rounded text-xs">
-          <span className="text-text-muted mr-1">Working on:</span>
-          <span className="text-text-primary line-clamp-2" title={agent.currentTask}>{agent.currentTask}</span>
-        </div>
-      )}
-
-      <div className="mt-3 flex justify-between items-center">
-        <div className="flex gap-2 text-xs text-text-muted">
-          {agent.cli && <span className="bg-bg-hover py-0.5 px-1.5 rounded">{agent.cli}</span>}
-          {agent.messageCount !== undefined && agent.messageCount > 0 && (
-            <span style={{ color: colors.primary }}>{agent.messageCount} msgs</span>
-          )}
-          {agent.isSpawned && (
-            <span className="bg-accent-light text-accent text-[10px] py-0.5 px-1.5 rounded uppercase font-medium">spawned</span>
-          )}
-        </div>
-        <div className="flex gap-1.5">
-          {onPinToggle && (
-            <button
-              className={`
-                relative bg-gradient-to-b rounded-md py-1.5 px-2.5 cursor-pointer flex items-center justify-center gap-1 transition-all duration-200 overflow-hidden
-                ${isPinned
-                  ? 'from-[#3a2a1a] to-[#2a1f0f] text-amber-400 border border-amber-600/50 shadow-[inset_0_1px_0_rgba(251,191,36,0.1),0_2px_4px_rgba(0,0,0,0.3)] hover:shadow-[inset_0_1px_0_rgba(251,191,36,0.2),0_0_12px_rgba(251,191,36,0.4),0_2px_8px_rgba(0,0,0,0.4)]'
-                  : 'from-[#2a2a2a] to-[#1a1a1a] text-text-muted border border-[#404040] shadow-[inset_0_1px_0_rgba(255,255,255,0.05),0_2px_4px_rgba(0,0,0,0.3)] hover:from-[#3a2a1a] hover:to-[#2a1f0f] hover:text-amber-400 hover:border-amber-600/50 hover:shadow-[inset_0_1px_0_rgba(251,191,36,0.1),0_0_12px_rgba(251,191,36,0.3),0_2px_8px_rgba(0,0,0,0.4)]'}
-                ${!isPinned && isMaxPinned ? 'opacity-40 cursor-not-allowed' : 'hover:scale-105'}
-                active:scale-[0.98]
-              `}
-              onClick={handlePinToggle}
-              title={isPinned ? 'Unpin from top' : isMaxPinned ? 'Maximum pins reached (5)' : 'Pin to top'}
-              disabled={!isPinned && isMaxPinned}
-            >
-              <PinIcon size={16} filled={isPinned} />
-            </button>
-          )}
-          {onProfileClick && (
-            <button
-              className="relative bg-gradient-to-b from-[#2a1a3a] to-[#1a0f2a] text-[#a855f7] border border-[#402060] rounded-md py-1.5 px-2.5 cursor-pointer flex items-center justify-center gap-1 transition-all duration-200 shadow-[inset_0_1px_0_rgba(168,85,247,0.1),0_2px_4px_rgba(0,0,0,0.3)] overflow-hidden hover:bg-gradient-to-b hover:from-[#402060] hover:to-[#301a50] hover:border-[#a855f7] hover:shadow-[inset_0_1px_0_rgba(168,85,247,0.2),0_0_12px_rgba(168,85,247,0.4),0_2px_8px_rgba(0,0,0,0.4)] hover:scale-105 active:scale-[0.98]"
-              onClick={handleProfileClick}
-              title="View profile"
-            >
-              <ProfileIcon />
-            </button>
-          )}
-          {agent.isSpawned && onLogsClick && (
-            <button
-              className="relative bg-gradient-to-b from-[#1a2a3a] to-[#0f1a2a] text-accent-cyan border border-[#204060] rounded-md py-1.5 px-2.5 cursor-pointer flex items-center justify-center gap-1 transition-all duration-200 shadow-[inset_0_1px_0_rgba(0,217,255,0.1),0_2px_4px_rgba(0,0,0,0.3)] overflow-hidden hover:bg-gradient-to-b hover:from-[#204060] hover:to-[#1a3a50] hover:border-accent-cyan hover:shadow-[inset_0_1px_0_rgba(0,217,255,0.2),0_0_12px_rgba(0,217,255,0.4),0_2px_8px_rgba(0,0,0,0.4)] hover:scale-105 active:scale-[0.98]"
-              onClick={handleLogsClick}
-              title="View logs"
-            >
-              <LogsIcon />
-            </button>
-          )}
-          {agent.isSpawned && onReleaseClick && (
-            <button
-              className="relative bg-gradient-to-b from-[#3a1a1a] to-[#2a0f0f] text-[#ff6b6b] border border-[#4a2020] rounded-md py-1.5 px-2.5 cursor-pointer flex items-center justify-center gap-1 transition-all duration-200 shadow-[inset_0_1px_0_rgba(255,107,107,0.1),0_2px_4px_rgba(0,0,0,0.3)] overflow-hidden hover:bg-gradient-to-b hover:from-[#4a2020] hover:to-[#3a1515] hover:border-[#ff4444] hover:text-[#ff4444] hover:shadow-[inset_0_1px_0_rgba(255,68,68,0.2),0_0_12px_rgba(255,68,68,0.4),0_2px_8px_rgba(0,0,0,0.4)] hover:scale-105 active:scale-[0.98]"
-              onClick={handleReleaseClick}
-              title="Release agent"
-            >
-              <ReleaseIcon />
-            </button>
-          )}
-          {onMessageClick && (
-            <button
-              className="text-white border-none rounded py-1 px-2 cursor-pointer flex items-center justify-center transition-opacity duration-200 hover:opacity-90"
-              style={{ backgroundColor: colors.primary }}
-              onClick={handleMessageClick}
-              title="Send message"
-            >
-              <MessageIcon />
-            </button>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function MessageIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
-    </svg>
-  );
-}
-
-function ReleaseIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      className="release-icon"
-    >
-      <path
-        d="M12 22c5.523 0 10-4.477 10-10a9.96 9.96 0 0 0-3-7.141"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <path
-        d="M12 22C6.477 22 2 17.523 2 12a9.96 9.96 0 0 1 3-7.141"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-      <line
-        x1="12"
-        y1="2"
-        x2="12"
-        y2="12"
-        stroke="currentColor"
-        strokeWidth="2.5"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}
-
-function LogsIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="4 17 10 11 4 5" />
-      <line x1="12" y1="19" x2="20" y2="19" />
-    </svg>
-  );
-}
-
-function StuckIcon() {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <line x1="12" y1="8" x2="12" y2="12" />
-      <line x1="12" y1="16" x2="12.01" y2="16" />
-    </svg>
-  );
-}
-
-function ProfileIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-      <circle cx="12" cy="7" r="4" />
-    </svg>
-  );
-}
-
-function PinIcon({ size = 16, filled = false }: { size?: number; filled?: boolean }) {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill={filled ? 'currentColor' : 'none'}
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M12 17v5" />
-      <path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4.76Z" />
-    </svg>
-  );
-}