{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "codex-working",
  "title": "Codex Working",
  "description": "Codex's Working line — a • bullet, grayscale shimmer on Working, and live elapsed/interrupt hint, as an aria-live status region.",
  "files": [
    {
      "path": "registry/brainless/codex/codex-working.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * CodexWorking — Codex's \"Working\" line.\n *\n * A static `•` bullet, the word Working with Codex's grayscale shimmer (a\n * bright band drifting left→right), and `(Ns • esc to interrupt)`. Polite\n * live region for screen readers.\n */\nconst BULLET = \"#a7a7a7\";\nconst DIM = \"#7a7a7a\";\nconst SHIMMER_DARK = \"#808080\";\nconst SHIMMER_LIGHT = \"#e7e7e7\";\n\nexport function CodexWorking({\n  running = true,\n  label = \"Working\",\n  className,\n}: {\n  running?: boolean;\n  label?: string;\n  className?: string;\n}) {\n  const prefersReduced = usePrefersReducedMotion();\n  const [secs, setSecs] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!running) return;\n    const id = setInterval(() => setSecs((s) => s + 1), 1000);\n    return () => clearInterval(id);\n  }, [running]);\n\n  if (!running) return null;\n\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      className={cn(\n        \"flex items-baseline gap-2 font-mono text-[13px] font-bold\",\n        className,\n      )}\n    >\n      <style>{`\n        .cx-working-shimmer {\n          background-image: linear-gradient(\n            90deg,\n            ${SHIMMER_DARK} 0%,\n            ${SHIMMER_DARK} 40%,\n            ${SHIMMER_LIGHT} 50%,\n            ${SHIMMER_DARK} 60%,\n            ${SHIMMER_DARK} 100%\n          );\n          /* 200% size + 100%→−100% travel = one clean period (no loop hitch) */\n          background-size: 200% 100%;\n          -webkit-background-clip: text;\n          background-clip: text;\n          color: transparent;\n          -webkit-text-fill-color: transparent;\n          animation: cx-working-shine 1.6s linear infinite;\n        }\n        @keyframes cx-working-shine {\n          from { background-position: 100% 0; }\n          to   { background-position: -100% 0; }\n        }\n        @media (prefers-reduced-motion: reduce) {\n          .cx-working-shimmer {\n            animation: none;\n            background-image: none;\n            color: ${SHIMMER_LIGHT};\n            -webkit-text-fill-color: ${SHIMMER_LIGHT};\n          }\n        }\n      `}</style>\n      <span aria-hidden style={{ color: BULLET }}>\n        •\n      </span>\n      <span\n        className={prefersReduced ? undefined : \"cx-working-shimmer\"}\n        style={prefersReduced ? { color: SHIMMER_LIGHT } : undefined}\n      >\n        {label}\n      </span>\n      <span className=\"font-normal\" style={{ color: DIM }}>\n        ({secs}s • esc to interrupt)\n      </span>\n    </div>\n  );\n}\n\nfunction usePrefersReducedMotion() {\n  const [reduced, setReduced] = React.useState(false);\n  React.useEffect(() => {\n    const mq = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n    setReduced(mq.matches);\n    const on = () => setReduced(mq.matches);\n    mq.addEventListener(\"change\", on);\n    return () => mq.removeEventListener(\"change\", on);\n  }, []);\n  return reduced;\n}\n",
      "type": "registry:ui",
      "target": "components/brainless/codex/codex-working.tsx"
    }
  ],
  "type": "registry:ui"
}