{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "ai-saas-command-center",
  "title": "Ai Saas Command Center",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/ai-saas-command-center/AiSaasCommandCenter.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  ArrowUpRight,\n  Bot,\n  CheckCircle2,\n  Clock,\n  Code2,\n  Cpu,\n  Database,\n  FileText,\n  Globe,\n  Pause,\n  Play,\n  RefreshCw,\n  Server,\n  ShieldCheck,\n  SlidersHorizontal,\n  Sparkles,\n  Terminal,\n  Zap,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\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 { Separator } from '@/components/ui/separator'\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\ntype WorkloadCategory = 'all' | 'code' | 'rag' | 'agent' | 'vision'\n\ninterface ModelWorkload {\n  id: string\n  name: string\n  version: string\n  category: 'Code Generation' | 'Document RAG' | 'Autonomous Agent' | 'Vision'\n  categoryKey: 'code' | 'rag' | 'agent' | 'vision'\n  iconName: 'Code2' | 'FileText' | 'Bot' | 'Sparkles'\n  requestsPerHour: string\n  tokenThroughput: string\n  avgGenerationTime: string\n  ttft: string\n  gpuInstances: string\n  gpuVramUsed: string\n  gpuVramTotal: string\n  gpuUtilization: number\n  status: 'operational' | 'high_load'\n}\n\ninterface AgentSession {\n  id: string\n  sessionKey: string\n  agentName: string\n  agentRole: string\n  avatarInitials: string\n  avatarColor: 'primary' | 'info' | 'success' | 'warning'\n  model: string\n  reasoningGoal: string\n  elapsedSeconds: number\n  toolCount: number\n  tools: { name: string; count: number }[]\n  status: 'streaming' | 'reasoning' | 'executing'\n  statusLabel: string\n  progress: number\n}\n\nconst isStreaming = ref(true)\nconst selectedCategory = ref<WorkloadCategory>('all')\nconst isScaleModalOpen = ref(false)\nconst scaleSuccessMessage = ref('')\nconst lastUpdated = ref('Updated just now')\nconst isRefreshing = ref(false)\n\nconst models = ref<ModelWorkload[]>([\n  {\n    id: 'claude-3-5-sonnet',\n    name: 'Claude 3.5 Sonnet',\n    version: 'claude-3-5-sonnet-20241022',\n    category: 'Code Generation',\n    categoryKey: 'code',\n    iconName: 'Code2',\n    requestsPerHour: '42.8k requests / hr',\n    tokenThroughput: '1.82M tok/min',\n    avgGenerationTime: '840ms',\n    ttft: '160ms TTFT',\n    gpuInstances: '4× H100 SXM5',\n    gpuVramUsed: '72.4 GB',\n    gpuVramTotal: '80 GB',\n    gpuUtilization: 90.5,\n    status: 'operational',\n  },\n  {\n    id: 'gpt-4o',\n    name: 'GPT-4o',\n    version: 'gpt-4o-2024-08-06',\n    category: 'Document RAG',\n    categoryKey: 'rag',\n    iconName: 'FileText',\n    requestsPerHour: '36.2k requests / hr',\n    tokenThroughput: '1.45M tok/min',\n    avgGenerationTime: '720ms',\n    ttft: '140ms TTFT',\n    gpuInstances: '2× H100 SXM5',\n    gpuVramUsed: '68.1 GB',\n    gpuVramTotal: '80 GB',\n    gpuUtilization: 85.1,\n    status: 'operational',\n  },\n  {\n    id: 'llama-3-3-70b',\n    name: 'Llama 3.3 70B',\n    version: 'llama-3.3-70b-instruct-fp8',\n    category: 'Autonomous Agent',\n    categoryKey: 'agent',\n    iconName: 'Bot',\n    requestsPerHour: '19.4k requests / hr',\n    tokenThroughput: '890k tok/min',\n    avgGenerationTime: '1,120ms',\n    ttft: '280ms TTFT',\n    gpuInstances: '8× H100 SXM5',\n    gpuVramUsed: '78.6 GB',\n    gpuVramTotal: '80 GB',\n    gpuUtilization: 98.2,\n    status: 'high_load',\n  },\n  {\n    id: 'sd-3-5',\n    name: 'Stable Diffusion 3.5',\n    version: 'sd3.5-large-turbo',\n    category: 'Vision',\n    categoryKey: 'vision',\n    iconName: 'Sparkles',\n    requestsPerHour: '8.6k requests / hr',\n    tokenThroughput: '143 img/min',\n    avgGenerationTime: '1,450ms',\n    ttft: '28 steps',\n    gpuInstances: '2× H100 SXM5',\n    gpuVramUsed: '64.0 GB',\n    gpuVramTotal: '80 GB',\n    gpuUtilization: 80.0,\n    status: 'operational',\n  },\n])\n\nconst agentSessions = ref<AgentSession[]>([\n  {\n    id: 'sess-1',\n    sessionKey: 'ag-9481',\n    agentName: 'CodeGen Synthesizer Agent',\n    agentRole: 'Full-Stack Schema & API Pipeline',\n    avatarInitials: 'CG',\n    avatarColor: 'primary',\n    model: 'Claude 3.5 Sonnet',\n    reasoningGoal:\n      'Synthesizing full-stack schema validation pipelines with edge caching, RPC endpoints, and async telemetry buffers.',\n    elapsedSeconds: 258,\n    toolCount: 14,\n    tools: [\n      { name: 'ast_grep', count: 6 },\n      { name: 'typecheck', count: 4 },\n      { name: 'file_write', count: 4 },\n    ],\n    status: 'streaming',\n    statusLabel: 'Streaming Output',\n    progress: 74,\n  },\n  {\n    id: 'sess-2',\n    sessionKey: 'ag-8820',\n    agentName: 'Knowledge RAG Researcher',\n    agentRole: 'Document Semantic Indexer',\n    avatarInitials: 'KR',\n    avatarColor: 'info',\n    model: 'GPT-4o',\n    reasoningGoal:\n      'Indexing 240-page financial PDF disclosures into hybrid vector database with semantic chunking and cosine similarity rerank.',\n    elapsedSeconds: 165,\n    toolCount: 6,\n    tools: [\n      { name: 'pdf_extract', count: 2 },\n      { name: 'chunk_embed', count: 3 },\n      { name: 'pgvector', count: 1 },\n    ],\n    status: 'reasoning',\n    statusLabel: 'Reasoning & Embedding',\n    progress: 48,\n  },\n  {\n    id: 'sess-3',\n    sessionKey: 'ag-7104',\n    agentName: 'Autonomous QA & Test Orchestrator',\n    agentRole: 'Deterministic Browser Matrix',\n    avatarInitials: 'QA',\n    avatarColor: 'success',\n    model: 'Llama 3.3 70B',\n    reasoningGoal:\n      'Executing deterministic browser regression matrix across dual-framework island components with DOM snapshot validation.',\n    elapsedSeconds: 492,\n    toolCount: 28,\n    tools: [\n      { name: 'playwright_mcp', count: 18 },\n      { name: 'dom_snapshot', count: 8 },\n      { name: 'diff_audit', count: 2 },\n    ],\n    status: 'executing',\n    statusLabel: 'Executing Tests',\n    progress: 91,\n  },\n])\n\nfunction formatDuration(seconds: number): string {\n  const mins = Math.floor(seconds / 60)\n  const secs = seconds % 60\n  return `${mins.toString().padStart(2, '0')}m:${secs.toString().padStart(2, '0')}s`\n}\n\nconst filteredModels = computed(() => {\n  if (selectedCategory.value === 'all') {\n    return models.value\n  }\n  return models.value.filter((m) => m.categoryKey === selectedCategory.value)\n})\n\nlet timer: ReturnType<typeof setInterval> | null = null\n\nonMounted(() => {\n  timer = setInterval(() => {\n    if (isStreaming.value) {\n      agentSessions.value.forEach((sess) => {\n        sess.elapsedSeconds++\n      })\n    }\n  }, 1000)\n})\n\nonBeforeUnmount(() => {\n  if (timer) clearInterval(timer)\n})\n\nfunction toggleStreaming() {\n  isStreaming.value = !isStreaming.value\n}\n\nfunction handleRefresh() {\n  isRefreshing.value = true\n  setTimeout(() => {\n    isRefreshing.value = false\n    lastUpdated.value = 'Updated just now'\n  }, 400)\n}\n\nfunction handleScaleNodes() {\n  isScaleModalOpen.value = true\n  scaleSuccessMessage.value = 'GPU Autoscaler requested +2 H100 SXM5 instances for US-West pool.'\n  setTimeout(() => {\n    scaleSuccessMessage.value = ''\n  }, 4000)\n}\n</script>\n\n<template>\n  <div data-slot=\"ai-saas-command-center\" :class=\"cn('w-full space-y-6', props.class)\">\n    <!-- Header: Title, Region, Health Badge, Action Controls -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"flex flex-col gap-5 p-5 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Title & Region -->\n        <div class=\"flex items-start gap-3.5 sm:items-center\">\n          <div\n            class=\"bg-primary/10 text-primary border-primary/20 flex size-12 shrink-0 items-center justify-center rounded-xl border\"\n          >\n            <Cpu class=\"size-6\" />\n          </div>\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2.5\">\n              <h1 class=\"text-foreground text-lg leading-none font-semibold tracking-tight sm:text-xl\">\n                AI Platform Command Center & Workloads\n              </h1>\n              <Badge variant=\"success\" class=\"h-5 gap-1 px-2 text-xs font-medium shadow-xs\">\n                <span class=\"relative flex size-1.5\">\n                  <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                  <span class=\"bg-success relative inline-flex size-1.5 rounded-full\" />\n                </span>\n                Cluster Healthy · 99.99% Uptime\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 font-mono text-xs\">\n              <div class=\"flex items-center gap-1.5\">\n                <Server class=\"size-3.5\" />\n                <span>NVIDIA H100 GPU Cluster · US-West</span>\n              </div>\n              <span>•</span>\n              <div class=\"flex items-center gap-1.5\">\n                <Globe class=\"size-3.5\" />\n                <span>16 Nodes Live · 1.28 TB Combined VRAM</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Controls: Rate Limits & Scale GPU Nodes -->\n        <div class=\"flex flex-wrap items-center gap-2.5 self-start lg:self-auto\">\n          <!-- Refresh telemetry -->\n          <div class=\"text-muted-foreground flex items-center gap-1.5 text-xs\">\n            <Clock class=\"size-3.5\" />\n            <span class=\"font-mono\">{{ lastUpdated }}</span>\n            <Button\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              class=\"size-7 rounded-md\"\n              aria-label=\"Refresh telemetry data\"\n              @click=\"handleRefresh\"\n            >\n              <RefreshCw :class=\"['size-3.5', isRefreshing ? 'animate-spin' : '']\" />\n            </Button>\n          </div>\n\n          <Separator orientation=\"vertical\" class=\"hidden h-5 lg:block\" />\n\n          <!-- Configure Rate Limits -->\n          <Button variant=\"outline\" size=\"sm\" class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\">\n            <SlidersHorizontal class=\"size-3.5\" />\n            <span>Configure Rate Limits</span>\n          </Button>\n\n          <!-- Scale GPU Nodes -->\n          <Button\n            variant=\"default\"\n            size=\"sm\"\n            class=\"h-8 gap-1.5 text-xs font-medium shadow-xs\"\n            @click=\"handleScaleNodes\"\n          >\n            <Cpu class=\"size-3.5\" />\n            <span>Scale GPU Nodes</span>\n          </Button>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Scale Notification Toast / Inline Feedback -->\n    <div\n      v-if=\"scaleSuccessMessage\"\n      class=\"border-success/30 bg-success/10 text-foreground dark:text-foreground flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-success size-4\" />\n        <span class=\"font-medium\">{{ scaleSuccessMessage }}</span>\n      </div>\n      <Badge variant=\"outline\" class=\"border-success/40 text-success font-mono text-xs\"> Provisioning ~45s </Badge>\n    </div>\n\n    <!-- Cost Anomaly & Guardrail Alert Banner -->\n    <div\n      class=\"border-border/80 bg-muted/40 flex flex-col gap-3 rounded-xl border p-3.5 shadow-xs sm:flex-row sm:items-center sm:justify-between sm:p-4\"\n    >\n      <div class=\"flex items-start gap-3\">\n        <div\n          class=\"bg-primary/10 text-primary border-primary/20 mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n        >\n          <ShieldCheck class=\"size-4\" />\n        </div>\n        <div class=\"space-y-0.5\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <p class=\"text-foreground text-xs font-semibold\">Cost Anomaly & Spend Velocity Guardrails Active</p>\n            <Badge variant=\"secondary\" class=\"font-mono text-xs\">Policy: P99 SLA &lt; 800ms</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs leading-relaxed\">\n            Current spend velocity ($142.50/hr) is within safe budget limits. Dynamic semantic caching saved $318.40\n            today across 184k requests. Zero runaway recursive loops detected.\n          </p>\n        </div>\n      </div>\n\n      <div class=\"flex shrink-0 items-center gap-2 self-end font-mono text-xs sm:self-auto\">\n        <span class=\"text-muted-foreground\">Budget Cap:</span>\n        <span class=\"text-foreground font-semibold tabular-nums\">$5,000 / day (34.2% consumed)</span>\n      </div>\n    </div>\n\n    <!-- 4 Primary Workload Telemetry Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Total Token Burn Rate -->\n      <Card class=\"border-border/80 bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-xs font-medium\">Total Token Burn Rate</CardDescription>\n            <div\n              class=\"border-warning/20 bg-warning/10 text-warning flex size-7 items-center justify-center rounded-md border\"\n            >\n              <Zap class=\"size-3.5\" />\n            </div>\n          </div>\n          <div class=\"pt-1\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">4,850</span>\n              <span class=\"text-muted-foreground text-xs\">tok/sec</span>\n            </div>\n            <p class=\"text-foreground/90 font-mono text-xs font-medium tabular-nums\">$142.50 / hr</p>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div\n            class=\"bg-muted/40 border-border/60 flex items-center justify-between rounded-md border px-2 py-1 text-xs\"\n          >\n            <span class=\"text-muted-foreground font-mono\">Daily Volume</span>\n            <span class=\"text-foreground font-mono font-semibold tabular-nums\">184.2M tokens</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"text-success text-success flex items-center gap-0.5 font-medium tabular-nums\">\n              <ArrowUpRight class=\"size-3\" />\n              +12.4% vs prev hour\n            </span>\n            <span>Stable burn</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Active Model Inferences -->\n      <Card class=\"border-border/80 bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-xs font-medium\">Active Model Inferences</CardDescription>\n            <div\n              class=\"bg-primary/10 text-primary border-primary/20 flex size-7 items-center justify-center rounded-md border\"\n            >\n              <Bot class=\"size-3.5\" />\n            </div>\n          </div>\n          <div class=\"pt-1\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">48</span>\n              <span class=\"text-muted-foreground text-xs\">concurrent</span>\n            </div>\n            <p class=\"text-foreground/90 text-xs font-medium\">48 Concurrent Agent Sessions</p>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div\n            class=\"bg-muted/40 border-border/60 flex items-center justify-between rounded-md border px-2 py-1 text-xs\"\n          >\n            <span class=\"text-muted-foreground font-mono\">Throughput</span>\n            <span class=\"text-foreground font-mono font-semibold tabular-nums\">1,420 req / min</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"text-success font-medium\">0 queued jobs</span>\n            <span class=\"font-mono\">Pool: 48/64</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: GPU Cluster Utilization -->\n      <Card class=\"border-border/80 bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-xs font-medium\">GPU Cluster Utilization</CardDescription>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\"\n            >\n              <Cpu class=\"size-3.5\" />\n            </div>\n          </div>\n          <div class=\"pt-1\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">88.4%</span>\n              <span class=\"text-muted-foreground text-xs\">compute</span>\n            </div>\n            <p class=\"text-foreground/90 font-mono text-xs font-medium tabular-nums\">76.2 GB / 80 GB VRAM</p>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div class=\"space-y-1\">\n            <Progress :model-value=\"88.4\" class=\"h-1.5\" />\n          </div>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"font-mono\">Thermal: 58°C</span>\n            <span class=\"text-foreground font-medium\">16/16 H100 Online</span>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: P99 Inference Latency -->\n      <Card class=\"border-border/80 bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex items-center justify-between\">\n            <CardDescription class=\"text-xs font-medium\">P99 Inference Latency</CardDescription>\n            <div class=\"border-info/20 bg-info/10 text-info flex size-7 items-center justify-center rounded-md border\">\n              <Clock class=\"size-3.5\" />\n            </div>\n          </div>\n          <div class=\"pt-1\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">640ms</span>\n              <span class=\"text-muted-foreground text-xs\">P99</span>\n            </div>\n            <p class=\"text-foreground/90 font-mono text-xs font-medium tabular-nums\">Sub-second TTFT (180ms)</p>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div\n            class=\"bg-muted/40 border-border/60 flex items-center justify-between rounded-md border px-2 py-1 font-mono text-xs\"\n          >\n            <span class=\"text-muted-foreground\">P50: 310ms</span>\n            <span class=\"text-foreground font-medium\">P90: 490ms</span>\n          </div>\n          <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n            <span class=\"text-success font-medium\">Target &lt; 800ms SLA</span>\n            <span class=\"text-success font-mono\">Optimal</span>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Real-Time Model Workloads & Throughput Table -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <Database class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">Real-Time Model Workloads & Throughput</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Live inference telemetry, compute allocation, and throughput metrics across deployed foundation models.\n            </CardDescription>\n          </div>\n\n          <!-- Workload Category Filter Pills -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <Button\n              v-for=\"cat in [\n                { key: 'all', label: 'All Models' },\n                { key: 'code', label: 'Code Gen' },\n                { key: 'rag', label: 'Document RAG' },\n                { key: 'agent', label: 'Agents' },\n                { key: 'vision', label: 'Vision' },\n              ]\"\n              :key=\"cat.key\"\n              :variant=\"selectedCategory === cat.key ? 'default' : 'outline'\"\n              size=\"xs\"\n              class=\"h-7 text-xs font-medium\"\n              @click=\"selectedCategory = cat.key\"\n            >\n              {{ cat.label }}\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table density=\"cozy\">\n            <TableHeader>\n              <TableRow class=\"bg-muted/40\">\n                <TableHead class=\"font-semibold\">Model Name & Version</TableHead>\n                <TableHead class=\"font-semibold\">Workload Category</TableHead>\n                <TableHead class=\"font-semibold\">Throughput</TableHead>\n                <TableHead class=\"font-semibold\">Avg Generation Time</TableHead>\n                <TableHead class=\"font-semibold\">GPU Instance Allocation</TableHead>\n                <TableHead class=\"font-semibold\">GPU VRAM & Load</TableHead>\n                <TableHead class=\"text-right font-semibold\">Health Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"model in filteredModels\" :key=\"model.id\" class=\"hover:bg-muted/30 transition-colors\">\n                <!-- Model Name & Version -->\n                <TableCell>\n                  <div class=\"flex items-center gap-2.5\">\n                    <div\n                      class=\"bg-muted text-muted-foreground border-border/60 flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                    >\n                      <Code2 v-if=\"model.iconName === 'Code2'\" class=\"text-primary size-4\" />\n                      <FileText v-else-if=\"model.iconName === 'FileText'\" class=\"text-info size-4\" />\n                      <Bot v-else-if=\"model.iconName === 'Bot'\" class=\"text-warning size-4\" />\n                      <Sparkles v-else class=\"text-chart-1 size-4\" />\n                    </div>\n                    <div>\n                      <p class=\"text-foreground text-xs leading-tight font-semibold\">{{ model.name }}</p>\n                      <p class=\"text-muted-foreground font-mono text-xs\">{{ model.version }}</p>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Category Badge -->\n                <TableCell>\n                  <Badge\n                    variant=\"outline\"\n                    class=\"border-border bg-muted/30 text-foreground gap-1.5 text-xs font-medium\"\n                  >\n                    <span class=\"bg-primary size-1.5 rounded-full\" />\n                    {{ model.category }}\n                  </Badge>\n                </TableCell>\n\n                <!-- Throughput -->\n                <TableCell>\n                  <div class=\"font-mono text-xs\">\n                    <p class=\"text-foreground font-semibold tabular-nums\">{{ model.requestsPerHour }}</p>\n                    <p class=\"text-muted-foreground tabular-nums\">{{ model.tokenThroughput }}</p>\n                  </div>\n                </TableCell>\n\n                <!-- Avg Generation Time -->\n                <TableCell>\n                  <div class=\"font-mono text-xs\">\n                    <p class=\"text-foreground font-semibold tabular-nums\">{{ model.avgGenerationTime }}</p>\n                    <p class=\"text-muted-foreground tabular-nums\">{{ model.ttft }}</p>\n                  </div>\n                </TableCell>\n\n                <!-- GPU Instance Allocation -->\n                <TableCell>\n                  <div class=\"flex items-center gap-1.5 font-mono text-xs\">\n                    <Server class=\"text-muted-foreground size-3.5 shrink-0\" />\n                    <span class=\"text-foreground font-medium\">{{ model.gpuInstances }}</span>\n                  </div>\n                </TableCell>\n\n                <!-- GPU VRAM & Load -->\n                <TableCell>\n                  <div class=\"w-36 space-y-1\">\n                    <div class=\"flex justify-between font-mono text-xs\">\n                      <span class=\"text-muted-foreground tabular-nums\">{{ model.gpuVramUsed }}</span>\n                      <span class=\"text-foreground font-semibold tabular-nums\">{{ model.gpuUtilization }}%</span>\n                    </div>\n                    <Progress\n                      :model-value=\"model.gpuUtilization\"\n                      :class=\"[\n                        'h-1.5',\n                        model.status === 'high_load' ? '[&>[data-slot=progress-indicator]]:bg-warning' : '',\n                      ]\"\n                    />\n                  </div>\n                </TableCell>\n\n                <!-- Health Status -->\n                <TableCell class=\"text-right\">\n                  <Badge\n                    :variant=\"model.status === 'operational' ? 'success' : 'warning'\"\n                    class=\"gap-1 text-xs font-medium\"\n                  >\n                    <span\n                      :class=\"['size-1.5 rounded-full', model.status === 'operational' ? 'bg-success' : 'bg-warning']\"\n                    />\n                    {{ model.status === 'operational' ? 'Operational' : 'High Load' }}\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Active Autonomous Agent Sessions Stream -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"p-5 pb-3\">\n        <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex items-center gap-2\">\n              <Bot class=\"text-primary size-4\" />\n              <CardTitle class=\"text-base font-semibold\">Active Autonomous Agent Sessions Stream</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Live telemetry, reasoning goals, active tool calls, and execution elapsed timers across agent instances.\n            </CardDescription>\n          </div>\n\n          <div class=\"flex items-center gap-2.5\">\n            <Badge variant=\"outline\" class=\"border-primary/40 bg-primary/10 text-primary font-mono text-xs font-medium\">\n              <span class=\"relative mr-1.5 flex size-1.5\">\n                <span class=\"bg-primary absolute inline-flex h-full w-full rounded-full opacity-75\" />\n                <span class=\"bg-primary relative inline-flex size-1.5 rounded-full\" />\n              </span>\n              {{ agentSessions.length }} Live Sessions\n            </Badge>\n\n            <Button variant=\"outline\" size=\"xs\" class=\"h-7 gap-1.5 text-xs font-medium\" @click=\"toggleStreaming\">\n              <component :is=\"isStreaming ? Pause : Play\" class=\"size-3.5\" />\n              <span>{{ isStreaming ? 'Pause Stream' : 'Resume Stream' }}</span>\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"space-y-3 p-5 pt-1\">\n        <div\n          v-for=\"session in agentSessions\"\n          :key=\"session.id\"\n          class=\"border-border/80 bg-muted/20 hover:bg-muted/30 hover:border-border rounded-xl border p-4 transition-colors duration-150\"\n        >\n          <!-- Session Header: Avatar, Name, Model, Status, Timer -->\n          <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex items-center gap-3\">\n              <Avatar size=\"sm\" :color=\"session.avatarColor\">\n                <AvatarFallback class=\"font-mono text-xs font-semibold\">\n                  {{ session.avatarInitials }}\n                </AvatarFallback>\n              </Avatar>\n\n              <div class=\"space-y-0.5\">\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <p class=\"text-foreground text-xs font-semibold\">{{ session.agentName }}</p>\n                  <span class=\"text-muted-foreground font-mono text-xs\">{{ session.model }}</span>\n                  <Badge variant=\"secondary\" class=\"font-mono text-xs\"> #{{ session.sessionKey }} </Badge>\n                </div>\n                <p class=\"text-muted-foreground text-xs\">{{ session.agentRole }}</p>\n              </div>\n            </div>\n\n            <div class=\"flex flex-wrap items-center gap-2.5 self-start sm:self-auto\">\n              <!-- Execution Time -->\n              <div\n                class=\"border-border bg-muted/50 text-foreground flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium tabular-nums\"\n              >\n                <Clock class=\"text-muted-foreground size-3.5\" />\n                <span>{{ formatDuration(session.elapsedSeconds) }}</span>\n              </div>\n\n              <!-- Status Badge -->\n              <Badge\n                v-if=\"session.status === 'streaming'\"\n                variant=\"outline\"\n                class=\"border-primary/40 bg-primary/10 text-primary text-xs font-medium\"\n              >\n                <Activity class=\"mr-1 size-3 animate-pulse\" />\n                {{ session.statusLabel }}\n              </Badge>\n              <Badge\n                v-else-if=\"session.status === 'reasoning'\"\n                variant=\"outline\"\n                class=\"border-info/40 bg-info/10 text-info text-xs font-medium\"\n              >\n                <Sparkles class=\"mr-1 size-3\" />\n                {{ session.statusLabel }}\n              </Badge>\n              <Badge v-else variant=\"success\" class=\"text-xs font-medium\">\n                <CheckCircle2 class=\"mr-1 size-3\" />\n                {{ session.statusLabel }}\n              </Badge>\n            </div>\n          </div>\n\n          <!-- Active Reasoning Goal Statement -->\n          <div class=\"bg-card border-border/60 my-3 rounded-lg border p-3 text-xs leading-relaxed\">\n            <div class=\"text-muted-foreground flex items-start gap-2\">\n              <Terminal class=\"text-primary mt-0.5 size-3.5 shrink-0\" />\n              <span class=\"text-foreground/90 font-mono\">{{ session.reasoningGoal }}</span>\n            </div>\n          </div>\n\n          <!-- Tool Invocations & Progress Bar Row -->\n          <div class=\"flex flex-col gap-3 pt-0.5 sm:flex-row sm:items-center sm:justify-between\">\n            <div class=\"flex flex-wrap items-center gap-1.5\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Tool Traces ({{ session.toolCount }}):</span>\n              <Badge\n                v-for=\"tool in session.tools\"\n                :key=\"tool.name\"\n                variant=\"outline\"\n                class=\"border-border bg-muted/40 font-mono text-xs font-medium\"\n              >\n                {{ tool.name }} ({{ tool.count }})\n              </Badge>\n            </div>\n\n            <div class=\"flex items-center gap-2.5 font-mono text-xs\">\n              <span class=\"text-muted-foreground\">Progress</span>\n              <div class=\"bg-muted h-1.5 w-24 overflow-hidden rounded-full sm:w-28\">\n                <div\n                  class=\"bg-primary h-full transition-[width] duration-300 ease-out\"\n                  :style=\"{ width: `${session.progress}%` }\"\n                />\n              </div>\n              <span class=\"text-foreground font-semibold tabular-nums\">{{ session.progress }}%</span>\n            </div>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AiSaasCommandCenter.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "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/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Modern AI SaaS platform command center with real-time token burn telemetry, GPU cluster health, latency percentiles, and cost anomaly alerts.",
  "categories": [
    "ai",
    "analytics",
    "dashboard",
    "app"
  ]
}