{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "ai-saas-command-center", "title": "Ai Saas Command Center", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/ai-saas-command-center/AiSaasCommandCenter.tsx", "content": "'use client'\n\nimport * as React from 'react'\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-react'\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 className?: string\n}\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 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\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\nexport function AiSaasCommandCenter({ className }: Props) {\n const [isStreaming, setIsStreaming] = React.useState(true)\n const [selectedCategory, setSelectedCategory] = React.useState('all')\n const [scaleSuccessMessage, setScaleSuccessMessage] = React.useState('')\n const [lastUpdated, setLastUpdated] = React.useState('Updated just now')\n const [isRefreshing, setIsRefreshing] = React.useState(false)\n const [agentSessions, setAgentSessions] = React.useState(initialAgentSessions)\n\n React.useEffect(() => {\n const timer = setInterval(() => {\n if (isStreaming) {\n setAgentSessions((prev) =>\n prev.map((sess) => ({\n ...sess,\n elapsedSeconds: sess.elapsedSeconds + 1,\n })),\n )\n }\n }, 1000)\n return () => clearInterval(timer)\n }, [isStreaming])\n\n const filteredModels = React.useMemo(() => {\n if (selectedCategory === 'all') {\n return initialModels\n }\n return initialModels.filter((m) => m.categoryKey === selectedCategory)\n }, [selectedCategory])\n\n const toggleStreaming = () => {\n setIsStreaming((prev) => !prev)\n }\n\n const handleRefresh = () => {\n setIsRefreshing(true)\n setTimeout(() => {\n setIsRefreshing(false)\n setLastUpdated('Updated just now')\n }, 400)\n }\n\n const handleScaleNodes = () => {\n setScaleSuccessMessage('GPU Autoscaler requested +2 H100 SXM5 instances for US-West pool.')\n setTimeout(() => {\n setScaleSuccessMessage('')\n }, 4000)\n }\n\n const renderModelIcon = (iconName: string) => {\n switch (iconName) {\n case 'Code2':\n return \n case 'FileText':\n return \n case 'Bot':\n return \n case 'Sparkles':\n return \n default:\n return \n }\n }\n\n return (\n
\n {/* Header: Title, Region, Health Badge, Action Controls */}\n \n \n {/* Title & Region */}\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 {/* Controls: Rate Limits & Scale GPU Nodes */}\n
\n {/* Refresh telemetry */}\n
\n \n {lastUpdated}\n \n \n \n
\n\n \n\n {/* Configure Rate Limits */}\n \n\n {/* Scale GPU Nodes */}\n \n \n Scale GPU Nodes\n \n
\n \n \n\n {/* Scale Notification Toast / Inline Feedback */}\n {scaleSuccessMessage ? (\n
\n
\n \n {scaleSuccessMessage}\n
\n \n Provisioning ~45s\n \n
\n ) : null}\n\n {/* Cost Anomaly & Guardrail Alert Banner */}\n
\n
\n
\n \n
\n
\n
\n

Cost Anomaly & Spend Velocity Guardrails Active

\n \n Policy: P99 SLA < 800ms\n \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 {/* 4 Primary Workload Telemetry Cards */}\n
\n {/* Card 1: Total Token Burn Rate */}\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 {/* Card 2: Active Model Inferences */}\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 {/* Card 3: GPU Cluster Utilization */}\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 {/* Card 4: P99 Inference Latency */}\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 {/* Real-Time Model Workloads & Throughput Table */}\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 {/* Workload Category Filter Pills */}\n
\n {[\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 ].map((cat) => (\n setSelectedCategory(cat.key as WorkloadCategory)}\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 {filteredModels.map((model) => (\n \n {/* Model Name & Version */}\n \n
\n
\n {renderModelIcon(model.iconName)}\n
\n
\n

{model.name}

\n

{model.version}

\n
\n
\n \n\n {/* Category Badge */}\n \n \n \n {model.category}\n \n \n\n {/* Throughput */}\n \n
\n

{model.requestsPerHour}

\n

{model.tokenThroughput}

\n
\n \n\n {/* Avg Generation Time */}\n \n
\n

{model.avgGenerationTime}

\n

{model.ttft}

\n
\n \n\n {/* GPU Instance Allocation */}\n \n
\n \n {model.gpuInstances}\n
\n \n\n {/* GPU VRAM & Load */}\n \n
\n
\n {model.gpuVramUsed}\n {model.gpuUtilization}%\n
\n [data-slot=progress-indicator]]:bg-warning' : '',\n )}\n />\n
\n \n\n {/* Health Status */}\n \n \n \n {model.status === 'operational' ? 'Operational' : 'High Load'}\n \n \n \n ))}\n \n
\n
\n \n \n\n {/* Active Autonomous Agent Sessions Stream */}\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
\n \n\n \n {agentSessions.map((session) => (\n \n {/* Session Header: Avatar, Name, Model, Status, Timer */}\n
\n
\n \n \n {session.avatarInitials}\n \n \n\n
\n
\n

{session.agentName}

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

{{ ...session }.agentRole}

\n
\n
\n\n
\n {/* Execution Time */}\n
\n \n {formatDuration(session.elapsedSeconds)}\n
\n\n {/* Status Badge */}\n {session.status === 'streaming' ? (\n \n \n {session.statusLabel}\n \n ) : session.status === 'reasoning' ? (\n \n \n {session.statusLabel}\n \n ) : (\n \n \n {session.statusLabel}\n \n )}\n
\n
\n\n {/* Active Reasoning Goal Statement */}\n
\n
\n \n {session.reasoningGoal}\n
\n
\n\n {/* Tool Invocations & Progress Bar Row */}\n
\n
\n Tool Traces ({session.toolCount}):\n {session.tools.map((tool) => (\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 )\n}\n", "type": "registry:block", "target": "~/components/blocks/AiSaasCommandCenter.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "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/separator.json", "https://uipkge.dev/r/react/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" ] }