pgkiln 0.48.0 → 0.50.0

package/public/builder.js

@@ -1234,3 +1234,51 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
   // the button is for pages without JavaScript
   picker.form.querySelector('button')?.setAttribute('hidden', '');
 })();
+
+// (sprint 101, DA-12) SQL Workshop › Scheduling: the schedule builder's five fields and the common schedules fill the
+// schedule; the preview (in words, next five runs) follows as you type. Without JavaScript the Use / Preview buttons
+// post the form and it comes back with the same.
+(() => {
+  const form = document.querySelector('form[data-cron-form]');
+  const input = form?.querySelector('[data-cron-schedule]');
+  const preview = form?.querySelector('[data-cron-preview]');
+  if (!form || !input || !preview) return;
+  const fields = [...form.querySelectorAll('[data-cron-field]')];
+  let timer = 0;
+  let seq = 0;
+  const refresh = () => {
+    clearTimeout(timer);
+    timer = setTimeout(async () => {
+      const mine = ++seq;
+      try {
+        const res = await fetch(`${preview.dataset.cronPreview}?schedule=${encodeURIComponent(input.value)}`, { headers: { accept: 'text/html' }, credentials: 'same-origin' });
+        if (!res.ok || mine !== seq) return;
+        const doc = new DOMParser().parseFromString(`<div>${await res.text()}</div>`, 'text/html');
+        preview.replaceChildren(...doc.body.firstElementChild.childNodes);
+      } catch {
+        /* the Preview button still works */
+      }
+    }, 250);
+  };
+  const split = () => {
+    const parts = input.value.trim().split(/\s+/);
+    if (parts.length === 5) fields.forEach((f, i) => (f.value = parts[i] === '*' ? '' : parts[i]));
+  };
+  input.addEventListener('input', () => {
+    split();
+    refresh();
+  });
+  for (const f of fields) {
+    f.addEventListener('input', () => {
+      input.value = fields.map((x) => x.value.trim() || '*').join(' ');
+      refresh();
+    });
+  }
+  form.querySelector('[data-cron-preset]')?.addEventListener('change', (e) => {
+    if (!e.target.value) return;
+    input.value = e.target.value;
+    split();
+    refresh();
+  });
+  for (const b of form.querySelectorAll('[data-cron-nojs]')) b.hidden = true;
+})();

package/public/code-editor.css

@@ -2,79 +2,23 @@
    transparent and lies exactly over the highlighted copy (.ce-code), so both
    must share font, size, line height, padding and tab size. */
 :root {
-  --ce-bg: #fbfcfd;
-  --ce-gutter: #f1f3f6;
-  --ce-gutter-text: #5d6876;
-  --ce-text: #1b2330;
-  --ce-kw: #8b2bb9;
-  --ce-type: #0b6e8a;
-  --ce-fn: #1d5fc4;
-  --ce-str: #1d7a3a;
-  --ce-num: #b35400;
-  --ce-com: #6b7685;
-  --ce-bind: #b0306a;
-  --ce-qid: #7a5b00;
-  --ce-tag: #1d5fc4;
-  --ce-attr: #8b2bb9;
-  --ce-err: #c23028;
-  --ce-match: rgb(11 99 197 / 18%);
-  --ce-select: rgb(11 99 197 / 22%);
+  /* the colours (--ce-bg, --ce-kw, …, --ce-line, --ce-select) are tokens in builder.css, light and dark */
   --ce-font: 0.84rem;
   --ce-lh: 20px; /* whole pixels: fractional line heights drift apart over thousands of lines */
 }
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
-    --ce-bg: #12161d;
-    --ce-gutter: #171c24;
-    --ce-gutter-text: #8f99a8;
-    --ce-text: #e3e7ed;
-    --ce-kw: #d39bff;
-    --ce-type: #5fd0e6;
-    --ce-fn: #82b6ff;
-    --ce-str: #8fd694;
-    --ce-num: #ffb46b;
-    --ce-com: #8591a3;
-    --ce-bind: #ff8cc0;
-    --ce-qid: #e8c66a;
-    --ce-tag: #82b6ff;
-    --ce-attr: #d39bff;
-    --ce-err: #ff7a70;
-    --ce-match: rgb(105 164 255 / 25%);
-    --ce-select: rgb(105 164 255 / 30%);
-  }
-}
-:root[data-theme="dark"] {
-  --ce-bg: #12161d;
-  --ce-gutter: #171c24;
-  --ce-gutter-text: #8f99a8;
-  --ce-text: #e3e7ed;
-  --ce-kw: #d39bff;
-  --ce-type: #5fd0e6;
-  --ce-fn: #82b6ff;
-  --ce-str: #8fd694;
-  --ce-num: #ffb46b;
-  --ce-com: #8591a3;
-  --ce-bind: #ff8cc0;
-  --ce-qid: #e8c66a;
-  --ce-tag: #82b6ff;
-  --ce-attr: #d39bff;
-  --ce-err: #ff7a70;
-  --ce-match: rgb(105 164 255 / 25%);
-  --ce-select: rgb(105 164 255 / 30%);
-}
 @media (pointer: coarse) {
   :root { --ce-font: 16px; --ce-lh: 24px; } /* the same as other fields: no zoom on focus in iOS */
 }
 
 .ce {
   position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
-  min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--ce-bg);
+  min-width: 0; max-width: 100%; border: 1px solid var(--field-border, var(--border)); border-radius: var(--radius-sm, 6px); background: var(--ce-bg);
 }
-.ce:focus-within { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+.ce:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring, transparent); }
 .ce-gutter {
   --ce-digits: 2;
   width: calc(var(--ce-digits) * 1ch + 1.1rem); overflow: hidden; position: relative;
-  background: var(--ce-gutter); border-right: 1px solid var(--border); border-radius: 6px 0 0 0;
+  background: var(--ce-gutter); border-right: 1px solid var(--border); border-radius: var(--radius-sm, 6px) 0 0 0;
   color: var(--ce-gutter-text); user-select: none;
 }
 .ce-gutter, .ce .ce-code, .ce textarea.ce-input {
@@ -82,6 +26,11 @@
   font-variant-ligatures: none; letter-spacing: 0; font-kerning: none;
 }
 .ce-nums { position: absolute; top: 0; left: 0; right: 0; white-space: pre; text-align: right; padding: 0.5rem 0.45rem 0 0; will-change: transform; }
+/* the caret's line (sprint 108): a band behind the text and its number in the gutter, while the editor has the focus */
+.ce-cur, .ce-cur-num { position: absolute; left: 0; right: 0; top: 0; height: var(--ce-lh); will-change: transform; display: none; }
+.ce-cur { background: var(--ce-line); }
+.ce-cur-num { padding-right: 0.45rem; text-align: right; color: var(--ce-gutter-active); background: var(--ce-gutter); font-weight: 650; }
+.ce:focus-within :is(.ce-cur, .ce-cur-num):not([hidden]) { display: block; }
 .ce-main { position: relative; min-width: 0; }
 .ce .ce-hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
 .ce .ce-code {
@@ -99,29 +48,33 @@
 .ce textarea.ce-input:focus-visible { outline: none; }
 .ce textarea.sql-editor { min-height: 18rem; }
 
-/* tokens */
-.ce-code .t-kw { color: var(--ce-kw); font-weight: 600; }
-.ce-code .t-type { color: var(--ce-type); }
-.ce-code .t-fn { color: var(--ce-fn); }
-.ce-code .t-str { color: var(--ce-str); }
-.ce-code .t-key { color: var(--ce-fn); }
-.ce-code .t-num { color: var(--ce-num); }
-.ce-code .t-com { color: var(--ce-com); font-style: italic; }
-.ce-code .t-bind, .ce-code .t-sub { color: var(--ce-bind); font-weight: 600; }
-.ce-code .t-qid { color: var(--ce-qid); }
-.ce-code .t-dol { color: var(--ce-str); font-weight: 600; }
-.ce-code .t-tag { color: var(--ce-tag); }
-.ce-code .t-attr { color: var(--ce-attr); }
-.ce-code .t-ent { color: var(--ce-num); }
-.ce-code .t-err { color: var(--ce-err); text-decoration: wavy underline; }
-.ce-code .t-op, .ce-code .t-pun, .ce-code .t-br, .ce-code .t-id { color: var(--ce-text); }
-.ce-code .t-match { background: var(--ce-match); border-radius: 2px; outline: 1px solid var(--ce-match); }
+/* tokens: in the editor and in read-only code (<pre data-code-view>, sprint 108) */
+:is(.ce-code, .ce-view) .t-kw { color: var(--ce-kw); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-type { color: var(--ce-type); }
+:is(.ce-code, .ce-view) .t-fn { color: var(--ce-fn); }
+:is(.ce-code, .ce-view) .t-str { color: var(--ce-str); }
+:is(.ce-code, .ce-view) .t-key { color: var(--ce-fn); }
+:is(.ce-code, .ce-view) .t-num { color: var(--ce-num); }
+:is(.ce-code, .ce-view) .t-com { color: var(--ce-com); font-style: italic; }
+:is(.ce-code, .ce-view) .t-bind, :is(.ce-code, .ce-view) .t-sub { color: var(--ce-bind); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-qid { color: var(--ce-qid); }
+:is(.ce-code, .ce-view) .t-dol { color: var(--ce-str); font-weight: 600; }
+:is(.ce-code, .ce-view) .t-tag { color: var(--ce-tag); }
+:is(.ce-code, .ce-view) .t-attr { color: var(--ce-attr); }
+:is(.ce-code, .ce-view) .t-ent { color: var(--ce-num); }
+:is(.ce-code, .ce-view) .t-err { color: var(--ce-err); text-decoration: wavy underline; }
+:is(.ce-code, .ce-view) .t-op { color: var(--ce-op); }
+:is(.ce-code, .ce-view) .t-pun, :is(.ce-code, .ce-view) .t-br, :is(.ce-code, .ce-view) .t-id { color: var(--ce-text); }
+.ce-code .t-match { background: var(--ce-match); border-radius: 2px; outline: 1px solid var(--ce-match-ring); }
+
+pre.ce-view { background: var(--ce-bg); color: var(--ce-text); border-color: var(--border); }
+pre.ce-view::selection, pre.ce-view ::selection { background: var(--ce-select); }
 
 /* status bar: language, hint, caret position, check */
 .ce-bar {
   grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.75rem;
   padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); background: var(--ce-gutter);
-  border-radius: 0 0 6px 6px; font-size: 0.75rem; color: var(--muted); min-width: 0;
+  border-radius: 0 0 var(--radius-sm, 6px) var(--radius-sm, 6px); font-size: 0.75rem; color: var(--muted); min-width: 0;
 }
 .ce-lang { font-weight: 650; letter-spacing: 0.02em; }
 .ce-hint { flex: 1 1 12rem; min-width: 0; }
@@ -138,7 +91,7 @@
   position: absolute; z-index: 30; left: 0; top: 0; margin: 0; padding: 0.25rem 0; list-style: none;
   width: max-content; min-width: 14rem; max-width: min(34rem, calc(100% - 0.5rem)); max-height: 15rem; overflow: auto;
   background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
-  box-shadow: 0 8px 24px rgb(16 24 40 / 18%); font-size: 0.82rem;
+  box-shadow: var(--shadow-lg, 0 8px 24px rgb(16 24 40 / 18%)); font-size: 0.82rem;
 }
 .ce-opt { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.2rem 0.6rem 0.2rem 0.4rem; cursor: pointer; white-space: nowrap; }
 .ce-opt::before {

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/sql-monitor.js

@@ -0,0 +1,73 @@
+// pgkiln builder: the SQL Workshop's SQL Monitor (sprint 102, src/builder/sql-monitor.ts).
+//
+// Progressive enhancement of the Sessions view: the live part ([data-sm-live]: tiles, sessions, wait events,
+// progress) is fetched again (?fragment=1) every 5, 15 or 60 seconds and swapped in place, with a Pause button.
+// The interval and the pause are remembered in localStorage (pgkiln.sqlMonitor). No refresh while the tab is
+// hidden or a session's confirmation is open; a failed or redirected fetch (signed out) stops it. Without
+// JavaScript the page's Refresh link reloads it.
+(() => {
+  'use strict';
+  const live = document.querySelector('[data-sm-live]');
+  const controls = document.querySelector('[data-sm-controls]');
+  if (!live || !controls) return;
+  const select = controls.querySelector('[data-sm-interval]');
+  const pause = controls.querySelector('[data-sm-pause]');
+  const KEY = 'pgkiln.sqlMonitor';
+  const load = () => { try { return JSON.parse(localStorage.getItem(KEY) || 'null') || {}; } catch { return {}; } };
+  const save = (v) => { try { localStorage.setItem(KEY, JSON.stringify(v)); } catch { /* private mode */ } };
+  const pref = load();
+  const allowed = [...select.options].map((o) => Number(o.value));
+  let seconds = allowed.includes(Number(pref.seconds)) ? Number(pref.seconds) : allowed[0];
+  let paused = pref.paused === true;
+  let timer = 0;
+  let busy = false;
+  select.value = String(seconds);
+  controls.hidden = false;
+
+  const show = () => {
+    pause.setAttribute('aria-pressed', paused ? 'true' : 'false');
+    pause.textContent = paused ? 'Resume' : 'Pause';
+    live.classList.toggle('is-paused', paused);
+  };
+  const schedule = () => {
+    window.clearTimeout(timer);
+    if (!paused) timer = window.setTimeout(refresh, seconds * 1000);
+  };
+  async function refresh() {
+    if (busy || paused) return;
+    if (document.hidden) return schedule();
+    busy = true;
+    try {
+      const res = await fetch(live.dataset.smLive, { credentials: 'same-origin', headers: { accept: 'text/html' }, cache: 'no-store' });
+      if (!res.ok || res.redirected) throw new Error(String(res.status));
+      const text = await res.text();
+      // keep focus on a button that survives the swap (by its label)
+      const focused = document.activeElement && live.contains(document.activeElement) ? document.activeElement.getAttribute('aria-label') : null;
+      live.innerHTML = text;
+      if (focused) live.querySelector(`[aria-label="${CSS.escape(focused)}"]`)?.focus();
+      busy = false;
+      schedule();
+    } catch {
+      busy = false;
+      paused = true;
+      show();
+      const note = live.querySelector('[data-sm-updated]');
+      if (note) note.textContent = 'Refresh stopped: the monitor could not be reached (signed out?). Reload the page.';
+    }
+  }
+  select.addEventListener('change', () => {
+    seconds = Number(select.value);
+    save({ seconds, paused });
+    schedule();
+  });
+  pause.addEventListener('click', () => {
+    paused = !paused;
+    save({ seconds, paused });
+    show();
+    if (paused) window.clearTimeout(timer);
+    else refresh();
+  });
+  document.addEventListener('visibilitychange', () => { if (!document.hidden && !paused) refresh(); });
+  show();
+  schedule();
+})();

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; }