'use client' import { useEffect, useRef, useState } from 'react' import { cn } from '@/lib/utils' import type { TeamMember, TeamTemplateId } from './team-panel' import { TEAM_TEMPLATES } from './team-panel' // ─── Provider metadata ──────────────────────────────────────────────────────── /** SimpleIcons slug for each provider key (used for CDN logos). * Only include providers confirmed to exist in simpleicons.org slugs. * Providers NOT in SimpleIcons (deepseek, minimax, fireworks, togetherai) fall back to custom SVG. */ const SIMPLEICONS_SLUGS: Record = { anthropic: 'anthropic', openai: 'openai', 'openai-codex': 'openai', 'github-copilot': 'githubcopilot', google: 'google', 'google-antigravity': 'google', mistral: 'mistral', groq: 'groq', ollama: 'ollama', perplexity: 'perplexity', cohere: 'cohere', xai: 'x', openrouter: 'openrouter', } /** Branded hex color per provider (passed to simpleicons CDN for colored SVGs). */ const PROVIDER_HEX: Record = { anthropic: 'D97757', openai: '000000', // OpenAI brand is now black/white 'openai-codex': '000000', 'github-copilot': '6E40C9', google: '4285F4', 'google-antigravity': '4285F4', mistral: 'FF7000', groq: 'F55036', ollama: '000000', perplexity: '20808D', cohere: '39594D', xai: '000000', openrouter: '6467F2', } export const PROVIDER_META: Record = { anthropic: { label: 'Anthropic', emoji: '🟠', color: 'text-orange-600 dark:text-orange-400', bg: 'bg-orange-50 dark:bg-orange-900/20', border: 'border-orange-300', description: 'Claude models' }, openai: { label: 'OpenAI', emoji: '🟢', color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20', border: 'border-emerald-300', description: 'GPT & o-series' }, 'openai-codex': { label: 'OpenAI Codex', emoji: '🟢', color: 'text-emerald-600 dark:text-emerald-400', bg: 'bg-emerald-50 dark:bg-emerald-900/20', border: 'border-emerald-300', description: 'Codex models' }, 'github-copilot': { label: 'GitHub Copilot', emoji: '⚫', color: 'text-neutral-700 dark:text-neutral-300', bg: 'bg-neutral-100 dark:bg-neutral-800', border: 'border-neutral-400', description: 'Copilot via GitHub' }, google: { label: 'Google', emoji: '🔵', color: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20', border: 'border-blue-300', description: 'Gemini models' }, 'google-antigravity': { label: 'Google AG', emoji: '🔵', color: 'text-blue-600 dark:text-blue-400', bg: 'bg-blue-50 dark:bg-blue-900/20', border: 'border-blue-300', description: 'Gemini experimental' }, deepseek: { label: 'DeepSeek', emoji: '🐋', color: 'text-sky-600 dark:text-sky-400', bg: 'bg-sky-50 dark:bg-sky-900/20', border: 'border-sky-300', description: 'DeepSeek R-series' }, minimax: { label: 'MiniMax', emoji: '🟣', color: 'text-violet-600 dark:text-violet-400', bg: 'bg-violet-50 dark:bg-violet-900/20', border: 'border-violet-300', description: 'M-series models' }, openrouter: { label: 'OpenRouter', emoji: '🌐', color: 'text-indigo-600 dark:text-indigo-400', bg: 'bg-indigo-50 dark:bg-indigo-900/20', border: 'border-indigo-300', description: 'Multi-provider routing' }, mistral: { label: 'Mistral', emoji: '🔴', color: 'text-rose-600 dark:text-rose-400', bg: 'bg-rose-50 dark:bg-rose-900/20', border: 'border-rose-300', description: 'Mistral models' }, xai: { label: 'xAI', emoji: '⚡', color: 'text-neutral-800 dark:text-neutral-100', bg: 'bg-neutral-100 dark:bg-neutral-800', border: 'border-neutral-400', description: 'Grok models' }, groq: { label: 'Groq', emoji: '⚡', color: 'text-amber-600 dark:text-amber-400', bg: 'bg-amber-50 dark:bg-amber-900/20', border: 'border-amber-300', description: 'Ultra-fast inference' }, ollama: { label: 'Ollama', emoji: '🦙', color: 'text-teal-600 dark:text-teal-400', bg: 'bg-teal-50 dark:bg-teal-900/20', border: 'border-teal-300', description: 'Local models' }, together: { label: 'Together AI', emoji: '🤝', color: 'text-pink-600 dark:text-pink-400', bg: 'bg-pink-50 dark:bg-pink-900/20', border: 'border-pink-300', description: 'Together inference' }, fireworks: { label: 'Fireworks', emoji: '🎆', color: 'text-orange-600 dark:text-orange-400', bg: 'bg-orange-50 dark:bg-orange-900/20', border: 'border-orange-300', description: 'Fast open models' }, perplexity: { label: 'Perplexity', emoji: '🔮', color: 'text-purple-600 dark:text-purple-400', bg: 'bg-purple-50 dark:bg-purple-900/20', border: 'border-purple-300', description: 'Search-augmented AI' }, cohere: { label: 'Cohere', emoji: '🌊', color: 'text-cyan-600 dark:text-cyan-400', bg: 'bg-cyan-50 dark:bg-cyan-900/20', border: 'border-cyan-300', description: 'Command R series' }, } export function getProviderMeta(provider: string) { const key = provider.toLowerCase() return PROVIDER_META[key] ?? { label: provider, emoji: '🔑', color: 'text-neutral-600 dark:text-neutral-400', bg: 'bg-neutral-100 dark:bg-neutral-800', border: 'border-neutral-300', description: 'Custom provider', } } // ─── Provider Logo component ────────────────────────────────────────────────── /** * Renders the real provider logo from SimpleIcons CDN. * Falls back to the emoji if the image fails to load or no slug is known. */ export function ProviderLogo({ provider, size = 28 }: { provider: string; size?: number }) { const [failed, setFailed] = useState(false) const rawKey = provider.toLowerCase() // Normalize: exact match first, then try known slug prefixes (handles "ollama-pc1" → "ollama") const key = SIMPLEICONS_SLUGS[rawKey] ? rawKey : (Object.keys(SIMPLEICONS_SLUGS).find((k) => rawKey.startsWith(`${k}-`) || rawKey.startsWith(`${k}:`)) ?? rawKey) const meta = getProviderMeta(provider) const slug = SIMPLEICONS_SLUGS[key] const hex = PROVIDER_HEX[key] // Inline SVG for OpenAI — CDN unreliable for dark-brand providers; render crisp inline SVG instead if (key === 'openai' || key === 'openai-codex' || key === 'anthropic-oauth') { return ( ) } if (!failed && slug) { const brandHex = hex ?? '555555' // For very dark brand colors, show a white version in dark mode const isDarkBrand = parseInt(brandHex.slice(0, 2), 16) + parseInt(brandHex.slice(2, 4), 16) + parseInt(brandHex.slice(4, 6), 16) < 120 const srcLight = `https://cdn.simpleicons.org/${slug}/${brandHex}` const srcDark = `https://cdn.simpleicons.org/${slug}/ffffff` return ( <> {/* Light mode version (brand color) */} {meta.label} setFailed(true)} style={{ width: size, height: size, objectFit: 'contain' }} className={cn('object-contain', isDarkBrand ? 'block dark:hidden' : '')} draggable={false} /> {/* Dark mode version (white) — only rendered for dark brand colors */} {isDarkBrand ? ( setFailed(true)} style={{ width: size, height: size, objectFit: 'contain' }} className="hidden dark:block object-contain" draggable={false} /> ) : null} ) } // Custom emoji for providers not in SimpleIcons (or as CDN fallback) const CUSTOM_PROVIDER_ICONS: Record = { deepseek: '🐋', minimax: '⚡', fireworks: '🎆', together: '🤝', togetherai: '🤝', ollama: '🦙', } const customEmoji = CUSTOM_PROVIDER_ICONS[key] if (customEmoji) { return {customEmoji} } // Fallback: branded letter abbreviation — prefer display label over raw provider string const labelSource = meta.label?.length > 1 ? meta.label : provider.replace(/[-_.]/g, ' ').trim() const letters = labelSource.replace(/\s+/g, '').slice(0, 2).toUpperCase() return ( {letters} ) } // ─── Common models per provider (shown when gateway hasn't loaded models yet) ─ export const PROVIDER_COMMON_MODELS: Record> = { anthropic: [ { value: 'anthropic/claude-opus-4-6', label: 'Claude Opus 4.6' }, { value: 'anthropic/claude-sonnet-4-6', label: 'Claude Sonnet 4.6' }, { value: 'anthropic/claude-haiku-3-5', label: 'Claude Haiku 3.5' }, ], openai: [ { value: 'openai/gpt-5-codex', label: 'GPT-5 Codex' }, { value: 'openai/gpt-4o', label: 'GPT-4o' }, { value: 'openai/gpt-4o-mini', label: 'GPT-4o Mini' }, { value: 'openai/gpt-3.5-turbo', label: 'GPT-3.5 Turbo' }, { value: 'openai/o3-mini', label: 'o3-mini' }, { value: 'openai/o1', label: 'o1' }, ], 'openai-codex': [ { value: 'openai/gpt-5-codex', label: 'GPT-5 Codex' }, { value: 'openai/gpt-5.1-codex', label: 'GPT-5.1 Codex' }, { value: 'openai/gpt-5.2-codex', label: 'GPT-5.2 Codex' }, ], google: [ { value: 'google/gemini-2.0-flash', label: 'Gemini 2.0 Flash' }, { value: 'google/gemini-2.5-pro', label: 'Gemini 2.5 Pro' }, { value: 'google/gemini-1.5-pro', label: 'Gemini 1.5 Pro' }, ], 'google-antigravity': [ { value: 'google-antigravity/gemini-2.5-flash', label: 'Gemini 2.5 Flash' }, { value: 'google-antigravity/gemini-2.5-flash-thinking', label: 'Gemini 2.5 Flash (Thinking)' }, ], deepseek: [ { value: 'deepseek/deepseek-r1', label: 'DeepSeek R1' }, { value: 'deepseek/deepseek-v3', label: 'DeepSeek V3' }, { value: 'deepseek/deepseek-chat', label: 'DeepSeek Chat' }, ], mistral: [ { value: 'mistral/mistral-large', label: 'Mistral Large' }, { value: 'mistral/mistral-small', label: 'Mistral Small' }, { value: 'mistral/codestral', label: 'Codestral' }, { value: 'mistral/mixtral-8x7b', label: 'Mixtral 8x7B' }, ], groq: [ { value: 'groq/llama-3.3-70b-versatile', label: 'Llama 3.3 70B' }, { value: 'groq/llama-3.1-8b-instant', label: 'Llama 3.1 8B Instant' }, { value: 'groq/mixtral-8x7b-32768', label: 'Mixtral 8x7B' }, ], cohere: [ { value: 'cohere/command-r-plus', label: 'Command R+' }, { value: 'cohere/command-r', label: 'Command R' }, { value: 'cohere/command-light', label: 'Command Light' }, ], perplexity: [ { value: 'perplexity/sonar-pro', label: 'Sonar Pro' }, { value: 'perplexity/sonar', label: 'Sonar' }, { value: 'perplexity/sonar-reasoning', label: 'Sonar Reasoning' }, ], together: [ { value: 'together/meta-llama/Llama-3.3-70B-Instruct-Turbo', label: 'Llama 3.3 70B Turbo' }, { value: 'together/mistralai/Mixtral-8x7B-Instruct-v0.1', label: 'Mixtral 8x7B' }, { value: 'together/Qwen/Qwen2.5-72B-Instruct-Turbo', label: 'Qwen 2.5 72B' }, ], fireworks: [ { value: 'fireworks/accounts/fireworks/models/llama-v3p1-70b-instruct', label: 'Llama 3.1 70B' }, { value: 'fireworks/accounts/fireworks/models/deepseek-r1', label: 'DeepSeek R1' }, { value: 'fireworks/accounts/fireworks/models/qwen2p5-72b-instruct', label: 'Qwen 2.5 72B' }, ], minimax: [ { value: 'minimax/MiniMax-M2.7', label: 'MiniMax M2.7' }, { value: 'minimax/MiniMax-M2.7-Lightning', label: 'MiniMax M2.7 Lightning' }, ], xai: [ { value: 'xai/grok-beta', label: 'Grok Beta' }, { value: 'xai/grok-2', label: 'Grok 2' }, { value: 'xai/grok-2-mini', label: 'Grok 2 Mini' }, ], openrouter: [ { value: 'openrouter/anthropic/claude-opus-4-6', label: 'Claude Opus 4.6 (OR)' }, { value: 'openrouter/openai/gpt-4o', label: 'GPT-4o (OR)' }, { value: 'openrouter/google/gemini-2.0-flash-001', label: 'Gemini 2.0 Flash (OR)' }, ], 'github-copilot': [ { value: 'github-copilot/gpt-4o', label: 'GPT-4o (Copilot)' }, { value: 'github-copilot/o3-mini', label: 'o3-mini (Copilot)' }, { value: 'github-copilot/claude-sonnet-4-5', label: 'Claude Sonnet (Copilot)' }, ], } // ─── Shared Modal wrapper ───────────────────────────────────────────────────── export function WizardModal({ open, onClose, children, width = 'max-w-xl', }: { open: boolean onClose: () => void children: React.ReactNode width?: string }) { useEffect(() => { if (!open) return function onKey(e: KeyboardEvent) { if (e.key === 'Escape') onClose() } document.addEventListener('keydown', onKey) return () => document.removeEventListener('keydown', onKey) }, [open, onClose]) if (!open) return null return (
{/* Backdrop — clicking this closes the modal */}
{/* Panel — clicks inside stay inside */}
e.stopPropagation()} > {children}
) } function FieldLabel({ children }: { children: React.ReactNode }) { return {children} } const INPUT_CLS = 'h-9 w-full rounded-lg border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800 px-3 text-sm text-neutral-900 dark:text-white outline-none ring-accent-400 focus:ring-1 transition-colors' const SELECT_CLS = 'h-9 w-full rounded-lg border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800 px-3 text-sm text-neutral-900 dark:text-white outline-none ring-accent-400 focus:ring-1' // ─── AgentWizardModal ───────────────────────────────────────────────────────── type AgentWizardProps = { member: TeamMember & { avatar?: number; backstory: string; roleDescription: string } memberIndex: number accentBorderClass: string /** Pre-rendered avatar node (includes the avatar + pencil button for changing it) */ avatarNode: React.ReactNode gatewayModels: ReadonlyArray<{ value: string; label: string; provider: string }> modelPresets: ReadonlyArray<{ readonly id: string; readonly label: string; readonly desc?: string }> systemPromptTemplates: Array<{ id: string; label: string; icon: string; category: string; prompt: string }> /** When true: "Done" → "Add Agent", "Remove Agent" → "Cancel". onClose acts as the add/confirm action. */ addMode?: boolean onUpdate: (updates: Partial) => void onDelete: () => void onClose: () => void } export function AgentWizardModal({ member, memberIndex, accentBorderClass, avatarNode, gatewayModels, modelPresets, systemPromptTemplates, addMode = false, onUpdate, onDelete, onClose, }: AgentWizardProps) { const isCustomPrompt = member.backstory.trim() !== '' && !systemPromptTemplates.some((t) => t.prompt === member.backstory) const headerSubtitle = member.roleDescription?.trim() || 'Configure your agent' const systemPromptRef = useRef(null) // Auto-resize textarea whenever backstory changes (e.g. template selected) useEffect(() => { const el = systemPromptRef.current if (!el) return el.style.height = 'auto' el.style.height = `${Math.min(el.scrollHeight, 420)}px` }, [member.backstory]) return ( {/* Header */}
{/* Avatar slot (rendered by parent to avoid circular import) */} {avatarNode}

{member.name || `Agent ${memberIndex + 1}`}

{headerSubtitle}

{/* Form body */}
{/* Row 1: NAME (full width, prominent) */}
Name onUpdate({ name: e.target.value })} className="h-10 w-full rounded-lg border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-neutral-800 px-3 text-base font-semibold text-neutral-900 dark:text-white outline-none ring-accent-400 focus:ring-1 transition-colors" placeholder={`Agent ${memberIndex + 1}`} />
{/* Row 2: MODEL (half) + ROLE (half) */}
Model
Role onUpdate({ roleDescription: e.target.value })} className={INPUT_CLS} />
{/* Row 3: Memory Path + Skill Allowlist */}
Memory Path (optional) onUpdate({ memoryPath: e.target.value || undefined } as Partial)} className={INPUT_CLS} placeholder="e.g. ~/workspace/agent-memory" />

Custom memory/workspace directory for this agent

Skill Allowlist (optional) { const skills = e.target.value.split(',').map((s: string) => s.trim()).filter(Boolean) onUpdate({ skillAllowlist: skills.length > 0 ? skills : undefined } as Partial) }} className={INPUT_CLS} placeholder="web_search, exec, read, write" />

Comma-separated skill names. Empty = all skills allowed.

{/* System Prompt */}
System Prompt
{isCustomPrompt ? '✏️ Custom' : 'Template'} {member.backstory.trim() ? ( ) : null}
{/* Template chips by category — compact */}
{(['engineering', 'research', 'content', 'ops', 'general'] as const).map((cat) => { const catTemplates = systemPromptTemplates.filter((t) => t.category === cat) const catLabels: Record = { engineering: '⚙️', research: '🔬', content: '📝', ops: '🗺️', general: '🤖' } return (
{catLabels[cat]} {catTemplates.map((tpl) => { const active = member.backstory === tpl.prompt return ( ) })}
) })}