@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/AgentList.test.tsx

@@ -0,0 +1,147 @@
+/**
+ * Tests for AgentList component
+ *
+ * Covers: collapse all/expand all behavior, solo agent rendering,
+ * and group display logic.
+ */
+
+// @vitest-environment jsdom
+import React from 'react';
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { AgentList } from './AgentList';
+import type { Agent } from '../types';
+
+function makeAgent(name: string, overrides: Partial<Agent> = {}): Agent {
+  return {
+    name,
+    status: 'online',
+    ...overrides,
+  };
+}
+
+describe('AgentList', () => {
+  describe('empty states', () => {
+    it('shows empty message when no agents', () => {
+      render(<AgentList agents={[]} />);
+      expect(screen.getByText('No agents connected')).toBeTruthy();
+    });
+
+    it('shows search empty message when no agents match query', () => {
+      const agents = [makeAgent('backend-api')];
+      render(<AgentList agents={agents} searchQuery="zzz" />);
+      expect(screen.getByText(/No agents match/)).toBeTruthy();
+    });
+  });
+
+  describe('Collapse all / Expand all', () => {
+    const agents = [
+      makeAgent('backend-api'),
+      makeAgent('backend-db'),
+      makeAgent('frontend-ui'),
+      makeAgent('frontend-components'),
+    ];
+
+    it('shows agent count in header', () => {
+      render(<AgentList agents={agents} />);
+      expect(screen.getByText('4 agents')).toBeTruthy();
+    });
+
+    it('shows Collapse all button by default', () => {
+      render(<AgentList agents={agents} />);
+      expect(screen.getByText('Collapse all')).toBeTruthy();
+    });
+
+    it('hides all agent cards when Collapse all is clicked', () => {
+      render(<AgentList agents={agents} />);
+
+      // Groups should be visible initially
+      expect(screen.getByText('Backend')).toBeTruthy();
+      expect(screen.getByText('Frontend')).toBeTruthy();
+
+      fireEvent.click(screen.getByText('Collapse all'));
+
+      // After collapse, groups should be hidden entirely
+      expect(screen.queryByText('Backend')).toBeNull();
+      expect(screen.queryByText('Frontend')).toBeNull();
+    });
+
+    it('shows Expand all button after collapsing', () => {
+      render(<AgentList agents={agents} />);
+      fireEvent.click(screen.getByText('Collapse all'));
+      expect(screen.getByText('Expand all')).toBeTruthy();
+    });
+
+    it('still shows agent count when collapsed', () => {
+      render(<AgentList agents={agents} />);
+      fireEvent.click(screen.getByText('Collapse all'));
+      expect(screen.getByText('4 agents')).toBeTruthy();
+    });
+
+    it('restores all groups when Expand all is clicked after collapse', () => {
+      render(<AgentList agents={agents} />);
+
+      fireEvent.click(screen.getByText('Collapse all'));
+      expect(screen.queryByText('Backend')).toBeNull();
+
+      fireEvent.click(screen.getByText('Expand all'));
+      expect(screen.getByText('Backend')).toBeTruthy();
+      expect(screen.getByText('Frontend')).toBeTruthy();
+    });
+
+    it('hides pinned agents section when collapsed', () => {
+      render(
+        <AgentList
+          agents={agents}
+          pinnedAgents={['backend-api']}
+        />
+      );
+
+      expect(screen.getByText('Pinned')).toBeTruthy();
+
+      fireEvent.click(screen.getByText('Collapse all'));
+      expect(screen.queryByText('Pinned')).toBeNull();
+    });
+  });
+
+  describe('solo agent rendering', () => {
+    it('renders solo agent without group header', () => {
+      // "Lead" agent with prefix "lead" and only one agent in group
+      const agents = [
+        makeAgent('Lead'),
+        makeAgent('backend-api'),
+        makeAgent('backend-db'),
+      ];
+
+      render(<AgentList agents={agents} />);
+
+      // "Backend" should appear as a group header
+      expect(screen.getByText('Backend')).toBeTruthy();
+      // "Lead" should render as a standalone card (name appears in display + subtitle)
+      expect(screen.getAllByText('Lead').length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('filters out system agents', () => {
+    it('filters out __setup__ agents', () => {
+      const agents = [
+        makeAgent('__setup__google'),
+        makeAgent('backend-api'),
+      ];
+
+      render(<AgentList agents={agents} />);
+      // Should only count the non-setup agent
+      expect(screen.getByText('1 agent')).toBeTruthy();
+    });
+
+    it('filters out Dashboard agent', () => {
+      const agents = [
+        makeAgent('Dashboard'),
+        makeAgent('backend-api'),
+      ];
+
+      render(<AgentList agents={agents} />);
+      expect(screen.getByText('1 agent')).toBeTruthy();
+    });
+  });
+});

package/src/components/AgentList.tsx

@@ -0,0 +1,419 @@
+/**
+ * AgentList Component
+ *
+ * Displays agents grouped by their hierarchical prefix with
+ * collapsible groups and color coding.
+ */
+
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import type { Agent } from '../types';
+import { AgentCard } from './AgentCard';
+import { groupAgents, getGroupStats, filterAgents, getAgentDisplayName, type AgentGroup } from '../lib/hierarchy';
+import { STATUS_COLORS, getAgentColor, getAgentInitials } from '../lib/colors';
+
+export interface AgentListProps {
+  agents: Agent[];
+  selectedAgent?: string;
+  searchQuery?: string;
+  /** Array of pinned agent names */
+  pinnedAgents?: string[];
+  /** Whether max pins has been reached */
+  isMaxPinned?: boolean;
+  onAgentSelect?: (agent: Agent) => void;
+  onAgentMessage?: (agent: Agent) => void;
+  onReleaseClick?: (agent: Agent) => void;
+  onLogsClick?: (agent: Agent) => void;
+  onProfileClick?: (agent: Agent) => void;
+  /** Handler for pin/unpin toggle */
+  onPinToggle?: (agent: Agent) => void;
+  compact?: boolean;
+  showGroupStats?: boolean;
+}
+
+export function AgentList({
+  agents,
+  selectedAgent,
+  searchQuery = '',
+  pinnedAgents = [],
+  isMaxPinned = false,
+  onAgentSelect,
+  onAgentMessage,
+  onReleaseClick,
+  onLogsClick,
+  onProfileClick,
+  onPinToggle,
+  compact = false,
+  showGroupStats = true,
+}: AgentListProps) {
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [isPinnedExpanded, setIsPinnedExpanded] = useState(true);
+  const [isAllCollapsed, setIsAllCollapsed] = useState(false);
+
+  // Filter out setup agents (temporary agents for provider auth)
+  // and system agents like Dashboard (used for dashboard message sending)
+  // then apply search filtering
+  const filteredAgents = useMemo(() => {
+    const nonSystemAgents = agents.filter(a =>
+      !a.name.startsWith('__setup__') && a.name !== 'Dashboard'
+    );
+    return filterAgents(nonSystemAgents, searchQuery);
+  }, [agents, searchQuery]);
+
+  // Separate pinned and unpinned agents
+  const { pinnedAgentsList, unpinnedAgents } = useMemo(() => {
+    const pinned: Agent[] = [];
+    const unpinned: Agent[] = [];
+    for (const agent of filteredAgents) {
+      if (pinnedAgents.includes(agent.name)) {
+        pinned.push(agent);
+      } else {
+        unpinned.push(agent);
+      }
+    }
+    // Sort pinned agents by their order in pinnedAgents array
+    pinned.sort((a, b) => pinnedAgents.indexOf(a.name) - pinnedAgents.indexOf(b.name));
+    return { pinnedAgentsList: pinned, unpinnedAgents: unpinned };
+  }, [filteredAgents, pinnedAgents]);
+
+  const groups = useMemo(
+    () => groupAgents(unpinnedAgents),
+    [unpinnedAgents]
+  );
+
+  // Track if we've done initial expansion
+  const hasInitialized = useRef(false);
+
+  // Initialize all groups as expanded on first render
+  useEffect(() => {
+    if (!hasInitialized.current && groups.length > 0) {
+      setExpandedGroups(new Set(groups.map((g) => g.prefix)));
+      hasInitialized.current = true;
+    }
+  }, [groups]);
+
+  const toggleGroup = (prefix: string) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(prefix)) {
+        next.delete(prefix);
+      } else {
+        next.add(prefix);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    if (isAllCollapsed) {
+      // Expand: restore all groups and show everything
+      setIsAllCollapsed(false);
+      setExpandedGroups(new Set(groups.map((g) => g.prefix)));
+      setIsPinnedExpanded(true);
+    } else {
+      // Collapse: hide entire panel contents
+      setIsAllCollapsed(true);
+    }
+  };
+
+  if (agents.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-10 px-5 text-text-muted text-center">
+        <EmptyIcon />
+        <p>No agents connected</p>
+      </div>
+    );
+  }
+
+  if (filteredAgents.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-10 px-5 text-text-muted text-center">
+        <SearchIcon />
+        <p>No agents match "{searchQuery}"</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex justify-between items-center py-2 px-3 text-xs text-text-muted">
+        <span>{filteredAgents.length} {filteredAgents.length === 1 ? 'agent' : 'agents'}</span>
+        <button
+          className="bg-transparent border-none text-accent cursor-pointer text-xs hover:underline"
+          onClick={toggleAll}
+        >
+          {isAllCollapsed ? 'Expand all' : 'Collapse all'}
+        </button>
+      </div>
+
+      {!isAllCollapsed && (
+        <>
+          {/* Pinned Agents Section */}
+          {pinnedAgentsList.length > 0 && (
+            <div className="mb-2">
+              <button
+                className="flex items-center gap-2 w-full py-2 px-3 bg-transparent border-none cursor-pointer text-sm text-left rounded transition-colors duration-200 relative hover:bg-amber-400/5"
+                onClick={() => setIsPinnedExpanded(!isPinnedExpanded)}
+              >
+                <div className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm bg-amber-400" />
+                <PinnedChevronIcon expanded={isPinnedExpanded} />
+                <PinHeaderIcon />
+                <span className="font-semibold text-amber-400">Pinned</span>
+                <span className="text-text-muted font-normal">({pinnedAgentsList.length})</span>
+              </button>
+
+              {isPinnedExpanded && (
+                <div className="py-1 pl-4 flex flex-col gap-1">
+                  {pinnedAgentsList.map((agent) => (
+                    <AgentCard
+                      key={agent.name}
+                      agent={agent}
+                      isSelected={agent.name === selectedAgent}
+                      compact={compact}
+                      isPinned={true}
+                      isMaxPinned={isMaxPinned}
+                      onClick={onAgentSelect}
+                      onMessageClick={onAgentMessage}
+                      onReleaseClick={onReleaseClick}
+                      onLogsClick={onLogsClick}
+                      onProfileClick={onProfileClick}
+                      onPinToggle={onPinToggle}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {groups.map((group) => (
+            <AgentGroupComponent
+              key={group.prefix}
+              group={group}
+              isExpanded={expandedGroups.has(group.prefix)}
+              selectedAgent={selectedAgent}
+              compact={compact}
+              showStats={showGroupStats}
+              pinnedAgents={pinnedAgents}
+              isMaxPinned={isMaxPinned}
+              onToggle={() => toggleGroup(group.prefix)}
+              onAgentSelect={onAgentSelect}
+              onAgentMessage={onAgentMessage}
+              onReleaseClick={onReleaseClick}
+              onLogsClick={onLogsClick}
+              onProfileClick={onProfileClick}
+              onPinToggle={onPinToggle}
+            />
+          ))}
+        </>
+      )}
+    </div>
+  );
+}
+
+interface AgentGroupComponentProps {
+  group: AgentGroup;
+  isExpanded: boolean;
+  selectedAgent?: string;
+  compact?: boolean;
+  showStats?: boolean;
+  pinnedAgents?: string[];
+  isMaxPinned?: boolean;
+  onToggle: () => void;
+  onAgentSelect?: (agent: Agent) => void;
+  onAgentMessage?: (agent: Agent) => void;
+  onReleaseClick?: (agent: Agent) => void;
+  onLogsClick?: (agent: Agent) => void;
+  onProfileClick?: (agent: Agent) => void;
+  onPinToggle?: (agent: Agent) => void;
+}
+
+function AgentGroupComponent({
+  group,
+  isExpanded,
+  selectedAgent,
+  compact,
+  showStats,
+  pinnedAgents = [],
+  isMaxPinned = false,
+  onToggle,
+  onAgentSelect,
+  onAgentMessage,
+  onReleaseClick,
+  onLogsClick,
+  onProfileClick,
+  onPinToggle,
+}: AgentGroupComponentProps) {
+  const stats = showStats ? getGroupStats(group.agents) : null;
+
+  // Check if this is a "solo" agent - single agent in group where name matches prefix
+  const isSoloAgent =
+    group.agents.length === 1 &&
+    group.agents[0].name.toLowerCase() === group.prefix.toLowerCase();
+
+  // For solo agents, render just the card without a group header
+  if (isSoloAgent) {
+    const agent = group.agents[0];
+    return (
+      <div className="mb-1 py-1 px-2">
+        <AgentCard
+          key={agent.name}
+          agent={agent}
+          isSelected={agent.name === selectedAgent}
+          compact={compact}
+          isPinned={pinnedAgents.includes(agent.name)}
+          isMaxPinned={isMaxPinned}
+          onClick={onAgentSelect}
+          onMessageClick={onAgentMessage}
+          onReleaseClick={onReleaseClick}
+          onLogsClick={onLogsClick}
+          onProfileClick={onProfileClick}
+          onPinToggle={onPinToggle}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-1">
+      <button
+        className="flex items-center gap-2 w-full py-2 px-3 bg-transparent border-none cursor-pointer text-sm text-left rounded transition-colors duration-200 relative hover:bg-[var(--group-light)]"
+        onClick={onToggle}
+        style={{
+          '--group-color': group.color.primary,
+          '--group-light': group.color.light,
+        } as React.CSSProperties}
+      >
+        <div
+          className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm"
+          style={{ backgroundColor: group.color.primary }}
+        />
+        <ChevronIcon expanded={isExpanded} />
+        <span className="font-semibold text-text-primary">{group.displayName}</span>
+        <span className="text-text-muted font-normal">({group.agents.length})</span>
+
+        {showStats && stats && (
+          <div className="ml-auto flex gap-2">
+            {stats.online > 0 && (
+              <span className="flex items-center gap-1 text-xs text-text-muted" title={`${stats.online} agent${stats.online > 1 ? 's' : ''} online`}>
+                <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: STATUS_COLORS.online }} />
+                {stats.online}
+              </span>
+            )}
+            {stats.needsAttention > 0 && (
+              <span className="flex items-center gap-1 text-xs text-text-muted" title={`${stats.needsAttention} agent${stats.needsAttention > 1 ? 's' : ''} need${stats.needsAttention === 1 ? 's' : ''} attention`}>
+                <span className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: STATUS_COLORS.attention }} />
+                {stats.needsAttention}
+              </span>
+            )}
+          </div>
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="py-1 pl-4 flex flex-col gap-1">
+          {group.agents.map((agent) => (
+            <AgentCard
+              key={agent.name}
+              agent={agent}
+              isSelected={agent.name === selectedAgent}
+              compact={compact}
+              displayNameOverride={getAgentDisplayName(agent.name)}
+              isPinned={pinnedAgents.includes(agent.name)}
+              isMaxPinned={isMaxPinned}
+              onClick={onAgentSelect}
+              onMessageClick={onAgentMessage}
+              onReleaseClick={onReleaseClick}
+              onLogsClick={onLogsClick}
+              onProfileClick={onProfileClick}
+              onPinToggle={onPinToggle}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      className={`text-text-muted transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+}
+
+function EmptyIcon() {
+  return (
+    <svg
+      className="mb-3 opacity-50"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+    >
+      <circle cx="12" cy="8" r="5" />
+      <path d="M20 21a8 8 0 1 0-16 0" />
+    </svg>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg
+      className="mb-3 opacity-50"
+      width="48"
+      height="48"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+  );
+}
+
+function PinnedChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      className={`text-amber-400 transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <polyline points="9 18 15 12 9 6" />
+    </svg>
+  );
+}
+
+function PinHeaderIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-amber-400"
+    >
+      <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>
+  );
+}