agent-relay 2.0.22 → 2.0.24

package/packages/dashboard/ui/react-components/layout/Sidebar.tsx

@@ -1,930 +0,0 @@
-/**
- * Sidebar Component - Mission Control Theme
- *
- * Main navigation sidebar with channels, agents, and projects in unified view.
- * Channels are collapsed by default.
- */
-
-import React, { useState, useEffect } from 'react';
-import type { Agent, Project } from '../../types';
-import type { ThreadInfo } from '../hooks/useMessages';
-import { usePinnedAgents } from '../hooks/usePinnedAgents';
-import { useWorkspaceStatus } from '../hooks/useWorkspaceStatus';
-import { AgentList } from '../AgentList';
-import { ProjectList } from '../ProjectList';
-import { ThreadList } from '../ThreadList';
-import { LogoIcon } from '../Logo';
-
-const THREADS_COLLAPSED_KEY = 'agent-relay-threads-collapsed';
-const SIDEBAR_TAB_KEY = 'agent-relay-sidebar-tab';
-const CHANNELS_COLLAPSED_KEY = 'agent-relay-channels-collapsed';
-
-/** Channel type for sidebar display */
-export interface SidebarChannel {
-  id: string;
-  name: string;
-  unreadCount: number;
-  hasMentions?: boolean;
-}
-
-export type SidebarTab = 'agents' | 'team';
-
-export interface SidebarProps {
-  agents: Agent[];
-  /** Bridge-level agents like Architect that span multiple projects */
-  bridgeAgents?: Agent[];
-  projects?: Project[];
-  /** Current signed-in human (to hide from Human Users list) */
-  currentUserName?: string;
-  /** Unread DM counts keyed by human username */
-  humanUnreadCounts?: Record<string, number>;
-  currentProject?: string;
-  selectedAgent?: string;
-  viewMode: 'local' | 'fleet' | 'channels';
-  isFleetAvailable: boolean;
-  isConnected: boolean;
-  /** Mobile: whether sidebar is open */
-  isOpen?: boolean;
-  /** Active threads for the threads section */
-  activeThreads?: ThreadInfo[];
-  /** Currently selected thread */
-  currentThread?: string | null;
-  /** Total unread thread count for notification badge */
-  totalUnreadThreadCount?: number;
-  /** Whether Activity feed is selected */
-  isActivitySelected?: boolean;
-  /** Unread count for Activity (broadcasts) */
-  activityUnreadCount?: number;
-  /** Handler when Activity is selected */
-  onActivitySelect?: () => void;
-  /** Channels for the collapsible channels section */
-  channels?: SidebarChannel[];
-  /** Archived channels for the collapsible archived section */
-  archivedChannels?: SidebarChannel[];
-  /** Currently selected channel ID */
-  selectedChannelId?: string;
-  /** Handler when a channel is selected */
-  onChannelSelect?: (channel: SidebarChannel) => void;
-  /** Handler to archive a channel */
-  onArchiveChannel?: (channel: SidebarChannel) => void;
-  /** Handler to unarchive a channel */
-  onUnarchiveChannel?: (channel: SidebarChannel) => void;
-  /** Handler to create a new channel */
-  onCreateChannel?: () => void;
-  /** Handler to invite members to a channel */
-  onInviteToChannel?: (channel: SidebarChannel) => void;
-  onAgentSelect?: (agent: Agent, project?: Project) => void;
-  /** Handler when a human user is selected (opens DM) */
-  onHumanSelect?: (human: Agent) => void;
-  onProjectSelect?: (project: Project) => void;
-  onViewModeChange?: (mode: 'local' | 'fleet' | 'channels') => void;
-  onSpawnClick?: () => void;
-  onReleaseClick?: (agent: Agent) => void;
-  onLogsClick?: (agent: Agent) => void;
-  /** Handler to view agent profile */
-  onProfileClick?: (agent: Agent) => void;
-  onThreadSelect?: (threadId: string) => void;
-  /** Mobile: close sidebar handler */
-  onClose?: () => void;
-  /** Handler for opening settings */
-  onSettingsClick?: () => void;
-  /** Mobile nav: Trajectory viewer toggle */
-  onTrajectoryClick?: () => void;
-  /** Mobile nav: Whether there's an active trajectory */
-  hasActiveTrajectory?: boolean;
-  /** Mobile nav: Fleet view toggle */
-  onFleetClick?: () => void;
-  /** Mobile nav: Whether fleet view is active */
-  isFleetViewActive?: boolean;
-  /** Mobile nav: Coordinator toggle */
-  onCoordinatorClick?: () => void;
-  /** Mobile nav: Whether multiple projects are connected (shows coordinator) */
-  hasMultipleProjects?: boolean;
-}
-
-export function Sidebar({
-  agents,
-  bridgeAgents = [],
-  projects = [],
-  currentUserName,
-  humanUnreadCounts = {},
-  currentProject,
-  selectedAgent,
-  viewMode,
-  isFleetAvailable,
-  isConnected,
-  isOpen = false,
-  activeThreads = [],
-  currentThread,
-  totalUnreadThreadCount = 0,
-  isActivitySelected = false,
-  activityUnreadCount = 0,
-  onActivitySelect,
-  channels = [],
-  archivedChannels = [],
-  selectedChannelId,
-  onChannelSelect,
-  onArchiveChannel,
-  onUnarchiveChannel,
-  onCreateChannel,
-  onInviteToChannel,
-  onAgentSelect,
-  onHumanSelect,
-  onProjectSelect,
-  onViewModeChange,
-  onSpawnClick,
-  onReleaseClick,
-  onLogsClick,
-  onProfileClick,
-  onThreadSelect,
-  onClose,
-  onSettingsClick,
-  onTrajectoryClick,
-  hasActiveTrajectory,
-  onFleetClick,
-  isFleetViewActive,
-  onCoordinatorClick,
-  hasMultipleProjects,
-}: SidebarProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [activeTab, setActiveTab] = useState<SidebarTab>(() => {
-    // Initialize from localStorage
-    try {
-      const stored = localStorage.getItem(SIDEBAR_TAB_KEY);
-      return (stored === 'team' ? 'team' : 'agents') as SidebarTab;
-    } catch {
-      return 'agents';
-    }
-  });
-  const [isThreadsCollapsed, setIsThreadsCollapsed] = useState(() => {
-    // Initialize from localStorage
-    try {
-      const stored = localStorage.getItem(THREADS_COLLAPSED_KEY);
-      return stored === 'true';
-    } catch {
-      return false;
-    }
-  });
-  const [isChannelsCollapsed, setIsChannelsCollapsed] = useState(() => {
-    // Initialize from localStorage - default to collapsed
-    try {
-      const stored = localStorage.getItem(CHANNELS_COLLAPSED_KEY);
-      return stored === null ? true : stored === 'true';
-    } catch {
-      return true;
-    }
-  });
-
-  // Persist tab state to localStorage
-  useEffect(() => {
-    try {
-      localStorage.setItem(SIDEBAR_TAB_KEY, activeTab);
-    } catch {
-      // localStorage not available
-    }
-  }, [activeTab]);
-
-  // Persist collapsed state to localStorage
-  useEffect(() => {
-    try {
-      localStorage.setItem(THREADS_COLLAPSED_KEY, String(isThreadsCollapsed));
-    } catch {
-      // localStorage not available
-    }
-  }, [isThreadsCollapsed]);
-
-  // Persist channels collapsed state
-  useEffect(() => {
-    try {
-      localStorage.setItem(CHANNELS_COLLAPSED_KEY, String(isChannelsCollapsed));
-    } catch {
-      // localStorage not available
-    }
-  }, [isChannelsCollapsed]);
-
-  // Total unread count for channels
-  const totalChannelUnread = channels.reduce((sum, c) => sum + c.unreadCount, 0);
-  const hasChannels = channels.length > 0;
-  // Keep channels section open when empty so the create button is visible
-  const isChannelsSectionCollapsed = hasChannels ? isChannelsCollapsed : false;
-  const hasArchivedChannels = archivedChannels.length > 0;
-  const [isArchivedCollapsed, setIsArchivedCollapsed] = useState(true);
-  const [openChannelMenuId, setOpenChannelMenuId] = useState<string | null>(null);
-
-  // Close menus when channel selection changes
-  useEffect(() => {
-    setOpenChannelMenuId(null);
-  }, [selectedChannelId]);
-
-  // Separate AI agents from human team members
-  // Also filter out system agents like _DashboardUI
-  const aiAgents = agents.filter(a => !a.isHuman && a.name !== '_DashboardUI');
-  const humanMembers = agents.filter(
-    a => a.isHuman &&
-      a.name !== '_DashboardUI' &&
-      (!currentUserName || a.name.toLowerCase() !== currentUserName.toLowerCase())
-  );
-  const filteredHumanMembers = humanMembers.filter(
-    (m) => !searchQuery || m.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
-
-  // Pinned agents for quick access
-  const { pinnedAgents, togglePin, isMaxPinned } = usePinnedAgents();
-
-  // Check if workspace is stopped - hide channels when stopped
-  const { workspace } = useWorkspaceStatus();
-  const isWorkspaceStopped = workspace?.isStopped ?? false;
-
-  // Determine if we should show unified project view
-  const hasProjects = projects.length > 0;
-
-  return (
-    <aside
-      className="flex-1 flex flex-col overflow-hidden"
-    >
-      {/* Header */}
-      <div className="p-3 sm:p-4 border-b border-border-subtle">
-        <div className="flex items-center gap-2 sm:gap-3">
-          <LogoIcon size={24} withGlow={true} />
-          <h1 className="text-base sm:text-lg font-display font-semibold m-0 text-text-primary">Agent Relay</h1>
-          <ConnectionIndicator isConnected={isConnected} />
-          {/* Mobile close button */}
-          <button
-            className="md:hidden ml-auto p-2 -mr-1 sm:-mr-2 bg-transparent border-none text-text-muted cursor-pointer rounded-lg transition-colors hover:bg-bg-hover hover:text-text-primary active:bg-bg-hover"
-            onClick={onClose}
-            aria-label="Close sidebar"
-          >
-            <CloseIcon />
-          </button>
-        </div>
-      </div>
-
-      {/* Agents/Team Tabs */}
-      {humanMembers.length > 0 && (
-        <div className="flex bg-bg-tertiary rounded-lg p-1 mx-3 mt-3">
-          <button
-            className={`
-              flex-1 py-2 px-4 bg-transparent border-none text-xs font-medium cursor-pointer rounded-md transition-all duration-150 flex items-center justify-center gap-1.5
-              ${activeTab === 'agents'
-                ? 'bg-bg-elevated text-accent-cyan shadow-sm'
-                : 'text-text-muted hover:text-text-secondary'}
-            `}
-            onClick={() => setActiveTab('agents')}
-          >
-            <RobotIcon />
-            Agents
-            {aiAgents.length > 0 && (
-              <span className="text-[10px] opacity-70">({aiAgents.length})</span>
-            )}
-          </button>
-          <button
-            className={`
-              flex-1 py-2 px-4 bg-transparent border-none text-xs font-medium cursor-pointer rounded-md transition-all duration-150 flex items-center justify-center gap-1.5
-              ${activeTab === 'team'
-                ? 'bg-bg-elevated text-accent-cyan shadow-sm'
-                : 'text-text-muted hover:text-text-secondary'}
-            `}
-            onClick={() => setActiveTab('team')}
-          >
-            <UsersIcon />
-            Team
-            {humanMembers.length > 0 && (
-              <span className="text-[10px] opacity-70">({humanMembers.length})</span>
-            )}
-          </button>
-        </div>
-      )}
-
-      {/* Search */}
-      <div className="flex items-center gap-2 py-2 sm:py-2.5 px-2 sm:px-3 bg-bg-tertiary m-2 sm:m-3 rounded-lg border border-border-subtle focus-within:border-accent-cyan/50 transition-colors">
-        <SearchIcon />
-        <input
-          type="text"
-          placeholder={activeTab === 'agents' ? 'Search agents...' : 'Search team...'}
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="flex-1 bg-transparent border-none text-text-primary text-sm outline-none placeholder:text-text-muted"
-        />
-        {searchQuery && (
-          <button
-            className="bg-transparent border-none text-text-muted cursor-pointer p-1 flex items-center justify-center hover:text-text-secondary rounded transition-colors active:text-text-secondary"
-            onClick={() => setSearchQuery('')}
-          >
-            <ClearIcon />
-          </button>
-        )}
-      </div>
-
-      {/* Threads Section */}
-      {activeThreads.length > 0 && (
-        <div className="border-b border-border-subtle">
-          <ThreadList
-            threads={activeThreads}
-            currentThread={currentThread}
-            onThreadSelect={(threadId) => onThreadSelect?.(threadId)}
-            totalUnreadCount={totalUnreadThreadCount}
-            isCollapsed={isThreadsCollapsed}
-            onToggleCollapse={() => setIsThreadsCollapsed(!isThreadsCollapsed)}
-          />
-        </div>
-      )}
-
-      {/* Activity Section - Broadcasts */}
-      <div className="border-b border-border-subtle px-2 py-2">
-        <button
-          onClick={onActivitySelect}
-          className={`
-            w-full flex items-center gap-2 px-2 py-2 rounded-lg text-left text-sm transition-colors
-            ${isActivitySelected
-              ? 'bg-accent-cyan/10 text-text-primary border border-accent-cyan/30'
-              : 'hover:bg-bg-hover text-text-secondary hover:text-text-primary border border-transparent'}
-          `}
-        >
-          <ActivityIcon />
-          <span className={`flex-1 ${activityUnreadCount > 0 ? 'font-semibold text-text-primary' : ''}`}>
-            Activity
-          </span>
-          {activityUnreadCount > 0 && (
-            <span className="text-[11px] font-semibold px-1.5 py-0.5 rounded-full bg-accent-cyan/20 text-accent-cyan">
-              {activityUnreadCount}
-            </span>
-          )}
-        </button>
-      </div>
-
-      {/* Channels Section - Collapsible (hidden when workspace stopped) */}
-      {!isWorkspaceStopped && (
-      <div className="border-b border-border-subtle">
-        <button
-          className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-text-muted uppercase tracking-wide hover:bg-bg-hover transition-colors"
-          onClick={() => setIsChannelsCollapsed(!isChannelsCollapsed)}
-        >
-          <span className="flex items-center gap-2">
-            <HashIcon />
-            Channels
-            {totalChannelUnread > 0 && (
-              <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded-full bg-accent-cyan/20 text-accent-cyan">
-                {totalChannelUnread}
-              </span>
-            )}
-          </span>
-          <ChevronIcon className={`transition-transform ${isChannelsSectionCollapsed ? '' : 'rotate-180'}`} />
-        </button>
-        {!isChannelsSectionCollapsed && (
-          <div className="px-2 pb-2 space-y-0.5 max-h-40 md:max-h-none overflow-y-auto">
-            {channels.map(channel => (
-              <div key={channel.id} className="group relative">
-                <button
-                  onClick={() => onChannelSelect?.(channel)}
-                  className={`
-                    w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left text-sm transition-colors
-                    ${selectedChannelId === channel.id
-                      ? 'bg-accent-cyan/10 text-text-primary'
-                      : 'hover:bg-bg-hover text-text-secondary hover:text-text-primary'}
-                  `}
-                >
-                  <span className="text-text-muted">#</span>
-                  <span className={`flex-1 truncate ${channel.unreadCount > 0 ? 'font-semibold text-text-primary' : ''}`}>
-                    {channel.name}
-                  </span>
-                  {channel.unreadCount > 0 && (
-                    <span className={`
-                      text-[11px] font-semibold px-1.5 py-0.5 rounded-full min-w-[18px] text-center
-                      ${channel.hasMentions ? 'bg-red-500/20 text-red-400' : 'bg-accent-cyan/20 text-accent-cyan'}
-                    `}>
-                      {channel.unreadCount}
-                    </span>
-                  )}
-                </button>
-                {(onInviteToChannel || onArchiveChannel) && (
-                  <button
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      setOpenChannelMenuId(openChannelMenuId === channel.id ? null : channel.id);
-                    }}
-                    title="Channel actions"
-                    className="absolute right-1 top-1/2 -translate-y-1/2 p-1 rounded opacity-0 group-hover:opacity-100 hover:bg-bg-tertiary text-text-muted hover:text-text-primary transition-all"
-                  >
-                    <MoreIcon />
-                  </button>
-                )}
-                {openChannelMenuId === channel.id && (
-                  <div className="absolute right-0 top-full mt-1 z-30 bg-bg-elevated border border-border-subtle rounded-lg shadow-lg py-1 min-w-[160px]">
-                    {onInviteToChannel && (
-                      <MenuButton
-                        onClick={() => {
-                          onInviteToChannel(channel);
-                          setOpenChannelMenuId(null);
-                        }}
-                      >
-                        <UserPlusIcon />
-                        <span>Invite members</span>
-                      </MenuButton>
-                    )}
-                    {onArchiveChannel && (
-                      <MenuButton
-                        onClick={() => {
-                          onArchiveChannel(channel);
-                          setOpenChannelMenuId(null);
-                        }}
-                      >
-                        <ArchiveIcon />
-                        <span>Archive</span>
-                      </MenuButton>
-                    )}
-                  </div>
-                )}
-              </div>
-            ))}
-            {onCreateChannel && (
-              <button
-                onClick={onCreateChannel}
-                className="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left text-sm text-text-muted hover:bg-bg-hover hover:text-text-secondary transition-colors"
-              >
-                <PlusIcon />
-                <span>{hasChannels ? 'Add channel' : 'Create your first channel'}</span>
-              </button>
-            )}
-          </div>
-        )}
-
-        {hasArchivedChannels && (
-          <div className="mt-1 border-t border-border-subtle">
-            <button
-              className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-text-muted uppercase tracking-wide hover:bg-bg-hover transition-colors"
-              onClick={() => setIsArchivedCollapsed(!isArchivedCollapsed)}
-            >
-              <span className="flex items-center gap-2">
-                <ArchiveIcon />
-                Archived
-                <span className="text-[10px] opacity-80">({archivedChannels.length})</span>
-              </span>
-              <ChevronIcon className={`transition-transform ${isArchivedCollapsed ? '' : 'rotate-180'}`} />
-            </button>
-            {!isArchivedCollapsed && (
-              <div className="px-2 pb-2 space-y-0.5 max-h-32 md:max-h-none overflow-y-auto">
-                {archivedChannels.map((channel) => (
-                  <div key={channel.id} className="group relative">
-                    <button
-                      onClick={() => onChannelSelect?.(channel)}
-                      className={`
-                        w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left text-sm transition-colors
-                        ${selectedChannelId === channel.id
-                          ? 'bg-bg-tertiary text-text-primary'
-                          : 'hover:bg-bg-hover text-text-secondary hover:text-text-primary'}
-                      `}
-                    >
-                      <span className="text-text-muted">#</span>
-                      <span className="flex-1 truncate">{channel.name}</span>
-                      <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-border-subtle text-text-muted">
-                        Archived
-                      </span>
-                    </button>
-                    {onUnarchiveChannel && (
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onUnarchiveChannel(channel);
-                        }}
-                        title="Unarchive channel"
-                        className="absolute right-1 top-1/2 -translate-y-1/2 px-2 py-1 rounded-md bg-bg-tertiary text-text-secondary hover:text-text-primary hover:bg-bg-hover transition-colors text-xs flex items-center gap-1"
-                      >
-                        <UnarchiveIcon />
-                        <span>Unarchive</span>
-                      </button>
-                    )}
-                  </div>
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-      )}
-
-      {/* Agent/Project List */}
-      <div className="flex-1 overflow-y-auto px-2">
-        {activeTab === 'team' && humanMembers.length > 0 ? (
-          /* Team Members List */
-          <div className="flex flex-col gap-1 py-2">
-            {filteredHumanMembers.map((member) => (
-              <button
-                  key={member.name}
-                  onClick={() => onHumanSelect ? onHumanSelect(member) : onAgentSelect?.(member)}
-                  className={`
-                    flex items-center gap-3 p-3 rounded-lg border transition-all duration-150 text-left w-full
-                    ${selectedAgent === member.name
-                      ? 'bg-accent-cyan/10 border-accent-cyan/30'
-                      : 'bg-bg-tertiary border-border-subtle hover:border-accent-cyan/30 hover:bg-bg-hover'}
-                  `}
-                >
-                  {member.avatarUrl ? (
-                    <img
-                      src={member.avatarUrl}
-                      alt={member.name}
-                      className="w-9 h-9 rounded-full object-cover"
-                    />
-                  ) : (
-                    <div className="w-9 h-9 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium text-sm">
-                      {member.name.charAt(0).toUpperCase()}
-                    </div>
-                  )}
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-text-primary truncate">{member.name}</p>
-                      <p className="text-xs text-text-muted truncate">{member.role || 'Team Member'}</p>
-                    </div>
-                    {humanUnreadCounts[member.name] > 0 && (
-                      <span className="text-[11px] font-semibold px-2 py-0.5 rounded-full bg-accent-cyan/20 text-accent-cyan">
-                        {humanUnreadCounts[member.name]}
-                      </span>
-                    )}
-                    <div className={`w-2 h-2 rounded-full ${member.status === 'online' ? 'bg-success' : 'bg-text-dim'}`} />
-                  </button>
-                ))}
-            {filteredHumanMembers.length === 0 && (
-              <div className="flex flex-col items-center justify-center py-10 px-5 text-text-muted text-center">
-                <SearchIcon />
-                <p className="mt-3">No team members match "{searchQuery}"</p>
-              </div>
-            )}
-          </div>
-        ) : hasProjects ? (
-          <ProjectList
-            projects={projects}
-            localAgents={aiAgents}
-            bridgeAgents={bridgeAgents}
-            currentProject={currentProject}
-            selectedAgent={selectedAgent}
-            searchQuery={searchQuery}
-            onProjectSelect={onProjectSelect}
-            onAgentSelect={onAgentSelect}
-            onReleaseClick={onReleaseClick}
-            onLogsClick={onLogsClick}
-            onProfileClick={onProfileClick}
-            compact={true}
-          />
-        ) : (
-          <AgentList
-            agents={aiAgents}
-            selectedAgent={selectedAgent}
-            searchQuery={searchQuery}
-            pinnedAgents={pinnedAgents}
-            isMaxPinned={isMaxPinned}
-            onAgentSelect={(agent) => onAgentSelect?.(agent)}
-            onReleaseClick={onReleaseClick}
-            onLogsClick={onLogsClick}
-            onProfileClick={onProfileClick}
-            onPinToggle={(agent) => togglePin(agent.name)}
-            compact={true}
-            showGroupStats={true}
-          />
-        )}
-
-        {/* Optional human section when viewing agents/projects */}
-        {activeTab === 'agents' && humanMembers.length > 0 && (
-          <div className="mt-4 mb-2 pt-3 border-t border-border-subtle">
-            <div className="flex items-center justify-between px-1 pb-2">
-              <p className="text-xs uppercase tracking-wide text-text-muted font-semibold m-0">Direct messages</p>
-              <span className="text-[11px] text-text-muted">{filteredHumanMembers.length} member{filteredHumanMembers.length === 1 ? '' : 's'}</span>
-            </div>
-            <div className="flex flex-col gap-1">
-              {filteredHumanMembers.length > 0 ? (
-                filteredHumanMembers.map((member) => (
-                  <button
-                    key={member.name}
-                    onClick={() => onHumanSelect ? onHumanSelect(member) : onAgentSelect?.(member)}
-                    className={`
-                      flex items-center gap-3 p-2.5 rounded-lg border transition-all duration-150 text-left w-full
-                      ${selectedAgent === member.name
-                        ? 'bg-accent-cyan/10 border-accent-cyan/30'
-                        : 'bg-bg-tertiary border-border-subtle hover:border-accent-cyan/30 hover:bg-bg-hover'}
-                    `}
-                  >
-                    {member.avatarUrl ? (
-                      <img
-                        src={member.avatarUrl}
-                        alt={member.name}
-                        className="w-8 h-8 rounded-full object-cover"
-                      />
-                    ) : (
-                      <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center text-white font-medium text-xs">
-                        {member.name.charAt(0).toUpperCase()}
-                      </div>
-                    )}
-                    <div className="flex-1 min-w-0">
-                      <p className="text-sm font-medium text-text-primary truncate">{member.name}</p>
-                      <p className="text-[11px] text-text-muted truncate">{member.role || 'Team Member'}</p>
-                    </div>
-                    {humanUnreadCounts[member.name] > 0 && (
-                      <span className="text-[11px] font-semibold px-2 py-0.5 rounded-full bg-accent-cyan/20 text-accent-cyan">
-                        {humanUnreadCounts[member.name]}
-                      </span>
-                    )}
-                    <div className={`w-2 h-2 rounded-full ${member.status === 'online' ? 'bg-success' : 'bg-text-dim'}`} />
-                  </button>
-                ))
-              ) : (
-                <div className="flex flex-col items-center justify-center py-6 px-3 text-text-muted text-center">
-                  <SearchIcon />
-                  <p className="mt-2 text-xs">No team members match "{searchQuery}"</p>
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-
-      {/* Mobile Navigation - shows items hidden in header on mobile */}
-      <div className="md:hidden border-t border-border-subtle p-3">
-        <p className="text-xs text-text-muted font-medium mb-2 px-1">Quick Actions</p>
-        <div className="grid grid-cols-2 gap-2">
-          {onFleetClick && (
-            <button
-              className={`flex items-center gap-2 p-2.5 rounded-lg border text-sm transition-all duration-150 ${
-                isFleetViewActive
-                  ? 'bg-accent-cyan/20 border-accent-cyan text-accent-cyan'
-                  : 'bg-bg-tertiary border-border-subtle text-text-secondary hover:bg-bg-hover hover:text-text-primary'
-              }`}
-              onClick={() => {
-                onFleetClick();
-                onClose?.();
-              }}
-            >
-              <FleetIcon />
-              <span>Fleet</span>
-            </button>
-          )}
-          {onTrajectoryClick && (
-            <button
-              className={`flex items-center gap-2 p-2.5 rounded-lg border text-sm transition-all duration-150 relative ${
-                hasActiveTrajectory
-                  ? 'bg-accent-cyan/20 border-accent-cyan text-accent-cyan'
-                  : 'bg-bg-tertiary border-border-subtle text-text-secondary hover:bg-bg-hover hover:text-text-primary'
-              }`}
-              onClick={() => {
-                onTrajectoryClick();
-                onClose?.();
-              }}
-            >
-              <TrajectoryIcon />
-              <span>Trajectory</span>
-              {hasActiveTrajectory && (
-                <span className="absolute top-1 right-1 w-2 h-2 bg-accent-cyan rounded-full animate-pulse" />
-              )}
-            </button>
-          )}
-          {hasMultipleProjects && onCoordinatorClick && (
-            <button
-              className="flex items-center gap-2 p-2.5 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary text-sm transition-all duration-150 hover:bg-bg-hover hover:text-accent-purple"
-              onClick={() => {
-                onCoordinatorClick();
-                onClose?.();
-              }}
-            >
-              <CoordinatorIcon />
-              <span>Coordinator</span>
-            </button>
-          )}
-          <a
-            href="/metrics"
-            className="flex items-center gap-2 p-2.5 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary text-sm transition-all duration-150 hover:bg-bg-hover hover:text-accent-orange no-underline"
-            onClick={() => onClose?.()}
-          >
-            <MetricsIcon />
-            <span>Metrics</span>
-          </a>
-        </div>
-      </div>
-
-      {/* Footer Actions */}
-      <div className="p-3 sm:p-4 border-t border-border-subtle space-y-2">
-        <button
-          className="w-full py-2.5 sm:py-3 px-3 sm:px-4 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold text-sm cursor-pointer flex items-center justify-center gap-2 rounded-lg transition-all duration-150 hover:shadow-glow-cyan hover:-translate-y-0.5 active:scale-[0.98]"
-          onClick={onSpawnClick}
-        >
-          <PlusIcon />
-          Spawn Agent
-        </button>
-        <button
-          className="w-full py-2 sm:py-2.5 px-3 sm:px-4 bg-bg-tertiary text-text-secondary text-sm cursor-pointer flex items-center justify-center gap-2 rounded-lg border border-border-subtle transition-all duration-150 hover:bg-bg-hover hover:text-text-primary hover:border-border-subtle active:bg-bg-hover"
-          onClick={onSettingsClick}
-        >
-          <SettingsIcon />
-          Settings
-        </button>
-      </div>
-    </aside>
-  );
-}
-
-function ConnectionIndicator({ isConnected }: { isConnected: boolean }) {
-  return (
-    <div className="flex items-center gap-1.5 ml-auto">
-      <div
-        className={`w-2 h-2 rounded-full ${
-          isConnected
-            ? 'bg-success animate-pulse-glow'
-            : 'bg-text-dim'
-        }`}
-      />
-      <span className="text-xs text-text-muted">
-        {isConnected ? 'Live' : 'Offline'}
-      </span>
-    </div>
-  );
-}
-
-function SearchIcon() {
-  return (
-    <svg className="text-text-muted" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="11" cy="11" r="8" />
-      <line x1="21" y1="21" x2="16.65" y2="16.65" />
-    </svg>
-  );
-}
-
-function ClearIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-function MenuButton({ onClick, children }: { onClick: () => void; children: React.ReactNode }) {
-  return (
-    <button
-      onClick={onClick}
-      className="w-full flex items-center gap-2 px-3 py-2 text-sm text-text-secondary hover:bg-bg-hover hover:text-text-primary transition-colors"
-    >
-      {children}
-    </button>
-  );
-}
-
-function PlusIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  );
-}
-
-function UserPlusIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
-      <circle cx="8.5" cy="7" r="4" />
-      <line x1="20" y1="8" x2="20" y2="14" />
-      <line x1="23" y1="11" x2="17" y2="11" />
-    </svg>
-  );
-}
-
-function ArchiveIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 7h18" />
-      <path d="M5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7" />
-      <rect x="3" y="3" width="18" height="4" rx="1" />
-      <line x1="10" y1="12" x2="14" y2="12" />
-    </svg>
-  );
-}
-
-function UnarchiveIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 7h18" />
-      <path d="M5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7" />
-      <rect x="3" y="3" width="18" height="4" rx="1" />
-      <path d="M12 11v6" />
-      <path d="M9 14l3-3 3 3" />
-    </svg>
-  );
-}
-
-function HashIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="4" y1="9" x2="20" y2="9" />
-      <line x1="4" y1="15" x2="20" y2="15" />
-      <line x1="10" y1="3" x2="8" y2="21" />
-      <line x1="16" y1="3" x2="14" y2="21" />
-    </svg>
-  );
-}
-
-function ChevronIcon({ className }: { className?: string }) {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
-      <polyline points="6 9 12 15 18 9" />
-    </svg>
-  );
-}
-
-function MoreIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <circle cx="5" cy="12" r="1" />
-      <circle cx="12" cy="12" r="1" />
-      <circle cx="19" cy="12" r="1" />
-    </svg>
-  );
-}
-
-function CloseIcon() {
-  return (
-    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <line x1="18" y1="6" x2="6" y2="18" />
-      <line x1="6" y1="6" x2="18" y2="18" />
-    </svg>
-  );
-}
-
-function SettingsIcon() {
-  return (
-    <svg 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" />
-      <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" />
-    </svg>
-  );
-}
-
-function RobotIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="3" y="11" width="18" height="10" rx="2" />
-      <circle cx="12" cy="5" r="2" />
-      <path d="M12 7v4" />
-      <line x1="8" y1="16" x2="8" y2="16" />
-      <line x1="16" y1="16" x2="16" y2="16" />
-    </svg>
-  );
-}
-
-function UsersIcon() {
-  return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <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 FleetIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
-      <line x1="8" y1="21" x2="16" y2="21" />
-      <line x1="12" y1="17" x2="12" y2="21" />
-    </svg>
-  );
-}
-
-function TrajectoryIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 12h4l3 9 4-18 3 9h4" />
-    </svg>
-  );
-}
-
-function CoordinatorIcon() {
-  return (
-    <svg 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 MetricsIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M3 3v18h18" />
-      <path d="M18 17V9" />
-      <path d="M13 17V5" />
-      <path d="M8 17v-3" />
-    </svg>
-  );
-}
-
-function ActivityIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-      <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-    </svg>
-  );
-}