{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "constellation", "type": "registry:component", "title": "Constellation", "description": "Your agents and the tools they reach for, drawn as a small constellation: each call and its answer travel the line as a spark, busy lines glow brighter, and an agent that needs you turns amber with Approve right underneath.", "categories": [ "component", "Mission Control" ], "dependencies": [ "lucide-react", "motion" ], "registryDependencies": [ "utils", "https://coss.com/ui/r/button.json" ], "files": [ { "path": "registry/devl/constellation.tsx", "type": "registry:component", "content": "\"use client\";\n\nimport { BotIcon, CheckIcon, HandIcon, type LucideIcon, WrenchIcon, XIcon } from \"lucide-react\";\nimport { AnimatePresence, animate, MotionConfig, motion, useMotionValue, useReducedMotion, useTransform } from \"motion/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nfunction useReducedMotionAfterMount() {\n const prefers = useReducedMotion();\n const [mounted, setMounted] = useState(false);\n useEffect(() => setMounted(true), []);\n return mounted && Boolean(prefers);\n}\n\nexport interface ConstellationAgent {\n id: string;\n name: string;\n icon?: LucideIcon;\n at?: [number, number];\n asks?: { tool: string; action: string }[];\n}\n\nexport interface ConstellationTool {\n id: string;\n name: string;\n icon?: LucideIcon;\n at?: [number, number];\n}\n\nexport interface ConstellationLink {\n agent: string;\n tool: string;\n}\n\nexport interface ConstellationProps {\n agents: ConstellationAgent[];\n tools: ConstellationTool[];\n links: ConstellationLink[];\n title?: string;\n live?: boolean;\n autoApproveAfterMs?: number;\n onDecision?: (ask: ConstellationAsk, approved: boolean) => void;\n className?: string;\n}\n\nexport interface ConstellationAsk {\n agent: string;\n tool: string;\n action: string;\n}\n\ntype AgentStatus = \"idle\" | \"working\" | \"waiting\";\n\ninterface Pulse {\n id: number;\n agent: string;\n tool: string;\n dir: \"call\" | \"answer\";\n}\n\ninterface LogLine {\n id: number;\n agent: string;\n tool: string;\n text: string;\n tone: \"call\" | \"ok\" | \"warn\" | \"deny\";\n}\n\ninterface Point {\n x: number;\n y: number;\n}\n\nconst W = 440;\nconst H = 260;\nconst CX = W / 2;\nconst CY = H / 2;\n\nconst key = (a: string, t: string) => `${a}→${t}`;\n\nfunction ringLayout(agents: ConstellationAgent[], tools: ConstellationTool[], links: ConstellationLink[]) {\n const pos: Record = {};\n const angles: Record = {};\n const n = agents.length;\n agents.forEach((a, i) => {\n const ang = n === 1 ? -Math.PI / 2 : -Math.PI / 2 + (i / n) * Math.PI * 2;\n angles[a.id] = ang;\n pos[a.id] = n === 1 ? { x: CX, y: CY } : { x: CX + Math.cos(ang) * 82, y: CY + Math.sin(ang) * 52 };\n });\n const want = tools.map((t) => {\n const users = links.filter((l) => l.tool === t.id).map((l) => angles[l.agent] ?? 0);\n const sx = users.reduce((s, a) => s + Math.cos(a), 0);\n const sy = users.reduce((s, a) => s + Math.sin(a), 0);\n return { id: t.id, ang: users.length ? Math.atan2(sy, sx) : 0 };\n });\n want.sort((a, b) => a.ang - b.ang);\n const m = want.length;\n const step = (Math.PI * 2) / Math.max(m, 1);\n let best = 0;\n let bestErr = Number.POSITIVE_INFINITY;\n for (let k = 0; k < 72; k++) {\n const off = (k / 72) * step;\n let err = 0;\n want.forEach((w, i) => {\n const d = Math.atan2(Math.sin(w.ang - (off + i * step - Math.PI)), Math.cos(w.ang - (off + i * step - Math.PI)));\n err += d * d;\n });\n if (err < bestErr) {\n bestErr = err;\n best = off;\n }\n }\n want.forEach((w, i) => {\n const ang = best + i * step - Math.PI;\n pos[w.id] = { x: CX + Math.cos(ang) * 176, y: CY + Math.sin(ang) * 104 };\n });\n for (const node of [...agents, ...tools]) if (node.at) pos[node.id] = { x: node.at[0] * W, y: node.at[1] * H };\n return pos;\n}\n\nfunction curve(a: Point, b: Point) {\n const mx = (a.x + b.x) / 2;\n const my = (a.y + b.y) / 2;\n const dx = b.x - a.x;\n const dy = b.y - a.y;\n const len = Math.hypot(dx, dy) || 1;\n const bend = 0.12 * len;\n const c = { x: mx - (dy / len) * bend, y: my + (dx / len) * bend };\n return { c, d: `M${a.x} ${a.y} Q${c.x} ${c.y} ${b.x} ${b.y}` };\n}\n\nfunction quad(a: Point, c: Point, b: Point, t: number) {\n const u = 1 - t;\n return { x: u * u * a.x + 2 * u * t * c.x + t * t * b.x, y: u * u * a.y + 2 * u * t * c.y + t * t * b.y };\n}\n\nfunction PulseDot({\n from,\n to,\n ctrl,\n tone,\n reduce,\n dim,\n onDone,\n}: {\n dim: boolean;\n from: Point;\n to: Point;\n ctrl: Point;\n tone: \"call\" | \"answer\";\n reduce: boolean;\n onDone: () => void;\n}) {\n const t = useMotionValue(0);\n const cx = useTransform(t, (v) => quad(from, ctrl, to, v).x);\n const cy = useTransform(t, (v) => quad(from, ctrl, to, v).y);\n const done = useRef(onDone);\n done.current = onDone;\n useEffect(() => {\n const c = animate(t, 1, {\n duration: reduce ? 0.05 : 0.75,\n ease: [0.45, 0, 0.25, 1],\n onComplete: () => done.current(),\n });\n return () => c.stop();\n }, [t, reduce]);\n return (\n \n \n \n \n );\n}\n\nexport function Constellation({\n agents,\n tools,\n links,\n title = \"Agent network\",\n live = true,\n autoApproveAfterMs,\n onDecision,\n className,\n}: ConstellationProps) {\n const reduce = useReducedMotionAfterMount();\n const pos = useMemo(() => ringLayout(agents, tools, links), [agents, tools, links]);\n const paths = useMemo(() => {\n const out: Record = {};\n for (const l of links) {\n const a = pos[l.agent];\n const b = pos[l.tool];\n if (!a || !b) continue;\n out[key(l.agent, l.tool)] = { ...curve(a, b), a, b };\n }\n return out;\n }, [links, pos]);\n\n const [status, setStatus] = useState>(() =>\n Object.fromEntries(agents.map((a, i) => [a.id, i === agents.length - 1 ? \"idle\" : \"working\"])),\n );\n const [pulses, setPulses] = useState([]);\n const [heat, setHeat] = useState>({});\n const [toolBusy, setToolBusy] = useState>({});\n const [ask, setAsk] = useState(null);\n const [log, setLog] = useState([]);\n const [calls, setCalls] = useState(0);\n const [hoverId, setHover] = useState(null);\n const [pinned, setPinned] = useState(null);\n const hover = hoverId ?? pinned;\n\n const ids = useRef(0);\n const inFlight = useRef(new Set());\n const timers = useRef(new Set>());\n const statusRef = useRef(status);\n statusRef.current = status;\n const askRef = useRef(ask);\n askRef.current = ask;\n\n const later = useCallback((fn: () => void, ms: number) => {\n const id = setTimeout(() => {\n timers.current.delete(id);\n fn();\n }, ms);\n timers.current.add(id);\n }, []);\n\n useEffect(() => {\n const t = timers.current;\n return () => {\n for (const id of t) clearTimeout(id);\n t.clear();\n };\n }, []);\n\n const pushLog = useCallback((line: Omit) => {\n setLog((l) => [{ ...line, id: ++ids.current }, ...l].slice(0, 3));\n }, []);\n\n const fire = useCallback(\n (agent: string, tool: string) => {\n inFlight.current.add(agent);\n setPulses((p) => [...p, { id: ++ids.current, agent, tool, dir: \"call\" }]);\n setHeat((h) => ({ ...h, [key(agent, tool)]: Math.min((h[key(agent, tool)] ?? 0) + 1, 5) }));\n setCalls((c) => c + 1);\n },\n [],\n );\n\n const resolve = useCallback(\n (approved: boolean) => {\n const a = askRef.current;\n if (!a) return;\n setAsk(null);\n onDecision?.(a, approved);\n setStatus((s) => ({ ...s, [a.agent]: \"working\" }));\n const agentName = agents.find((x) => x.id === a.agent)?.name ?? a.agent;\n if (approved) {\n pushLog({ agent: agentName, tool: a.action, text: \"approved\", tone: \"ok\" });\n fire(a.agent, a.tool);\n } else {\n pushLog({ agent: agentName, tool: a.action, text: \"denied\", tone: \"deny\" });\n inFlight.current.delete(a.agent);\n }\n },\n [agents, fire, onDecision, pushLog],\n );\n\n useEffect(() => {\n if (!live) return;\n let tick = 0;\n let nextAsk = 8;\n const iv = setInterval(() => {\n tick++;\n const st = statusRef.current;\n for (const a of agents) {\n const s = st[a.id];\n if (s === \"working\" && !inFlight.current.has(a.id) && Math.random() < 0.5) {\n const mine = links.filter((l) => l.agent === a.id);\n const pick = mine[Math.floor(Math.random() * mine.length)];\n if (pick) fire(a.id, pick.tool);\n }\n }\n if (tick % 9 === 0) {\n const pool = agents.filter((a) => st[a.id] !== \"waiting\" && !inFlight.current.has(a.id));\n const flip = pool[Math.floor(Math.random() * pool.length)];\n const busy = agents.filter((a) => st[a.id] === \"working\").length;\n if (flip && (st[flip.id] === \"idle\" || busy > 2)) {\n setStatus((s) => ({ ...s, [flip.id]: s[flip.id] === \"idle\" ? \"working\" : \"idle\" }));\n }\n }\n if (askRef.current) nextAsk = tick + 16;\n else if (tick >= nextAsk) {\n const candidates = agents.filter((a) => a.asks?.length && st[a.id] === \"working\" && !inFlight.current.has(a.id));\n const who = candidates[Math.floor(Math.random() * candidates.length)];\n if (who?.asks) {\n const q = who.asks[Math.floor(Math.random() * who.asks.length)];\n inFlight.current.add(who.id);\n setStatus((s) => ({ ...s, [who.id]: \"waiting\" }));\n setAsk({ agent: who.id, tool: q.tool, action: q.action });\n pushLog({ agent: who.name, tool: q.action, text: \"needs you\", tone: \"warn\" });\n }\n }\n setHeat((h) => {\n const n: Record = {};\n for (const [k, v] of Object.entries(h)) if (v * 0.88 > 0.05) n[k] = v * 0.88;\n return n;\n });\n }, 450);\n return () => clearInterval(iv);\n }, [live, agents, links, fire, pushLog]);\n\n useEffect(() => {\n if (!ask || !autoApproveAfterMs) return;\n const id = setTimeout(() => resolve(true), autoApproveAfterMs);\n return () => clearTimeout(id);\n }, [ask, autoApproveAfterMs, resolve]);\n\n const onPulseDone = useCallback(\n (p: Pulse) => {\n setPulses((list) => list.filter((x) => x.id !== p.id));\n if (p.dir === \"call\") {\n setToolBusy((b) => ({ ...b, [p.tool]: (b[p.tool] ?? 0) + 1 }));\n later(\n () => {\n setToolBusy((b) => ({ ...b, [p.tool]: Math.max((b[p.tool] ?? 1) - 1, 0) }));\n setPulses((list) => [...list, { id: ++ids.current, agent: p.agent, tool: p.tool, dir: \"answer\" }]);\n },\n 250 + Math.random() * 550,\n );\n } else {\n inFlight.current.delete(p.agent);\n const a = agents.find((x) => x.id === p.agent);\n const t = tools.find((x) => x.id === p.tool);\n pushLog({\n agent: a?.name ?? p.agent,\n tool: t?.name ?? p.tool,\n text: `${Math.round(120 + Math.random() * 760)}ms`,\n tone: \"call\",\n });\n }\n },\n [agents, tools, later, pushLog],\n );\n\n const related = (k: string) => {\n if (!hover) return true;\n const [a, t] = k.split(\"→\");\n return a === hover || t === hover;\n };\n\n const working = agents.filter((a) => status[a.id] === \"working\").length;\n const askAgent = ask ? agents.find((a) => a.id === ask.agent) : null;\n const askTool = ask ? tools.find((t) => t.id === ask.tool) : null;\n\n return (\n \n
\n
\n
\n \n {live && !reduce && }\n \n \n

{title}

\n
\n
\n \n {working}/{agents.length} working\n \n \n {calls} calls\n \n
\n
\n\n
\n \n {links.map((l) => {\n const k = key(l.agent, l.tool);\n const p = paths[k];\n if (!p) return null;\n const h = heat[k] ?? 0;\n const pending = ask && ask.agent === l.agent && ask.tool === l.tool;\n return (\n \n \n \n \n );\n })}\n {pulses.map((p) => {\n const path = paths[key(p.agent, p.tool)];\n if (!path) return null;\n return (\n onPulseDone(p)}\n reduce={reduce}\n to={p.dir === \"call\" ? path.b : path.a}\n tone={p.dir}\n />\n );\n })}\n \n\n {tools.map((t) => {\n const p = pos[t.id];\n const Icon = t.icon ?? WrenchIcon;\n const busy = (toolBusy[t.id] ?? 0) > 0;\n const dim = hover && hover !== t.id && !links.some((l) => l.tool === t.id && l.agent === hover);\n return (\n setHover(null)}\n onFocus={() => setHover(t.id)}\n onPointerEnter={(e) => e.pointerType === \"mouse\" && setHover(t.id)}\n onClick={() => setPinned((x) => (x === t.id ? null : t.id))}\n onPointerLeave={() => setHover(null)}\n style={{ left: `${(p.x / W) * 100}%`, top: `${(p.y / H) * 100}%` }}\n type=\"button\"\n >\n \n {t.name}\n \n );\n })}\n\n {agents.map((a) => {\n const p = pos[a.id];\n const Icon = a.icon ?? BotIcon;\n const s = status[a.id];\n const dim = hover && hover !== a.id && !links.some((l) => l.agent === a.id && l.tool === hover);\n return (\n setHover(null)}\n onFocus={() => setHover(a.id)}\n onPointerEnter={(e) => e.pointerType === \"mouse\" && setHover(a.id)}\n onClick={() => setPinned((x) => (x === a.id ? null : a.id))}\n onPointerLeave={() => setHover(null)}\n style={{ left: `${(p.x / W) * 100}%`, top: `${(p.y / H) * 100}%` }}\n type=\"button\"\n >\n \n \n {s !== \"idle\" && !reduce && !dim && (\n \n )}\n \n \n \n {s === \"waiting\" ? : }\n \n \n \n \n \n {a.name}\n \n \n );\n })}\n
\n\n
\n \n {ask && askAgent ? (\n \n \n \n \n
\n

{askAgent.name} needs you

\n

\n Wants to {ask.action}\n {askTool ? ` via ${askTool.name}` : \"\"}\n

\n
\n
\n \n \n
\n \n ) : (\n \n \n {log.length === 0 &&
  • Waiting for the first call…
    • }\n {log.map((l, i) => (\n 0 && \"[&>span]:text-muted-foreground\",\n )}\n exit={{ opacity: 0, transition: { duration: 0.12 } }}\n initial={{ opacity: 0, y: -6 }}\n key={l.id}\n layout=\"position\"\n transition={{ duration: 0.22, ease: [0.23, 1, 0.32, 1] }}\n >\n \n {l.agent}\n →\n {l.tool}\n {l.text}\n \n ))}\n     \n \n )}\n     \n
    \n
    \n     \n );\n}\n" } ] }