admindb 2.5.0 → 2.6.2

package/dist/views/pages/error.hbs

@@ -1,10 +1 @@
-<div class="mx-auto mt-16 max-w-md space-y-6 text-center">
-  <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
-    {{{icon "warning" class="h-10 w-10"}}}
-  </div>
-  <div>
-    <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>
-    <p class="mt-2 text-base-content/60">{{error}}</p>
-  </div>
-  <a href="{{basePath}}/" class="btn btn-primary">Back to home</a>
-</div>
+<div class="mx-auto mt-16 max-w-md space-y-6 text-center">
  <div class="mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-error/10 text-error">
    {{{icon "warning" class="h-10 w-10"}}}
  </div>
  <div>
    <h1 class="text-5xl font-extrabold tracking-tight text-error">{{status}}</h1>
    <p class="mt-2 text-base-content/60">{{error}}</p>
  </div>
  <a href="{{basePath}}/" class="btn btn-primary">Back to home</a>

package/dist/views/pages/seed-select.hbs

@@ -1 +1,252 @@
-<div class="space-y-6 max-w-5xl mx-auto pb-16">
  <div class="page-header">
    <div class="page-header-row">
      <div>
        <div class="page-pretitle">Developer Tools</div>
        <h1 class="page-title">Seed Data Generator</h1>
        <p class="mt-0.5 text-xs text-base-content/60">
          Generate realistic mock datasets with column heuristics or populate complete relational entity graphs.
        </p>
      </div>
    </div>
  </div>
  {{#if hasTables}}
  <div class="grid gap-6 lg:grid-cols-[1fr_380px]">
    <div class="space-y-4">
      <div class="app-card overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-base-200 bg-base-200/30 flex flex-wrap items-center justify-between gap-3">
          <div>
            <h2 class="text-sm font-bold text-base-content flex items-center gap-2">
              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/15 text-primary text-xs font-bold font-mono">1</span>
              Choose Target Table
            </h2>
            <p class="text-[11px] text-base-content/50 mt-0.5">Select the root table to generate rows for.</p>
          </div>
          <div class="w-full sm:w-56">
            <div class="relative">
              <span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40">
                {{{icon "search" class="h-3.5 w-3.5"}}}
              </span>
              <input id="table-search-input" type="text" placeholder="Filter tables…" autocomplete="off"
                class="field-input text-xs !py-1 !pl-8 w-full" />
            </div>
          </div>
        </div>
        <div id="table-cards-list" class="p-3 sm:p-4 space-y-2 max-h-[480px] overflow-y-auto">
          {{#each (or seedTables tables)}}
          <label class="table-option-card block cursor-pointer select-none rounded-xl border p-3 transition-all {{#if (eq this.name ../defaultTable)}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
            data-table="{{this.name}}">
            <div class="flex items-center justify-between gap-3">
              <div class="flex items-center gap-3 min-w-0">
                <input type="radio" name="selected_table" value="{{this.name}}" class="radio radio-primary radio-xs"
                  {{#if (eq this.name ../defaultTable)}}checked{{/if}} />
                <div class="min-w-0">
                  <div class="font-mono font-bold text-sm text-base-content truncate flex items-center gap-2">
                    {{{icon "table" class="h-3.5 w-3.5 text-base-content/50 shrink-0"}}}
                    <span>{{this.name}}</span>
                  </div>
                  <div class="flex items-center gap-2 mt-0.5 text-[11px] text-base-content/50">
                    <span>{{this.cols}} cols</span>
                    <span>·</span>
                    <span>{{this.rowCount}} existing rows</span>
                    {{#if this.fks}}
                      <span>·</span>
                      <span class="text-amber-500 font-medium">{{this.fks}} FK refs</span>
                    {{/if}}
                  </div>
                </div>
              </div>
              <div class="flex items-center gap-1 shrink-0">
                <button type="button" class="btn btn-ghost btn-xs text-[11px] text-base-content/70 hover:text-primary quick-seed-btn"
                  data-table="{{this.name}}" data-mode="single" title="Seed this table directly">
                  Single
                </button>
                <button type="button" class="btn btn-ghost btn-xs text-[11px] text-emerald-600 hover:text-emerald-500 quick-seed-btn"
                  data-table="{{this.name}}" data-mode="chain" title="Seed relational ER chain directly">
                  ER Chain
                </button>
              </div>
            </div>
          </label>
          {{/each}}
        </div>
      </div>
    </div>
    <div class="space-y-4 lg:sticky lg:top-20 self-start">
      <div class="app-card overflow-hidden">
        <div class="p-4 border-b border-base-200 bg-base-200/30">
          <h2 class="text-sm font-bold text-base-content flex items-center gap-2">
            <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/15 text-primary text-xs font-bold font-mono">2</span>
            Choose Generation Mode
          </h2>
          <p class="text-[11px] text-base-content/50 mt-0.5">Select how rows should be populated.</p>
        </div>
        <div class="p-3.5 space-y-2.5">
          <label class="mode-option-card block cursor-pointer select-none rounded-xl border p-3.5 transition-all {{#if (eq defaultMode 'single')}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
            data-mode="single">
            <div class="flex items-start gap-3">
              <input type="radio" name="selected_mode" value="single" class="radio radio-primary radio-xs mt-0.5"
                {{#if (eq defaultMode 'single')}}checked{{/if}} />
              <div class="space-y-1">
                <div class="flex items-center gap-2">
                  <span class="font-bold text-xs text-base-content">Single Table Seeder</span>
                  <span class="badge badge-xs badge-ghost text-[10px] font-mono">Standalone</span>
                </div>
                <p class="text-[11px] text-base-content/60 leading-relaxed">
                  Generates realistic rows for the selected table with automated column heuristics (names, emails, dates, addresses, UUIDs) and live formula templates.
                </p>
              </div>
            </div>
          </label>
          <label class="mode-option-card block cursor-pointer select-none rounded-xl border p-3.5 transition-all {{#if (eq defaultMode 'chain')}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
            data-mode="chain">
            <div class="flex items-start gap-3">
              <input type="radio" name="selected_mode" value="chain" class="radio radio-primary radio-xs mt-0.5"
                {{#if (eq defaultMode 'chain')}}checked{{/if}} />
              <div class="space-y-1">
                <div class="flex items-center gap-2">
                  <span class="font-bold text-xs text-base-content">Relational ER Chain Seeder</span>
                  <span class="badge badge-xs badge-outline badge-success text-[10px] font-mono">Full Graph</span>
                </div>
                <p class="text-[11px] text-base-content/60 leading-relaxed">
                  Analyzes schema graph foreign keys and seeds related parent & child entities in topological order to guarantee full relational integrity.
                </p>
              </div>
            </div>
          </label>
        </div>
        <div class="p-3.5 border-t border-base-200 bg-base-200/20">
          <button id="btn-launch-seed" type="button" class="btn btn-primary btn-sm w-full gap-2 font-bold shadow-sm">
            {{{icon "seed" class="h-4 w-4"}}}
            <span id="launch-btn-label">Open Seed Generator</span>
            {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
          </button>
        </div>
      </div>
      <div class="p-3.5 rounded-xl bg-base-200/50 border border-base-300 text-xs space-y-1 text-base-content/70">
        <div class="font-semibold text-base-content flex items-center gap-1.5 text-[11px]">
          {{{icon "info" class="h-3.5 w-3.5 text-primary"}}}
          Deterministic Generation
        </div>
        <p class="text-[11px] leading-relaxed text-base-content/60">
          You can specify an exact numeric seed for deterministic reproducible data, or import/export seed profiles.
        </p>
      </div>
    </div>
  </div>
  {{else}}
  <div class="empty-state">
    <span class="empty-icon">{{{icon "table" class="h-7 w-7"}}}</span>
    <p class="text-sm font-medium text-base-content/70">No tables available in the database</p>
    <p class="text-xs text-base-content/50 mt-1 max-w-sm">Create a table using the visual designer or run SQL migrations before generating seed data.</p>
    <div class="mt-4 flex gap-2">
      <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm gap-1.5">
        {{{icon "plus" class="h-4 w-4"}}}
        Create table
      </a>
      <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm gap-1.5">
        {{{icon "query" class="h-4 w-4"}}}
        Query editor
      </a>
    </div>
  </div>
  {{/if}}
  const BASE = '{{basePath}}';
  const DB_ID = '{{dbId}}';
  let selectedTable = '{{defaultTable}}';
  let selectedMode = '{{defaultMode}}' || 'single';
  const tableCards = document.querySelectorAll('.table-option-card');
  const modeCards = document.querySelectorAll('.mode-option-card');
  const launchBtn = document.getElementById('btn-launch-seed');
  const launchLabel = document.getElementById('launch-btn-label');
  const searchInput = document.getElementById('table-search-input');
  function updateLaunchLabel() {
    if (launchLabel) {
      launchLabel.textContent = selectedTable
        ? `Seed "${selectedTable}" (${selectedMode === 'chain' ? 'ER Chain' : 'Single Table'})`
        : 'Open Seed Generator';
    }
  }
  function setSelectedTable(tableName) {
    selectedTable = tableName;
    tableCards.forEach(card => {
      const isMatch = card.dataset.table === tableName;
      const radio = card.querySelector('input[type="radio"]');
      if (radio) radio.checked = isMatch;
      if (isMatch) {
        card.classList.add('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
        card.classList.remove('border-base-200', 'bg-base-100');
      } else {
        card.classList.remove('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
        card.classList.add('border-base-200', 'bg-base-100');
      }
    });
    updateLaunchLabel();
  }
  function setSelectedMode(mode) {
    selectedMode = mode;
    modeCards.forEach(card => {
      const isMatch = card.dataset.mode === mode;
      const radio = card.querySelector('input[type="radio"]');
      if (radio) radio.checked = isMatch;
      if (isMatch) {
        card.classList.add('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
        card.classList.remove('border-base-200', 'bg-base-100');
      } else {
        card.classList.remove('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
        card.classList.add('border-base-200', 'bg-base-100');
      }
    });
    updateLaunchLabel();
  }
  tableCards.forEach(card => {
    card.addEventListener('click', (e) => {
      if (e.target.closest('.quick-seed-btn')) return;
      const table = card.dataset.table;
      if (table) setSelectedTable(table);
    });
  });
  modeCards.forEach(card => {
    card.addEventListener('click', () => {
      const mode = card.dataset.mode;
      if (mode) setSelectedMode(mode);
    });
  });
  // Direct quick-seed buttons
  document.querySelectorAll('.quick-seed-btn').forEach(btn => {
    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      const table = btn.dataset.table;
      const mode = btn.dataset.mode || 'single';
      if (table) {
        window.location.href = `${BASE}/seed/${encodeURIComponent(DB_ID)}/${encodeURIComponent(table)}?mode=${encodeURIComponent(mode)}`;
      }
    });
  });
  // Launch button
  if (launchBtn) {
    launchBtn.addEventListener('click', () => {
      if (!selectedTable) return;
      window.location.href = `${BASE}/seed/${encodeURIComponent(DB_ID)}/${encodeURIComponent(selectedTable)}?mode=${encodeURIComponent(selectedMode)}`;
    });
  }
  // Real-time table search filter
  if (searchInput) {
    searchInput.addEventListener('input', () => {
      const q = searchInput.value.trim().toLowerCase();
      tableCards.forEach(card => {
        const name = (card.dataset.table || '').toLowerCase();
        if (!q || name.includes(q)) {
          card.classList.remove('hidden');
        } else {
          card.classList.add('hidden');
        }
      });
    });
  }
  updateLaunchLabel();
+<div class="space-y-6 max-w-5xl mx-auto pb-16">
+  <div class="page-header">
+    <div class="page-header-row">
+      <div>
+        <div class="page-pretitle">Developer Tools</div>
+        <h1 class="page-title">Seed Data Generator</h1>
+        <p class="mt-0.5 text-xs text-base-content/60">
+          Generate realistic mock datasets with column heuristics or populate complete relational entity graphs.
+        </p>
+      </div>
+    </div>
+  </div>
+  {{#if hasTables}}
+  <div class="grid gap-6 lg:grid-cols-[1fr_380px]">
+    <div class="space-y-4">
+      <div class="app-card overflow-hidden">
+        <div class="p-4 sm:p-5 border-b border-base-200 bg-base-200/30 flex flex-wrap items-center justify-between gap-3">
+          <div>
+            <h2 class="text-sm font-bold text-base-content flex items-center gap-2">
+              <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/15 text-primary text-xs font-bold font-mono">1</span>
+              Choose Target Table
+            </h2>
+            <p class="text-[11px] text-base-content/50 mt-0.5">Select the root table to generate rows for.</p>
+          </div>
+          <div class="w-full sm:w-56">
+            <div class="relative">
+              <span class="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-base-content/40">
+                {{{icon "search" class="h-3.5 w-3.5"}}}
+              </span>
+              <input id="table-search-input" type="text" placeholder="Filter tables…" autocomplete="off"
+                class="field-input text-xs !py-1 !pl-8 w-full" />
+            </div>
+          </div>
+        </div>
+        <div id="table-cards-list" class="p-3 sm:p-4 space-y-2 max-h-[480px] overflow-y-auto">
+          {{#each (or seedTables tables)}}
+          <label class="table-option-card block cursor-pointer select-none rounded-xl border p-3 transition-all {{#if (eq this.name ../defaultTable)}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
+            data-table="{{this.name}}">
+            <div class="flex items-center justify-between gap-3">
+              <div class="flex items-center gap-3 min-w-0">
+                <input type="radio" name="selected_table" value="{{this.name}}" class="radio radio-primary radio-xs"
+                  {{#if (eq this.name ../defaultTable)}}checked{{/if}} />
+                <div class="min-w-0">
+                  <div class="font-mono font-bold text-sm text-base-content truncate flex items-center gap-2">
+                    {{{icon "table" class="h-3.5 w-3.5 text-base-content/50 shrink-0"}}}
+                    <span>{{this.name}}</span>
+                  </div>
+                  <div class="flex items-center gap-2 mt-0.5 text-[11px] text-base-content/50">
+                    <span>{{this.cols}} cols</span>
+                    <span>·</span>
+                    <span>{{this.rowCount}} existing rows</span>
+                    {{#if this.fks}}
+                      <span>·</span>
+                      <span class="text-amber-500 font-medium">{{this.fks}} FK refs</span>
+                    {{/if}}
+                  </div>
+                </div>
+              </div>
+              <div class="flex items-center gap-1 shrink-0">
+                <button type="button" class="btn btn-ghost btn-xs text-[11px] text-base-content/70 hover:text-primary quick-seed-btn"
+                  data-table="{{this.name}}" data-mode="single" title="Seed this table directly">
+                  Single
+                </button>
+                <button type="button" class="btn btn-ghost btn-xs text-[11px] text-emerald-600 hover:text-emerald-500 quick-seed-btn"
+                  data-table="{{this.name}}" data-mode="chain" title="Seed relational ER chain directly">
+                  ER Chain
+                </button>
+              </div>
+            </div>
+          </label>
+          {{/each}}
+        </div>
+      </div>
+    </div>
+    <div class="space-y-4 lg:sticky lg:top-20 self-start">
+      <div class="app-card overflow-hidden">
+        <div class="p-4 border-b border-base-200 bg-base-200/30">
+          <h2 class="text-sm font-bold text-base-content flex items-center gap-2">
+            <span class="grid h-5 w-5 place-items-center rounded-md bg-primary/15 text-primary text-xs font-bold font-mono">2</span>
+            Choose Generation Mode
+          </h2>
+          <p class="text-[11px] text-base-content/50 mt-0.5">Select how rows should be populated.</p>
+        </div>
+        <div class="p-3.5 space-y-2.5">
+          <label class="mode-option-card block cursor-pointer select-none rounded-xl border p-3.5 transition-all {{#if (eq defaultMode 'single')}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
+            data-mode="single">
+            <div class="flex items-start gap-3">
+              <input type="radio" name="selected_mode" value="single" class="radio radio-primary radio-xs mt-0.5"
+                {{#if (eq defaultMode 'single')}}checked{{/if}} />
+              <div class="space-y-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-bold text-xs text-base-content">Single Table Seeder</span>
+                  <span class="badge badge-xs badge-ghost text-[10px] font-mono">Standalone</span>
+                </div>
+                <p class="text-[11px] text-base-content/60 leading-relaxed">
+                  Generates realistic rows for the selected table with automated column heuristics (names, emails, dates, addresses, UUIDs) and live formula templates.
+                </p>
+              </div>
+            </div>
+          </label>
+          <label class="mode-option-card block cursor-pointer select-none rounded-xl border p-3.5 transition-all {{#if (eq defaultMode 'chain')}}border-primary bg-primary/[0.04] shadow-sm{{else}}border-base-200 bg-base-100 hover:border-base-300 hover:bg-base-200/40{{/if}}"
+            data-mode="chain">
+            <div class="flex items-start gap-3">
+              <input type="radio" name="selected_mode" value="chain" class="radio radio-primary radio-xs mt-0.5"
+                {{#if (eq defaultMode 'chain')}}checked{{/if}} />
+              <div class="space-y-1">
+                <div class="flex items-center gap-2">
+                  <span class="font-bold text-xs text-base-content">Relational ER Chain Seeder</span>
+                  <span class="badge badge-xs badge-outline badge-success text-[10px] font-mono">Full Graph</span>
+                </div>
+                <p class="text-[11px] text-base-content/60 leading-relaxed">
+                  Analyzes schema graph foreign keys and seeds related parent & child entities in topological order to guarantee full relational integrity.
+                </p>
+              </div>
+            </div>
+          </label>
+        </div>
+        <div class="p-3.5 border-t border-base-200 bg-base-200/20">
+          <button id="btn-launch-seed" type="button" class="btn btn-primary btn-sm w-full gap-2 font-bold shadow-sm">
+            {{{icon "seed" class="h-4 w-4"}}}
+            <span id="launch-btn-label">Open Seed Generator</span>
+            {{{icon "arrowRight" class="h-3.5 w-3.5"}}}
+          </button>
+        </div>
+      </div>
+      <div class="p-3.5 rounded-xl bg-base-200/50 border border-base-300 text-xs space-y-1 text-base-content/70">
+        <div class="font-semibold text-base-content flex items-center gap-1.5 text-[11px]">
+          {{{icon "info" class="h-3.5 w-3.5 text-primary"}}}
+          Deterministic Generation
+        </div>
+        <p class="text-[11px] leading-relaxed text-base-content/60">
+          You can specify an exact numeric seed for deterministic reproducible data, or import/export seed profiles.
+        </p>
+      </div>
+    </div>
+  </div>
+  {{else}}
+  <div class="empty-state">
+    <span class="empty-icon">{{{icon "table" class="h-7 w-7"}}}</span>
+    <p class="text-sm font-medium text-base-content/70">No tables available in the database</p>
+    <p class="text-xs text-base-content/50 mt-1 max-w-sm">Create a table using the visual designer or run SQL migrations before generating seed data.</p>
+    <div class="mt-4 flex gap-2">
+      <a href="{{basePath}}/designer/{{encodeUri dbId}}" class="btn btn-primary btn-sm gap-1.5">
+        {{{icon "plus" class="h-4 w-4"}}}
+        Create table
+      </a>
+      <a href="{{basePath}}/query/{{encodeUri dbId}}" class="btn btn-outline btn-sm gap-1.5">
+        {{{icon "query" class="h-4 w-4"}}}
+        Query editor
+      </a>
+    </div>
+  </div>
+  {{/if}}
+</div>
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  const BASE = '{{basePath}}';
+  const DB_ID = '{{dbId}}';
+  let selectedTable = '{{defaultTable}}';
+  let selectedMode = '{{defaultMode}}' || 'single';
+  const tableCards = document.querySelectorAll('.table-option-card');
+  const modeCards = document.querySelectorAll('.mode-option-card');
+  const launchBtn = document.getElementById('btn-launch-seed');
+  const launchLabel = document.getElementById('launch-btn-label');
+  const searchInput = document.getElementById('table-search-input');
+  function updateLaunchLabel() {
+    if (launchLabel) {
+      launchLabel.textContent = selectedTable
+        ? `Seed "${selectedTable}" (${selectedMode === 'chain' ? 'ER Chain' : 'Single Table'})`
+        : 'Open Seed Generator';
+    }
+  }
+  function setSelectedTable(tableName) {
+    selectedTable = tableName;
+    tableCards.forEach(card => {
+      const isMatch = card.dataset.table === tableName;
+      const radio = card.querySelector('input[type="radio"]');
+      if (radio) radio.checked = isMatch;
+      if (isMatch) {
+        card.classList.add('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
+        card.classList.remove('border-base-200', 'bg-base-100');
+      } else {
+        card.classList.remove('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
+        card.classList.add('border-base-200', 'bg-base-100');
+      }
+    });
+    updateLaunchLabel();
+  }
+  function setSelectedMode(mode) {
+    selectedMode = mode;
+    modeCards.forEach(card => {
+      const isMatch = card.dataset.mode === mode;
+      const radio = card.querySelector('input[type="radio"]');
+      if (radio) radio.checked = isMatch;
+      if (isMatch) {
+        card.classList.add('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
+        card.classList.remove('border-base-200', 'bg-base-100');
+      } else {
+        card.classList.remove('border-primary', 'bg-primary/[0.04]', 'shadow-sm');
+        card.classList.add('border-base-200', 'bg-base-100');
+      }
+    });
+    updateLaunchLabel();
+  }
+  tableCards.forEach(card => {
+    card.addEventListener('click', (e) => {
+      if (e.target.closest('.quick-seed-btn')) return;
+      const table = card.dataset.table;
+      if (table) setSelectedTable(table);
+    });
+  });
+  modeCards.forEach(card => {
+    card.addEventListener('click', () => {
+      const mode = card.dataset.mode;
+      if (mode) setSelectedMode(mode);
+    });
+  });
+  // Direct quick-seed buttons
+  document.querySelectorAll('.quick-seed-btn').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const table = btn.dataset.table;
+      const mode = btn.dataset.mode || 'single';
+      if (table) {
+        window.location.href = `${BASE}/seed/${encodeURIComponent(DB_ID)}/${encodeURIComponent(table)}?mode=${encodeURIComponent(mode)}`;
+      }
+    });
+  });
+  // Launch button
+  if (launchBtn) {
+    launchBtn.addEventListener('click', () => {
+      if (!selectedTable) return;
+      window.location.href = `${BASE}/seed/${encodeURIComponent(DB_ID)}/${encodeURIComponent(selectedTable)}?mode=${encodeURIComponent(selectedMode)}`;
+    });
+  }
+  // Real-time table search filter
+  if (searchInput) {
+    searchInput.addEventListener('input', () => {
+      const q = searchInput.value.trim().toLowerCase();
+      tableCards.forEach(card => {
+        const name = (card.dataset.table || '').toLowerCase();
+        if (!q || name.includes(q)) {
+          card.classList.remove('hidden');
+        } else {
+          card.classList.add('hidden');
+        }
+      });
+    });
+  }
+  updateLaunchLabel();
+});
+</script>