import { useEffect, useMemo, useRef, useState } from 'react' import { useQuery } from '@tanstack/react-query' import { ArrowDown01Icon, Cancel01Icon, Delete02Icon, Settings01Icon, } from '@hugeicons/core-free-icons' import { HugeiconsIcon } from '@hugeicons/react' import { Button } from '@/components/ui/button' import { fetchModels, type GatewayModelCatalogEntry, } from '@/lib/gateway-api' import { cn } from '@/lib/utils' import type { OperationsAgent } from '../hooks/use-operations' type AvailableModel = { id: string provider: string name: string } function normalizeModel(model: GatewayModelCatalogEntry): AvailableModel | null { if (typeof model === 'string') { return { id: model, provider: model.includes('/') ? (model.split('/')[0] ?? 'model') : 'model', name: model.split('/').pop() ?? model, } } const id = model.id ?? model.alias ?? model.model ?? '' if (!id) return null return { id, provider: model.provider ?? id.split('/')[0] ?? 'model', name: model.label ?? model.displayName ?? model.name ?? id.split('/').pop() ?? id, } } function ModelSelector({ value, onChange, models, }: { value: string onChange: (nextValue: string) => void models: AvailableModel[] }) { const [open, setOpen] = useState(false) const containerRef = useRef(null) useEffect(() => { if (!open) return function handlePointerDown(event: MouseEvent) { if (!containerRef.current?.contains(event.target as Node)) { setOpen(false) } } document.addEventListener('mousedown', handlePointerDown) return () => document.removeEventListener('mousedown', handlePointerDown) }, [open]) const selected = (() => { if (!value) return null // If value includes provider prefix (e.g. 'anthropic/claude-sonnet-4-6'), // match provider+id together to avoid OpenRouter stealing the match const slashIndex = value.indexOf('/') if (slashIndex > 0) { const valueProvider = value.slice(0, slashIndex) const valueModelId = value.slice(slashIndex + 1) // First try exact provider+id match const exactMatch = models.find( (m) => m.provider === valueProvider && (m.id === value || m.id === valueModelId), ) if (exactMatch) return exactMatch } // Fallback to plain id match const idMatch = models.find((m) => m.id === value) if (idMatch) return idMatch return { id: value, provider: slashIndex > 0 ? value.slice(0, slashIndex) : 'model', name: value.split('/').pop() ?? value, } })() return (
{open ? (
{models.map((model) => ( ))}
) : null}
) } export function OperationsAgentDetail({ open, agent, onClose, onSave, onDelete, isSaving, isDeleting, }: { open: boolean agent: OperationsAgent | null onClose: () => void onSave: (input: { agentId: string name: string model: string emoji: string systemPrompt: string }) => Promise onDelete: (agentId: string) => Promise isSaving: boolean isDeleting: boolean }) { const [name, setName] = useState('') const [emoji, setEmoji] = useState('🤖') const [model, setModel] = useState('') const [systemPrompt, setSystemPrompt] = useState('') useEffect(() => { if (!agent || !open) return setName(agent.name) setEmoji(agent.meta.emoji) setModel(agent.model || '') setSystemPrompt(agent.meta.systemPrompt) }, [agent, open]) const modelsQuery = useQuery({ queryKey: ['operations', 'models'], queryFn: fetchModels, enabled: open, }) const models = useMemo( () => (modelsQuery.data?.models ?? []) .map(normalizeModel) .filter((entry): entry is AvailableModel => Boolean(entry)), [modelsQuery.data?.models], ) if (!open || !agent) return null return (
event.stopPropagation()} >

Agent Settings

{agent.name}

Update this agent without leaving the roster.