{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "kafka-stream-monitor",
  "title": "Kafka Stream Monitor",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/kafka-stream-monitor/KafkaStreamMonitor.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  Check,\n  CheckCircle2,\n  ChevronDown,\n  ChevronRight,\n  Copy,\n  Filter,\n  Gauge,\n  HardDrive,\n  Layers,\n  Pause,\n  Play,\n  PlusCircle,\n  Radio,\n  RotateCcw,\n  Search,\n  ShieldCheck,\n  Terminal,\n  Trash2,\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 { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface KafkaStreamMessage {\n  id: string\n  offset: number\n  partition: number\n  key: string\n  timestamp: string\n  eventType: string\n  sizeBytes: number\n  schemaId: number\n  traceId: string\n  payload: Record<string, unknown>\n}\n\nexport interface PartitionTelemetryRow {\n  partitionId: number\n  leaderBroker: string\n  rack: string\n  logEndOffset: number\n  consumerOffset: number\n  lag: number\n  messageRate: string\n  isrCount: number\n  replicasCount: number\n  status: 'healthy' | 'warning'\n}\n\ninterface Props {\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\n\nconst partitions: PartitionTelemetryRow[] = [\n  {\n    partitionId: 0,\n    leaderBroker: 'Broker #102',\n    rack: 'us-east-1a',\n    logEndOffset: 1482910,\n    consumerOffset: 1482910,\n    lag: 0,\n    messageRate: '1.2k msg/s',\n    isrCount: 3,\n    replicasCount: 3,\n    status: 'healthy',\n  },\n  {\n    partitionId: 1,\n    leaderBroker: 'Broker #103',\n    rack: 'us-east-1b',\n    logEndOffset: 1482884,\n    consumerOffset: 1482884,\n    lag: 0,\n    messageRate: '1.1k msg/s',\n    isrCount: 3,\n    replicasCount: 3,\n    status: 'healthy',\n  },\n  {\n    partitionId: 2,\n    leaderBroker: 'Broker #101',\n    rack: 'us-east-1c',\n    logEndOffset: 1482905,\n    consumerOffset: 1482905,\n    lag: 0,\n    messageRate: '1.4k msg/s',\n    isrCount: 3,\n    replicasCount: 3,\n    status: 'healthy',\n  },\n  {\n    partitionId: 3,\n    leaderBroker: 'Broker #104',\n    rack: 'us-east-1a',\n    logEndOffset: 1482872,\n    consumerOffset: 1482872,\n    lag: 0,\n    messageRate: '1.2k msg/s',\n    isrCount: 3,\n    replicasCount: 3,\n    status: 'healthy',\n  },\n]\n\nconst defaultMessages: KafkaStreamMessage[] = [\n  {\n    id: 'msg-1482910',\n    offset: 1482910,\n    partition: 0,\n    key: 'cust_99201a',\n    timestamp: '2026-08-21 14:32:05.812 UTC',\n    eventType: 'checkout.order_completed',\n    sizeBytes: 1420,\n    schemaId: 104,\n    traceId: '00-4bf92f3577b34da6a3ce929d0e0e4736',\n    payload: {\n      order_id: 'ord_9920184a',\n      customer_id: 'cust_99201a',\n      checkout_session: 'cs_live_992019482',\n      currency: 'USD',\n      total_amount: 349.5,\n      item_count: 3,\n      items: [\n        { sku: 'SKU-PRO-4K', name: 'UltraHD Pro Monitor 32-inch', qty: 1, price: 299.0 },\n        { sku: 'SKU-USB-C-2M', name: 'Braided Thunderbolt 4 Cable 2m', qty: 2, price: 25.25 },\n      ],\n      payment_status: 'authorized',\n      fraud_risk_score: 0.02,\n      shipping_destination: 'US-CA-94105',\n      produced_at_epoch_ms: 1787322725812,\n    },\n  },\n  {\n    id: 'msg-1482909',\n    offset: 1482909,\n    partition: 2,\n    key: 'cust_88301b',\n    timestamp: '2026-08-21 14:31:58.240 UTC',\n    eventType: 'checkout.payment_authorized',\n    sizeBytes: 890,\n    schemaId: 104,\n    traceId: '00-7c201a9981f34ec189aa1029481920aa',\n    payload: {\n      transaction_id: 'txn_8830192b',\n      customer_id: 'cust_88301b',\n      payment_provider: 'stripe_us_direct',\n      amount: 129.0,\n      currency: 'USD',\n      card_brand: 'visa',\n      last4: '4242',\n      avs_check: 'matched',\n      cvv_check: 'matched',\n      '3ds_authenticated': true,\n      latency_ms: 142,\n    },\n  },\n  {\n    id: 'msg-1482908',\n    offset: 1482908,\n    partition: 1,\n    key: 'cust_44109c',\n    timestamp: '2026-08-21 14:31:44.102 UTC',\n    eventType: 'checkout.cart_updated',\n    sizeBytes: 1150,\n    schemaId: 104,\n    traceId: '00-11209e8832a44bb0902188492019ab23',\n    payload: {\n      cart_id: 'cart_4410912c',\n      customer_id: 'cust_44109c',\n      action: 'item_added',\n      sku: 'SKU-MECH-KEYBOARD',\n      name: 'Custom Wireless Mechanical Keyboard',\n      quantity: 1,\n      unit_price: 189.0,\n      applied_promo_code: 'DEVCON2026',\n      discount_amount: 18.9,\n      cart_subtotal: 170.1,\n    },\n  },\n  {\n    id: 'msg-1482907',\n    offset: 1482907,\n    partition: 3,\n    key: 'cust_11094d',\n    timestamp: '2026-08-21 14:31:22.955 UTC',\n    eventType: 'checkout.shipping_calculated',\n    sizeBytes: 760,\n    schemaId: 104,\n    traceId: '00-66a9104882194cc2810992384719bb81',\n    payload: {\n      quote_id: 'shp_1109482d',\n      customer_id: 'cust_11094d',\n      carrier: 'FedEx Express',\n      service_tier: 'Priority Overnight',\n      estimated_delivery: '2026-08-22T10:30:00Z',\n      rate_usd: 24.5,\n      origin_postal: '94105',\n      destination_postal: '10001',\n      weight_kg: 1.85,\n    },\n  },\n  {\n    id: 'msg-1482906',\n    offset: 1482906,\n    partition: 0,\n    key: 'cust_77210e',\n    timestamp: '2026-08-21 14:31:05.419 UTC',\n    eventType: 'checkout.address_validated',\n    sizeBytes: 640,\n    schemaId: 104,\n    traceId: '00-559012bb99304ff091920394881029cc',\n    payload: {\n      validation_id: 'val_7721098e',\n      customer_id: 'cust_77210e',\n      country: 'US',\n      state: 'CA',\n      city: 'San Francisco',\n      postal_code: '94107',\n      is_residential: true,\n      standardized: true,\n      dpv_match: 'Y',\n      service: 'smartystreets_v2',\n    },\n  },\n]\n\nconst messages = ref<KafkaStreamMessage[]>([...defaultMessages])\nconst isPaused = ref(false)\nconst selectedPartition = ref<number | 'all'>('all')\nconst searchQuery = ref('')\nconst expandedOffsets = ref<Record<number, boolean>>({\n  1482910: true,\n})\nconst copiedId = ref<string | null>(null)\nconst produceNotice = ref<string | null>(null)\nconst nextOffset = ref(1482911)\n\nconst filteredMessages = computed(() => {\n  return messages.value.filter((msg) => {\n    const matchesPartition = selectedPartition.value === 'all' || msg.partition === selectedPartition.value\n    if (!matchesPartition) return false\n\n    if (!searchQuery.value.trim()) return true\n    const q = searchQuery.value.trim().toLowerCase()\n    return (\n      msg.key.toLowerCase().includes(q) ||\n      msg.eventType.toLowerCase().includes(q) ||\n      msg.offset.toString().includes(q) ||\n      msg.partition.toString().includes(q) ||\n      JSON.stringify(msg.payload).toLowerCase().includes(q)\n    )\n  })\n})\n\nconst allExpanded = computed(() => {\n  return filteredMessages.value.length > 0 && filteredMessages.value.every((msg) => expandedOffsets.value[msg.offset])\n})\n\nfunction togglePause() {\n  isPaused.value = !isPaused.value\n}\n\nfunction toggleExpand(offset: number) {\n  expandedOffsets.value[offset] = !expandedOffsets.value[offset]\n}\n\nfunction toggleAllExpand() {\n  if (allExpanded.value) {\n    expandedOffsets.value = {}\n  } else {\n    const next: Record<number, boolean> = {}\n    filteredMessages.value.forEach((m) => {\n      next[m.offset] = true\n    })\n    expandedOffsets.value = next\n  }\n}\n\nfunction clearStream() {\n  messages.value = []\n  expandedOffsets.value = {}\n}\n\nfunction resetStream() {\n  messages.value = [...defaultMessages]\n  searchQuery.value = ''\n  selectedPartition.value = 'all'\n  expandedOffsets.value = { 1482910: true }\n}\n\nfunction copyPayload(id: string, payload: Record<string, unknown>) {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(JSON.stringify(payload, null, 2))\n    copiedId.value = id\n    setTimeout(() => {\n      if (copiedId.value === id) {\n        copiedId.value = null\n      }\n    }, 2000)\n  }\n}\n\nfunction produceTestMessage() {\n  const currentOffset = nextOffset.value++\n  const targetPartition = currentOffset % 4\n  const testCustomer = `cust_${Math.random().toString(36).substring(2, 8)}`\n  const testOrderId = `ord_${Math.random().toString(36).substring(2, 9)}`\n  const testAmount = +(Math.random() * 250 + 25).toFixed(2)\n\n  const newMessage: KafkaStreamMessage = {\n    id: `msg-${currentOffset}`,\n    offset: currentOffset,\n    partition: targetPartition,\n    key: testCustomer,\n    timestamp: new Date().toISOString().replace('T', ' ').slice(0, 23) + ' UTC',\n    eventType: 'checkout.order_placed',\n    sizeBytes: 1280,\n    schemaId: 104,\n    traceId: `00-${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}${Math.random().toString(16).substring(2, 10)}`,\n    payload: {\n      order_id: testOrderId,\n      customer_id: testCustomer,\n      currency: 'USD',\n      total_amount: testAmount,\n      item_count: Math.floor(Math.random() * 3) + 1,\n      items: [\n        {\n          sku: 'SKU-SYNTH-DEVICE',\n          name: 'Developer Workstation Hub',\n          qty: 1,\n          price: testAmount,\n        },\n      ],\n      payment_status: 'authorized',\n      producer: 'console-stream-tester-ui',\n      test_message: true,\n    },\n  }\n\n  messages.value.unshift(newMessage)\n  expandedOffsets.value[currentOffset] = true\n  produceNotice.value = `Produced message #${currentOffset.toLocaleString()} to Partition ${targetPartition}`\n\n  setTimeout(() => {\n    if (produceNotice.value?.includes(currentOffset.toLocaleString())) {\n      produceNotice.value = null\n    }\n  }, 3500)\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  return `${(bytes / 1024).toFixed(1)} KB`\n}\n</script>\n\n<template>\n  <div data-slot=\"kafka-stream-monitor\" :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 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"space-y-1.5\">\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <div\n            class=\"bg-muted text-muted-foreground border-border flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n            aria-hidden=\"true\"\n          >\n            <Radio class=\"text-primary size-4.5\" />\n          </div>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"text-muted-foreground font-mono text-xs font-medium\">production-kafka-us-east-1</span>\n            <span class=\"text-muted-foreground text-xs\">/</span>\n            <h1 class=\"text-foreground font-mono text-xl font-bold tracking-tight break-all sm:text-2xl\">\n              events.customer.checkout_v2\n            </h1>\n          </div>\n          <Badge variant=\"success\" class=\"gap-1.5 text-xs font-medium\">\n            <span class=\"relative flex size-2 shrink-0\">\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-2 rounded-full\" />\n            </span>\n            <span>Healthy · Zero Consumer Lag</span>\n          </Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs\">\n          12 Partitions · Replication Factor: 3 · min.insync.replicas: 2 · Cleanup Policy: delete,compact\n        </p>\n      </div>\n\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"resetStream\">\n          <RotateCcw class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>Reset</span>\n        </Button>\n\n        <Button variant=\"default\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"produceTestMessage\">\n          <PlusCircle class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>Produce Test Message</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Active Produce Alert Banner -->\n    <div\n      v-if=\"produceNotice\"\n      class=\"border-border bg-card flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n      role=\"status\"\n    >\n      <div class=\"flex items-center gap-2\">\n        <CheckCircle2 class=\"text-primary size-4 shrink-0\" aria-hidden=\"true\" />\n        <span class=\"text-foreground font-medium\">{{ produceNotice }}</span>\n      </div>\n      <Badge variant=\"outline\" class=\"font-mono text-xs\">Offset Ack: OK (2ms)</Badge>\n    </div>\n\n    <!-- 4 Kafka Telemetry Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Message Inflow Rate -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex 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                <Activity class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-xs font-medium\">Message Inflow Rate</CardTitle>\n            </div>\n            <Badge variant=\"outline\" class=\"shrink-0 text-xs font-normal tabular-nums\"> +5.8% 1h </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">14,250 msgs/sec</div>\n            <p class=\"text-muted-foreground text-xs tabular-nums\">2.4 MB/s throughput</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Ingress Bandwidth</span>\n              <span class=\"text-foreground font-medium tabular-nums\">48% of cap</span>\n            </div>\n            <Progress :model-value=\"48\" class=\"h-1.5\" />\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Consumer Group Lag -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex 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=\"truncate text-xs font-medium\">Consumer Group Lag</CardTitle>\n            </div>\n            <Badge variant=\"success\" class=\"shrink-0 text-xs\"> Real-time </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">0 messages lag</div>\n            <p class=\"text-muted-foreground text-xs\">across 4 consumer groups</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Processing Drift</span>\n              <span class=\"text-foreground font-medium tabular-nums\">0 ms lag</span>\n            </div>\n            <Progress :model-value=\"100\" class=\"h-1.5\" />\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Total Retention -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex 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                <HardDrive class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-xs font-medium\">Total Retention</CardTitle>\n            </div>\n            <Badge variant=\"outline\" class=\"shrink-0 text-xs font-normal\"> 7 Days </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">480 GB total footprint</div>\n            <p class=\"text-muted-foreground text-xs tabular-nums\">40 GB avg / partition</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Disk Footprint</span>\n              <span class=\"text-foreground font-medium tabular-nums\">480 GB / 1.0 TB</span>\n            </div>\n            <Progress :model-value=\"48\" class=\"h-1.5\" />\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Under-Replicated Partitions -->\n      <Card class=\"flex flex-col justify-between shadow-xs\">\n        <CardHeader class=\"pb-2\">\n          <div class=\"flex 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                <ShieldCheck class=\"size-4\" />\n              </div>\n              <CardTitle class=\"truncate text-xs font-medium\">Under-Replicated</CardTitle>\n            </div>\n            <Badge variant=\"success\" class=\"shrink-0 text-xs\"> In-Sync </Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-3\">\n          <div>\n            <div class=\"text-foreground text-2xl font-bold tracking-tight tabular-nums\">0 / 12 Partitions</div>\n            <p class=\"text-muted-foreground text-xs\">All 36 replicas fully in-sync (ISR)</p>\n          </div>\n          <div class=\"space-y-1.5\">\n            <div class=\"text-muted-foreground flex items-center justify-between text-xs\">\n              <span>Replication Health</span>\n              <span class=\"text-foreground font-medium tabular-nums\">100% ISR</span>\n            </div>\n            <Progress :model-value=\"100\" class=\"h-1.5\" />\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Partitions & Offset Distribution Table -->\n    <Card class=\"shadow-xs\">\n      <CardHeader>\n        <div class=\"flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base\">Partitions & Offset Distribution</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Per-partition log high-water marks, consumer group commitments, and leader broker assignments.\n            </CardDescription>\n          </div>\n          <Badge variant=\"outline\" class=\"w-fit font-mono text-xs font-normal tabular-nums\">\n            Showing 4 of 12 Partitions\n          </Badge>\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\">Partition ID</TableHead>\n                <TableHead class=\"text-xs\">Leader Broker</TableHead>\n                <TableHead class=\"text-right text-xs\">Log End Offset</TableHead>\n                <TableHead class=\"text-right text-xs\">Consumer Offset</TableHead>\n                <TableHead class=\"text-right text-xs\">Lag</TableHead>\n                <TableHead class=\"text-right text-xs\">Message Rate</TableHead>\n                <TableHead class=\"text-right text-xs\">Replicas (ISR)</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"partition in partitions\" :key=\"partition.partitionId\">\n                <TableCell class=\"text-xs font-medium\">\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"bg-success size-2 rounded-full\" aria-hidden=\"true\" />\n                    <span class=\"font-mono\">Partition {{ partition.partitionId }}</span>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-xs\">\n                  <div class=\"flex items-center gap-1.5\">\n                    <span class=\"text-foreground font-medium\">{{ partition.leaderBroker }}</span>\n                    <span class=\"text-muted-foreground font-mono text-xs\">({{ partition.rack }})</span>\n                  </div>\n                </TableCell>\n                <TableCell class=\"text-foreground text-right font-mono text-xs font-medium tabular-nums\">\n                  {{ partition.logEndOffset.toLocaleString() }}\n                </TableCell>\n                <TableCell class=\"text-muted-foreground text-right font-mono text-xs tabular-nums\">\n                  {{ partition.consumerOffset.toLocaleString() }}\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge variant=\"success\" class=\"font-mono text-xs tabular-nums\">\n                    {{ partition.lag }}\n                  </Badge>\n                </TableCell>\n                <TableCell class=\"text-foreground text-right font-mono text-xs font-medium tabular-nums\">\n                  {{ partition.messageRate }}\n                </TableCell>\n                <TableCell class=\"text-right\">\n                  <Badge variant=\"outline\" class=\"font-mono text-xs tabular-nums\">\n                    {{ partition.isrCount }} / {{ partition.replicasCount }} In-Sync\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Live Message Stream Inspector -->\n    <Card class=\"shadow-xs\">\n      <!-- Inspector Header Bar -->\n      <div class=\"bg-muted/40 flex flex-col gap-3 border-b p-3.5 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-center gap-2.5\">\n          <div class=\"flex items-center gap-1.5\">\n            <span class=\"bg-destructive/80 size-2.5 rounded-full\" />\n            <span class=\"bg-warning/80 size-2.5 rounded-full\" />\n            <span class=\"bg-success/80 size-2.5 rounded-full\" />\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <span class=\"text-foreground text-xs font-semibold\">Live Message Stream Inspector</span>\n            <div\n              v-if=\"!isPaused\"\n              class=\"border-border bg-card inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium\"\n            >\n              <span class=\"relative flex size-1.5 shrink-0\">\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              <span class=\"text-muted-foreground\">Streaming</span>\n            </div>\n            <div\n              v-else\n              class=\"border-border bg-card inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-xs font-medium\"\n            >\n              <span class=\"bg-warning relative inline-flex size-1.5 rounded-full\" />\n              <span class=\"text-muted-foreground\">Paused</span>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-2\">\n          <Button\n            variant=\"outline\"\n            size=\"xs\"\n            class=\"h-7 gap-1 text-xs\"\n            :disabled=\"filteredMessages.length === 0\"\n            @click=\"toggleAllExpand\"\n          >\n            <ChevronDown v-if=\"allExpanded\" class=\"size-3\" aria-hidden=\"true\" />\n            <ChevronRight v-else class=\"size-3\" aria-hidden=\"true\" />\n            <span>{{ allExpanded ? 'Collapse All' : 'Expand All' }}</span>\n          </Button>\n\n          <Button variant=\"outline\" size=\"xs\" class=\"h-7 gap-1 text-xs\" @click=\"togglePause\">\n            <Play v-if=\"isPaused\" class=\"size-3 fill-current\" aria-hidden=\"true\" />\n            <Pause v-else class=\"size-3\" aria-hidden=\"true\" />\n            <span>{{ isPaused ? 'Resume' : 'Pause' }}</span>\n          </Button>\n\n          <Button\n            variant=\"outline\"\n            size=\"xs\"\n            class=\"h-7 gap-1 text-xs\"\n            :disabled=\"messages.length === 0\"\n            @click=\"clearStream\"\n          >\n            <Trash2 class=\"size-3\" aria-hidden=\"true\" />\n            <span>Clear</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Filter and Partition Selector Controls -->\n      <div class=\"bg-card/50 flex flex-col gap-3 border-b p-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"relative flex-1\">\n          <Search\n            class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\"\n            aria-hidden=\"true\"\n          />\n          <Input\n            v-model=\"searchQuery\"\n            placeholder=\"Filter message key, offset, event type, or JSON payload...\"\n            class=\"h-8 pl-8 text-xs\"\n          />\n        </div>\n\n        <div class=\"flex flex-wrap items-center gap-1\">\n          <span class=\"text-muted-foreground mr-1 flex items-center gap-1 text-xs font-medium\">\n            <Filter class=\"size-3\" aria-hidden=\"true\" />\n            Partition:\n          </span>\n\n          <button\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring inline-flex h-7 items-center rounded-md border px-2.5 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                selectedPartition === 'all'\n                  ? 'border-primary bg-primary text-primary-foreground shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground',\n              )\n            \"\n            @click=\"selectedPartition = 'all'\"\n          >\n            All\n          </button>\n\n          <button\n            v-for=\"p in [0, 1, 2, 3]\"\n            :key=\"p\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'focus-visible:ring-ring inline-flex h-7 items-center rounded-md border px-2.5 font-mono text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                selectedPartition === p\n                  ? 'border-primary bg-primary text-primary-foreground shadow-xs'\n                  : 'border-border bg-card text-muted-foreground hover:bg-accent hover:text-foreground',\n              )\n            \"\n            @click=\"selectedPartition = p\"\n          >\n            P-{{ p }}\n          </button>\n        </div>\n      </div>\n\n      <!-- Messages Stream List -->\n      <CardContent class=\"p-0\">\n        <!-- Empty State -->\n        <div\n          v-if=\"filteredMessages.length === 0\"\n          class=\"flex flex-col items-center justify-center gap-2.5 px-4 py-12 text-center\"\n        >\n          <div class=\"bg-muted flex size-10 items-center justify-center rounded-full\">\n            <Radio class=\"text-muted-foreground size-5 opacity-60\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1\">\n            <p class=\"text-foreground text-sm font-semibold\">No messages found</p>\n            <p class=\"text-muted-foreground text-xs\">\n              {{\n                messages.length === 0\n                  ? 'Message buffer was cleared. Reset to restore sample messages or produce a test event.'\n                  : 'Try clearing the search query or changing partition filter.'\n              }}\n            </p>\n          </div>\n          <Button variant=\"outline\" size=\"sm\" class=\"mt-1 gap-1.5 text-xs\" @click=\"resetStream\">\n            <RotateCcw class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Reset Stream</span>\n          </Button>\n        </div>\n\n        <!-- Stream Items -->\n        <ul v-else class=\"divide-border/60 divide-y\">\n          <li\n            v-for=\"msg in filteredMessages\"\n            :key=\"msg.id\"\n            :class=\"cn('group transition-colors', expandedOffsets[msg.offset] ? 'bg-muted/30' : 'hover:bg-muted/20')\"\n          >\n            <!-- Row Trigger -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :aria-expanded=\"!!expandedOffsets[msg.offset]\"\n              class=\"focus-visible:ring-ring flex cursor-pointer flex-col gap-2.5 p-3.5 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset sm:flex-row sm:items-center sm:justify-between\"\n              @click=\"toggleExpand(msg.offset)\"\n              @keydown.enter.prevent=\"toggleExpand(msg.offset)\"\n              @keydown.space.prevent=\"toggleExpand(msg.offset)\"\n            >\n              <!-- Left: Chevron + Offset + Partition + Key + Event -->\n              <div class=\"flex min-w-0 items-start gap-3 sm:items-center\">\n                <button\n                  type=\"button\"\n                  aria-label=\"Toggle payload details\"\n                  class=\"text-muted-foreground group-hover:text-foreground mt-0.5 shrink-0 transition-transform sm:mt-0\"\n                  :class=\"expandedOffsets[msg.offset] ? 'text-foreground rotate-90' : ''\"\n                >\n                  <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n                </button>\n\n                <div class=\"space-y-1\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <span class=\"text-foreground font-mono text-xs font-bold tabular-nums\">\n                      #{{ msg.offset.toLocaleString() }}\n                    </span>\n\n                    <Badge variant=\"outline\" class=\"font-mono text-xs\"> P-{{ msg.partition }} </Badge>\n\n                    <Badge variant=\"secondary\" class=\"font-mono text-xs font-normal\"> key: {{ msg.key }} </Badge>\n\n                    <span class=\"text-foreground font-mono text-xs font-semibold\">\n                      {{ msg.eventType }}\n                    </span>\n                  </div>\n\n                  <p class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                    {{ msg.timestamp }}\n                  </p>\n                </div>\n              </div>\n\n              <!-- Right: Size + Trace ID -->\n              <div class=\"flex shrink-0 items-center gap-2.5 sm:justify-end\">\n                <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                  {{ formatBytes(msg.sizeBytes) }}\n                </span>\n                <Badge variant=\"outline\" class=\"hidden font-mono text-xs font-normal sm:inline-flex\">\n                  schema_id: {{ msg.schemaId }}\n                </Badge>\n              </div>\n            </div>\n\n            <!-- Expanded Payload Detail View -->\n            <div v-if=\"expandedOffsets[msg.offset]\" class=\"bg-muted/15 border-t px-4 py-3.5\">\n              <div class=\"space-y-3\">\n                <!-- Metadata Info Strip -->\n                <div\n                  class=\"bg-card flex flex-col gap-2 rounded-md border p-2.5 text-xs sm:flex-row sm:items-center sm:justify-between\"\n                >\n                  <div class=\"flex min-w-0 items-center gap-2\">\n                    <span class=\"text-muted-foreground shrink-0 font-medium\">Trace ID:</span>\n                    <span class=\"text-foreground truncate font-mono\">{{ msg.traceId }}</span>\n                  </div>\n                  <div class=\"flex items-center gap-2\">\n                    <span class=\"text-muted-foreground\">Format:</span>\n                    <Badge variant=\"outline\" class=\"font-mono text-xs\">json+avro</Badge>\n                  </div>\n                </div>\n\n                <!-- JSON Payload Inspector Box -->\n                <div class=\"overflow-hidden rounded-md border bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\">\n                  <div class=\"flex items-center justify-between border-b border-zinc-800 bg-zinc-900/90 px-3 py-1.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n                      <span class=\"text-muted-foreground text-xs\">deserialized_payload.json</span>\n                    </div>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"xs\"\n                      class=\"h-6 gap-1 px-2 text-xs text-zinc-300 hover:bg-zinc-800 hover:text-zinc-100\"\n                      @click=\"copyPayload(msg.id, msg.payload)\"\n                    >\n                      <Check v-if=\"copiedId === msg.id\" class=\"text-success size-3\" aria-hidden=\"true\" />\n                      <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                      <span>{{ copiedId === msg.id ? 'Copied' : 'Copy JSON' }}</span>\n                    </Button>\n                  </div>\n\n                  <pre\n                    class=\"max-h-64 overflow-x-auto overflow-y-auto p-3 text-xs leading-relaxed select-text\"\n                  ><code class=\"text-success\">{{ JSON.stringify(msg.payload, null, 2) }}</code></pre>\n                </div>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </CardContent>\n\n      <!-- Bottom Stream Telemetry Bar -->\n      <div\n        class=\"bg-muted/40 flex flex-col gap-2.5 border-t px-4 py-3 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"text-muted-foreground flex flex-wrap items-center gap-4\">\n          <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n            <Activity class=\"text-success size-3.5\" aria-hidden=\"true\" />\n            <span>Rate:</span>\n            <span class=\"font-mono\">{{ isPaused ? '0 msg/s (Paused)' : '14,250 msgs/sec' }}</span>\n          </div>\n\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n\n          <div class=\"flex items-center gap-1.5\">\n            <Layers class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>Buffer:</span>\n            <span class=\"text-foreground font-mono\">{{ filteredMessages.length }} / {{ messages.length }} cached</span>\n          </div>\n\n          <Separator orientation=\"vertical\" class=\"hidden h-3.5 sm:block\" />\n\n          <div class=\"flex items-center gap-1.5\">\n            <Zap class=\"text-warning size-3.5\" aria-hidden=\"true\" />\n            <span>Avg Latency:</span>\n            <span class=\"text-foreground font-mono\">1.8ms</span>\n          </div>\n        </div>\n\n        <div class=\"text-muted-foreground flex items-center gap-2 font-mono\">\n          <span class=\"bg-success size-1.5 rounded-full\" />\n          <span>SASL_SSL · LZ4 Compression · Schema Registry OK</span>\n        </div>\n      </div>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/KafkaStreamMonitor.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/input.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Apache Kafka & Redpanda topic stream telemetry dashboard: partition offset monitor, leader broker distribution, consumer group lag tracker, and real-time message payload inspector with deserialized JSON viewer.",
  "categories": [
    "devops",
    "dashboard",
    "data",
    "app"
  ]
}