@agent-relay/dashboard 2.0.80 → 2.0.82

package/src/components/ProjectList.tsx

@@ -0,0 +1,711 @@
+/**
+ * ProjectList Component
+ *
+ * Displays projects with nested agents in a flat hierarchy.
+ * Each project is a collapsible section with its agents listed directly underneath.
+ */
+
+import React, { useState, useMemo, useEffect } from 'react';
+import type { Agent, Project } from '../types';
+import { AgentCard } from './AgentCard';
+import { STATUS_COLORS, getAgentColor } from '../lib/colors';
+
+/**
+ * Gets the simple display name for an agent within a team group.
+ * Since the team header already shows context, just show the agent's role/name.
+ *
+ * Examples:
+ * - "Frontend-Lead" in team "Frontend" → "Lead"
+ * - "Lead" in team "Lead" → "Lead"
+ * - "backend-api" in team "backend" → "Api"
+ */
+function stripTeamPrefix(agentName: string, teamName: string): string {
+  const lowerAgent = agentName.toLowerCase();
+  const lowerTeam = teamName.toLowerCase().replace(/-?team$/i, '');
+
+  // Pattern 1: Team prefix with dash separator (e.g., "frontend-lead" → "lead")
+  if (lowerTeam && lowerAgent.startsWith(lowerTeam + '-')) {
+    const stripped = agentName.substring(lowerTeam.length + 1);
+    return capitalizeWords(stripped);
+  }
+
+  // Pattern 2: Team prefix with underscore separator
+  if (lowerTeam && lowerAgent.startsWith(lowerTeam + '_')) {
+    const stripped = agentName.substring(lowerTeam.length + 1);
+    return capitalizeWords(stripped);
+  }
+
+  // Pattern 3: Last segment of hyphenated name (e.g., "LeadFrontend-Dev" → "Dev")
+  const parts = agentName.split('-');
+  if (parts.length > 1) {
+    return capitalizeWords(parts[parts.length - 1]);
+  }
+
+  // No prefix to strip, return capitalized original
+  return capitalizeWords(agentName);
+}
+
+/**
+ * Capitalizes words in a string (handles dash and underscore separators)
+ */
+function capitalizeWords(str: string): string {
+  return str
+    .split(/[-_]/)
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+    .join(' ');
+}
+
+export interface ProjectListProps {
+  projects: Project[];
+  localAgents?: Agent[];
+  /** Bridge-level agents like Architect that span all projects */
+  bridgeAgents?: Agent[];
+  currentProject?: string;
+  selectedAgent?: string;
+  searchQuery?: string;
+  /** Array of pinned agent names */
+  pinnedAgents?: string[];
+  /** Whether max pins has been reached */
+  isMaxPinned?: boolean;
+  onProjectSelect?: (project: Project) => void;
+  onAgentSelect?: (agent: Agent, project?: Project) => void;
+  onReleaseClick?: (agent: Agent) => void;
+  onLogsClick?: (agent: Agent) => void;
+  onProfileClick?: (agent: Agent) => void;
+  /** Handler for pin/unpin toggle */
+  onPinToggle?: (agent: Agent) => void;
+  compact?: boolean;
+}
+
+export function ProjectList({
+  projects,
+  localAgents = [],
+  bridgeAgents = [],
+  currentProject,
+  selectedAgent,
+  searchQuery = '',
+  pinnedAgents = [],
+  isMaxPinned = false,
+  onProjectSelect,
+  onAgentSelect,
+  onReleaseClick,
+  onLogsClick,
+  onProfileClick,
+  onPinToggle,
+  compact = false,
+}: ProjectListProps) {
+  const [expandedProjects, setExpandedProjects] = useState<Set<string>>(
+    () => new Set(projects.map((p) => p.id))
+  );
+  const [isAllCollapsed, setIsAllCollapsed] = useState(false);
+
+  // Filter out system agents (setup agents and Dashboard) and human users
+  // These should not appear in the sidebar but can still send/receive messages
+  // Human users (isHuman or cli === 'dashboard') should appear in Direct Messages, not projects
+  const filterSystemAgents = (agents: Agent[]) =>
+    agents.filter(a =>
+      !a.name.startsWith('__setup__') &&
+      a.name !== 'Dashboard' &&
+      !a.isHuman &&
+      a.cli !== 'dashboard'
+    );
+
+  // Filter projects and agents based on search query
+  const filteredData = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+
+    // Always filter system agents first
+    const filteredLocalAgents = filterSystemAgents(localAgents);
+    const filteredBridgeAgents = filterSystemAgents(bridgeAgents);
+    const projectsWithFilteredAgents = projects.map(p => ({
+      ...p,
+      agents: filterSystemAgents(p.agents),
+    }));
+
+    if (!query) {
+      return { projects: projectsWithFilteredAgents, localAgents: filteredLocalAgents, bridgeAgents: filteredBridgeAgents };
+    }
+
+    // Filter local agents by search query (using pre-filtered agents)
+    const searchFilteredLocal = filteredLocalAgents.filter(
+      (a) =>
+        a.name.toLowerCase().includes(query) ||
+        a.currentTask?.toLowerCase().includes(query)
+    );
+
+    // Filter bridge agents by search query (using pre-filtered agents)
+    const searchFilteredBridge = filteredBridgeAgents.filter(
+      (a) =>
+        a.name.toLowerCase().includes(query) ||
+        a.currentTask?.toLowerCase().includes(query)
+    );
+
+    // Filter projects (show project if name matches OR any agent matches)
+    // Uses pre-filtered projects with system agents already removed
+    const searchFilteredProjects = projectsWithFilteredAgents
+      .map((project) => {
+        const projectNameMatches =
+          project.name?.toLowerCase().includes(query) ||
+          project.path.toLowerCase().includes(query);
+
+        const searchFilteredAgents = project.agents.filter(
+          (a) =>
+            a.name.toLowerCase().includes(query) ||
+            a.currentTask?.toLowerCase().includes(query)
+        );
+
+        // Include project if name matches or has matching agents
+        if (projectNameMatches || searchFilteredAgents.length > 0) {
+          return {
+            ...project,
+            agents: projectNameMatches ? project.agents : searchFilteredAgents,
+          };
+        }
+        return null;
+      })
+      .filter(Boolean) as Project[];
+
+    return { projects: searchFilteredProjects, localAgents: searchFilteredLocal, bridgeAgents: searchFilteredBridge };
+  }, [projects, localAgents, bridgeAgents, searchQuery]);
+
+  const toggleProject = (projectId: string) => {
+    setExpandedProjects((prev) => {
+      const next = new Set(prev);
+      if (next.has(projectId)) {
+        next.delete(projectId);
+      } else {
+        next.add(projectId);
+      }
+      return next;
+    });
+  };
+
+  const toggleAll = () => {
+    if (isAllCollapsed) {
+      // Expand: restore all projects
+      setIsAllCollapsed(false);
+      const allProjectIds = new Set(filteredData.projects.map((p) => p.id));
+      if (filteredData.localAgents.length > 0) {
+        allProjectIds.add('__local__');
+      }
+      setExpandedProjects(allProjectIds);
+    } else {
+      // Collapse: hide everything
+      setIsAllCollapsed(true);
+    }
+  };
+
+  const totalAgents =
+    filteredData.localAgents.length +
+    filteredData.bridgeAgents.length +
+    filteredData.projects.reduce((sum, p) => sum + p.agents.length, 0);
+
+  if (totalAgents === 0 && projects.length === 0 && localAgents.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-10 px-5 text-text-muted text-center">
+        <EmptyIcon />
+        <p>No projects or agents</p>
+      </div>
+    );
+  }
+
+  if (totalAgents === 0 && searchQuery) {
+    return (
+      <div className="flex flex-col items-center justify-center py-10 px-5 text-text-muted text-center">
+        <SearchIcon />
+        <p>No results for "{searchQuery}"</p>
+      </div>
+    );
+  }
+
+  // Only show bridge section when in bridge mode (multiple projects)
+  const isInBridgeMode = filteredData.projects.length > 1;
+
+  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>{totalAgents} {totalAgents === 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 && (
+        <>
+      {/* Bridge-level agents section (Architect, etc.) - only in bridge mode */}
+      {isInBridgeMode && filteredData.bridgeAgents.length > 0 && (
+        <BridgeSection
+          agents={filteredData.bridgeAgents}
+          selectedAgent={selectedAgent}
+          compact={compact}
+          pinnedAgents={pinnedAgents}
+          isMaxPinned={isMaxPinned}
+          onAgentSelect={(agent) => onAgentSelect?.(agent)}
+          onReleaseClick={onReleaseClick}
+          onLogsClick={onLogsClick}
+          onProfileClick={onProfileClick}
+          onPinToggle={onPinToggle}
+        />
+      )}
+
+      {/* Local agents section (current project) - only when not in bridge mode */}
+      {!isInBridgeMode && filteredData.localAgents.length > 0 && (
+        <ProjectSection
+          project={{
+            id: '__local__',
+            path: '',
+            name: 'Local',
+            agents: filteredData.localAgents,
+          }}
+          isExpanded={expandedProjects.has('__local__')}
+          isCurrentProject={true}
+          selectedAgent={selectedAgent}
+          compact={compact}
+          pinnedAgents={pinnedAgents}
+          isMaxPinned={isMaxPinned}
+          onToggle={() => toggleProject('__local__')}
+          onAgentSelect={(agent) => onAgentSelect?.(agent)}
+          onReleaseClick={onReleaseClick}
+          onLogsClick={onLogsClick}
+          onProfileClick={onProfileClick}
+          onPinToggle={onPinToggle}
+        />
+      )}
+
+      {/* Bridged projects */}
+      {filteredData.projects.map((project) => (
+        <ProjectSection
+          key={project.id}
+          project={project}
+          isExpanded={expandedProjects.has(project.id)}
+          isCurrentProject={project.id === currentProject}
+          selectedAgent={selectedAgent}
+          compact={compact}
+          isBridgeMode={isInBridgeMode}
+          pinnedAgents={pinnedAgents}
+          isMaxPinned={isMaxPinned}
+          onToggle={() => toggleProject(project.id)}
+          onProjectSelect={() => onProjectSelect?.(project)}
+          onAgentSelect={(agent) => onAgentSelect?.(agent, project)}
+          onReleaseClick={onReleaseClick}
+          onLogsClick={onLogsClick}
+          onProfileClick={onProfileClick}
+          onPinToggle={onPinToggle}
+        />
+      ))}
+        </>
+      )}
+    </div>
+  );
+}
+
+interface ProjectSectionProps {
+  project: Project;
+  isExpanded: boolean;
+  isCurrentProject: boolean;
+  selectedAgent?: string;
+  compact?: boolean;
+  /** Is this project part of a multi-project bridge setup */
+  isBridgeMode?: boolean;
+  pinnedAgents?: string[];
+  isMaxPinned?: boolean;
+  onToggle: () => void;
+  onProjectSelect?: () => void;
+  onAgentSelect?: (agent: Agent) => void;
+  onReleaseClick?: (agent: Agent) => void;
+  onLogsClick?: (agent: Agent) => void;
+  onProfileClick?: (agent: Agent) => void;
+  onPinToggle?: (agent: Agent) => void;
+}
+
+interface TeamGroup {
+  name: string;
+  agents: Agent[];
+}
+
+function ProjectSection({
+  project,
+  isExpanded,
+  isCurrentProject,
+  selectedAgent,
+  compact,
+  isBridgeMode = false,
+  pinnedAgents = [],
+  isMaxPinned = false,
+  onToggle,
+  onProjectSelect,
+  onAgentSelect,
+  onReleaseClick,
+  onLogsClick,
+  onProfileClick,
+  onPinToggle,
+}: ProjectSectionProps) {
+  const [expandedTeams, setExpandedTeams] = useState<Set<string>>(new Set());
+
+  const stats = useMemo(() => {
+    let online = 0;
+    let needsAttention = 0;
+    for (const agent of project.agents) {
+      if (agent.status === 'online') online++;
+      if (agent.needsAttention) needsAttention++;
+    }
+    return { online, needsAttention, total: project.agents.length };
+  }, [project.agents]);
+
+  // Group agents by team (optional user-defined grouping)
+  const { teams, ungroupedAgents } = useMemo(() => {
+    const teamMap = new Map<string, Agent[]>();
+    const ungrouped: Agent[] = [];
+
+    for (const agent of project.agents) {
+      if (agent.team) {
+        const existing = teamMap.get(agent.team) || [];
+        existing.push(agent);
+        teamMap.set(agent.team, existing);
+      } else {
+        ungrouped.push(agent);
+      }
+    }
+
+    const teams: TeamGroup[] = Array.from(teamMap.entries())
+      .map(([name, agents]) => ({ name, agents }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    return { teams, ungroupedAgents: ungrouped };
+  }, [project.agents]);
+
+  const toggleTeam = (teamName: string) => {
+    setExpandedTeams((prev) => {
+      const next = new Set(prev);
+      if (next.has(teamName)) {
+        next.delete(teamName);
+      } else {
+        next.add(teamName);
+      }
+      return next;
+    });
+  };
+
+  // Auto-expand teams when project expands
+  useEffect(() => {
+    if (isExpanded && expandedTeams.size === 0 && teams.length > 0) {
+      setExpandedTeams(new Set(teams.map((t) => t.name)));
+    }
+  }, [isExpanded, teams, expandedTeams]);
+
+  const projectColor = getAgentColor(project.name || project.id);
+  const displayName = project.name || project.path.split('/').pop() || project.id;
+
+  return (
+    <div className="mb-1">
+      <button
+        className={`group flex items-center gap-2 w-full py-2.5 px-3 bg-none border-none cursor-pointer text-[13px] text-left rounded-md transition-colors duration-200 relative text-text-primary hover:bg-bg-hover ${
+          isCurrentProject ? 'bg-success-light' : ''
+        }`}
+        onClick={onToggle}
+        onDoubleClick={onProjectSelect}
+        style={{
+          '--project-color': projectColor.primary,
+          '--project-light': projectColor.light,
+        } as React.CSSProperties}
+      >
+        <div
+          className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm"
+          style={{ background: projectColor.primary }}
+        />
+        <ChevronIcon expanded={isExpanded} />
+        <FolderIcon color={projectColor.primary} />
+        <span className="font-semibold text-text-primary whitespace-nowrap overflow-hidden text-ellipsis">{displayName}</span>
+        <span className="text-text-muted font-normal flex-shrink-0">({stats.total})</span>
+
+        <div className="ml-auto flex gap-2 flex-shrink-0">
+          {stats.online > 0 && (
+            <span className="flex items-center gap-1 text-[11px] text-text-dim">
+              <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-[11px] text-text-dim">
+              <span
+                className="w-1.5 h-1.5 rounded-full"
+                style={{ backgroundColor: STATUS_COLORS.attention }}
+              />
+              {stats.needsAttention}
+            </span>
+          )}
+        </div>
+
+        {project.lead?.connected && (
+          <span className="text-[#ffd700] text-xs ml-1" title={`Lead: ${project.lead.name}`}>
+            ★
+          </span>
+        )}
+
+        {/* Switch button - shown in bridge mode for non-current projects */}
+        {isBridgeMode && !isCurrentProject && onProjectSelect && (
+          <span
+            role="button"
+            tabIndex={0}
+            className="ml-2 py-1 px-2 text-[10px] font-medium bg-accent-cyan/20 text-accent-cyan rounded cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity hover:bg-accent-cyan/30"
+            onClick={(e) => {
+              e.stopPropagation();
+              onProjectSelect();
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                onProjectSelect();
+              }
+            }}
+            title="Switch to this project"
+          >
+            Switch
+          </span>
+        )}
+      </button>
+
+      {isExpanded && (
+        <div className="py-1 pl-5 flex flex-col gap-1">
+          {/* Team groups (optional user-defined) */}
+          {teams.map((team) => (
+            <div key={team.name} className="mb-0.5">
+              <button
+                className="flex items-center gap-1.5 w-full py-1.5 px-2 bg-none border-none cursor-pointer text-xs text-left rounded transition-colors duration-200 text-text-secondary hover:bg-bg-hover"
+                onClick={() => toggleTeam(team.name)}
+              >
+                <ChevronIcon expanded={expandedTeams.has(team.name)} />
+                <TeamIcon />
+                <span className="font-medium text-text-secondary">{team.name}</span>
+                <span className="text-text-muted font-normal">({team.agents.length})</span>
+              </button>
+              {expandedTeams.has(team.name) && (
+                <div className="py-0.5 pl-4 flex flex-col gap-1">
+                  {team.agents.map((agent) => (
+                    <AgentCard
+                      key={agent.name}
+                      agent={agent}
+                      isSelected={agent.name === selectedAgent}
+                      compact={compact}
+                      displayNameOverride={stripTeamPrefix(agent.name, team.name)}
+                      isPinned={pinnedAgents.includes(agent.name)}
+                      isMaxPinned={isMaxPinned}
+                      onClick={onAgentSelect}
+                      onReleaseClick={onReleaseClick}
+                      onLogsClick={onLogsClick}
+                      onProfileClick={onProfileClick}
+                      onPinToggle={onPinToggle}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+
+          {/* Ungrouped agents (no team assigned) */}
+          {ungroupedAgents.map((agent) => (
+            <AgentCard
+              key={agent.name}
+              agent={agent}
+              isSelected={agent.name === selectedAgent}
+              compact={compact}
+              isPinned={pinnedAgents.includes(agent.name)}
+              isMaxPinned={isMaxPinned}
+              onClick={onAgentSelect}
+              onReleaseClick={onReleaseClick}
+              onLogsClick={onLogsClick}
+              onProfileClick={onProfileClick}
+              onPinToggle={onPinToggle}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Bridge Section - displays bridge-level agents (Architect, etc.)
+ */
+interface BridgeSectionProps {
+  agents: Agent[];
+  selectedAgent?: string;
+  compact?: boolean;
+  pinnedAgents?: string[];
+  isMaxPinned?: boolean;
+  onAgentSelect?: (agent: Agent) => void;
+  onReleaseClick?: (agent: Agent) => void;
+  onLogsClick?: (agent: Agent) => void;
+  onProfileClick?: (agent: Agent) => void;
+  onPinToggle?: (agent: Agent) => void;
+}
+
+function BridgeSection({
+  agents,
+  selectedAgent,
+  compact,
+  pinnedAgents = [],
+  isMaxPinned = false,
+  onAgentSelect,
+  onReleaseClick,
+  onLogsClick,
+  onProfileClick,
+  onPinToggle,
+}: BridgeSectionProps) {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  return (
+    <div className="mb-2">
+      <button
+        className="flex items-center gap-2 w-full py-2.5 px-3 bg-none border-none cursor-pointer text-[13px] text-left rounded-md transition-colors duration-200 relative text-text-primary hover:bg-accent-purple/10"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <div
+          className="absolute left-0 top-1 bottom-1 w-[3px] rounded-sm bg-accent-purple"
+        />
+        <ChevronIcon expanded={isExpanded} />
+        <BridgeIcon />
+        <span className="font-semibold text-text-primary">Bridge</span>
+        <span className="text-text-muted font-normal flex-shrink-0">({agents.length})</span>
+      </button>
+
+      {isExpanded && (
+        <div className="py-1 pl-5 flex flex-col gap-1">
+          {agents.map((agent) => (
+            <AgentCard
+              key={agent.name}
+              agent={agent}
+              isSelected={agent.name === selectedAgent}
+              compact={compact}
+              isPinned={pinnedAgents.includes(agent.name)}
+              isMaxPinned={isMaxPinned}
+              onClick={onAgentSelect}
+              onReleaseClick={onReleaseClick}
+              onLogsClick={onLogsClick}
+              onProfileClick={onProfileClick}
+              onPinToggle={onPinToggle}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function BridgeIcon() {
+  return (
+    <svg
+      className="flex-shrink-0 text-accent-purple"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="3" />
+      <circle cx="5" cy="5" r="2" />
+      <circle cx="19" cy="5" r="2" />
+      <circle cx="5" cy="19" r="2" />
+      <circle cx="19" cy="19" r="2" />
+      <line x1="9.5" y1="9.5" x2="6.5" y2="6.5" />
+      <line x1="14.5" y1="9.5" x2="17.5" y2="6.5" />
+      <line x1="9.5" y1="14.5" x2="6.5" y2="17.5" />
+      <line x1="14.5" y1="14.5" x2="17.5" y2="17.5" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      className={`transition-transform duration-200 text-text-muted flex-shrink-0 ${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 FolderIcon({ color }: { color: string }) {
+  return (
+    <svg
+      className="flex-shrink-0"
+      style={{ color }}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function TeamIcon() {
+  return (
+    <svg
+      className="text-text-muted flex-shrink-0"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
+      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+      <circle cx="9" cy="7" r="4" />
+      <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+    </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"
+    >
+      <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+    </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>
+  );
+}