pgkiln 0.49.0 → 0.50.0

package/public/code-editor.js

@@ -15,6 +15,8 @@
 //   - "Check" plans the SQL like the Advisor (POST /builder/code/check)
 //   - screen readers keep the plain textarea; the list is announced through
 //     aria-activedescendant and a polite live region
+//   - (sprint 108) read-only code, <pre data-code-view="sql|plpgsql|json|html">, is
+//     highlighted with the same lexer and colours (DDL, generated SQL)
 //
 // Strict CSP: no inline styles; geometry is set through the CSSOM. Suggestions
 // and highlighted text are built as text nodes, never parsed as HTML.
@@ -437,15 +439,20 @@
       gutter.setAttribute('aria-hidden', 'true');
       const nums = document.createElement('div');
       nums.className = 'ce-nums';
-      gutter.append(nums);
+      // the caret's line: a band behind the text, its number over the gutter's
+      const curNum = document.createElement('div');
+      curNum.className = 'ce-cur-num';
+      gutter.append(nums, curNum);
       const main = document.createElement('div');
       main.className = 'ce-main';
       const hl = document.createElement('div');
       hl.className = 'ce-hl';
       hl.setAttribute('aria-hidden', 'true');
+      const cur = document.createElement('div');
+      cur.className = 'ce-cur';
       const inner = document.createElement('pre');
       inner.className = 'ce-code';
-      hl.append(inner);
+      hl.append(cur, inner);
       ta.parentNode.insertBefore(wrap, ta);
       main.append(hl, ta);
       wrap.append(gutter, main);
@@ -502,7 +509,7 @@
       ta.setAttribute('aria-autocomplete', 'list');
       ta.setAttribute('aria-haspopup', 'listbox');
       ta.setAttribute('aria-controls', list.id);
-      Object.assign(this, { wrap, gutter, nums, main, hl, inner, list, bar, langEl: lang, hint, pos, msg, check, live, suggest });
+      Object.assign(this, { wrap, gutter, nums, cur, curNum, main, hl, inner, list, bar, langEl: lang, hint, pos, msg, check, live, suggest });
       this.applyLang();
     }
 
@@ -661,9 +668,27 @@
         this.digits = digits;
         this.gutter.style.setProperty('--ce-digits', String(Math.max(2, digits)));
       }
+      this.placeLine();
       if (this.pop) this.place();
     }
 
+    /** The current-line band and number: on the caret's line; hidden while a selection spans lines. */
+    placeLine() {
+      const ta = this.ta;
+      const lines = this.lineStarts;
+      const a = lowerBound(lines, ta.selectionStart + 1);
+      const b = lowerBound(lines, ta.selectionEnd + 1);
+      const hide = a !== b;
+      this.cur.hidden = hide;
+      this.curNum.hidden = hide;
+      if (hide) return;
+      const { lh, padTop } = this.metrics();
+      const y = padTop + (a - 1) * lh - ta.scrollTop;
+      this.cur.style.transform = `translateY(${y}px)`;
+      this.curNum.style.transform = `translateY(${y}px)`;
+      this.curNum.textContent = String(a);
+    }
+
     tokenAt(off) {
       this.sync();
       const { T, S, E } = this.toks;
@@ -703,6 +728,7 @@
       this.sync();
       if (this.pop && this.ta.selectionStart !== this.ta.selectionEnd) this.close();
       if (this.updateMatch()) this.schedule(true);
+      else this.placeLine();
       const c = this.ta.selectionStart;
       const line = lowerBound(this.lineStarts, c + 1);
       this.pos.textContent = `Ln ${line}, Col ${c - this.lineStarts[line - 1] + 1}`;
@@ -997,12 +1023,41 @@
     return lo;
   }
 
+  /** Highlight a read-only <pre data-code-view>: its text, as spans (text nodes only). Long ones stay plain. */
+  function colorize(pre) {
+    const lang = pre.dataset.codeView in LANG_LABEL ? pre.dataset.codeView : 'text';
+    pre.classList.add('ce-view');
+    const text = pre.textContent;
+    if (lang === 'text' || text.length > 200000) return;
+    const { T, S, E } = lex(lang, text);
+    const frag = document.createDocumentFragment();
+    let pos = 0;
+    for (let k = 0; k < T.length; k++) {
+      const st = Math.max(S[k], pos);
+      if (E[k] <= st) continue;
+      if (st > pos) frag.append(text.slice(pos, st));
+      const span = document.createElement('span');
+      span.className = `t-${T[k]}`;
+      span.textContent = text.slice(st, E[k]);
+      frag.append(span);
+      pos = E[k];
+    }
+    if (pos < text.length) frag.append(text.slice(pos));
+    pre.replaceChildren(frag);
+  }
+
   const editors = new WeakMap();
+  const viewed = new WeakSet();
   function enhance(root) {
     for (const ta of (root || document).querySelectorAll('textarea[data-code]')) {
       if (editors.has(ta) || ta.closest('.ce')) continue;
       editors.set(ta, new Editor(ta));
     }
+    for (const pre of (root || document).querySelectorAll('pre[data-code-view]')) {
+      if (viewed.has(pre)) continue;
+      viewed.add(pre);
+      colorize(pre);
+    }
   }
   window.pgkilnCodeEditor = { enhance, editorOf: (ta) => editors.get(ta) };
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', () => enhance());

package/public/data-modeler.css

@@ -8,19 +8,20 @@
 .dm-toolbar .btn[disabled] { opacity: 0.5; }
 .dm-status { min-width: 0; }
 .dm-stage { position: relative; }
-.dm-canvas { overflow: auto; max-width: 100%; height: 65vh; min-height: 18rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
+.dm-canvas { overflow: auto; max-width: 100%; height: 65vh; min-height: 18rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--canvas, var(--bg)); box-shadow: var(--shadow-xs, none); }
 .dm-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .dm-svg { display: block; }
-.dm-svg .dm-bg { fill: var(--bg); }
-.dm-svg .dm-frame { fill: var(--surface); stroke: var(--border); }
-.dm-svg .dm-view .dm-frame { fill: var(--surface-2); }
-.dm-svg .dm-head { fill: var(--accent-soft); stroke: var(--border); }
-.dm-svg .dm-title { fill: var(--text); }
-.dm-svg .dm-col { fill: var(--text); }
-.dm-svg .dm-type, .dm-svg .dm-kind, .dm-svg .dm-more { fill: var(--muted); }
-.dm-svg .dm-key { fill: var(--gold, #b45309); }
-.dm-svg .dm-line, .dm-svg .dm-end { stroke: var(--muted); }
-.dm-svg .dm-opt { fill: var(--bg); stroke: var(--muted); }
+/* the boxes and lines: no .dm-svg ancestor in the selectors, so the mini-map's <use> copy (a shadow tree) is themed too */
+.dm-svg .dm-bg { fill: var(--canvas, var(--bg)); }
+.dm-frame { fill: var(--block, var(--surface)); stroke: var(--border-strong, var(--border)); }
+.dm-view .dm-frame { fill: var(--surface-2); }
+path.dm-head { fill: var(--accent-soft); stroke: var(--border-strong, var(--border)); }
+.dm-title { fill: var(--text); }
+.dm-col { fill: var(--text); }
+:is(.dm-type, .dm-kind, .dm-more) { fill: var(--muted); }
+.dm-key { fill: var(--gold, #b45309); }
+:is(.dm-line, .dm-end) { stroke: var(--muted); }
+.dm-opt { fill: var(--canvas, var(--bg)); stroke: var(--muted); }
 .dm-svg .dm-fk:hover .dm-line, .dm-svg .dm-fk:hover .dm-end { stroke: var(--accent); stroke-width: 2.5; }
 .dm-svg .dm-link:hover .dm-title, .dm-svg .dm-link:focus .dm-title { fill: var(--accent); text-decoration: underline; }
 .dm-live .dm-box { cursor: grab; touch-action: none; }
@@ -29,9 +30,9 @@
 .dm-svg .dm-box:focus-visible .dm-frame { stroke: var(--accent); stroke-width: 2.5; }
 .dm-svg .dm-dragging .dm-frame { stroke: var(--accent); }
 .dm-svg text { user-select: none; }
-.dm-minimap { position: absolute; right: 12px; bottom: 12px; width: 200px; height: 140px; border: 1px solid var(--border); border-radius: var(--radius);
-  background: var(--surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); cursor: pointer; touch-action: none; }
-.dm-minimap-bg { fill: var(--surface); }
+.dm-minimap { position: absolute; right: 12px; bottom: 12px; width: 200px; height: 140px; border: 1px solid var(--border-strong, var(--border)); border-radius: var(--radius);
+  background: var(--canvas, var(--surface)); box-shadow: var(--shadow-md, 0 2px 8px rgb(0 0 0 / 20%)); cursor: pointer; touch-action: none; overflow: hidden; }
+.dm-minimap-bg { fill: var(--canvas, var(--surface)); }
 .dm-minimap-view { fill: var(--accent); fill-opacity: 0.15; stroke: var(--accent); stroke-width: 4; vector-effect: non-scaling-stroke; }
 .dm-legend { margin: 6px 0 12px; }
 .dm-search-row { display: flex; gap: 6px; flex-wrap: wrap; }
@@ -54,3 +55,5 @@
   .dm-svg { max-width: 100%; height: auto; }
   .dm-dict-table { break-inside: avoid-page; }
 }
+/* sprint 108: the Mini-map toggle shows that it is on */
+.dm-toolbar .btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

package/public/worksheet.css

@@ -60,8 +60,8 @@
 .ws-grid .null { color: var(--muted); font-style: italic; }
 .ws-log { margin: 0; padding: 8px; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 12.5px; line-height: 1.45; white-space: pre; overflow: auto; }
 .ws-log-sql { color: var(--muted); }
-.ws-log-ok { color: #2f7d32; font-weight: 600; }
-.ws-log-err { color: #c0392b; white-space: pre-wrap; }
+.ws-log-ok { color: var(--success); font-weight: 600; }
+.ws-log-err { color: var(--danger); white-space: pre-wrap; }
 .ws-log-warn { color: var(--warn); white-space: pre-wrap; }
 .ws-notices, .ws-history { list-style: none; margin: 0; padding: 0; font-size: 13px; }
 .ws-notices li, .ws-history li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); min-width: 0; }
@@ -72,7 +72,7 @@
 .ws-status { display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-top: 1px solid var(--border); background: var(--surface-2); font-size: 12.5px; min-width: 0; }
 .ws-status .icon { width: 13px; height: 13px; vertical-align: -2px; }
 .ws-count { color: var(--muted); white-space: nowrap; }
-.ws-count.is-err { color: #c0392b; }
+.ws-count.is-err { color: var(--danger); }
 .ws-count.is-warn { color: var(--warn); }
 .ws-last { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ws-time { margin-left: auto; }
@@ -156,8 +156,8 @@ th[aria-sort=descending] .ws-sort::after { content: ' ▼'; font-size: 0.75em; }
 .ws-hist-bar { display: flex; gap: 6px; margin-bottom: 6px; }
 .ws-hist-bar input { flex: 1; min-width: 0; }
 .ws-hist-icon .icon { width: 14px; height: 14px; }
-.ws-hist-icon.is-ok { color: #2f7d32; }
-.ws-hist-icon.is-err { color: #c0392b; }
+.ws-hist-icon.is-ok { color: var(--success); }
+.ws-hist-icon.is-err { color: var(--danger); }
 .ws-history li { align-items: center; }
 .ws-history .btn { flex: none; }
 @media (max-width: 640px) { .ws-hist-meta { display: none; } }
@@ -166,8 +166,8 @@ th[aria-sort=descending] .ws-sort::after { content: ' ▼'; font-size: 0.75em; }
 .ws-wtabs { display: none; align-items: stretch; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--border); background: var(--surface-2); flex: none; }
 .js .ws-wtabs { display: flex; }
 .ws-wtab { display: flex; align-items: center; border-right: 1px solid var(--border); }
-.ws-wtab [role=tab] { border: 0; background: none; color: var(--muted); padding: 5px 4px 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
-.ws-wtab [role=tab][aria-selected=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
+.ws-wtab [data-ws-wtab] { border: 0; background: none; color: var(--muted); padding: 5px 4px 5px 10px; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; }
+.ws-wtab [data-ws-wtab][aria-current=true] { color: var(--text); box-shadow: inset 0 -2px 0 var(--hot); }
 .ws-wtab-close, .ws-wtab-new { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 8px; font-size: 14px; line-height: 1; }
 .ws-wtab-close:hover, .ws-wtab-new:hover { color: var(--text); }
 .ws-file > summary { list-style: none; max-width: 14rem; }
@@ -291,3 +291,10 @@ details.menu.obj-menu > summary::before, details.menu.obj-menu > summary::after
 .ch-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; min-width: 0; }
 .ch-card h2 { font-size: 14px; margin: 0 0 6px; }
 .ch-edit { max-width: 48rem; margin-top: 16px; }
+
+/* (sprint 107) transaction mode: Autocommit / Transaction, the badge, Commit and Rollback */
+.ws-txn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
+.ws-txn-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); max-width: 22rem; overflow-wrap: anywhere; }
+.ws-txn-badge[data-state="open"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); font-weight: 600; }
+.ws-txn-badge[data-state="aborted"] { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); font-weight: 600; }
+.ws-txn-alert { margin: 6px 8px; }

package/public/worksheet.js

@@ -13,6 +13,9 @@
 //   - (sprint 93) worksheets as tabs kept in this browser (unsaved text survives a reload), saved as SQL Scripts
 //     (Ctrl+S), the Files list; bind and substitution values in a dialog; Format (Ctrl+F7), Convert case (Ctrl+B),
 //     find and replace (Ctrl+F, Ctrl+H), go to line (Ctrl+G), comment lines (Ctrl+/), Help (F1)
+//   - (sprint 107) transaction mode per worksheet tab: Autocommit / Transaction, Commit and Rollback, a badge with the
+//     server's real state (fetched again after a reload and a tab switch, and when the idle timeout is due); leaving the
+//     page with an open transaction asks first, closing the tab or switching to Autocommit rolls it back
 // Strict CSP: no inline styles; sizes are set through the CSSOM.
 (() => {
   'use strict';
@@ -266,8 +269,8 @@
       wrap.className = 'ws-wtab';
       const b = document.createElement('button');
       b.type = 'button';
-      b.setAttribute('role', 'tab');
-      b.setAttribute('aria-selected', String(t === cur));
+      // (sprint 108) buttons in a group, the open one aria-current: a tablist may hold only tabs, not the close buttons
+      if (t === cur) b.setAttribute('aria-current', 'true');
       b.dataset.wsWtab = t.key;
       b.textContent = `${t.name}${dirty(t) ? '*' : ''}`;
       b.title = t.scriptId ? `Script “${t.name}”${dirty(t) ? ' (unsaved changes)' : ''}` : 'Not saved as a script';
@@ -288,11 +291,15 @@
     ta.value = t.text;
     ta.dispatchEvent(new Event('input', { bubbles: true }));
     drawTabs();
+    txnTabChanged();
     ta.focus();
   };
   const newTab = () => switchTo(add({ key: newKey(), name: untitled(), scriptId: null, text: '', saved: '' }));
   const closeTab = (t) => {
-    if (dirty(t) && t.text.trim() && !window.confirm(`Close “${t.name}” without saving?`)) return;
+    const txnOpen = t === cur ? txnBox.dataset.state !== 'none' : !!t.txnOpen;
+    if (txnOpen && !window.confirm(`“${t.name}” has an open transaction. Close it and roll the transaction back?`)) return;
+    if (!txnOpen && dirty(t) && t.text.trim() && !window.confirm(`Close “${t.name}” without saving?`)) return;
+    if (t.txn) txnPost(t.key, 'rollback'); // the server knows best whether one is open
     const i = book.tabs.indexOf(t);
     book.tabs.splice(i, 1);
     if (t === cur) {
@@ -340,6 +347,111 @@
   form.querySelector('.ws-nav-switch').addEventListener('click', (e) => { const b = e.target.closest('[data-ws-navtab]'); if (b) navTab(b.dataset.wsNavtab); });
   navTab(location.hash === '#ws-files' ? 'files' : 'objects');
 
+  // ------------------------------------------------------------ (sprint 107) transaction mode
+  function txnTabChanged() {
+    modeSel.value = cur.txn ? 'on' : '';
+    txnApply({ state: 'none', statements: 0, startedMs: null, note: null });
+    txnFetch();
+  }
+  const txnBox = form.querySelector('[data-ws-txn]');
+  const modeSel = txnBox.querySelector('[data-ws-txn-mode]');
+  const badge = txnBox.querySelector('[data-ws-txn-badge]');
+  const commitBtn = txnBox.querySelector('[data-ws-txn-commit]');
+  const rollbackBtn = txnBox.querySelector('[data-ws-txn-rollback]');
+  const commitNote = form.querySelector('[data-ws-commit-note]');
+  const idleSeconds = Number(txnBox.dataset.idle) || 300;
+  const idleWords = idleSeconds % 60 ? `${idleSeconds} seconds` : `${idleSeconds / 60} minute${idleSeconds === 60 ? '' : 's'}`;
+  let txnInfo = { state: txnBox.dataset.state, statements: Number(txnBox.dataset.statements) || 0, startedMs: Number(txnBox.dataset.started) || null,
+    lastMs: Number(txnBox.dataset.last) || null, note: txnBox.dataset.note || null };
+  let clockSkew = Date.now() - (Number(txnBox.dataset.now) || Date.now());
+  let txnTimer = 0;
+  const badgeText = (i) => {
+    if (i.state === 'none') return i.note || 'No open transaction';
+    const min = i.startedMs ? Math.floor((Date.now() - clockSkew - i.startedMs) / 60000) : 0;
+    return `${i.state === 'aborted' ? 'Transaction failed' : 'Transaction open'} · ${i.statements} statement${i.statements === 1 ? '' : 's'} · ${min < 1 ? 'under a minute' : `${min} min`}`;
+  };
+  const txnApply = (i) => {
+    txnInfo = i;
+    const on = modeSel.value === 'on';
+    txnBox.dataset.state = i.state;
+    badge.dataset.state = i.state;
+    badge.textContent = badgeText(i);
+    badge.hidden = !on && i.state === 'none' && !i.note;
+    commitBtn.hidden = rollbackBtn.hidden = !on && i.state === 'none';
+    commitBtn.disabled = i.state !== 'open';
+    rollbackBtn.disabled = i.state === 'none';
+    commitNote.textContent = on
+      ? `The statements stay in one transaction until Commit or Rollback; it is rolled back after ${idleWords} without a run.`
+      : 'Each statement commits on its own.';
+    cur.txn = on;
+    cur.txnOpen = i.state !== 'none';
+    persist();
+    clearTimeout(txnTimer);
+    if (i.state !== 'none') {
+      // the age once a minute; the server again when the idle timeout is due
+      const due = i.lastMs ? i.lastMs + idleSeconds * 1000 + 2000 - (Date.now() - clockSkew) : 60000;
+      txnTimer = setTimeout(() => (due <= 60000 ? txnFetch() : txnApply(txnInfo)), Math.max(1000, Math.min(due, 60000)));
+    }
+  };
+  const fromServer = (j) => {
+    clockSkew = Date.now() - j.now;
+    txnApply({ state: j.state, statements: j.statements, startedMs: j.startedMs, lastMs: j.lastMs, note: j.note });
+  };
+  async function txnFetch() {
+    const key = cur.key;
+    try {
+      const res = await fetch(`/builder/sql/worksheet/txn?tab=${encodeURIComponent(key)}`, { credentials: 'same-origin', headers: { accept: 'application/json' } });
+      if (!res.ok) throw new Error(String(res.status));
+      const j = await res.json();
+      if (key !== cur.key) return; // switched meanwhile
+      if (j.state !== 'none') modeSel.value = 'on';
+      fromServer(j);
+    } catch {
+      badge.textContent = 'Transaction state unknown';
+    }
+  }
+  async function txnPost(key, action) {
+    try {
+      const res = await fetch('/builder/sql/worksheet/txn', { method: 'POST', credentials: 'same-origin', headers: { accept: 'application/json' },
+        body: new URLSearchParams({ __csrf: form.elements.__csrf.value, tab: key, action }) });
+      const j = await res.json();
+      if (key === cur.key) {
+        fromServer(j);
+        if (j.message) announce(j.message);
+      }
+      return j;
+    } catch {
+      announce('The transaction could not be ended: reload the page.');
+      return null;
+    }
+  }
+  modeSel.addEventListener('change', async () => {
+    if (modeSel.value !== 'on' && txnInfo.state !== 'none') {
+      if (!window.confirm('Switching to Autocommit rolls back the open transaction. Roll it back?')) { modeSel.value = 'on'; return; }
+      await txnPost(cur.key, 'rollback');
+      modeSel.value = '';
+    }
+    txnApply(txnInfo);
+  });
+  // a page post (a run, Commit, Rollback) is not leaving: the transaction stays
+  let submitting = false;
+  form.addEventListener('submit', () => {
+    submitting = true;
+    setTimeout(() => { submitting = false; }, 3000); // a download doesn't leave the page
+  });
+  window.addEventListener('pageshow', () => { submitting = false; });
+  window.addEventListener('beforeunload', (e) => {
+    if (submitting || txnInfo.state === 'none') return;
+    e.preventDefault();
+    e.returnValue = ''; // the browser asks "Leave site?"; an idle transaction is rolled back after the timeout
+  });
+  if (!form.dataset.tab || form.dataset.tab !== cur.key) txnTabChanged();
+  else {
+    if (txnInfo.state !== 'none') modeSel.value = 'on';
+    else if (!form.querySelector('[data-ws-txn-mode] option[selected]')) modeSel.value = cur.txn ? 'on' : '';
+    txnApply(txnInfo);
+  }
+
   // ------------------------------------------------------------ (sprint 97) a chart's settings draw it again
   form.querySelector('.ch-controls')?.addEventListener('change', () => run('chart'));
 
@@ -513,6 +625,7 @@
   const size = (key, px) => {
     const v = key === 'nav' ? Math.max(160, Math.min(px, window.innerWidth * 0.5)) : Math.max(80, Math.min(px, window.innerHeight * 0.75));
     form.style.setProperty(key === 'nav' ? '--ws-nav' : '--ws-out', `${Math.round(v)}px`);
+    form.querySelector(`[data-ws-split="${key}"]`)?.setAttribute('aria-valuenow', String(Math.round(v)));
     store.set(key, String(Math.round(v)));
     return v;
   };
@@ -520,6 +633,9 @@
   for (const sp of form.querySelectorAll('[data-ws-split]')) {
     const key = sp.dataset.wsSplit;
     const current = () => (key === 'nav' ? form.querySelector('.ws-nav').getBoundingClientRect().width : out.getBoundingClientRect().height);
+    // (sprint 108) a focusable separator states its position (in pixels)
+    sp.setAttribute('aria-valuemin', '0');
+    if (!sp.hasAttribute('aria-valuenow')) sp.setAttribute('aria-valuenow', String(Math.round(current())));
     sp.addEventListener('pointerdown', (e) => {
       e.preventDefault();
       sp.setPointerCapture(e.pointerId);

package/src/builder/changelog.ts

@@ -69,7 +69,7 @@ async function listPage(s: Session, q: Record<string, unknown>) {
       ${list.map((c) => html`<tr>
         <td data-label="#">${c.seq}</td>
         <td data-label="Change set" class="wrap-anywhere"><details><summary><code>${flywayName(c)}</code>${c.object_name ? html` <span class="muted small">${c.object_name}</span>` : ''}</summary>
-          <pre class="source wrap-pre">${c.sql}</pre>
+          <pre class="source wrap-pre" data-code-view="sql" tabindex="0" aria-label="SQL">${c.sql}</pre>
           <form method="post" action="${CHANGES}/${c.id}" class="search u-mwnone">${csrf(s)}
             <div class="field"><label class="label" for="f_name_${c.id}">Name</label><input id="f_name_${c.id}" name="name" value="${c.name}" pattern="[a-z0-9][a-z0-9_]{0,59}" required></div>
             <button class="btn btn-sm u-selfend">Rename</button></form>

package/src/builder/data-modeler.ts

@@ -355,7 +355,7 @@ export async function dataModelerRoutes(app: FastifyInstance) {
       return reply.header('content-disposition', `attachment; filename="${fileName(d.name)}.sql"`).type('application/sql; charset=utf-8').send(script);
     const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('modeler')}
       ${region(`DDL of ${d.name}`, html`<p class="muted u-mt0">The CREATE statements of the diagram's ${m.tables.length} objects in schema ${d.schema_name}: tables, their keys, indexes, triggers, row level security, policies, comments and grants, and views. Review before running.</p>
-        <pre class="source" tabindex="0" aria-label="DDL">${script}</pre>
+        <pre class="source" data-code-view="sql" tabindex="0" aria-label="DDL">${script}</pre>
         <form method="post" action="${BASE}/sql">${csrf(s)}<input type="hidden" name="sql" value="${script}">
           <div class="buttons"><a class="btn" href="${M}/${d.id}">${bicon('back')} Back to the diagram</a><a class="btn" href="${M}/${d.id}/ddl?download=1">${icon('download')} Download</a>
             <button class="btn btn-hot">${icon('play')} Open in the SQL Worksheet</button></div></form>`)}`;

package/src/builder/db-users.ts

@@ -223,7 +223,7 @@ function reviewForm(s: Session, spec: RoleSpec, stmts: string[], o: { isNew: boo
   return html`${errorList(o.errors)}${o.output ?? ''}
     ${region('SQL', stmts.length
       ? html`<p class="muted u-mt0">These statements run in one transaction when you apply them: all of them, or none.${spec.password === 'set' ? ' The password shows as \'********\': pgkiln sends PostgreSQL only its SCRAM-SHA-256 verifier.' : ''}</p>
-        <pre class="source dbu-sql" aria-label="Generated SQL">${maskSql(stmts)}</pre>`
+        <pre class="source dbu-sql" data-code-view="sql" tabindex="0" aria-label="Generated SQL">${maskSql(stmts)}</pre>`
       : html`<p class="muted u-mt0">Nothing to change: the role is as the form says.</p>`)}
     <form method="post" action="${URL_BASE}/save" class="dbu-form">${csrf(s)}${hiddenSpec(spec, o.isNew)}
       <input type="hidden" name="reviewed" value="${reviewDigest(stmts)}">
@@ -409,7 +409,7 @@ async function dropPage(req: Req, reply: FastifyReply, s: Session, name: string,
           <option value=""${sel(to === '')}>${r.owned ? 'Drop them with the role (DROP OWNED)' : 'It owns nothing here: just revoke its privileges'}</option></select>
           <small class="help">DROP OWNED also revokes the privileges granted to the role in this database.</small></div>
         <div class="buttons"><button class="btn">${icon('eye')} Review SQL</button></div></form>`)}
-    ${region('SQL', html`<pre class="source dbu-sql" aria-label="Generated SQL">${maskSql(stmts)}</pre>
+    ${region('SQL', html`<pre class="source dbu-sql" data-code-view="sql" tabindex="0" aria-label="Generated SQL">${maskSql(stmts)}</pre>
       <form method="post" action="${URL_BASE}/drop" class="dbu-form">${csrf(s)}
         <input type="hidden" name="name" value="${r.name}"><input type="hidden" name="to" value="${to}"><input type="hidden" name="reviewed" value="${reviewDigest(stmts)}">
         ${!to && r.owned ? html`<label class="check u-mb1"><input type="checkbox" name="drop_objects" value="1" required> Drop the ${String(r.owned)} object${r.owned === 1 ? '' : 's'} ${r.name} owns, with their data</label>` : ''}

package/src/builder/object-browser.ts

@@ -279,22 +279,22 @@ export async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s
   const ddlOf = async (match: (x: { kind: string; name: string; table?: string }) => boolean) => {
     const objects = await readSchema(db.pool as pg.Pool, schema).catch(() => []);
     const text = objects.filter(match).map((x) => x.ddl).join('\n\n');
-    return text ? html`<pre class="source">${text}</pre>` : html`<p class="muted">No DDL (an extension's object, or not readable with this connection).</p>`;
+    return text ? html`<pre class="source" data-code-view="sql" tabindex="0" aria-label="DDL of ${o.name}">${text}</pre>` : html`<p class="muted">No DDL (an extension's object, or not readable with this connection).</p>`;
   };
   const relname = o.ref.includes('.') ? o.ref.slice(o.ref.lastIndexOf('.') + 1).replace(/^"|"$/g, '') : o.ref.replace(/^"|"$/g, '');
 
   if (o.type === 'function' || o.type === 'procedure') {
     const src = await db.one<{ def: string }>('select pg_get_functiondef($1::regprocedure) as def', [o.ref]).catch(() => undefined);
-    return region(o.name, src ? html`<pre class="source">${src.def}</pre>` : html`<p class="muted">An aggregate or window function: no source.</p>`);
+    return region(o.name, src ? html`<pre class="source" data-code-view="plpgsql" tabindex="0" aria-label="Source of ${o.name}">${src.def}</pre>` : html`<p class="muted">An aggregate or window function: no source.</p>`);
   }
   if (o.type === 'trigger') {
     const [rel, name] = o.ref.split('|');
     const t = await db.one<{ def: string }>('select pg_get_triggerdef(oid, true) as def from pg_trigger where tgrelid = $1::regclass and tgname = $2', [rel, name]);
-    return region(o.name, html`<pre class="source">${t?.def ?? ''}</pre>`);
+    return region(o.name, html`<pre class="source" data-code-view="sql" tabindex="0" aria-label="Definition of ${o.name}">${t?.def ?? ''}</pre>`);
   }
   if (o.type === 'index') {
     const i = await db.one<{ def: string; size: string }>('select pg_get_indexdef($1::regclass) as def, pg_size_pretty(pg_relation_size($1::regclass)) as size', [o.ref]);
-    return region(o.name, html`<pre class="source">${i?.def ?? ''};</pre><p class="muted">Size: ${i?.size ?? ''}</p>`);
+    return region(o.name, html`<pre class="source" data-code-view="sql" tabindex="0" aria-label="Definition of ${o.name}">${i?.def ?? ''};</pre><p class="muted">Size: ${i?.size ?? ''}</p>`);
   }
   if (o.type === 'sequence') {
     const q = await db.one<Record<string, unknown>>(

package/src/builder/querybuilder.ts

@@ -361,7 +361,7 @@ export async function queryBuilderRoutes(app: FastifyInstance) {
     </form>`;
 
     const output = built
-      ? html`<div class="u-spacer"></div>${region('SQL', html`<pre class="source" tabindex="0" aria-label="Generated SQL">${built.sql}</pre>
+      ? html`<div class="u-spacer"></div>${region('SQL', html`<pre class="source" data-code-view="sql" tabindex="0" aria-label="Generated SQL">${built.sql}</pre>
           <form method="post" action="${BASE}/sql">${csrf(s)}<input type="hidden" name="sql" value="${built.sql}">
             <div class="buttons"><button class="btn btn-hot">${icon('play')} Run in the SQL Worksheet</button></div></form>`)}`
       : '';

package/src/builder/quicksql.ts

@@ -43,7 +43,7 @@ export async function quickSqlRoutes(app: FastifyInstance) {
         ${region('PostgreSQL', html`${warnings.length
             ? html`<div class="alert alert-error" role="alert"><ul class="u-m0">${warnings.map((w) => html`<li>Line ${w.line}: ${w.message}</li>`)}</ul></div>`
             : ''}
-          <pre class="source ddl" tabindex="0" aria-label="Generated SQL">${ddl}</pre>`)}
+          <pre class="source ddl" data-code-view="sql" tabindex="0" aria-label="Generated SQL">${ddl}</pre>`)}
       </div>
       <div class="u-spacer"></div>
       ${region('Save or run', html`<div class="form-grid"><div class="field"><label class="label" for="f_name">Script name</label>

package/src/builder/scheduling.ts

@@ -237,7 +237,7 @@ const hiddenSpec = (spec: JobSpec, jobid: string | null) => html`<input type="hi
 /** The review step of any change: the SQL, Apply (with the digest), Back. */
 function reviewRegion(s: Session, stmts: string[], action: string, hidden: Raw, o: { back?: Raw | ''; apply?: string; danger?: boolean; extra?: Raw | '' } = {}) {
   return html`${region('SQL', stmts.length
-    ? html`<p class="muted u-mt0">These statements run in one transaction on pgkiln's owner connection when you apply them: all of them, or none.</p><pre class="source cron-sql" aria-label="Generated SQL">${stmts.join('\n\n')}</pre>`
+    ? html`<p class="muted u-mt0">These statements run in one transaction on pgkiln's owner connection when you apply them: all of them, or none.</p><pre class="source cron-sql" data-code-view="sql" tabindex="0" aria-label="Generated SQL">${stmts.join('\n\n')}</pre>`
     : html`<p class="muted u-mt0">Nothing to change.</p>`)}
     <form method="post" action="${action}" class="cron-form">${csrf(s)}${hidden}<input type="hidden" name="reviewed" value="${reviewDigest(stmts)}">${o.extra ?? ''}
       <div class="buttons">${stmts.length ? html`<button class="btn ${o.danger ? 'btn-danger' : 'btn-hot'}" name="mode" value="apply">${icon(o.danger ? 'trash' : 'check')} ${o.apply ?? 'Apply'}</button>` : ''}${o.back ?? ''}</div></form>`;
@@ -320,7 +320,7 @@ async function jobPage(reply: FastifyReply, s: Session, st: Extract<CronState, {
       <dt>State</dt><dd>${job.active ? 'Active' : html`<span class="tag">inactive</span>`}</dd>
       <dt>Schedule</dt><dd><code>${job.schedule}</code></dd>
       <dt>Database</dt><dd>${job.database}</dd><dt>Run as</dt><dd>${job.username}</dd><dt>Job id</dt><dd>${job.jobid}</dd>
-    </dl><pre class="source cron-sql" aria-label="Command">${job.command}</pre>`)}
+    </dl><pre class="source cron-sql" data-code-view="sql" tabindex="0" aria-label="Command">${job.command}</pre>`)}
     ${region('Schedule', schedulePreview(job.schedule, st.timeZone))}
     ${region('Recent runs', html`${runsTable(runs, false)}<p class="small"><a href="${URL_BASE}/history?job=${job.jobid}">All runs of this job</a> · <a href="${URL_BASE}/history/purge?job=${job.jobid}">Purge its history</a></p>`)}`;
   return send(reply, s, shell(s, name, crumbs([name]), main, 'sql'));

package/src/builder/scripts.ts

@@ -92,7 +92,7 @@ export function resultsHtml(results: StatementResult[]) {
     (r) => html`<li class="script-result">
       <div class="script-result-head">${statusTag(r)} <strong>#${r.n || '-'}</strong>
         <span class="muted small">${r.line ? `line ${r.line}` : ''}${r.status === 'ok' ? ` · ${r.command ?? 'done'}${r.rows !== null && r.rows !== undefined ? `, ${r.rows} row(s)` : ''}` : ''}${r.status === 'ok' || r.status === 'error' ? ` · ${r.ms} ms` : ''}</span></div>
-      <details class="script-sql"><summary><code>${r.sql.length > 120 ? `${r.sql.slice(0, 120).replace(/\s+/g, ' ')}…` : r.sql.replace(/\s+/g, ' ')}</code></summary><pre class="source">${r.sql}</pre></details>
+      <details class="script-sql"><summary><code>${r.sql.length > 120 ? `${r.sql.slice(0, 120).replace(/\s+/g, ' ')}…` : r.sql.replace(/\s+/g, ' ')}</code></summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="Statement">${r.sql}</pre></details>
       ${r.error ? html`<div class="alert ${r.status === 'error' ? 'alert-error' : 'alert-note'}">${r.error}</div>` : ''}
       ${r.columns?.length
         ? html`<div class="table-wrap"><table class="report"><thead><tr>${r.columns.map((c) => html`<th>${c}</th>`)}</tr></thead>

package/src/builder/sql-charts.ts

@@ -130,7 +130,7 @@ export async function sqlChartRoutes(app: FastifyInstance) {
         <div class="field"><label class="label" for="ch-name">Name</label><input id="ch-name" name="name" value="${ch.name}" maxlength="120" required></div>
         ${controls}
         <label class="check"><input type="checkbox" name="on_dashboard"${ch.on_dashboard ? raw(' checked') : ''}> On the Charts dashboard</label>
-        <details class="u-mt1"><summary>The query</summary><pre class="source">${ch.sql}</pre></details>
+        <details class="u-mt1"><summary>The query</summary><pre class="source" data-code-view="sql" tabindex="0" aria-label="The query">${ch.sql}</pre></details>
         <div class="buttons"><button class="btn btn-hot" name="action" value="save">${icon('save')} Save</button>
           <button class="btn" name="action" value="worksheet">${icon('code')} Open in the worksheet</button>
           <button class="btn btn-danger" name="action" value="delete" data-confirm="Delete the chart ${ch.name}?">${icon('trash')} Delete</button></div>

package/src/builder/sql-monitor.ts

@@ -369,7 +369,7 @@ export async function sqlMonitorRoutes(app: FastifyInstance) {
     const main = html`<h1 class="u-mb1">Statement</h1>
       <div class="stat-grid u-mb1">${tile('Calls', num(calls))}${tile('Total ms', num(total))}${tile('Mean ms', num(calls ? total / calls : 0))}${tile('Rows', num(sum('rows')))}
         ${tile('Blocks hit', num(sum('hit')))}${tile('Blocks read', num(sum('read')))}${tile('Temp blocks written', num(sum('temp_written')))}</div>
-      ${region('Text', html`<pre class="source u-break sm-sql">${sql}</pre>
+      ${region('Text', html`<pre class="source u-break sm-sql" data-code-view="sql" tabindex="0" aria-label="SQL text">${sql}</pre>
         <div class="buttons"><form method="post" action="${URL_BASE}/statements/${queryid}/worksheet">${csrf(s)}<button class="btn">${icon('code')} Open in worksheet</button></form>
           <a class="btn" href="${URL_BASE}/top">Back to Top SQL</a></div>`)}
       ${region('By role', html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Role</th><th class="num">Calls</th><th class="num">Total ms</th><th class="num">Mean ms</th><th class="num">Std dev ms</th><th class="num">Min ms</th><th class="num">Max ms</th><th class="num">Rows</th><th class="num">Hit</th><th class="num">Read</th><th class="num">Temp read</th><th class="num">Temp written</th></tr></thead>

package/src/builder/table-editor.ts

@@ -121,7 +121,7 @@ function form(s: Session, def: TableDef, opts: { editing: TableDef | null; schem
         <div class="field"><label class="label" for="te-part_by">Partition by</label><select id="te-part_by" name="part_by"><option value="">Not partitioned</option>${(['range', 'list', 'hash'] as const).map((p) => html`<option value="${p}"${sel(p, def.partitionBy)}>${p}</option>`)}</select></div>
         <div class="field"><label class="label" for="te-part_key">Key</label>${input('part_key', def.partitionKey, 'Key', 'class="code" placeholder="created_at"')}</div></div>
         <small class="help">The partitions themselves are tables made with CREATE TABLE … PARTITION OF in the worksheet.</small></fieldset>`}`],
-    ['ddl', 'DDL', opts.ddl.length ? html`<pre class="source te-ddl">${opts.ddl.join('\n\n')}</pre>` : html`<p class="muted">${editing ? 'No changes yet: the table is as the form shows it.' : 'Fill in the table and press Preview DDL.'}</p>`],
+    ['ddl', 'DDL', opts.ddl.length ? html`<pre class="source te-ddl" data-code-view="sql" tabindex="0" aria-label="DDL">${opts.ddl.join('\n\n')}</pre>` : html`<p class="muted">${editing ? 'No changes yet: the table is as the form shows it.' : 'Fill in the table and press Preview DDL.'}</p>`],
     ['output', 'Output', opts.output || html`<p class="muted">Apply shows what happened here.</p>`],
   ];
   const tab = sections.some(([k]) => k === opts.tab) ? opts.tab : opts.errors.length ? 'columns' : 'columns';
@@ -203,7 +203,7 @@ async function page(req: Req, reply: FastifyReply) {
         const now = await readTable(db, `${pgIdent(def.schema)}.${pgIdent(def.name)}`);
         return back(reply, s, `${BASE}/sql/objects/table?${new URLSearchParams({ o: now ? `${pgIdent(now.schema)}.${pgIdent(now.name)}` : '' })}`);
       }
-      output = html`<div class="alert alert-error" role="alert"><p><strong>Nothing was changed</strong>: the statements ran in one transaction, which was rolled back.</p><p>${failed}</p><pre class="source">${at}</pre></div>`;
+      output = html`<div class="alert alert-error" role="alert"><p><strong>Nothing was changed</strong>: the statements ran in one transaction, which was rolled back.</p><p>${failed}</p><pre class="source" data-code-view="sql" tabindex="0" aria-label="Failed statement">${at}</pre></div>`;
       tab = 'output';
     }
     if (errors.length) tab = 'columns';