{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "routing-indicator",
  "title": "AI Routing Indicator",
  "description": "Visualize real-time message routing with pattern matching highlights, target agent display, confidence scores, and animated routing states for multi-agent systems.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/blocks/ai/ai-routing-indicator/components/elements/ai-routing-indicator.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport {\n  ArrowRight,\n  Bot,\n  CircleDashed,\n  Route,\n  Sparkles,\n  Zap,\n} from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface AiRoutingIndicatorProps {\n  input: string;\n  matchedPattern?: string;\n  targetAgent?: string;\n  confidence?: number;\n  isRouting?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiRoutingIndicator({\n  input,\n  matchedPattern,\n  targetAgent,\n  confidence,\n  isRouting = false,\n  children,\n  className,\n}: AiRoutingIndicatorProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-indicator\"\n      data-routing={isRouting}\n      className={cn(\n        \"rounded-lg border bg-card text-card-foreground overflow-hidden transition-all\",\n        isRouting\n          ? \"border-indigo-300 dark:border-indigo-800 shadow-lg shadow-indigo-100 dark:shadow-indigo-950/50\"\n          : \"border-border\",\n        className,\n      )}\n    >\n      {children || (\n        <>\n          <AiRoutingIndicatorHeader isRouting={isRouting} />\n          <AiRoutingIndicatorContent\n            input={input}\n            matchedPattern={matchedPattern}\n            targetAgent={targetAgent}\n            confidence={confidence}\n            isRouting={isRouting}\n          />\n        </>\n      )}\n    </div>\n  );\n}\n\ninterface AiRoutingIndicatorHeaderProps {\n  isRouting?: boolean;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiRoutingIndicatorHeader({\n  isRouting,\n  children,\n  className,\n}: AiRoutingIndicatorHeaderProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-indicator-header\"\n      className={cn(\n        \"flex items-center gap-2 border-b px-4 py-3 transition-colors\",\n        isRouting\n          ? \"border-indigo-200 dark:border-indigo-900\"\n          : \"border-border\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"flex size-8 shrink-0 items-center justify-center rounded-md transition-colors\",\n          isRouting ? \"bg-indigo-100 dark:bg-indigo-950\" : \"bg-muted\",\n        )}\n      >\n        {isRouting ? (\n          <Sparkles className=\"size-4 text-indigo-600 dark:text-indigo-400 animate-pulse\" />\n        ) : (\n          <Route className=\"size-4 text-muted-foreground\" />\n        )}\n      </div>\n      <div className=\"flex-1\">\n        <h3\n          className={cn(\n            \"font-semibold text-sm\",\n            isRouting && \"text-indigo-700 dark:text-indigo-300\",\n          )}\n        >\n          {children || \"Message Routing\"}\n          {isRouting && (\n            <span className=\"ml-2 inline-flex items-center gap-1 rounded-full bg-indigo-100 dark:bg-indigo-950 px-2 py-0.5 text-xs font-medium text-indigo-700 dark:text-indigo-300\">\n              Routing...\n            </span>\n          )}\n        </h3>\n      </div>\n    </div>\n  );\n}\n\ninterface AiRoutingIndicatorContentProps {\n  input: string;\n  matchedPattern?: string;\n  targetAgent?: string;\n  confidence?: number;\n  isRouting?: boolean;\n  className?: string;\n}\n\nfunction AiRoutingIndicatorContent({\n  input,\n  matchedPattern,\n  targetAgent,\n  confidence,\n  isRouting,\n  className,\n}: AiRoutingIndicatorContentProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-indicator-content\"\n      className={cn(\n        \"p-4 space-y-4 relative\",\n        isRouting && \"overflow-hidden\",\n        className,\n      )}\n    >\n      {isRouting && (\n        <div className=\"pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent via-indigo-100/50 dark:via-indigo-900/30 to-transparent animate-shimmer\" />\n      )}\n      <AiRoutingInput input={input} matchedPattern={matchedPattern} />\n      {(matchedPattern || targetAgent || isRouting) && (\n        <AiRoutingFlow\n          matchedPattern={matchedPattern}\n          targetAgent={targetAgent}\n          confidence={confidence}\n          isRouting={isRouting}\n        />\n      )}\n    </div>\n  );\n}\n\ninterface AiRoutingInputProps {\n  input: string;\n  matchedPattern?: string;\n  className?: string;\n}\n\nfunction AiRoutingInput({\n  input,\n  matchedPattern,\n  className,\n}: AiRoutingInputProps) {\n  const highlightedText = React.useMemo(() => {\n    if (!matchedPattern || !input) return null;\n\n    try {\n      const regex = new RegExp(`(${matchedPattern})`, \"gi\");\n      const parts = input.split(regex);\n\n      return parts.map((part, index) => {\n        const isMatch = regex.test(part);\n        regex.lastIndex = 0;\n        return isMatch ? (\n          <mark\n            key={index}\n            className=\"bg-indigo-200 dark:bg-indigo-900 text-indigo-900 dark:text-indigo-100 rounded px-0.5\"\n          >\n            {part}\n          </mark>\n        ) : (\n          <span key={index}>{part}</span>\n        );\n      });\n    } catch {\n      return null;\n    }\n  }, [input, matchedPattern]);\n\n  return (\n    <div data-slot=\"ai-routing-input\" className={cn(\"space-y-1.5\", className)}>\n      <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n        Input\n      </span>\n      <div className=\"rounded-md bg-muted/50 p-3 text-sm\">\n        {highlightedText || input}\n      </div>\n    </div>\n  );\n}\n\ninterface AiRoutingFlowProps {\n  matchedPattern?: string;\n  targetAgent?: string;\n  confidence?: number;\n  isRouting?: boolean;\n  className?: string;\n}\n\nfunction AiRoutingFlow({\n  matchedPattern,\n  targetAgent,\n  confidence,\n  isRouting,\n  className,\n}: AiRoutingFlowProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-flow\"\n      className={cn(\"flex items-center gap-3\", className)}\n    >\n      {matchedPattern && (\n        <div className=\"flex-1 min-w-0\">\n          <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider block mb-1.5\">\n            Pattern\n          </span>\n          <div className=\"inline-flex items-center gap-1.5 rounded-md bg-amber-100 dark:bg-amber-950 px-2.5 py-1.5 text-xs font-mono text-amber-700 dark:text-amber-300\">\n            <Zap className=\"size-3\" />\n            {matchedPattern}\n          </div>\n        </div>\n      )}\n\n      {(matchedPattern || isRouting) && (targetAgent || isRouting) && (\n        <div className=\"flex items-center justify-center py-4\">\n          <div\n            className={cn(\n              \"relative flex items-center\",\n              isRouting && \"animate-pulse\",\n            )}\n          >\n            <div\n              className={cn(\n                \"h-0.5 w-8 rounded-full\",\n                isRouting\n                  ? \"bg-indigo-400 dark:bg-indigo-600\"\n                  : \"bg-muted-foreground/30\",\n              )}\n            />\n            <ArrowRight\n              className={cn(\n                \"size-4 -ml-1\",\n                isRouting\n                  ? \"text-indigo-500 dark:text-indigo-400\"\n                  : \"text-muted-foreground/50\",\n              )}\n            />\n          </div>\n        </div>\n      )}\n\n      {(targetAgent || isRouting) && (\n        <div className=\"flex-1 min-w-0\">\n          <span className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider block mb-1.5\">\n            Target Agent\n          </span>\n          {isRouting && !targetAgent ? (\n            <div className=\"inline-flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1.5 text-xs font-medium text-muted-foreground\">\n              <CircleDashed className=\"size-3.5 animate-spin\" />\n              Determining...\n            </div>\n          ) : (\n            <div className=\"inline-flex items-center gap-1.5 rounded-md bg-green-100 dark:bg-green-950 px-2.5 py-1.5 text-xs font-medium text-green-700 dark:text-green-300\">\n              <Bot className=\"size-3.5\" />\n              {targetAgent}\n              {confidence !== undefined && (\n                <span className=\"ml-1 rounded bg-green-200 dark:bg-green-900 px-1 py-0.5 text-[10px] font-mono\">\n                  {Math.round(confidence * 100)}%\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\ninterface AiRoutingIndicatorEmptyProps {\n  children?: React.ReactNode;\n  className?: string;\n}\n\nfunction AiRoutingIndicatorEmpty({\n  children,\n  className,\n}: AiRoutingIndicatorEmptyProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-indicator-empty\"\n      className={cn(\n        \"flex flex-col items-center justify-center py-8 text-center\",\n        className,\n      )}\n    >\n      <div className=\"flex size-12 items-center justify-center rounded-full bg-muted mb-3\">\n        <Route className=\"size-6 text-muted-foreground\" />\n      </div>\n      <p className=\"text-sm text-muted-foreground\">\n        {children || \"No routing information\"}\n      </p>\n    </div>\n  );\n}\n\ninterface AiRoutingMatchProps {\n  pattern: string;\n  text: string;\n  className?: string;\n}\n\nfunction AiRoutingMatch({ pattern, text, className }: AiRoutingMatchProps) {\n  return (\n    <div\n      data-slot=\"ai-routing-match\"\n      className={cn(\n        \"flex items-center gap-2 rounded-md bg-muted/50 px-2.5 py-1.5 text-xs\",\n        className,\n      )}\n    >\n      <span className=\"font-mono text-amber-600 dark:text-amber-400\">\n        {pattern}\n      </span>\n      <ArrowRight className=\"size-3 text-muted-foreground\" />\n      <span className=\"text-muted-foreground\">{text}</span>\n    </div>\n  );\n}\n\nexport {\n  AiRoutingIndicator,\n  AiRoutingIndicatorHeader,\n  AiRoutingIndicatorContent,\n  AiRoutingInput,\n  AiRoutingFlow,\n  AiRoutingIndicatorEmpty,\n  AiRoutingMatch,\n};\nexport type { AiRoutingIndicatorProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Compound component for routing visualization. Sub-components: AiRoutingIndicator, AiRoutingIndicatorHeader, AiRoutingIndicatorContent, AiRoutingInput, AiRoutingFlow, AiRoutingIndicatorEmpty, AiRoutingMatch. Supports animated routing state.",
  "categories": [
    "ai"
  ],
  "type": "registry:ui"
}