{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lakehouse-table-optimizer",
  "title": "Lakehouse Table Optimizer",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/lakehouse-table-optimizer/LakehouseTableOptimizer.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport {\n  ArrowDownRight,\n  Check,\n  CheckCircle2,\n  Clock,\n  Copy,\n  Database,\n  FileCode2,\n  FileText,\n  FolderArchive,\n  HardDrive,\n  History,\n  Layers,\n  RefreshCw,\n  Search,\n  Server,\n  Terminal,\n  Trash2,\n  Workflow,\n  Zap,\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'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nexport type SnapshotOperation = 'MERGE' | 'APPEND' | 'OPTIMIZE' | 'REPLACE_PARTITION'\nexport type SqlSyntaxMode = 'system_time' | 'system_version' | 'pyspark' | 'trino'\n\nexport interface TableSnapshot {\n  id: string\n  numericId: string\n  timestamp: string\n  relativeTime: string\n  operation: SnapshotOperation\n  rowsAdded: string\n  rowsDeleted: string\n  author: string\n  summary: string\n  manifestFile: string\n  filesAdded: number\n  filesRemoved: number\n  byteDelta: string\n}\n\nexport interface PartitionRecord {\n  partitionKey: string\n  fileCount: number\n  avgFileSize: string\n  totalSize: string\n  skippedPercentage: number\n  zOrderScore: string\n  status: 'Optimized' | 'Compacting' | 'Needs Z-Order'\n  lastClustered: string\n}\n\nexport interface TableDetails {\n  name: string\n  format: string\n  totalSize: string\n  rowCount: string\n  statusText: string\n  catalog: string\n  storageLocation: string\n  lastCompacted: string\n  compressionCodec: string\n}\n\nexport interface LakehouseTableOptimizerProps {\n  initialTable?: TableDetails\n  initialSnapshots?: TableSnapshot[]\n  initialPartitions?: PartitionRecord[]\n  className?: string\n}\n\nconst defaultTable: TableDetails = {\n  name: 'lakehouse.silver_customer_events',\n  format: 'Apache Iceberg v2 · Parquet',\n  totalSize: '4.2 TB',\n  rowCount: '1.48B Rows',\n  statusText: 'Table Optimized · 0 Small Files',\n  catalog: 'AWS Glue Data Catalog (us-east-1)',\n  storageLocation: 's3://lakehouse-data-prod/silver/customer_events/',\n  lastCompacted: '28 mins ago',\n  compressionCodec: 'ZSTD (Level 7)',\n}\n\nconst defaultSnapshots: TableSnapshot[] = [\n  {\n    id: 'snap_84920194821',\n    numericId: '84920194821',\n    timestamp: '2026-08-21 09:30:00 UTC',\n    relativeTime: '12 mins ago',\n    operation: 'MERGE',\n    rowsAdded: '+142,500',\n    rowsDeleted: '-18,200',\n    author: 'spark-streaming-pipeline',\n    summary: \"Upserted late-arriving customer clickstream events from Kafka topic 'customer.events.prod'\",\n    manifestFile: 'snap-84920194821-1-m0.avro',\n    filesAdded: 4,\n    filesRemoved: 3,\n    byteDelta: '+128 MB',\n  },\n  {\n    id: 'snap_84920183104',\n    numericId: '84920183104',\n    timestamp: '2026-08-21 08:00:00 UTC',\n    relativeTime: '1 hour ago',\n    operation: 'OPTIMIZE',\n    rowsAdded: '+0',\n    rowsDeleted: '-0',\n    author: 'iceberg-compactor-daemon',\n    summary: 'Bin-pack compaction rewrote 4,210 small files into 42 optimal 128MB Parquet data files',\n    manifestFile: 'snap-84920183104-1-m0.avro',\n    filesAdded: 42,\n    filesRemoved: 4210,\n    byteDelta: '-4.1 GB (compaction gain)',\n  },\n  {\n    id: 'snap_84920152918',\n    numericId: '84920152918',\n    timestamp: '2026-08-21 06:15:00 UTC',\n    relativeTime: '3 hours ago',\n    operation: 'APPEND',\n    rowsAdded: '+890,200',\n    rowsDeleted: '-0',\n    author: 'batch-ingest-hourly',\n    summary: 'Micro-batch append for EMEA checkout and cart telemetry session events',\n    manifestFile: 'snap-84920152918-1-m0.avro',\n    filesAdded: 18,\n    filesRemoved: 0,\n    byteDelta: '+2.2 GB',\n  },\n  {\n    id: 'snap_84920120195',\n    numericId: '84920120195',\n    timestamp: '2026-08-20 23:45:00 UTC',\n    relativeTime: '9 hours ago',\n    operation: 'REPLACE_PARTITION',\n    rowsAdded: '+3,410,000',\n    rowsDeleted: '-3,398,000',\n    author: 'dbt-backfill-runner',\n    summary: \"Replaced partition 'event_date=2026-08-20' following upstream IP geolocation schema enrichment\",\n    manifestFile: 'snap-84920120195-1-m0.avro',\n    filesAdded: 28,\n    filesRemoved: 28,\n    byteDelta: '+140 MB',\n  },\n  {\n    id: 'snap_84919984120',\n    numericId: '84919984120',\n    timestamp: '2026-08-20 18:30:00 UTC',\n    relativeTime: '15 hours ago',\n    operation: 'APPEND',\n    rowsAdded: '+1,205,400',\n    rowsDeleted: '-0',\n    author: 'batch-ingest-hourly',\n    summary: 'Hourly ingestion run for US-East customer checkout telemetry records',\n    manifestFile: 'snap-84919984120-1-m0.avro',\n    filesAdded: 24,\n    filesRemoved: 0,\n    byteDelta: '+3.1 GB',\n  },\n]\n\nconst defaultPartitions: PartitionRecord[] = [\n  {\n    partitionKey: 'event_date=2026-08-21',\n    fileCount: 42,\n    avgFileSize: '128.2 MB',\n    totalSize: '5.38 GB',\n    skippedPercentage: 98.4,\n    zOrderScore: '98.4%',\n    status: 'Optimized',\n    lastClustered: '28m ago',\n  },\n  {\n    partitionKey: 'event_date=2026-08-20',\n    fileCount: 40,\n    avgFileSize: '127.9 MB',\n    totalSize: '5.12 GB',\n    skippedPercentage: 97.8,\n    zOrderScore: '97.8%',\n    status: 'Optimized',\n    lastClustered: '9h ago',\n  },\n  {\n    partitionKey: 'event_date=2026-08-19',\n    fileCount: 38,\n    avgFileSize: '128.0 MB',\n    totalSize: '4.86 GB',\n    skippedPercentage: 96.9,\n    zOrderScore: '96.9%',\n    status: 'Optimized',\n    lastClustered: '1d ago',\n  },\n  {\n    partitionKey: 'event_date=2026-08-18',\n    fileCount: 44,\n    avgFileSize: '126.8 MB',\n    totalSize: '5.58 GB',\n    skippedPercentage: 95.8,\n    zOrderScore: '95.8%',\n    status: 'Optimized',\n    lastClustered: '2d ago',\n  },\n  {\n    partitionKey: 'event_date=2026-08-17',\n    fileCount: 36,\n    avgFileSize: '128.5 MB',\n    totalSize: '4.62 GB',\n    skippedPercentage: 97.1,\n    zOrderScore: '97.1%',\n    status: 'Optimized',\n    lastClustered: '3d ago',\n  },\n  {\n    partitionKey: 'event_date=2026-08-16',\n    fileCount: 39,\n    avgFileSize: '127.4 MB',\n    totalSize: '4.97 GB',\n    skippedPercentage: 96.5,\n    zOrderScore: '96.5%',\n    status: 'Optimized',\n    lastClustered: '4d ago',\n  },\n]\n\nfunction getOperationBadgeVariant(\n  op: SnapshotOperation,\n): 'default' | 'secondary' | 'outline' | 'success' | 'warning' | 'info' {\n  switch (op) {\n    case 'OPTIMIZE':\n      return 'success'\n    case 'MERGE':\n      return 'info'\n    case 'APPEND':\n      return 'secondary'\n    case 'REPLACE_PARTITION':\n      return 'warning'\n    default:\n      return 'outline'\n  }\n}\n\nexport function LakehouseTableOptimizer({\n  initialTable = defaultTable,\n  initialSnapshots = defaultSnapshots,\n  initialPartitions = defaultPartitions,\n  className,\n}: LakehouseTableOptimizerProps) {\n  const [table] = React.useState<TableDetails>(initialTable)\n  const [snapshots] = React.useState<TableSnapshot[]>(initialSnapshots)\n  const [partitions] = React.useState<PartitionRecord[]>(initialPartitions)\n\n  const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string>('snap_84920194821')\n  const [sqlSyntaxMode, setSqlSyntaxMode] = React.useState<SqlSyntaxMode>('system_time')\n  const [snapshotFilter, setSnapshotFilter] = React.useState<string>('ALL')\n  const [snapshotSearch, setSnapshotSearch] = React.useState<string>('')\n  const [partitionSearch, setPartitionSearch] = React.useState<string>('')\n  const [activeTab, setActiveTab] = React.useState<string>('snapshots')\n\n  const [isCompacting, setIsCompacting] = React.useState<boolean>(false)\n  const [isExpiring, setIsExpiring] = React.useState<boolean>(false)\n  const [actionNotification, setActionNotification] = React.useState<string | null>(null)\n  const [copiedQuery, setCopiedQuery] = React.useState<boolean>(false)\n\n  const selectedSnapshot = React.useMemo(() => {\n    return snapshots.find((s) => s.id === selectedSnapshotId) ?? snapshots[0]\n  }, [snapshots, selectedSnapshotId])\n\n  const filteredSnapshots = React.useMemo(() => {\n    return snapshots.filter((snap) => {\n      const matchesOp = snapshotFilter === 'ALL' || snap.operation === snapshotFilter\n      const query = snapshotSearch.toLowerCase().trim()\n      const matchesSearch =\n        query === '' ||\n        snap.id.toLowerCase().includes(query) ||\n        snap.author.toLowerCase().includes(query) ||\n        snap.summary.toLowerCase().includes(query) ||\n        snap.operation.toLowerCase().includes(query)\n      return matchesOp && matchesSearch\n    })\n  }, [snapshots, snapshotFilter, snapshotSearch])\n\n  const filteredPartitions = React.useMemo(() => {\n    const query = partitionSearch.toLowerCase().trim()\n    if (!query) return partitions\n    return partitions.filter((p) => p.partitionKey.toLowerCase().includes(query))\n  }, [partitions, partitionSearch])\n\n  const generatedQuery = React.useMemo(() => {\n    const currentSnap = selectedSnapshot\n    const tableName = table.name\n\n    switch (sqlSyntaxMode) {\n      case 'system_time':\n        return `SELECT * FROM ${tableName}\\nFOR SYSTEM_TIME AS OF '${currentSnap.timestamp}';`\n      case 'system_version':\n        return `SELECT * FROM ${tableName}\\nFOR SYSTEM_VERSION AS OF ${currentSnap.numericId};`\n      case 'pyspark':\n        return `# PySpark Iceberg time-travel query\\ndf = spark.read \\\\\\n  .format(\"iceberg\") \\\\\\n  .option(\"as-of-timestamp\", \"${currentSnap.timestamp}\") \\\\\\n  .load(\"${tableName}\")\\n\\ndf.filter(\"customer_id = 'cust_98241'\") \\\\\\n  .select(\"event_id\", \"event_type\", \"event_date\", \"payload\") \\\\\\n  .show(10)`\n      case 'trino':\n        return `SELECT event_id, customer_id, event_type, event_date\\nFROM ${tableName}\\nFOR VERSION AS OF ${currentSnap.numericId}\\nWHERE event_type = 'CHECKOUT_COMPLETED'\\nLIMIT 50;`\n      default:\n        return `SELECT * FROM ${tableName}\\nFOR SYSTEM_TIME AS OF '${currentSnap.timestamp}';`\n    }\n  }, [selectedSnapshot, table.name, sqlSyntaxMode])\n\n  const handleCopyQuery = () => {\n    if (typeof navigator !== 'undefined' && navigator.clipboard) {\n      navigator.clipboard.writeText(generatedQuery)\n      setCopiedQuery(true)\n      setTimeout(() => {\n        setCopiedQuery(false)\n      }, 2000)\n    }\n  }\n\n  const runCompaction = () => {\n    if (isCompacting) return\n    setIsCompacting(true)\n    setActionNotification(null)\n\n    setTimeout(() => {\n      setIsCompacting(false)\n      setActionNotification(\n        'Compaction & Vacuum complete: 14,280 small files compacted into 142 optimal 128MB Parquet files. Reclaimed 1.2 TB storage.',\n      )\n      setTimeout(() => {\n        setActionNotification(null)\n      }, 6000)\n    }, 1800)\n  }\n\n  const expireSnapshots = () => {\n    if (isExpiring) return\n    setIsExpiring(true)\n    setActionNotification(null)\n\n    setTimeout(() => {\n      setIsExpiring(false)\n      setActionNotification(\n        'Snapshot expiration finished: Removed 12 stale snapshots older than 30-day retention window. Purged 872 GB metadata & unreferenced parquet files.',\n      )\n      setTimeout(() => {\n        setActionNotification(null)\n      }, 6000)\n    }, 1400)\n  }\n\n  return (\n    <div className={cn('text-foreground w-full space-y-6', className)}>\n      {/* Header Section */}\n      <div className=\"border-border bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n        <div className=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n          {/* Table Identity */}\n          <div className=\"flex items-start gap-4\">\n            <div className=\"border-primary/20 bg-primary/10 text-primary flex size-11 shrink-0 items-center justify-center rounded-lg border shadow-xs\">\n              <Database className=\"size-6\" />\n            </div>\n            <div className=\"space-y-2\">\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <h1 className=\"text-foreground font-mono text-lg font-bold tracking-tight break-all sm:text-xl\">\n                  {table.name}\n                </h1>\n                <Badge variant=\"success\" className=\"gap-1.5 font-medium\">\n                  <span className=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                  {table.statusText}\n                </Badge>\n              </div>\n              <div className=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n                <Badge variant=\"outline\" className=\"gap-1 font-mono\">\n                  <Layers className=\"text-muted-foreground size-3\" />\n                  {table.format}\n                </Badge>\n                <Badge variant=\"secondary\" className=\"gap-1 font-mono font-medium\">\n                  <HardDrive className=\"text-muted-foreground size-3\" />\n                  {table.totalSize} · {table.rowCount}\n                </Badge>\n                <span className=\"hidden items-center gap-1 sm:inline-flex\">\n                  <Server className=\"size-3\" />\n                  {table.catalog}\n                </span>\n              </div>\n            </div>\n          </div>\n\n          {/* Header Actions */}\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            <Button\n              variant=\"outline\"\n              size=\"sm\"\n              className=\"h-9 gap-1.5 shadow-xs\"\n              disabled={isExpiring}\n              onClick={expireSnapshots}\n            >\n              {!isExpiring ? (\n                <Clock className=\"text-muted-foreground size-3.5\" />\n              ) : (\n                <RefreshCw className=\"text-muted-foreground size-3.5 animate-spin\" />\n              )}\n              <span>{isExpiring ? 'Expiring Stale...' : 'Expire Snapshots'}</span>\n            </Button>\n\n            <Button\n              variant=\"default\"\n              size=\"sm\"\n              className=\"h-9 gap-1.5 shadow-xs\"\n              disabled={isCompacting}\n              onClick={runCompaction}\n            >\n              {!isCompacting ? <Zap className=\"size-3.5\" /> : <RefreshCw className=\"size-3.5 animate-spin\" />}\n              <span>{isCompacting ? 'Compacting Table...' : 'Run Compaction & Vacuum'}</span>\n            </Button>\n          </div>\n        </div>\n\n        {/* Action Toast / Banner */}\n        {actionNotification && (\n          <div className=\"border-success/20 bg-success/10 text-success mt-4 flex items-center justify-between rounded-lg border p-3 text-xs\">\n            <div className=\"flex items-center gap-2\">\n              <CheckCircle2 className=\"text-success size-4 shrink-0\" />\n              <span>{actionNotification}</span>\n            </div>\n            <button\n              type=\"button\"\n              className=\"text-success/70 hover:bg-success/20 hover:text-success rounded p-1\"\n              onClick={() => setActionNotification(null)}\n            >\n              <span className=\"sr-only\">Dismiss</span>\n              &times;\n            </button>\n          </div>\n        )}\n      </div>\n\n      {/* 4 Table Health & Storage Telemetry Cards */}\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n        {/* Card 1: Total Partitions */}\n        <Card className=\"border-border bg-card shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Total Partitions\n            </CardTitle>\n            <div className=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\">\n              <FolderArchive className=\"size-3.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1,420</div>\n              <Badge variant=\"success\" className=\"text-xs\">\n                100% Healthy\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">1,420 Partitions · Date Partitioned</p>\n            <div className=\"space-y-1 pt-1\">\n              <Progress value={100} className=\"bg-muted h-1.5\" />\n              <div className=\"text-muted-foreground flex justify-between text-xs\">\n                <span>event_date (YYYY-MM-DD)</span>\n                <span className=\"font-mono tabular-nums\">0 unpartitioned</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 2: Small Files Neutralized */}\n        <Card className=\"border-border bg-card shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Small Files Neutralized\n            </CardTitle>\n            <div className=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\">\n              <HardDrive className=\"size-3.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">14,280</div>\n              <Badge variant=\"success\" className=\"font-mono text-xs\">\n                99.0% Reduction\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">14,280 small files compacted -&gt; 142 optimal 128MB files</p>\n            <div className=\"space-y-1 pt-1\">\n              <Progress value={99} className=\"bg-muted h-1.5\" />\n              <div className=\"text-muted-foreground flex justify-between text-xs\">\n                <span>Target: 128 MB</span>\n                <span className=\"font-mono tabular-nums\">0 files &lt;32MB</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 3: Snapshot History Count */}\n        <Card className=\"border-border bg-card shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Snapshot History\n            </CardTitle>\n            <div className=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\">\n              <History className=\"size-3.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">48</div>\n              <Badge variant=\"info\" className=\"font-mono text-xs\">\n                30-Day Window\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">48 Active Snapshots · 30-Day Time Travel</p>\n            <div className=\"space-y-1 pt-1\">\n              <Progress value={64} className=\"bg-muted h-1.5\" />\n              <div className=\"text-muted-foreground flex justify-between text-xs\">\n                <span>Oldest: Jul 22, 2026</span>\n                <span className=\"font-mono tabular-nums\">4.8 MB metadata</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        {/* Card 4: Storage Optimization Savings */}\n        <Card className=\"border-border bg-card shadow-xs\">\n          <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle className=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n              Storage Optimization\n            </CardTitle>\n            <div className=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\">\n              <Zap className=\"size-3.5\" />\n            </div>\n          </CardHeader>\n          <CardContent className=\"space-y-2\">\n            <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n              <div className=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1.2 TB</div>\n              <Badge variant=\"success\" className=\"font-mono text-xs\">\n                $240/mo Saved\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">1.2 TB freed via Vacuum · $240/mo saved</p>\n            <div className=\"space-y-1 pt-1\">\n              <Progress value={85} className=\"bg-muted h-1.5\" />\n              <div className=\"text-muted-foreground flex justify-between text-xs\">\n                <span>872 GB stale · 328 GB orphan</span>\n                <span className=\"font-mono tabular-nums\">-28.5% S3 Cost</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      {/* Main Lakehouse Inspection & Control Tabs */}\n      <Tabs value={activeTab} onValueChange={setActiveTab} className=\"w-full space-y-5\">\n        <TabsList className=\"grid w-full grid-cols-2 md:grid-cols-4\">\n          <TabsTrigger value=\"snapshots\" className=\"gap-1.5 text-xs font-medium\">\n            <History className=\"size-3.5\" />\n            <span>Snapshots & Time-Travel</span>\n          </TabsTrigger>\n          <TabsTrigger value=\"partitions\" className=\"gap-1.5 text-xs font-medium\">\n            <Layers className=\"size-3.5\" />\n            <span>Partitions & Z-Ordering</span>\n          </TabsTrigger>\n          <TabsTrigger value=\"maintenance\" className=\"gap-1.5 text-xs font-medium\">\n            <Zap className=\"size-3.5\" />\n            <span>Compaction & Vacuum</span>\n          </TabsTrigger>\n          <TabsTrigger value=\"files\" className=\"gap-1.5 text-xs font-medium\">\n            <HardDrive className=\"size-3.5\" />\n            <span>File Sizing & Distribution</span>\n          </TabsTrigger>\n        </TabsList>\n\n        {/* TAB 1: SNAPSHOTS & TIME-TRAVEL QUERY PICKER */}\n        <TabsContent value=\"snapshots\" className=\"space-y-5\">\n          <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n            {/* Left: Interactive Timeline (7 Cols) */}\n            <div className=\"space-y-4 lg:col-span-7\">\n              <Card className=\"border-border bg-card shadow-xs\">\n                <CardHeader className=\"p-4 pb-3 sm:p-5 sm:pb-3\">\n                  <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                    <div>\n                      <CardTitle className=\"text-sm font-semibold sm:text-base\">Snapshot Commit History</CardTitle>\n                      <CardDescription className=\"text-xs\">\n                        Select any snapshot to generate reproducible time-travel queries\n                      </CardDescription>\n                    </div>\n                    {/* Filter Pill Buttons */}\n                    <div className=\"flex flex-wrap items-center gap-1\">\n                      {(['ALL', 'MERGE', 'OPTIMIZE', 'APPEND', 'REPLACE_PARTITION'] as const).map((op) => (\n                        <button\n                          key={op}\n                          type=\"button\"\n                          className={cn(\n                            'rounded-md px-2 py-1 font-mono text-xs transition-colors',\n                            snapshotFilter === op\n                              ? 'bg-primary text-primary-foreground font-semibold'\n                              : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground',\n                          )}\n                          onClick={() => setSnapshotFilter(op)}\n                        >\n                          {op}\n                        </button>\n                      ))}\n                    </div>\n                  </div>\n\n                  {/* Search Filter */}\n                  <div className=\"relative pt-2\">\n                    <Search className=\"text-muted-foreground absolute top-5 left-2.5 size-3.5\" />\n                    <input\n                      value={snapshotSearch}\n                      onChange={(e) => setSnapshotSearch(e.target.value)}\n                      type=\"text\"\n                      placeholder=\"Search snapshot ID, author, summary...\"\n                      className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border py-1.5 pr-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                    />\n                  </div>\n                </CardHeader>\n\n                <Separator />\n\n                <CardContent className=\"p-4 sm:p-5\">\n                  <div className=\"before:bg-border relative space-y-4 before:absolute before:top-3 before:bottom-3 before:left-[17px] before:w-0.5\">\n                    {filteredSnapshots.map((snap) => (\n                      <div\n                        key={snap.id}\n                        className={cn(\n                          'group relative flex cursor-pointer flex-col gap-3 rounded-lg border p-3.5 transition-colors sm:flex-row sm:items-start sm:gap-4',\n                          selectedSnapshotId === snap.id\n                            ? 'border-primary/60 bg-primary/[0.03] ring-primary/30 shadow-xs ring-1'\n                            : 'border-border bg-card/60 hover:border-border hover:bg-accent/40',\n                        )}\n                        onClick={() => setSelectedSnapshotId(snap.id)}\n                      >\n                        {/* Timeline Dot Indicator */}\n                        <div className=\"border-border bg-card text-foreground group-hover:border-primary/50 relative z-10 flex size-9 shrink-0 items-center justify-center rounded-full border shadow-xs\">\n                          {snap.operation === 'MERGE' && <History className=\"text-info size-4\" />}\n                          {snap.operation === 'OPTIMIZE' && <Zap className=\"text-success size-4\" />}\n                          {snap.operation === 'APPEND' && <ArrowDownRight className=\"text-chart-1 size-4\" />}\n                          {snap.operation === 'REPLACE_PARTITION' && <RefreshCw className=\"text-warning size-4\" />}\n                        </div>\n\n                        {/* Snapshot Details */}\n                        <div className=\"min-w-0 flex-1 space-y-2\">\n                          <div className=\"flex flex-wrap items-center justify-between gap-2\">\n                            <div className=\"flex flex-wrap items-center gap-2\">\n                              <span className=\"text-foreground font-mono text-xs font-bold\">{snap.id}</span>\n                              <Badge variant={getOperationBadgeVariant(snap.operation)} className=\"font-mono text-xs\">\n                                {snap.operation}\n                              </Badge>\n                              {selectedSnapshotId === snap.id && (\n                                <Badge variant=\"default\" className=\"text-xs\">\n                                  Active Time-Travel Target\n                                </Badge>\n                              )}\n                            </div>\n                            <span className=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                              {snap.relativeTime}\n                            </span>\n                          </div>\n\n                          <p className=\"text-muted-foreground text-xs\">{snap.summary}</p>\n\n                          {/* Metric Badges Row */}\n                          <div className=\"flex flex-wrap items-center gap-3 pt-1 text-xs\">\n                            <div className=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                              <span className=\"text-success font-semibold\">{snap.rowsAdded}</span>\n                              <span>/</span>\n                              <span className=\"text-destructive font-semibold\">{snap.rowsDeleted} rows</span>\n                            </div>\n                            <div className=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                              <FileCode2 className=\"text-muted-foreground size-3\" />\n                              <span>{snap.byteDelta}</span>\n                            </div>\n                            <div className=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                              <span>Author:</span>\n                              <span className=\"text-foreground font-medium\">{snap.author}</span>\n                            </div>\n                          </div>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n\n            {/* Right: Time-Travel Query Generator & Helper (5 Cols) */}\n            <div className=\"space-y-4 lg:col-span-5\">\n              <Card className=\"border-border bg-card shadow-xs\">\n                <CardHeader className=\"p-4 pb-3 sm:p-5 sm:pb-3\">\n                  <div className=\"flex items-center justify-between\">\n                    <div className=\"space-y-1\">\n                      <CardTitle className=\"text-sm font-semibold sm:text-base\">Time-Travel Query Picker</CardTitle>\n                      <CardDescription className=\"text-xs\">\n                        Instant query generator for snapshot audit & reconciliation\n                      </CardDescription>\n                    </div>\n                    <Badge variant=\"outline\" className=\"font-mono text-xs\">\n                      {selectedSnapshot.numericId}\n                    </Badge>\n                  </div>\n\n                  {/* Syntax Mode Buttons */}\n                  <div className=\"grid grid-cols-2 gap-1 pt-3 sm:grid-cols-4\">\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'rounded-md px-2 py-1.5 text-center font-mono text-xs transition-colors',\n                        sqlSyntaxMode === 'system_time'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground',\n                      )}\n                      onClick={() => setSqlSyntaxMode('system_time')}\n                    >\n                      SYSTEM_TIME\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'rounded-md px-2 py-1.5 text-center font-mono text-xs transition-colors',\n                        sqlSyntaxMode === 'system_version'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground',\n                      )}\n                      onClick={() => setSqlSyntaxMode('system_version')}\n                    >\n                      VERSION\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'rounded-md px-2 py-1.5 text-center font-mono text-xs transition-colors',\n                        sqlSyntaxMode === 'pyspark'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground',\n                      )}\n                      onClick={() => setSqlSyntaxMode('pyspark')}\n                    >\n                      PySpark\n                    </button>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        'rounded-md px-2 py-1.5 text-center font-mono text-xs transition-colors',\n                        sqlSyntaxMode === 'trino'\n                          ? 'bg-primary text-primary-foreground font-semibold shadow-xs'\n                          : 'bg-muted text-muted-foreground hover:bg-accent hover:text-foreground',\n                      )}\n                      onClick={() => setSqlSyntaxMode('trino')}\n                    >\n                      Trino SQL\n                    </button>\n                  </div>\n                </CardHeader>\n\n                <Separator />\n\n                <CardContent className=\"space-y-4 p-4 sm:p-5\">\n                  {/* Target Snapshot Meta Summary */}\n                  <div className=\"border-border bg-muted/40 space-y-1.5 rounded-lg border p-3 text-xs\">\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Target Snapshot:</span>\n                      <span className=\"text-foreground font-mono font-semibold\">{selectedSnapshot.id}</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Point-in-Time:</span>\n                      <span className=\"text-foreground font-mono\">{selectedSnapshot.timestamp}</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Commit Operation:</span>\n                      <Badge\n                        variant={getOperationBadgeVariant(selectedSnapshot.operation)}\n                        className=\"font-mono text-xs\"\n                      >\n                        {selectedSnapshot.operation}\n                      </Badge>\n                    </div>\n                  </div>\n\n                  {/* Code Block with Copy */}\n                  <div className=\"border-border bg-muted/70 relative overflow-hidden rounded-lg border font-mono\">\n                    <div className=\"border-border bg-muted/90 text-muted-foreground flex items-center justify-between border-b px-3 py-2 text-xs\">\n                      <span className=\"text-foreground flex items-center gap-1.5 font-semibold\">\n                        <Terminal className=\"text-primary size-3.5\" />\n                        Query table as of snapshot:\n                      </span>\n                      <Button\n                        variant=\"ghost\"\n                        size=\"sm\"\n                        className=\"hover:bg-background hover:text-foreground h-7 gap-1 px-2 text-xs\"\n                        onClick={handleCopyQuery}\n                      >\n                        {copiedQuery ? (\n                          <Check className=\"text-success size-3.5\" />\n                        ) : (\n                          <Copy className=\"text-muted-foreground size-3.5\" />\n                        )}\n                        <span>{copiedQuery ? 'Copied' : 'Copy'}</span>\n                      </Button>\n                    </div>\n                    <pre className=\"text-foreground overflow-x-auto p-3 text-xs leading-relaxed\">\n                      <code>{generatedQuery}</code>\n                    </pre>\n                  </div>\n\n                  {/* Telemetry Stats about Query */}\n                  <div className=\"border-border bg-card space-y-2 rounded-lg border p-3 text-xs\">\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Estimated Scan Overhead:</span>\n                      <span className=\"text-success font-mono font-semibold\">42ms · 96.4% skipped</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Manifest Avro File:</span>\n                      <span className=\"text-foreground font-mono text-xs\">{selectedSnapshot.manifestFile}</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex items-center justify-between\">\n                      <span>Storage Engine:</span>\n                      <span className=\"text-foreground\">Apache Iceberg Native Parquet Reader</span>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n        </TabsContent>\n\n        {/* TAB 2: PARTITIONS & Z-ORDER CLUSTERING */}\n        <TabsContent value=\"partitions\" className=\"space-y-5\">\n          {/* Table Partition Maintenance & Z-Order Clustering Status Card */}\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardHeader className=\"p-5 pb-4\">\n              <div className=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n                <div>\n                  <CardTitle className=\"flex items-center gap-2 text-base font-semibold\">\n                    <Workflow className=\"text-primary size-4\" />\n                    Partition Health & Multidimensional Z-Order Clustering\n                  </CardTitle>\n                  <CardDescription className=\"text-xs\">\n                    Z-Order clustered by <code className=\"text-foreground font-mono font-semibold\">customer_id</code>,{' '}\n                    <code className=\"text-foreground font-mono font-semibold\">event_type</code> to maximize Parquet\n                    min/max statistics pruning.\n                  </CardDescription>\n                </div>\n\n                {/* Search Partitions */}\n                <div className=\"relative w-full md:w-64\">\n                  <Search className=\"text-muted-foreground absolute top-2.5 left-2.5 size-3.5\" />\n                  <input\n                    value={partitionSearch}\n                    onChange={(e) => setPartitionSearch(e.target.value)}\n                    type=\"text\"\n                    placeholder=\"Filter partitions...\"\n                    className=\"border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:ring-ring w-full rounded-md border py-1.5 pr-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n                  />\n                </div>\n              </div>\n\n              {/* Clustering Telemetry Overview Grid */}\n              <div className=\"border-border bg-muted/30 mt-4 grid grid-cols-1 gap-3 rounded-lg border p-3 text-xs sm:grid-cols-2 lg:grid-cols-4\">\n                <div>\n                  <span className=\"text-muted-foreground\">Clustered Columns:</span>\n                  <div className=\"text-foreground font-mono font-semibold\">customer_id, event_type</div>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground\">Data Skipping Efficiency:</span>\n                  <div className=\"text-success font-mono font-semibold\">96.4% Row-Groups Skipped</div>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground\">Clustering Curve Algorithm:</span>\n                  <div className=\"text-foreground font-mono font-semibold\">Hilbert Space-Filling (Depth 16)</div>\n                </div>\n                <div>\n                  <span className=\"text-muted-foreground\">Compression Codec:</span>\n                  <div className=\"text-foreground font-mono font-semibold\">ZSTD Level 7 · Parquet v2</div>\n                </div>\n              </div>\n            </CardHeader>\n\n            <Separator />\n\n            <CardContent className=\"p-0\">\n              <div className=\"overflow-x-auto\">\n                <Table>\n                  <TableHeader>\n                    <TableRow className=\"hover:bg-transparent\">\n                      <TableHead className=\"text-xs\">Partition Key</TableHead>\n                      <TableHead className=\"text-xs\">File Count</TableHead>\n                      <TableHead className=\"text-xs\">Avg File Size</TableHead>\n                      <TableHead className=\"text-xs\">Total Data Size</TableHead>\n                      <TableHead className=\"text-xs\">Data Skipping</TableHead>\n                      <TableHead className=\"text-xs\">Z-Order Status</TableHead>\n                      <TableHead className=\"text-right text-xs\">Action</TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    {filteredPartitions.map((partition) => (\n                      <TableRow key={partition.partitionKey} className=\"hover:bg-muted/50\">\n                        <TableCell className=\"text-foreground font-mono text-xs font-semibold\">\n                          {partition.partitionKey}\n                        </TableCell>\n                        <TableCell className=\"font-mono text-xs tabular-nums\">{partition.fileCount} files</TableCell>\n                        <TableCell className=\"font-mono text-xs tabular-nums\">{partition.avgFileSize}</TableCell>\n                        <TableCell className=\"font-mono text-xs tabular-nums\">{partition.totalSize}</TableCell>\n                        <TableCell>\n                          <div className=\"w-32 space-y-1\">\n                            <div className=\"text-muted-foreground flex justify-between font-mono text-xs tabular-nums\">\n                              <span>{partition.skippedPercentage}%</span>\n                            </div>\n                            <Progress value={partition.skippedPercentage} className=\"bg-muted h-1.5\" />\n                          </div>\n                        </TableCell>\n                        <TableCell>\n                          <Badge variant=\"success\" className=\"gap-1 font-mono text-xs\">\n                            <CheckCircle2 className=\"size-3\" />\n                            {partition.status}\n                          </Badge>\n                        </TableCell>\n                        <TableCell className=\"text-right\">\n                          <Button variant=\"ghost\" size=\"sm\" className=\"h-7 text-xs font-medium\">\n                            Re-cluster\n                          </Button>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n\n        {/* TAB 3: COMPACTION & VACUUM MAINTENANCE RULES */}\n        <TabsContent value=\"maintenance\" className=\"space-y-5\">\n          <div className=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n            {/* Bin-Pack Compaction Rule */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"flex items-center gap-2 text-sm font-semibold\">\n                    <Database className=\"text-success size-4\" />\n                    Bin-Pack Data File Compaction\n                  </CardTitle>\n                  <Badge variant=\"success\" className=\"text-xs\">\n                    Enabled · Auto\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  Merges small files into optimized 128MB Parquet chunks to prevent small file bottleneck\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n                <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Target File Size:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">128 MB</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Small File Threshold:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">&lt; 32 MB</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Execution Schedule:</span>\n                    <span className=\"text-foreground font-mono\">Every 2 Hours (cron: 0 */2 * * *)</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Engine:</span>\n                    <span className=\"text-foreground\">Apache Spark Iceberg RewriteDataFiles Action</span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Vacuum & Orphan File Removal */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"flex items-center gap-2 text-sm font-semibold\">\n                    <Trash2 className=\"text-destructive size-4\" />\n                    Vacuum & Orphan File Purger\n                  </CardTitle>\n                  <Badge variant=\"success\" className=\"text-xs\">\n                    Enabled · Daily\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  Hard-deletes unreferenced data files and uncommitted multi-part upload orphans in S3\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n                <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Retention Grace Period:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">7 Days (168 Hours)</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Storage Reclaimed (30d):</span>\n                    <span className=\"text-success font-mono font-semibold\">1.2 TB freed</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Execution Schedule:</span>\n                    <span className=\"text-foreground font-mono\">Daily at 02:00 UTC</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Safety Guard:</span>\n                    <span className=\"text-foreground\">Explicit dry-run verification check</span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Snapshot Expiration Policy */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"flex items-center gap-2 text-sm font-semibold\">\n                    <Clock className=\"text-info size-4\" />\n                    Snapshot Expiration Policy\n                  </CardTitle>\n                  <Badge variant=\"info\" className=\"text-xs\">\n                    30-Day Window\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  Controls metadata table history retention for time-travel queries and rollback safety\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n                <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Retention Window:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">30 Days</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Min Snapshots Retained:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">20 Snapshots</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Clean Expired Metadata:</span>\n                    <span className=\"text-foreground font-mono\">Yes (Purge orphan Avro manifests)</span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n\n            {/* Manifest Consolidation */}\n            <Card className=\"border-border bg-card shadow-xs\">\n              <CardHeader className=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"flex items-center gap-2 text-sm font-semibold\">\n                    <FileText className=\"text-chart-1 size-4\" />\n                    Manifest File Consolidation\n                  </CardTitle>\n                  <Badge variant=\"success\" className=\"text-xs\">\n                    Optimized\n                  </Badge>\n                </div>\n                <CardDescription className=\"text-xs\">\n                  Rewrites small manifest files to accelerate query planning and metadata scanning\n                </CardDescription>\n              </CardHeader>\n              <CardContent className=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n                <div className=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Active Manifest Count:</span>\n                    <span className=\"text-foreground font-mono font-semibold\">6 Manifests</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Rewrite Trigger Threshold:</span>\n                    <span className=\"text-foreground font-mono\">&gt; 50 Small Manifests</span>\n                  </div>\n                  <div className=\"text-muted-foreground flex justify-between\">\n                    <span>Query Planning Overhead:</span>\n                    <span className=\"text-success font-mono font-semibold\">&lt; 15ms</span>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n\n        {/* TAB 4: FILE SIZING & I/O DISTRIBUTION */}\n        <TabsContent value=\"files\" className=\"space-y-5\">\n          <Card className=\"border-border bg-card shadow-xs\">\n            <CardHeader className=\"p-5 pb-3\">\n              <CardTitle className=\"text-base font-semibold\">\n                File Size Distribution & I/O Amplification Analysis\n              </CardTitle>\n              <CardDescription className=\"text-xs\">\n                Comparison of storage layout before vs. after Iceberg automatic compaction\n              </CardDescription>\n            </CardHeader>\n            <Separator />\n            <CardContent className=\"space-y-6 p-5\">\n              <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n                {/* Before Compaction */}\n                <div className=\"border-border bg-muted/20 space-y-3 rounded-xl border p-4\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-destructive text-xs font-semibold\">\n                      Before Compaction (Small File Problem)\n                    </span>\n                    <Badge variant=\"destructive\" className=\"font-mono text-xs\">\n                      18.4x I/O Amplification\n                    </Badge>\n                  </div>\n                  <div className=\"space-y-2 text-xs\">\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Total Small Files (&lt;4MB):</span>\n                      <span className=\"text-foreground font-mono font-bold\">14,280 Files</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Average File Size:</span>\n                      <span className=\"text-foreground font-mono\">2.4 MB</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Query Scan Latency (P95):</span>\n                      <span className=\"text-destructive font-mono font-semibold\">8.4 seconds</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>S3 GET Request Cost:</span>\n                      <span className=\"text-foreground font-mono\">$380 / month</span>\n                    </div>\n                  </div>\n                </div>\n\n                {/* After Compaction */}\n                <div className=\"border-success/30 bg-success/[0.03] space-y-3 rounded-xl border p-4\">\n                  <div className=\"flex items-center justify-between\">\n                    <span className=\"text-success text-xs font-semibold\">After Compaction (Optimal Bin-Pack)</span>\n                    <Badge variant=\"success\" className=\"font-mono text-xs\">\n                      1.02x Near-Ideal\n                    </Badge>\n                  </div>\n                  <div className=\"space-y-2 text-xs\">\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Total Target Files (128MB):</span>\n                      <span className=\"text-foreground font-mono font-bold\">142 Files</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Average File Size:</span>\n                      <span className=\"text-foreground font-mono\">128.2 MB</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>Query Scan Latency (P95):</span>\n                      <span className=\"text-success font-mono font-semibold\">220 milliseconds (38x speedup)</span>\n                    </div>\n                    <div className=\"text-muted-foreground flex justify-between\">\n                      <span>S3 GET Request Cost:</span>\n                      <span className=\"text-foreground font-mono\">$12 / month</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n        </TabsContent>\n      </Tabs>\n    </div>\n  )\n}\n\nexport default LakehouseTableOptimizer\n",
      "type": "registry:page",
      "target": "~/components/blocks/LakehouseTableOptimizer.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",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Apache Iceberg and Delta Lake table maintenance manager, compaction optimizer, snapshot history visualizer, and time-travel SQL query helper.",
  "categories": [
    "devops",
    "app",
    "analytics"
  ]
}