{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "schema-drift-alert-board",
  "title": "Schema Drift Alert Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/schema-drift-alert-board/SchemaDriftAlertBoard.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport {\n  Activity,\n  AlertCircle,\n  AlertTriangle,\n  ArrowUpRight,\n  BellOff,\n  BellRing,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Database,\n  Eye,\n  FileCode2,\n  Filter,\n  Layers,\n  Network,\n  RefreshCw,\n  Search,\n  ShieldAlert,\n  ShieldCheck,\n  Table2,\n  Terminal,\n  Workflow,\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 { 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 BlastRadiusNode {\n  id: string\n  name: string\n  layer: 'origin' | 'transform' | 'mart' | 'consumer'\n  layerLabel: string\n  status: 'mutation' | 'impacted' | 'healthy' | 'warning'\n  statusLabel: string\n  type: string\n  description: string\n  owner: string\n  runtime?: string\n}\n\nexport interface SchemaDriftIncident {\n  id: string\n  targetTable: string\n  environment: 'Snowflake Prod' | 'Postgres OLTP' | 'Kafka Topics'\n  changeType: 'Unexpected Column Added' | 'Data Type Alteration' | 'Nullability Relaxation' | 'Enum Definition Extended'\n  driftDiff: string\n  diffMode: 'added' | 'altered' | 'relaxed'\n  severity: 'low' | 'medium' | 'high'\n  severityLabel: string\n  blastRadiusSummary: string\n  brokenModelsCount: number\n  impactedPipelinesCount: number\n  detectedAt: string\n  actionLabel: string\n  isAcknowledged: boolean\n  isContractSynced: boolean\n  contractYaml: string\n  remediationDdl: string\n  lineageNodes: BlastRadiusNode[]\n}\n\nexport interface SchemaDriftAlertBoardProps {\n  title?: string\n  monitoredEnvironments?: string[]\n  activeMutationsCount?: number\n  incidents?: SchemaDriftIncident[]\n  class?: HTMLAttributes['class']\n}\n\nconst defaultIncidents: SchemaDriftIncident[] = [\n  {\n    id: 'drift-inc-1',\n    targetTable: 'public.users',\n    environment: 'Postgres OLTP',\n    changeType: 'Unexpected Column Added',\n    driftDiff: '+ phone_country_code VARCHAR(8)',\n    diffMode: 'added',\n    severity: 'low',\n    severityLabel: 'Low Non-Breaking',\n    blastRadiusSummary: '0 models broken',\n    brokenModelsCount: 0,\n    impactedPipelinesCount: 0,\n    detectedAt: '14m ago',\n    actionLabel: 'Add to Data Contract',\n    isAcknowledged: false,\n    isContractSynced: false,\n    contractYaml: `version: 2\nmodels:\n  - name: dim_users\n    config:\n      contract:\n        enforced: true\n    columns:\n      - name: user_id\n        data_type: varchar\n        constraints:\n          - type: not_null\n      # Newly detected column added upstream in Postgres OLTP\n      - name: phone_country_code\n        data_type: varchar(8)\n        description: \"ISO-3166-1 alpha-2 / E.164 dial prefix added by auth service\"\n        constraints:\n          - type: check\n            expression: \"length(phone_country_code) <= 8\"`,\n    remediationDdl: `-- Automated dbt / Snowflake staging sync\nALTER TABLE raw_postgres.users\n  ADD COLUMN IF NOT EXISTS phone_country_code VARCHAR(8);\n\n-- Mark schema contract version 2.4 compliant\nCOMMENT ON COLUMN raw_postgres.users.phone_country_code IS 'Auto-registered by UIPKGE schema-drift-guardian';`,\n    lineageNodes: [\n      {\n        id: 'node-users-origin',\n        name: 'public.users',\n        layer: 'origin',\n        layerLabel: 'Postgres Source Table',\n        status: 'mutation',\n        statusLabel: 'Column Added (+1 col)',\n        type: 'Postgres Table',\n        description: 'OLTP user management table with new phone_country_code attribute.',\n        owner: '#team-auth',\n      },\n      {\n        id: 'node-users-ingest',\n        name: 'fivetran.raw_postgres_users',\n        layer: 'transform',\n        layerLabel: 'CDC Connector Stream',\n        status: 'healthy',\n        statusLabel: 'CDC Auto-Synced',\n        type: 'Fivetran Log-Based CDC',\n        description: 'Automated column replication synced to Snowflake bronze raw zone.',\n        owner: '#data-platform',\n        runtime: '<2m latency',\n      },\n      {\n        id: 'node-users-stg',\n        name: 'dbt.stg_users',\n        layer: 'transform',\n        layerLabel: 'dbt Staging View',\n        status: 'healthy',\n        statusLabel: '0 Breaking (Explicit Select)',\n        type: 'dbt View Model',\n        description: 'Explicit column projection prevents unmapped column propagation.',\n        owner: '#data-eng',\n        runtime: '12s run',\n      },\n      {\n        id: 'node-users-dim',\n        name: 'marts.dim_customers',\n        layer: 'mart',\n        layerLabel: 'Core Dimension Mart',\n        status: 'healthy',\n        statusLabel: 'Contract Compliant',\n        type: 'Snowflake Dynamic Table',\n        description: 'Certified dimension table feeding marketing cohorts and customer 360.',\n        owner: '#data-eng',\n      },\n      {\n        id: 'node-users-crm',\n        name: 'HubSpot Reverse ETL Sync',\n        layer: 'consumer',\n        layerLabel: 'Operational Reverse ETL',\n        status: 'healthy',\n        statusLabel: 'Active · 0 Failures',\n        type: 'Census Sync Pipeline',\n        description: 'Outbound sync to HubSpot Marketing Hub CRM contacts.',\n        owner: '#rev-ops',\n      },\n    ],\n  },\n  {\n    id: 'drift-inc-2',\n    targetTable: 'analytics.fct_orders',\n    environment: 'Snowflake Prod',\n    changeType: 'Data Type Alteration',\n    driftDiff: 'discount_amount FLOAT -> DECIMAL(18,2)',\n    diffMode: 'altered',\n    severity: 'medium',\n    severityLabel: 'Medium Warning',\n    blastRadiusSummary: '2 dbt models affected',\n    brokenModelsCount: 0,\n    impactedPipelinesCount: 2,\n    detectedAt: '32m ago',\n    actionLabel: 'Inspect Model Lineage',\n    isAcknowledged: false,\n    isContractSynced: false,\n    contractYaml: `version: 2\nmodels:\n  - name: fct_orders\n    config:\n      contract:\n        enforced: true\n    columns:\n      - name: order_id\n        data_type: varchar\n      - name: gross_amount\n        data_type: decimal(18,2)\n      # Altered type: FLOAT replaced with exact high-precision DECIMAL(18,2)\n      - name: discount_amount\n        data_type: decimal(18,2) # Previously float64\n        description: \"Monetary discount in USD with exact 2 decimal place precision\"\n        constraints:\n          - type: check\n            expression: \"discount_amount >= 0\"`,\n    remediationDdl: `-- Model Migration Patch for dbt Intermediate Layers:\n-- Fix implicit float casting in int_daily_revenue and int_order_discounts:\n\nALTER TABLE production_dw.analytics.fct_orders\n  ALTER COLUMN discount_amount SET DATA TYPE DECIMAL(18,2);\n\n-- Update dbt schema contract definition:\n-- dbt run --select int_daily_revenue+ --vars '{ \"allow_decimal_cast\": true }'`,\n    lineageNodes: [\n      {\n        id: 'node-orders-origin',\n        name: 'analytics.fct_orders',\n        layer: 'origin',\n        layerLabel: 'Warehouse Fact Table',\n        status: 'mutation',\n        statusLabel: 'Type Alteration (FLOAT -> DECIMAL)',\n        type: 'Snowflake Incremental',\n        description: 'Core financial transactions mart table receiving monetary precision fix.',\n        owner: '#finance-data',\n      },\n      {\n        id: 'node-orders-int-rev',\n        name: 'dbt.int_daily_revenue',\n        layer: 'transform',\n        layerLabel: 'dbt Intermediate Model',\n        status: 'impacted',\n        statusLabel: 'Impacted (Sum Float Warning)',\n        type: 'dbt Incremental Model',\n        description: 'Aggregates daily gross/net sales; needs explicit decimal cast in SUM expression.',\n        owner: '#data-eng',\n        runtime: '1m 18s',\n      },\n      {\n        id: 'node-orders-int-disc',\n        name: 'dbt.int_order_discounts',\n        layer: 'transform',\n        layerLabel: 'dbt Intermediate Model',\n        status: 'impacted',\n        statusLabel: 'Impacted (Join Key Precision)',\n        type: 'dbt View Model',\n        description: 'Promotional discount matrix model joined on discount_amount thresholds.',\n        owner: '#data-eng',\n        runtime: '45s',\n      },\n      {\n        id: 'node-orders-mart',\n        name: 'marts.fct_monthly_financials',\n        layer: 'mart',\n        layerLabel: 'Gold Financial Mart',\n        status: 'healthy',\n        statusLabel: 'Sanitized Output (Safe)',\n        type: 'Snowflake Mart Table',\n        description: 'GAAP revenue mart used for board reporting and audit ledger.',\n        owner: '#finance-ops',\n      },\n      {\n        id: 'node-orders-looker',\n        name: 'Looker ARR & Margin Dashboard',\n        layer: 'consumer',\n        layerLabel: 'Executive BI Dashboard',\n        status: 'warning',\n        statusLabel: '1 Tile Check Advised',\n        type: 'Looker Explore Tile',\n        description: 'C-Suite executive dashboard tracking daily net margin & discount rates.',\n        owner: '#bi-analytics',\n      },\n      {\n        id: 'node-orders-netsuite',\n        name: 'Finance NetSuite Journal Sync',\n        layer: 'consumer',\n        layerLabel: 'Accounting ERP Pipeline',\n        status: 'healthy',\n        statusLabel: 'Decimal Compatible (Safe)',\n        type: 'Census Batch Sync',\n        description: 'Hourly journal entry creation into Oracle NetSuite ERP general ledger.',\n        owner: '#accounting',\n      },\n    ],\n  },\n  {\n    id: 'drift-inc-3',\n    targetTable: 'kafka.events.checkout',\n    environment: 'Kafka Topics',\n    changeType: 'Nullability Relaxation',\n    driftDiff: 'zip_code became nullable',\n    diffMode: 'relaxed',\n    severity: 'low',\n    severityLabel: 'Low',\n    blastRadiusSummary: '0 broken',\n    brokenModelsCount: 0,\n    impactedPipelinesCount: 0,\n    detectedAt: '2h ago',\n    actionLabel: 'Add to Data Contract',\n    isAcknowledged: false,\n    isContractSynced: false,\n    contractYaml: `version: 2\nsources:\n  - name: kafka_stream\n    tables:\n      - name: events_checkout\n        columns:\n          - name: session_id\n            data_type: varchar\n            constraints:\n              - type: not_null\n          # Nullability relaxed for international orders lacking postal codes\n          - name: zip_code\n            data_type: varchar(16)\n            constraints: [] # NULLABLE accepted for international territories`,\n    remediationDdl: `-- Event Stream Deserialization Schema Update (Avro/JSON Schema Registry):\n{\n  \"name\": \"zip_code\",\n  \"type\": [\"null\", \"string\"],\n  \"default\": null,\n  \"doc\": \"Postal code optional for international checkout territories\"\n}`,\n    lineageNodes: [\n      {\n        id: 'node-kafka-origin',\n        name: 'kafka.events.checkout',\n        layer: 'origin',\n        layerLabel: 'Event Stream Topic',\n        status: 'mutation',\n        statusLabel: 'Nullability Relaxed',\n        type: 'Kafka Partition Stream',\n        description: 'Real-time e-commerce checkout session payload stream.',\n        owner: '#checkout-squad',\n      },\n      {\n        id: 'node-kafka-flink',\n        name: 'flink.checkout_stream_enrichment',\n        layer: 'transform',\n        layerLabel: 'Flink Stream Processing',\n        status: 'healthy',\n        statusLabel: 'COALESCE Handler Active',\n        type: 'Apache Flink Job',\n        description: 'Streaming enrichment with geo-IP fallback when zip_code is null.',\n        owner: '#stream-eng',\n        runtime: '<500ms streaming',\n      },\n      {\n        id: 'node-kafka-mart',\n        name: 'analytics.fct_checkout_events',\n        layer: 'mart',\n        layerLabel: 'Realtime Bronze Table',\n        status: 'healthy',\n        statusLabel: 'Schema Compatible',\n        type: 'Snowflake Raw Event Table',\n        description: 'Append-only event log capturing checkout telemetry.',\n        owner: '#analytics-eng',\n      },\n      {\n        id: 'node-kafka-bi',\n        name: 'Realtime Checkout Conversion Board',\n        layer: 'consumer',\n        layerLabel: 'Operations Monitor',\n        status: 'healthy',\n        statusLabel: 'Active · 0 Failures',\n        type: 'Grafana Live Dashboard',\n        description: 'Ops NOC wallboard monitoring conversion rates per minute.',\n        owner: '#growth-team',\n      },\n    ],\n  },\n]\n\nconst props = withDefaults(defineProps<SchemaDriftAlertBoardProps>(), {\n  title: 'Data Warehouse Schema Drift & Anomaly Alerts',\n  monitoredEnvironments: () => ['Snowflake Prod', 'Postgres OLTP', 'Kafka Topics'],\n  activeMutationsCount: 2,\n})\n\nconst incidentsList = ref<SchemaDriftIncident[]>(\n  props.incidents ? JSON.parse(JSON.stringify(props.incidents)) : defaultIncidents,\n)\n\nconst selectedIncidentId = ref<string>('drift-inc-2')\nconst searchQuery = ref('')\nconst selectedEnvironment = ref<string>('all')\nconst selectedSeverity = ref<string>('all')\nconst isMutedNonBreaking = ref(false)\nconst isSyncingAll = ref(false)\nconst allAcknowledged = ref(false)\nconst copiedKey = ref<string | null>(null)\nconst activeTab = ref<'lineage' | 'yaml' | 'sql'>('lineage')\n\nconst selectedIncident = computed(() => {\n  return incidentsList.value.find((inc) => inc.id === selectedIncidentId.value) ?? incidentsList.value[0]\n})\n\nconst filteredIncidents = computed(() => {\n  const query = searchQuery.value.trim().toLowerCase()\n  return incidentsList.value.filter((item) => {\n    if (isMutedNonBreaking.value && item.severity === 'low') {\n      return false\n    }\n\n    const matchesEnv = selectedEnvironment.value === 'all' || item.environment === selectedEnvironment.value\n    const matchesSev = selectedSeverity.value === 'all' || item.severity === selectedSeverity.value\n    const matchesQuery =\n      !query ||\n      item.targetTable.toLowerCase().includes(query) ||\n      item.changeType.toLowerCase().includes(query) ||\n      item.driftDiff.toLowerCase().includes(query) ||\n      item.environment.toLowerCase().includes(query)\n\n    return matchesEnv && matchesSev && matchesQuery\n  })\n})\n\nconst activeMutationsSummary = computed(() => {\n  const unacknowledged = incidentsList.value.filter((i) => !i.isAcknowledged)\n  return `${unacknowledged.length} Active Schema Mutations Detected`\n})\n\nfunction handleAcknowledgeAndSync() {\n  if (isSyncingAll.value) return\n  isSyncingAll.value = true\n\n  setTimeout(() => {\n    incidentsList.value.forEach((item) => {\n      item.isAcknowledged = true\n      item.isContractSynced = true\n    })\n    isSyncingAll.value = false\n    allAcknowledged.value = true\n  }, 900)\n}\n\nfunction handleToggleMute() {\n  isMutedNonBreaking.value = !isMutedNonBreaking.value\n}\n\nfunction handleRowAction(incident: SchemaDriftIncident) {\n  selectedIncidentId.value = incident.id\n  if (incident.changeType === 'Data Type Alteration') {\n    activeTab.value = 'lineage'\n  } else {\n    incident.isContractSynced = !incident.isContractSynced\n    incident.isAcknowledged = true\n  }\n}\n\nfunction copyCode(key: string, code: string) {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(code)\n    copiedKey.value = key\n    setTimeout(() => {\n      if (copiedKey.value === key) {\n        copiedKey.value = null\n      }\n    }, 2000)\n  }\n}\n</script>\n\n<template>\n  <div data-slot=\"schema-drift-alert-board\" :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardContent class=\"p-5 sm:p-6\">\n        <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n          <!-- Left: Title & Monitored Environments -->\n          <div class=\"space-y-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <div\n                class=\"border-warning/30 bg-warning/10 text-warning text-warning flex size-9 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n              >\n                <ShieldAlert class=\"size-4.5\" />\n              </div>\n              <div>\n                <div class=\"flex flex-wrap items-center gap-2.5\">\n                  <h1 class=\"text-foreground font-mono text-lg font-bold tracking-tight break-all sm:text-xl\">\n                    {{ props.title }}\n                  </h1>\n                  <Badge\n                    :variant=\"allAcknowledged ? 'success' : 'warning'\"\n                    class=\"gap-1.5 px-2.5 py-0.5 font-mono text-xs font-semibold whitespace-normal\"\n                  >\n                    <span v-if=\"!allAcknowledged\" class=\"relative flex size-2\">\n                      <span class=\"bg-warning absolute inline-flex size-full rounded-full opacity-75\" />\n                      <span class=\"bg-warning relative inline-flex size-2 rounded-full\" />\n                    </span>\n                    <CheckCircle2 v-else class=\"text-success size-3\" />\n                    {{ allAcknowledged ? 'All Contracts Synced' : activeMutationsSummary }}\n                  </Badge>\n                </div>\n                <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 pt-1 text-xs\">\n                  <span class=\"text-muted-foreground font-medium\">Monitored Environments:</span>\n                  <div class=\"flex flex-wrap items-center gap-1.5\">\n                    <span\n                      v-for=\"env in props.monitoredEnvironments\"\n                      :key=\"env\"\n                      class=\"border-border bg-muted/60 text-foreground inline-flex items-center gap-1 rounded-md border px-2 py-0.5 font-mono text-xs\"\n                    >\n                      <Database v-if=\"env.includes('Snowflake')\" class=\"text-info size-3\" />\n                      <Layers v-else-if=\"env.includes('Postgres')\" class=\"text-chart-1 size-3\" />\n                      <Activity v-else class=\"text-warning size-3\" />\n                      {{ env }}\n                    </span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right: Top Action Buttons -->\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              :class=\"\n                cn(\n                  'h-9 gap-1.5 text-xs shadow-xs',\n                  isMutedNonBreaking && 'border-warning/40 bg-warning/10 text-warning font-medium',\n                )\n              \"\n              @click=\"handleToggleMute\"\n            >\n              <BellOff v-if=\"isMutedNonBreaking\" class=\"size-3.5\" />\n              <BellRing v-else class=\"size-3.5\" />\n              <span>{{ isMutedNonBreaking ? 'Muted (Non-Breaking Hidden)' : 'Mute Non-Breaking Alerts' }}</span>\n            </Button>\n\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              class=\"h-9 gap-1.5 text-xs font-semibold shadow-xs\"\n              :disabled=\"isSyncingAll\"\n              @click=\"handleAcknowledgeAndSync\"\n            >\n              <RefreshCw :class=\"cn('size-3.5', isSyncingAll && 'animate-spin')\" />\n              <Check v-if=\"allAcknowledged\" class=\"text-success size-3.5\" />\n              <span>{{\n                isSyncingAll\n                  ? 'Syncing Schema Contracts...'\n                  : allAcknowledged\n                    ? 'Contracts Synced & Locked'\n                    : 'Acknowledge & Sync Contracts'\n              }}</span>\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n\n      <!-- Sub-banner SLA Bar -->\n      <div\n        class=\"border-border/80 bg-muted/30 text-muted-foreground flex flex-col gap-2 border-t px-5 py-2.5 text-xs sm:flex-row sm:items-center sm:justify-between\"\n      >\n        <div class=\"flex items-center gap-2 font-mono\">\n          <span class=\"bg-success size-2 rounded-full\" />\n          <span>Realtime Schema Contract Gate: Active (CDC Triggers & dbt Artifact Audits)</span>\n        </div>\n        <div class=\"flex items-center gap-3\">\n          <span\n            >Detection Engine:\n            <strong class=\"text-foreground font-mono font-medium\">UIPKGE Drift Sentinel v2.4</strong></span\n          >\n          <Separator orientation=\"vertical\" class=\"hidden h-3 sm:block\" />\n          <span class=\"font-mono\">Checked 14s ago</span>\n        </div>\n      </div>\n    </Card>\n\n    <!-- 4 Drift Telemetry Metric Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Active Drift Incidents -->\n      <Card class=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex flex-wrap items-start justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Active Drift Incidents</p>\n            <div\n              class=\"border-warning/20 bg-warning/10 text-warning flex size-7 items-center justify-center rounded-md border\"\n            >\n              <AlertTriangle class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"flex items-baseline gap-2 pt-1\">\n            <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\"\n              >2 Anomalies Active</span\n            >\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div class=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground\">Severity Split</span>\n            <span class=\"text-foreground font-mono font-medium\">1 Warning · 1 Low</span>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">2 Active Schema Mutations Detected</p>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Broken Downstream Models -->\n      <Card class=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex flex-wrap items-start justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Broken Downstream Models</p>\n            <div\n              class=\"border-success/20 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\"\n            >\n              <ShieldCheck class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"flex items-baseline gap-2 pt-1\">\n            <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\"\n              >0 Broken Models</span\n            >\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div class=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground\">Impacted Pipelines</span>\n            <span class=\"text-warning font-mono font-medium\">2 Impacted Pipelines</span>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Zero outages · 100% DAG pipeline uptime maintained</p>\n        </CardContent>\n      </Card>\n\n      <!-- Card 3: Schema Audits in 24h -->\n      <Card class=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex flex-wrap items-start justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Schema Audits in 24h</p>\n            <div\n              class=\"border-border bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\"\n            >\n              <Activity class=\"text-info size-4\" />\n            </div>\n          </div>\n          <div class=\"flex items-baseline gap-2 pt-1\">\n            <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1,840</span>\n            <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">100% evaluated</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <Progress :model-value=\"100\" class=\"h-1.5 w-full\" />\n          <p class=\"text-muted-foreground text-xs\">Continuous CDC & dbt schema contract verification</p>\n        </CardContent>\n      </Card>\n\n      <!-- Card 4: Mean Time to Acknowledge -->\n      <Card class=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n        <CardHeader class=\"p-4 pb-2\">\n          <div class=\"flex flex-wrap items-start justify-between gap-2\">\n            <p class=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Mean Time to Acknowledge</p>\n            <div\n              class=\"border-chart-2/20 bg-chart-2/10 text-chart-2 flex size-7 items-center justify-center rounded-md border\"\n            >\n              <Clock class=\"size-4\" />\n            </div>\n          </div>\n          <div class=\"flex items-baseline gap-2 pt-1\">\n            <span class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">12m</span>\n            <Badge wrap variant=\"success\" class=\"text-xs font-medium\">-4.2m vs 30d</Badge>\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2 p-4 pt-1\">\n          <div class=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n            <span class=\"text-muted-foreground\">SLA Compliance</span>\n            <span class=\"text-success font-mono font-medium\">98.4% within SLA</span>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">Target &lt; 30m response for Tier-1 Gold Marts</p>\n        </CardContent>\n      </Card>\n    </div>\n\n    <!-- Schema Drift Incidents Table Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"flex flex-col gap-4 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n        <div>\n          <div class=\"flex items-center gap-2\">\n            <CardTitle class=\"text-base font-semibold\">Schema Drift & Mutation Incidents</CardTitle>\n            <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\">\n              {{ filteredIncidents.length }} of {{ incidentsList.length }} Tracked\n            </Badge>\n          </div>\n          <CardDescription class=\"text-xs\">\n            Detected structural schema variances, missing or unmapped columns, type widening, and nullability\n            relaxations.\n          </CardDescription>\n        </div>\n\n        <!-- Filter Pills by Severity -->\n        <div class=\"flex flex-wrap items-center gap-1.5\">\n          <Button\n            variant=\"outline\"\n            size=\"xs\"\n            :class=\"\n              cn(\n                'h-7 rounded-full text-xs',\n                selectedSeverity === 'all' && 'border-primary bg-primary text-primary-foreground font-medium',\n              )\n            \"\n            @click=\"selectedSeverity = 'all'\"\n          >\n            All Severities ({{ incidentsList.length }})\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"xs\"\n            :class=\"\n              cn(\n                'h-7 rounded-full text-xs',\n                selectedSeverity === 'medium' && 'border-warning bg-warning font-medium text-white',\n              )\n            \"\n            @click=\"selectedSeverity = 'medium'\"\n          >\n            Medium Warning (1)\n          </Button>\n          <Button\n            variant=\"outline\"\n            size=\"xs\"\n            :class=\"\n              cn('h-7 rounded-full text-xs', selectedSeverity === 'low' && 'border-info bg-info font-medium text-white')\n            \"\n            @click=\"selectedSeverity = 'low'\"\n          >\n            Low / Non-Breaking (2)\n          </Button>\n        </div>\n      </CardHeader>\n\n      <!-- Filter Toolbar -->\n      <div class=\"border-border/60 border-t p-4 pt-3 pb-3\">\n        <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n          <div class=\"relative flex-1\">\n            <Search\n              class=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2\"\n            />\n            <input\n              v-model=\"searchQuery\"\n              type=\"text\"\n              placeholder=\"Search table, column, environment, or mutation diff...\"\n              class=\"border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-8.5 w-full rounded-md border px-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n            />\n          </div>\n\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\" />\n              Environment:\n            </span>\n            <Button\n              v-for=\"env in ['all', 'Snowflake Prod', 'Postgres OLTP', 'Kafka Topics']\"\n              :key=\"env\"\n              variant=\"outline\"\n              size=\"xs\"\n              :class=\"\n                cn(\n                  'h-7 font-mono text-xs',\n                  selectedEnvironment === env && 'border-foreground bg-foreground text-background font-semibold',\n                )\n              \"\n              @click=\"selectedEnvironment = env\"\n            >\n              {{ env === 'all' ? 'All Environments' : env }}\n            </Button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Table -->\n      <CardContent class=\"p-0\">\n        <div class=\"border-border/60 overflow-x-auto border-t\">\n          <Table>\n            <TableHeader class=\"bg-muted/40\">\n              <TableRow>\n                <TableHead class=\"min-w-[200px] text-xs font-semibold\">Target Entity & Env</TableHead>\n                <TableHead class=\"min-w-[170px] text-xs font-semibold\">Mutation Type</TableHead>\n                <TableHead class=\"min-w-[260px] text-xs font-semibold\">Schema Drift Diff</TableHead>\n                <TableHead class=\"min-w-[130px] text-xs font-semibold\">Severity</TableHead>\n                <TableHead class=\"min-w-[140px] text-xs font-semibold\">Blast Radius</TableHead>\n                <TableHead class=\"min-w-[90px] text-xs font-semibold\">Detected</TableHead>\n                <TableHead class=\"min-w-[160px] text-right text-xs font-semibold\">Action</TableHead>\n              </TableRow>\n            </TableHeader>\n            <TableBody>\n              <TableRow\n                v-for=\"incident in filteredIncidents\"\n                :key=\"incident.id\"\n                :class=\"\n                  cn(\n                    'hover:bg-muted/30 cursor-pointer transition-colors',\n                    selectedIncidentId === incident.id && 'bg-primary/5 ring-primary/20 ring-1',\n                  )\n                \"\n                @click=\"selectedIncidentId = incident.id\"\n              >\n                <!-- Target Table & Environment -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-1\">\n                    <div class=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-bold\">\n                      <Database v-if=\"incident.environment.includes('Snowflake')\" class=\"text-info size-3.5 shrink-0\" />\n                      <Layers\n                        v-else-if=\"incident.environment.includes('Postgres')\"\n                        class=\"text-chart-1 size-3.5 shrink-0\"\n                      />\n                      <Activity v-else class=\"text-warning size-3.5 shrink-0\" />\n                      <span>{{ incident.targetTable }}</span>\n                    </div>\n                    <Badge\n                      wrap\n                      variant=\"outline\"\n                      class=\"border-border/80 text-muted-foreground font-mono text-xs font-normal\"\n                    >\n                      {{ incident.environment }}\n                    </Badge>\n                  </div>\n                </TableCell>\n\n                <!-- Mutation Type -->\n                <TableCell class=\"py-3\">\n                  <span class=\"text-foreground text-xs font-medium\">{{ incident.changeType }}</span>\n                </TableCell>\n\n                <!-- Schema Drift Diff (Monospace diff representation) -->\n                <TableCell class=\"py-3\">\n                  <div\n                    :class=\"\n                      cn(\n                        'inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium',\n                        incident.diffMode === 'added' && 'border-success/30 bg-success/10 text-success',\n                        incident.diffMode === 'altered' && 'border-warning/30 bg-warning/10 text-warning',\n                        incident.diffMode === 'relaxed' && 'border-info/30 bg-info/10 text-info',\n                      )\n                    \"\n                  >\n                    <code>{{ incident.driftDiff }}</code>\n                  </div>\n                </TableCell>\n\n                <!-- Severity Badge -->\n                <TableCell class=\"py-3\">\n                  <Badge\n                    :variant=\"incident.severity === 'medium' ? 'warning' : 'secondary'\"\n                    class=\"gap-1 text-xs font-medium whitespace-normal\"\n                  >\n                    <AlertTriangle v-if=\"incident.severity === 'medium'\" class=\"text-warning size-3\" />\n                    <AlertCircle v-else class=\"text-info size-3\" />\n                    {{ incident.severityLabel }}\n                  </Badge>\n                </TableCell>\n\n                <!-- Blast Radius Summary -->\n                <TableCell class=\"py-3\">\n                  <div class=\"space-y-0.5\">\n                    <span\n                      :class=\"\n                        cn(\n                          'block font-mono text-xs font-medium',\n                          incident.impactedPipelinesCount > 0 ? 'text-warning font-semibold' : 'text-success',\n                        )\n                      \"\n                    >\n                      {{ incident.blastRadiusSummary }}\n                    </span>\n                    <span class=\"text-muted-foreground text-xs\">\n                      {{ incident.brokenModelsCount }} broken · {{ incident.impactedPipelinesCount }} impacted\n                    </span>\n                  </div>\n                </TableCell>\n\n                <!-- Detected Time -->\n                <TableCell class=\"text-muted-foreground py-3 font-mono text-xs\">\n                  {{ incident.detectedAt }}\n                </TableCell>\n\n                <!-- Action Button -->\n                <TableCell class=\"py-3 text-right\">\n                  <Button\n                    variant=\"outline\"\n                    size=\"xs\"\n                    :class=\"\n                      cn(\n                        'h-7 gap-1 text-xs font-medium shadow-xs',\n                        incident.isContractSynced && 'border-success/40 bg-success/10 text-success',\n                      )\n                    \"\n                    @click.stop=\"handleRowAction(incident)\"\n                  >\n                    <Check v-if=\"incident.isContractSynced\" class=\"size-3\" />\n                    <Eye v-else-if=\"incident.changeType === 'Data Type Alteration'\" class=\"text-primary size-3\" />\n                    <Workflow v-else class=\"size-3\" />\n                    <span>{{ incident.isContractSynced ? 'Contract Synced' : incident.actionLabel }}</span>\n                  </Button>\n                </TableCell>\n              </TableRow>\n\n              <TableRow v-if=\"filteredIncidents.length === 0\">\n                <TableCell colspan=\"7\" class=\"py-8 text-center\">\n                  <div class=\"flex flex-col items-center justify-center gap-1.5\">\n                    <CheckCircle2 class=\"text-success size-7\" />\n                    <p class=\"text-foreground text-sm font-medium\">No schema drift incidents match active filters</p>\n                    <p class=\"text-muted-foreground text-xs\">\n                      All active monitored entities adhere strictly to baseline contracts.\n                    </p>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </div>\n\n        <!-- Table Footer -->\n        <div\n          class=\"border-border/60 bg-muted/20 text-muted-foreground flex flex-col gap-2 border-t px-4 py-2.5 text-xs sm:flex-row sm:items-center sm:justify-between\"\n        >\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-success size-2 rounded-full\" />\n            <span>Click any incident row to trace downstream blast radius lineage and contract YAML.</span>\n          </div>\n          <span class=\"font-mono text-xs\">\n            Active Incident Focus: <strong class=\"text-foreground font-bold\">{{ selectedIncident.targetTable }}</strong>\n          </span>\n        </div>\n      </CardContent>\n    </Card>\n\n    <!-- Blast Radius Lineage Tree Card -->\n    <Card class=\"border-border bg-card shadow-xs\">\n      <CardHeader class=\"border-border/80 border-b p-4 sm:p-5\">\n        <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n          <div class=\"space-y-1\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Workflow class=\"text-primary size-5\" />\n              <CardTitle class=\"text-base font-semibold\"> Downstream Blast Radius & Lineage Impact Tree </CardTitle>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs font-semibold\">\n                {{ selectedIncident.targetTable }}\n              </Badge>\n              <Badge\n                :variant=\"selectedIncident.severity === 'medium' ? 'warning' : 'secondary'\"\n                class=\"font-mono text-xs whitespace-normal\"\n              >\n                {{ selectedIncident.changeType }}\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Automated topological DAG trace evaluating impacted dbt models, Snowflake views, Looker semantic tiles,\n              and operational syncs.\n            </CardDescription>\n          </div>\n\n          <!-- View Tabs (Lineage Graph / Contract YAML / Remediation SQL) -->\n          <div class=\"flex flex-wrap items-center gap-1.5\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              :class=\"\n                cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'lineage' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )\n              \"\n              @click=\"activeTab = 'lineage'\"\n            >\n              <Network class=\"size-3.5\" />\n              <span>Lineage Tree</span>\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              :class=\"\n                cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'yaml' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )\n              \"\n              @click=\"activeTab = 'yaml'\"\n            >\n              <FileCode2 class=\"size-3.5\" />\n              <span>Contract YAML Diff</span>\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              :class=\"\n                cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'sql' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )\n              \"\n              @click=\"activeTab = 'sql'\"\n            >\n              <Terminal class=\"size-3.5\" />\n              <span>Remediation DDL</span>\n            </Button>\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent class=\"p-4 sm:p-5\">\n        <!-- TAB 1: Multi-Tier Blast Radius Lineage Tree -->\n        <div v-if=\"activeTab === 'lineage'\" class=\"space-y-4\">\n          <!-- Summary impact pill strip -->\n          <div class=\"grid grid-cols-2 gap-2.5 sm:grid-cols-4\">\n            <div class=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n              <span class=\"text-muted-foreground block\">Mutation Origin</span>\n              <span class=\"text-foreground block truncate font-mono font-bold\">{{ selectedIncident.targetTable }}</span>\n              <span class=\"text-muted-foreground text-xs\">{{ selectedIncident.environment }}</span>\n            </div>\n\n            <div class=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n              <span class=\"text-muted-foreground block\">Total Nodes in DAG</span>\n              <span class=\"text-foreground block font-mono text-base font-bold\"\n                >{{ selectedIncident.lineageNodes.length }} Tiers</span\n              >\n              <span class=\"text-muted-foreground text-xs\">Topologically ordered</span>\n            </div>\n\n            <div class=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n              <span class=\"text-muted-foreground block\">Impacted Pipelines</span>\n              <span\n                :class=\"\n                  cn(\n                    'block font-mono text-base font-bold',\n                    selectedIncident.impactedPipelinesCount > 0 ? 'text-warning' : 'text-success',\n                  )\n                \"\n              >\n                {{ selectedIncident.impactedPipelinesCount }} Models Impacted\n              </span>\n              <span class=\"text-muted-foreground text-xs\">Requires cast adjustment</span>\n            </div>\n\n            <div class=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n              <span class=\"text-muted-foreground block\">Broken Models</span>\n              <span class=\"text-success block font-mono text-base font-bold\">0 Outages</span>\n              <span class=\"text-muted-foreground text-xs\">Zero pipeline failures</span>\n            </div>\n          </div>\n\n          <!-- Interactive Multi-Tier Lineage Flow Nodes -->\n          <div class=\"border-border bg-muted/10 space-y-3 rounded-xl border p-4\">\n            <div class=\"border-border/60 flex items-center justify-between border-b pb-2 text-xs\">\n              <span class=\"text-muted-foreground font-semibold tracking-wider uppercase\">\n                Downstream Dependency DAG Flow (Left to Right)\n              </span>\n              <span class=\"text-muted-foreground font-mono text-xs\">\n                Active Drift: <code class=\"text-foreground font-bold\">{{ selectedIncident.driftDiff }}</code>\n              </span>\n            </div>\n\n            <div class=\"grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3\">\n              <div\n                v-for=\"(node, index) in selectedIncident.lineageNodes\"\n                :key=\"node.id\"\n                :class=\"\n                  cn(\n                    'space-y-2 rounded-lg border p-3 text-xs shadow-xs transition-colors',\n                    node.status === 'mutation' && 'border-warning/40 bg-warning/5',\n                    node.status === 'impacted' && 'border-warning/50 bg-warning/10 ring-warning/30 ring-1',\n                    node.status === 'warning' && 'border-yellow-500/40 bg-yellow-500/5',\n                    node.status === 'healthy' && 'border-border bg-card',\n                  )\n                \"\n              >\n                <!-- Node Header -->\n                <div class=\"flex flex-wrap items-start justify-between gap-2\">\n                  <div class=\"flex min-w-0 items-center gap-2\">\n                    <div\n                      :class=\"\n                        cn(\n                          'flex size-7 shrink-0 items-center justify-center rounded-md border text-xs',\n                          node.status === 'mutation' && 'border-warning/30 bg-warning/20 text-warning',\n                          node.status === 'impacted' && 'border-warning/40 bg-warning/20 text-warning',\n                          node.status === 'warning' &&\n                            'border-yellow-500/30 bg-yellow-500/20 text-yellow-600 dark:text-yellow-400',\n                          node.status === 'healthy' && 'border-border bg-muted text-foreground',\n                        )\n                      \"\n                    >\n                      <Database v-if=\"node.layer === 'origin'\" class=\"size-3.5\" />\n                      <Layers v-else-if=\"node.layer === 'transform'\" class=\"size-3.5\" />\n                      <Table2 v-else-if=\"node.layer === 'mart'\" class=\"size-3.5\" />\n                      <ArrowUpRight v-else class=\"size-3.5\" />\n                    </div>\n                    <div class=\"min-w-0\">\n                      <div class=\"flex items-center gap-1.5\">\n                        <span class=\"text-muted-foreground font-mono text-xs\">#{{ index + 1 }}</span>\n                        <span class=\"text-foreground block min-w-0 truncate font-mono font-bold\">{{ node.name }}</span>\n                      </div>\n                      <span class=\"text-muted-foreground block truncate text-xs\">{{ node.layerLabel }}</span>\n                    </div>\n                  </div>\n\n                  <Badge\n                    :variant=\"\n                      node.status === 'healthy' ? 'outline' : node.status === 'warning' ? 'secondary' : 'warning'\n                    \"\n                    class=\"shrink-0 font-mono text-xs font-medium whitespace-normal\"\n                  >\n                    <CheckCircle2 v-if=\"node.status === 'healthy'\" class=\"text-success size-3\" />\n                    <AlertTriangle v-else class=\"size-3\" />\n                    {{ node.statusLabel }}\n                  </Badge>\n                </div>\n\n                <!-- Node Description -->\n                <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                  {{ node.description }}\n                </p>\n\n                <!-- Node Meta Footer -->\n                <div\n                  class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-2 font-mono text-xs\"\n                >\n                  <span>{{ node.type }}</span>\n                  <span>{{ node.owner }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- TAB 2: Contract YAML Diff -->\n        <div v-else-if=\"activeTab === 'yaml'\" class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <FileCode2 class=\"text-primary size-4\" />\n              <span class=\"text-foreground font-mono text-xs font-semibold\">\n                models/contracts/{{ selectedIncident.targetTable.replace('.', '_') }}_contract.yml\n              </span>\n              <Badge wrap variant=\"secondary\" class=\"font-mono text-xs\">dbt v1.8 Contract Definition</Badge>\n            </div>\n\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              class=\"h-7 gap-1 text-xs\"\n              @click=\"copyCode('yaml', selectedIncident.contractYaml)\"\n            >\n              <Check v-if=\"copiedKey === 'yaml'\" class=\"text-success size-3\" />\n              <Copy v-else class=\"size-3\" />\n              <span>{{ copiedKey === 'yaml' ? 'Copied YAML!' : 'Copy YAML Contract' }}</span>\n            </Button>\n          </div>\n\n          <div\n            class=\"border-border overflow-x-auto rounded-lg border bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-100 dark:bg-neutral-950\"\n          >\n            <pre class=\"whitespace-pre\"><code>{{ selectedIncident.contractYaml }}</code></pre>\n          </div>\n        </div>\n\n        <!-- TAB 3: Remediation DDL -->\n        <div v-else-if=\"activeTab === 'sql'\" class=\"space-y-3\">\n          <div class=\"flex items-center justify-between\">\n            <div class=\"flex items-center gap-2\">\n              <Terminal class=\"text-primary size-4\" />\n              <span class=\"text-foreground font-mono text-xs font-semibold\">\n                remediation_migration_{{ selectedIncident.targetTable.replace('.', '_') }}.sql\n              </span>\n              <Badge wrap variant=\"outline\" class=\"font-mono text-xs\">Warehouse DDL Patch</Badge>\n            </div>\n\n            <Button\n              variant=\"ghost\"\n              size=\"xs\"\n              class=\"h-7 gap-1 text-xs\"\n              @click=\"copyCode('sql', selectedIncident.remediationDdl)\"\n            >\n              <Check v-if=\"copiedKey === 'sql'\" class=\"text-success size-3\" />\n              <Copy v-else class=\"size-3\" />\n              <span>{{ copiedKey === 'sql' ? 'Copied SQL!' : 'Copy Migration SQL' }}</span>\n            </Button>\n          </div>\n\n          <div\n            class=\"border-border overflow-x-auto rounded-lg border bg-neutral-950 p-4 font-mono text-xs leading-relaxed text-neutral-100 dark:bg-neutral-950\"\n          >\n            <pre class=\"whitespace-pre\"><code>{{ selectedIncident.remediationDdl }}</code></pre>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/SchemaDriftAlertBoard.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/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json"
  ],
  "description": "Automated data warehouse schema drift and structural anomaly detector with downstream blast radius impact analysis, interactive multi-tier lineage graph, schema mutation contract diffs, and remediation workflows.",
  "categories": [
    "devops",
    "dashboard",
    "app",
    "analytics",
    "data"
  ]
}