syndarix/frontend/src/components/projects/AgentPanel.tsx

/**
 * Agent Panel Component
 *
 * Displays a list of active agents on the project with their status and current task.
 */

'use client';

import { Bot, MoreVertical } from 'lucide-react';
import { formatDistanceToNow } from 'date-fns';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Skeleton } from '@/components/ui/skeleton';
import { AgentStatusIndicator } from './AgentStatusIndicator';
import type { AgentInstance } from './types';

// ============================================================================
// Types
// ============================================================================

interface AgentPanelProps {
  /** List of agent instances */
  agents: AgentInstance[];
  /** Whether data is loading */
  isLoading?: boolean;
  /** Callback when "Manage Agents" is clicked */
  onManageAgents?: () => void;
  /** Callback when an agent action is triggered */
  onAgentAction?: (agentId: string, action: 'view' | 'pause' | 'restart' | 'terminate') => void;
  /** Additional CSS classes */
  className?: string;
}

// ============================================================================
// Helper Functions
// ============================================================================

function getAgentAvatarText(agent: AgentInstance): string {
  if (agent.avatar) return agent.avatar;
  // Generate initials from role
  const words = agent.role.split(/[\s_-]+/);
  if (words.length >= 2) {
    return (words[0][0] + words[1][0]).toUpperCase();
  }
  return agent.role.substring(0, 2).toUpperCase();
}

function formatLastActivity(lastActivity?: string): string {
  if (!lastActivity) return 'No activity';
  try {
    return formatDistanceToNow(new Date(lastActivity), { addSuffix: true });
  } catch {
    return 'Unknown';
  }
}

// ============================================================================
// Subcomponents
// ============================================================================

function AgentListItem({
  agent,
  onAction,
}: {
  agent: AgentInstance;
  onAction?: (agentId: string, action: 'view' | 'pause' | 'restart' | 'terminate') => void;
}) {
  const avatarText = getAgentAvatarText(agent);
  const lastActivity = formatLastActivity(agent.last_activity_at);

  return (
    <div
      className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50"
      data-testid={`agent-item-${agent.id}`}
    >
      <div className="flex items-center gap-3">
        {/* Avatar */}
        <div
          className="flex h-10 w-10 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary"
          aria-hidden="true"
        >
          {avatarText}
        </div>

        {/* Info */}
        <div>
          <div className="flex items-center gap-2">
            <span className="font-medium">{agent.name}</span>
            <AgentStatusIndicator status={agent.status} />
          </div>
          <p className="text-sm text-muted-foreground line-clamp-1">
            {agent.current_task || 'No active task'}
          </p>
        </div>
      </div>

      <div className="flex items-center gap-2">
        <span className="text-xs text-muted-foreground">{lastActivity}</span>

        {onAction && (
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="h-8 w-8"
                aria-label={`Actions for ${agent.name}`}
              >
                <MoreVertical className="h-4 w-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onAction(agent.id, 'view')}>
                View Details
              </DropdownMenuItem>
              {agent.status === 'working' || agent.status === 'waiting' ? (
                <DropdownMenuItem onClick={() => onAction(agent.id, 'pause')}>
                  Pause Agent
                </DropdownMenuItem>
              ) : (
                <DropdownMenuItem onClick={() => onAction(agent.id, 'restart')}>
                  Restart Agent
                </DropdownMenuItem>
              )}
              <DropdownMenuSeparator />
              <DropdownMenuItem
                onClick={() => onAction(agent.id, 'terminate')}
                className="text-destructive focus:text-destructive"
              >
                Terminate Agent
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        )}
      </div>
    </div>
  );
}

function AgentPanelSkeleton() {
  return (
    <Card>
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div className="space-y-2">
            <Skeleton className="h-5 w-32" />
            <Skeleton className="h-4 w-48" />
          </div>
          <Skeleton className="h-9 w-28" />
        </div>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="flex items-center gap-3 rounded-lg border p-3">
              <Skeleton className="h-10 w-10 rounded-full" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-4 w-32" />
                <Skeleton className="h-3 w-48" />
              </div>
              <Skeleton className="h-8 w-8" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================================================
// Main Component
// ============================================================================

export function AgentPanel({
  agents,
  isLoading = false,
  onManageAgents,
  onAgentAction,
  className,
}: AgentPanelProps) {
  if (isLoading) {
    return <AgentPanelSkeleton />;
  }

  const activeAgentCount = agents.filter(
    (a) => a.status === 'working' || a.status === 'waiting'
  ).length;

  return (
    <Card className={className} data-testid="agent-panel">
      <CardHeader className="pb-3">
        <div className="flex items-center justify-between">
          <div>
            <CardTitle className="flex items-center gap-2">
              <Bot className="h-5 w-5" aria-hidden="true" />
              Active Agents
            </CardTitle>
            <CardDescription>
              {activeAgentCount} of {agents.length} agents working
            </CardDescription>
          </div>
          {onManageAgents && (
            <Button variant="outline" size="sm" onClick={onManageAgents}>
              Manage Agents
            </Button>
          )}
        </div>
      </CardHeader>
      <CardContent>
        {agents.length === 0 ? (
          <div className="flex flex-col items-center justify-center py-8 text-center text-muted-foreground">
            <Bot className="mb-2 h-8 w-8" aria-hidden="true" />
            <p className="text-sm">No agents assigned to this project</p>
          </div>
        ) : (
          <div className="space-y-3">
            {agents.map((agent) => (
              <AgentListItem
                key={agent.id}
                agent={agent}
                onAction={onAgentAction}
              />
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}