admindb 1.0.1

package/dist/public/js/designer.js

@@ -0,0 +1,205 @@
+/* Visual table designer: add column definitions one at a time, validate them,
+ * and preview the generated CREATE TABLE live. Create executes; Copy copies. */
+(function () {
+  'use strict';
+  const DESIGNER_TYPES = ['TEXT', 'INTEGER', 'REAL', 'BLOB', 'BOOLEAN', 'DATE', 'DATETIME'];
+  const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]*$/;
+
+  const columnsEl = document.getElementById('columns');
+  const errorBox = document.getElementById('designer-error');
+  const tableNameEl = document.getElementById('table-name');
+  const addBtn = document.getElementById('add-column');
+  const createBtn = document.getElementById('create-table');
+  const copyBtn = document.getElementById('copy-sql');
+  const previewBox = document.getElementById('sql-preview');
+  const previewCode = document.getElementById('preview-code');
+  const previewPlaceholder = document.getElementById('preview-placeholder');
+  const previewStatus = document.getElementById('preview-status');
+
+  const columnCache = {};
+  let fkTables = [];
+  let previewTimer = null;
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  async function loadColumns(table) {
+    if (columnCache[table]) return columnCache[table];
+    const info = await Api.get('/api/tables/' + encodeURIComponent(table) + '/info');
+    columnCache[table] = info.columns.map((c) => c.name);
+    return columnCache[table];
+  }
+
+  function addColumnRow() {
+    const row = document.createElement('div');
+    row.className = 'grid grid-cols-2 items-end gap-2.5 rounded-xl border border-base-300 bg-base-100 p-3 shadow-soft sm:grid-cols-12';
+    row.innerHTML = [
+      '<div class="col-span-2 sm:col-span-2"><label class="field-label">Name</label>',
+      '<input class="field-input col-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 col-type">' + DESIGNER_TYPES.map((t) => '<option>' + t + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK table</label>',
+      '<select class="field-select col-fk-table"><option value="">— none —</option>' +
+      fkTables.map((t) => '<option>' + escapeHtml(t) + '</option>').join('') + '</select></div>',
+      '<div class="col-span-1 sm:col-span-2"><label class="field-label">FK column</label>',
+      '<select class="field-select col-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 col-default" placeholder="0, CURRENT_TIMESTAMP" autocomplete="off" spellcheck="false"></div>',
+      '<div class="col-span-2 flex items-end justify-between gap-1 pb-0.5 sm:col-span-2">',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Primary key"><input type="checkbox" class="checkbox checkbox-primary checkbox-xs col-pk"><span class="text-[10px] font-semibold uppercase text-base-content/50">PK</span></label>',
+      '<label class="flex cursor-pointer flex-col items-center gap-1" title="Not null"><input type="checkbox" class="checkbox checkbox-xs col-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 col-unique"><span class="text-[10px] font-semibold uppercase text-base-content/50">UQ</span></label>',
+      '<button type="button" class="btn btn-ghost btn-xs text-error remove-col" title="Remove column">&times;</button>',
+      '</div>',
+    ].join('');
+    columnsEl.appendChild(row);
+
+    const fkTableSel = row.querySelector('.col-fk-table');
+    const fkColSel = row.querySelector('.col-fk-col');
+    fkTableSel.addEventListener('change', () => {
+      fkColSel.innerHTML = '<option value="">—</option>';
+      const target = fkTableSel.value;
+      if (!target) return;
+      loadColumns(target)
+        .then((cols) => {
+          fkColSel.innerHTML = '<option value="">—</option>' + cols.map((c) => '<option>' + escapeHtml(c) + '</option>').join('');
+        })
+        .catch(() => {});
+    });
+    row.querySelector('.remove-col').addEventListener('click', () => row.remove());
+
+    row.querySelectorAll('input, select').forEach((el) => {
+      el.addEventListener('input', schedulePreview);
+      el.addEventListener('change', schedulePreview);
+    });
+  }
+
+  function collectColumns() {
+    const cols = [];
+    document.querySelectorAll('#columns > div').forEach((row) => {
+      const name = row.querySelector('.col-name').value.trim();
+      if (!name) return;
+      const fkTable = row.querySelector('.col-fk-table').value;
+      const fkCol = row.querySelector('.col-fk-col').value;
+      cols.push({
+        name,
+        type: row.querySelector('.col-type').value,
+        primaryKey: row.querySelector('.col-pk').checked,
+        notNull: row.querySelector('.col-notnull').checked,
+        unique: row.querySelector('.col-unique').checked,
+        defaultValue: row.querySelector('.col-default').value.trim() || null,
+        foreignKey: fkTable && fkCol ? { table: fkTable, column: fkCol } : null,
+      });
+    });
+    return cols;
+  }
+
+  function validate() {
+    const name = tableNameEl.value.trim();
+    const cols = collectColumns();
+    if (!name) return 'Table name is required.';
+    if (!NAME_RE.test(name)) return 'Invalid table name: "' + name + '". Use letters, digits and underscores.';
+    if (!cols.length) return 'Add at least one column.';
+    let pkCount = 0;
+    const seen = {};
+    for (const c of cols) {
+      if (!NAME_RE.test(c.name)) return 'Invalid column name: "' + c.name + '".';
+      if (seen[c.name]) return 'Duplicate column name: "' + c.name + '".';
+      seen[c.name] = true;
+      if (c.primaryKey) pkCount += 1;
+      if (c.foreignKey && (!c.foreignKey.table || !c.foreignKey.column)) {
+        return 'Column "' + c.name + '" has an incomplete foreign key (choose both table and column).';
+      }
+    }
+    if (pkCount > 1) return 'At most one column can be a primary key.';
+    return null;
+  }
+
+  function showError(msg) {
+    errorBox.classList.remove('hidden');
+    errorBox.innerHTML = '<div class="alert alert-error shadow-lg"><span>' + escapeHtml(msg) + '</span></div>';
+  }
+
+  function schedulePreview() {
+    clearTimeout(previewTimer);
+    previewTimer = setTimeout(runPreview, 250);
+  }
+
+  async function runPreview() {
+    const err = validate();
+    if (err) {
+      errorBox.classList.add('hidden');
+      previewBox.classList.add('hidden');
+      previewPlaceholder.classList.remove('hidden');
+      if (previewStatus) previewStatus.textContent = 'fix validation errors…';
+      return;
+    }
+    errorBox.classList.add('hidden');
+    try {
+      const data = await Api.post('/api/tables/generate', {
+        name: tableNameEl.value.trim(),
+        columns: collectColumns(),
+      });
+      previewCode.textContent = data.sql;
+      previewBox.classList.remove('hidden');
+      previewPlaceholder.classList.add('hidden');
+      if (previewStatus) {
+        previewStatus.textContent = 'live preview · not executed';
+        previewStatus.className = 'text-[11px] font-medium text-accent';
+      }
+    } catch (e) {
+      previewBox.classList.add('hidden');
+      previewPlaceholder.classList.remove('hidden');
+      showError(e.message);
+    }
+  }
+
+  async function submit() {
+    errorBox.classList.add('hidden');
+    const err = validate();
+    if (err) {
+      showError(err);
+      return;
+    }
+    const body = { name: tableNameEl.value.trim(), columns: collectColumns() };
+    try {
+      const data = await Api.post('/api/tables', body);
+      UI.showToast(data.message || 'Table created.', 'success');
+      setTimeout(() => {
+        window.location.href = Api.basePath + '/tables/' + encodeURIComponent(body.name);
+      }, 500);
+    } catch (e) {
+      showError(e.message);
+    }
+  }
+
+  async function init() {
+    try {
+      const tables = await Api.get('/api/tables');
+      fkTables = tables.map((t) => t.name).filter((n) => n.charAt(0) !== '_');
+    } catch (e) {
+      fkTables = [];
+    }
+    addColumnRow();
+    addColumnRow();
+    tableNameEl.addEventListener('input', schedulePreview);
+  }
+
+  if (addBtn) addBtn.addEventListener('click', addColumnRow);
+  if (createBtn) createBtn.addEventListener('click', submit);
+  if (copyBtn) {
+    copyBtn.addEventListener('click', () => {
+      const text = previewCode.textContent || '';
+      if (!text) {
+        UI.showError('Nothing to copy yet.');
+        return;
+      }
+      navigator.clipboard.writeText(text)
+        .then(() => UI.showToast('SQL copied to clipboard.', 'success'))
+        .catch(() => UI.showError('Could not copy.'));
+    });
+  }
+
+  init();
+})();

package/dist/public/js/forms.js

@@ -0,0 +1,244 @@
+/* Dynamic insert/edit row form.
+ * The form is built entirely from column metadata returned by the API, so the
+ * same page handles every table. Supports run mode and "get query" preview. */
+(function () {
+  'use strict';
+  const cfgEl = document.getElementById('form-config');
+  if (!cfgEl) return;
+
+  const cfg = JSON.parse(cfgEl.textContent);
+  const form = document.getElementById('row-fields');
+  const errorBox = document.getElementById('form-error');
+  const sqlBox = document.getElementById('generated-sql');
+  const sqlCode = document.getElementById('generated-sql-code');
+  const submitBtn = document.getElementById('row-submit');
+  const generateBtn = document.getElementById('row-generate');
+  const copyBtn = document.getElementById('copy-sql');
+  const t = encodeURIComponent(cfg.table);
+
+  let info = null;
+  let record = null;
+  let fkOptions = {};
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function toLocalInput(v) {
+    const m = String(v).match(/^(\d{4}-\d{2}-\d{2})[ T](\d{2}):(\d{2})/);
+    if (m) return m[1] + 'T' + m[2] + ':' + m[3];
+    return v;
+  }
+
+  function toLocalNow() {
+    const d = new Date();
+    const p = (n) => String(n).padStart(2, '0');
+    return d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate()) + 'T' + p(d.getHours()) + ':' + p(d.getMinutes());
+  }
+
+  /**
+   * Convert a column's raw default expression (dflt_value) into a form-friendly
+   * value. Handles literals we can read safely; anything complex returns null
+   * (the DB applies the real default when the field is left empty).
+   */
+  function defaultToValue(col, dflt) {
+    if (dflt === null || dflt === undefined) return null;
+    const s = String(dflt).trim();
+    if (s === '' || /^null$/i.test(s)) return null;
+
+    const type = (col.type || '').toUpperCase();
+
+    // Single-quoted string literal, e.g. 'N/A', 'user'
+    const str = s.match(/^'(.*)'$/s);
+    if (str) return str[1].replace(/''/g, "'");
+
+    // Numeric literal, e.g. 0, 42, 3.14
+    if (/^[-+]?\d+(\.\d+)?$/.test(s)) return Number(s);
+
+    // Boolean literal
+    if (/^(true|false)$/i.test(s)) return /^true$/i.test(s);
+
+    // BOOLEAN columns stored as 0/1
+    if (type === 'BOOLEAN') {
+      if (s === '1' || /^true$/i.test(s)) return 1;
+      if (s === '0' || /^false$/i.test(s)) return 0;
+    }
+
+    // current-timestamp style defaults → "now" for date/datetime columns
+    if ((type === 'DATE' || type === 'DATETIME') && /current_timestamp|now\s*\(|datetime\s*\(|date\s*\(/i.test(s)) {
+      return toLocalNow();
+    }
+
+    return null;
+  }
+
+  /** Value to pre-fill a control with: edit → the record's value; insert → the column default. */
+  function initialValue(col) {
+    if (cfg.mode === 'edit' && record) return record[col.name];
+    if (cfg.mode === 'insert') return defaultToValue(col, col.dflt_value);
+    return null;
+  }
+
+  function isTruthy(v) {
+    return v === 1 || v === true || v === '1' || v === 'true';
+  }
+
+  function renderField(col) {
+    const isPk = info.primaryKey.indexOf(col.name) !== -1;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'space-y-1.5';
+
+    const label = document.createElement('label');
+    label.className = 'field-label';
+    label.innerHTML =
+      '<span>' + escapeHtml(col.name) + '</span>' +
+      (col.notnull ? '<span class="text-error">*</span>' : '') +
+      (isPk ? '<span class="chip chip-pk">PK</span>' : '') +
+      (col.type ? '<span class="chip chip-type">' + escapeHtml(col.type) + '</span>' : '') +
+      (cfg.mode === 'insert' && col.dflt_value ? '<span class="chip chip-type">default</span>' : '');
+    wrapper.appendChild(label);
+
+    const fk = info.foreignKeys.find((f) => f.from === col.name);
+    const type = (col.type || '').toUpperCase();
+    const isBool = type === 'BOOLEAN';
+    const isNum = type.startsWith('INTEGER') || type === 'REAL';
+    const isBlob = type === 'BLOB';
+    const isDate = type === 'DATE' || type === 'DATETIME';
+    const iv = initialValue(col);
+
+    let control;
+    if (isBool) {
+      const boolWrap = document.createElement('label');
+      boolWrap.className = 'flex cursor-pointer items-center gap-2';
+      control = document.createElement('input');
+      control.type = 'checkbox';
+      control.className = 'field-check';
+      control.dataset.column = col.name;
+      if (isTruthy(iv)) control.checked = true;
+      const span = document.createElement('span');
+      span.className = 'text-sm text-base-content/60';
+      span.textContent = 'Enabled';
+      boolWrap.appendChild(control);
+      boolWrap.appendChild(span);
+      wrapper.appendChild(boolWrap);
+      return wrapper;
+    } else if (fk) {
+      control = document.createElement('select');
+      control.className = 'field-select';
+      control.dataset.column = col.name;
+      const opts = fkOptions[col.name] || [];
+      const empty = document.createElement('option');
+      empty.value = '';
+      empty.textContent = '(not set)';
+      control.appendChild(empty);
+      opts.forEach((o) => {
+        const opt = document.createElement('option');
+        opt.value = String(o.value);
+        opt.textContent = o.label === '' ? String(o.value) : o.label;
+        if (iv != null && String(iv) === String(o.value)) opt.selected = true;
+        control.appendChild(opt);
+      });
+    } else if (isDate) {
+      control = document.createElement('input');
+      control.type = 'datetime-local';
+      control.className = 'field-input';
+      control.dataset.column = col.name;
+      if (iv != null) control.value = toLocalInput(String(iv));
+    } else if (isNum) {
+      control = document.createElement('input');
+      control.type = 'number';
+      control.step = type === 'REAL' ? 'any' : '1';
+      control.className = 'field-input';
+      control.dataset.column = col.name;
+      if (iv != null) control.value = String(iv);
+    } else {
+      control = document.createElement('input');
+      control.type = 'text';
+      control.className = 'field-input';
+      control.placeholder = isBlob ? '0x… hex or text' : '';
+      control.dataset.column = col.name;
+      if (iv != null) control.value = String(iv);
+    }
+    if (isPk && cfg.mode === 'edit') control.disabled = true;
+    wrapper.appendChild(control);
+    return wrapper;
+  }
+
+  function render() {
+    form.innerHTML = '';
+    info.columns.forEach((col) => form.appendChild(renderField(col)));
+  }
+
+  function collect() {
+    const values = {};
+    form.querySelectorAll('[data-column]').forEach((el) => {
+      const col = el.dataset.column;
+      if (el.type === 'checkbox') values[col] = el.checked ? 'true' : '';
+      else values[col] = el.value;
+    });
+    return values;
+  }
+
+  function showSql(sql) {
+    sqlCode.textContent = sql;
+    sqlBox.classList.remove('hidden');
+    sqlBox.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
+
+  async function submit(runMode) {
+    errorBox.classList.add('hidden');
+    const values = collect();
+    const edit = cfg.mode === 'edit';
+    let path;
+    if (edit) {
+      path = '/api/tables/' + t + '/row/' + encodeURIComponent(cfg.pk) + (runMode ? '' : '/generate');
+    } else {
+      path = '/api/tables/' + t + '/rows' + (runMode ? '' : '/generate');
+    }
+    const method = edit ? 'PUT' : 'POST';
+    try {
+      const data = await Api.request(method, path, { values });
+      if (runMode) {
+        UI.showToast(data.message || 'Saved.', 'success');
+        setTimeout(() => {
+          window.location.href = Api.basePath + '/tables/' + encodeURIComponent(cfg.table);
+        }, 500);
+      } else {
+        showSql(data.sql);
+      }
+    } catch (e) {
+      errorBox.classList.remove('hidden');
+      errorBox.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(e.message) + '</span></div>';
+    }
+  }
+
+  async function init() {
+    try {
+      info = await Api.get('/api/tables/' + t + '/info');
+      if (cfg.mode === 'edit') {
+        record = await Api.get('/api/tables/' + t + '/row/' + encodeURIComponent(cfg.pk));
+      }
+      try {
+        fkOptions = await Api.get('/api/tables/' + t + '/fk-options');
+      } catch (e) {
+        fkOptions = {};
+      }
+      render();
+    } catch (e) {
+      errorBox.classList.remove('hidden');
+      errorBox.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(e.message) + '</span></div>';
+    }
+  }
+
+  if (submitBtn) submitBtn.addEventListener('click', () => submit(true));
+  if (generateBtn) generateBtn.addEventListener('click', () => submit(false));
+  if (copyBtn) {
+    copyBtn.addEventListener('click', () => {
+      navigator.clipboard.writeText(sqlCode.textContent)
+        .then(() => UI.showToast('Copied to clipboard.', 'success'))
+        .catch(() => UI.showError('Could not copy.'));
+    });
+  }
+
+  init();
+})();

package/dist/public/js/query.js

@@ -0,0 +1,232 @@
+/* Query editor: run arbitrary SQL, save/load named queries, render results. */
+(function () {
+  'use strict';
+  const editor = document.getElementById('query-sql');
+  const gutter = document.getElementById('query-gutter');
+  const runBtn = document.getElementById('run-query');
+  const messageEl = document.getElementById('query-message');
+  const resultEl = document.getElementById('query-result');
+  const headEl = document.getElementById('query-result-head');
+  const bodyEl = document.getElementById('query-result-body');
+  const resultSummary = document.getElementById('result-summary');
+  const saveBtns = Array.prototype.slice.call(document.querySelectorAll('#save-query, #save-query-inline'));
+  const saveName = document.getElementById('save-query-name');
+  const selectEl = document.getElementById('saved-query-select');
+  const deleteBtn = document.getElementById('delete-query');
+  const exportCsvBtn = document.getElementById('export-csv');
+  const exportJsonBtn = document.getElementById('export-json');
+
+  let queriesCache = [];
+
+  function setExportEnabled(enabled) {
+    if (exportCsvBtn) exportCsvBtn.disabled = !enabled;
+    if (exportJsonBtn) exportJsonBtn.disabled = !enabled;
+  }
+
+  // ---- Export results ------------------------------------------------------
+
+  async function exportResults(format) {
+    const sql = editor.value.trim();
+    if (!sql) return;
+    try {
+      const res = await fetch(Api.url('/api/query/export'), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sql, format }),
+      });
+      if (!res.ok) {
+        let msg = 'Export failed (' + res.status + ').';
+        try {
+          const data = await res.json();
+          if (data && data.error) msg = data.error;
+        } catch (e) { /* ignore */ }
+        throw new Error(msg);
+      }
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      const stamp = new Date().toISOString().replace(/[:.]/g, '-');
+      a.href = url;
+      a.download = 'query-' + stamp + '.' + format;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+      UI.showToast('Exported as ' + format.toUpperCase() + '.', 'success');
+    } catch (e) {
+      setMessage(e.message, 'error');
+    }
+  }
+
+  if (exportCsvBtn) exportCsvBtn.addEventListener('click', () => exportResults('csv'));
+  if (exportJsonBtn) exportJsonBtn.addEventListener('click', () => exportResults('json'));
+
+  function escapeHtml(s) {
+    return (window.UI && UI.escapeHtml) ? UI.escapeHtml(s) : String(s == null ? '' : s);
+  }
+
+  function setMessage(text, type) {
+    if (!text) {
+      messageEl.innerHTML = '';
+      return;
+    }
+    const palette = {
+      error: 'border-error/40 bg-error/10 text-error',
+      success: 'border-success/40 bg-success/10 text-success',
+      info: 'border-info/40 bg-info/10 text-info',
+      warning: 'border-warning/40 bg-warning/10 text-warning',
+    };
+    messageEl.innerHTML = '<div class="flex items-start gap-2.5 rounded-xl border px-4 py-3 text-sm font-medium ' +
+      (palette[type] || palette.info) + '"><span>' + escapeHtml(text) + '</span></div>';
+  }
+
+  function renderTable(columns, rows) {
+    headEl.innerHTML = '<tr>' + columns.map((c) => '<th class="whitespace-nowrap font-semibold"><span class="font-mono normal-case">' + escapeHtml(c) + '</span></th>').join('') + '</tr>';
+    if (!rows.length) {
+      bodyEl.innerHTML = '<tr><td colspan="' + Math.max(1, columns.length) + '" class="py-10 text-center text-base-content/45">No rows returned.</td></tr>';
+      return;
+    }
+    bodyEl.innerHTML = rows.map((row) =>
+      '<tr class="hover:bg-primary/[0.04]">' + columns.map((c) => {
+        const v = row[c];
+        if (v === null || v === undefined) {
+          return '<td class="align-middle"><span class="chip chip-null">NULL</span></td>';
+        }
+        const s = String(v);
+        const short = s.length > 200 ? s.slice(0, 200) + '…' : s;
+        return '<td class="max-w-xs truncate align-middle font-mono text-[13px]" title="' + escapeHtml(s) + '">' + escapeHtml(short) + '</td>';
+      }).join('') + '</tr>',
+    ).join('');
+  }
+
+  function renderMessageRow(text, kindLabel) {
+    headEl.innerHTML = '';
+    bodyEl.innerHTML = '<tr><td class="px-4 py-8 text-center"><p class="text-2xl font-extrabold text-primary">' +
+      escapeHtml(text) + '</p><p class="mt-1 text-sm text-base-content/45">' + escapeHtml(kindLabel) + '</p></td></tr>';
+  }
+
+  function setSummary(text) {
+    if (resultSummary) resultSummary.textContent = text;
+  }
+
+  async function run() {
+    const sql = editor.value.trim();
+    if (!sql) {
+      setMessage('Enter a SQL statement first.', 'warning');
+      return;
+    }
+    messageEl.innerHTML = '';
+    resultEl.classList.add('hidden');
+    setExportEnabled(false);
+    const started = performance.now();
+    try {
+      const data = await Api.post('/api/query', { sql });
+      const elapsed = Math.max(1, Math.round(performance.now() - started));
+      resultEl.classList.remove('hidden');
+      if (data.kind === 'count') {
+        renderMessageRow(String(data.count), 'count');
+        setSummary('Count query · ' + elapsed + 'ms');
+      } else if (data.kind === 'select') {
+        renderTable(data.columns, data.rows);
+        setSummary(data.rows.length + ' row(s) · ' + elapsed + 'ms');
+        setExportEnabled(true);
+      } else {
+        renderMessageRow(data.message || 'Statement executed.', 'write');
+        setSummary(data.changes != null ? data.changes + ' row(s) affected · ' + elapsed + 'ms' : elapsed + 'ms');
+      }
+    } catch (e) {
+      resultEl.classList.add('hidden');
+      setMessage(e.message, 'error');
+    }
+  }
+
+  // ---- Line numbers ------------------------------------------------------
+
+  function updateGutter() {
+    if (!gutter) 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);
+    editor.addEventListener('keydown', (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+        e.preventDefault();
+        run();
+      }
+    });
+    updateGutter();
+  }
+
+  // ---- Saved queries -----------------------------------------------------
+
+  async function refreshQueries(selectName) {
+    try {
+      queriesCache = await Api.get('/api/queries');
+    } catch (e) {
+      queriesCache = [];
+    }
+    selectEl.innerHTML = '<option value="">— select a saved query —</option>' + queriesCache.map((q) =>
+      '<option value="' + q.id + '"' + (selectName && q.name === selectName ? ' selected' : '') + '>' + escapeHtml(q.name) + '</option>',
+    ).join('');
+    deleteBtn.disabled = true;
+  }
+
+  async function saveQuery() {
+    const sql = editor.value.trim();
+    const name = saveName.value.trim();
+    if (!sql) {
+      setMessage('Write some SQL before saving.', 'warning');
+      return;
+    }
+    if (!name) {
+      setMessage('Give the query a name.', 'warning');
+      return;
+    }
+    try {
+      await Api.post('/api/queries', { name, sql });
+      UI.showToast('Query saved.', 'success');
+      await refreshQueries(name);
+    } catch (e) {
+      setMessage(e.message, 'error');
+    }
+  }
+
+  async function deleteQuery() {
+    const id = selectEl.value;
+    if (!id) return;
+    if (!window.confirm('Delete this saved query?')) return;
+    try {
+      await Api.del('/api/queries/' + id);
+      UI.showToast('Query deleted.', 'success');
+      await refreshQueries();
+    } catch (e) {
+      setMessage(e.message, 'error');
+    }
+  }
+
+  if (runBtn) runBtn.addEventListener('click', run);
+  saveBtns.forEach((btn) => btn.addEventListener('click', saveQuery));
+  if (selectEl) {
+    selectEl.addEventListener('change', () => {
+      const id = selectEl.value;
+      deleteBtn.disabled = !id;
+      if (!id) return;
+      const q = queriesCache.find((x) => String(x.id) === String(id));
+      if (q) {
+        editor.value = q.sql;
+        saveName.value = q.name;
+        updateGutter();
+        setMessage('Loaded "' + q.name + '".', 'info');
+      }
+    });
+  }
+  if (deleteBtn) deleteBtn.addEventListener('click', deleteQuery);
+})();