{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "ai-saas-command-center", "title": "Ai Saas Command Center", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/ai-saas-command-center/ai-saas-command-center.component.ts", "content": "// Edit this file to change the sample models, agent sessions and copy. The session timers\n// tick once a second while the stream is live; \"Pause Stream\" freezes them.\nimport {\n Component,\n DestroyRef,\n Input,\n afterNextRender,\n computed,\n inject,\n signal,\n ChangeDetectionStrategy,\n} from '@angular/core'\nimport {\n Activity,\n ArrowUpRight,\n Bot,\n CircleCheck,\n Clock,\n CodeXml,\n Cpu,\n Database,\n FileText,\n Globe,\n LucideAngularModule,\n Pause,\n Play,\n RefreshCw,\n Server,\n ShieldCheck,\n SlidersHorizontal,\n Sparkles,\n Terminal,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\n\nexport type WorkloadCategory = 'all' | 'code' | 'rag' | 'agent' | 'vision'\n\nexport interface 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\nexport interface 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 initialModels: 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 initialAgentSessions: 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\nconst categories: { key: WorkloadCategory; label: string }[] = [\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\nconst modelIcons: Record = {\n Code2: { icon: CodeXml, class: 'text-primary size-4' },\n FileText: { icon: FileText, class: 'text-info size-4' },\n Bot: { icon: Bot, class: 'text-warning size-4' },\n Sparkles: { icon: Sparkles, class: 'text-chart-1 size-4' },\n}\n\nexport function 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\n/**\n * AiSaasCommandCenter -- the React block, 1:1: cluster header with refresh / rate-limit /\n * scale actions, a guardrail banner, four telemetry cards, a filterable model workloads\n * table and a live agent sessions stream whose timers tick every second until paused.\n */\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-ai-saas-command-center, [ui-ai-saas-command-center]',\n standalone: true,\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n UiTableComponent,\n UiTableHeaderComponent,\n UiTableBodyComponent,\n UiTableRowComponent,\n UiTableHeadComponent,\n UiTableCellComponent,\n ],\n host: {\n 'data-slot': 'ai-saas-command-center',\n '[class]': 'hostClass',\n },\n template: `\n \n \n \n \n
\n \n \n
\n
\n
\n

\n AI Platform Command Center & Workloads\n

\n \n \n \n \n \n Cluster Healthy · 99.99% Uptime\n \n
\n
\n
\n \n NVIDIA H100 GPU Cluster · US-West\n
\n •\n
\n \n 16 Nodes Live · 1.28 TB Combined VRAM\n
\n
\n
\n \n\n \n
\n \n
\n \n {{ lastUpdated() }}\n \n \n \n \n
\n\n \n\n \n \n\n \n \n \n Scale GPU Nodes\n \n
\n \n \n\n \n @if (scaleSuccessMessage()) {\n \n
\n \n {{ scaleSuccessMessage() }}\n
\n \n Provisioning ~45s\n \n \n }\n\n \n \n
\n \n \n
\n
\n
\n

Cost Anomaly & Spend Velocity Guardrails Active

\n Policy: P99 SLA < 800ms\n
\n

\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

\n
\n \n\n
\n Budget Cap:\n $5,000 / day (34.2% consumed)\n
\n \n\n \n
\n \n \n \n
\n Total Token Burn Rate\n \n \n
\n
\n
\n
\n 4,850\n tok/sec\n
\n

$142.50 / hr

\n
\n \n \n \n Daily Volume\n 184.2M tokens\n \n
\n \n \n +12.4% vs prev hour\n \n Stable burn\n
\n \n \n\n \n \n \n
\n Active Model Inferences\n \n \n
\n \n
\n
\n 48\n concurrent\n
\n

48 Concurrent Agent Sessions

\n
\n \n \n \n Throughput\n 1,420 req / min\n \n
\n 0 queued jobs\n Pool: 48/64\n
\n \n \n\n \n \n \n
\n GPU Cluster Utilization\n \n \n
\n \n
\n
\n 88.4%\n compute\n
\n

76.2 GB / 80 GB VRAM

\n
\n \n \n
\n \n
\n
\n Thermal: 58°C\n 16/16 H100 Online\n
\n \n \n\n \n \n \n
\n P99 Inference Latency\n
\n \n
\n
\n
\n
\n 640ms\n P99\n
\n

Sub-second TTFT (180ms)

\n
\n \n \n \n P50: 310ms\n P90: 490ms\n \n
\n Target < 800ms SLA\n Optimal\n
\n \n \n \n\n \n \n \n
\n
\n
\n \n Real-Time Model Workloads & Throughput\n
\n \n Live inference telemetry, compute allocation, and throughput metrics across deployed foundation models.\n \n
\n\n \n
\n @for (cat of categories; track cat.key) {\n \n {{ cat.label }}\n \n }\n
\n
\n \n\n \n
\n
\n \n \n Model Name & Version\n Workload Category\n Throughput\n Avg Generation Time\n GPU Instance Allocation\n GPU VRAM & Load\n Health Status\n \n \n \n @for (model of filteredModels(); track model.id) {\n \n \n \n
\n \n \n
\n
\n

{{ model.name }}

\n

{{ model.version }}

\n
\n
\n \n\n \n \n \n \n {{ model.category }}\n \n \n\n \n \n
\n

{{ model.requestsPerHour }}

\n

{{ model.tokenThroughput }}

\n
\n \n\n \n \n
\n

{{ model.avgGenerationTime }}

\n

{{ model.ttft }}

\n
\n \n\n \n \n
\n \n {{ model.gpuInstances }}\n
\n \n\n \n \n
\n
\n {{ model.gpuVramUsed }}\n {{ model.gpuUtilization }}%\n
\n \n
\n \n\n \n \n \n \n {{ model.status === 'operational' ? 'Operational' : 'High Load' }}\n \n \n \n }\n \n
\n \n \n \n\n \n \n \n
\n
\n
\n \n Active Autonomous Agent Sessions Stream\n
\n \n Live telemetry, reasoning goals, active tool calls, and execution elapsed timers across agent instances.\n \n
\n\n
\n \n \n \n \n \n {{ agentSessions().length }} Live Sessions\n \n\n \n \n {{ isStreaming() ? 'Pause Stream' : 'Resume Stream' }}\n \n
\n
\n \n\n \n @for (session of agentSessions(); track session.id) {\n \n \n
\n
\n \n \n {{ session.avatarInitials }}\n \n \n\n
\n
\n

{{ session.agentName }}

\n {{ session.model }}\n #{{ session.sessionKey }}\n
\n

{{ session.agentRole }}

\n
\n
\n\n
\n \n \n \n {{ formatDuration(session.elapsedSeconds) }}\n
\n\n \n @switch (session.status) {\n @case ('streaming') {\n \n \n \n {{ session.statusLabel }}\n \n }\n @case ('reasoning') {\n \n \n {{ session.statusLabel }}\n \n }\n @default {\n \n \n {{ session.statusLabel }}\n \n }\n }\n
\n \n\n \n
\n
\n \n {{ session.reasoningGoal }}\n
\n
\n\n \n
\n
\n Tool Traces ({{ session.toolCount }}):\n @for (tool of session.tools; track tool.name) {\n \n {{ tool.name }} ({{ tool.count }})\n \n }\n
\n\n
\n Progress\n
\n
\n
\n {{ session.progress }}%\n
\n \n \n }\n \n \n `,\n})\nexport class UiAiSaasCommandCenterComponent {\n @Input('class') className?: string\n\n readonly isStreaming = signal(true)\n readonly selectedCategory = signal('all')\n readonly scaleSuccessMessage = signal('')\n readonly lastUpdated = signal('Updated just now')\n readonly isRefreshing = signal(false)\n readonly agentSessions = signal(initialAgentSessions)\n\n readonly filteredModels = computed(() => {\n const category = this.selectedCategory()\n if (category === 'all') return initialModels\n return initialModels.filter((m) => m.categoryKey === category)\n })\n\n protected readonly refreshIconClass = computed(() => cn('size-3.5', this.isRefreshing() ? 'animate-spin' : ''))\n\n protected readonly categories = categories\n protected readonly cn = cn\n protected readonly formatDuration = formatDuration\n\n protected readonly Activity = Activity\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly Bot = Bot\n protected readonly CircleCheck = CircleCheck\n protected readonly Clock = Clock\n protected readonly Cpu = Cpu\n protected readonly Database = Database\n protected readonly Globe = Globe\n protected readonly Pause = Pause\n protected readonly Play = Play\n protected readonly RefreshCw = RefreshCw\n protected readonly Server = Server\n protected readonly ShieldCheck = ShieldCheck\n protected readonly SlidersHorizontal = SlidersHorizontal\n protected readonly Sparkles = Sparkles\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n private interval: ReturnType | undefined\n private readonly timeouts = new Set>()\n\n constructor() {\n // Browser only, after the first render (React's useEffect): tick the session timers.\n afterNextRender(() => {\n this.interval = setInterval(() => {\n if (!this.isStreaming()) return\n this.agentSessions.update((prev) => prev.map((sess) => ({ ...sess, elapsedSeconds: sess.elapsedSeconds + 1 })))\n }, 1000)\n })\n inject(DestroyRef).onDestroy(() => {\n clearInterval(this.interval)\n this.timeouts.forEach((t) => clearTimeout(t))\n })\n }\n\n get hostClass(): string {\n return cn('block w-full space-y-6', this.className)\n }\n\n toggleStreaming(): void {\n this.isStreaming.update((prev) => !prev)\n }\n\n handleRefresh(): void {\n this.isRefreshing.set(true)\n this.later(400, () => {\n this.isRefreshing.set(false)\n this.lastUpdated.set('Updated just now')\n })\n }\n\n handleScaleNodes(): void {\n this.scaleSuccessMessage.set('GPU Autoscaler requested +2 H100 SXM5 instances for US-West pool.')\n this.later(4000, () => this.scaleSuccessMessage.set(''))\n }\n\n protected modelIcon(model: ModelWorkload): { icon: LucideIconData; class: string } {\n return modelIcons[model.iconName]\n }\n\n protected progressClass(model: ModelWorkload): string {\n return cn('h-1.5', model.status === 'high_load' ? '[&>[data-slot=progress-indicator]]:bg-warning' : '')\n }\n\n private later(ms: number, fn: () => void): void {\n const t = setTimeout(() => {\n this.timeouts.delete(t)\n fn()\n }, ms)\n this.timeouts.add(t)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-saas-command-center/ai-saas-command-center.component.ts" }, { "path": "packages/registry-angular/blocks/ai-saas-command-center/index.ts", "content": "export {\n UiAiSaasCommandCenterComponent,\n formatDuration,\n type AgentSession,\n type ModelWorkload,\n type WorkloadCategory,\n} from './ai-saas-command-center.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/ai-saas-command-center/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/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" ] }