{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "model-token-cost-optimizer",
  "title": "Model Token Cost Optimizer",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/model-token-cost-optimizer/ModelTokenCostOptimizer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\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-vue-next'\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\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\nconst timeframe = ref('aug-2026')\nconst providerFilter = ref('all')\n\n// Active optimization rule toggles\nconst promptCompressionEnabled = ref(true)\nconst smallModelRoutingEnabled = ref(true)\nconst semanticCachingEnabled = ref(true)\nconst circuitBreakerEnabled = ref(true)\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\nconst filteredModels = computed(() => {\n  if (providerFilter.value === 'all') return models\n  return models.filter((m) => m.provider.toLowerCase().includes(providerFilter.value.toLowerCase()))\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</script>\n\n<template>\n  <div data-slot=\"model-token-cost-optimizer\" :class=\"cn('mx-auto w-full max-w-6xl space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <h1 class=\"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            class=\"border-success/30 bg-success/10 text-success gap-1.5 text-xs font-medium\"\n          >\n            <span class=\"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 class=\"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 class=\"flex flex-wrap items-center gap-2.5\">\n        <Select v-model=\"timeframe\">\n          <SelectTrigger class=\"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\" class=\"gap-1.5 text-xs\">\n          <Download class=\"text-muted-foreground size-3.5\" />\n          <span>Export Token Logs</span>\n        </Button>\n\n        <Button size=\"sm\" class=\"gap-1.5 text-xs\">\n          <SlidersHorizontal class=\"size-3.5\" />\n          <span>Configure Routing Rules</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- 4 Gateway Performance KPI Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- KPI 1: Total Token Spend -->\n      <Card class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Coins class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Total Token Spend</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal tabular-nums\"> vs $8,900.00 unoptimized </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">$3,420.50</span>\n            <span class=\"text-success text-success text-xs font-semibold tabular-nums\"> -$5,479.50 (61.5%) </span>\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">Budget Utilization</span>\n              <span class=\"text-foreground font-medium tabular-nums\">38.4% of baseline</span>\n            </div>\n            <Progress :model-value=\"38.4\" class=\"h-1.5\" />\n          </div>\n          <p class=\"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 class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <div\n                class=\"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                aria-hidden=\"true\"\n              >\n                <TrendingDown class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Cost Savings</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-semibold\">\n              61.5% Reduction\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <span class=\"text-success text-success text-2xl font-bold tracking-tight tabular-nums\">\n              $5,479.50 Saved\n            </span>\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">Semantic Cache Savings</span>\n              <span class=\"text-foreground font-medium tabular-nums\">$3,812.00</span>\n            </div>\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">Smart Model Routing</span>\n              <span class=\"text-foreground font-medium tabular-nums\">$1,667.50</span>\n            </div>\n          </div>\n          <p class=\"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 class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <div\n                class=\"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                aria-hidden=\"true\"\n              >\n                <Zap class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">Semantic Cache Hit Rate</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"border-info/30 bg-info/10 text-info text-xs font-semibold\">\n              &lt; 15ms response\n            </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">42.8%</span>\n            <span class=\"text-muted-foreground text-xs font-medium tabular-nums\">328,500 hits</span>\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">Exact Match vs Vector</span>\n              <span class=\"text-foreground font-medium tabular-nums\">24.0% / 18.8%</span>\n            </div>\n            <Progress :model-value=\"42.8\" class=\"[&_[data-slot=progress-indicator]]:bg-info h-1.5\" />\n          </div>\n          <p class=\"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 class=\"flex flex-col justify-between\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex flex-wrap items-center justify-between gap-2\">\n            <div class=\"flex min-w-0 items-center gap-2\">\n              <div\n                class=\"bg-muted text-muted-foreground border-border flex size-8 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n                aria-hidden=\"true\"\n              >\n                <Gauge class=\"size-4\" />\n              </div>\n              <CardTitle class=\"text-sm font-medium\">P99 Gateway Latency</CardTitle>\n            </div>\n            <Badge wrap variant=\"outline\" class=\"text-xs font-normal\"> 4.2x Faster </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5\">\n            <span class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">840ms</span>\n            <span class=\"text-muted-foreground text-xs font-medium tabular-nums\">p50: 180ms</span>\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center justify-between text-xs\">\n              <span class=\"text-muted-foreground\">Smart Fallback SLA</span>\n              <span class=\"text-success text-success font-medium tabular-nums\">Zero 504 timeouts</span>\n            </div>\n            <Progress :model-value=\"28\" class=\"[&_[data-slot=progress-indicator]]:bg-success h-1.5\" />\n          </div>\n          <p class=\"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 class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n              <Layers class=\"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 LLM\n              invocations.\n            </CardDescription>\n          </div>\n          <Badge wrap variant=\"outline\" class=\"w-fit text-xs font-medium tabular-nums\">\n            767,500 Total Requests Analyzed\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <!-- Multi-segment progress visualizer bar -->\n        <div class=\"space-y-2\">\n          <div\n            class=\"border-border/60 bg-muted/40 flex h-4 w-full overflow-hidden rounded-md border p-0.5 shadow-inner\"\n          >\n            <div\n              class=\"bg-success h-full rounded-xs transition-[width] duration-500\"\n              style=\"width: 24%\"\n              title=\"Exact Key Cache: 24.0%\"\n            />\n            <div class=\"bg-background w-0.5\" aria-hidden=\"true\" />\n            <div\n              class=\"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 class=\"bg-background w-0.5\" aria-hidden=\"true\" />\n            <div\n              class=\"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 class=\"text-muted-foreground flex flex-wrap items-center justify-between gap-2 text-xs\">\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-success size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span class=\"text-foreground font-medium\">Exact Cache:</span>\n              <span class=\"tabular-nums\">24.0%</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-info size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span class=\"text-foreground font-medium\">Semantic Vector Cache:</span>\n              <span class=\"tabular-nums\">18.8%</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <span class=\"bg-muted-foreground/40 size-2.5 rounded-full\" aria-hidden=\"true\" />\n              <span class=\"text-foreground font-medium\">Origin Model Calls:</span>\n              <span class=\"tabular-nums\">57.2%</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- 3 Segment Metric Detail Cards -->\n        <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n          <div\n            v-for=\"segment in cacheSegments\"\n            :key=\"segment.name\"\n            class=\"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 class=\"space-y-1.5\">\n              <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                <div class=\"flex min-w-0 items-center gap-2\">\n                  <span :class=\"cn('size-2 shrink-0 rounded-full', segment.color)\" aria-hidden=\"true\" />\n                  <span class=\"text-foreground truncate text-xs font-semibold\">{{ segment.name }}</span>\n                </div>\n                <Badge wrap :variant=\"segment.badgeVariant\" class=\"shrink-0 text-xs font-medium tabular-nums\">\n                  {{ segment.latency }}\n                </Badge>\n              </div>\n              <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                {{ segment.description }}\n              </p>\n            </div>\n\n            <div class=\"border-border/60 space-y-1 border-t pt-2 text-xs\">\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Volume Share</span>\n                <span class=\"text-foreground font-medium tabular-nums\">{{ segment.requests }}</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Token Impact</span>\n                <span class=\"text-foreground font-medium tabular-nums\">{{ segment.tokensSpared }}</span>\n              </div>\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Financial Impact</span>\n                <span\n                  :class=\"\n                    cn('font-semibold tabular-nums', segment.type === 'origin' ? 'text-foreground' : 'text-success')\n                  \"\n                >\n                  {{ segment.costSaved }}\n                </span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Model Routing & Cost Allocation Table -->\n    <Card>\n      <CardHeader>\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-0.5\">\n            <CardTitle class=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n              <Route class=\"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 class=\"flex min-w-0 items-center gap-2\">\n            <Select v-model=\"providerFilter\">\n              <SelectTrigger class=\"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 class=\"p-0 sm:p-6 sm:pt-0\">\n        <div class=\"overflow-x-auto\">\n          <Table>\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"text-xs\">Model & Provider</TableHead>\n                <TableHead class=\"text-xs\">Request Share</TableHead>\n                <TableHead class=\"text-xs\">Tokens (Input / Output)</TableHead>\n                <TableHead class=\"text-right text-xs\">Total Cost</TableHead>\n                <TableHead class=\"text-right text-xs\">Fallback Retries Handled</TableHead>\n                <TableHead class=\"text-right text-xs\">Assigned Routing Role</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"model in filteredModels\" :key=\"model.id\">\n                <!-- Model Name & Provider -->\n                <TableCell class=\"py-3 whitespace-nowrap\">\n                  <div class=\"flex min-w-0 items-center gap-2.5\">\n                    <div\n                      class=\"bg-muted text-foreground border-border flex size-7 shrink-0 items-center justify-center rounded-md border shadow-xs\"\n                      aria-hidden=\"true\"\n                    >\n                      <BrainCircuit class=\"size-3.5\" />\n                    </div>\n                    <div class=\"space-y-0.5\">\n                      <div class=\"text-foreground text-xs font-semibold\">{{ model.name }}</div>\n                      <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n                        <span>{{ model.provider }}</span>\n                        <span class=\"tabular-nums\">{{ model.avgLatency }}</span>\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Request Share % -->\n                <TableCell class=\"py-3\">\n                  <div class=\"w-32 space-y-1\">\n                    <div class=\"flex items-center justify-between text-xs\">\n                      <span class=\"text-foreground font-semibold tabular-nums\">{{ model.sharePercent }}%</span>\n                      <span class=\"text-muted-foreground text-xs\">share</span>\n                    </div>\n                    <Progress :model-value=\"model.sharePercent\" class=\"h-1.5\" />\n                  </div>\n                </TableCell>\n\n                <!-- Input & Output Tokens in tabular-nums -->\n                <TableCell class=\"py-3 whitespace-nowrap\">\n                  <div class=\"space-y-0.5 text-xs\">\n                    <div class=\"text-foreground font-medium tabular-nums\">\n                      {{ model.inputTokens }} input · {{ model.outputTokens }} output\n                    </div>\n                    <div class=\"text-muted-foreground text-xs tabular-nums\">\n                      {{ model.totalTokens }} combined tokens\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Total Cost -->\n                <TableCell class=\"py-3 text-right whitespace-nowrap\">\n                  <div class=\"text-foreground text-xs font-bold tabular-nums\">\n                    {{ model.totalCost }}\n                  </div>\n                  <div class=\"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                    }}\n                    / 1k req\n                  </div>\n                </TableCell>\n\n                <!-- Fallback & Rate-Limit Retries Handled -->\n                <TableCell class=\"py-3 text-right whitespace-nowrap\">\n                  <div class=\"inline-flex items-center justify-end gap-1.5 text-xs\">\n                    <Badge wrap variant=\"outline\" class=\"gap-1 text-xs font-medium tabular-nums\">\n                      <ArrowRightLeft class=\"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 class=\"py-3 text-right whitespace-nowrap\">\n                  <Badge wrap variant=\"secondary\" class=\"text-xs font-normal\">\n                    {{ model.role }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n\n        <!-- Table Summary / Footer Banner -->\n        <div\n          class=\"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        >\n          <div class=\"flex min-w-0 items-center gap-2\">\n            <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n            <span class=\"text-muted-foreground\">\n              Across all 4 models:\n              <strong class=\"text-foreground font-semibold tabular-nums\"\n                >42.8M input · 8.4M output (51.2M total)</strong\n              >\n            </span>\n          </div>\n          <div class=\"flex items-center gap-4 text-xs tabular-nums\">\n            <span class=\"text-muted-foreground\">\n              Total Reroutes Handled: <strong class=\"text-foreground font-semibold\">226 incidents</strong>\n            </span>\n            <span class=\"text-muted-foreground\">\n              Net Origin Billed: <strong class=\"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 class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-0.5\">\n            <CardTitle class=\"flex min-w-0 items-center gap-2 text-base font-semibold\">\n              <Sparkles class=\"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 wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success w-fit text-xs font-medium\">\n            4 / 4 Rules Active\n          </Badge>\n        </div>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          <!-- Rule 1: Prompt Compression -->\n          <div class=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between gap-3\">\n              <div class=\"space-y-1\">\n                <div class=\"flex min-w-0 items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Prompt Compression & System Cache Priming</span>\n                  <Badge wrap variant=\"success\" class=\"text-xs\">Active</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  Strips boilerplate whitespaces, trims markdown delimiters, and leverages provider system prompt prefix\n                  caching to minimize input token weights.\n                </p>\n              </div>\n              <Switch v-model=\"promptCompressionEnabled\" aria-label=\"Toggle prompt compression\" />\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Estimated Rule Savings</span>\n              <span class=\"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 class=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between gap-3\">\n              <div class=\"space-y-1\">\n                <div class=\"flex min-w-0 items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Automatic Small-Model Routing</span>\n                  <Badge wrap variant=\"success\" class=\"text-xs\">Active</Badge>\n                </div>\n                <p class=\"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 v-model=\"smallModelRoutingEnabled\" aria-label=\"Toggle small-model routing\" />\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Estimated Rule Savings</span>\n              <span class=\"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 class=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between gap-3\">\n              <div class=\"space-y-1\">\n                <div class=\"flex min-w-0 items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Semantic Vector Caching</span>\n                  <Badge wrap variant=\"success\" class=\"text-xs\">Active</Badge>\n                </div>\n                <p class=\"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 v-model=\"semanticCachingEnabled\" aria-label=\"Toggle semantic caching\" />\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">Estimated Rule Savings</span>\n              <span class=\"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 class=\"border-border bg-card flex flex-col justify-between space-y-3 rounded-lg border p-4 shadow-xs\">\n            <div class=\"flex items-start justify-between gap-3\">\n              <div class=\"space-y-1\">\n                <div class=\"flex min-w-0 items-center gap-2\">\n                  <span class=\"text-foreground text-sm font-semibold\">Fallback & Circuit Breaker Engine</span>\n                  <Badge wrap variant=\"success\" class=\"text-xs\">Active</Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  Monitors upstream provider health; automatically reroutes degraded queries to secondary standby models\n                  on HTTP 429 or &gt;1,500ms TTFT latency spikes.\n                </p>\n              </div>\n              <Switch v-model=\"circuitBreakerEnabled\" aria-label=\"Toggle circuit breaker engine\" />\n            </div>\n            <div\n              class=\"border-border/60 bg-muted/40 flex items-center justify-between rounded-md border px-3 py-1.5 text-xs\"\n            >\n              <span class=\"text-muted-foreground\">SLA Protection</span>\n              <span class=\"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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/ModelTokenCostOptimizer.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/switch.json",
    "https://uipkge.dev/r/vue/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"
  ]
}