admindb 1.0.1

package/dist/public/js/schema.js

@@ -0,0 +1,314 @@
+/* Table schema editor: rename table, add/rename/drop columns, drop table. */
+(function () {
+  'use strict';
+  const cfgEl = document.getElementById('schema-config');
+  if (!cfgEl) return;
+  const cfg = JSON.parse(cfgEl.textContent);
+  const DESIGNER_TYPES = ['TEXT', 'INTEGER', 'REAL', 'BLOB', 'BOOLEAN', 'DATE', 'DATETIME'];
+  const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]*$/;
+  const t = encodeURIComponent(cfg.table);
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function showError(el, msg) {
+    el.classList.remove('hidden');
+    el.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border border-error/40 bg-error/10 px-4 py-3 text-sm font-medium text-error"><span>' + escapeHtml(msg) + '</span></div>';
+  }
+
+  // ---- Rename table ------------------------------------------------------
+
+  const renameInput = document.getElementById('table-rename-input');
+  const renameBtn = document.getElementById('rename-table');
+
+  async function renameTable() {
+    const name = (renameInput.value || '').trim();
+    if (!name) return UI.showError('Table name is required.');
+    if (name === cfg.table) return UI.showToast('Name unchanged.', 'info');
+    try {
+      const data = await Api.post('/api/tables/' + t + '/rename', { name });
+      UI.showToast(data.message || 'Table renamed.', 'success');
+      setTimeout(() => {
+        window.location.href = Api.basePath + '/tables/' + encodeURIComponent(name) + '/schema';
+      }, 400);
+    } catch (e) {
+      UI.showError(e.message);
+    }
+  }
+  if (renameBtn) renameBtn.addEventListener('click', renameTable);
+  if (renameInput) renameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') renameTable(); });
+
+  // ---- Add column ---------------------------------------------------------
+
+  const addBtn = document.getElementById('add-column');
+  const panel = document.getElementById('add-column-panel');
+  const formEl = document.getElementById('add-column-form');
+  const errEl = document.getElementById('add-column-error');
+  const submitBtn = document.getElementById('add-column-submit');
+  const cancelBtn = document.getElementById('add-column-cancel');
+  let fkTables = [];
+
+  async function loadFkTables() {
+    try {
+      const tables = await Api.get('/api/tables');
+      fkTables = tables.map((x) => x.name).filter((n) => n.charAt(0) !== '_');
+    } catch (e) {
+      fkTables = [];
+    }
+  }
+
+  function buildAddForm() {
+    formEl.innerHTML = '';
+    formEl.innerHTML = [
+      '<div class="col-span-2 sm:col-span-3"><label class="field-label">Name</label><input class="field-input ac-name" placeholder="column_name" autocomplete="off" spellcheck="false"></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Type</label><select class="field-select ac-type">' + DESIGNER_TYPES.map((x) => '<option>' + x + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK table</label><select class="field-select ac-fk-table"><option value="">— none —</option>' + fkTables.map((x) => '<option>' + escapeHtml(x) + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK column</label><select class="field-select ac-fk-col"><option value="">—</option></select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">Default</label><input class="field-input ac-default" placeholder="0, CURRENT_TIMESTAMP" autocomplete="off" spellcheck="false"></div>',
+      '<div class="col-span-2 flex items-end gap-1 pb-0.5 sm:col-span-1">',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Not null"><input type="checkbox" class="checkbox checkbox-xs ac-notnull"><span class="text-[10px] font-semibold uppercase text-base-content/50">NN</span></label>',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Unique"><input type="checkbox" class="checkbox checkbox-xs ac-unique"><span class="text-[10px] font-semibold uppercase text-base-content/50">UQ</span></label>',
+      '</div>',
+    ].join('');
+
+    const fkTableSel = formEl.querySelector('.ac-fk-table');
+    const fkColSel = formEl.querySelector('.ac-fk-col');
+    fkTableSel.addEventListener('change', async () => {
+      fkColSel.innerHTML = '<option value="">—</option>';
+      const target = fkTableSel.value;
+      if (!target) return;
+      try {
+        const info = await Api.get('/api/tables/' + encodeURIComponent(target) + '/info');
+        fkColSel.innerHTML = '<option value="">—</option>' + info.columns.map((c) => '<option>' + escapeHtml(c.name) + '</option>').join('');
+      } catch (e) { /* ignore */ }
+    });
+  }
+
+  async function addColumn() {
+    errEl.classList.add('hidden');
+    const name = (formEl.querySelector('.ac-name').value || '').trim();
+    if (!name) return showError(errEl, 'Column name is required.');
+    if (!NAME_RE.test(name)) return showError(errEl, 'Invalid column name: "' + name + '". Use letters, digits and underscores.');
+    const fkTable = formEl.querySelector('.ac-fk-table').value;
+    const fkCol = formEl.querySelector('.ac-fk-col').value;
+    const column = {
+      name,
+      type: formEl.querySelector('.ac-type').value,
+      notNull: formEl.querySelector('.ac-notnull').checked,
+      unique: formEl.querySelector('.ac-unique').checked,
+      defaultValue: formEl.querySelector('.ac-default').value.trim() || null,
+      foreignKey: fkTable && fkCol ? { table: fkTable, column: fkCol } : null,
+    };
+    try {
+      const data = await Api.post('/api/tables/' + t + '/columns', { column });
+      UI.showToast(data.message || 'Column added.', 'success');
+      window.location.reload();
+    } catch (e) {
+      showError(errEl, e.message);
+    }
+  }
+
+  if (addBtn) {
+    addBtn.addEventListener('click', () => {
+      panel.classList.toggle('hidden');
+      if (!panel.classList.contains('hidden')) {
+        errEl.classList.add('hidden');
+        buildAddForm();
+      }
+    });
+  }
+  if (cancelBtn) cancelBtn.addEventListener('click', () => { panel.classList.add('hidden'); formEl.innerHTML = ''; });
+  if (submitBtn) submitBtn.addEventListener('click', addColumn);
+
+  // ---- Column rename (inline) ---------------------------------------------
+
+  function inlineRename(cell, oldName) {
+    const display = cell.querySelector('.name-display');
+    if (!display) return;
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.value = oldName;
+    input.className = 'field-input !py-1 !text-[13px]';
+    input.spellcheck = false;
+    let done = false;
+    const restore = () => { if (display.parentNode) cell.replaceChild(display, input); };
+    const finish = async (save) => {
+      if (done) return;
+      done = true;
+      if (!save) return restore();
+      const newName = input.value.trim();
+      if (!newName || newName === oldName) return restore();
+      try {
+        await Api.put('/api/tables/' + t + '/columns/' + encodeURIComponent(oldName), { name: newName });
+        UI.showToast('Column renamed.', 'success');
+        window.location.reload();
+      } catch (e) {
+        UI.showError(e.message);
+        done = false;
+        restore();
+      }
+    };
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') { e.preventDefault(); finish(true); }
+      else if (e.key === 'Escape') { e.preventDefault(); finish(false); }
+    });
+    input.addEventListener('blur', () => finish(false));
+    cell.replaceChild(input, display);
+    input.focus();
+    input.select();
+  }
+
+  document.querySelectorAll('.col-rename').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const tr = btn.closest('tr');
+      if (!tr) return;
+      const cell = tr.querySelector('.col-name-cell');
+      if (cell) inlineRename(cell, cell.dataset.column);
+    });
+  });
+
+  // ---- Drop column ---------------------------------------------------------
+
+  document.querySelectorAll('.col-drop').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const tr = btn.closest('tr');
+      if (!tr) return;
+      const cell = tr.querySelector('.col-name-cell');
+      const name = cell.dataset.column;
+      if (!window.confirm('Drop column "' + name + '" permanently? This cannot be undone.')) return;
+      Api.del('/api/tables/' + t + '/columns/' + encodeURIComponent(name))
+        .then((data) => {
+          UI.showToast(data.message || 'Column dropped.', 'success');
+          window.location.reload();
+        })
+        .catch((e) => UI.showError(e.message));
+    });
+  });
+
+  // ---- Drop table -----------------------------------------------------------
+
+  const dropBtn = document.getElementById('drop-table');
+  if (dropBtn) {
+    dropBtn.addEventListener('click', () => {
+      if (!window.confirm('Drop table "' + cfg.table + '" permanently? All of its data will be lost.')) return;
+      Api.del('/api/tables/' + t)
+        .then(() => {
+          UI.showToast('Table dropped.', 'success');
+          setTimeout(() => { window.location.href = Api.basePath + '/'; }, 400);
+        })
+        .catch((e) => UI.showError(e.message));
+    });
+  }
+
+  // ---- Index management ------------------------------------------------------
+
+  const addIndexBtn = document.getElementById('add-index');
+  const addIndexPanel = document.getElementById('add-index-panel');
+  const indexNameInput = document.getElementById('index-name');
+  const indexUniqueInput = document.getElementById('index-unique');
+  const indexErrEl = document.getElementById('add-index-error');
+  const addIndexSubmit = document.getElementById('add-index-submit');
+  const addIndexCancel = document.getElementById('add-index-cancel');
+  const indexPreview = document.getElementById('index-preview');
+  const indexPreviewCode = document.getElementById('index-preview-code');
+  const indexColBtns = Array.prototype.slice.call(document.querySelectorAll('.index-col-btn'));
+
+  // Columns selected for the new index, in click order (index order matters!).
+  let indexColumns = [];
+
+  function renderIndexPreview() {
+    if (!indexPreview || !indexPreviewCode) return;
+    const cols = indexColumns.slice();
+    const name = (indexNameInput.value || '').trim();
+    const unique = indexUniqueInput && indexUniqueInput.checked ? 'UNIQUE ' : '';
+    if (!cols.length) {
+      indexPreview.classList.add('hidden');
+      indexPreviewCode.textContent = '';
+      return;
+    }
+    const finalName = name || 'idx_' + cfg.table + '_' + cols.join('_');
+    indexPreviewCode.textContent =
+      'CREATE ' + unique + 'INDEX "' + finalName + '" ON "' + cfg.table + '" (' +
+      cols.map((c) => '"' + c + '"').join(', ') + ');';
+    indexPreview.classList.remove('hidden');
+  }
+
+  function toggleIndexColumn(btn) {
+    const col = btn.dataset.column;
+    const i = indexColumns.indexOf(col);
+    const num = btn.querySelector('.index-col-num');
+    if (i !== -1) {
+      indexColumns.splice(i, 1);
+      btn.classList.remove('border-primary', 'bg-primary/10');
+      if (num) num.classList.add('hidden');
+    } else {
+      indexColumns.push(col);
+      btn.classList.add('border-primary', 'bg-primary/10');
+      if (num) num.classList.remove('hidden');
+    }
+    indexColumns.forEach((c, idx) => {
+      const b = indexColBtns.find((x) => x.dataset.column === c);
+      const n = b && b.querySelector('.index-col-num');
+      if (n) n.textContent = String(idx + 1);
+    });
+    renderIndexPreview();
+  }
+
+  indexColBtns.forEach((btn) => btn.addEventListener('click', () => toggleIndexColumn(btn)));
+  if (indexNameInput) indexNameInput.addEventListener('input', renderIndexPreview);
+  if (indexUniqueInput) indexUniqueInput.addEventListener('change', renderIndexPreview);
+
+  if (addIndexBtn && addIndexPanel) {
+    addIndexBtn.addEventListener('click', () => {
+      addIndexPanel.classList.toggle('hidden');
+      if (!addIndexPanel.classList.contains('hidden')) {
+        indexErrEl.classList.add('hidden');
+        indexNameInput.focus();
+        renderIndexPreview();
+      }
+    });
+  }
+  if (addIndexCancel) {
+    addIndexCancel.addEventListener('click', () => {
+      addIndexPanel.classList.add('hidden');
+      indexErrEl.classList.add('hidden');
+    });
+  }
+  if (addIndexSubmit) {
+    addIndexSubmit.addEventListener('click', async () => {
+      indexErrEl.classList.add('hidden');
+      const columns = indexColumns.slice();
+      if (!columns.length) return showError(indexErrEl, 'Select at least one column for the index.');
+      const body = { columns, unique: !!(indexUniqueInput && indexUniqueInput.checked) };
+      const name = (indexNameInput.value || '').trim();
+      if (name) body.name = name;
+      addIndexSubmit.disabled = true;
+      try {
+        const data = await Api.post('/api/tables/' + t + '/indexes', body);
+        UI.showToast(data.message || 'Index created.', 'success');
+        window.location.reload();
+      } catch (e) {
+        showError(indexErrEl, e.message);
+      } finally {
+        addIndexSubmit.disabled = false;
+      }
+    });
+  }
+
+  document.querySelectorAll('.index-drop').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const name = btn.dataset.index;
+      if (!name) return;
+      if (!window.confirm('Drop index "' + name + '" permanently?')) return;
+      Api.del('/api/tables/' + t + '/indexes/' + encodeURIComponent(name))
+        .then((data) => {
+          UI.showToast(data.message || 'Index dropped.', 'success');
+          window.location.reload();
+        })
+        .catch((e) => UI.showError(e.message));
+    });
+  });
+
+  loadFkTables();
+})();

package/dist/public/js/triggers.js

@@ -0,0 +1,155 @@
+/* Triggers page: create / drop triggers with a live SQL preview. */
+(function () {
+  'use strict';
+  const cfgEl = document.getElementById('triggers-config');
+  if (!cfgEl) return;
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function showError(el, msg) {
+    el.classList.remove('hidden');
+    el.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border border-error/40 bg-error/10 px-4 py-3 text-sm font-medium text-error"><span>' + escapeHtml(msg) + '</span></div>';
+  }
+
+  // ---- Editor gutter ------------------------------------------------------
+
+  const editor = document.getElementById('trigger-body');
+  const gutter = document.getElementById('trigger-gutter');
+  function updateGutter() {
+    if (!gutter || !editor) return;
+    const lines = editor.value.split('\n').length;
+    let html = '';
+    for (let i = 1; i <= lines; i++) html += i + '\n';
+    gutter.textContent = html;
+    gutter.scrollTop = editor.scrollTop;
+  }
+  if (editor && gutter) {
+    editor.addEventListener('scroll', () => { gutter.scrollTop = editor.scrollTop; });
+    editor.addEventListener('input', updateGutter);
+    updateGutter();
+  }
+
+  // ---- New trigger form ---------------------------------------------------
+
+  const newBtn = document.getElementById('new-trigger');
+  const panel = document.getElementById('new-trigger-panel');
+  const nameInput = document.getElementById('trigger-name');
+  const tableInput = document.getElementById('trigger-table');
+  const timingInput = document.getElementById('trigger-timing');
+  const eventInput = document.getElementById('trigger-event');
+  const whenInput = document.getElementById('trigger-when');
+  const bodyInput = document.getElementById('trigger-body');
+  const errEl = document.getElementById('trigger-error');
+  const createBtn = document.getElementById('create-trigger');
+  const cancelBtn = document.getElementById('cancel-trigger');
+  const preview = document.getElementById('trigger-preview');
+  const previewCode = document.getElementById('trigger-preview-code');
+  const previewHint = document.getElementById('trigger-preview-hint');
+  let previewTimer = null;
+
+  function currentEvent() {
+    return eventInput ? eventInput.value : 'INSERT';
+  }
+
+  function renderPreview() {
+    clearTimeout(previewTimer);
+    const name = (nameInput.value || '').trim();
+    const table = tableInput.value || '';
+    const event = currentEvent();
+    if (!name && !table && !(bodyInput.value || '').trim()) {
+      preview.classList.add('hidden');
+      previewCode.textContent = '';
+      if (previewHint) previewHint.classList.remove('hidden');
+      return;
+    }
+    previewTimer = setTimeout(async () => {
+      try {
+        const data = await Api.post('/api/triggers/generate', {
+          name,
+          table,
+          timing: timingInput.value,
+          event,
+          when: (whenInput.value || '').trim() || undefined,
+          body: bodyInput.value,
+        });
+        previewCode.textContent = data.sql;
+        preview.classList.remove('hidden');
+        if (previewHint) previewHint.classList.add('hidden');
+      } catch (e) {
+        preview.classList.add('hidden');
+        previewCode.textContent = '';
+        if (previewHint) previewHint.classList.remove('hidden');
+      }
+    }, 250);
+  }
+
+  if (newBtn && panel) {
+    newBtn.addEventListener('click', () => {
+      panel.classList.toggle('hidden');
+      if (!panel.classList.contains('hidden')) {
+        errEl.classList.add('hidden');
+        nameInput.focus();
+        renderPreview();
+      }
+    });
+  }
+  [nameInput, tableInput, timingInput, eventInput, whenInput, bodyInput].forEach((el) => {
+    if (el) el.addEventListener('input', renderPreview);
+  });
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', () => {
+      panel.classList.add('hidden');
+      errEl.classList.add('hidden');
+    });
+  }
+
+  if (createBtn) {
+    createBtn.addEventListener('click', async () => {
+      errEl.classList.add('hidden');
+      const name = (nameInput.value || '').trim();
+      const table = tableInput.value || '';
+      const body = (bodyInput.value || '').trim();
+      const event = currentEvent();
+      if (!name) return showError(errEl, 'Trigger name is required.');
+      if (!table) return showError(errEl, 'Select a table for the trigger.');
+      if (!body) return showError(errEl, 'Trigger body is required.');
+      createBtn.disabled = true;
+      try {
+        const data = await Api.post('/api/triggers', {
+          name,
+          table,
+          timing: timingInput.value,
+          event,
+          when: (whenInput.value || '').trim() || undefined,
+          body,
+        });
+        UI.showToast(data.message || 'Trigger created.', 'success');
+        window.location.reload();
+      } catch (e) {
+        showError(errEl, e.message);
+      } finally {
+        createBtn.disabled = false;
+      }
+    });
+  }
+
+  // ---- Drop trigger -------------------------------------------------------
+
+  document.querySelectorAll('.trigger-drop').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const name = btn.dataset.trigger;
+      if (!name) return;
+      if (!window.confirm('Drop trigger "' + name + '" permanently?')) return;
+      try {
+        const data = await Api.del('/api/triggers/' + encodeURIComponent(name));
+        UI.showToast(data.message || 'Trigger dropped.', 'success');
+        window.location.reload();
+      } catch (e) {
+        UI.showError(e.message);
+      }
+    });
+  });
+})();

package/dist/public/js/views.js

@@ -0,0 +1,176 @@
+/* Views page: create / drop views, preview rows. */
+(function () {
+  'use strict';
+  const cfgEl = document.getElementById('views-config');
+  if (!cfgEl) return;
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function showError(el, msg) {
+    el.classList.remove('hidden');
+    el.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border border-error/40 bg-error/10 px-4 py-3 text-sm font-medium text-error"><span>' + escapeHtml(msg) + '</span></div>';
+  }
+
+  // ---- Editor gutter ------------------------------------------------------
+
+  const editor = document.getElementById('view-sql');
+  const gutter = document.getElementById('view-gutter');
+  function updateGutter() {
+    if (!gutter || !editor) return;
+    const lines = editor.value.split('\n').length;
+    let html = '';
+    for (let i = 1; i <= lines; i++) html += i + '\n';
+    gutter.textContent = html;
+    gutter.scrollTop = editor.scrollTop;
+  }
+  if (editor && gutter) {
+    editor.addEventListener('scroll', () => { gutter.scrollTop = editor.scrollTop; });
+    editor.addEventListener('input', updateGutter);
+    updateGutter();
+  }
+
+  // ---- New view form ------------------------------------------------------
+
+  const newBtn = document.getElementById('new-view');
+  const panel = document.getElementById('new-view-panel');
+  const nameInput = document.getElementById('view-name');
+  const sqlInput = document.getElementById('view-sql');
+  const errEl = document.getElementById('view-error');
+  const createBtn = document.getElementById('create-view');
+  const cancelBtn = document.getElementById('cancel-view');
+  const preview = document.getElementById('view-preview');
+  const previewCode = document.getElementById('view-preview-code');
+  const previewHint = document.getElementById('view-preview-hint');
+  let previewTimer = null;
+
+  function renderPreview() {
+    clearTimeout(previewTimer);
+    const name = (nameInput.value || '').trim();
+    const sql = (sqlInput.value || '').trim();
+    if (!name && !sql) {
+      preview.classList.add('hidden');
+      previewCode.textContent = '';
+      if (previewHint) previewHint.classList.remove('hidden');
+      return;
+    }
+    previewTimer = setTimeout(async () => {
+      try {
+        const data = await Api.post('/api/views/generate', { name, sql });
+        previewCode.textContent = data.sql;
+        preview.classList.remove('hidden');
+        if (previewHint) previewHint.classList.add('hidden');
+      } catch (e) {
+        preview.classList.add('hidden');
+        previewCode.textContent = '';
+        if (previewHint) previewHint.classList.remove('hidden');
+      }
+    }, 250);
+  }
+
+  if (newBtn && panel) {
+    newBtn.addEventListener('click', () => {
+      panel.classList.toggle('hidden');
+      if (!panel.classList.contains('hidden')) {
+        errEl.classList.add('hidden');
+        nameInput.focus();
+        renderPreview();
+      }
+    });
+  }
+  if (nameInput) nameInput.addEventListener('input', renderPreview);
+  if (sqlInput) sqlInput.addEventListener('input', renderPreview);
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', () => {
+      panel.classList.add('hidden');
+      errEl.classList.add('hidden');
+    });
+  }
+
+  if (createBtn) {
+    createBtn.addEventListener('click', async () => {
+      errEl.classList.add('hidden');
+      const name = (nameInput.value || '').trim();
+      const sql = (sqlInput.value || '').trim();
+      if (!name) return showError(errEl, 'View name is required.');
+      if (!sql) return showError(errEl, 'A SELECT statement is required.');
+      createBtn.disabled = true;
+      try {
+        const data = await Api.post('/api/views', { name, sql });
+        UI.showToast(data.message || 'View created.', 'success');
+        window.location.reload();
+      } catch (e) {
+        showError(errEl, e.message);
+      } finally {
+        createBtn.disabled = false;
+      }
+    });
+  }
+
+  // ---- Preview rows -------------------------------------------------------
+
+  document.querySelectorAll('.view-browse').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const name = btn.dataset.view;
+      const tr = btn.closest('tr');
+      const previewTr = tr && tr.nextElementSibling;
+      if (!previewTr) return;
+      const container = previewTr.querySelector('td > div');
+      if (!container) return;
+      if (!previewTr.classList.contains('hidden')) {
+        previewTr.classList.add('hidden');
+        return;
+      }
+      container.innerHTML = '<p class="text-sm text-base-content/45">Loading…</p>';
+      try {
+        const data = await Api.get('/api/views/' + encodeURIComponent(name) + '/rows');
+        const rows = data.rows || [];
+        if (!rows.length) {
+          container.innerHTML = '<p class="text-sm text-base-content/45">View returned no rows.</p>';
+          previewTr.classList.remove('hidden');
+          return;
+        }
+        const cols = Object.keys(rows[0]);
+        let html = '<div class="overflow-x-auto rounded-lg border border-base-200"><table class="table table-xs">' +
+          '<thead><tr class="bg-base-200/70">' + cols.map((c) => '<th class="font-mono text-[11px]">' + escapeHtml(c) + '</th>').join('') + '</tr></thead><tbody>';
+        const shown = rows.slice(0, 50);
+        for (const row of shown) {
+          html += '<tr>' + cols.map((c) => {
+            const v = row[c];
+            const s = v == null ? '' : String(v);
+            const display = v == null ? '<span class="text-base-content/30">NULL</span>' : (s.length > 120 ? escapeHtml(s.slice(0, 120)) + '…' : escapeHtml(s));
+            return '<td class="max-w-xs truncate font-mono text-[12px]">' + display + '</td>';
+          }).join('') + '</tr>';
+        }
+        html += '</tbody></table></div>';
+        if (rows.length > shown.length) {
+          html += '<p class="mt-2 text-xs text-base-content/45">Showing first ' + shown.length + ' of ' + rows.length + ' row(s).</p>';
+        }
+        container.innerHTML = html;
+        previewTr.classList.remove('hidden');
+      } catch (e) {
+        container.innerHTML = '<p class="text-sm font-medium text-error">' + escapeHtml(e.message) + '</p>';
+        previewTr.classList.remove('hidden');
+      }
+    });
+  });
+
+  // ---- Drop view ----------------------------------------------------------
+
+  document.querySelectorAll('.view-drop').forEach((btn) => {
+    btn.addEventListener('click', async () => {
+      const name = btn.dataset.view;
+      if (!name) return;
+      if (!window.confirm('Drop view "' + name + '" permanently?')) return;
+      try {
+        const data = await Api.del('/api/views/' + encodeURIComponent(name));
+        UI.showToast(data.message || 'View dropped.', 'success');
+        window.location.reload();
+      } catch (e) {
+        UI.showError(e.message);
+      }
+    });
+  });
+})();

package/dist/routes/api.d.ts

@@ -0,0 +1,9 @@
+import type { Router } from 'express';
+import type { SqliteDatabase } from '../db/database';
+import type { Logger } from '../logger';
+interface ApiContext {
+    db: SqliteDatabase;
+    logger: Logger;
+}
+export declare function registerApi(router: Router, ctx: ApiContext): void;
+export {};