@agent-relay/dashboard 2.0.81 → 2.0.82

package/src/components/layout/Header.tsx

@@ -0,0 +1,311 @@
+/**
+ * Header Component - Mission Control Theme
+ *
+ * Top navigation bar with current context, quick actions,
+ * and command palette trigger.
+ */
+
+import React from 'react';
+import type { Agent, Project } from '../../types';
+import { getAgentColor, getAgentInitials } from '../../lib/colors';
+import { getAgentBreadcrumb } from '../../lib/hierarchy';
+import { RepoContextHeader } from './RepoContextHeader';
+import { WorkspaceStatusIndicator } from '../WorkspaceStatusIndicator';
+
+export interface HeaderProps {
+  currentChannel: string;
+  selectedAgent?: Agent | null;
+  /** Connected projects for multi-repo indicator */
+  projects?: Project[];
+  /** Currently active project */
+  currentProject?: Project | null;
+  /** Recently accessed projects for quick switching */
+  recentProjects?: Project[];
+  /** Current view mode */
+  viewMode?: 'local' | 'fleet' | 'channels';
+  /** Selected channel name (for channels view) */
+  selectedChannelName?: string;
+  /** Callback when user switches project */
+  onProjectChange?: (project: Project) => void;
+  onCommandPaletteOpen?: () => void;
+  onSettingsClick?: () => void;
+  onHistoryClick?: () => void;
+  onNewConversationClick?: () => void;
+  /** Fleet view toggle */
+  onFleetClick?: () => void;
+  /** Whether fleet view is currently active */
+  isFleetViewActive?: boolean;
+  /** Trajectory viewer toggle */
+  onTrajectoryClick?: () => void;
+  /** Whether there's an active trajectory */
+  hasActiveTrajectory?: boolean;
+  /** Mobile: open sidebar handler */
+  onMenuClick?: () => void;
+  /** Show notification badge on mobile menu button */
+  hasUnreadNotifications?: boolean;
+}
+
+export function Header({
+  currentChannel,
+  selectedAgent,
+  projects = [],
+  currentProject,
+  recentProjects = [],
+  viewMode,
+  selectedChannelName,
+  onProjectChange,
+  onCommandPaletteOpen,
+  onSettingsClick,
+  onHistoryClick,
+  onNewConversationClick,
+  onFleetClick,
+  isFleetViewActive,
+  onTrajectoryClick,
+  hasActiveTrajectory,
+  onMenuClick,
+  hasUnreadNotifications,
+}: HeaderProps) {
+  const colors = selectedAgent ? getAgentColor(selectedAgent.name) : null;
+  return (
+    <header className="h-[52px] bg-bg-secondary border-b border-border-subtle flex items-center justify-between px-2 sm:px-4">
+      {/* Mobile hamburger menu button - always visible on mobile */}
+      <button
+        className="flex md:hidden items-center justify-center w-10 h-10 sm:w-11 sm:h-11 bg-transparent border-none text-text-primary cursor-pointer rounded-lg transition-colors hover:bg-bg-hover active:bg-bg-hover relative flex-shrink-0"
+        onClick={onMenuClick}
+        aria-label="Open menu"
+      >
+        <MenuIcon />
+        {hasUnreadNotifications && (
+          <span className="absolute top-1 right-1 sm:top-1.5 sm:right-1.5 w-2.5 h-2.5 bg-error rounded-full animate-pulse shadow-[0_0_8px_rgba(239,68,68,0.6)]" />
+        )}
+      </button>
+
+      {/* Repo Context Switcher */}
+      {projects.length > 0 && onProjectChange && (
+        <div className="max-md:hidden mr-3">
+          <RepoContextHeader
+            projects={projects}
+            recentProjects={recentProjects}
+            currentProject={currentProject ?? null}
+            onProjectChange={onProjectChange}
+          />
+        </div>
+      )}
+
+      {/* Divider when repo context is shown */}
+      {projects.length > 0 && onProjectChange && (
+        <div className="w-px h-6 bg-border-subtle mr-3 max-md:hidden" />
+      )}
+
+      {/* Workspace Status Indicator */}
+      <WorkspaceStatusIndicator className="max-md:hidden mr-3" />
+
+      {/* Divider after workspace status */}
+      <div className="w-px h-6 bg-border-subtle mr-3 max-md:hidden" />
+
+      <div className="flex items-center gap-2 sm:gap-3 flex-1 min-w-0">
+        {selectedAgent && !selectedAgent.isHuman && selectedAgent.cli !== 'dashboard' ? (
+          <>
+            <div
+              className="w-7 h-7 sm:w-8 sm:h-8 rounded-lg flex items-center justify-center font-semibold text-[10px] sm:text-xs border-2 flex-shrink-0"
+              style={{
+                backgroundColor: colors?.primary,
+                borderColor: colors?.primary,
+                boxShadow: `0 0 12px ${colors?.primary}40`,
+              }}
+            >
+              <span style={{ color: colors?.text }}>
+                {getAgentInitials(selectedAgent.name)}
+              </span>
+            </div>
+            <div className="flex flex-col min-w-0">
+              <span className="font-display font-semibold text-sm sm:text-base text-text-primary truncate">
+                {selectedAgent.name}
+              </span>
+              <span className="text-text-muted text-xs font-mono hidden md:block truncate">
+                {getAgentBreadcrumb(selectedAgent.name)}
+              </span>
+            </div>
+            {selectedAgent.status && (
+              <span
+                className={`hidden sm:inline text-xs py-1 px-2.5 rounded-full font-medium ml-2 flex-shrink-0 truncate max-w-[80px] ${
+                  selectedAgent.status === 'online'
+                    ? 'bg-success/20 text-success'
+                    : 'bg-bg-tertiary text-text-muted'
+                }`}
+                title={selectedAgent.status}
+              >
+                {selectedAgent.status}
+              </span>
+            )}
+          </>
+        ) : selectedAgent && (selectedAgent.isHuman || selectedAgent.cli === 'dashboard') ? (
+          // Human user DM - don't display channel name in header
+          null
+        ) : (
+          <>
+            <span className="text-accent-cyan text-base sm:text-lg font-mono">@</span>
+            <span className="font-display font-semibold text-sm sm:text-base text-text-primary truncate">{currentChannel}</span>
+          </>
+        )}
+      </div>
+
+      <div className="flex items-center gap-1 sm:gap-2">
+        <button
+          className="flex items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-2 sm:px-4 bg-gradient-to-r from-accent-cyan to-[#00b8d9] text-bg-deep font-semibold border-none rounded-lg text-xs sm:text-sm cursor-pointer transition-all duration-150 hover:shadow-glow-cyan hover:-translate-y-0.5"
+          onClick={onNewConversationClick}
+          title="Start new conversation (⌘N)"
+        >
+          <NewMessageIcon />
+          <span className="hidden sm:inline">New</span>
+          <span className="hidden md:inline">Message</span>
+        </button>
+
+        <button
+          className="flex items-center gap-1 sm:gap-2 py-1.5 sm:py-2 px-2 sm:px-3 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary text-xs sm:text-sm cursor-pointer transition-all duration-150 hover:bg-bg-elevated hover:border-border-medium hover:text-text-primary"
+          onClick={onCommandPaletteOpen}
+          title="Command Palette (⌘K)"
+        >
+          <SearchIcon />
+          <span className="hidden md:inline">Search</span>
+          <kbd className="hidden md:inline bg-bg-card border border-border-subtle rounded px-1.5 py-0.5 text-xs text-text-muted font-mono">
+            ⌘K
+          </kbd>
+        </button>
+
+        <button
+          className="hidden sm:flex items-center justify-center p-1.5 sm:p-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary cursor-pointer transition-all duration-150 hover:bg-bg-elevated hover:border-border-medium hover:text-accent-cyan"
+          onClick={onHistoryClick}
+          title="Message History"
+        >
+          <HistoryIcon />
+        </button>
+
+{/* Fleet Overview toggle (hidden on small mobile) */}
+        {onFleetClick && (
+          <button
+            className={`hidden sm:flex items-center justify-center p-1.5 sm:p-2 border rounded-lg cursor-pointer 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-elevated hover:border-border-medium hover:text-accent-cyan'
+            }`}
+            onClick={onFleetClick}
+            title={isFleetViewActive ? 'Back to Chat' : 'Fleet Overview'}
+          >
+            <FleetIcon />
+          </button>
+        )}
+
+        {/* Trajectory Viewer toggle (hidden on mobile) */}
+        {onTrajectoryClick && (
+          <button
+            className={`hidden md:flex items-center justify-center p-2 border rounded-lg cursor-pointer 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-elevated hover:border-border-medium hover:text-accent-cyan'
+            }`}
+            onClick={onTrajectoryClick}
+            title="Trajectory Viewer"
+          >
+            <TrajectoryIcon />
+            {hasActiveTrajectory && (
+              <span className="absolute -top-1 -right-1 w-2 h-2 bg-accent-cyan rounded-full animate-pulse" />
+            )}
+          </button>
+        )}
+
+        <a
+          href="/metrics"
+          className="hidden sm:flex items-center justify-center p-1.5 sm:p-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary cursor-pointer transition-all duration-150 hover:bg-bg-elevated hover:border-border-medium hover:text-accent-orange no-underline"
+          title="Fleet Metrics"
+        >
+          <MetricsIcon />
+        </a>
+
+        <button
+          className="flex items-center justify-center p-1.5 sm:p-2 bg-bg-tertiary border border-border-subtle rounded-lg text-text-secondary cursor-pointer transition-all duration-150 hover:bg-bg-elevated hover:border-border-medium hover:text-accent-purple"
+          onClick={onSettingsClick}
+          title="Settings"
+        >
+          <SettingsIcon />
+        </button>
+      </div>
+    </header>
+  );
+}
+
+function NewMessageIcon() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+      <path d="M12 20h9" />
+      <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+    </svg>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg width="14" height="14" 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 HistoryIcon() {
+  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="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </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 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 SettingsIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <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 MenuIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <line x1="3" y1="12" x2="21" y2="12" />
+      <line x1="3" y1="6" x2="21" y2="6" />
+      <line x1="3" y1="18" x2="21" y2="18" />
+    </svg>
+  );
+}
+

package/src/components/layout/RepoContextHeader.tsx

@@ -0,0 +1,361 @@
+/**
+ * RepoContextHeader Component
+ *
+ * Slack-style repo indicator in the header with quick switcher dropdown.
+ * Shows current repo/project and allows switching between connected projects.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import type { Project } from '../../types';
+
+export interface RepoContextHeaderProps {
+  /** All connected projects */
+  projects: Project[];
+  /** Recently accessed projects (subset of projects) */
+  recentProjects?: Project[];
+  /** Currently active project */
+  currentProject: Project | null;
+  /** Callback when user selects a project */
+  onProjectChange: (project: Project) => void;
+}
+
+export function RepoContextHeader({
+  projects,
+  recentProjects = [],
+  currentProject,
+  onProjectChange,
+}: RepoContextHeaderProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const hasMultipleProjects = projects.length > 1;
+
+  // Get IDs of recent projects for filtering
+  const recentIds = new Set(recentProjects.map((p) => p.id));
+
+  // Projects not in recent list
+  const otherProjects = projects.filter((p) => !recentIds.has(p.id));
+
+  // Combined list for keyboard navigation: recent first, then others
+  const allItems = [...recentProjects, ...otherProjects];
+
+  // Format project name for display (extract org/repo from path)
+  const formatProjectName = (project: Project | null): string => {
+    if (!project) return 'No project';
+
+    if (project.name) return project.name;
+
+    // Extract last two path segments for "org/repo" format
+    const segments = project.path.split('/').filter(Boolean);
+    if (segments.length >= 2) {
+      return `${segments[segments.length - 2]}/${segments[segments.length - 1]}`;
+    }
+    return segments[segments.length - 1] || project.id;
+  };
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!isOpen) return;
+
+      switch (event.key) {
+        case 'Escape':
+          setIsOpen(false);
+          setFocusedIndex(-1);
+          break;
+        case 'ArrowDown':
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = prev < allItems.length - 1 ? prev + 1 : 0;
+            buttonRefs.current[next]?.focus();
+            return next;
+          });
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setFocusedIndex((prev) => {
+            const next = prev > 0 ? prev - 1 : allItems.length - 1;
+            buttonRefs.current[next]?.focus();
+            return next;
+          });
+          break;
+        case 'Enter':
+          if (focusedIndex >= 0 && focusedIndex < allItems.length) {
+            onProjectChange(allItems[focusedIndex]);
+            setIsOpen(false);
+            setFocusedIndex(-1);
+          }
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, focusedIndex, allItems, onProjectChange]);
+
+  // Reset focus when dropdown opens
+  useEffect(() => {
+    if (isOpen) {
+      // Focus current project or first item
+      const currentIndex = allItems.findIndex((p) => p.id === currentProject?.id);
+      setFocusedIndex(currentIndex >= 0 ? currentIndex : 0);
+    } else {
+      setFocusedIndex(-1);
+    }
+  }, [isOpen, allItems, currentProject]);
+
+  // Don't render if no projects
+  if (projects.length === 0) return null;
+
+  return (
+    <div className="relative" ref={dropdownRef}>
+      <button
+        className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-all duration-150 border ${
+          hasMultipleProjects
+            ? 'bg-bg-tertiary/80 border-border-subtle hover:bg-bg-elevated hover:border-border-medium cursor-pointer'
+            : 'bg-transparent border-transparent cursor-default'
+        }`}
+        onClick={() => hasMultipleProjects && setIsOpen(!isOpen)}
+        disabled={!hasMultipleProjects}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <RepoIcon />
+        <span className="text-text-primary truncate max-w-[200px]">
+          {formatProjectName(currentProject)}
+        </span>
+        {hasMultipleProjects && (
+          <ChevronIcon isOpen={isOpen} />
+        )}
+      </button>
+
+      {/* Dropdown */}
+      {isOpen && hasMultipleProjects && (
+        <div className="absolute top-[calc(100%+4px)] left-0 min-w-[280px] bg-bg-primary border border-border-subtle rounded-xl shadow-[0_10px_40px_rgba(0,0,0,0.4)] z-[1000] overflow-hidden">
+          {/* Header */}
+          <div className="px-3 py-2 border-b border-border-subtle">
+            <span className="text-xs font-medium text-text-muted uppercase tracking-wider">
+              Switch Project
+            </span>
+          </div>
+
+          <div className="max-h-[300px] overflow-y-auto" role="listbox">
+            {/* Recent Projects Section */}
+            {recentProjects.length > 0 && (
+              <>
+                <div className="px-3 py-1.5 bg-bg-tertiary/50">
+                  <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider flex items-center gap-1.5">
+                    <ClockIcon />
+                    Recent
+                  </span>
+                </div>
+                <div className="py-1">
+                  {recentProjects.map((project, index) => (
+                    <ProjectItem
+                      key={project.id}
+                      project={project}
+                      index={index}
+                      isActive={currentProject?.id === project.id}
+                      isFocused={focusedIndex === index}
+                      formatProjectName={formatProjectName}
+                      buttonRefs={buttonRefs}
+                      onSelect={() => {
+                        onProjectChange(project);
+                        setIsOpen(false);
+                      }}
+                    />
+                  ))}
+                </div>
+              </>
+            )}
+
+            {/* All Projects Section */}
+            {otherProjects.length > 0 && (
+              <>
+                <div className="px-3 py-1.5 bg-bg-tertiary/50">
+                  <span className="text-[10px] font-medium text-text-muted uppercase tracking-wider">
+                    {recentProjects.length > 0 ? 'All Projects' : 'Projects'}
+                  </span>
+                </div>
+                <div className="py-1">
+                  {otherProjects.map((project, index) => {
+                    const globalIndex = recentProjects.length + index;
+                    return (
+                      <ProjectItem
+                        key={project.id}
+                        project={project}
+                        index={globalIndex}
+                        isActive={currentProject?.id === project.id}
+                        isFocused={focusedIndex === globalIndex}
+                        formatProjectName={formatProjectName}
+                        buttonRefs={buttonRefs}
+                        onSelect={() => {
+                          onProjectChange(project);
+                          setIsOpen(false);
+                        }}
+                      />
+                    );
+                  })}
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ProjectItemProps {
+  project: Project;
+  index: number;
+  isActive: boolean;
+  isFocused: boolean;
+  formatProjectName: (project: Project) => string;
+  buttonRefs: React.MutableRefObject<(HTMLButtonElement | null)[]>;
+  onSelect: () => void;
+}
+
+function ProjectItem({
+  project,
+  index,
+  isActive,
+  isFocused,
+  formatProjectName,
+  buttonRefs,
+  onSelect,
+}: ProjectItemProps) {
+  const displayName = formatProjectName(project);
+  const agentCount = project.agents?.length || 0;
+
+  return (
+    <button
+      ref={(el) => { buttonRefs.current[index] = el; }}
+      className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors border-none cursor-pointer ${
+        isActive
+          ? 'bg-accent-cyan/10 text-accent-cyan'
+          : isFocused
+            ? 'bg-bg-hover text-text-primary'
+            : 'bg-transparent text-text-primary hover:bg-bg-hover'
+      }`}
+      onClick={onSelect}
+      role="option"
+      aria-selected={isActive}
+      tabIndex={isFocused ? 0 : -1}
+    >
+      <RepoIcon className={isActive ? 'text-accent-cyan' : 'text-text-muted'} />
+
+      <div className="flex-1 min-w-0">
+        <div className="font-medium text-sm truncate">
+          {displayName}
+        </div>
+        <div className="text-xs text-text-muted truncate">
+          {project.path}
+        </div>
+      </div>
+
+      {/* Agent count badge */}
+      <span className={`text-xs px-2 py-0.5 rounded-full ${
+        isActive
+          ? 'bg-accent-cyan/20 text-accent-cyan'
+          : 'bg-bg-tertiary text-text-muted'
+      }`}>
+        {agentCount} {agentCount === 1 ? 'agent' : 'agents'}
+      </span>
+
+      {/* Lead indicator */}
+      {project.lead?.connected && (
+        <span className="w-2 h-2 rounded-full bg-success animate-pulse" title={`Lead: ${project.lead.name}`} />
+      )}
+
+      {/* Checkmark for active */}
+      {isActive && (
+        <CheckIcon />
+      )}
+    </button>
+  );
+}
+
+function ClockIcon() {
+  return (
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <circle cx="12" cy="12" r="10" />
+      <polyline points="12 6 12 12 16 14" />
+    </svg>
+  );
+}
+
+function RepoIcon({ className = 'text-text-muted' }: { className?: string }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <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 ChevronIcon({ isOpen }: { isOpen: boolean }) {
+  return (
+    <svg
+      className={`text-text-muted transition-transform duration-150 ${isOpen ? 'rotate-180' : ''}`}
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className="text-accent-cyan"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}