{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "agent-bento-grid", "type": "registry:ui", "dependencies": [ "framer-motion" ], "files": [ { "path": "components/ui/agent-bento-grid.tsx", "content": "\"use client\";\n\nimport { useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n ChatCircle,\n Brain,\n Database,\n TerminalWindow,\n Code,\n FileText,\n SlackLogo,\n NotionLogo,\n Check,\n CircleNotch,\n Clock,\n Minus,\n Globe,\n} from \"@phosphor-icons/react\";\nimport { cn } from \"@/lib/utils\";\n\n/* ──────────────────────────────────────────────────────\n Niche: AI Agent Workspace\n Grid: 3 cards top row · 2 cards bottom row\n Each FeatCard takes: title, description, children (visual)\n────────────────────────────────────────────────────── */\n\ninterface FeatCardProps {\n title: string;\n description: string;\n children: React.ReactNode;\n /** Optional extra classes for sizing/spanning */\n className?: string;\n}\n\nexport function FeatCard({ title, description, children, className = \"\" }: FeatCardProps) {\n return (\n \n
\n

{title}

\n

{description}

\n
\n
\n {children}\n
\n \n );\n}\n\n/* ─────────────────────────────────────────────\n Card1 – Agent Pipeline\n Minimalist precise node graph with real-time task flows\n ───────────────────────────────────────────── */\n\ntype ActiveStep = 'request' | 'router' | 'agent' | 'memory' | 'tools' | 'response';\n\nconst VW = 320;\nconst VH = 240;\n\ninterface NodeConfig {\n id: string;\n x: number;\n y: number;\n icon?: any;\n label?: string;\n type: 'box' | 'circle';\n}\n\nconst NODES: NodeConfig[] = [\n { id: 'A', x: 50, y: 120, icon: ChatCircle, label: \"REQUEST\", type: 'box' },\n { id: 'Router', x: 125, y: 120, type: 'circle' },\n { id: 'C', x: 200, y: 120, icon: Brain, label: \"AGENT\", type: 'box' },\n { id: 'B', x: 280, y: 50, icon: Database, label: \"MEMORY\", type: 'box' },\n { id: 'D', x: 280, y: 190, icon: TerminalWindow, label: \"TOOLS\", type: 'box' },\n];\n\ninterface FlowPath {\n id: string;\n d: string;\n activeSteps: ActiveStep[];\n flowDirection: 'forward' | 'backward' | 'both';\n colorClass: string;\n}\n\nconst PATHS: FlowPath[] = [\n {\n id: \"a-to-router\",\n d: \"M 78 120 L 113 120\",\n activeSteps: [\"request\"],\n flowDirection: \"forward\",\n colorClass: \"text-cyan-500 dark:text-cyan-400\",\n },\n {\n id: \"router-to-agent\",\n d: \"M 137 120 L 172 120\",\n activeSteps: [\"agent\"],\n flowDirection: \"forward\",\n colorClass: \"text-violet-500 dark:text-violet-400\",\n },\n {\n id: \"agent-to-memory\",\n d: \"M 200 92 L 200 50 L 252 50\",\n activeSteps: [\"memory\"],\n flowDirection: \"both\",\n colorClass: \"text-fuchsia-500 dark:text-fuchsia-400\",\n },\n {\n id: \"agent-to-tools\",\n d: \"M 200 148 L 200 190 L 252 190\",\n activeSteps: [\"tools\"],\n flowDirection: \"both\",\n colorClass: \"text-emerald-500 dark:text-emerald-400\",\n },\n {\n id: \"response-flow-1\",\n d: \"M 172 120 L 137 120\",\n activeSteps: [\"response\"],\n flowDirection: \"forward\",\n colorClass: \"text-cyan-500 dark:text-cyan-400\",\n },\n {\n id: \"response-flow-2\",\n d: \"M 113 120 L 78 120\",\n activeSteps: [\"response\"],\n flowDirection: \"forward\",\n colorClass: \"text-cyan-500 dark:text-cyan-400\",\n },\n];\n\nconst NODE_COLORS: Record = {\n A: {\n bg: \"bg-cyan-500/10 dark:bg-cyan-500/5\",\n border: \"border-cyan-500/60 dark:border-cyan-400/50\",\n text: \"text-cyan-600 dark:text-cyan-400\",\n buttonBg: \"bg-cyan-500\",\n buttonBorder: \"border-cyan-600\",\n },\n Router: {\n bg: \"bg-amber-500/10 dark:bg-amber-500/5\",\n border: \"border-amber-500/60 dark:border-amber-400/50\",\n text: \"text-amber-600 dark:text-amber-400\",\n buttonBg: \"bg-amber-500\",\n buttonBorder: \"border-amber-600\",\n },\n C: {\n bg: \"bg-violet-500/10 dark:bg-violet-500/5\",\n border: \"border-violet-500/60 dark:border-violet-400/50\",\n text: \"text-violet-600 dark:text-violet-400\",\n buttonBg: \"bg-violet-500\",\n buttonBorder: \"border-violet-600\",\n },\n B: {\n bg: \"bg-fuchsia-500/10 dark:bg-fuchsia-500/5\",\n border: \"border-fuchsia-500/60 dark:border-fuchsia-400/50\",\n text: \"text-fuchsia-600 dark:text-fuchsia-400\",\n buttonBg: \"bg-fuchsia-500\",\n buttonBorder: \"border-fuchsia-600\",\n },\n D: {\n bg: \"bg-emerald-500/10 dark:bg-emerald-500/5\",\n border: \"border-emerald-500/60 dark:border-emerald-400/50\",\n text: \"text-emerald-600 dark:text-emerald-400\",\n buttonBg: \"bg-emerald-500\",\n buttonBorder: \"border-emerald-600\",\n },\n};\n\nexport function Card1() {\n const [step, setStep] = useState(\"request\");\n\n useEffect(() => {\n const steps: ActiveStep[] = [\"request\", \"router\", \"agent\", \"memory\", \"tools\", \"response\"];\n let idx = 0;\n const interval = setInterval(() => {\n idx = (idx + 1) % steps.length;\n setStep(steps[idx]);\n }, 2000);\n return () => clearInterval(interval);\n }, []);\n\n const isNodeActive = (nodeId: string) => {\n switch (step) {\n case 'request':\n return nodeId === 'A';\n case 'router':\n return nodeId === 'Router';\n case 'agent':\n return nodeId === 'C';\n case 'memory':\n return nodeId === 'C' || nodeId === 'B';\n case 'tools':\n return nodeId === 'C' || nodeId === 'D';\n case 'response':\n return nodeId === 'C' || nodeId === 'Router' || nodeId === 'A';\n default:\n return false;\n }\n };\n\n return (\n
\n {/* ── Layer 1: Clean dotted grid ── */}\n \n \n \n \n \n \n \n \n\n {/* ── Layer 2: Connector SVG & Nodes ── */}\n \n {/* Base Static Connection Paths */}\n \n \n \n \n\n {/* Animated Flow Overlays */}\n {PATHS.map((p) => {\n const isActive = p.activeSteps.includes(step);\n if (!isActive) return null;\n\n return (\n \n {/* Outer soft glow stroke - travels once */}\n \n {/* Sharp solid flowing stroke - travels once */}\n \n \n );\n })}\n\n {/* ForeignObjects for Nodes */}\n {NODES.map((node) => {\n const isBox = node.type === 'box';\n const w = isBox ? 56 : 24;\n const h = isBox ? 56 : 24;\n const isActive = isNodeActive(node.id);\n const colorStyles = NODE_COLORS[node.id];\n\n return (\n \n
\n {isBox && node.icon ? (\n \n {/* Centered Static Icon */}\n
\n \n
\n \n {node.label}\n \n
\n ) : (\n /* Central Router Node Upgrade */\n \n \n
\n )}\n \n \n );\n })}\n \n \n );\n}\n\n/* ─────────────────────────────────────────────\n Card2 – Live Token / Cost Monitor\n───────────────────────────────────────────── */\nexport function Card2() {\n const bars = [45, 75, 35, 85, 60, 95, 50];\n const days = [\"MON\", \"TUE\", \"WED\", \"THU\", \"FRI\", \"SAT\", \"SUN\"];\n\n const [activeIdx, setActiveIdx] = useState(0);\n const [hoveredIdx, setHoveredIdx] = useState(null);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setActiveIdx((prev) => (prev === 0 ? 1 : 0));\n }, 3000);\n return () => clearInterval(interval);\n }, []);\n\n return (\n
\n {/* Stats row with a 0.5rem slide offset margin to prevent slide-up overflow clipping */}\n
\n {[\n { label: \"Tokens/min\", value: \"12.4k\", trend: \"+8%\" },\n { label: \"Cost/run\", value: \"$0.042\", trend: \"-3%\" },\n ].map((s, i) => {\n const isActive = i === activeIdx || hoveredIdx === i;\n\n return (\n
\n {/* Background Hatched Scale Card */}\n \n\n {/* Foreground Card sliding up and right on hover or cycle activation (0.5rem offset) */}\n setHoveredIdx(i)}\n onMouseLeave={() => setHoveredIdx(null)}\n >\n {/* Left Column: Metric Details */}\n
\n {s.label}\n {s.value}\n
\n \n {s.trend}\n \n prev\n
\n
\n\n {/* Right Column: High-Precision Sparkline with Micro Vertices */}\n
\n \n {/* Connecting Line */}\n \n\n {/* Vertex Dots */}\n {(i === 0\n ? [{ x: 0, y: 18 }, { x: 16, y: 11 }, { x: 32, y: 14 }, { x: 48, y: 4 }]\n : [{ x: 0, y: 4 }, { x: 16, y: 12 }, { x: 32, y: 8 }, { x: 48, y: 18 }]\n ).map((pt, idx) => (\n \n ))}\n \n
\n \n
\n );\n })}\n
\n\n {/* Bar chart */}\n
\n {bars.map((h, i) => (\n \n {/* Animated Solid Filled Bar at bottom */}\n \n
\n ))}\n
\n\n {/* X labels */}\n
\n {days.map((d, i) => (\n

{d}

\n ))}\n
\n \n );\n}\n\n/* ─────────────────────────────────────────────\n Card3 – Stacked Infinite-Scroll Activity Feed\n ───────────────────────────────────────────── */\n\nconst STATUS_ICONS: Record = {\n done: { icon: Check, color: \"text-lime-500\", bg: \"bg-lime-500/15\", gradient: \"bg-gradient-to-b from-lime-400 to-lime-600\", border: \"border-lime-600\" },\n running: { icon: CircleNotch, color: \"text-blue-400\", bg: \"bg-blue-400/15\", gradient: \"bg-gradient-to-b from-blue-400 to-blue-600\", border: \"border-blue-600\" },\n waiting: { icon: Clock, color: \"text-amber-400\", bg: \"bg-amber-400/15\", gradient: \"bg-gradient-to-b from-amber-400 to-amber-600\", border: \"border-amber-600\" },\n idle: { icon: Minus, color: \"text-muted-foreground/60\", bg: \"bg-muted/40\", gradient: \"bg-gradient-to-b from-zinc-400 to-zinc-600\", border: \"border-zinc-600\" },\n};\n\nexport function Card3() {\n const logs = [\n { agent: \"Planner\", action: \"Decomposed task into 4 sub-goals\", status: \"done\", t: \"0.2s\" },\n { agent: \"Researcher\", action: \"Queried web for latest embeddings\", status: \"done\", t: \"1.4s\" },\n { agent: \"Coder\", action: \"Generating vector DB schema…\", status: \"running\", t: \"3.1s\" },\n { agent: \"Reviewer\", action: \"Awaiting output from Coder\", status: \"waiting\", t: \"—\" },\n { agent: \"Writer\", action: \"Idle — queued\", status: \"idle\", t: \"—\" },\n ];\n\n const [activeIdx, setActiveIdx] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setActiveIdx((prev) => (prev + 1) % logs.length);\n }, 2400);\n return () => clearInterval(interval);\n }, [logs.length]);\n\n // Signed slot: 0 = active front, negative = above (upcoming), positive = below (past)\n const getSlot = (i: number) => {\n const N = logs.length;\n let rel = i - activeIdx;\n if (rel > Math.floor(N / 2)) rel -= N;\n if (rel < -Math.floor(N / 2)) rel += N;\n return rel;\n };\n\n // Fixed y positions: tighter stack, not linear steps\n const Y: Record = { \"-2\": -68, \"-1\": -38, \"0\": 0, \"1\": 38, \"2\": 68 };\n\n return (\n
\n {logs.map((l, i) => {\n const slot = getSlot(i);\n const si = STATUS_ICONS[l.status];\n const abs = Math.abs(slot);\n const isActive = slot === 0;\n const isVisible = abs <= 2;\n\n const yOffset = Y[String(slot)] ?? (slot < 0 ? -120 : 120);\n const scale = isActive ? 1 : abs === 1 ? 0.93 : 0.87;\n const opacity = isActive ? 1 : abs === 1 ? 0.65 : 0.38;\n const zIndex = isActive ? 30 : abs === 1 ? 20 : 10;\n\n return (\n \n
\n\n {/* Icon badge — full on active, compact on behind */}\n
\n \n
\n\n {/* Text — full on active, name-only on behind */}\n
\n
\n {l.agent}\n {l.status}\n
\n {isActive && (\n

{l.action}

\n )}\n
\n\n {isActive && (\n {l.t}\n )}\n
\n \n );\n })}\n\n {/* Progress dots */}\n
\n {logs.map((_, i) => (\n \n ))}\n
\n
\n );\n}\n\n/* ─────────────────────────────────────────────\n Card4 – Memory / Knowledge Base Namespaces\n ───────────────────────────────────────────── */\n\nconst NS_ICONS: Record = {\n codebase: Code,\n docs: FileText,\n slack: SlackLogo,\n notion: NotionLogo,\n};\n\nconst NS_COLORS: Record = {\n codebase: { bar: \"from-violet-500 to-violet-400\", dot: \"bg-violet-500\", badge: \"bg-violet-500/15 text-violet-400\", buttonBg: \"bg-violet-500\", buttonBorder: \"border-violet-600\" },\n docs: { bar: \"from-sky-500 to-sky-400\", dot: \"bg-sky-500\", badge: \"bg-sky-500/15 text-sky-400\", buttonBg: \"bg-sky-500\", buttonBorder: \"border-sky-600\" },\n slack: { bar: \"from-emerald-500 to-emerald-400\", dot: \"bg-emerald-500\", badge: \"bg-emerald-500/15 text-emerald-400\", buttonBg: \"bg-emerald-500\", buttonBorder: \"border-emerald-600\" },\n notion: { bar: \"from-amber-500 to-amber-400\", dot: \"bg-amber-500\", badge: \"bg-amber-500/15 text-amber-400\", buttonBg: \"bg-amber-500\", buttonBorder: \"border-amber-600\" },\n};\n\nconst RETRIEVAL_QUERIES = [\n { ns: \"codebase\", q: \"vector embeddings auth module\", t: \"0.2s\" },\n { ns: \"docs\", q: \"API rate limiting config\", t: \"1.1s\" },\n { ns: \"codebase\", q: \"Redis cache invalidation patterns\", t: \"2.4s\" },\n { ns: \"slack\", q: \"deployment discussion #eng\", t: \"4.0s\" },\n { ns: \"notion\", q: \"Q3 roadmap — agent features\", t: \"5.8s\" },\n { ns: \"docs\", q: \"OpenAI function calling schema\", t: \"7.2s\" },\n];\n\nexport function Card4() {\n const namespaces = [\n { name: \"codebase\", hits: 342, fill: 88 },\n { name: \"docs\", hits: 218, fill: 56 },\n { name: \"slack\", hits: 97, fill: 25 },\n { name: \"notion\", hits: 54, fill: 14 },\n ];\n\n const [tick, setTick] = useState(0);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setTick((prev) => (prev + 1) % RETRIEVAL_QUERIES.length);\n }, 2000);\n return () => clearInterval(interval);\n }, []);\n\n const activeNs = RETRIEVAL_QUERIES[tick].ns;\n const recentQueries = [0, 1, 2, 3].map(\n (offset) => RETRIEVAL_QUERIES[(tick - offset + RETRIEVAL_QUERIES.length) % RETRIEVAL_QUERIES.length]\n );\n\n return (\n
\n\n {/* ── Left panel: Namespace bars ── */}\n
\n

Namespaces

\n\n
\n {namespaces.map((ns, i) => {\n const c = NS_COLORS[ns.name];\n const isActive = ns.name === activeNs;\n const Icon = (NS_ICONS[ns.name] || Database) as React.ComponentType<{ size?: number; weight?: string; className?: string }>;\n\n return (\n
\n\n {/* Icon Container with 3D effect */}\n \n \n
\n\n {/* Name */}\n \n {ns.name}\n \n\n {/* Cyberpunk Bar track */}\n
\n \n {/* Scanning light beam effect inside the bar */}\n {isActive && (\n \n )}\n \n
\n\n {/* Hit count */}\n
\n \n {ns.hits}\n \n {isActive && (\n \n )}\n
\n
\n );\n })}\n
\n\n {/* Live indicator */}\n
\n
\n \n
\n
\n Live retrieval active\n
\n
\n\n {/* Thin divider */}\n
\n\n {/* ── Right panel: Retrieval log ── */}\n
\n

Retrieval Log

\n\n
\n {recentQueries.map((q, qi) => {\n const c = NS_COLORS[q.ns];\n return (\n \n
\n \n {q.ns}\n \n {q.t}\n
\n

{q.q}

\n \n );\n })}\n
\n
\n\n
\n );\n}\n\n/* ─────────────────────────────────────────────\n Card5 – Tool Call Inspector\n───────────────────────────────────────────── */\nexport function Card5() {\n const tools = [\n { name: \"web_search\", calls: 14, icon: Globe, latency: \"280ms\", color: \"bg-gradient-to-b from-sky-400 to-sky-600\", borderColor: \"border-sky-600\" },\n { name: \"code_exec\", calls: 8, icon: TerminalWindow, latency: \"1.2s\", color: \"bg-gradient-to-b from-emerald-400 to-emerald-600\", borderColor: \"border-emerald-600\" },\n { name: \"file_read\", calls: 22, icon: FileText, latency: \"12ms\", color: \"bg-gradient-to-b from-amber-400 to-amber-600\", borderColor: \"border-amber-600\" },\n { name: \"vector_query\", calls: 31, icon: Brain, latency: \"95ms\", color: \"bg-gradient-to-b from-violet-400 to-violet-600\", borderColor: \"border-violet-600\" },\n ];\n\n return (\n
\n
\n {tools.map((t, i) => (\n \n {/* Top Row: 3D Icon + Calls */}\n
\n
\n \n
\n\n
\n {t.calls}\n Calls\n
\n
\n\n {/* Bottom Row: Name + Latency + Progress */}\n
\n
\n {t.name}\n {t.latency}\n
\n
\n \n
\n
\n \n ))}\n
\n
\n );\n}\n\n/* ─────────────────────────────────────────────\n Main Grid Component\n───────────────────────────────────────────── */\nconst CARDS = [\n {\n title: \"Agent Pipeline\",\n description: \"Visualise how tasks flow across your multi-agent graph in real time.\",\n visual: ,\n colSpan: \"lg:col-span-1\",\n height: \"h-[260px]\",\n },\n {\n title: \"Token Monitor\",\n description: \"Track LLM token usage and cost-per-run across every model call.\",\n visual: ,\n colSpan: \"lg:col-span-1\",\n height: \"h-[260px]\",\n },\n {\n title: \"Activity Feed\",\n description: \"Real-time logs of agent actions, tool calls, and memory retrievals.\",\n visual: ,\n colSpan: \"lg:col-span-1\",\n height: \"h-[260px]\",\n },\n {\n title: \"Knowledge Base\",\n description: \"Semantic search across documents, codebases, and conversations.\",\n visual: ,\n colSpan: \"lg:col-span-2\",\n height: \"h-[260px]\",\n },\n {\n title: \"Tool Inspector\",\n description: \"Monitor tool usage, latency, and success rates across all agents.\",\n visual: ,\n colSpan: \"lg:col-span-1\",\n height: \"h-[260px]\",\n }\n];\n\nexport interface AgentBentoGridProps {\n className?: string;\n}\n\nexport function AgentBentoGrid({ className }: AgentBentoGridProps) {\n return (\n
\n {CARDS.map((card, idx) => (\n \n {card.visual}\n \n ))}\n
\n );\n}\n\nexport default AgentBentoGrid;\n", "type": "registry:ui", "target": "components/ui/agent-bento-grid.tsx" } ] }