{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "compute-status",
  "title": "ComputeStatus",
  "description": "Compact compute readout: lifecycle state (active/idle/scaling/suspended), autoscaling CU size, and scale-to-zero, in the house status vocabulary.",
  "registryDependencies": [
    "utils",
    "https://ui.neon.com/r/skeleton.json",
    "https://ui.neon.com/r/neon-tokens.json"
  ],
  "files": [
    {
      "path": "src/components/compute-status/compute-status.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\n\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\n\n/** Compute lifecycle. `active`/`scaling` are alive and breathe; `idle`/`suspended` hold steady. */\nexport type ComputeState = \"active\" | \"idle\" | \"scaling\" | \"suspended\";\n\ninterface ComputeStateConfig {\n  /** Dot classes: alive states use `neon-status-breathe` + a token text color. */\n  dot: string;\n  label: string;\n}\n\n/* ─────────────────────────────────────────────────────────\n * COMPUTE READOUT\n *\n *  A calm mono line: a square status dot, the state word,\n *  then the compute size and the scale-to-zero readout,\n *  each fenced off by a hairline. Color lives only in the\n *  dot, from the house status vocabulary — active green,\n *  scaling amber, sleeping gray. The two alive states\n *  (active, scaling) breathe on the shared 2.6s cadence and\n *  hold steady under reduced motion; idle and suspended sit\n *  still, and suspended dims the whole line because the\n *  compute is off.\n * ───────────────────────────────────────────────────────── */\nconst STATE: Record<ComputeState, ComputeStateConfig> = {\n  active: {\n    dot: \"neon-status-breathe bg-current text-[var(--status-active)]\",\n    label: \"active\",\n  },\n  idle: {\n    dot: \"bg-[var(--status-active)]\",\n    label: \"idle\",\n  },\n  scaling: {\n    dot: \"neon-status-breathe bg-current text-[var(--status-scaling)]\",\n    label: \"scaling\",\n  },\n  suspended: {\n    dot: \"bg-[var(--status-sleeping)]\",\n    label: \"suspended\",\n  },\n};\n\n// A range renders with an en dash (\\u2013), e.g. 0.25–2 CU.\nconst formatCu = (cu: number | [number, number]) =>\n  Array.isArray(cu) ? `${cu[0]}\\u2013${cu[1]} CU` : `${cu} CU`;\n\nconst Fence = () => (\n  <span aria-hidden=\"true\" className=\"h-3 w-px shrink-0 bg-border/60\" />\n);\n\nexport type ComputeStatusProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  /** Current compute lifecycle state. */\n  state: ComputeState;\n  /** Compute size in CU: a single value (\"1.5 CU\") or an autoscaling range. */\n  cu?: number | [number, number];\n  /**\n   * Scale-to-zero readout, already phrased for context, e.g.\n   * \"scales to zero after 5m\" or \"suspended 2h ago\". Omit to hide.\n   */\n  scaleToZero?: string;\n  /** Override the state's default word. */\n  label?: string;\n  /** \"inline\" is a naked row; \"panel\" wraps it in the house surface. */\n  variant?: \"inline\" | \"panel\";\n  isLoading?: boolean;\n};\n\nconst rowClassName = \"inline-flex items-center gap-2.5 font-mono text-xs\";\nconst panelClassName = \"rounded-lg border border-border/60 bg-card px-3 py-2\";\n\nexport const ComputeStatus = ({\n  state,\n  cu,\n  scaleToZero,\n  label,\n  variant = \"inline\",\n  isLoading = false,\n  className,\n  ...props\n}: ComputeStatusProps) => {\n  if (isLoading) {\n    return (\n      <div\n        aria-busy=\"true\"\n        aria-label=\"Loading compute status\"\n        className={cn(\n          rowClassName,\n          variant === \"panel\" && panelClassName,\n          className\n        )}\n        data-slot=\"compute-status\"\n        {...props}\n      >\n        <Skeleton aria-hidden=\"true\" className=\"size-1.5\" />\n        <Skeleton aria-hidden=\"true\" className=\"h-3 w-14\" />\n        <Fence />\n        <Skeleton aria-hidden=\"true\" className=\"h-3 w-16\" />\n      </div>\n    );\n  }\n\n  const config = STATE[state];\n  const cuText = cu === undefined ? null : formatCu(cu);\n\n  return (\n    <div\n      className={cn(\n        rowClassName,\n        state === \"suspended\" && \"opacity-80\",\n        variant === \"panel\" && panelClassName,\n        className\n      )}\n      data-slot=\"compute-status\"\n      data-state={state}\n      {...props}\n    >\n      <span className=\"inline-flex items-center gap-1.5\">\n        <span\n          aria-hidden=\"true\"\n          className={cn(\"size-1.5 shrink-0\", config.dot)}\n        />\n        <span className=\"text-muted-foreground\">{label ?? config.label}</span>\n      </span>\n\n      {cuText ? (\n        <>\n          <Fence />\n          <span className=\"text-muted-foreground tabular-nums\">{cuText}</span>\n        </>\n      ) : null}\n\n      {scaleToZero ? (\n        <>\n          <Fence />\n          <span className=\"truncate text-muted-foreground/70\">\n            {scaleToZero}\n          </span>\n        </>\n      ) : null}\n    </div>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}