{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "model-token-cost-optimizer",
  "title": "Model Token Cost Optimizer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/model-token-cost-optimizer/ModelTokenCostOptimizer.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  ArrowRightLeft,\n  BrainCircuit,\n  CheckCircle2,\n  Coins,\n  Download,\n  Gauge,\n  Layers,\n  Route,\n  SlidersHorizontal,\n  Sparkles,\n  TrendingDown,\n  Zap,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Switch } from '@/components/ui/switch'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface ModelTokenCostOptimizerProps {\n  className?: string\n}\n\ninterface ModelAllocation {\n  id: string\n  name: string\n  provider: string\n  providerTag: string\n  sharePercent: number\n  inputTokens: string\n  outputTokens: string\n  totalTokens: string\n  totalCost: string\n  reroutesHandled: number\n  avgLatency: string\n  role: string\n  status: 'optimal' | 'active'\n}\n\nconst models: ModelAllocation[] = [\n  {\n    id: 'claude-3-5-sonnet',\n    name: 'Claude 3.5 Sonnet',\n    provider: 'Anthropic',\n    providerTag: 'Anthropic Direct',\n    sharePercent: 45,\n    inputTokens: '24.2M',\n    outputTokens: '4.1M',\n    totalTokens: '28.3M',\n    totalCost: '$1,824.20',\n    reroutesHandled: 142,\n    avgLatency: '680ms',\n    role: 'Complex Reasoning & System Arch',\n    status: 'optimal',\n  },\n  {\n    id: 'gpt-4o',\n    name: 'GPT-4o',\n    provider: 'OpenAI',\n    providerTag: 'OpenAI Tier-5',\n    sharePercent: 30,\n    inputTokens: '12.5M',\n    outputTokens: '2.6M',\n    totalTokens: '15.1M',\n    totalCost: '$1,080.50',\n    reroutesHandled: 64,\n    avgLatency: '540ms',\n    role: 'Multi-Modal & Structured Schema',\n    status: 'active',\n  },\n  {\n    id: 'llama-3-3-70b',\n    name: 'Llama 3.3 70B',\n    provider: 'Groq',\n    providerTag: 'Groq LPU Inference',\n    sharePercent: 15,\n    inputTokens: '4.1M',\n    outputTokens: '1.2M',\n    totalTokens: '5.3M',\n    totalCost: '$195.40',\n    reroutesHandled: 8,\n    avgLatency: '190ms',\n    role: 'High-Throughput Transformation',\n    status: 'optimal',\n  },\n  {\n    id: 'gpt-4o-mini',\n    name: 'GPT-4o-mini',\n    provider: 'OpenAI',\n    providerTag: 'OpenAI Direct',\n    sharePercent: 10,\n    inputTokens: '2.0M',\n    outputTokens: '0.5M',\n    totalTokens: '2.5M',\n    totalCost: '$320.40',\n    reroutesHandled: 12,\n    avgLatency: '240ms',\n    role: 'Intent Classification & Tagging',\n    status: 'active',\n  },\n]\n\ninterface CacheSegment {\n  name: string\n  type: 'exact' | 'semantic' | 'origin'\n  share: number\n  requests: string\n  tokensSpared: string\n  costSaved: string\n  latency: string\n  color: string\n  badgeVariant: 'success' | 'info' | 'outline'\n  description: string\n}\n\nconst cacheSegments: CacheSegment[] = [\n  {\n    name: 'Exact Cache',\n    type: 'exact',\n    share: 24.0,\n    requests: '184.2K reqs (24.0%)',\n    tokensSpared: '18.2M tokens',\n    costSaved: '$2,136.00 saved',\n    latency: '12ms p50',\n    color: 'bg-success',\n    badgeVariant: 'success',\n    description: 'Deterministic SHA-256 hit on normalized system prompt and user parameters.',\n  },\n  {\n    name: 'Semantic Vector Cache',\n    type: 'semantic',\n    share: 18.8,\n    requests: '144.3K reqs (18.8%)',\n    tokensSpared: '14.3M tokens',\n    costSaved: '$1,676.00 saved',\n    latency: '28ms p50',\n    color: 'bg-info',\n    badgeVariant: 'info',\n    description: 'Vector similarity cache match with cosine threshold ≥ 0.88 via Qdrant/Redis.',\n  },\n  {\n    name: 'Origin Model Calls',\n    type: 'origin',\n    share: 57.2,\n    requests: '439.0K reqs (57.2%)',\n    tokensSpared: '0 (billed)',\n    costSaved: '$3,420.50 spent',\n    latency: '840ms p99',\n    color: 'bg-muted-foreground/30 dark:bg-muted-foreground/20',\n    badgeVariant: 'outline',\n    description: 'Forwarded to upstream LLMs via smart model routing with fallback circuit protection.',\n  },\n]\n\nexport function ModelTokenCostOptimizer({ className }: ModelTokenCostOptimizerProps) {\n  const [timeframe, setTimeframe] = React.useState('aug-2026')\n  const [providerFilter, setProviderFilter] = React.useState('all')\n\n  // Active optimization rule toggles\n  const [promptCompressionEnabled, setPromptCompressionEnabled] = React.useState(true)\n  const [smallModelRoutingEnabled, setSmallModelRoutingEnabled] = React.useState(true)\n  const [semanticCachingEnabled, setSemanticCachingEnabled] = React.useState(true)\n  const [circuitBreakerEnabled, setCircuitBreakerEnabled] = React.useState(true)\n\n  const filteredModels = React.useMemo(() => {\n    if (providerFilter === 'all') return models\n    return models.filter((m) => m.provider.toLowerCase().includes(providerFilter.toLowerCase()))\n  }, [providerFilter])\n\n  return (\n    <div data-slot=\"model-token-cost-optimizer\" className={cn('mx-auto w-full max-w-6xl space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n        <div className=\"space-y-1\">\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <h1 className=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n              AI Gateway & Token Cost Optimizer\n            </h1>\n            <Badge\n              wrap\n              variant=\"outline\"\n              className=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\"\n            >\n              <span className=\"bg-success size-1.5 animate-pulse rounded-full\" aria-hidden=\"true\" />\n              <span>Routing Active · 99.99% Availability</span>\n            </Badge>\n          </div>\n          <p className=\"text-muted-foreground text-sm\">\n            Helicone & Portkey style gateway telemetry, semantic caching hit rates, model routing savings, and latency\n            metrics.\n          </p>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2.5\">\n          <Select value={timeframe} onValueChange={setTimeframe}>\n            <SelectTrigger className=\"w-full text-xs font-medium sm:w-52\" aria-label=\"Select timeframe\">\n              <SelectValue placeholder=\"Select timeframe\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"aug-2026\">This Month · August 2026</SelectItem>\n              <SelectItem value=\"jul-2026\">Last Month · July 2026</SelectItem>\n              <SelectItem value=\"q2-2026\">Q2 2026 Summary</SelectItem>\n              <SelectItem value=\"ytd-2026\">Year to Date 2026</SelectItem>\n            </SelectContent>\n          </Select>\n\n          <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs\">\n            <Download className=\"text-muted-foreground size-3.5\" />\n            <span>Export Token Logs</span>\n          </Button>\n\n          <Button size=\"sm\" className=\"gap-1.5 text-xs\">\n            <SlidersHorizontal className=\"size-3.5\" />\n            <span>Configure Routing Rules</span>\n          </Button>\n        </div>\n      </div>\n\n      {/* 4 Gateway Performance KPI Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* KPI 1: Total Token Spend */}\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Coins className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-sm font-medium\">Total Token Spend</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" className=\"text-xs font-normal tabular-nums\">\n                vs $8,900.00 unoptimized\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$3,420.50</span>\n              <span className=\"text-success text-success text-xs font-semibold tabular-nums\">-$5,479.50 (61.5%)</span>\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">Budget Utilization</span>\n                <span className=\"text-foreground font-medium tabular-nums\">38.4% of baseline</span>\n              </div>\n              <Progress value={38.4} className=\"h-1.5\" />\n            </div>\n            <p className=\"text-muted-foreground border-border/60 border-t pt-2 text-xs tabular-nums\">\n              767,500 total gateway inference requests\n            </p>\n          </CardContent>\n        </Card>\n\n        {/* KPI 2: Cost Savings from Caching & Routing */}\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"border-success/20 bg-success/10 text-success text-success flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <TrendingDown className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-sm font-medium\">Cost Savings</CardTitle>\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                className=\"border-success/30 bg-success/10 text-success text-xs font-semibold\"\n              >\n                61.5% Reduction\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <span className=\"text-success text-success text-2xl font-bold tracking-tight tabular-nums\">\n                $5,479.50 Saved\n              </span>\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">Semantic Cache Savings</span>\n                <span className=\"text-foreground font-medium tabular-nums\">$3,812.00</span>\n              </div>\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">Smart Model Routing</span>\n                <span className=\"text-foreground font-medium tabular-nums\">$1,667.50</span>\n              </div>\n            </div>\n            <p className=\"text-muted-foreground border-border/60 border-t pt-2 text-xs tabular-nums\">\n              32.5M tokens prevented from origin billing\n            </p>\n          </CardContent>\n        </Card>\n\n        {/* KPI 3: Semantic Cache Hit Rate */}\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"border-info/20 bg-info/10 text-info text-info flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Zap className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-sm font-medium\">Semantic Cache Hit Rate</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" className=\"border-info/30 bg-info/10 text-info text-xs font-semibold\">\n                &lt; 15ms response\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">42.8%</span>\n              <span className=\"text-muted-foreground text-xs font-medium tabular-nums\">328,500 hits</span>\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">Exact Match vs Vector</span>\n                <span className=\"text-foreground font-medium tabular-nums\">24.0% / 18.8%</span>\n              </div>\n              <Progress value={42.8} className=\"[&_[data-slot=progress-indicator]]:bg-info h-1.5\" />\n            </div>\n            <p className=\"text-muted-foreground border-border/60 border-t pt-2 text-xs tabular-nums\">\n              p50 exact: 12ms · p50 vector: 28ms\n            </p>\n          </CardContent>\n        </Card>\n\n        {/* KPI 4: P99 Gateway Latency */}\n        <Card className=\"flex flex-col justify-between\">\n          <CardHeader className=\"pb-2\">\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex min-w-0 items-center gap-2\">\n                <div\n                  aria-hidden=\"true\"\n                  className=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                >\n                  <Gauge className=\"size-4\" />\n                </div>\n                <CardTitle className=\"text-sm font-medium\">P99 Gateway Latency</CardTitle>\n              </div>\n              <Badge wrap variant=\"outline\" className=\"text-xs font-normal\">\n                4.2x Faster\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n              <span className=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">840ms</span>\n              <span className=\"text-muted-foreground text-xs font-medium tabular-nums\">p50: 180ms</span>\n            </div>\n            <div className=\"space-y-1\">\n              <div className=\"flex items-center justify-between text-xs\">\n                <span className=\"text-muted-foreground\">Smart Fallback SLA</span>\n                <span className=\"text-success text-success font-medium tabular-nums\">Zero 504 timeouts</span>\n              </div>\n              <Progress value={28} className=\"[&_[data-slot=progress-indicator]]:bg-success h-1.5\" />\n            </div>\n            <p className=\"text-muted-foreground border-border/60 border-t pt-2 text-xs tabular-nums\">\n              Automatic reroute on &gt;1,500ms TTFT or 429\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Semantic Cache Savings Visualizer */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div>\n              <CardTitle className=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n                <Layers className=\"text-primary size-4\" />\n                <span>Semantic Cache Savings & Token Bypass Visualizer</span>\n              </CardTitle>\n              <CardDescription>\n                Telemetry breakdown comparing deterministic exact hash matches, semantic vector cache hits, and origin\n                LLM invocations.\n              </CardDescription>\n            </div>\n            <Badge wrap variant=\"outline\" className=\"w-fit text-xs font-medium tabular-nums\">\n              767,500 Total Requests Analyzed\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          {/* Multi-segment progress visualizer bar */}\n          <div className=\"space-y-2\">\n            <div className=\"border-border/60 bg-muted/40 flex h-4 w-full overflow-hidden rounded-md border p-0.5 shadow-inner\">\n              <div\n                className=\"bg-success h-full rounded-xs transition-[width] duration-500\"\n                style={{ width: '24.0%' }}\n                title=\"Exact Key Cache: 24.0%\"\n              />\n              <div className=\"bg-background w-0.5\" aria-hidden=\"true\" />\n              <div\n                className=\"bg-info h-full rounded-xs transition-[width] duration-500\"\n                style={{ width: '18.8%' }}\n                title=\"Semantic Vector Cache: 18.8%\"\n              />\n              <div className=\"bg-background w-0.5\" aria-hidden=\"true\" />\n              <div\n                className=\"bg-muted-foreground/30 dark:bg-muted-foreground/20 h-full rounded-xs transition-[width] duration-500\"\n                style={{ width: '57.2%' }}\n                title=\"Origin Model Calls: 57.2%\"\n              />\n            </div>\n\n            {/* Visual Legend Header */}\n            <div className=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 text-xs\">\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"bg-success size-2.5 rounded-full\" aria-hidden=\"true\" />\n                <span className=\"text-foreground font-medium\">Exact Cache:</span>\n                <span className=\"tabular-nums\">24.0%</span>\n              </div>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"bg-info size-2.5 rounded-full\" aria-hidden=\"true\" />\n                <span className=\"text-foreground font-medium\">Semantic Vector Cache:</span>\n                <span className=\"tabular-nums\">18.8%</span>\n              </div>\n              <div className=\"flex items-center gap-1.5\">\n                <span className=\"bg-muted-foreground/40 size-2.5 rounded-full\" aria-hidden=\"true\" />\n                <span className=\"text-foreground font-medium\">Origin Model Calls:</span>\n                <span className=\"tabular-nums\">57.2%</span>\n              </div>\n            </div>\n          </div>\n\n          {/* 3 Segment Metric Detail Cards */}\n          <div className=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n            {cacheSegments.map((segment) => (\n              <div\n                key={segment.name}\n                className=\"bg-muted/30 border-border/80 flex flex-col justify-between space-y-2.5 rounded-lg border p-3.5 shadow-xs\"\n              >\n                <div className=\"space-y-1.5\">\n                  <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                    <div className=\"flex min-w-0 items-center gap-2\">\n                      <span className={cn('size-2 shrink-0 rounded-full', segment.color)} aria-hidden=\"true\" />\n                      <span className=\"text-foreground truncate text-xs font-semibold\">{segment.name}</span>\n                    </div>\n                    <Badge wrap variant={segment.badgeVariant} className=\"shrink-0 text-xs font-medium tabular-nums\">\n                      {\n                        {\n                          exact: '12ms p50',\n                          semantic: '28ms p50',\n                          origin: '840ms p99',\n                        }[segment.type]\n                      }\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">{segment.description}</p>\n                </div>\n\n                <div className=\"border-border/60 space-y-1 border-t pt-2 text-xs\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Volume Share</span>\n                    <span className=\"text-foreground font-medium tabular-nums\">{segment.requests}</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Token Impact</span>\n                    <span className=\"text-foreground font-medium tabular-nums\">{segment.tokensSpared}</span>\n                  </div>\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-muted-foreground\">Financial Impact</span>\n                    <span\n                      className={cn(\n                        'font-semibold tabular-nums',\n                        segment.type === 'origin' ? 'text-foreground' : 'text-success',\n                      )}\n                    >\n                      {segment.costSaved}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Model Routing & Cost Allocation Table */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-0.5\">\n              <CardTitle className=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n                <Route className=\"text-primary size-4\" />\n                <span>Model Routing & Cost Allocation</span>\n              </CardTitle>\n              <CardDescription>\n                Multi-provider connected models, request distribution, token volumes, total cost, and automated fallback\n                retries.\n              </CardDescription>\n            </div>\n\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <Select value={providerFilter} onValueChange={setProviderFilter}>\n                <SelectTrigger className=\"w-full text-xs sm:w-40\" aria-label=\"Filter by provider\">\n                  <SelectValue placeholder=\"All Providers\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value=\"all\">All Providers</SelectItem>\n                  <SelectItem value=\"anthropic\">Anthropic</SelectItem>\n                  <SelectItem value=\"openai\">OpenAI</SelectItem>\n                  <SelectItem value=\"groq\">Groq</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </CardHeader>\n        <CardContent className=\"p-0 sm:p-6 sm:pt-0\">\n          <div className=\"overflow-x-auto\">\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead className=\"text-xs\">Model & Provider</TableHead>\n                  <TableHead className=\"text-xs\">Request Share</TableHead>\n                  <TableHead className=\"text-xs\">Tokens (Input / Output)</TableHead>\n                  <TableHead className=\"text-right text-xs\">Total Cost</TableHead>\n                  <TableHead className=\"text-right text-xs\">Fallback Retries Handled</TableHead>\n                  <TableHead className=\"text-right text-xs\">Assigned Routing Role</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {filteredModels.map((model) => (\n                  <TableRow key={model.id}>\n                    {/* Model Name & Provider */}\n                    <TableCell className=\"py-3 whitespace-nowrap\">\n                      <div className=\"flex min-w-0 items-center gap-2.5\">\n                        <div\n                          aria-hidden=\"true\"\n                          className=\"bg-muted text-foreground border-border flex size-7 shrink-0 items-center justify-center rounded-md border shadow-xs\"\n                        >\n                          <BrainCircuit className=\"size-3.5\" />\n                        </div>\n                        <div className=\"space-y-0.5\">\n                          <div className=\"text-foreground text-xs font-semibold\">{model.name}</div>\n                          <div className=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                            <span>\n                              {{\n                                Anthropic: 'Anthropic',\n                                OpenAI: 'OpenAI',\n                                Groq: 'Groq',\n                              }[model.provider] || model.provider}\n                            </span>\n                            <span className=\"tabular-nums\">{model.avgLatency}</span>\n                          </div>\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Request Share % */}\n                    <TableCell className=\"py-3\">\n                      <div className=\"w-32 space-y-1\">\n                        <div className=\"flex items-center justify-between text-xs\">\n                          <span className=\"text-foreground font-semibold tabular-nums\">{model.sharePercent}%</span>\n                          <span className=\"text-muted-foreground text-xs\">share</span>\n                        </div>\n                        <Progress value={model.sharePercent} className=\"h-1.5\" />\n                      </div>\n                    </TableCell>\n\n                    {/* Input & Output Tokens in tabular-nums */}\n                    <TableCell className=\"py-3 whitespace-nowrap\">\n                      <div className=\"space-y-0.5 text-xs\">\n                        <div className=\"text-foreground font-medium tabular-nums\">\n                          {model.inputTokens} input · {model.outputTokens} output\n                        </div>\n                        <div className=\"text-muted-foreground text-xs tabular-nums\">\n                          {model.totalTokens} combined tokens\n                        </div>\n                      </div>\n                    </TableCell>\n\n                    {/* Total Cost */}\n                    <TableCell className=\"py-3 text-right whitespace-nowrap\">\n                      <div className=\"text-foreground text-xs font-bold tabular-nums\">{model.totalCost}</div>\n                      <div className=\"text-muted-foreground text-xs tabular-nums\">\n                        avg $\n                        {(\n                          parseFloat(model.totalCost.replace('$', '').replace(',', '')) /\n                          (model.sharePercent * 76.75)\n                        ).toFixed(3)}{' '}\n                        / 1k req\n                      </div>\n                    </TableCell>\n\n                    {/* Fallback & Rate-Limit Retries Handled */}\n                    <TableCell className=\"py-3 text-right whitespace-nowrap\">\n                      <div className=\"inline-flex items-center justify-end gap-1.5 text-xs\">\n                        <Badge wrap variant=\"outline\" className=\"gap-1 text-xs font-medium tabular-nums\">\n                          <ArrowRightLeft className=\"text-muted-foreground size-3\" />\n                          <span>{model.reroutesHandled} automatic reroutes</span>\n                        </Badge>\n                      </div>\n                    </TableCell>\n\n                    {/* Assigned Routing Role */}\n                    <TableCell className=\"py-3 text-right whitespace-nowrap\">\n                      <Badge wrap variant=\"secondary\" className=\"text-xs font-normal\">\n                        {model.role}\n                      </Badge>\n                    </TableCell>\n                  </TableRow>\n                ))}\n              </TableBody>\n            </Table>\n          </div>\n\n          {/* Table Summary / Footer Banner */}\n          <div className=\"border-border/80 bg-muted/30 mt-4 flex flex-col gap-3 rounded-lg border p-3 text-xs sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex min-w-0 items-center gap-2\">\n              <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n              <span className=\"text-muted-foreground\">\n                Across all 4 models:{' '}\n                <strong className=\"text-foreground font-semibold tabular-nums\">\n                  42.8M input · 8.4M output (51.2M total)\n                </strong>\n              </span>\n            </div>\n            <div className=\"flex items-center gap-4 text-xs tabular-nums\">\n              <span className=\"text-muted-foreground\">\n                Total Reroutes Handled: <strong className=\"text-foreground font-semibold\">226 incidents</strong>\n              </span>\n              <span className=\"text-muted-foreground\">\n                Net Origin Billed: <strong className=\"text-foreground font-semibold\">$3,420.50</strong>\n              </span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Active Cost Optimization Rules Card */}\n      <Card>\n        <CardHeader>\n          <div className=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"space-y-0.5\">\n              <CardTitle className=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n                <Sparkles className=\"text-primary size-4\" />\n                <span>Active Cost Optimization & Gateway Rules</span>\n              </CardTitle>\n              <CardDescription>\n                Autonomous gateway policies eliminating redundant token expenditure and enforcing fallback SLAs.\n              </CardDescription>\n            </div>\n            <Badge\n              wrap\n              variant=\"outline\"\n              className=\"border-success/30 bg-success/10 text-success w-fit text-xs font-medium\"\n            >\n              4 / 4 Rules Active\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent className=\"space-y-4\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            {/* Rule 1: Prompt Compression */}\n            <div className=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold\">\n                      Prompt Compression & System Cache Priming\n                    </span>\n                    <Badge wrap variant=\"success\" className=\"text-xs\">\n                      Active\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Strips boilerplate whitespaces, trims markdown delimiters, and leverages provider system prompt\n                    prefix caching to minimize input token weights.\n                  </p>\n                </div>\n                <Switch\n                  checked={promptCompressionEnabled}\n                  onCheckedChange={setPromptCompressionEnabled}\n                  aria-label=\"Toggle prompt compression\"\n                />\n              </div>\n              <div className=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\">\n                <span className=\"text-muted-foreground\">Estimated Rule Savings</span>\n                <span className=\"text-success text-success font-semibold tabular-nums\">\n                  ~$680.00 / mo (18% input token reduction)\n                </span>\n              </div>\n            </div>\n\n            {/* Rule 2: Automatic small-model routing */}\n            <div className=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold\">Automatic Small-Model Routing</span>\n                    <Badge wrap variant=\"success\" className=\"text-xs\">\n                      Active\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Directs intent classification, sentiment analysis, entity extraction, and structured JSON parsing to\n                    GPT-4o-mini and Llama 3.3 70B instead of frontier models.\n                  </p>\n                </div>\n                <Switch\n                  checked={smallModelRoutingEnabled}\n                  onCheckedChange={setSmallModelRoutingEnabled}\n                  aria-label=\"Toggle small-model routing\"\n                />\n              </div>\n              <div className=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\">\n                <span className=\"text-muted-foreground\">Estimated Rule Savings</span>\n                <span className=\"text-success text-success font-semibold tabular-nums\">\n                  ~$1,240.00 / mo (68K queries rerouted)\n                </span>\n              </div>\n            </div>\n\n            {/* Rule 3: Semantic Vector Cache */}\n            <div className=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold\">Semantic Vector Caching</span>\n                    <Badge wrap variant=\"success\" className=\"text-xs\">\n                      Active\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Evaluates embedding cosine distance on incoming queries; returns sub-30ms cached responses when\n                    similarity score exceeds 0.88 threshold.\n                  </p>\n                </div>\n                <Switch\n                  checked={semanticCachingEnabled}\n                  onCheckedChange={setSemanticCachingEnabled}\n                  aria-label=\"Toggle semantic caching\"\n                />\n              </div>\n              <div className=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\">\n                <span className=\"text-muted-foreground\">Estimated Rule Savings</span>\n                <span className=\"text-success text-success font-semibold tabular-nums\">\n                  ~$1,676.00 / mo (144.3K queries cached)\n                </span>\n              </div>\n            </div>\n\n            {/* Rule 4: Fallback & Circuit Breaker Engine */}\n            <div className=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n              <div className=\"flex items-start justify-between gap-3\">\n                <div className=\"space-y-1\">\n                  <div className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"text-foreground text-sm font-semibold\">Fallback & Circuit Breaker Engine</span>\n                    <Badge wrap variant=\"success\" className=\"text-xs\">\n                      Active\n                    </Badge>\n                  </div>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Monitors upstream provider health; automatically reroutes degraded queries to secondary standby\n                    models on HTTP 429 or &gt;1,500ms TTFT latency spikes.\n                  </p>\n                </div>\n                <Switch\n                  checked={circuitBreakerEnabled}\n                  onCheckedChange={setCircuitBreakerEnabled}\n                  aria-label=\"Toggle circuit breaker engine\"\n                />\n              </div>\n              <div className=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\">\n                <span className=\"text-muted-foreground\">SLA Protection</span>\n                <span className=\"text-foreground font-semibold tabular-nums\">\n                  99.99% effective uptime (226 incidents saved)\n                </span>\n              </div>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/ModelTokenCostOptimizer.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/select.json",
    "https://uipkge.dev/r/react/switch.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Helicone and Portkey style AI gateway telemetry, semantic caching hit rates, model routing savings, and latency metrics dashboard with token spend analytics, model allocation breakdown, and active cost optimization rules.",
  "categories": [
    "ai",
    "analytics",
    "dashboard"
  ]
}