{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "schema-drift-alert-board",
  "title": "Schema Drift Alert Board",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/schema-drift-alert-board/SchemaDriftAlertBoard.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\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-react'\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  className?: string\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\nexport function SchemaDriftAlertBoard({\n  title = 'Data Warehouse Schema Drift & Anomaly Alerts',\n  monitoredEnvironments = ['Snowflake Prod', 'Postgres OLTP', 'Kafka Topics'],\n  activeMutationsCount = 2,\n  incidents,\n  className,\n}: SchemaDriftAlertBoardProps) {\n  const [incidentsList, setIncidentsList] = React.useState<SchemaDriftIncident[]>(() =>\n    incidents ? JSON.parse(JSON.stringify(incidents)) : defaultIncidents,\n  )\n\n  const [selectedIncidentId, setSelectedIncidentId] = React.useState<string>('drift-inc-2')\n  const [searchQuery, setSearchQuery] = React.useState('')\n  const [selectedEnvironment, setSelectedEnvironment] = React.useState<string>('all')\n  const [selectedSeverity, setSelectedSeverity] = React.useState<string>('all')\n  const [isMutedNonBreaking, setIsMutedNonBreaking] = React.useState(false)\n  const [isSyncingAll, setIsSyncingAll] = React.useState(false)\n  const [allAcknowledged, setAllAcknowledged] = React.useState(false)\n  const [copiedKey, setCopiedKey] = React.useState<string | null>(null)\n  const [activeTab, setActiveTab] = React.useState<'lineage' | 'yaml' | 'sql'>('lineage')\n\n  const selectedIncident = React.useMemo(() => {\n    return incidentsList.find((inc) => inc.id === selectedIncidentId) ?? incidentsList[0]\n  }, [incidentsList, selectedIncidentId])\n\n  const filteredIncidents = React.useMemo(() => {\n    const query = searchQuery.trim().toLowerCase()\n    return incidentsList.filter((item) => {\n      if (isMutedNonBreaking && item.severity === 'low') {\n        return false\n      }\n\n      const matchesEnv = selectedEnvironment === 'all' || item.environment === selectedEnvironment\n      const matchesSev = selectedSeverity === 'all' || item.severity === selectedSeverity\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  }, [incidentsList, isMutedNonBreaking, selectedEnvironment, selectedSeverity, searchQuery])\n\n  const activeMutationsSummary = React.useMemo(() => {\n    const unacknowledged = incidentsList.filter((i) => !i.isAcknowledged)\n    return `${unacknowledged.length} Active Schema Mutations Detected`\n  }, [incidentsList])\n\n  const handleAcknowledgeAndSync = () => {\n    if (isSyncingAll) return\n    setIsSyncingAll(true)\n\n    setTimeout(() => {\n      setIncidentsList((prev) =>\n        prev.map((item) => ({\n          ...item,\n          isAcknowledged: true,\n          isContractSynced: true,\n        })),\n      )\n      setIsSyncingAll(false)\n      setAllAcknowledged(true)\n    }, 900)\n  }\n\n  const handleToggleMute = () => {\n    setIsMutedNonBreaking((prev) => !prev)\n  }\n\n  const handleRowAction = (incident: SchemaDriftIncident) => {\n    setSelectedIncidentId(incident.id)\n    if (incident.changeType === 'Data Type Alteration') {\n      setActiveTab('lineage')\n    } else {\n      setIncidentsList((prev) =>\n        prev.map((item) =>\n          item.id === incident.id ? { ...item, isContractSynced: !item.isContractSynced, isAcknowledged: true } : item,\n        ),\n      )\n    }\n  }\n\n  const copyCode = (key: string, code: string) => {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(code)\n      setCopiedKey(key)\n      setTimeout(() => {\n        setCopiedKey((curr) => (curr === key ? null : curr))\n      }, 2000)\n    }\n  }\n\n  return (\n    <div data-slot=\"schema-drift-alert-board\" className={cn('text-foreground w-full space-y-6', className)}>\n      {/* Header Section */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardContent className=\"p-5 sm:p-6\">\n          <div className=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n            {/* Left: Title & Monitored Environments */}\n            <div className=\"space-y-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <div className=\"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                  <ShieldAlert className=\"size-4.5\" />\n                </div>\n                <div>\n                  <div className=\"flex flex-wrap items-center gap-2.5\">\n                    <h1 className=\"text-foreground font-mono text-lg font-bold tracking-tight break-all sm:text-xl\">\n                      {title}\n                    </h1>\n                    <Badge\n                      wrap\n                      variant={allAcknowledged ? 'success' : 'warning'}\n                      className=\"gap-1.5 px-2.5 py-0.5 font-mono text-xs font-semibold\"\n                    >\n                      {!allAcknowledged ? (\n                        <span className=\"relative flex size-2\">\n                          <span className=\"bg-warning absolute inline-flex size-full rounded-full opacity-75\" />\n                          <span className=\"bg-warning relative inline-flex size-2 rounded-full\" />\n                        </span>\n                      ) : (\n                        <CheckCircle2 className=\"text-success size-3\" />\n                      )}\n                      {allAcknowledged ? 'All Contracts Synced' : activeMutationsSummary}\n                    </Badge>\n                  </div>\n                  <div className=\"text-muted-foreground flex flex-wrap items-center gap-2 pt-1 text-xs\">\n                    <span className=\"text-muted-foreground font-medium\">Monitored Environments:</span>\n                    <div className=\"flex flex-wrap items-center gap-1.5\">\n                      {monitoredEnvironments.map((env) => (\n                        <span\n                          key={env}\n                          className=\"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                          {env.includes('Snowflake') ? (\n                            <Database className=\"text-info size-3\" />\n                          ) : env.includes('Postgres') ? (\n                            <Layers className=\"text-chart-1 size-3\" />\n                          ) : (\n                            <Activity className=\"text-warning size-3\" />\n                          )}\n                          {env}\n                        </span>\n                      ))}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Right: Top Action Buttons */}\n            <div className=\"flex flex-wrap items-center gap-2.5\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={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                onClick={handleToggleMute}\n              >\n                {isMutedNonBreaking ? <BellOff className=\"size-3.5\" /> : <BellRing className=\"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                className=\"h-9 gap-1.5 text-xs font-semibold shadow-xs\"\n                disabled={isSyncingAll}\n                onClick={handleAcknowledgeAndSync}\n              >\n                <RefreshCw className={cn('size-3.5', isSyncingAll && 'animate-spin')} />\n                {allAcknowledged && <Check className=\"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 className=\"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          <div className=\"flex items-center gap-2 font-mono\">\n            <span className=\"bg-success size-2 rounded-full\" />\n            <span>Realtime Schema Contract Gate: Active (CDC Triggers & dbt Artifact Audits)</span>\n          </div>\n          <div className=\"flex items-center gap-3\">\n            <span>\n              Detection Engine:{' '}\n              <strong className=\"text-foreground font-mono font-medium\">UIPKGE Drift Sentinel v2.4</strong>\n            </span>\n            <Separator orientation=\"vertical\" className=\"hidden h-3 sm:block\" />\n            <span className=\"font-mono\">Checked 14s ago</span>\n          </div>\n        </div>\n      </Card>\n      {/* 4 Drift Telemetry Metric Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* Card 1: Active Drift Incidents */}\n        <Card className=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n          <CardHeader className=\"p-4 pb-2\">\n            <div className=\"flex flex-wrap items-start justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                Active Drift Incidents\n              </p>\n              <div className=\"border-warning/20 bg-warning/10 text-warning flex size-7 items-center justify-center rounded-md border\">\n                <AlertTriangle className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"flex items-baseline gap-2 pt-1\">\n              <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">\n                2 Anomalies Active\n              </span>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2 p-4 pt-1\">\n            <div className=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n              <span className=\"text-muted-foreground\">Severity Split</span>\n              <span className=\"text-foreground font-mono font-medium\">1 Warning · 1 Low</span>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">2 Active Schema Mutations Detected</p>\n          </CardContent>\n        </Card>\n\n        {/* Card 2: Broken Downstream Models */}\n        <Card className=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n          <CardHeader className=\"p-4 pb-2\">\n            <div className=\"flex flex-wrap items-start justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                Broken Downstream Models\n              </p>\n              <div className=\"border-success/20 bg-success/10 text-success flex size-7 items-center justify-center rounded-md border\">\n                <ShieldCheck className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"flex items-baseline gap-2 pt-1\">\n              <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">\n                0 Broken Models\n              </span>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2 p-4 pt-1\">\n            <div className=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n              <span className=\"text-muted-foreground\">Impacted Pipelines</span>\n              <span className=\"text-warning font-mono font-medium\">2 Impacted Pipelines</span>\n            </div>\n            <p className=\"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 className=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n          <CardHeader className=\"p-4 pb-2\">\n            <div className=\"flex flex-wrap items-start justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">Schema Audits in 24h</p>\n              <div className=\"border-border bg-muted text-foreground flex size-7 items-center justify-center rounded-md border\">\n                <Activity className=\"text-info size-4\" />\n              </div>\n            </div>\n            <div className=\"flex items-baseline gap-2 pt-1\">\n              <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1,840</span>\n              <Badge wrap variant=\"outline\" className=\"font-mono text-xs\">\n                100% evaluated\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2 p-4 pt-1\">\n            <Progress value={100} className=\"h-1.5 w-full\" />\n            <p className=\"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 className=\"border-border bg-card hover:border-border shadow-xs transition-colors\">\n          <CardHeader className=\"p-4 pb-2\">\n            <div className=\"flex flex-wrap items-start justify-between gap-2\">\n              <p className=\"text-muted-foreground text-xs font-medium tracking-wider uppercase\">\n                Mean Time to Acknowledge\n              </p>\n              <div className=\"border-chart-2/20 bg-chart-2/10 text-chart-2 flex size-7 items-center justify-center rounded-md border\">\n                <Clock className=\"size-4\" />\n              </div>\n            </div>\n            <div className=\"flex items-baseline gap-2 pt-1\">\n              <span className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">12m</span>\n              <Badge wrap variant=\"success\" className=\"text-xs font-medium\">\n                -4.2m vs 30d\n              </Badge>\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2 p-4 pt-1\">\n            <div className=\"bg-muted/40 flex items-center justify-between rounded-md px-2 py-1 text-xs\">\n              <span className=\"text-muted-foreground\">SLA Compliance</span>\n              <span className=\"text-success font-mono font-medium\">98.4% within SLA</span>\n            </div>\n            <p className=\"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 className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"flex flex-col gap-4 pb-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <CardTitle className=\"text-base font-semibold\">Schema Drift & Mutation Incidents</CardTitle>\n              <Badge wrap variant=\"secondary\" className=\"font-mono text-xs\">\n                {filteredIncidents.length} of {incidentsList.length} Tracked\n              </Badge>\n            </div>\n            <CardDescription className=\"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 className=\"flex flex-wrap items-center gap-1.5\">\n            <Button\n              variant=\"outline\"\n              size=\"xs\"\n              className={cn(\n                'h-7 rounded-full text-xs',\n                selectedSeverity === 'all' && 'border-primary bg-primary text-primary-foreground font-medium',\n              )}\n              onClick={() => setSelectedSeverity('all')}\n            >\n              All Severities ({incidentsList.length})\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"xs\"\n              className={cn(\n                'h-7 rounded-full text-xs',\n                selectedSeverity === 'medium' && 'border-warning bg-warning font-medium text-white',\n              )}\n              onClick={() => setSelectedSeverity('medium')}\n            >\n              Medium Warning (1)\n            </Button>\n            <Button\n              variant=\"outline\"\n              size=\"xs\"\n              className={cn(\n                'h-7 rounded-full text-xs',\n                selectedSeverity === 'low' && 'border-info bg-info font-medium text-white',\n              )}\n              onClick={() => setSelectedSeverity('low')}\n            >\n              Low / Non-Breaking (2)\n            </Button>\n          </div>\n        </CardHeader>\n\n        {/* Filter Toolbar */}\n        <div className=\"border-border/60 border-t p-4 pt-3 pb-3\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"relative flex-1\">\n              <Search className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2\" />\n              <input\n                value={searchQuery}\n                onChange={(e) => setSearchQuery(e.target.value)}\n                type=\"text\"\n                placeholder=\"Search table, column, environment, or mutation diff...\"\n                className=\"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 className=\"flex flex-wrap items-center gap-1.5\">\n              <span className=\"text-muted-foreground mr-1 flex items-center gap-1 text-xs font-medium\">\n                <Filter className=\"size-3\" />\n                Environment:\n              </span>\n              {['all', 'Snowflake Prod', 'Postgres OLTP', 'Kafka Topics'].map((env) => (\n                <Button\n                  key={env}\n                  variant=\"outline\"\n                  size=\"xs\"\n                  className={cn(\n                    'h-7 font-mono text-xs',\n                    selectedEnvironment === env && 'border-foreground bg-foreground text-background font-semibold',\n                  )}\n                  onClick={() => setSelectedEnvironment(env)}\n                >\n                  {env === 'all' ? 'All Environments' : env}\n                </Button>\n              ))}\n            </div>\n          </div>\n        </div>\n\n        {/* Table */}\n        <CardContent className=\"p-0\">\n          <div className=\"border-border/60 overflow-x-auto border-t\">\n            <Table>\n              <TableHeader className=\"bg-muted/40\">\n                <TableRow>\n                  <TableHead className=\"min-w-[200px] text-xs font-semibold\">Target Entity & Env</TableHead>\n                  <TableHead className=\"min-w-[170px] text-xs font-semibold\">Mutation Type</TableHead>\n                  <TableHead className=\"min-w-[260px] text-xs font-semibold\">Schema Drift Diff</TableHead>\n                  <TableHead className=\"min-w-[130px] text-xs font-semibold\">Severity</TableHead>\n                  <TableHead className=\"min-w-[140px] text-xs font-semibold\">Blast Radius</TableHead>\n                  <TableHead className=\"min-w-[90px] text-xs font-semibold\">Detected</TableHead>\n                  <TableHead className=\"min-w-[160px] text-right text-xs font-semibold\">Action</TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                {filteredIncidents.map((incident) => (\n                  <TableRow\n                    key={incident.id}\n                    className={cn(\n                      'hover:bg-muted/30 cursor-pointer transition-colors',\n                      selectedIncidentId === incident.id && 'bg-primary/5 ring-primary/20 ring-1',\n                    )}\n                    onClick={() => setSelectedIncidentId(incident.id)}\n                  >\n                    {/* Target Table & Environment */}\n                    <TableCell className=\"py-3\">\n                      <div className=\"space-y-1\">\n                        <div className=\"text-foreground flex items-center gap-1.5 font-mono text-xs font-bold\">\n                          {incident.environment.includes('Snowflake') ? (\n                            <Database className=\"text-info size-3.5 shrink-0\" />\n                          ) : incident.environment.includes('Postgres') ? (\n                            <Layers className=\"text-chart-1 size-3.5 shrink-0\" />\n                          ) : (\n                            <Activity className=\"text-warning size-3.5 shrink-0\" />\n                          )}\n                          <span>{incident.targetTable}</span>\n                        </div>\n                        <Badge\n                          wrap\n                          variant=\"outline\"\n                          className=\"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 className=\"py-3\">\n                      <span className=\"text-foreground text-xs font-medium\">{incident.changeType}</span>\n                    </TableCell>\n\n                    {/* Schema Drift Diff */}\n                    <TableCell className=\"py-3\">\n                      <div\n                        className={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                        <code>{incident.driftDiff}</code>\n                      </div>\n                    </TableCell>\n\n                    {/* Severity Badge */}\n                    <TableCell className=\"py-3\">\n                      <Badge\n                        wrap\n                        variant={incident.severity === 'medium' ? 'warning' : 'secondary'}\n                        className=\"gap-1 text-xs font-medium\"\n                      >\n                        {incident.severity === 'medium' ? (\n                          <AlertTriangle className=\"text-warning size-3\" />\n                        ) : (\n                          <AlertCircle className=\"text-info size-3\" />\n                        )}\n                        {incident.severityLabel}\n                      </Badge>\n                    </TableCell>\n\n                    {/* Blast Radius Summary */}\n                    <TableCell className=\"py-3\">\n                      <div className=\"space-y-0.5\">\n                        <span\n                          className={cn(\n                            'block font-mono text-xs font-medium',\n                            incident.impactedPipelinesCount > 0 ? 'text-warning font-semibold' : 'text-success',\n                          )}\n                        >\n                          {incident.blastRadiusSummary}\n                        </span>\n                        <span className=\"text-muted-foreground text-xs\">\n                          {incident.brokenModelsCount} broken · {incident.impactedPipelinesCount} impacted\n                        </span>\n                      </div>\n                    </TableCell>\n\n                    {/* Detected Time */}\n                    <TableCell className=\"text-muted-foreground py-3 font-mono text-xs\">\n                      {incident.detectedAt}\n                    </TableCell>\n\n                    {/* Action Button */}\n                    <TableCell className=\"py-3 text-right\">\n                      <Button\n                        variant=\"outline\"\n                        size=\"xs\"\n                        className={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                        onClick={(e) => {\n                          e.stopPropagation()\n                          handleRowAction(incident)\n                        }}\n                      >\n                        {incident.isContractSynced ? (\n                          <Check className=\"size-3\" />\n                        ) : incident.changeType === 'Data Type Alteration' ? (\n                          <Eye className=\"text-primary size-3\" />\n                        ) : (\n                          <Workflow className=\"size-3\" />\n                        )}\n                        <span>{incident.isContractSynced ? 'Contract Synced' : incident.actionLabel}</span>\n                      </Button>\n                    </TableCell>\n                  </TableRow>\n                ))}\n\n                {filteredIncidents.length === 0 && (\n                  <TableRow>\n                    <TableCell colSpan={7} className=\"py-8 text-center\">\n                      <div className=\"flex flex-col items-center justify-center gap-1.5\">\n                        <CheckCircle2 className=\"text-success size-7\" />\n                        <p className=\"text-foreground text-sm font-medium\">\n                          No schema drift incidents match active filters\n                        </p>\n                        <p className=\"text-muted-foreground text-xs\">\n                          All active monitored entities adhere strictly to baseline contracts.\n                        </p>\n                      </div>\n                    </TableCell>\n                  </TableRow>\n                )}\n              </TableBody>\n            </Table>\n          </div>\n\n          {/* Table Footer */}\n          <div className=\"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            <div className=\"flex items-center gap-2\">\n              <span className=\"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 className=\"font-mono text-xs\">\n              Active Incident Focus:{' '}\n              <strong className=\"text-foreground font-bold\">{selectedIncident.targetTable}</strong>\n            </span>\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Blast Radius Lineage Tree Card */}\n      <Card className=\"border-border bg-card shadow-xs\">\n        <CardHeader className=\"border-border/80 border-b p-4 sm:p-5\">\n          <div className=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\n            <div className=\"space-y-1\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Workflow className=\"text-primary size-5\" />\n                <CardTitle className=\"text-base font-semibold\">Downstream Blast Radius & Lineage Impact Tree</CardTitle>\n                <Badge wrap variant=\"outline\" className=\"font-mono text-xs font-semibold\">\n                  {selectedIncident.targetTable}\n                </Badge>\n                <Badge\n                  wrap\n                  variant={selectedIncident.severity === 'medium' ? 'warning' : 'secondary'}\n                  className=\"font-mono text-xs\"\n                >\n                  {selectedIncident.changeType}\n                </Badge>\n              </div>\n              <CardDescription className=\"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 */}\n            <div className=\"flex flex-wrap items-center gap-1.5\">\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'lineage' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )}\n                onClick={() => setActiveTab('lineage')}\n              >\n                <Network className=\"size-3.5\" />\n                <span>Lineage Tree</span>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'yaml' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )}\n                onClick={() => setActiveTab('yaml')}\n              >\n                <FileCode2 className=\"size-3.5\" />\n                <span>Contract YAML Diff</span>\n              </Button>\n              <Button\n                variant=\"outline\"\n                size=\"sm\"\n                className={cn(\n                  'h-8 gap-1.5 text-xs',\n                  activeTab === 'sql' && 'border-primary bg-primary/10 text-primary font-semibold',\n                )}\n                onClick={() => setActiveTab('sql')}\n              >\n                <Terminal className=\"size-3.5\" />\n                <span>Remediation DDL</span>\n              </Button>\n            </div>\n          </div>\n        </CardHeader>\n\n        <CardContent className=\"p-4 sm:p-5\">\n          {/* TAB 1: Multi-Tier Blast Radius Lineage Tree */}\n          {activeTab === 'lineage' && (\n            <div className=\"space-y-4\">\n              {/* Summary impact pill strip */}\n              <div className=\"grid grid-cols-2 gap-2.5 sm:grid-cols-4\">\n                <div className=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n                  <span className=\"text-muted-foreground block\">Mutation Origin</span>\n                  <span className=\"text-foreground block truncate font-mono font-bold\">\n                    {selectedIncident.targetTable}\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">{selectedIncident.environment}</span>\n                </div>\n\n                <div className=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n                  <span className=\"text-muted-foreground block\">Total Nodes in DAG</span>\n                  <span className=\"text-foreground block font-mono text-base font-bold\">\n                    {selectedIncident.lineageNodes.length} Tiers\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">Topologically ordered</span>\n                </div>\n\n                <div className=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n                  <span className=\"text-muted-foreground block\">Impacted Pipelines</span>\n                  <span\n                    className={cn(\n                      'block font-mono text-base font-bold',\n                      selectedIncident.impactedPipelinesCount > 0 ? 'text-warning' : 'text-success',\n                    )}\n                  >\n                    {selectedIncident.impactedPipelinesCount} Models Impacted\n                  </span>\n                  <span className=\"text-muted-foreground text-xs\">Requires cast adjustment</span>\n                </div>\n\n                <div className=\"border-border/80 bg-muted/30 space-y-1 rounded-lg border p-3 text-xs\">\n                  <span className=\"text-muted-foreground block\">Broken Models</span>\n                  <span className=\"text-success block font-mono text-base font-bold\">0 Outages</span>\n                  <span className=\"text-muted-foreground text-xs\">Zero pipeline failures</span>\n                </div>\n              </div>\n\n              {/* Multi-Tier Lineage Flow Nodes */}\n              <div className=\"border-border bg-muted/10 space-y-3 rounded-xl border p-4\">\n                <div className=\"border-border/60 flex items-center justify-between border-b pb-2 text-xs\">\n                  <span className=\"text-muted-foreground font-semibold tracking-wider uppercase\">\n                    Downstream Dependency DAG Flow (Left to Right)\n                  </span>\n                  <span className=\"text-muted-foreground font-mono text-xs\">\n                    Active Drift: <code className=\"text-foreground font-bold\">{selectedIncident.driftDiff}</code>\n                  </span>\n                </div>\n\n                <div className=\"grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3\">\n                  {selectedIncident.lineageNodes.map((node, index) => (\n                    <div\n                      key={node.id}\n                      className={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                      {/* Node Header */}\n                      <div className=\"flex flex-wrap items-start justify-between gap-2\">\n                        <div className=\"flex min-w-0 items-center gap-2\">\n                          <div\n                            className={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                            {node.layer === 'origin' ? (\n                              <Database className=\"size-3.5\" />\n                            ) : node.layer === 'transform' ? (\n                              <Layers className=\"size-3.5\" />\n                            ) : node.layer === 'mart' ? (\n                              <Table2 className=\"size-3.5\" />\n                            ) : (\n                              <ArrowUpRight className=\"size-3.5\" />\n                            )}\n                          </div>\n                          <div className=\"min-w-0\">\n                            <div className=\"flex items-center gap-1.5\">\n                              <span className=\"text-muted-foreground font-mono text-xs\">#{index + 1}</span>\n                              <span className=\"text-foreground block min-w-0 truncate font-mono font-bold\">\n                                {node.name}\n                              </span>\n                            </div>\n                            <span className=\"text-muted-foreground block truncate text-xs\">{node.layerLabel}</span>\n                          </div>\n                        </div>\n\n                        <Badge\n                          wrap\n                          variant={\n                            node.status === 'healthy' ? 'outline' : node.status === 'warning' ? 'secondary' : 'warning'\n                          }\n                          className=\"shrink-0 font-mono text-xs font-medium\"\n                        >\n                          {node.status === 'healthy' ? (\n                            <CheckCircle2 className=\"text-success size-3\" />\n                          ) : (\n                            <AlertTriangle className=\"size-3\" />\n                          )}\n                          {node.statusLabel}\n                        </Badge>\n                      </div>\n\n                      {/* Node Description */}\n                      <p className=\"text-muted-foreground text-xs leading-relaxed\">{{ ...node }.description}</p>\n\n                      {/* Node Meta Footer */}\n                      <div className=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-2 font-mono text-xs\">\n                        <span>{node.type}</span>\n                        <span>{node.owner}</span>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </div>\n          )}\n\n          {/* TAB 2: Contract YAML Diff */}\n          {activeTab === 'yaml' && (\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <FileCode2 className=\"text-primary size-4\" />\n                  <span className=\"text-foreground font-mono text-xs font-semibold\">\n                    models/contracts/{selectedIncident.targetTable.replace('.', '_')}_contract.yml\n                  </span>\n                  <Badge wrap variant=\"secondary\" className=\"font-mono text-xs\">\n                    dbt v1.8 Contract Definition\n                  </Badge>\n                </div>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  className=\"h-7 gap-1 text-xs\"\n                  onClick={() => copyCode('yaml', selectedIncident.contractYaml)}\n                >\n                  {copiedKey === 'yaml' ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copiedKey === 'yaml' ? 'Copied YAML!' : 'Copy YAML Contract'}</span>\n                </Button>\n              </div>\n\n              <div className=\"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                <pre className=\"whitespace-pre\">\n                  <code>{selectedIncident.contractYaml}</code>\n                </pre>\n              </div>\n            </div>\n          )}\n\n          {/* TAB 3: Remediation DDL */}\n          {activeTab === 'sql' && (\n            <div className=\"space-y-3\">\n              <div className=\"flex items-center justify-between\">\n                <div className=\"flex items-center gap-2\">\n                  <Terminal className=\"text-primary size-4\" />\n                  <span className=\"text-foreground font-mono text-xs font-semibold\">\n                    remediation_migration_{selectedIncident.targetTable.replace('.', '_')}.sql\n                  </span>\n                  <Badge wrap variant=\"outline\" className=\"font-mono text-xs\">\n                    Warehouse DDL Patch\n                  </Badge>\n                </div>\n\n                <Button\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  className=\"h-7 gap-1 text-xs\"\n                  onClick={() => copyCode('sql', selectedIncident.remediationDdl)}\n                >\n                  {copiedKey === 'sql' ? <Check className=\"text-success size-3\" /> : <Copy className=\"size-3\" />}\n                  <span>{copiedKey === 'sql' ? 'Copied SQL!' : 'Copy Migration SQL'}</span>\n                </Button>\n              </div>\n\n              <div className=\"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                <pre className=\"whitespace-pre\">\n                  <code>{selectedIncident.remediationDdl}</code>\n                </pre>\n              </div>\n            </div>\n          )}\n        </CardContent>\n      </Card>\n    </div>\n  )\n}\n\nexport default SchemaDriftAlertBoard\n",
      "type": "registry:block",
      "target": "~/components/blocks/SchemaDriftAlertBoard.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "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"
  ]
}