{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "cdc-replication-stream",
  "title": "Cdc Replication Stream",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/cdc-replication-stream/CdcReplicationStream.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  ArrowRight,\n  ArrowRightLeft,\n  Check,\n  ChevronDown,\n  ChevronRight,\n  Copy,\n  Database,\n  Download,\n  Filter,\n  Layers,\n  Pause,\n  Play,\n  RefreshCw,\n  Search,\n  Server,\n  ShieldCheck,\n  Terminal,\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 type CdcOperation = 'INSERT' | 'UPDATE' | 'DELETE'\n\nexport interface CdcTableMetric {\n  name: string\n  schema: string\n  primaryKey: string\n  syncedRows: number\n  replicationDelayMs: number\n  status: 'synchronized' | 'syncing' | 'paused'\n  operations: {\n    insertPercent: number\n    updatePercent: number\n    deletePercent: number\n  }\n  mode: string\n}\n\nexport interface CdcStreamEvent {\n  id: string\n  timestamp: string\n  table: string\n  operation: CdcOperation\n  primaryKey: string\n  binlogPosition: string\n  lsn: string\n  txId: string\n  summary: string\n  modifiedFields?: string[]\n  before?: Record<string, unknown>\n  after?: Record<string, unknown>\n}\n\ninterface Props {\n  initialEvents?: CdcStreamEvent[]\n  initialTables?: CdcTableMetric[]\n  initialPaused?: boolean\n  initialOperationFilter?: 'all' | CdcOperation\n  initialSearch?: string\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialPaused: false,\n  initialOperationFilter: 'all',\n  initialSearch: '',\n})\n\nconst defaultTables: CdcTableMetric[] = [\n  {\n    name: 'users',\n    schema: 'public',\n    primaryKey: 'id [UUID]',\n    syncedRows: 1842910,\n    replicationDelayMs: 12,\n    status: 'synchronized',\n    operations: {\n      insertPercent: 65,\n      updatePercent: 30,\n      deletePercent: 5,\n    },\n    mode: 'Continuous WAL',\n  },\n  {\n    name: 'orders',\n    schema: 'public',\n    primaryKey: 'order_id [BIGINT]',\n    syncedRows: 2145820,\n    replicationDelayMs: 16,\n    status: 'synchronized',\n    operations: {\n      insertPercent: 78,\n      updatePercent: 20,\n      deletePercent: 2,\n    },\n    mode: 'Continuous WAL',\n  },\n  {\n    name: 'transactions',\n    schema: 'public',\n    primaryKey: 'tx_hash [VARCHAR]',\n    syncedRows: 624300,\n    replicationDelayMs: 18,\n    status: 'synchronized',\n    operations: {\n      insertPercent: 92,\n      updatePercent: 7,\n      deletePercent: 1,\n    },\n    mode: 'Continuous WAL',\n  },\n  {\n    name: 'subscriptions',\n    schema: 'public',\n    primaryKey: 'sub_id [UUID]',\n    syncedRows: 208440,\n    replicationDelayMs: 14,\n    status: 'synchronized',\n    operations: {\n      insertPercent: 45,\n      updatePercent: 50,\n      deletePercent: 5,\n    },\n    mode: 'Continuous WAL',\n  },\n]\n\nconst defaultEvents: CdcStreamEvent[] = [\n  {\n    id: 'evt-cdc-104',\n    timestamp: '2026-08-21T14:32:05.812Z',\n    table: 'public.subscriptions',\n    operation: 'UPDATE',\n    primaryKey: 'sub_99a8b1c4',\n    binlogPosition: 'mysql-bin.000412 : 8492014',\n    lsn: '0/16B38E0',\n    txId: 'tx_883019',\n    summary: 'status: \"trialing\" → \"active\", plan: \"starter_monthly\" → \"enterprise_annual\", seats: 5 → 25',\n    modifiedFields: ['status', 'plan', 'seats', 'monthly_amount', 'trial_ends_at', 'updated_at'],\n    before: {\n      id: 'sub_99a8b1c4',\n      user_id: 'usr_44018',\n      plan: 'starter_monthly',\n      status: 'trialing',\n      seats: 5,\n      monthly_amount: 49.0,\n      auto_renew: true,\n      trial_ends_at: '2026-08-21T23:59:59Z',\n      updated_at: '2026-08-14T10:00:00Z',\n    },\n    after: {\n      id: 'sub_99a8b1c4',\n      user_id: 'usr_44018',\n      plan: 'enterprise_annual',\n      status: 'active',\n      seats: 25,\n      monthly_amount: 490.0,\n      auto_renew: true,\n      trial_ends_at: null,\n      updated_at: '2026-08-21T14:32:05Z',\n    },\n  },\n  {\n    id: 'evt-cdc-103',\n    timestamp: '2026-08-21T14:32:04.195Z',\n    table: 'public.orders',\n    operation: 'INSERT',\n    primaryKey: 'ord_8819203',\n    binlogPosition: 'mysql-bin.000412 : 8491820',\n    lsn: '0/16B3698',\n    txId: 'tx_883018',\n    summary: 'New checkout order created for $1,280.00 (Customer: usr_99120, 3 line items)',\n    modifiedFields: [],\n    after: {\n      order_id: 'ord_8819203',\n      customer_id: 'usr_99120',\n      currency: 'USD',\n      total_amount: 1280.0,\n      tax_amount: 102.4,\n      status: 'paid',\n      payment_gateway: 'stripe_card',\n      shipping_country: 'US',\n      created_at: '2026-08-21T14:32:04Z',\n    },\n  },\n  {\n    id: 'evt-cdc-102',\n    timestamp: '2026-08-21T14:31:59.604Z',\n    table: 'public.transactions',\n    operation: 'UPDATE',\n    primaryKey: 'tx_0x99b1f41',\n    binlogPosition: 'mysql-bin.000412 : 8491412',\n    lsn: '0/16B3440',\n    txId: 'tx_883017',\n    summary: 'status: \"processing\" → \"settled\", settled_at timestamp set',\n    modifiedFields: ['status', 'settled_at'],\n    before: {\n      tx_hash: 'tx_0x99b1f41',\n      order_id: 'ord_8819198',\n      amount: 349.5,\n      status: 'processing',\n      settled_at: null,\n      fee_cents: 1045,\n    },\n    after: {\n      tx_hash: 'tx_0x99b1f41',\n      order_id: 'ord_8819198',\n      amount: 349.5,\n      status: 'settled',\n      settled_at: '2026-08-21T14:31:59Z',\n      fee_cents: 1045,\n    },\n  },\n  {\n    id: 'evt-cdc-101',\n    timestamp: '2026-08-21T14:31:52.410Z',\n    table: 'public.users',\n    operation: 'INSERT',\n    primaryKey: 'usr_99304',\n    binlogPosition: 'mysql-bin.000412 : 8490980',\n    lsn: '0/16B31F0',\n    txId: 'tx_883016',\n    summary: 'New user registration: elena.rostova@cloudscale.io (Org: org_7720)',\n    modifiedFields: [],\n    after: {\n      id: 'usr_99304',\n      email: 'elena.rostova@cloudscale.io',\n      full_name: 'Elena Rostova',\n      org_id: 'org_7720',\n      role: 'data_engineer',\n      email_verified: true,\n      mfa_enabled: true,\n      created_at: '2026-08-21T14:31:52Z',\n    },\n  },\n  {\n    id: 'evt-cdc-100',\n    timestamp: '2026-08-21T14:31:40.118Z',\n    table: 'public.subscriptions',\n    operation: 'DELETE',\n    primaryKey: 'sub_7718021',\n    binlogPosition: 'mysql-bin.000412 : 8490410',\n    lsn: '0/16B2FA0',\n    txId: 'tx_883015',\n    summary: 'Hard purge of cancelled expired trial subscription sub_7718021',\n    modifiedFields: [],\n    before: {\n      id: 'sub_7718021',\n      user_id: 'usr_22910',\n      plan: 'developer_free',\n      status: 'cancelled',\n      seats: 1,\n      deleted_at: '2026-08-21T14:31:40Z',\n    },\n  },\n]\n\nconst tables = ref<CdcTableMetric[]>(props.initialTables ? [...props.initialTables] : [...defaultTables])\nconst events = ref<CdcStreamEvent[]>(props.initialEvents ? [...props.initialEvents] : [...defaultEvents])\nconst isPaused = ref(props.initialPaused)\nconst isSnapshotting = ref(false)\nconst snapshotNotice = ref(false)\nconst selectedOperation = ref<'all' | CdcOperation>(props.initialOperationFilter)\nconst searchQuery = ref(props.initialSearch)\nconst expandedIds = ref<Record<string, boolean>>({\n  'evt-cdc-104': true,\n})\nconst copiedEventId = ref<string | null>(null)\nconst copiedBinlog = ref(false)\nconst exportedNotice = ref(false)\n\nconst currentBinlog = 'mysql-bin.000412 : 8492014'\n\nfunction matchesSearch(event: CdcStreamEvent, query: string): boolean {\n  if (!query.trim()) return true\n  const q = query.trim()\n\n  if (q.startsWith('/') && q.length > 1) {\n    const lastSlash = q.lastIndexOf('/')\n    if (lastSlash > 0) {\n      const pattern = q.slice(1, lastSlash)\n      const flags = q.slice(lastSlash + 1)\n      try {\n        const re = new RegExp(pattern, flags)\n        return (\n          re.test(event.table) ||\n          re.test(event.operation) ||\n          re.test(event.primaryKey) ||\n          re.test(event.binlogPosition) ||\n          re.test(event.lsn) ||\n          re.test(event.txId) ||\n          re.test(event.summary) ||\n          re.test(JSON.stringify(event.before ?? {})) ||\n          re.test(JSON.stringify(event.after ?? {}))\n        )\n      } catch {\n        // Fall back to plain search on invalid regex\n      }\n    }\n  }\n\n  const lower = q.toLowerCase()\n  return (\n    event.table.toLowerCase().includes(lower) ||\n    event.operation.toLowerCase().includes(lower) ||\n    event.primaryKey.toLowerCase().includes(lower) ||\n    event.binlogPosition.toLowerCase().includes(lower) ||\n    event.lsn.toLowerCase().includes(lower) ||\n    event.txId.toLowerCase().includes(lower) ||\n    event.summary.toLowerCase().includes(lower) ||\n    JSON.stringify(event.before ?? {})\n      .toLowerCase()\n      .includes(lower) ||\n    JSON.stringify(event.after ?? {})\n      .toLowerCase()\n      .includes(lower)\n  )\n}\n\nconst filteredEvents = computed(() => {\n  return events.value.filter((event) => {\n    const matchesOp = selectedOperation.value === 'all' || event.operation === selectedOperation.value\n    const matchesText = matchesSearch(event, searchQuery.value)\n    return matchesOp && matchesText\n  })\n})\n\nconst operationCounts = computed(() => {\n  return {\n    all: events.value.length,\n    INSERT: events.value.filter((e) => e.operation === 'INSERT').length,\n    UPDATE: events.value.filter((e) => e.operation === 'UPDATE').length,\n    DELETE: events.value.filter((e) => e.operation === 'DELETE').length,\n  }\n})\n\nconst allExpanded = computed(() => {\n  return filteredEvents.value.length > 0 && filteredEvents.value.every((e) => expandedIds.value[e.id])\n})\n\nfunction togglePause() {\n  isPaused.value = !isPaused.value\n}\n\nfunction toggleExpand(id: string) {\n  expandedIds.value[id] = !expandedIds.value[id]\n}\n\nfunction toggleAllExpand() {\n  if (allExpanded.value) {\n    expandedIds.value = {}\n  } else {\n    const next: Record<string, boolean> = {}\n    filteredEvents.value.forEach((e) => {\n      next[e.id] = true\n    })\n    expandedIds.value = next\n  }\n}\n\nfunction triggerSnapshot() {\n  if (isSnapshotting.value) return\n  isSnapshotting.value = true\n  snapshotNotice.value = true\n\n  setTimeout(() => {\n    isSnapshotting.value = false\n  }, 2200)\n\n  setTimeout(() => {\n    snapshotNotice.value = false\n  }, 6000)\n}\n\nfunction clearStream() {\n  events.value = []\n  expandedIds.value = {}\n}\n\nfunction resetStream() {\n  events.value = props.initialEvents ? [...props.initialEvents] : [...defaultEvents]\n  searchQuery.value = ''\n  selectedOperation.value = 'all'\n  expandedIds.value = { 'evt-cdc-104': true }\n}\n\nfunction copyBinlogPosition() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(currentBinlog)\n    copiedBinlog.value = true\n    setTimeout(() => {\n      copiedBinlog.value = false\n    }, 2000)\n  }\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    copiedEventId.value = id\n    setTimeout(() => {\n      if (copiedEventId.value === id) {\n        copiedEventId.value = null\n      }\n    }, 2000)\n  }\n}\n\nfunction exportJson() {\n  const dataStr =\n    'data:text/json;charset=utf-8,' +\n    encodeURIComponent(\n      JSON.stringify(\n        {\n          pipeline: 'Postgres Source (OLTP) -> Snowflake DW (OLAP)',\n          binlog_position: currentBinlog,\n          timestamp: new Date().toISOString(),\n          tables: tables.value,\n          events: filteredEvents.value,\n        },\n        null,\n        2,\n      ),\n    )\n  if (typeof document !== 'undefined') {\n    const downloadAnchor = document.createElement('a')\n    downloadAnchor.setAttribute('href', dataStr)\n    downloadAnchor.setAttribute(\n      'download',\n      `cdc-replication-stream-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.json`,\n    )\n    document.body.appendChild(downloadAnchor)\n    downloadAnchor.click()\n    downloadAnchor.remove()\n    exportedNotice.value = true\n    setTimeout(() => {\n      exportedNotice.value = false\n    }, 2000)\n  }\n}\n\nfunction formatTimestamp(iso: string): string {\n  try {\n    const d = new Date(iso)\n    return d.toISOString().replace('T', ' ').replace('Z', ' UTC')\n  } catch {\n    return iso\n  }\n}\n\nfunction formatNumber(num: number): string {\n  return new Intl.NumberFormat('en-US').format(num)\n}\n</script>\n\n<template>\n  <div data-slot=\"cdc-replication-stream\" :class=\"cn('w-full space-y-4', props.class)\">\n    <!-- Header: Sync Pipeline Overview & Global Controls -->\n    <div class=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n      <div class=\"flex items-start gap-3 sm:items-center\">\n        <div class=\"bg-card flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs\">\n          <ArrowRightLeft class=\"text-primary size-5\" aria-hidden=\"true\" />\n        </div>\n        <div class=\"space-y-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <h2 class=\"text-foreground text-2xl font-bold tracking-tight\">CDC Replication Stream</h2>\n\n            <!-- Real-Time Status Badge -->\n            <div\n              v-if=\"isSnapshotting\"\n              class=\"border-info/30 bg-info/10 text-info inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n            >\n              <RefreshCw class=\"size-3 animate-spin\" aria-hidden=\"true\" />\n              <span>Snapshot Ingest Active</span>\n            </div>\n            <div\n              v-else-if=\"!isPaused\"\n              class=\"border-success/30 bg-success/10 text-success inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n            >\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>Replication Streaming · 18ms Latency</span>\n            </div>\n            <div\n              v-else\n              class=\"border-warning/30 bg-warning/10 text-warning inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium\"\n            >\n              <span class=\"bg-warning relative inline-flex size-2 rounded-full\" />\n              <span>Replication Paused</span>\n            </div>\n          </div>\n\n          <!-- Pipeline Architecture Breadcrumb -->\n          <div class=\"flex flex-wrap items-center gap-1.5 text-xs\">\n            <span class=\"text-foreground font-semibold\">Postgres Source (OLTP)</span>\n            <ArrowRight class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n            <span class=\"text-primary font-semibold\">Snowflake DW (OLAP)</span>\n            <span class=\"text-muted-foreground hidden font-mono sm:inline\">Debezium 2.7 · Apache Kafka · pgoutput</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Header Action Controls & Binlog Pointer -->\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <!-- Binlog Position Indicator Chip -->\n        <button\n          type=\"button\"\n          aria-label=\"Copy current binlog position\"\n          class=\"bg-muted/50 hover:bg-muted focus-visible:ring-ring flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          @click=\"copyBinlogPosition\"\n        >\n          <Terminal class=\"text-muted-foreground size-3.5\" aria-hidden=\"true\" />\n          <span class=\"text-muted-foreground\">Binlog:</span>\n          <span class=\"text-foreground font-mono font-medium\">{{ currentBinlog }}</span>\n          <Check v-if=\"copiedBinlog\" class=\"text-success size-3\" aria-hidden=\"true\" />\n          <Copy v-else class=\"text-muted-foreground size-3 opacity-70\" aria-hidden=\"true\" />\n        </button>\n\n        <Button variant=\"outline\" size=\"sm\" :disabled=\"isSnapshotting\" class=\"gap-1.5\" @click=\"triggerSnapshot\">\n          <RefreshCw :class=\"cn('size-3.5', isSnapshotting && 'text-primary animate-spin')\" aria-hidden=\"true\" />\n          <span>{{ isSnapshotting ? 'Syncing Snapshot...' : 'Force Sync Snapshot' }}</span>\n        </Button>\n\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :class=\"isPaused ? 'border-warning/40 text-warning' : ''\"\n          @click=\"togglePause\"\n        >\n          <Play v-if=\"isPaused\" class=\"size-3.5 fill-current\" aria-hidden=\"true\" />\n          <Pause v-else class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>{{ isPaused ? 'Resume Stream' : 'Pause Stream' }}</span>\n        </Button>\n\n        <Button aria-label=\"Download attachment\" variant=\"default\" size=\"sm\" class=\"gap-1.5\" @click=\"exportJson\">\n          <Check v-if=\"exportedNotice\" class=\"text-success size-3.5\" aria-hidden=\"true\" />\n          <Download v-else class=\"size-3.5\" aria-hidden=\"true\" />\n          <span>{{ exportedNotice ? 'Exported' : 'Export JSON' }}</span>\n        </Button>\n      </div>\n    </div>\n\n    <!-- Snapshot Notification Banner -->\n    <div\n      v-if=\"snapshotNotice\"\n      class=\"text-foreground border-info/30 bg-info/10 flex items-center justify-between rounded-lg border p-3 text-xs shadow-xs\"\n    >\n      <div class=\"flex items-center gap-2.5\">\n        <RefreshCw class=\"text-info size-4 shrink-0\" aria-hidden=\"true\" />\n        <div>\n          <span class=\"text-info font-semibold\">Snapshot sync initiated:</span>\n          <span>\n            Executing non-blocking logical schema snapshot across 4 tables at WAL offset\n            <code class=\"font-mono font-medium\">mysql-bin.000412 : 8492014</code>.\n          </span>\n        </div>\n      </div>\n      <Badge variant=\"outline\" class=\"font-mono text-xs\">LSN: 0/16B38E0</Badge>\n    </div>\n\n    <!-- 4 CDC Telemetry Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- 1. Replication Lag -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Replication Lag</span>\n            <div\n              class=\"bg-primary/10 text-primary border-primary/20 flex size-8 items-center justify-center rounded-md border\"\n            >\n              <Zap class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-3 space-y-1.5\">\n            <div class=\"flex items-baseline gap-2\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">18ms</span>\n              <span class=\"text-muted-foreground text-xs\">p99: 24ms</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge variant=\"success\" class=\"font-mono text-xs\"> Sub-second real-time </Badge>\n            </div>\n            <div class=\"pt-1\">\n              <div class=\"text-muted-foreground flex justify-between text-xs\">\n                <span>SLA Headroom</span>\n                <span class=\"font-mono\">96.4%</span>\n              </div>\n              <Progress :model-value=\"3.6\" class=\"mt-1 h-1.5\" />\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 2. Throughput -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Throughput</span>\n            <div class=\"border-info/20 bg-info/10 text-info flex size-8 items-center justify-center rounded-md border\">\n              <Activity class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-3 space-y-1.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1,420</span>\n              <span class=\"text-muted-foreground text-xs\">events/sec</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge variant=\"info\" class=\"font-mono text-xs\"> 380 KB/s bandwidth </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between pt-1 text-xs\">\n              <span>Hourly Pace</span>\n              <span class=\"text-foreground font-mono font-medium\">5.11M evts/hr</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 3. Total Synced Today -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Total Synced Today</span>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-md border\"\n            >\n              <Database class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-3 space-y-1.5\">\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.82M</span>\n              <span class=\"text-muted-foreground text-xs\">Row Changes</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge variant=\"outline\" class=\"border-success/30 text-success font-mono text-xs\">\n                +14.2% vs yesterday\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between pt-1 text-xs\">\n              <span>WAL Integrity</span>\n              <span class=\"text-success font-mono font-medium\">100% Consistent</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- 4. Error / Dead Letter Queue -->\n      <Card class=\"border-border shadow-xs\">\n        <CardContent class=\"p-4\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground text-xs font-medium\">Error / DLQ</span>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-8 items-center justify-center rounded-md border\"\n            >\n              <ShieldCheck class=\"size-4\" aria-hidden=\"true\" />\n            </div>\n          </div>\n          <div class=\"mt-3 space-y-1.5\">\n            <div class=\"flex items-baseline gap-1.5\">\n              <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">0</span>\n              <span class=\"text-muted-foreground text-xs\">Failed Events</span>\n            </div>\n            <div class=\"flex items-center gap-2\">\n              <Badge variant=\"success\" class=\"font-mono text-xs\"> DLQ Empty · Healthy </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex items-center justify-between pt-1 text-xs\">\n              <span>Schema Drift</span>\n              <span class=\"text-foreground font-mono font-medium\">0 Violations</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Active Synced Tables Table -->\n    <Card class=\"border-border shadow-xs\">\n      <CardHeader class=\"pb-3\">\n        <div class=\"flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <CardTitle class=\"text-base font-semibold\">Active Synced Tables ({{ tables.length }})</CardTitle>\n            <CardDescription class=\"text-xs\">\n              Per-table WAL change capture distribution, row synchronization counts, and per-table replication latency\n            </CardDescription>\n          </div>\n          <div class=\"text-muted-foreground flex items-center gap-2 text-xs\">\n            <span class=\"flex items-center gap-1\">\n              <span class=\"bg-success size-2 rounded-full\" />\n              INSERT\n            </span>\n            <span class=\"flex items-center gap-1\">\n              <span class=\"bg-info size-2 rounded-full\" />\n              UPDATE\n            </span>\n            <span class=\"flex items-center gap-1\">\n              <span class=\"bg-destructive size-2 rounded-full\" />\n              DELETE\n            </span>\n          </div>\n        </div>\n      </CardHeader>\n      <CardContent class=\"p-0\">\n        <div class=\"overflow-x-auto\">\n          <Table density=\"cozy\">\n            <TableHeader>\n              <TableRow>\n                <TableHead class=\"text-xs font-semibold\">Table Name & Schema</TableHead>\n                <TableHead class=\"text-xs font-semibold\">Change Operations Breakdown</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Synced Rows Count</TableHead>\n                <TableHead class=\"text-right text-xs font-semibold\">Replication Delay</TableHead>\n                <TableHead class=\"text-center text-xs font-semibold\">Status</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow v-for=\"table in tables\" :key=\"table.name\" class=\"group\">\n                <!-- Table Name & Schema -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-0.5\">\n                    <div class=\"flex items-center gap-2\">\n                      <span class=\"text-foreground font-mono text-xs font-semibold\">\n                        {{ table.schema }}.{{ table.name }}\n                      </span>\n                      <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                        {{ table.primaryKey }}\n                      </Badge>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs font-normal\">Mode: {{ table.mode }}</p>\n                  </div>\n                </TableCell>\n\n                <!-- Operations Multi-Segment Stacked Progress Bar & Percentages -->\n                <TableCell class=\"py-3\">\n                  <div class=\"w-full max-w-xs space-y-1.5\">\n                    <!-- Stacked Progress Bar -->\n                    <div class=\"bg-muted flex h-2 w-full overflow-hidden rounded-full border\">\n                      <div\n                        class=\"bg-success transition-colors duration-300\"\n                        :style=\"{ width: `${table.operations.insertPercent}%` }\"\n                        :title=\"`INSERT: ${table.operations.insertPercent}%`\"\n                      />\n                      <div\n                        class=\"bg-info transition-colors duration-300\"\n                        :style=\"{ width: `${table.operations.updatePercent}%` }\"\n                        :title=\"`UPDATE: ${table.operations.updatePercent}%`\"\n                      />\n                      <div\n                        class=\"bg-destructive transition-colors duration-300\"\n                        :style=\"{ width: `${table.operations.deletePercent}%` }\"\n                        :title=\"`DELETE: ${table.operations.deletePercent}%`\"\n                      />\n                    </div>\n\n                    <!-- Breakdown Text -->\n                    <div class=\"flex items-center gap-2 font-mono text-xs\">\n                      <span class=\"text-success font-medium\"> INS {{ table.operations.insertPercent }}% </span>\n                      <span class=\"text-info font-medium\"> UPD {{ table.operations.updatePercent }}% </span>\n                      <span class=\"text-destructive font-medium\"> DEL {{ table.operations.deletePercent }}% </span>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <!-- Synced Rows Count -->\n                <TableCell class=\"py-3 text-right\">\n                  <span class=\"text-foreground font-mono text-xs font-semibold tabular-nums\">\n                    {{ formatNumber(table.syncedRows) }}\n                  </span>\n                  <p class=\"text-muted-foreground text-xs\">rows committed</p>\n                </TableCell>\n\n                <!-- Replication Delay -->\n                <TableCell class=\"py-3 text-right\">\n                  <span class=\"text-success text-success font-mono text-xs font-semibold tabular-nums\">\n                    {{ table.replicationDelayMs }}ms\n                  </span>\n                  <p class=\"text-muted-foreground text-xs\">sub-second</p>\n                </TableCell>\n\n                <!-- Status Badge -->\n                <TableCell class=\"py-3 text-center\">\n                  <Badge variant=\"success\" class=\"gap-1 font-mono text-xs\">\n                    <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                    Synchronized\n                  </Badge>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Live CDC Event Stream Ticker Card -->\n    <Card class=\"border-border shadow-xs\">\n      <!-- Terminal Header Bar -->\n      <div class=\"bg-muted/40 flex flex-col gap-3 border-b p-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div class=\"flex items-center gap-2\">\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>\n            <span class=\"text-foreground text-xs font-semibold\">Live CDC Event Stream Ticker</span>\n            <span class=\"text-muted-foreground hidden font-mono text-xs sm:inline\">\n              · wal_level=logical · slot: debezium_cdc_01\n            </span>\n          </div>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <span class=\"text-muted-foreground hidden font-mono text-xs sm:inline\">\n            Matches: {{ filteredEvents.length }} / {{ events.length }}\n          </span>\n          <Button\n            variant=\"ghost\"\n            size=\"xs\"\n            class=\"h-7 gap-1 px-2 text-xs\"\n            :disabled=\"filteredEvents.length === 0\"\n            @click=\"toggleAllExpand\"\n          >\n            <ChevronDown v-if=\"allExpanded\" class=\"size-3.5\" aria-hidden=\"true\" />\n            <ChevronRight v-else class=\"size-3.5\" aria-hidden=\"true\" />\n            <span>{{ allExpanded ? 'Collapse All' : 'Expand All' }}</span>\n          </Button>\n        </div>\n      </div>\n\n      <!-- Stream Filter Toolbar -->\n      <div class=\"border-b p-3\">\n        <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Search Input -->\n          <div class=\"relative flex-1\">\n            <Search\n              class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              v-model=\"searchQuery\"\n              placeholder=\"Search table, operation, primary key, column, or /regex/...\"\n              class=\"pl-9 text-xs\"\n            />\n          </div>\n\n          <!-- Operation Filter Buttons -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\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              Op:\n            </span>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperation === '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=\"selectedOperation = 'all'\"\n            >\n              All\n              <span\n                :class=\"\n                  cn(\n                    'py-0.2 rounded-full px-1.5 text-xs',\n                    selectedOperation === 'all'\n                      ? 'bg-primary-foreground/20 text-primary-foreground'\n                      : 'bg-muted text-muted-foreground',\n                  )\n                \"\n              >\n                {{ operationCounts.all }}\n              </span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperation === 'INSERT'\n                    ? 'border-success bg-success text-white shadow-xs'\n                    : 'border-border bg-card text-muted-foreground hover:border-success/40 hover:text-success dark:hover:text-success',\n                )\n              \"\n              @click=\"selectedOperation = 'INSERT'\"\n            >\n              <span class=\"bg-success size-1.5 rounded-full\" />\n              INSERT\n              <span\n                :class=\"\n                  cn(\n                    'py-0.2 rounded-full px-1.5 text-xs',\n                    selectedOperation === 'INSERT' ? 'bg-white/20 text-white' : 'bg-success/10 text-success',\n                  )\n                \"\n              >\n                {{ operationCounts.INSERT }}\n              </span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperation === 'UPDATE'\n                    ? 'border-info bg-info text-white shadow-xs'\n                    : 'border-border bg-card text-muted-foreground hover:border-info/40 hover:text-info dark:hover:text-info',\n                )\n              \"\n              @click=\"selectedOperation = 'UPDATE'\"\n            >\n              <span class=\"bg-info size-1.5 rounded-full\" />\n              UPDATE\n              <span\n                :class=\"\n                  cn(\n                    'py-0.2 rounded-full px-1.5 text-xs',\n                    selectedOperation === 'UPDATE' ? 'bg-white/20 text-white' : 'bg-info/10 text-info',\n                  )\n                \"\n              >\n                {{ operationCounts.UPDATE }}\n              </span>\n            </button>\n\n            <button\n              type=\"button\"\n              :class=\"\n                cn(\n                  'focus-visible:ring-ring inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none',\n                  selectedOperation === 'DELETE'\n                    ? 'border-destructive bg-destructive text-white shadow-xs'\n                    : 'border-border bg-card text-muted-foreground hover:border-destructive/40 hover:text-destructive dark:hover:text-destructive',\n                )\n              \"\n              @click=\"selectedOperation = 'DELETE'\"\n            >\n              <span class=\"bg-destructive size-1.5 rounded-full\" />\n              DELETE\n              <span\n                :class=\"\n                  cn(\n                    'py-0.2 rounded-full px-1.5 text-xs',\n                    selectedOperation === 'DELETE' ? 'bg-white/20 text-white' : 'bg-destructive/10 text-destructive',\n                  )\n                \"\n              >\n                {{ operationCounts.DELETE }}\n              </span>\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Event Rows Feed -->\n      <CardContent class=\"p-0\">\n        <!-- Empty State -->\n        <div\n          v-if=\"filteredEvents.length === 0\"\n          class=\"flex flex-col items-center justify-center gap-3 px-4 py-16 text-center\"\n        >\n          <div class=\"bg-muted flex size-12 items-center justify-center rounded-full\">\n            <Database class=\"text-muted-foreground size-6 opacity-60\" aria-hidden=\"true\" />\n          </div>\n          <div class=\"space-y-1\">\n            <p class=\"text-foreground text-sm font-semibold\">No CDC events match current criteria</p>\n            <p class=\"text-muted-foreground text-xs\">\n              {{\n                events.length === 0\n                  ? 'The replication event stream buffer was cleared.'\n                  : 'Try adjusting your operation filter or search query.'\n              }}\n            </p>\n          </div>\n          <Button variant=\"outline\" size=\"sm\" class=\"mt-2 text-xs\" @click=\"resetStream\">\n            <RefreshCw class=\"size-3.5\" aria-hidden=\"true\" />\n            Restore CDC stream data\n          </Button>\n        </div>\n\n        <!-- Event List -->\n        <ul v-else class=\"divide-border/60 divide-y\">\n          <li\n            v-for=\"event in filteredEvents\"\n            :key=\"event.id\"\n            :class=\"cn('group transition-colors', expandedIds[event.id] ? 'bg-muted/30' : 'hover:bg-muted/20')\"\n          >\n            <!-- Primary Row Trigger -->\n            <div\n              role=\"button\"\n              tabindex=\"0\"\n              :aria-expanded=\"!!expandedIds[event.id]\"\n              class=\"focus-visible:ring-ring flex cursor-pointer flex-col gap-3 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(event.id)\"\n              @keydown.enter.prevent=\"toggleExpand(event.id)\"\n              @keydown.space.prevent=\"toggleExpand(event.id)\"\n            >\n              <!-- Left Rail: Chevron + Timestamp + Operation Badge + Table + Summary -->\n              <div class=\"flex min-w-0 items-start gap-3 sm:items-center\">\n                <button\n                  type=\"button\"\n                  aria-label=\"Toggle before and after payload diff\"\n                  class=\"text-muted-foreground group-hover:text-foreground mt-0.5 shrink-0 transition-transform sm:mt-0\"\n                  :class=\"expandedIds[event.id] ? 'text-foreground rotate-90' : ''\"\n                >\n                  <ChevronRight class=\"size-4\" aria-hidden=\"true\" />\n                </button>\n\n                <div class=\"space-y-1 sm:space-y-0.5\">\n                  <div class=\"flex flex-wrap items-center gap-2\">\n                    <span class=\"text-muted-foreground font-mono text-xs whitespace-nowrap\">\n                      {{ formatTimestamp(event.timestamp) }}\n                    </span>\n\n                    <Badge\n                      v-if=\"event.operation === 'INSERT'\"\n                      class=\"bg-success/10 text-success border-transparent font-mono text-xs\"\n                    >\n                      INSERT\n                    </Badge>\n                    <Badge\n                      v-else-if=\"event.operation === 'UPDATE'\"\n                      class=\"bg-info/10 text-info border-transparent font-mono text-xs\"\n                    >\n                      UPDATE\n                    </Badge>\n                    <Badge v-else class=\"bg-destructive/10 text-destructive border-transparent font-mono text-xs\">\n                      DELETE\n                    </Badge>\n\n                    <span class=\"text-foreground font-mono text-xs font-semibold\">\n                      {{ event.table }}\n                    </span>\n\n                    <span class=\"bg-muted text-muted-foreground rounded px-1.5 py-0.5 font-mono text-xs\">\n                      {{ event.primaryKey }}\n                    </span>\n                  </div>\n\n                  <p class=\"text-muted-foreground text-xs font-normal\">\n                    {{ event.summary }}\n                  </p>\n                </div>\n              </div>\n\n              <!-- Right Rail: Binlog Offset & Tx ID -->\n              <div class=\"flex shrink-0 flex-wrap items-center gap-3 sm:justify-end\">\n                <div class=\"bg-muted/60 flex items-center gap-1.5 rounded-md border px-2 py-1 font-mono text-xs\">\n                  <span class=\"text-muted-foreground\">Tx:</span>\n                  <span class=\"text-foreground font-medium\">{{ event.txId }}</span>\n                </div>\n\n                <div class=\"text-muted-foreground flex items-center gap-1.5 font-mono text-xs\">\n                  <span>{{ event.binlogPosition }}</span>\n                  <span class=\"opacity-50\">·</span>\n                  <span class=\"text-foreground/80 font-medium\">{{ event.lsn }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Expanded Payload Diff View -->\n            <div v-if=\"expandedIds[event.id]\" class=\"bg-muted/15 border-t px-4 py-3.5\">\n              <div class=\"space-y-3\">\n                <!-- Modified Fields Tag Bar -->\n                <div\n                  v-if=\"event.modifiedFields && event.modifiedFields.length > 0\"\n                  class=\"bg-card flex flex-wrap items-center gap-1.5 rounded-md border p-2.5 text-xs\"\n                >\n                  <span class=\"text-muted-foreground font-medium\">Modified Columns:</span>\n                  <Badge\n                    v-for=\"field in event.modifiedFields\"\n                    :key=\"field\"\n                    variant=\"outline\"\n                    class=\"text-info font-mono text-xs\"\n                  >\n                    {{ field }}\n                  </Badge>\n                </div>\n\n                <!-- Side-by-Side or Stacked JSON Diff -->\n                <div class=\"grid grid-cols-1 gap-3 lg:grid-cols-2\">\n                  <!-- Before Payload (For UPDATE and DELETE) -->\n                  <div\n                    v-if=\"event.before\"\n                    class=\"overflow-hidden rounded-md border border-zinc-800 bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner\"\n                  >\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                        <span class=\"bg-destructive size-2 rounded-full\" />\n                        <span class=\"text-destructive text-xs font-semibold\">before_image.json</span>\n                        <span class=\"text-muted-foreground text-xs font-normal\">(Previous State)</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(event.id + '-before', event.before)\"\n                      >\n                        <Check\n                          v-if=\"copiedEventId === event.id + '-before'\"\n                          class=\"text-success size-3\"\n                          aria-hidden=\"true\"\n                        />\n                        <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                        <span>{{ copiedEventId === event.id + '-before' ? 'Copied' : 'Copy' }}</span>\n                      </Button>\n                    </div>\n\n                    <pre\n                      class=\"max-h-60 overflow-x-auto overflow-y-auto p-3 text-xs leading-relaxed select-text\"\n                    ><code class=\"text-destructive/90\">{{ JSON.stringify(event.before, null, 2) }}</code></pre>\n                  </div>\n\n                  <!-- After Payload (For INSERT and UPDATE) -->\n                  <div\n                    v-if=\"event.after\"\n                    :class=\"\n                      cn(\n                        'overflow-hidden rounded-md border border-zinc-800 bg-zinc-950 font-mono text-xs text-zinc-100 shadow-inner',\n                        !event.before && 'lg:col-span-2',\n                      )\n                    \"\n                  >\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                        <span class=\"bg-success size-2 rounded-full\" />\n                        <span class=\"text-success text-xs font-semibold\">after_image.json</span>\n                        <span class=\"text-muted-foreground text-xs font-normal\">(Replicated Target State)</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(event.id + '-after', event.after)\"\n                      >\n                        <Check\n                          v-if=\"copiedEventId === event.id + '-after'\"\n                          class=\"text-success size-3\"\n                          aria-hidden=\"true\"\n                        />\n                        <Copy v-else class=\"size-3\" aria-hidden=\"true\" />\n                        <span>{{ copiedEventId === event.id + '-after' ? 'Copied' : 'Copy' }}</span>\n                      </Button>\n                    </div>\n\n                    <pre\n                      class=\"max-h-60 overflow-x-auto overflow-y-auto p-3 text-xs leading-relaxed select-text\"\n                    ><code class=\"text-success\">{{ JSON.stringify(event.after, null, 2) }}</code></pre>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </li>\n        </ul>\n      </CardContent>\n\n      <!-- Bottom Engine & Ingest Protocol 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>CDC Pipeline:</span>\n            <span class=\"font-mono\">{{ isPaused ? '0 evt/s (Paused)' : '1,420 events/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>Sink Topic:</span>\n            <span class=\"text-foreground font-mono\">snowflake.cdc.raw_events</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            <Server class=\"text-info size-3.5\" aria-hidden=\"true\" />\n            <span>Format:</span>\n            <span class=\"text-foreground font-mono\">JSON + Schema Registry (v2)</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>Postgres WAL2JSON · TLS 1.3 · Heartbeat: 1,000ms OK</span>\n        </div>\n      </div>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CdcReplicationStream.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": "Debezium and Fivetran style Change Data Capture (CDC) replication monitor and binlog sync pipeline with live telemetry metrics, table operation breakdowns, and real-time before/after row diff streaming.",
  "categories": [
    "devops",
    "app"
  ]
}