agent-relay 2.0.22 → 2.0.23

package/packages/dashboard/ui/react-components/CommandPalette.tsx

@@ -1,815 +0,0 @@
-/**
- * CommandPalette Component
- *
- * A Slack/VS Code-style command palette with fuzzy search,
- * keyboard navigation, and categorized commands.
- * Includes inline task assignment flow that creates beads.
- */
-
-import React, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
-import type { Agent, Project } from '../types';
-import { getAgentColor, getAgentInitials } from '../lib/colors';
-
-export interface Command {
-  id: string;
-  label: string;
-  description?: string;
-  category: 'agents' | 'actions' | 'navigation' | 'settings' | 'projects' | 'channels';
-  icon?: React.ReactNode;
-  shortcut?: string;
-  action: () => void;
-}
-
-export type TaskPriority = 'critical' | 'high' | 'medium' | 'low';
-
-export interface TaskCreateRequest {
-  agentName: string;
-  title: string;
-  priority: TaskPriority;
-}
-
-const CATEGORY_ORDER = ['projects', 'agents', 'actions', 'channels', 'navigation', 'settings'] as const;
-
-export const PRIORITY_CONFIG: Record<TaskPriority, { label: string; beadsPriority: number; color: string }> = {
-  critical: { label: 'Critical', beadsPriority: 0, color: '#ef4444' },
-  high: { label: 'High', beadsPriority: 1, color: '#f97316' },
-  medium: { label: 'Medium', beadsPriority: 2, color: '#f59e0b' },
-  low: { label: 'Low', beadsPriority: 3, color: '#6366f1' },
-};
-
-export interface CommandPaletteProps {
-  isOpen: boolean;
-  onClose: () => void;
-  agents: Agent[];
-  projects?: Project[];
-  currentProject?: string;
-  onAgentSelect: (agent: Agent) => void;
-  onProjectSelect?: (project: Project) => void;
-  onSpawnClick: () => void;
-  onTaskAssignClick?: () => void;
-  onTaskCreate?: (task: TaskCreateRequest) => Promise<void>;
-  onSettingsClick?: () => void;
-  onGeneralClick?: () => void;
-  customCommands?: Command[];
-}
-
-export function CommandPalette(props: CommandPaletteProps) {
-  if (!props.isOpen) return null;
-  return <CommandPaletteContent {...props} />;
-}
-
-type PaletteMode = 'search' | 'task-select-agent' | 'task-details';
-
-function CommandPaletteContent({
-  onClose,
-  agents,
-  projects = [],
-  currentProject,
-  onAgentSelect,
-  onProjectSelect,
-  onSpawnClick,
-  onTaskCreate,
-  onSettingsClick,
-  onGeneralClick,
-  customCommands = [],
-}: CommandPaletteProps) {
-  const [query, setQuery] = useState('');
-  const [selectedIndex, setSelectedIndex] = useState(0);
-  const [activeCategory, setActiveCategory] = useState<typeof CATEGORY_ORDER[number] | null>(null);
-  const selectedIndexRef = useRef(selectedIndex);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const listRef = useRef<HTMLDivElement>(null);
-  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
-
-  // Task assignment mode state
-  const [mode, setMode] = useState<PaletteMode>('search');
-  const [taskAgent, setTaskAgent] = useState<Agent | null>(null);
-  const [taskTitle, setTaskTitle] = useState('');
-  const [taskPriority, setTaskPriority] = useState<TaskPriority>('medium');
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  // Available agents for task assignment (exclude offline)
-  const availableAgents = useMemo(() => {
-    return agents.filter((a) => a.status !== 'offline' && a.status !== 'error');
-  }, [agents]);
-
-  // Filter agents based on query in task-select-agent mode
-  const filteredAgents = useMemo(() => {
-    if (!query.trim()) return availableAgents;
-    const lowerQuery = query.toLowerCase();
-    return availableAgents.filter((a) => a.name.toLowerCase().includes(lowerQuery));
-  }, [availableAgents, query]);
-
-  // Reset task state when entering task mode
-  const enterTaskMode = useCallback(() => {
-    setMode('task-select-agent');
-    setQuery('');
-    setSelectedIndex(0);
-    setTaskAgent(null);
-    setTaskTitle('');
-    setTaskPriority('medium');
-  }, []);
-
-  // Handle task submission
-  const handleTaskSubmit = useCallback(async () => {
-    if (!taskAgent || !taskTitle.trim() || !onTaskCreate) return;
-
-    setIsSubmitting(true);
-    try {
-      await onTaskCreate({
-        agentName: taskAgent.name,
-        title: taskTitle.trim(),
-        priority: taskPriority,
-      });
-      onClose();
-    } catch (err) {
-      console.error('Failed to create task:', err);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [taskAgent, taskTitle, taskPriority, onTaskCreate, onClose]);
-
-  // Keep ref in sync with state
-  useEffect(() => {
-    selectedIndexRef.current = selectedIndex;
-  }, [selectedIndex]);
-
-  // Build command list
-  const commands = useMemo(() => {
-    // Sort projects: current project first, then alphabetically
-    const sortedProjects = [...projects].sort((a, b) => {
-      const aIsCurrent = a.id === currentProject;
-      const bIsCurrent = b.id === currentProject;
-      if (aIsCurrent && !bIsCurrent) return -1;
-      if (!aIsCurrent && bIsCurrent) return 1;
-      const aName = a.name || a.path.split('/').pop() || a.id;
-      const bName = b.name || b.path.split('/').pop() || b.id;
-      return aName.localeCompare(bName);
-    });
-
-    const cmds: Command[] = [
-      ...sortedProjects.map((project) => {
-        const displayName = project.name || project.path.split('/').pop() || project.id;
-        const isCurrent = project.id === currentProject;
-        return {
-          id: `project-${project.id}`,
-          label: displayName,
-          description: isCurrent
-            ? `Current project • ${project.agents.length} agents`
-            : `${project.agents.length} agents`,
-          category: 'projects' as const,
-          icon: isCurrent ? <CurrentProjectIcon /> : <FolderIcon />,
-          action: () => {
-            onProjectSelect?.(project);
-            onClose();
-          },
-        };
-      }),
-      ...agents.map((agent) => ({
-        id: `agent-${agent.name}`,
-        label: agent.name,
-        description: agent.currentTask || agent.status,
-        category: 'agents' as const,
-        icon: <AgentIcon name={agent.name} />,
-        action: () => {
-          onAgentSelect(agent);
-          onClose();
-        },
-      })),
-      {
-        id: 'spawn-agent',
-        label: 'Spawn Agent',
-        description: 'Launch a new agent instance',
-        category: 'actions',
-        icon: <PlusIcon />,
-        shortcut: '⌘⇧S',
-        action: () => {
-          onSpawnClick();
-          onClose();
-        },
-      },
-      {
-        id: 'broadcast',
-        label: 'Broadcast Message',
-        description: 'Send message to all agents',
-        category: 'actions',
-        icon: <BroadcastIcon />,
-        action: () => {
-          onClose();
-        },
-      },
-      ...(onTaskCreate
-        ? [
-            {
-              id: 'assign-task',
-              label: 'Assign Task',
-              description: 'Create a task for an agent (creates bead)',
-              category: 'actions' as const,
-              icon: <TaskIcon />,
-              shortcut: '⌘⇧T',
-              action: () => {
-                enterTaskMode();
-              },
-            },
-          ]
-        : []),
-      {
-        id: 'nav-general',
-        label: 'Go to #general',
-        description: 'View all broadcast messages',
-        category: 'navigation',
-        icon: <HashIcon />,
-        action: () => {
-          onGeneralClick?.();
-          onClose();
-        },
-      },
-      ...(onSettingsClick
-        ? [
-            {
-              id: 'settings',
-              label: 'Settings',
-              description: 'Configure dashboard preferences',
-              category: 'settings' as const,
-              icon: <SettingsIcon />,
-              shortcut: '⌘,',
-              action: () => {
-                onSettingsClick();
-                onClose();
-              },
-            },
-          ]
-        : []),
-      ...customCommands,
-    ];
-    return cmds;
-  }, [agents, projects, currentProject, onAgentSelect, onProjectSelect, onSpawnClick, onSettingsClick, onGeneralClick, onClose, customCommands]);
-
-  const filteredCommands = useMemo(() => {
-    let filtered = commands;
-
-    // Filter by active category if set
-    if (activeCategory) {
-      filtered = filtered.filter((cmd) => cmd.category === activeCategory);
-    }
-
-    // Filter by search query
-    if (query.trim()) {
-      const lowerQuery = query.toLowerCase();
-      filtered = filtered.filter(
-        (cmd) =>
-          cmd.label.toLowerCase().includes(lowerQuery) ||
-          cmd.description?.toLowerCase().includes(lowerQuery) ||
-          cmd.category.toLowerCase().includes(lowerQuery)
-      );
-    }
-
-    return filtered;
-  }, [commands, query, activeCategory]);
-
-  const groupedCommands = useMemo(() => {
-    const groups: Record<string, Command[]> = {};
-    for (const cmd of filteredCommands) {
-      if (!groups[cmd.category]) {
-        groups[cmd.category] = [];
-      }
-      groups[cmd.category].push(cmd);
-    }
-    return groups;
-  }, [filteredCommands]);
-
-  const flatCommands = useMemo(() => {
-    return CATEGORY_ORDER.flatMap((cat) => groupedCommands[cat] || []);
-  }, [groupedCommands]);
-
-  useEffect(() => {
-    setSelectedIndex(0);
-  }, [query]);
-
-  // Reset state when component mounts (palette opens)
-  useEffect(() => {
-    setQuery('');
-    setSelectedIndex(0);
-    setActiveCategory(null); // Show all categories by default
-    setMode('search');
-    setTaskAgent(null);
-    setTaskTitle('');
-    setTaskPriority('medium');
-  }, []);
-
-  // Scroll selected item into view
-  useEffect(() => {
-    const selectedItem = itemRefs.current[selectedIndex];
-    if (selectedItem) {
-      selectedItem.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-    }
-  }, [selectedIndex]);
-
-  // Keyboard navigation
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Handle task-details mode separately
-      if (mode === 'task-details') {
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          setMode('task-select-agent');
-          setQuery('');
-        } else if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
-          e.preventDefault();
-          handleTaskSubmit();
-        }
-        return;
-      }
-
-      // Handle task-select-agent mode
-      if (mode === 'task-select-agent') {
-        switch (e.key) {
-          case 'ArrowDown':
-            e.preventDefault();
-            setSelectedIndex(prev => Math.min(prev + 1, filteredAgents.length - 1));
-            break;
-          case 'ArrowUp':
-            e.preventDefault();
-            setSelectedIndex(prev => Math.max(prev - 1, 0));
-            break;
-          case 'Enter':
-            e.preventDefault();
-            if (filteredAgents[selectedIndexRef.current]) {
-              setTaskAgent(filteredAgents[selectedIndexRef.current]);
-              setMode('task-details');
-              setQuery('');
-            }
-            break;
-          case 'Escape':
-            e.preventDefault();
-            setMode('search');
-            setQuery('');
-            break;
-        }
-        return;
-      }
-
-      // Default search mode
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault();
-          setSelectedIndex(prev => Math.min(prev + 1, flatCommands.length - 1));
-          break;
-        case 'ArrowUp':
-          e.preventDefault();
-          setSelectedIndex(prev => Math.max(prev - 1, 0));
-          break;
-        case 'Enter':
-          e.preventDefault();
-          if (flatCommands[selectedIndexRef.current]) {
-            flatCommands[selectedIndexRef.current].action();
-          }
-          break;
-        case 'Tab':
-          e.preventDefault();
-          // Cycle through categories: null -> projects -> agents -> actions -> ... -> null
-          setActiveCategory(prev => {
-            if (prev === null) return CATEGORY_ORDER[0];
-            const currentIdx = CATEGORY_ORDER.indexOf(prev);
-            if (e.shiftKey) {
-              // Shift+Tab: go backwards
-              return currentIdx === 0 ? null : CATEGORY_ORDER[currentIdx - 1];
-            } else {
-              // Tab: go forwards
-              return currentIdx === CATEGORY_ORDER.length - 1 ? null : CATEGORY_ORDER[currentIdx + 1];
-            }
-          });
-          setSelectedIndex(0);
-          break;
-        case 'Escape':
-          e.preventDefault();
-          // If filtering by category, clear filter first
-          if (activeCategory) {
-            setActiveCategory(null);
-            setSelectedIndex(0);
-          } else {
-            onClose();
-          }
-          break;
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [flatCommands, filteredAgents, mode, selectedIndex, activeCategory, onClose, handleTaskSubmit]);
-
-  const categoryLabels: Record<string, string> = {
-    projects: 'Projects',
-    agents: 'Agents',
-    actions: 'Actions',
-    navigation: 'Navigation',
-    settings: 'Settings',
-  };
-
-  let globalIndex = 0;
-
-  // Render task-select-agent mode
-  if (mode === 'task-select-agent') {
-    return (
-      <div
-        className="fixed inset-0 bg-black/60 flex items-start justify-center pt-[15vh] z-[1000] animate-fade-in"
-        onClick={() => { setMode('search'); setQuery(''); }}
-      >
-        <div
-          className="bg-sidebar-bg border border-sidebar-border rounded-xl w-[560px] max-w-[90vw] max-h-[60vh] flex flex-col shadow-modal animate-slide-down"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="flex items-center gap-3 p-4 border-b border-sidebar-border">
-            <button
-              className="p-1 rounded hover:bg-sidebar-border text-text-muted"
-              onClick={() => { setMode('search'); setQuery(''); }}
-            >
-              <BackIcon />
-            </button>
-            <TaskIcon />
-            <input
-              ref={inputRef}
-              autoFocus
-              type="text"
-              className="flex-1 border-none text-base font-sans outline-none bg-transparent text-text-primary placeholder:text-text-muted"
-              placeholder="Select agent to assign task..."
-              value={query}
-              onChange={(e) => { setQuery(e.target.value); setSelectedIndex(0); }}
-            />
-            <kbd className="bg-sidebar-border border border-sidebar-hover rounded px-1.5 py-0.5 text-xs text-text-muted font-sans">
-              ESC
-            </kbd>
-          </div>
-
-          <div className="flex-1 overflow-y-auto p-2" ref={listRef}>
-            {filteredAgents.length === 0 ? (
-              <div className="py-8 text-center text-text-muted text-sm">
-                {query ? `No agents matching "${query}"` : 'No available agents'}
-              </div>
-            ) : (
-              <>
-                <div className="text-xs font-semibold text-text-muted uppercase tracking-wider py-2 px-3">
-                  Select Agent
-                </div>
-                {filteredAgents.map((agent, idx) => {
-                  const colors = getAgentColor(agent.name);
-                  return (
-                    <button
-                      key={agent.name}
-                      ref={el => { itemRefs.current[idx] = el; }}
-                      className={`
-                        flex items-center gap-3 w-full py-2.5 px-3 border-none rounded-lg cursor-pointer text-left font-sans transition-colors duration-100
-                        ${idx === selectedIndex ? 'bg-accent-light border border-accent/30' : 'bg-transparent hover:bg-sidebar-border'}
-                      `}
-                      onClick={() => {
-                        setTaskAgent(agent);
-                        setMode('task-details');
-                        setQuery('');
-                      }}
-                      onMouseEnter={() => setSelectedIndex(idx)}
-                    >
-                      <div
-                        className="w-7 h-7 rounded-md flex items-center justify-center text-xs font-semibold"
-                        style={{ backgroundColor: colors.primary, color: colors.text }}
-                      >
-                        {getAgentInitials(agent.name)}
-                      </div>
-                      <span className="flex-1 min-w-0 flex flex-col gap-0.5">
-                        <span className="text-sm font-medium text-text-primary">{agent.name}</span>
-                        <span className="text-xs text-text-muted truncate">
-                          {agent.currentTask || agent.status}
-                        </span>
-                      </span>
-                    </button>
-                  );
-                })}
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Render task-details mode
-  if (mode === 'task-details' && taskAgent) {
-    const agentColors = getAgentColor(taskAgent.name);
-    return (
-      <div
-        className="fixed inset-0 bg-black/60 flex items-start justify-center pt-[15vh] z-[1000] animate-fade-in"
-        onClick={() => { setMode('task-select-agent'); setQuery(''); }}
-      >
-        <div
-          className="bg-sidebar-bg border border-sidebar-border rounded-xl w-[560px] max-w-[90vw] flex flex-col shadow-modal animate-slide-down"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div className="flex items-center gap-3 p-4 border-b border-sidebar-border">
-            <button
-              className="p-1 rounded hover:bg-sidebar-border text-text-muted"
-              onClick={() => { setMode('task-select-agent'); setQuery(''); }}
-            >
-              <BackIcon />
-            </button>
-            <div
-              className="w-7 h-7 rounded-md flex items-center justify-center text-xs font-semibold"
-              style={{ backgroundColor: agentColors.primary, color: agentColors.text }}
-            >
-              {getAgentInitials(taskAgent.name)}
-            </div>
-            <span className="text-base font-medium text-text-primary">
-              Assign task to {taskAgent.name}
-            </span>
-          </div>
-
-          <div className="p-4 flex flex-col gap-4">
-            {/* Task Title */}
-            <div>
-              <label className="block text-xs font-medium text-text-muted mb-1.5">
-                Task Title
-              </label>
-              <input
-                autoFocus
-                type="text"
-                value={taskTitle}
-                onChange={(e) => setTaskTitle(e.target.value)}
-                placeholder="What needs to be done?"
-                className="w-full px-3 py-2 text-sm bg-bg-tertiary border border-sidebar-border rounded-md text-text-primary placeholder:text-text-dim focus:outline-none focus:border-accent-cyan"
-              />
-            </div>
-
-            {/* Priority */}
-            <div>
-              <label className="block text-xs font-medium text-text-muted mb-1.5">
-                Priority
-              </label>
-              <div className="flex gap-2">
-                {(Object.keys(PRIORITY_CONFIG) as TaskPriority[]).map((p) => {
-                  const config = PRIORITY_CONFIG[p];
-                  const isSelected = taskPriority === p;
-                  return (
-                    <button
-                      key={p}
-                      type="button"
-                      className={`px-3 py-1.5 text-xs font-medium rounded-md border transition-all ${
-                        isSelected
-                          ? 'border-transparent text-white'
-                          : 'border-sidebar-border text-text-muted hover:border-sidebar-hover'
-                      }`}
-                      style={{
-                        backgroundColor: isSelected ? config.color : 'transparent',
-                      }}
-                      onClick={() => setTaskPriority(p)}
-                    >
-                      {config.label}
-                    </button>
-                  );
-                })}
-              </div>
-              <p className="text-xs text-text-dim mt-1.5">
-                Maps to beads priority P{PRIORITY_CONFIG[taskPriority].beadsPriority}
-              </p>
-            </div>
-
-            {/* Submit */}
-            <div className="flex justify-end gap-2 pt-2 border-t border-sidebar-border">
-              <button
-                type="button"
-                className="px-4 py-2 text-sm text-text-muted hover:text-text-primary transition-colors"
-                onClick={() => { setMode('task-select-agent'); setQuery(''); }}
-              >
-                Back
-              </button>
-              <button
-                type="button"
-                disabled={!taskTitle.trim() || isSubmitting}
-                onClick={handleTaskSubmit}
-                className="px-4 py-2 text-sm font-medium bg-accent-cyan text-bg-deep rounded-md hover:bg-accent-cyan/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
-              >
-                {isSubmitting ? (
-                  <>
-                    <SpinnerIcon />
-                    Creating...
-                  </>
-                ) : (
-                  <>
-                    Create Task
-                    <kbd className="bg-black/20 rounded px-1 py-0.5 text-[10px]">⌘↵</kbd>
-                  </>
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Default search mode
-  return (
-    <div
-      className="fixed inset-0 bg-black/60 flex items-start justify-center pt-[15vh] z-[1000] animate-fade-in"
-      onClick={onClose}
-    >
-      <div
-        className="bg-sidebar-bg border border-sidebar-border rounded-xl w-[560px] max-w-[90vw] max-h-[60vh] flex flex-col shadow-modal animate-slide-down"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="flex items-center gap-3 p-4 border-b border-sidebar-border">
-          <SearchIcon />
-          {activeCategory && (
-            <button
-              onClick={() => { setActiveCategory(null); setSelectedIndex(0); }}
-              className="flex items-center gap-1 px-2 py-0.5 text-xs font-medium bg-accent-cyan/20 text-accent-cyan rounded-md hover:bg-accent-cyan/30 transition-colors"
-            >
-              {categoryLabels[activeCategory]}
-              <span className="text-accent-cyan/60">×</span>
-            </button>
-          )}
-          <input
-            ref={inputRef}
-            autoFocus
-            type="text"
-            className="flex-1 border-none text-base font-sans outline-none bg-transparent text-text-primary placeholder:text-text-muted"
-            placeholder={activeCategory ? `Search ${categoryLabels[activeCategory].toLowerCase()}...` : "Search commands, agents..."}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-          />
-          <kbd className="bg-sidebar-border border border-sidebar-hover rounded px-1.5 py-0.5 text-xs text-text-muted font-sans" title="Cycle categories">
-            Tab
-          </kbd>
-          <kbd className="bg-sidebar-border border border-sidebar-hover rounded px-1.5 py-0.5 text-xs text-text-muted font-sans">
-            ESC
-          </kbd>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-2" ref={listRef}>
-          {flatCommands.length === 0 ? (
-            <div className="py-8 text-center text-text-muted text-sm">
-              No results for "{query}"
-            </div>
-          ) : (
-            CATEGORY_ORDER.map((category) => {
-              const cmds = groupedCommands[category];
-              if (!cmds?.length) return null;
-              return (
-                <div key={category} className="mb-2">
-                  <div className="text-xs font-semibold text-text-muted uppercase tracking-wider py-2 px-3">
-                    {categoryLabels[category] || category}
-                  </div>
-                  {cmds.map((cmd) => {
-                    const idx = globalIndex++;
-                    return (
-                      <button
-                        key={cmd.id}
-                        ref={el => { itemRefs.current[idx] = el; }}
-                        className={`
-                          flex items-center gap-3 w-full py-2.5 px-3 border-none rounded-lg cursor-pointer text-left font-sans transition-colors duration-100
-                          ${idx === selectedIndex ? 'bg-accent-light border border-accent/30' : 'bg-transparent hover:bg-sidebar-border'}
-                        `}
-                        onClick={cmd.action}
-                        onMouseEnter={() => setSelectedIndex(idx)}
-                      >
-                        <span className="flex items-center justify-center w-7 h-7 text-text-muted">{cmd.icon}</span>
-                        <span className="flex-1 min-w-0 flex flex-col gap-0.5">
-                          <span className="text-sm font-medium text-text-primary">{cmd.label}</span>
-                          {cmd.description && (
-                            <span className="text-xs text-text-muted truncate">{cmd.description}</span>
-                          )}
-                        </span>
-                        {cmd.shortcut && (
-                          <kbd className="bg-sidebar-border border border-sidebar-hover rounded px-1.5 py-0.5 text-xs text-text-muted font-sans">
-                            {cmd.shortcut}
-                          </kbd>
-                        )}
-                      </button>
-                    );
-                  })}
-                </div>
-              );
-            })
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function AgentIcon({ name }: { name: string }) {
-  const colors = getAgentColor(name);
-  return (
-    <div
-      className="w-7 h-7 rounded-md flex items-center justify-center text-xs font-semibold"
-      style={{ backgroundColor: colors.primary, color: colors.text }}
-    >
-      {getAgentInitials(name)}
-    </div>
-  );
-}
-
-function SearchIcon() {
-  return (
-    <svg className="text-text-muted shrink-0" 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 PlusIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <line x1="12" y1="5" x2="12" y2="19" />
-      <line x1="5" y1="12" x2="19" y2="12" />
-    </svg>
-  );
-}
-
-function BroadcastIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <circle cx="12" cy="12" r="2" />
-      <path d="M16.24 7.76a6 6 0 0 1 0 8.49m-8.48-.01a6 6 0 0 1 0-8.49m11.31-2.82a10 10 0 0 1 0 14.14m-14.14 0a10 10 0 0 1 0-14.14" />
-    </svg>
-  );
-}
-
-function HashIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <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 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 FolderIcon() {
-  return (
-    <svg 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 CurrentProjectIcon() {
-  return (
-    <div className="relative">
-      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-accent-cyan">
-        <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>
-      <svg
-        className="absolute -bottom-0.5 -right-0.5 text-accent-cyan bg-sidebar-bg rounded-full"
-        width="10"
-        height="10"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-      >
-        <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
-      </svg>
-    </div>
-  );
-}
-
-function TaskIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="text-text-muted">
-      <path d="M9 11l3 3L22 4" />
-      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
-    </svg>
-  );
-}
-
-function BackIcon() {
-  return (
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-      <polyline points="15 18 9 12 15 6" />
-    </svg>
-  );
-}
-
-function SpinnerIcon() {
-  return (
-    <svg className="animate-spin" width="14" height="14" viewBox="0 0 24 24">
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-        stroke="currentColor"
-        strokeWidth="2"
-        fill="none"
-        strokeDasharray="32"
-        strokeLinecap="round"
-      />
-    </svg>
-  );
-}