{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grok-working",
  "title": "Grok Working",
  "description": "In-turn status line — Waiting for response… with elapsed, ⇣token count, and [stop].",
  "files": [
    {
      "path": "registry/brainless/grok/grok-working.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * GrokWorking — Grok's in-turn status line (not the idle braille spinner).\n *\n * Captured grammar (v0.2.93):\n *   `⠹ Waiting for response… 0.1s          1.5s ⇣16.6k [stop]`\n *   `◆ Write permission probe… 1m17s       1m19s ⇣16.0k [↓][stop]`\n */\nconst FRAMES = [\"⠋\", \"⠙\", \"⠹\", \"⠸\", \"⠼\", \"⠴\", \"⠦\", \"⠧\", \"⠇\", \"⠏\"];\nconst FG = \"#ffffff\"; // 38;5;15 — spinner + label\nconst MUTED = \"#c0c0c0\"; // 38;5;7 — elapsed / tokens\nconst DIM = \"#808080\";\nconst GREEN = \"#00ff00\"; // active tool ◆ line\n\nfunction formatElapsed(secs: number) {\n  if (secs < 60) return `${secs.toFixed(secs < 10 ? 1 : 0)}s`;\n  const m = Math.floor(secs / 60);\n  const s = Math.round(secs % 60);\n  return `${m}m${String(s).padStart(2, \"0\")}s`;\n}\n\nexport function GrokWorking({\n  label = \"Waiting for response…\",\n  tokens = \"16.6k\",\n  running = true,\n  diamond = false,\n  showScrollHint = false,\n  className,\n}: {\n  label?: string;\n  tokens?: string;\n  running?: boolean;\n  /** Use ◆ instead of the braille spinner (active tool line). */\n  diamond?: boolean;\n  showScrollHint?: boolean;\n  className?: string;\n}) {\n  const [f, setF] = React.useState(0);\n  const [secs, setSecs] = React.useState(0.1);\n\n  React.useEffect(() => {\n    if (!running) return;\n    const id = setInterval(() => setF((n) => (n + 1) % FRAMES.length), 90);\n    return () => clearInterval(id);\n  }, [running]);\n\n  React.useEffect(() => {\n    if (!running) return;\n    const id = setInterval(() => setSecs((s) => s + 0.1), 100);\n    return () => clearInterval(id);\n  }, [running]);\n\n  if (!running) return null;\n\n  const elapsed = formatElapsed(secs);\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 font-mono text-[13px]\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-baseline gap-2\">\n        <span\n          aria-hidden\n          className=\"inline-block w-[2ch] shrink-0\"\n          style={{ color: diamond ? GREEN : FG }}\n        >\n          {diamond ? \"◆\" : FRAMES[f]}\n        </span>\n        <span style={{ color: diamond ? MUTED : FG }}>{label}</span>\n        <span style={{ color: MUTED }}>{elapsed}</span>\n      </div>\n\n      <div className=\"shrink-0 tabular-nums\" style={{ color: MUTED }}>\n        <span>{elapsed}</span>\n        <span style={{ color: DIM }}> </span>\n        <span aria-hidden>⇣</span>\n        {tokens}\n        <span style={{ color: DIM }}> </span>\n        {showScrollHint ? (\n          <span style={{ color: DIM }}>\n            [<span style={{ color: FG }}>↓</span>]\n          </span>\n        ) : null}\n        <span style={{ color: DIM }}>\n          [<span style={{ color: FG }}>stop</span>]\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/grok/grok-working.tsx"
    }
  ],
  "type": "registry:ui"
}