pgkiln 0.49.0 → 0.51.0

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/app.ts

@@ -52,7 +52,9 @@ import { blueprintRoutes } from './builder/blueprints.ts';
 import { accountRoutes } from './runtime/account.ts';
 import { taskRoutes } from './runtime/tasks.ts';
 import { dataReporterRoutes } from './runtime/data-reporter.ts';
+import { datasetRoutes } from './builder/datasets.ts';
 import { reporterBuilderRoutes } from './builder/reporter.ts';
+import { workspaceHomeRoutes } from './builder/workspace-home.ts';
 import { formDesignerRoutes } from './runtime/form-designer.ts';
 import { formDesignerBuilderRoutes } from './builder/form-designer.ts';
 import { builderErrorPages, builderServerError } from './builder/errors.ts';
@@ -239,6 +241,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(codeEditorRoutes);
   await app.register(dataReporterRoutes);
   await app.register(reporterBuilderRoutes);
+  await app.register(datasetRoutes);
   await app.register(formDesignerRoutes);
   await app.register(formDesignerBuilderRoutes);
   await app.register(sampleDataRoutes);
@@ -247,6 +250,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(assistantBuilderRoutes);
   await app.register(aiBuilderRoutes);
   await app.register(blueprintRoutes);
-  app.get('/', async (_req, reply) => reply.redirect('/builder'));
+  await app.register(workspaceHomeRoutes);
+  app.get('/', async (_req, reply) => reply.redirect('/builder/home'));
   return app;
 }

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