{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bento-01", "title": "Telemetry Bento", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/bento-01/bento-01.component.ts", "content": "// High-density bento grid featuring an interactive AI query copilot workbench,\n// real-time edge network telemetry feed, live latency radar, and SOC 2 compliance\n// vault status. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Activity,\n ArrowRight,\n Bot,\n CheckCircle2,\n Globe2,\n Layers,\n LucideAngularModule,\n ShieldCheck,\n Terminal,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\n\nexport type BentoEventFilter = 'all' | 'deploy' | 'security' | 'database'\n\nexport interface BentoTelemetryEvent {\n id: number\n type: Exclude\n title: string\n latency: string\n time: string\n status: string\n}\n\nconst liveTelemetryEvents: BentoTelemetryEvent[] = [\n {\n id: 1,\n type: 'deploy',\n title: 'Edge worker edge-us-east-1 deployed',\n latency: '18ms',\n time: '12s ago',\n status: 'healthy',\n },\n {\n id: 2,\n type: 'database',\n title: 'CDC stream synced 42,800 records',\n latency: '4ms',\n time: '34s ago',\n status: 'healthy',\n },\n {\n id: 3,\n type: 'security',\n title: 'Automated mTLS key rotation complete',\n latency: '120ms',\n time: '1m ago',\n status: 'healthy',\n },\n {\n id: 4,\n type: 'deploy',\n title: 'Static asset bundle cached in 32 edge PoPs',\n latency: '8ms',\n time: '2m ago',\n status: 'healthy',\n },\n]\n\nconst edgeRegions = [\n { code: 'iad1', name: 'US East (N. Virginia)', status: 'Active', latency: '12ms' },\n { code: 'fra1', name: 'EU Central (Frankfurt)', status: 'Active', latency: '18ms' },\n { code: 'hnd1', name: 'AP East (Tokyo)', status: 'Active', latency: '24ms' },\n]\n\nconst eventFilters: { id: BentoEventFilter; label: string }[] = [\n { id: 'all', label: 'All' },\n { id: 'deploy', label: 'Deploy' },\n { id: 'database', label: 'Data' },\n { id: 'security', label: 'Security' },\n]\n\nconst INITIAL_PROMPT = 'Optimize database indexing for high concurrency tenant reads'\nconst INITIAL_OUTPUT =\n 'Generated compound B-Tree index on `(tenant_id, created_at DESC)` reducing p99 latency from 142ms to 6ms.'\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bento-01, [ui-bento-01]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiProgressComponent,\n ],\n template: `\n
\n
\n \n
\n \n \n Unified Enterprise Architecture\n
\n

\n Everything your engineering team needs to move at velocity\n

\n

\n Engineered for extreme performance, continuous security governance, and multi-cloud resilience from day one.\n

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

\n Autonomous AI Query & Performance Copilot\n

\n

\n Analyzes production query patterns in real-time and recommends zero-downtime optimizations.\n

\n
\n
\n \n LLM Grounded ยท v4.8\n \n
\n\n \n
\n
\n Input Prompt Context:\n \n \n AST Validated\n \n
\n
\n
\n \n
\n \n \n {{ isSimulatingPrompt() ? 'Running...' : 'Optimize' }}\n \n
\n\n \n \n
\n \n \n Optimization Plan Output\n \n 98.4% Efficiency Gain\n
\n

{{ aiDraftOutput() }}

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

0.4ms

\n

Inference Overhead

\n
\n
\n

99.8%

\n

Syntactic Accuracy

\n
\n
\n

3.4M

\n

Queries Analyzed

\n
\n
\n
\n \n\n \n \n
\n
\n
\n
\n \n
\n \n \n 32 Edge PoPs\n \n
\n
\n

Global Edge Mesh

\n

\n Sub-20ms p99 execution worldwide with automatic zero-downtime failover routing.\n

\n
\n
\n\n \n
\n @for (region of regions; track region.code) {\n
\n
\n {{ region.code }}\n {{ region.name }}\n
\n {{ region.latency }}\n
\n }\n
\n\n
\n
\n Global Route SLA\n 99.995%\n
\n \n
\n
\n \n\n \n \n
\n
\n
\n
\n \n
\n
\n

Real-Time Event Stream

\n

\n Deterministic audit feed capturing deployments, schema migrations, and security operations.\n

\n
\n
\n\n \n
\n @for (filter of filters; track filter.id) {\n \n }\n
\n
\n\n \n
\n @for (ev of filteredEvents(); track ev.id) {\n \n
\n \n {{ ev.title }}\n
\n
\n {{ ev.latency }}\n {{ ev.time }}\n
\n
\n }\n
\n\n \n \n \n Zero message loss guaranteed via Raft consensus\n \n Throughput: ~14,200 ev/sec\n \n \n \n\n \n \n
\n
\n
\n
\n \n
\n SOC 2 Type II\n
\n
\n

Compliance & Vault

\n

\n Continuous cryptographic verification, automated KMS key rotation, and granular RBAC.\n

\n
\n
\n\n
\n
\n AES-256 GCM at rest\n \n Enforced\n \n
\n
\n mTLS v1.3 in transit\n \n Enforced\n \n
\n
\n SCIM v2 Directory Sync\n Active\n
\n
\n\n \n
\n \n \n \n
\n `,\n})\nexport class UiBento01Component {\n protected readonly Activity = Activity\n protected readonly ArrowRight = ArrowRight\n protected readonly Bot = Bot\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Globe2 = Globe2\n protected readonly Layers = Layers\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Terminal = Terminal\n protected readonly Zap = Zap\n\n protected readonly filters = eventFilters\n protected readonly regions = edgeRegions\n\n @Input('class') className?: string\n\n readonly activeEventFilter = signal('all')\n readonly isSimulatingPrompt = signal(false)\n readonly aiPromptInput = signal(INITIAL_PROMPT)\n readonly aiDraftOutput = signal(INITIAL_OUTPUT)\n\n private timer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.timer))\n }\n\n readonly filteredEvents = computed(() => {\n const filter = this.activeEventFilter()\n if (filter === 'all') return liveTelemetryEvents\n return liveTelemetryEvents.filter((e) => e.type === filter)\n })\n\n get rootClass(): string {\n return cn('bg-background w-full py-16 sm:py-24', this.className)\n }\n\n filterClass(filter: BentoEventFilter): string {\n return cn(\n 'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.activeEventFilter() === filter\n ? 'bg-card text-foreground font-semibold shadow-2xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n runAiOptimization(): void {\n this.isSimulatingPrompt.set(true)\n this.aiDraftOutput.set('Analyzing query AST and cache hit rates...')\n clearTimeout(this.timer)\n this.timer = setTimeout(() => {\n this.aiDraftOutput.set('Applied index pushdown & partitioned query plan. Estimated cache hit rate: 98.4%.')\n this.isSimulatingPrompt.set(false)\n }, 900)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/bento-01/bento-01.component.ts" }, { "path": "packages/registry-angular/blocks/bento-01/index.ts", "content": "export { UiBento01Component, type BentoEventFilter, type BentoTelemetryEvent } from './bento-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/bento-01/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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" ], "description": "High-density bento grid featuring an interactive AI query copilot workbench, real-time edge network telemetry feed, live latency radar, and SOC 2 compliance vault status.", "categories": [ "marketing" ] }