{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "terminal-diff-block",
  "type": "registry:ui",
  "title": "Terminal Diff Block",
  "description": "Ultra-crisp Git diff code viewer with split and unified view toggle, line addition/deletion badges, hunk headers, and clipboard copy.",
  "category": "sections",
  "dependencies": [
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/sections/terminal-diff-block/terminal-diff-block.tsx",
      "type": "registry:ui",
      "target": "components/ui/terminal-diff-block.tsx",
      "content": "import React, { useState } from 'react';\nimport { \n  GitDiff, \n  GitCommit, \n  GitBranch, \n  Copy, \n  Check, \n  FileCode,\n  Rows,\n  Columns\n} from '@phosphor-icons/react';\n\nexport interface DiffLine {\n  type: 'add' | 'del' | 'same' | 'hunk';\n  oldNum?: number;\n  newNum?: number;\n  content: string;\n}\n\nconst SAMPLE_DIFF: DiffLine[] = [\n  { type: 'hunk', content: '@@ -14,11 +14,15 @@ export function useStreamPipeline(prompt: string) {' },\n  { type: 'same', oldNum: 14, newNum: 14, content: '  const [status, setStatus] = useState<Status>(\"idle\");' },\n  { type: 'del', oldNum: 15, content: '- const res = await fetch(\"/api/generate\", { method: \"POST\", body: prompt });' },\n  { type: 'del', oldNum: 16, content: '- const json = await res.json();' },\n  { type: 'del', oldNum: 17, content: '- return json.result.trim();' },\n  { type: 'add', newNum: 15, content: '+ const stream = await agentRuntime.dispatchStream({' },\n  { type: 'add', newNum: 16, content: '+   model: \"claude-3-7-sonnet\",' },\n  { type: 'add', newNum: 17, content: '+   context: { speculativeTokens: 128 },' },\n  { type: 'add', newNum: 18, content: '+   temperature: 0.2,' },\n  { type: 'add', newNum: 19, content: '+ });' },\n  { type: 'same', oldNum: 18, newNum: 20, content: '  ' },\n  { type: 'same', oldNum: 19, newNum: 21, content: '  for await (const chunk of stream) {' },\n  { type: 'same', oldNum: 20, newNum: 22, content: '    yield parseIncrementalToken(chunk);' },\n  { type: 'same', oldNum: 21, newNum: 23, content: '  }' },\n];\n\nexport interface TerminalDiffBlockProps {\n  filePath?: string;\n  branch?: string;\n  commitHash?: string;\n  initialMode?: 'split' | 'unified';\n  className?: string;\n}\n\nexport const TerminalDiffBlock: React.FC<TerminalDiffBlockProps> = ({\n  filePath = 'src/hooks/use-agent-stream.ts',\n  branch = 'main',\n  commitHash = 'c7e49f2',\n  initialMode = 'unified',\n  className = '',\n}) => {\n  const [mode, setMode] = useState<'split' | 'unified'>(initialMode);\n  const [copied, setCopied] = useState(false);\n\n  const rawDiffText = SAMPLE_DIFF.map((d) => d.content).join('\\n');\n\n  const handleCopy = () => {\n    navigator.clipboard.writeText(rawDiffText);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  const additions = SAMPLE_DIFF.filter((l) => l.type === 'add').length;\n  const deletions = SAMPLE_DIFF.filter((l) => l.type === 'del').length;\n\n  return (\n    <div className={`w-full max-w-4xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-[#07080c] shadow-2xl overflow-hidden font-mono text-xs ${className}`}>\n      {/* Top Header Bar */}\n      <div className=\"flex flex-wrap items-center justify-between gap-3 border-b border-zinc-200/80 dark:border-white/10 px-5 py-3.5 bg-zinc-50 dark:bg-zinc-950/80\">\n        {/* Left: Dots & File metadata */}\n        <div className=\"flex items-center gap-3\">\n          <div className=\"flex items-center gap-1.5 mr-2\">\n            <span className=\"h-2.5 w-2.5 rounded-full bg-rose-500/80\" />\n            <span className=\"h-2.5 w-2.5 rounded-full bg-amber-500/80\" />\n            <span className=\"h-2.5 w-2.5 rounded-full bg-emerald-500/80\" />\n          </div>\n\n          <div className=\"flex items-center gap-2 text-zinc-900 dark:text-zinc-100 font-semibold truncate\">\n            <FileCode size={15} className=\"text-zinc-400 shrink-0\" />\n            <span className=\"truncate\">{filePath}</span>\n          </div>\n\n          <div className=\"hidden sm:flex items-center gap-1.5 text-[11px] text-zinc-500 dark:text-zinc-400\">\n            <span className=\"px-2 py-0.5 rounded-md bg-zinc-200/60 dark:bg-white/5 border border-zinc-300/60 dark:border-white/5 flex items-center gap-1\">\n              <GitBranch size={11} />\n              {branch}\n            </span>\n            <span className=\"px-2 py-0.5 rounded-md bg-zinc-200/60 dark:bg-white/5 border border-zinc-300/60 dark:border-white/5 flex items-center gap-1\">\n              <GitCommit size={11} />\n              {commitHash}\n            </span>\n          </div>\n        </div>\n\n        {/* Right: Stats, Mode switcher & Copy */}\n        <div className=\"flex items-center gap-3 ml-auto\">\n          {/* Changes badge */}\n          <div className=\"flex items-center gap-1.5 text-[11px] font-bold\">\n            <span className=\"text-emerald-500\">+{additions}</span>\n            <span className=\"text-rose-500\">-{deletions}</span>\n          </div>\n\n          {/* Mode Switcher */}\n          <div className=\"flex items-center rounded-xl bg-zinc-200/70 dark:bg-zinc-900 p-0.5 border border-zinc-300/60 dark:border-white/5\">\n            <button\n              onClick={() => setMode('unified')}\n              className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] uppercase font-bold transition-all cursor-pointer ${\n                mode === 'unified'\n                  ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-xs'\n                  : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'\n              }`}\n              title=\"Unified view\"\n            >\n              <Rows size={12} weight=\"bold\" />\n              <span className=\"hidden sm:inline\">Unified</span>\n            </button>\n            <button\n              onClick={() => setMode('split')}\n              className={`flex items-center gap-1 px-2.5 py-1 rounded-lg text-[10px] uppercase font-bold transition-all cursor-pointer ${\n                mode === 'split'\n                  ? 'bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white shadow-xs'\n                  : 'text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-300'\n              }`}\n              title=\"Split side-by-side view\"\n            >\n              <Columns size={12} weight=\"bold\" />\n              <span className=\"hidden sm:inline\">Split</span>\n            </button>\n          </div>\n\n          {/* Copy Patch */}\n          <button\n            onClick={handleCopy}\n            className=\"flex items-center gap-1 rounded-xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-2.5 py-1 text-[11px] font-semibold text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer\"\n            title=\"Copy diff patch\"\n          >\n            {copied ? <Check size={12} className=\"text-emerald-500\" /> : <Copy size={12} />}\n            <span>{copied ? 'Copied' : 'Diff'}</span>\n          </button>\n        </div>\n      </div>\n\n      {/* Code Diff Body */}\n      <div className=\"overflow-x-auto overflow-y-visible text-[11.5px] leading-relaxed p-2 sm:p-3 bg-zinc-50/50 dark:bg-transparent\">\n        {mode === 'unified' ? (\n          <div className=\"space-y-[1px] min-w-[500px]\">\n            {SAMPLE_DIFF.map((line, i) => {\n              if (line.type === 'hunk') {\n                return (\n                  <div key={i} className=\"px-3 py-1 bg-indigo-500/10 text-indigo-500 dark:text-indigo-400 font-semibold rounded-md my-1 text-[11px]\">\n                    {line.content}\n                  </div>\n                );\n              }\n\n              const isAdd = line.type === 'add';\n              const isDel = line.type === 'del';\n\n              return (\n                <div\n                  key={i}\n                  className={`flex items-center px-2 py-0.5 rounded-md font-mono ${\n                    isAdd\n                      ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'\n                      : isDel\n                      ? 'bg-rose-500/10 text-rose-700 dark:text-rose-300'\n                      : 'text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-white/5'\n                  }`}\n                >\n                  {/* Old line number */}\n                  <span className=\"w-9 shrink-0 text-right pr-2 text-zinc-400 select-none\">\n                    {line.oldNum ?? ''}\n                  </span>\n                  {/* New line number */}\n                  <span className=\"w-9 shrink-0 text-right pr-3 text-zinc-400 select-none\">\n                    {line.newNum ?? ''}\n                  </span>\n                  {/* Sign */}\n                  <span className=\"w-4 shrink-0 font-bold select-none\">\n                    {isAdd ? '+' : isDel ? '-' : ' '}\n                  </span>\n                  {/* Content */}\n                  <span className=\"whitespace-pre flex-1 truncate\">{line.content.replace(/^[+-]\\s?/, '')}</span>\n                </div>\n              );\n            })}\n          </div>\n        ) : (\n          /* Split View Mode */\n          <div className=\"grid grid-cols-2 gap-2 min-w-[640px]\">\n            {/* Left Panel (Old / Removed) */}\n            <div className=\"rounded-xl border border-zinc-200 dark:border-white/5 bg-white dark:bg-zinc-950 p-2 space-y-1\">\n              <div className=\"text-[10px] font-bold text-rose-500 pb-1 border-b border-zinc-100 dark:border-white/5 uppercase\">\n                Original Revision\n              </div>\n              {SAMPLE_DIFF.filter((l) => l.type !== 'add').map((line, i) => (\n                <div\n                  key={i}\n                  className={`flex items-center px-2 py-0.5 rounded font-mono ${\n                    line.type === 'del'\n                      ? 'bg-rose-500/10 text-rose-700 dark:text-rose-300'\n                      : line.type === 'hunk'\n                      ? 'text-indigo-400 text-[10px]'\n                      : 'text-zinc-600 dark:text-zinc-400'\n                  }`}\n                >\n                  <span className=\"w-7 shrink-0 text-zinc-400 select-none text-[10px]\">\n                    {line.oldNum ?? ''}\n                  </span>\n                  <span className=\"whitespace-pre truncate\">{line.content}</span>\n                </div>\n              ))}\n            </div>\n\n            {/* Right Panel (New / Added) */}\n            <div className=\"rounded-xl border border-zinc-200 dark:border-white/5 bg-white dark:bg-zinc-950 p-2 space-y-1\">\n              <div className=\"text-[10px] font-bold text-emerald-500 pb-1 border-b border-zinc-100 dark:border-white/5 uppercase\">\n                Incoming Patch\n              </div>\n              {SAMPLE_DIFF.filter((l) => l.type !== 'del').map((line, i) => (\n                <div\n                  key={i}\n                  className={`flex items-center px-2 py-0.5 rounded font-mono ${\n                    line.type === 'add'\n                      ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300'\n                      : line.type === 'hunk'\n                      ? 'text-indigo-400 text-[10px]'\n                      : 'text-zinc-600 dark:text-zinc-400'\n                  }`}\n                >\n                  <span className=\"w-7 shrink-0 text-zinc-400 select-none text-[10px]\">\n                    {line.newNum ?? ''}\n                  </span>\n                  <span className=\"whitespace-pre truncate\">{line.content}</span>\n                </div>\n              ))}\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}