agent-relay 1.6.0 → 2.0.4

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

@@ -0,0 +1,564 @@
+/**
+ * AgentProfilePanel Component
+ *
+ * Slide-out panel showing agent profile details.
+ * Displays avatar, name, status, spawn prompt, persona, and other metadata.
+ * Similar to Slack's user profile panel.
+ */
+
+import React, { useEffect, useRef, useState } from 'react';
+import type { Agent, AgentSummary } from '../types';
+import {
+  getAgentColor,
+  getAgentInitials,
+  STATUS_COLORS,
+} from '../lib/colors';
+import { getAgentDisplayName, getAgentBreadcrumb } from '../lib/hierarchy';
+
+/** Provider display configuration */
+const PROVIDER_CONFIG: Record<string, { label: string; color: string; icon: string }> = {
+  claude: { label: 'Claude', color: '#00d9ff', icon: '🤖' },
+  codex: { label: 'Codex', color: '#10a37f', icon: '🧠' },
+  gemini: { label: 'Gemini', color: '#4285f4', icon: '✨' },
+  droid: { label: 'Droid', color: '#ff6b35', icon: '🤖' },
+  opencode: { label: 'OpenCode', color: '#a855f7', icon: '💻' },
+  cursor: { label: 'Cursor', color: '#00b4d8', icon: '🖱️' },
+  other: { label: 'AI Agent', color: '#8d8d8e', icon: '🤖' },
+};
+
+/** Map CLI commands to provider names (for CLIs with different command names) */
+const CLI_TO_PROVIDER_MAP: Record<string, string> = {
+  agent: 'cursor', // Cursor CLI installs as 'agent'
+};
+
+export interface AgentProfilePanelProps {
+  /** Agent to display (null to hide panel) */
+  agent: Agent | null;
+  /** Callback when panel should close */
+  onClose: () => void;
+  /** Callback when message button is clicked */
+  onMessage?: (agent: Agent) => void;
+  /** Callback when logs button is clicked */
+  onLogs?: (agent: Agent) => void;
+  /** Callback when release button is clicked */
+  onRelease?: (agent: Agent) => void;
+  /** Agent's recent work summary (optional) */
+  summary?: AgentSummary | null;
+}
+
+export function AgentProfilePanel({
+  agent,
+  onClose,
+  onMessage,
+  onLogs,
+  onRelease,
+  summary,
+}: AgentProfilePanelProps) {
+  const panelRef = useRef<HTMLDivElement>(null);
+  const [showFullPrompt, setShowFullPrompt] = useState(false);
+  const [showFullPersona, setShowFullPersona] = useState(false);
+
+  // Close on Escape key
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    if (agent) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [agent, onClose]);
+
+  // Close on outside click
+  const justOpenedRef = useRef(false);
+
+  useEffect(() => {
+    if (agent) {
+      justOpenedRef.current = true;
+      setShowFullPrompt(false);
+      setShowFullPersona(false);
+    }
+  }, [agent]);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (justOpenedRef.current) {
+        justOpenedRef.current = false;
+        return;
+      }
+
+      if (panelRef.current && !panelRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (agent) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [agent, onClose]);
+
+  if (!agent) {
+    return null;
+  }
+
+  const colors = getAgentColor(agent.name);
+  const initials = getAgentInitials(agent.name);
+  const displayName = getAgentDisplayName(agent.name);
+  const breadcrumb = getAgentBreadcrumb(agent.name);
+  const statusColor = STATUS_COLORS[agent.status] || STATUS_COLORS.offline;
+  const isOnline = agent.status === 'online';
+  const profile = agent.profile;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div className="fixed inset-0 bg-black/50 z-40" />
+
+      {/* Panel */}
+      <div
+        ref={panelRef}
+        className="fixed right-0 top-0 h-full w-96 bg-[#1a1d21] border-l border-white/10 shadow-2xl z-50 flex flex-col animate-slide-in-right"
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-white/10">
+          <h2 className="text-lg font-semibold text-[#d1d2d3]">Agent Profile</h2>
+          <button
+            onClick={onClose}
+            className="p-1 hover:bg-white/10 rounded-md transition-colors text-[#d1d2d3]"
+            title="Close"
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+
+        {/* Agent Info */}
+        <div className="flex flex-col items-center p-6 border-b border-white/10">
+          {/* Large Avatar */}
+          <div className="relative mb-4">
+            <div
+              className="w-24 h-24 rounded-2xl flex items-center justify-center text-3xl font-bold shadow-lg"
+              style={{
+                background: `linear-gradient(135deg, ${colors.primary}, ${colors.primary}99)`,
+                boxShadow: isOnline ? `0 4px 20px ${colors.primary}50` : 'none',
+              }}
+            >
+              <span style={{ color: colors.text }}>{initials}</span>
+            </div>
+            {/* Status indicator */}
+            <div
+              className={`absolute bottom-1 right-1 w-5 h-5 rounded-full border-4 border-[#1a1d21] ${isOnline ? 'animate-pulse' : ''}`}
+              style={{
+                backgroundColor: statusColor,
+                boxShadow: isOnline ? `0 0 8px ${statusColor}` : 'none',
+              }}
+            />
+          </div>
+
+          {/* Name */}
+          <h3 className="text-xl font-semibold text-[#d1d2d3] mb-1">
+            {displayName}
+          </h3>
+
+          {/* Breadcrumb */}
+          {breadcrumb && (
+            <span className="text-sm text-[#8d8d8e] font-mono mb-2">
+              {breadcrumb}
+            </span>
+          )}
+
+          {/* Title/Role */}
+          {profile?.title && (
+            <span className="text-sm text-[#a855f7] font-medium mb-2">
+              {profile.title}
+            </span>
+          )}
+
+          {/* Status */}
+          <span
+            className="text-sm flex items-center gap-1.5"
+            style={{ color: statusColor }}
+          >
+            <div
+              className={`w-2 h-2 rounded-full ${isOnline ? 'animate-pulse' : ''}`}
+              style={{ backgroundColor: statusColor }}
+            />
+            {agent.status.charAt(0).toUpperCase() + agent.status.slice(1)}
+            {agent.isProcessing && ' - Thinking...'}
+          </span>
+
+          {/* Provider Display - Prominent like GitHub link for users */}
+          {agent.cli && (() => {
+            const cliLower = agent.cli.toLowerCase();
+            // Map CLI command to provider (e.g., 'agent' -> 'cursor')
+            const providerKey = CLI_TO_PROVIDER_MAP[cliLower] || cliLower;
+            const providerInfo = PROVIDER_CONFIG[providerKey] || PROVIDER_CONFIG.other;
+            return (
+              <div
+                className="flex items-center gap-2 mt-3 px-3 py-2 rounded-lg border"
+                style={{
+                  borderColor: `${providerInfo.color}40`,
+                  backgroundColor: `${providerInfo.color}10`,
+                }}
+              >
+                <span className="text-lg">{providerInfo.icon}</span>
+                <div className="flex flex-col">
+                  <span className="text-xs text-[#8d8d8e] uppercase tracking-wide">Provider</span>
+                  <span
+                    className="text-sm font-medium"
+                    style={{ color: providerInfo.color }}
+                  >
+                    {providerInfo.label}
+                  </span>
+                </div>
+                {profile?.model && (
+                  <span className="ml-auto text-xs text-[#8d8d8e] font-mono">
+                    {profile.model}
+                  </span>
+                )}
+              </div>
+            );
+          })()}
+
+          {/* Tags */}
+          <div className="flex flex-wrap gap-2 mt-3">
+            {agent.isSpawned && (
+              <span className="text-xs bg-[#a855f7]/20 text-[#a855f7] px-2 py-1 rounded uppercase font-medium">
+                Spawned
+              </span>
+            )}
+            {agent.team && (
+              <span className="text-xs bg-[#00d9ff]/20 text-[#00d9ff] px-2 py-1 rounded">
+                {agent.team}
+              </span>
+            )}
+            {profile?.personaName && (
+              <span className="text-xs bg-[#10b981]/20 text-[#10b981] px-2 py-1 rounded">
+                {profile.personaName}
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Details - Scrollable */}
+        <div className="flex-1 p-4 overflow-y-auto">
+          <div className="space-y-4">
+            {/* Recent Work Summary - Top of details for visibility */}
+            {summary && (summary.completedTasks?.length || summary.currentTask || summary.context) && (
+              <div className="bg-[#1e2024] border border-[#00d9ff]/20 rounded-lg p-3">
+                <label className="text-xs text-[#00d9ff] uppercase tracking-wide font-medium flex items-center gap-1.5 mb-2">
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M3 12h4l3 9 4-18 3 9h4" />
+                  </svg>
+                  Recent Work
+                </label>
+
+                {/* Current Task */}
+                {summary.currentTask && (
+                  <div className="mb-2">
+                    <span className="text-xs text-[#8d8d8e]">Working on:</span>
+                    <p className="text-sm text-[#d1d2d3] mt-0.5 bg-[#2a2d31] p-2 rounded">
+                      {summary.currentTask}
+                    </p>
+                  </div>
+                )}
+
+                {/* Completed Tasks */}
+                {summary.completedTasks && summary.completedTasks.length > 0 && (
+                  <div className="mb-2">
+                    <span className="text-xs text-[#8d8d8e]">Completed:</span>
+                    <ul className="mt-1 space-y-1">
+                      {summary.completedTasks.slice(0, 5).map((task, i) => (
+                        <li key={i} className="text-xs text-[#d1d2d3] flex items-start gap-1.5">
+                          <span className="text-[#10b981] mt-0.5">✓</span>
+                          <span>{task}</span>
+                        </li>
+                      ))}
+                      {summary.completedTasks.length > 5 && (
+                        <li className="text-xs text-[#8d8d8e]">
+                          +{summary.completedTasks.length - 5} more...
+                        </li>
+                      )}
+                    </ul>
+                  </div>
+                )}
+
+                {/* Context */}
+                {summary.context && (
+                  <div className="mb-2">
+                    <span className="text-xs text-[#8d8d8e]">Context:</span>
+                    <p className="text-xs text-[#a0a0b0] mt-0.5 italic">
+                      {summary.context}
+                    </p>
+                  </div>
+                )}
+
+                {/* Files touched */}
+                {summary.files && summary.files.length > 0 && (
+                  <div>
+                    <span className="text-xs text-[#8d8d8e]">Files:</span>
+                    <div className="flex flex-wrap gap-1 mt-1">
+                      {summary.files.slice(0, 6).map((file, i) => (
+                        <span
+                          key={i}
+                          className="text-[10px] font-mono bg-[#2a2d31] text-[#a855f7] px-1.5 py-0.5 rounded"
+                          title={file}
+                        >
+                          {file.split('/').pop()}
+                        </span>
+                      ))}
+                      {summary.files.length > 6 && (
+                        <span className="text-[10px] text-[#8d8d8e]">
+                          +{summary.files.length - 6}
+                        </span>
+                      )}
+                    </div>
+                  </div>
+                )}
+
+                {/* Last updated */}
+                {summary.lastUpdated && (
+                  <div className="mt-2 pt-2 border-t border-[#2a2d31]">
+                    <span className="text-[10px] text-[#606070]">
+                      Updated {formatRelativeTime(summary.lastUpdated)}
+                    </span>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Description */}
+            {profile?.description && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Description</label>
+                <p className="text-sm text-[#d1d2d3] mt-1">
+                  {profile.description}
+                </p>
+              </div>
+            )}
+
+            {/* Current Task */}
+            {agent.currentTask && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Current Task</label>
+                <p className="text-sm text-[#d1d2d3] mt-1 bg-[#2a2d31] p-2 rounded">
+                  {agent.currentTask}
+                </p>
+              </div>
+            )}
+
+            {/* Spawn Prompt */}
+            {profile?.spawnPrompt && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide flex items-center justify-between">
+                  <span>Spawn Prompt</span>
+                  {profile.spawnPrompt.length > 200 && (
+                    <button
+                      onClick={() => setShowFullPrompt(!showFullPrompt)}
+                      className="text-[#a855f7] hover:text-[#c084fc] text-xs font-normal"
+                    >
+                      {showFullPrompt ? 'Show less' : 'Show more'}
+                    </button>
+                  )}
+                </label>
+                <pre className={`text-sm text-[#d1d2d3] mt-1 bg-[#2a2d31] p-3 rounded font-mono whitespace-pre-wrap ${!showFullPrompt && profile.spawnPrompt.length > 200 ? 'line-clamp-4' : ''}`}>
+                  {profile.spawnPrompt}
+                </pre>
+              </div>
+            )}
+
+            {/* Persona Prompt */}
+            {profile?.personaPrompt && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide flex items-center justify-between">
+                  <span>Agent Persona</span>
+                  {profile.personaPrompt.length > 200 && (
+                    <button
+                      onClick={() => setShowFullPersona(!showFullPersona)}
+                      className="text-[#a855f7] hover:text-[#c084fc] text-xs font-normal"
+                    >
+                      {showFullPersona ? 'Show less' : 'Show more'}
+                    </button>
+                  )}
+                </label>
+                <pre className={`text-sm text-[#d1d2d3] mt-1 bg-[#2a2d31] p-3 rounded font-mono whitespace-pre-wrap ${!showFullPersona && profile.personaPrompt.length > 200 ? 'line-clamp-4' : ''}`}>
+                  {profile.personaPrompt}
+                </pre>
+              </div>
+            )}
+
+            {/* Model */}
+            {profile?.model && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Model</label>
+                <p className="text-sm text-[#d1d2d3] mt-1 font-mono">
+                  {profile.model}
+                </p>
+              </div>
+            )}
+
+            {/* Working Directory */}
+            {profile?.workingDirectory && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Working Directory</label>
+                <p className="text-sm text-[#d1d2d3] mt-1 font-mono bg-[#2a2d31] p-2 rounded truncate" title={profile.workingDirectory}>
+                  {profile.workingDirectory}
+                </p>
+              </div>
+            )}
+
+            {/* Agent ID */}
+            {agent.agentId && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Agent ID</label>
+                <p className="text-sm text-[#d1d2d3] mt-1 font-mono bg-[#2a2d31] p-2 rounded">
+                  {agent.agentId}
+                </p>
+              </div>
+            )}
+
+            {/* Capabilities */}
+            {profile?.capabilities && profile.capabilities.length > 0 && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Capabilities</label>
+                <div className="flex flex-wrap gap-1.5 mt-1">
+                  {profile.capabilities.map((cap, i) => (
+                    <span key={i} className="text-xs bg-[#2a2d31] text-[#d1d2d3] px-2 py-1 rounded">
+                      {cap}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Last Seen */}
+            {agent.lastSeen && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Last Seen</label>
+                <p className="text-sm text-[#d1d2d3] mt-1">
+                  {formatDateTime(agent.lastSeen)}
+                </p>
+              </div>
+            )}
+
+            {/* First Seen */}
+            {profile?.firstSeen && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">First Seen</label>
+                <p className="text-sm text-[#d1d2d3] mt-1">
+                  {formatDateTime(profile.firstSeen)}
+                </p>
+              </div>
+            )}
+
+            {/* Message Count */}
+            {agent.messageCount !== undefined && agent.messageCount > 0 && (
+              <div>
+                <label className="text-xs text-[#8d8d8e] uppercase tracking-wide">Messages</label>
+                <p className="text-sm text-[#d1d2d3] mt-1">
+                  {agent.messageCount} messages sent
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="p-4 border-t border-white/10 space-y-2">
+          {/* Message Button */}
+          {onMessage && (
+            <button
+              onClick={() => {
+                onMessage(agent);
+                onClose();
+              }}
+              className="w-full flex items-center justify-center gap-2 py-2.5 bg-[#a855f7] hover:bg-[#9333ea] text-white font-medium rounded-lg transition-colors"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <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>
+              Send Message
+            </button>
+          )}
+
+          {/* Logs Button */}
+          {agent.isSpawned && onLogs && (
+            <button
+              onClick={() => {
+                onLogs(agent);
+                onClose();
+              }}
+              className="w-full flex items-center justify-center gap-2 py-2.5 border border-[#00d9ff]/30 text-[#00d9ff] hover:bg-[#00d9ff]/10 font-medium rounded-lg transition-colors"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <polyline points="4 17 10 11 4 5" />
+                <line x1="12" y1="19" x2="20" y2="19" />
+              </svg>
+              View Logs
+            </button>
+          )}
+
+          {/* Release Button */}
+          {agent.isSpawned && onRelease && (
+            <button
+              onClick={() => {
+                if (confirm(`Are you sure you want to release ${displayName}?`)) {
+                  onRelease(agent);
+                  onClose();
+                }
+              }}
+              className="w-full flex items-center justify-center gap-2 py-2.5 border border-[#ff6b6b]/30 text-[#ff6b6b] hover:bg-[#ff6b6b]/10 font-medium rounded-lg transition-colors"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="10" />
+                <line x1="15" y1="9" x2="9" y2="15" />
+                <line x1="9" y1="9" x2="15" y2="15" />
+              </svg>
+              Release Agent
+            </button>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * Format a timestamp to a readable date/time
+ */
+function formatDateTime(timestamp: string): string {
+  const date = new Date(timestamp);
+  return date.toLocaleString([], {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+/**
+ * Format a timestamp as relative time (e.g., "5 min ago")
+ */
+function formatRelativeTime(timestamp: string): string {
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHr = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHr / 24);
+
+  if (diffSec < 60) return 'just now';
+  if (diffMin < 60) return `${diffMin} min ago`;
+  if (diffHr < 24) return `${diffHr} hr ago`;
+  if (diffDay < 7) return `${diffDay} day${diffDay > 1 ? 's' : ''} ago`;
+  return formatDateTime(timestamp);
+}