{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "neural-token-stream",
  "type": "registry:ui",
  "title": "Neural Token Stream",
  "description": "Interactive LLM token streaming visualizer with live probability heatmaps, reasoning chain display, and throughput telemetry.",
  "category": "ai",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/ai/neural-token-stream/neural-token-stream.tsx",
      "type": "registry:ui",
      "target": "components/ui/neural-token-stream.tsx",
      "content": "import React, { useState, useEffect, useRef } from 'react';\nimport { Brain, Cpu, Play, ArrowClockwise, CheckCircle, Lightning, CaretRight } from '@phosphor-icons/react';\n\nexport interface NeuralTokenStreamProps {\n  modelName?: string;\n  streamingSpeedMs?: number;\n  showProbabilities?: boolean;\n  className?: string;\n}\n\ninterface TokenData {\n  text: string;\n  prob: number; // 0 to 1\n  isReasoning?: boolean;\n}\n\nconst DEFAULT_TOKENS: TokenData[] = [\n  { text: \"Analyzing\", prob: 0.98, isReasoning: true },\n  { text: \" system\", prob: 0.96, isReasoning: true },\n  { text: \" constraints...\", prob: 0.92, isReasoning: true },\n  { text: \" Verified.\", prob: 0.99, isReasoning: true },\n  { text: \"The\", prob: 0.94 },\n  { text: \" optimal\", prob: 0.89 },\n  { text: \" distributed\", prob: 0.97 },\n  { text: \" cache\", prob: 0.95 },\n  { text: \" strategy\", prob: 0.92 },\n  { text: \" involves\", prob: 0.88 },\n  { text: \" dynamic\", prob: 0.93 },\n  { text: \" multi-region\", prob: 0.96 },\n  { text: \" read\", prob: 0.91 },\n  { text: \" replicas\", prob: 0.97 },\n  { text: \" with\", prob: 0.99 },\n  { text: \" Raft\", prob: 0.95 },\n  { text: \" consensus\", prob: 0.98 },\n  { text: \" for\", prob: 0.99 },\n  { text: \" atomic\", prob: 0.94 },\n  { text: \" writes.\", prob: 0.99 }\n];\n\nexport const NeuralTokenStream: React.FC<NeuralTokenStreamProps> = ({\n  modelName = \"Nexus-70B-MoE\",\n  streamingSpeedMs = 75,\n  showProbabilities = true,\n  className = \"\"\n}) => {\n  const [tokenIndex, setTokenIndex] = useState(0);\n  const [isGenerating, setIsGenerating] = useState(true);\n  const [selectedToken, setSelectedToken] = useState<TokenData | null>(null);\n  const timerRef = useRef<NodeJS.Timeout | null>(null);\n\n  useEffect(() => {\n    if (!isGenerating) return;\n\n    if (tokenIndex < DEFAULT_TOKENS.length) {\n      timerRef.current = setTimeout(() => {\n        setTokenIndex(prev => prev + 1);\n      }, streamingSpeedMs);\n    } else {\n      setIsGenerating(false);\n    }\n\n    return () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    };\n  }, [tokenIndex, isGenerating, streamingSpeedMs]);\n\n  const handleRestart = () => {\n    setTokenIndex(0);\n    setIsGenerating(true);\n    setSelectedToken(null);\n  };\n\n  const visibleTokens = DEFAULT_TOKENS.slice(0, tokenIndex);\n  const reasoningTokens = visibleTokens.filter(t => t.isReasoning);\n  const outputTokens = visibleTokens.filter(t => !t.isReasoning);\n  const currentToken = visibleTokens[visibleTokens.length - 1];\n\n  const getConfidenceColor = (prob: number) => {\n    if (prob >= 0.95) return 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20';\n    if (prob >= 0.90) return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/20';\n    return 'text-amber-400 bg-amber-500/10 border-amber-500/20';\n  };\n\n  return (\n    <div className={`w-full max-w-2xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white/95 dark:bg-[#07080d] p-6 shadow-2xl backdrop-blur-xl font-mono text-xs select-none ${className}`}>\n      {/* Header bar */}\n      <div className=\"flex flex-wrap items-center justify-between gap-4 pb-4 border-b border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-violet-500/10 border border-violet-500/20 text-violet-400\">\n            <Brain size={18} weight=\"bold\" />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <h3 className=\"font-bold text-zinc-900 dark:text-white text-sm\">{modelName}</h3>\n              <span className=\"px-2 py-0.5 rounded-full text-[9px] font-bold bg-violet-500/10 text-violet-400 border border-violet-500/20\">\n                MoE FP8\n              </span>\n            </div>\n            <span className=\"text-[11px] text-zinc-400\">Live Top-1 Logprob Tokenization</span>\n          </div>\n        </div>\n\n        <div className=\"flex items-center gap-2\">\n          <button\n            onClick={handleRestart}\n            className=\"flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-zinc-200 dark:border-white/10 bg-zinc-100 dark:bg-white/5 text-zinc-700 dark:text-zinc-200 hover:text-zinc-900 dark:hover:text-white transition-all cursor-pointer hover:scale-105 active:scale-95\"\n            title=\"Restart Token Stream\"\n          >\n            <ArrowClockwise size={13} weight=\"bold\" className={isGenerating ? \"animate-spin\" : \"\"} />\n            <span className=\"text-[11px]\">Replay</span>\n          </button>\n        </div>\n      </div>\n\n      {/* Real-time Telemetry Stats */}\n      <div className=\"grid grid-cols-2 sm:grid-cols-4 gap-2 my-4 p-3 rounded-2xl bg-zinc-100/50 dark:bg-white/[0.02] border border-zinc-200/60 dark:border-white/5 text-[11px]\">\n        <div>\n          <span className=\"text-zinc-400 block text-[10px]\">OUTPUT TOKENS</span>\n          <span className=\"font-bold text-zinc-900 dark:text-white\">{outputTokens.length} / 16</span>\n        </div>\n        <div>\n          <span className=\"text-zinc-400 block text-[10px]\">THROUGHPUT</span>\n          <span className=\"font-bold text-cyan-400\">{isGenerating ? '94.2 tok/s' : '0.0 tok/s'}</span>\n        </div>\n        <div>\n          <span className=\"text-zinc-400 block text-[10px]\">AVG LOGPROB</span>\n          <span className=\"font-bold text-emerald-400\">95.4%</span>\n        </div>\n        <div>\n          <span className=\"text-zinc-400 block text-[10px]\">TTFT</span>\n          <span className=\"font-bold text-violet-400\">18.2ms</span>\n        </div>\n      </div>\n\n      {/* Thinking / Reasoning Accordion */}\n      {reasoningTokens.length > 0 && (\n        <div className=\"mb-4 p-3 rounded-2xl bg-zinc-100/70 dark:bg-zinc-900/40 border border-zinc-200/60 dark:border-white/5\">\n          <div className=\"flex items-center gap-2 text-[10px] text-zinc-400 font-bold uppercase tracking-wider mb-1.5\">\n            <Cpu size={12} weight=\"bold\" className=\"text-violet-400\" />\n            <span>Reasoning Chain</span>\n          </div>\n          <div className=\"text-zinc-500 dark:text-zinc-400 text-xs italic\">\n            {reasoningTokens.map((t, idx) => (\n              <span key={idx} className=\"transition-opacity duration-150\">\n                {t.text}\n              </span>\n            ))}\n          </div>\n        </div>\n      )}\n\n      {/* Main Generated Content Viewport with interactive token inspector */}\n      <div className=\"p-4 rounded-2xl bg-zinc-50 dark:bg-black/50 border border-zinc-200/80 dark:border-white/10 min-h-[90px] leading-relaxed\">\n        {outputTokens.map((t, idx) => {\n          const isSelected = selectedToken?.text === t.text;\n          return (\n            <span\n              key={idx}\n              onClick={() => setSelectedToken(t)}\n              className={`inline-block px-1 py-0.5 rounded cursor-pointer transition-all duration-150 hover:bg-violet-500/20 hover:text-violet-300 ${\n                isSelected ? 'bg-violet-500/30 text-violet-300 ring-1 ring-violet-400' : 'text-zinc-800 dark:text-zinc-100'\n              }`}\n            >\n              {t.text}\n            </span>\n          );\n        })}\n\n        {/* Streaming Glow Caret */}\n        {isGenerating && (\n          <span className=\"inline-block w-2 h-4 ml-1 bg-cyan-400 animate-pulse rounded-xs shadow-[0_0_8px_rgba(6,182,212,0.8)] align-middle\" />\n        )}\n      </div>\n\n      {/* Token Inspector Drawer */}\n      {showProbabilities && selectedToken && (\n        <div className=\"mt-3 p-3 rounded-2xl bg-zinc-100/80 dark:bg-zinc-900/80 border border-zinc-200 dark:border-white/10 flex items-center justify-between text-[11px] animate-in fade-in duration-200\">\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-zinc-400\">Token:</span>\n            <code className=\"px-2 py-0.5 rounded bg-zinc-200 dark:bg-white/10 font-bold text-zinc-900 dark:text-white\">\n              \"{selectedToken.text}\"\n            </code>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"text-zinc-400\">Logprob Confidence:</span>\n            <span className={`px-2 py-0.5 rounded-full font-bold border ${getConfidenceColor(selectedToken.prob)}`}>\n              {(selectedToken.prob * 100).toFixed(1)}%\n            </span>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"
    }
  ]
}