{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "lakehouse-table-optimizer",
  "title": "Lakehouse Table Optimizer",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/lakehouse-table-optimizer/LakehouseTableOptimizer.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport type { HTMLAttributes } from 'vue'\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-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\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\ninterface Props {\n  initialTable?: TableDetails\n  initialSnapshots?: TableSnapshot[]\n  initialPartitions?: PartitionRecord[]\n  class?: HTMLAttributes['class']\n}\n\nconst props = defineProps<Props>()\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\nconst table = computed(() => props.initialTable ?? defaultTable)\nconst snapshots = computed(() => props.initialSnapshots ?? defaultSnapshots)\nconst partitions = computed(() => props.initialPartitions ?? defaultPartitions)\n\nconst selectedSnapshotId = ref<string>('snap_84920194821')\nconst sqlSyntaxMode = ref<SqlSyntaxMode>('system_time')\nconst snapshotFilter = ref<string>('ALL')\nconst snapshotSearch = ref<string>('')\nconst partitionSearch = ref<string>('')\nconst activeTab = ref<string>('snapshots')\n\nconst isCompacting = ref<boolean>(false)\nconst isExpiring = ref<boolean>(false)\nconst actionNotification = ref<string | null>(null)\nconst copiedQuery = ref<boolean>(false)\n\nconst selectedSnapshot = computed(() => {\n  return snapshots.value.find((s) => s.id === selectedSnapshotId.value) ?? snapshots.value[0]\n})\n\nconst filteredSnapshots = computed(() => {\n  return snapshots.value.filter((snap) => {\n    const matchesOp = snapshotFilter.value === 'ALL' || snap.operation === snapshotFilter.value\n    const query = snapshotSearch.value.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})\n\nconst filteredPartitions = computed(() => {\n  const query = partitionSearch.value.toLowerCase().trim()\n  if (!query) return partitions.value\n  return partitions.value.filter((p) => p.partitionKey.toLowerCase().includes(query))\n})\n\nconst generatedQuery = computed(() => {\n  const currentSnap = selectedSnapshot.value\n  const tableName = table.value.name\n\n  switch (sqlSyntaxMode.value) {\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})\n\nfunction selectSnapshot(id: string) {\n  selectedSnapshotId.value = id\n}\n\nfunction handleCopyQuery() {\n  if (typeof navigator !== 'undefined' && navigator.clipboard) {\n    navigator.clipboard.writeText(generatedQuery.value)\n    copiedQuery.value = true\n    setTimeout(() => {\n      copiedQuery.value = false\n    }, 2000)\n  }\n}\n\nfunction runCompaction() {\n  if (isCompacting.value) return\n  isCompacting.value = true\n  actionNotification.value = null\n\n  setTimeout(() => {\n    isCompacting.value = false\n    actionNotification.value =\n      'Compaction & Vacuum complete: 14,280 small files compacted into 142 optimal 128MB Parquet files. Reclaimed 1.2 TB storage.'\n    setTimeout(() => {\n      actionNotification.value = null\n    }, 6000)\n  }, 1800)\n}\n\nfunction expireSnapshots() {\n  if (isExpiring.value) return\n  isExpiring.value = true\n  actionNotification.value = null\n\n  setTimeout(() => {\n    isExpiring.value = false\n    actionNotification.value =\n      'Snapshot expiration finished: Removed 12 stale snapshots older than 30-day retention window. Purged 872 GB metadata & unreferenced parquet files.'\n    setTimeout(() => {\n      actionNotification.value = null\n    }, 6000)\n  }, 1400)\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</script>\n\n<template>\n  <div :class=\"cn('text-foreground w-full space-y-6', props.class)\">\n    <!-- Header Section -->\n    <div class=\"border-border bg-card rounded-xl border p-5 shadow-xs sm:p-6\">\n      <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n        <!-- Table Identity -->\n        <div class=\"flex items-start gap-4\">\n          <div\n            class=\"border-primary/20 bg-primary/10 text-primary flex size-11 shrink-0 items-center justify-center rounded-lg border shadow-xs\"\n          >\n            <Database class=\"size-6\" />\n          </div>\n          <div class=\"space-y-2\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <h1 class=\"text-foreground font-mono text-lg font-bold tracking-tight break-all sm:text-xl\">\n                {{ table.name }}\n              </h1>\n              <Badge variant=\"success\" class=\"gap-1.5 font-medium\">\n                <span class=\"bg-success size-1.5 animate-pulse rounded-full\" />\n                {{ table.statusText }}\n              </Badge>\n            </div>\n            <div class=\"text-muted-foreground flex flex-wrap items-center gap-2 text-xs\">\n              <Badge variant=\"outline\" class=\"gap-1 font-mono\">\n                <Layers class=\"text-muted-foreground size-3\" />\n                {{ table.format }}\n              </Badge>\n              <Badge variant=\"secondary\" class=\"gap-1 font-mono font-medium\">\n                <HardDrive class=\"text-muted-foreground size-3\" />\n                {{ table.totalSize }} · {{ table.rowCount }}\n              </Badge>\n              <span class=\"hidden items-center gap-1 sm:inline-flex\">\n                <Server class=\"size-3\" />\n                {{ table.catalog }}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <!-- Header Actions -->\n        <div class=\"flex flex-wrap items-center gap-2.5\">\n          <Button\n            variant=\"outline\"\n            size=\"sm\"\n            class=\"h-9 gap-1.5 shadow-xs\"\n            :disabled=\"isExpiring\"\n            @click=\"expireSnapshots\"\n          >\n            <Clock v-if=\"!isExpiring\" class=\"text-muted-foreground size-3.5\" />\n            <RefreshCw v-else class=\"text-muted-foreground size-3.5 animate-spin\" />\n            <span>{{ isExpiring ? 'Expiring Stale...' : 'Expire Snapshots' }}</span>\n          </Button>\n\n          <Button\n            variant=\"default\"\n            size=\"sm\"\n            class=\"h-9 gap-1.5 shadow-xs\"\n            :disabled=\"isCompacting\"\n            @click=\"runCompaction\"\n          >\n            <Zap v-if=\"!isCompacting\" class=\"size-3.5\" />\n            <RefreshCw v-else class=\"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      <div\n        v-if=\"actionNotification\"\n        class=\"border-success/20 bg-success/10 text-success mt-4 flex items-center justify-between rounded-lg border p-3 text-xs\"\n      >\n        <div class=\"flex items-center gap-2\">\n          <CheckCircle2 class=\"text-success size-4 shrink-0\" />\n          <span>{{ actionNotification }}</span>\n        </div>\n        <button\n          type=\"button\"\n          class=\"text-success/70 hover:bg-success/20 hover:text-success rounded p-1\"\n          @click=\"actionNotification = null\"\n        >\n          <span class=\"sr-only\">Dismiss</span>\n          &times;\n        </button>\n      </div>\n    </div>\n\n    <!-- 4 Table Health & Storage Telemetry Cards -->\n    <div class=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n      <!-- Card 1: Total Partitions -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Total Partitions\n          </CardTitle>\n          <div\n            class=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\"\n          >\n            <FolderArchive class=\"size-3.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1,420</div>\n            <Badge variant=\"success\" class=\"text-xs\">100% Healthy</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">1,420 Partitions · Date Partitioned</p>\n          <div class=\"space-y-1 pt-1\">\n            <Progress :model-value=\"100\" class=\"bg-muted h-1.5\" />\n            <div class=\"text-muted-foreground flex justify-between text-xs\">\n              <span>event_date (YYYY-MM-DD)</span>\n              <span class=\"font-mono tabular-nums\">0 unpartitioned</span>\n            </div>\n          </div>\n        </CardContent>\n      </Card>\n\n      <!-- Card 2: Small Files Neutralized -->\n      <Card class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Small Files Neutralized\n          </CardTitle>\n          <div\n            class=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\"\n          >\n            <HardDrive class=\"size-3.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">14,280</div>\n            <Badge variant=\"success\" class=\"font-mono text-xs\">99.0% Reduction</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">14,280 small files compacted -> 142 optimal 128MB files</p>\n          <div class=\"space-y-1 pt-1\">\n            <Progress :model-value=\"99\" class=\"bg-muted h-1.5\" />\n            <div class=\"text-muted-foreground flex justify-between text-xs\">\n              <span>Target: 128 MB</span>\n              <span class=\"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 class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Snapshot History\n          </CardTitle>\n          <div\n            class=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\"\n          >\n            <History class=\"size-3.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">48</div>\n            <Badge variant=\"info\" class=\"font-mono text-xs\">30-Day Window</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">48 Active Snapshots · 30-Day Time Travel</p>\n          <div class=\"space-y-1 pt-1\">\n            <Progress :model-value=\"64\" class=\"bg-muted h-1.5\" />\n            <div class=\"text-muted-foreground flex justify-between text-xs\">\n              <span>Oldest: Jul 22, 2026</span>\n              <span class=\"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 class=\"border-border bg-card shadow-xs\">\n        <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n          <CardTitle class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n            Storage Optimization\n          </CardTitle>\n          <div\n            class=\"border-border bg-muted/50 text-muted-foreground flex size-7 items-center justify-center rounded-md border\"\n          >\n            <Zap class=\"size-3.5\" />\n          </div>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-baseline justify-between gap-2\">\n            <div class=\"text-foreground font-mono text-2xl font-bold tracking-tight tabular-nums\">1.2 TB</div>\n            <Badge variant=\"success\" class=\"font-mono text-xs\">$240/mo Saved</Badge>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">1.2 TB freed via Vacuum · $240/mo saved</p>\n          <div class=\"space-y-1 pt-1\">\n            <Progress :model-value=\"85\" class=\"bg-muted h-1.5\" />\n            <div class=\"text-muted-foreground flex justify-between text-xs\">\n              <span>872 GB stale · 328 GB orphan</span>\n              <span class=\"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 v-model=\"activeTab\" class=\"w-full space-y-5\">\n      <TabsList class=\"grid w-full grid-cols-2 md:grid-cols-4\">\n        <TabsTrigger value=\"snapshots\" class=\"gap-1.5 text-xs font-medium\">\n          <History class=\"size-3.5\" />\n          <span>Snapshots & Time-Travel</span>\n        </TabsTrigger>\n        <TabsTrigger value=\"partitions\" class=\"gap-1.5 text-xs font-medium\">\n          <Layers class=\"size-3.5\" />\n          <span>Partitions & Z-Ordering</span>\n        </TabsTrigger>\n        <TabsTrigger value=\"maintenance\" class=\"gap-1.5 text-xs font-medium\">\n          <Zap class=\"size-3.5\" />\n          <span>Compaction & Vacuum</span>\n        </TabsTrigger>\n        <TabsTrigger value=\"files\" class=\"gap-1.5 text-xs font-medium\">\n          <HardDrive class=\"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\" class=\"space-y-5\">\n        <div class=\"grid grid-cols-1 gap-6 lg:grid-cols-12\">\n          <!-- Left: Interactive Timeline (7 Cols) -->\n          <div class=\"space-y-4 lg:col-span-7\">\n            <Card class=\"border-border bg-card shadow-xs\">\n              <CardHeader class=\"p-4 pb-3 sm:p-5 sm:pb-3\">\n                <div class=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n                  <div>\n                    <CardTitle class=\"text-sm font-semibold sm:text-base\"> Snapshot Commit History </CardTitle>\n                    <CardDescription class=\"text-xs\">\n                      Select any snapshot to generate reproducible time-travel queries\n                    </CardDescription>\n                  </div>\n                  <!-- Filter Pill Buttons -->\n                  <div class=\"flex flex-wrap items-center gap-1\">\n                    <button\n                      v-for=\"op in ['ALL', 'MERGE', 'OPTIMIZE', 'APPEND', 'REPLACE_PARTITION'] as const\"\n                      :key=\"op\"\n                      type=\"button\"\n                      :class=\"\n                        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                      \"\n                      @click=\"snapshotFilter = op\"\n                    >\n                      {{ op }}\n                    </button>\n                  </div>\n                </div>\n\n                <!-- Search Filter -->\n                <div class=\"relative pt-2\">\n                  <Search class=\"text-muted-foreground absolute top-5 left-2.5 size-3.5\" />\n                  <input\n                    v-model=\"snapshotSearch\"\n                    type=\"text\"\n                    placeholder=\"Search snapshot ID, author, summary...\"\n                    class=\"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 class=\"p-4 sm:p-5\">\n                <div\n                  class=\"before:bg-border relative space-y-4 before:absolute before:top-3 before:bottom-3 before:left-[17px] before:w-0.5\"\n                >\n                  <div\n                    v-for=\"snap in filteredSnapshots\"\n                    :key=\"snap.id\"\n                    :class=\"\n                      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                    \"\n                    @click=\"selectSnapshot(snap.id)\"\n                  >\n                    <!-- Timeline Dot Indicator -->\n                    <div\n                      class=\"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                    >\n                      <History v-if=\"snap.operation === 'MERGE'\" class=\"text-info size-4\" />\n                      <Zap v-else-if=\"snap.operation === 'OPTIMIZE'\" class=\"text-success size-4\" />\n                      <ArrowDownRight v-else-if=\"snap.operation === 'APPEND'\" class=\"text-chart-1 size-4\" />\n                      <RefreshCw v-else class=\"text-warning size-4\" />\n                    </div>\n\n                    <!-- Snapshot Details -->\n                    <div class=\"min-w-0 flex-1 space-y-2\">\n                      <div class=\"flex flex-wrap items-center justify-between gap-2\">\n                        <div class=\"flex flex-wrap items-center gap-2\">\n                          <span class=\"text-foreground font-mono text-xs font-bold\">\n                            {{ snap.id }}\n                          </span>\n                          <Badge :variant=\"getOperationBadgeVariant(snap.operation)\" class=\"font-mono text-xs\">\n                            {{ snap.operation }}\n                          </Badge>\n                          <Badge v-if=\"selectedSnapshotId === snap.id\" variant=\"default\" class=\"text-xs\">\n                            Active Time-Travel Target\n                          </Badge>\n                        </div>\n                        <span class=\"text-muted-foreground font-mono text-xs tabular-nums\">\n                          {{ snap.relativeTime }}\n                        </span>\n                      </div>\n\n                      <p class=\"text-muted-foreground text-xs\">\n                        {{ snap.summary }}\n                      </p>\n\n                      <!-- Metric Badges Row -->\n                      <div class=\"flex flex-wrap items-center gap-3 pt-1 text-xs\">\n                        <div class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                          <span class=\"text-success font-semibold\">{{ snap.rowsAdded }}</span>\n                          <span>/</span>\n                          <span class=\"text-destructive font-semibold\">{{ snap.rowsDeleted }} rows</span>\n                        </div>\n                        <div class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                          <FileCode2 class=\"text-muted-foreground size-3\" />\n                          <span>{{ snap.byteDelta }}</span>\n                        </div>\n                        <div class=\"text-muted-foreground flex items-center gap-1 font-mono\">\n                          <span>Author:</span>\n                          <span class=\"text-foreground font-medium\">{{ snap.author }}</span>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          </div>\n\n          <!-- Right: Time-Travel Query Generator & Helper (5 Cols) -->\n          <div class=\"space-y-4 lg:col-span-5\">\n            <Card class=\"border-border bg-card shadow-xs\">\n              <CardHeader class=\"p-4 pb-3 sm:p-5 sm:pb-3\">\n                <div class=\"flex items-center justify-between\">\n                  <div class=\"space-y-1\">\n                    <CardTitle class=\"text-sm font-semibold sm:text-base\"> Time-Travel Query Picker </CardTitle>\n                    <CardDescription class=\"text-xs\">\n                      Instant query generator for snapshot audit & reconciliation\n                    </CardDescription>\n                  </div>\n                  <Badge variant=\"outline\" class=\"font-mono text-xs\">\n                    {{ selectedSnapshot.numericId }}\n                  </Badge>\n                </div>\n\n                <!-- Syntax Mode Buttons -->\n                <div class=\"grid grid-cols-2 gap-1 pt-3 sm:grid-cols-4\">\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      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                    \"\n                    @click=\"sqlSyntaxMode = 'system_time'\"\n                  >\n                    SYSTEM_TIME\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      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                    \"\n                    @click=\"sqlSyntaxMode = 'system_version'\"\n                  >\n                    VERSION\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      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                    \"\n                    @click=\"sqlSyntaxMode = 'pyspark'\"\n                  >\n                    PySpark\n                  </button>\n                  <button\n                    type=\"button\"\n                    :class=\"\n                      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                    \"\n                    @click=\"sqlSyntaxMode = 'trino'\"\n                  >\n                    Trino SQL\n                  </button>\n                </div>\n              </CardHeader>\n\n              <Separator />\n\n              <CardContent class=\"space-y-4 p-4 sm:p-5\">\n                <!-- Target Snapshot Meta Summary -->\n                <div class=\"border-border bg-muted/40 space-y-1.5 rounded-lg border p-3 text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Target Snapshot:</span>\n                    <span class=\"text-foreground font-mono font-semibold\">{{ selectedSnapshot.id }}</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Point-in-Time:</span>\n                    <span class=\"text-foreground font-mono\">{{ selectedSnapshot.timestamp }}</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Commit Operation:</span>\n                    <Badge :variant=\"getOperationBadgeVariant(selectedSnapshot.operation)\" class=\"font-mono text-xs\">\n                      {{ selectedSnapshot.operation }}\n                    </Badge>\n                  </div>\n                </div>\n\n                <!-- Code Block with Copy -->\n                <div class=\"border-border bg-muted/70 relative overflow-hidden rounded-lg border font-mono\">\n                  <div\n                    class=\"border-border bg-muted/90 text-muted-foreground flex items-center justify-between border-b px-3 py-2 text-xs\"\n                  >\n                    <span class=\"text-foreground flex items-center gap-1.5 font-semibold\">\n                      <Terminal class=\"text-primary size-3.5\" />\n                      Query table as of snapshot:\n                    </span>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"sm\"\n                      class=\"hover:bg-background hover:text-foreground h-7 gap-1 px-2 text-xs\"\n                      @click=\"handleCopyQuery\"\n                    >\n                      <Check v-if=\"copiedQuery\" class=\"text-success size-3.5\" />\n                      <Copy v-else class=\"text-muted-foreground size-3.5\" />\n                      <span>{{ copiedQuery ? 'Copied' : 'Copy' }}</span>\n                    </Button>\n                  </div>\n                  <pre\n                    class=\"text-foreground overflow-x-auto p-3 text-xs leading-relaxed\"\n                  ><code>{{ generatedQuery }}</code></pre>\n                </div>\n\n                <!-- Telemetry Stats about Query -->\n                <div class=\"border-border bg-card space-y-2 rounded-lg border p-3 text-xs\">\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Estimated Scan Overhead:</span>\n                    <span class=\"text-success font-mono font-semibold\">42ms · 96.4% skipped</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Manifest Avro File:</span>\n                    <span class=\"text-foreground font-mono text-xs\">{{ selectedSnapshot.manifestFile }}</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex items-center justify-between\">\n                    <span>Storage Engine:</span>\n                    <span class=\"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\" class=\"space-y-5\">\n        <!-- Table Partition Maintenance & Z-Order Clustering Status Card -->\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"p-5 pb-4\">\n            <div class=\"flex flex-col gap-3 md:flex-row md:items-center md:justify-between\">\n              <div>\n                <CardTitle class=\"flex items-center gap-2 text-base font-semibold\">\n                  <Workflow class=\"text-primary size-4\" />\n                  Partition Health & Multidimensional Z-Order Clustering\n                </CardTitle>\n                <CardDescription class=\"text-xs\">\n                  Z-Order clustered by <code class=\"text-foreground font-mono font-semibold\">customer_id</code>,\n                  <code class=\"text-foreground font-mono font-semibold\">event_type</code> to maximize Parquet min/max\n                  statistics pruning.\n                </CardDescription>\n              </div>\n\n              <!-- Search Partitions -->\n              <div class=\"relative w-full md:w-64\">\n                <Search class=\"text-muted-foreground absolute top-2.5 left-2.5 size-3.5\" />\n                <input\n                  v-model=\"partitionSearch\"\n                  type=\"text\"\n                  placeholder=\"Filter partitions...\"\n                  class=\"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\n              class=\"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            >\n              <div>\n                <span class=\"text-muted-foreground\">Clustered Columns:</span>\n                <div class=\"text-foreground font-mono font-semibold\">customer_id, event_type</div>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Data Skipping Efficiency:</span>\n                <div class=\"text-success font-mono font-semibold\">96.4% Row-Groups Skipped</div>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Clustering Curve Algorithm:</span>\n                <div class=\"text-foreground font-mono font-semibold\">Hilbert Space-Filling (Depth 16)</div>\n              </div>\n              <div>\n                <span class=\"text-muted-foreground\">Compression Codec:</span>\n                <div class=\"text-foreground font-mono font-semibold\">ZSTD Level 7 · Parquet v2</div>\n              </div>\n            </div>\n          </CardHeader>\n\n          <Separator />\n\n          <CardContent class=\"p-0\">\n            <div class=\"overflow-x-auto\">\n              <Table>\n                <TableHeader>\n                  <TableRow class=\"hover:bg-transparent\">\n                    <TableHead class=\"text-xs\">Partition Key</TableHead>\n                    <TableHead class=\"text-xs\">File Count</TableHead>\n                    <TableHead class=\"text-xs\">Avg File Size</TableHead>\n                    <TableHead class=\"text-xs\">Total Data Size</TableHead>\n                    <TableHead class=\"text-xs\">Data Skipping</TableHead>\n                    <TableHead class=\"text-xs\">Z-Order Status</TableHead>\n                    <TableHead class=\"text-right text-xs\">Action</TableHead>\n                  </TableRow>\n                </TableHeader>\n                <TableBody>\n                  <TableRow\n                    v-for=\"partition in filteredPartitions\"\n                    :key=\"partition.partitionKey\"\n                    class=\"hover:bg-muted/50\"\n                  >\n                    <TableCell class=\"text-foreground font-mono text-xs font-semibold\">\n                      {{ partition.partitionKey }}\n                    </TableCell>\n                    <TableCell class=\"font-mono text-xs tabular-nums\"> {{ partition.fileCount }} files </TableCell>\n                    <TableCell class=\"font-mono text-xs tabular-nums\">\n                      {{ partition.avgFileSize }}\n                    </TableCell>\n                    <TableCell class=\"font-mono text-xs tabular-nums\">\n                      {{ partition.totalSize }}\n                    </TableCell>\n                    <TableCell>\n                      <div class=\"w-32 space-y-1\">\n                        <div class=\"text-muted-foreground flex justify-between font-mono text-xs tabular-nums\">\n                          <span>{{ partition.skippedPercentage }}%</span>\n                        </div>\n                        <Progress :model-value=\"partition.skippedPercentage\" class=\"bg-muted h-1.5\" />\n                      </div>\n                    </TableCell>\n                    <TableCell>\n                      <Badge variant=\"success\" class=\"gap-1 font-mono text-xs\">\n                        <CheckCircle2 class=\"size-3\" />\n                        {{ partition.status }}\n                      </Badge>\n                    </TableCell>\n                    <TableCell class=\"text-right\">\n                      <Button variant=\"ghost\" size=\"sm\" class=\"h-7 text-xs font-medium\"> Re-cluster </Button>\n                    </TableCell>\n                  </TableRow>\n                </TableBody>\n              </Table>\n            </div>\n          </CardContent>\n        </Card>\n      </TabsContent>\n\n      <!-- TAB 3: COMPACTION & VACUUM MAINTENANCE RULES -->\n      <TabsContent value=\"maintenance\" class=\"space-y-5\">\n        <div class=\"grid grid-cols-1 gap-4 md:grid-cols-2\">\n          <!-- Bin-Pack Compaction Rule -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"flex items-center gap-2 text-sm font-semibold\">\n                  <Database class=\"text-success size-4\" />\n                  Bin-Pack Data File Compaction\n                </CardTitle>\n                <Badge variant=\"success\" class=\"text-xs\">Enabled · Auto</Badge>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Merges small files into optimized 128MB Parquet chunks to prevent small file bottleneck\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n              <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Target File Size:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">128 MB</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Small File Threshold:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">&lt; 32 MB</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Execution Schedule:</span>\n                  <span class=\"text-foreground font-mono\">Every 2 Hours (cron: 0 */2 * * *)</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Engine:</span>\n                  <span class=\"text-foreground\">Apache Spark Iceberg RewriteDataFiles Action</span>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Vacuum & Orphan File Removal -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"flex items-center gap-2 text-sm font-semibold\">\n                  <Trash2 class=\"text-destructive size-4\" />\n                  Vacuum & Orphan File Purger\n                </CardTitle>\n                <Badge variant=\"success\" class=\"text-xs\">Enabled · Daily</Badge>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Hard-deletes unreferenced data files and uncommitted multi-part upload orphans in S3\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n              <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Retention Grace Period:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">7 Days (168 Hours)</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Storage Reclaimed (30d):</span>\n                  <span class=\"text-success font-mono font-semibold\">1.2 TB freed</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Execution Schedule:</span>\n                  <span class=\"text-foreground font-mono\">Daily at 02:00 UTC</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Safety Guard:</span>\n                  <span class=\"text-foreground\">Explicit dry-run verification check</span>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Snapshot Expiration Policy -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"flex items-center gap-2 text-sm font-semibold\">\n                  <Clock class=\"text-info size-4\" />\n                  Snapshot Expiration Policy\n                </CardTitle>\n                <Badge variant=\"info\" class=\"text-xs\">30-Day Window</Badge>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Controls metadata table history retention for time-travel queries and rollback safety\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n              <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Retention Window:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">30 Days</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Min Snapshots Retained:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">20 Snapshots</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Clean Expired Metadata:</span>\n                  <span class=\"text-foreground font-mono\">Yes (Purge orphan Avro manifests)</span>\n                </div>\n              </div>\n            </CardContent>\n          </Card>\n\n          <!-- Manifest Consolidation -->\n          <Card class=\"border-border bg-card shadow-xs\">\n            <CardHeader class=\"p-4 pb-2 sm:p-5 sm:pb-2\">\n              <div class=\"flex items-center justify-between\">\n                <CardTitle class=\"flex items-center gap-2 text-sm font-semibold\">\n                  <FileText class=\"text-chart-1 size-4\" />\n                  Manifest File Consolidation\n                </CardTitle>\n                <Badge variant=\"success\" class=\"text-xs\">Optimized</Badge>\n              </div>\n              <CardDescription class=\"text-xs\">\n                Rewrites small manifest files to accelerate query planning and metadata scanning\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"space-y-3 p-4 pt-3 text-xs sm:p-5\">\n              <div class=\"border-border bg-muted/40 space-y-2 rounded-lg border p-3\">\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Active Manifest Count:</span>\n                  <span class=\"text-foreground font-mono font-semibold\">6 Manifests</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Rewrite Trigger Threshold:</span>\n                  <span class=\"text-foreground font-mono\">&gt; 50 Small Manifests</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between\">\n                  <span>Query Planning Overhead:</span>\n                  <span class=\"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\" class=\"space-y-5\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"p-5 pb-3\">\n            <CardTitle class=\"text-base font-semibold\"> File Size Distribution & I/O Amplification Analysis </CardTitle>\n            <CardDescription class=\"text-xs\">\n              Comparison of storage layout before vs. after Iceberg automatic compaction\n            </CardDescription>\n          </CardHeader>\n          <Separator />\n          <CardContent class=\"space-y-6 p-5\">\n            <div class=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n              <!-- Before Compaction -->\n              <div class=\"border-border bg-muted/20 space-y-3 rounded-xl border p-4\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-destructive text-xs font-semibold\">Before Compaction (Small File Problem)</span>\n                  <Badge variant=\"destructive\" class=\"font-mono text-xs\">18.4x I/O Amplification</Badge>\n                </div>\n                <div class=\"space-y-2 text-xs\">\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Total Small Files (&lt;4MB):</span>\n                    <span class=\"text-foreground font-mono font-bold\">14,280 Files</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Average File Size:</span>\n                    <span class=\"text-foreground font-mono\">2.4 MB</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Query Scan Latency (P95):</span>\n                    <span class=\"text-destructive font-mono font-semibold\">8.4 seconds</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>S3 GET Request Cost:</span>\n                    <span class=\"text-foreground font-mono\">$380 / month</span>\n                  </div>\n                </div>\n              </div>\n\n              <!-- After Compaction -->\n              <div class=\"border-success/30 bg-success/[0.03] space-y-3 rounded-xl border p-4\">\n                <div class=\"flex items-center justify-between\">\n                  <span class=\"text-success text-xs font-semibold\">After Compaction (Optimal Bin-Pack)</span>\n                  <Badge variant=\"success\" class=\"font-mono text-xs\">1.02x Near-Ideal</Badge>\n                </div>\n                <div class=\"space-y-2 text-xs\">\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Total Target Files (128MB):</span>\n                    <span class=\"text-foreground font-mono font-bold\">142 Files</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Average File Size:</span>\n                    <span class=\"text-foreground font-mono\">128.2 MB</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>Query Scan Latency (P95):</span>\n                    <span class=\"text-success font-mono font-semibold\">220 milliseconds (38x speedup)</span>\n                  </div>\n                  <div class=\"text-muted-foreground flex justify-between\">\n                    <span>S3 GET Request Cost:</span>\n                    <span class=\"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</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/LakehouseTableOptimizer.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/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"
  ]
}