{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-context-usage",
  "type": "registry:component",
  "title": "Elements Context Usage",
  "description": "Shared usage colors and segment labels for context displays.",
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/utils/context-usage.ts",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/utils/context-usage.ts",
      "content": "export type TokenUsage = {\n  totalTokens?: number | undefined;\n  inputTokens?: number | undefined;\n  cachedInputTokens?: number | undefined;\n  outputTokens?: number | undefined;\n  reasoningTokens?: number | undefined;\n};\n\nexport const getUsagePercent = (\n  totalTokens: number | undefined,\n  modelContextWindow: number,\n): number => {\n  if (!totalTokens) return 0;\n  return Math.min((totalTokens / modelContextWindow) * 100, 100);\n};\n\ntype UsageSeverity = \"normal\" | \"warning\" | \"critical\";\n\nconst getUsageSeverity = (percent: number): UsageSeverity => {\n  if (percent > 85) return \"critical\";\n  if (percent >= 65) return \"warning\";\n  return \"normal\";\n};\n\nexport const getStrokeColor = (percent: number): string => {\n  const severity = getUsageSeverity(percent);\n  if (severity === \"critical\") return \"stroke-red-500\";\n  if (severity === \"warning\") return \"stroke-amber-500\";\n  return \"stroke-foreground\";\n};\n\nexport const getBarColor = (percent: number): string => {\n  const severity = getUsageSeverity(percent);\n  if (severity === \"critical\") return \"bg-red-500\";\n  if (severity === \"warning\") return \"bg-amber-500\";\n  return \"bg-foreground\";\n};\n\nexport const getPercentColor = (percent: number): string => {\n  const severity = getUsageSeverity(percent);\n  if (severity === \"critical\") return \"text-red-500\";\n  if (severity === \"warning\") return \"text-amber-500\";\n  return \"text-muted-foreground\";\n};\n\ntype ContextSegment = {\n  label: string;\n  tokens: number;\n};\n\n// Whether a provider counts cached tokens inside inputTokens, or reasoning\n// inside outputTokens, differs by provider: OpenAI reports cached_tokens as a\n// subset of prompt_tokens, while Anthropic documents input_tokens as excluding\n// cache_read_input_tokens. Nothing in the usage contract says which is in hand,\n// so these are reported as the counts they are and none of them is given a\n// share of the bar, which stays the one reading that always holds: the\n// provider's own total against the window.\nexport const getContextSegments = (\n  usage: TokenUsage | undefined,\n): ContextSegment[] => {\n  if (!usage) return [];\n  return [\n    { label: \"Input\", tokens: usage.inputTokens ?? 0 },\n    { label: \"Cached input\", tokens: usage.cachedInputTokens ?? 0 },\n    { label: \"Output\", tokens: usage.outputTokens ?? 0 },\n    { label: \"Reasoning\", tokens: usage.reasoningTokens ?? 0 },\n  ].filter((segment) => segment.tokens > 0);\n};\n"
    }
  ]
}