src/
├── components/
│   ├── ui/
│   │   ├── Button.tsx
│   │   └── Card.tsx
│   └── features/
│       ├── AgentList.tsx
│       └── TaskPanel.tsx
├── hooks/
│   ├── useAgent.ts
│   └── useTask.ts
├── context/
│   └── AgentContext.tsx
├── services/
│   └── api.ts
├── types/
│   └── index.ts
└── App.tsx

import { FC } from 'react';

interface AgentCardProps {
  name: string;
  type: 'claude' | 'gpt' | 'gemini';
  status: 'active' | 'idle' | 'error';
  onSelect?: () => void;
}

export const AgentCard: FC<AgentCardProps> = ({
  name,
  type,
  status,
  onSelect
}) => {
  return (
    <div
      className="agent-card"
      onClick={onSelect}
      role="button"
      tabIndex={0}
    >
      <h3>{name}</h3>
      <span className={`status status-${status}`}>{status}</span>
      <span className="type">{type}</span>
    </div>
  );
};

import { useState, useEffect, useCallback } from 'react';

interface Agent {
  id: string;
  name: string;
  status: string;
}

export function useAgent(agentId: string) {
  const [agent, setAgent] = useState<Agent | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    const fetchAgent = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/agents/${agentId}`);
        const data = await response.json();
        setAgent(data);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    };

    fetchAgent();
  }, [agentId]);

  const refresh = useCallback(() => {
    // Trigger refetch
  }, [agentId]);

  return { agent, loading, error, refresh };
}

import { createContext, useContext, useReducer, ReactNode } from 'react';

interface AgentState {
  agents: Agent[];
  selectedAgent: Agent | null;
}

type AgentAction =
  | { type: 'SET_AGENTS'; payload: Agent[] }
  | { type: 'SELECT_AGENT'; payload: Agent }
  | { type: 'CLEAR_SELECTION' };

const AgentContext = createContext<{
  state: AgentState;
  dispatch: React.Dispatch<AgentAction>;
} | null>(null);

function agentReducer(state: AgentState, action: AgentAction): AgentState {
  switch (action.type) {
    case 'SET_AGENTS':
      return { ...state, agents: action.payload };
    case 'SELECT_AGENT':
      return { ...state, selectedAgent: action.payload };
    case 'CLEAR_SELECTION':
      return { ...state, selectedAgent: null };
    default:
      return state;
  }
}

export function AgentProvider({ children }: { children: ReactNode }) {
  const [state, dispatch] = useReducer(agentReducer, {
    agents: [],
    selectedAgent: null
  });

  return (
    <AgentContext.Provider value={{ state, dispatch }}>
      {children}
    </AgentContext.Provider>
  );
}

export function useAgentContext() {
  const context = useContext(AgentContext);
  if (!context) {
    throw new Error('useAgentContext must be used within AgentProvider');
  }
  return context;
}

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

export function useAgents() {
  return useQuery({
    queryKey: ['agents'],
    queryFn: async () => {
      const response = await fetch('/api/agents');
      return response.json();
    },
    staleTime: 5 * 60 * 1000, // 5 minutes
  });
}

export function useCreateAgent() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: async (newAgent: CreateAgentInput) => {
      const response = await fetch('/api/agents', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newAgent),
      });
      return response.json();
    },
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['agents'] });
    },
  });
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const agentSchema = z.object({
  name: z.string().min(1, 'Name is required'),
  type: z.enum(['claude', 'gpt', 'gemini']),
  description: z.string().optional(),
});

type AgentFormData = z.infer<typeof agentSchema>;

export function AgentForm({ onSubmit }: { onSubmit: (data: AgentFormData) => void }) {
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<AgentFormData>({
    resolver: zodResolver(agentSchema),
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('name')} placeholder="Agent name" />
      {errors.name && <span>{errors.name.message}</span>}

      <select {...register('type')}>
        <option value="claude">Claude</option>
        <option value="gpt">GPT</option>
        <option value="gemini">Gemini</option>
      </select>

      <button type="submit" disabled={isSubmitting}>
        Create Agent
      </button>
    </form>
  );
}

import { memo, useMemo, useCallback } from 'react';

// Memoized component
export const AgentList = memo(function AgentList({ agents }: { agents: Agent[] }) {
  const sortedAgents = useMemo(
    () => [...agents].sort((a, b) => a.name.localeCompare(b.name)),
    [agents]
  );

  const handleSelect = useCallback((id: string) => {
    console.log('Selected:', id);
  }, []);

  return (
    <ul>
      {sortedAgents.map((agent) => (
        <li key={agent.id} onClick={() => handleSelect(agent.id)}>
          {agent.name}
        </li>
      ))}
    </ul>
  );
});