pgkiln 0.49.0 → 0.51.0

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

@@ -65,7 +65,7 @@ const clip = (v: string | undefined, max: number) => (v ?? '').trim().slice(0, m
  * except binary ones.
  */
 export async function mergeReporterSettings(
-  config: Config, b: Body, a: { authz: Set<string> },
+  config: Config, b: Body, a: { authz: Set<string>; datasets?: Set<string> },
   lookup: { byName: (schema: string, table: string) => Promise<DbObject | null>; byOid: (oid: number) => Promise<DbObject | null> } = { byName: findObject, byOid: objectByOid },
 ): Promise<{ config: Config; errors: string[] }> {
   const out: Config = { ...config };
@@ -80,6 +80,13 @@ export async function mergeReporterSettings(
   delete out.share_authz;
   if (b.sharing === 'off') out.sharing = false;
   else if (b.sharing?.startsWith('authz:') && a.authz.has(b.sharing.slice(6).toUpperCase())) out.share_authz = b.sharing.slice(6);
+  // (sprint 110) who may edit reports, who may unpublish and delete anyone's, published reports
+  for (const k of ['edit_authz', 'admin_authz'] as const) {
+    delete out[k];
+    if (b[k] && a.authz.has(b[k]!.toUpperCase())) out[k] = b[k];
+  }
+  delete out.publishing;
+  if (b.publishing === 'true') out.publishing = true;
 
   const sources: Source[] = [];
   const existing = sourcesOf({ config });
@@ -87,6 +94,13 @@ export async function mergeReporterSettings(
     const s = existing.find((x) => x.id === b[`s${i}_key`]);
     if (!s || sources.some((x) => x.id === s.id)) continue;
     if (b[`s${i}_remove`] === 'true') continue;
+    if (s.dataset) {
+      // (sprint 110) a dataset: its columns are the dataset's (SQL Workshop → Data Reporter); label and description may differ here
+      const label = clip(b[`s${i}_label`], 80);
+      const description = clip(b[`s${i}_description`], 300);
+      sources.push({ id: s.id, dataset: s.dataset, ...(label ? { label } : {}), ...(description ? { description } : {}) } as Source);
+      continue;
+    }
     const obj = await lookup.byName(s.schema, s.table);
     const names = new Set(obj?.columns.map((c) => c.name));
     const columns: SourceColumn[] = [];
@@ -129,6 +143,17 @@ export async function mergeReporterSettings(
       sources.push({ id, label, schema: obj.schema, table: obj.table, columns });
     }
   }
+  // (sprint 110) a dataset of the workspace as a new source
+  if (b.new_dataset) {
+    const name = b.new_dataset.trim().toLowerCase();
+    if (!a.datasets?.has(name)) errors.push('Choose one of the workspace\'s datasets.');
+    else if (sources.length >= MAX_SOURCES) errors.push(`A region offers at most ${MAX_SOURCES} data sources.`);
+    else {
+      let id = name.slice(0, 36);
+      for (let n = 2; sources.some((s) => s.id === id); n++) id = `${name.slice(0, 36)}_${n}`;
+      sources.push({ id, dataset: name } as Source);
+    }
+  }
   if (sources.length) out.sources = sources;
   else delete out.sources;
   return { config: out, errors };
@@ -145,8 +170,23 @@ export async function reporterSettingsForm(pageId: number, appId: number, r: { i
   const objects = await objectList(app?.db_role ?? null);
   const sources = sourcesOf({ config: cfg });
   const sharing = cfg.sharing === false ? 'off' : typeof cfg.share_authz === 'string' && cfg.share_authz ? `authz:${cfg.share_authz}` : '';
+  const datasets = (await owner.query<{ name: string; label: string }>('select name, label from meta.dataset where workspace_id = meta.app_workspace($1) order by name', [appId])).rows;
   const sourceSets = await Promise.all(
     sources.map(async (src, i) => {
+      if (src.dataset) {
+        const d = datasets.find((x) => x.name === src.dataset);
+        return html`<fieldset class="prop-group"><legend>${src.label || d?.label || src.id} <span class="muted">(dataset ${src.dataset})</span></legend>
+          <input type="hidden" name="s${i}_key" value="${src.id}">
+          ${!d ? html`<div class="alert alert-error" role="alert">The workspace has no dataset ${src.dataset} (any more).</div>` : ''}
+          <div class="form-grid">
+            <div class="field"><label class="label" for="${id(`s${i}_id`)}">Static id</label><input id="${id(`s${i}_id`)}" value="${src.id}" readonly></div>
+            <div class="field"><label class="label" for="${id(`s${i}_label`)}">Label</label><input id="${id(`s${i}_label`)}" name="s${i}_label" maxlength="80" value="${src.label ?? ''}" placeholder="${d?.label ?? ''}"></div>
+            <div class="field" data-wide><label class="label" for="${id(`s${i}_description`)}">Description (shown to users)</label><input id="${id(`s${i}_description`)}" name="s${i}_description" maxlength="300" value="${src.description ?? ''}" placeholder="the dataset's"></div>
+          </div>
+          <p class="muted">Its tables, columns, labels, masks and row filter are the dataset's: <a href="${BASE}/reporter">App Builder → Data Reporter</a>.</p>
+          <div class="field"><label class="check"><input type="checkbox" name="s${i}_remove" value="true"> Remove this data source (users' reports on it stop working)</label></div>
+        </fieldset>`;
+      }
       const obj = await findObject(src.schema, src.table);
       const offered = new Map(src.columns.map((c) => [c.name, c]));
       const all = [...(obj?.columns ?? []).map((c) => ({ name: c.name, type: c.type, missing: false })),
@@ -184,6 +224,12 @@ export async function reporterSettingsForm(pageId: number, appId: number, r: { i
           <select id="${id('sharing')}" name="sharing">${opt('', 'Every signed-in user', sharing)}${opt('off', 'Nobody (private reports only)', sharing)}${schemes.map((n) => opt(`authz:${n}`, `Authorization: ${n}`, sharing))}</select></div>
         <div class="field"><label class="label" for="${id('page_size')}">Rows per page</label>
           <input id="${id('page_size')}" name="page_size" type="number" min="5" max="200" value="${cfg.page_size ?? ''}" placeholder="25"></div>
+        <div class="field"><label class="label" for="${id('edit_authz')}">Who may build and save reports</label>
+          <select id="${id('edit_authz')}" name="edit_authz">${opt('', 'Every user', cfg.edit_authz ?? '')}${schemes.map((n) => opt(n, `Authorization: ${n}`, cfg.edit_authz ?? ''))}</select>
+          <small class="help">Others only run shared reports.</small></div>
+        <div class="field"><label class="label" for="${id('admin_authz')}">Who may unpublish and delete anyone's reports</label>
+          <select id="${id('admin_authz')}" name="admin_authz">${opt('', 'Nobody', cfg.admin_authz ?? '')}${schemes.map((n) => opt(n, `Authorization: ${n}`, cfg.admin_authz ?? ''))}</select></div>
+        <div class="field"><label class="check"><input type="checkbox" name="publishing" value="true"${cfg.publishing === true ? raw(' checked') : ''}> Shared reports are published: a stable URL, pins</label></div>
         <div class="field" data-wide><label class="label" for="${id('empty')}">Text when there are no rows</label>
           <input id="${id('empty')}" name="empty" maxlength="200" value="${cfg.empty ?? ''}" placeholder="No data found"></div>
       </div></fieldset>
@@ -194,7 +240,9 @@ export async function reporterSettingsForm(pageId: number, appId: number, r: { i
         <div class="field"><label class="label" for="${id('new_id')}">Static id</label><input id="${id('new_id')}" name="new_id" maxlength="40" pattern="[a-z][a-z0-9_]*" placeholder="from the name"></div>
         <div class="field"><label class="label" for="${id('new_label')}">Label</label><input id="${id('new_label')}" name="new_label" maxlength="80"></div>
       </div>
-      <small class="help">All columns are offered at first (except binary ones); untick those users should not see. Prefer a view that shows exactly what business users may report on.</small></fieldset>
+      <small class="help">All columns are offered at first (except binary ones); untick those users should not see. Prefer a view that shows exactly what business users may report on.</small>
+      ${datasets.length ? html`<div class="form-grid"><div class="field" data-wide><label class="label" for="${id('new_dataset')}">Or a dataset of the workspace</label>
+        <select id="${id('new_dataset')}" name="new_dataset"><option value="">- none -</option>${datasets.map((d) => html`<option value="${d.name}">${d.label} (${d.name})</option>`)}</select></div></div>` : ''}</fieldset>
       <div class="buttons"><button class="btn btn-hot">Save Data Reporter settings</button></div>
     </form>`;
 }
@@ -210,7 +258,8 @@ export async function reporterBuilderRoutes(app: FastifyInstance) {
       : undefined;
     if (!r) return reply.code(404).send('Not found');
     const schemes = (await owner.query<{ name: string }>('select name from meta.authz_scheme where app_id = $1', [r.app_id])).rows;
-    const { config, errors } = await mergeReporterSettings(r.config ?? {}, (req.body ?? {}) as Body, { authz: new Set(schemes.map((x) => x.name.toUpperCase())) });
+    const datasets = (await owner.query<{ name: string }>('select name from meta.dataset where workspace_id = meta.app_workspace($1)', [r.app_id])).rows;
+    const { config, errors } = await mergeReporterSettings(r.config ?? {}, (req.body ?? {}) as Body, { authz: new Set(schemes.map((x) => x.name.toUpperCase())), datasets: new Set(datasets.map((x) => x.name)) });
     await owner.query('update meta.region set config = $2 where id = $1', [r.id, JSON.stringify(config)]);
     if (errors.length) flash(s, errors.join(' '), 'error');
     else flash(s, 'Settings saved.');

package/src/builder/routes.ts

@@ -43,11 +43,11 @@ export async function builderRoutes(app: FastifyInstance) {
     }
   };
   /** Where to go after signing in: a builder page only. */
-  const safeNext = (v: unknown) => (typeof v === 'string' && /^\/builder(\/[A-Za-z0-9_/-]{0,200})?$/.test(v) ? v : BASE);
+  const safeNext = (v: unknown) => (typeof v === 'string' && /^\/builder(\/[A-Za-z0-9_/-]{0,200})?$/.test(v) ? v : `${BASE}/home`);
 
   app.get(`${BASE}/login`, async (req: Req, reply) => {
     const s = await getSession(req, reply, null, BASE);
-    if (s.username) return reply.redirect(BASE);
+    if (s.username) return reply.redirect(`${BASE}/home`);
     const error = takeFlash(s, '__ERROR');
     await saveState(s);
     const r = remembered(req);
@@ -99,7 +99,7 @@ export async function builderRoutes(app: FastifyInstance) {
     const { username = '', password = '' } = req.body ?? {};
     const workspace = String(req.body?.workspace ?? '').trim().slice(0, 60);
     const next = safeNext(req.body?.next);
-    const again = next === BASE ? `${BASE}/login` : `${BASE}/login?next=${encodeURIComponent(next)}`;
+    const again = next === `${BASE}/home` ? `${BASE}/login` : `${BASE}/login?next=${encodeURIComponent(next)}`;
     const ip = clientIp(req);
     if (req.body?.__csrf !== s.csrf_token) {
       flash(s, 'Your session expired. Please try again.', 'error');

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

@@ -23,6 +23,7 @@ const TYPE_HELP: Record<AppType, string> = {
   theme: 'Its theme (colours, navigation, Theme Roller styles) and template components are offered to other applications.',
   library: 'Its lists of values, authorization schemes, build options, template components and lists are offered to other applications.',
   boilerplate: 'A starting point: Create application can copy it.',
+  reporting: 'Made by App Builder → Data Reporter on datasets of the workspace: its users build, publish and share reports.',
 };
 
 const what = (kind: Kind, name: string) => (kind === 'theme' ? 'Theme' : `${KINDS[kind].label} ${name}`);

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

package/src/builder/ui.ts

@@ -46,7 +46,7 @@ export async function send(reply: FastifyReply, s: Session, body: string) {
   return reply.type('text/html').send(body);
 }
 
-export type Section = 'apps' | 'users' | 'sql' | 'developers' | 'gallery';
+export type Section = 'home' | 'apps' | 'users' | 'sql' | 'developers' | 'gallery' | 'reporter';
 
 // ------------------------------------------------------------------ builder head
 // Builder-only stylesheets and scripts, loaded on every builder page after
@@ -105,21 +105,23 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
   const rail = (key: Section | 'search' | 'help', href: string, ic: string, label: string, extra: Raw | '' = '') =>
     html`<li><a href="${href}" class="rail-link" title="${label}"${section === key ? raw(' aria-current="page"') : ''}${extra}>${bicon(ic)}<span class="rail-label">${label}</span></a></li>`;
   const back = [...crumbs].reverse().find(([, href], i) => i > 0 && href);
-  // (sprint 74) the default-password warning: on the App Builder home and the Developers page only, until
+  // (sprint 74) the default-password warning: on the Workspace home (sprint 109), the App Builder home and the Developers page only, until
   // dismissed (for this sign-in); a dot on the avatar stays until the password is changed
   const weak = !!s.state.__WEAK;
-  const weakBanner = weak && !s.state.__WEAK_HIDDEN && crumbs.length === 1 && (crumbs[0][0] === 'App Builder' || crumbs[0][0] === 'Developers');
+  const weakBanner = weak && !s.state.__WEAK_HIDDEN && crumbs.length === 1 && (crumbs[0][0] === 'Home' || crumbs[0][0] === 'App Builder' || crumbs[0][0] === 'Developers');
   const themeButton = (t: BuilderTheme, ic: string, label: string) =>
     html`<button name="theme" value="${t}" aria-pressed="${theme === t ? 'true' : 'false'}">${bicon(ic)}<span>${label}</span></button>`;
   return documentShell(
     `${title} · Builder`,
     html`<a class="skip-link" href="#main">Skip to content</a>
     <nav class="ide-rail" aria-label="Builder">
-      <a class="rail-logo" href="${BASE}" title="pgkiln Builder">${brandMark()}<span class="sr-only">pgkiln Builder home</span></a>
+      <a class="rail-logo" href="${BASE}/home" title="pgkiln Builder">${brandMark()}<span class="sr-only">pgkiln Builder home</span></a>
       <ul class="rail-list">
-        ${rail('apps', BASE, 'builder', 'App Builder')}
+        ${rail('home', `${BASE}/home`, 'home', 'Home')}
+        ${rail('apps', `${BASE}/apps`, 'builder', 'App Builder')}
         ${s.workspace?.sql_workshop === false ? '' : rail('sql', `${BASE}/sql`, 'database', 'SQL Workshop')}
         ${rail('gallery', `${BASE}/gallery`, 'package', 'App Gallery')}
+        ${rail('reporter', `${BASE}/reporter`, 'pie-chart', 'Data Reporter')}
         ${appId ? rail('search', `${BASE}/apps/${appId}/search`, 'search', 'Search this application') : ''}
       </ul>
       <ul class="rail-list rail-bottom">

package/src/builder/worksheet.ts

@@ -17,6 +17,7 @@ import { formatSql } from '../sqlformat.ts';
 import { planView } from './plan-view.ts';
 import { unloadStatement } from '../unload.ts';
 import { recordChanges } from '../changelog.ts';
+import { accountRun, beginTxn, endAllTxns, endTxn, findTxn, outsideTxnOnly, txnIdleSeconds, txnNote, txnState, clearTxnNote, type WorksheetTxn } from '../worksheet-txn.ts';
 
 // (sprint 91, Database Actions DA-1/DA-2) The SQL Worksheet: one screen with a navigator (schema, object
 // type, filter; tables and views open to their columns and give SELECT / INSERT / UPDATE / DELETE
@@ -217,6 +218,47 @@ function outputPanes(run: WorksheetRun | null, mode: RunMode | null, history: Hi
   return { panes: { result, chart: chart ?? html`<p class="muted">Create Chart (Ctrl+F11) draws the last query: a label column and number columns.</p>`, output: log, notices, explain: planOf('explain', 'Explain Plan (F10) shows how PostgreSQL would run the statement at the cursor; nothing runs.'), autotrace: planOf('autotrace', 'Autotrace (F6) runs the statement at the cursor with EXPLAIN ANALYZE and rolls it back: actual rows, time and buffers per step.'), history: hist }, active, status };
 }
 
+/** (sprint 107) The idle timeout in words. */
+const idleLabel = () => {
+  const sec = txnIdleSeconds();
+  return sec % 60 ? `${sec} seconds` : `${sec / 60} minute${sec === 60 ? '' : 's'}`;
+};
+
+/** (sprint 107) The transaction badge's text (public/worksheet.js writes the same after a reload or a tab switch). */
+export function txnBadge(state: 'open' | 'aborted' | 'none', statements: number, startedMs: number | null, note: string | null): string {
+  if (state === 'none') return note ?? 'No open transaction';
+  const min = startedMs ? Math.floor((Date.now() - startedMs) / 60_000) : 0;
+  const age = min < 1 ? 'under a minute' : `${min} min`;
+  return `${state === 'aborted' ? 'Transaction failed' : 'Transaction open'} · ${statements} statement${statements === 1 ? '' : 's'} · ${age}`;
+}
+
+/** (sprint 107) Commit or Rollback a worksheet tab's transaction (the toolbar's buttons, and the JSON endpoint). */
+async function finishTxn(req: Req, s: Session, tab: string, t: WorksheetTxn | undefined, action: 'commit' | 'rollback'): Promise<{ ok: boolean; message: string; busy?: boolean }> {
+  if (!t) return { ok: false, message: 'This worksheet has no open transaction.' };
+  if (t.busy) return { ok: false, busy: true, message: 'A run is still going on in this worksheet: wait for it to finish.' };
+  const n = t.statements;
+  const failed = txnState(t) === 'aborted';
+  const ended = await endTxn(t, action);
+  clearTxnNote(s.id, tab);
+  if (ended.ddl.length) await recordChanges({ workspaceId: t.workspaceId, author: s.username ?? '?', source: 'worksheet', defaultSchema: t.defaultSchema, statements: ended.ddl });
+  await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), detail: ended.tag.toLowerCase() });
+  if (ended.error) return { ok: false, message: `${action.toUpperCase()} failed: ${ended.error}. The connection was closed, so the transaction is rolled back.` };
+  if (action === 'commit' && ended.tag !== 'COMMIT') return { ok: false, message: 'The transaction had failed, so COMMIT rolled it back: nothing was saved.' };
+  const what = `${n} statement${n === 1 ? '' : 's'}`;
+  return { ok: true, message: action === 'commit' ? `Committed (${what}).` : `Rolled back (${what} undone${failed ? '; the transaction had failed' : ''}).` };
+}
+
+/** (sprint 107) A tab's transaction as JSON, for the badge after a reload or a tab switch. */
+function txnStatus(s: Session, tab: string) {
+  const t = findTxn(s.id, tab);
+  const state = t && t.workspaceId === currentWorkspace(s) ? txnState(t) : 'none';
+  const note = state === 'none' ? txnNote(s.id, tab) : null;
+  return {
+    state, statements: t?.statements ?? 0, startedMs: t?.startedMs ?? null, lastMs: t?.lastMs ?? null, idleSeconds: txnIdleSeconds(),
+    runsAs: t?.runsAs ?? null, note, badge: txnBadge(state, t?.statements ?? 0, t?.startedMs ?? null, note), now: Date.now(),
+  };
+}
+
 /** The applications whose database role a run can take (the developer's workspace). */
 async function runAsApps(s: Session) {
   return (await owner.query<{ id: number; name: string; db_role: string }>(
@@ -339,7 +381,22 @@ async function worksheet(req: Req, reply: FastifyReply) {
       return {};
     }
   })();
-  if (isPost && text.trim() && !['nav', 'save', 'save_as', 'rename', 'download'].includes(String(body.mode ?? ''))) {
+  // (sprint 107, DA-2) transaction mode: the worksheet tab's open transaction (bound to this session)
+  const txnAsked = isPost && body.txn === 'on';
+  let txn: WorksheetTxn | undefined = tabKey ? findTxn(s.id, tabKey) : undefined;
+  let txnError = '';
+  let txnInfo = '';
+  if (txn && txn.workspaceId !== currentWorkspace(s)) {
+    await endTxn(txn, 'rollback', 'You switched workspaces: the transaction was rolled back.');
+    txn = undefined;
+  }
+  if (isPost && (body.mode === 'commit' || body.mode === 'rollback')) {
+    const done = await finishTxn(req, s, tabKey, txn, body.mode === 'commit' ? 'commit' : 'rollback');
+    if (!done.busy) txn = undefined;
+    if (done.ok) txnInfo = done.message;
+    else txnError = done.message;
+  }
+  if (isPost && text.trim() && !['nav', 'save', 'save_as', 'rename', 'download', 'commit', 'rollback'].includes(String(body.mode ?? ''))) {
     const m: RunMode = MODES.find((x) => x === body.mode) ?? 'statement';
     const allRows = body.mode === 'statement_all';
     chartAsked = body.mode === 'chart';
@@ -362,34 +419,88 @@ async function worksheet(req: Req, reply: FastifyReply) {
       ...x,
       sql: applyBinds(applySubstitutions(x.sql, Object.fromEntries(subs.map((n) => [n, value('sub', n)]))), Object.fromEntries(binds.map((n) => [n, value('bind', n)]))),
     }));
+    const explaining = m === 'explain' || m === 'autotrace';
+    // (sprint 107) which connection: the tab's transaction (open, or opened now), or one of its own
+    const useTxn = statements.length > 0 && txnAsked && (!explaining || (!!txn && txnState(txn) !== 'none'));
     if (statements.length) {
+      const blocked = txnAsked && !explaining ? statements.find((x) => !x.psql && outsideTxnOnly(x.sql)) : undefined;
+      if (txn && !txnAsked) txnError = 'This worksheet has an open transaction: Commit or Rollback it first, or switch back to Transaction.';
+      else if (txnAsked && !tabKey) txnError = 'Transaction mode needs JavaScript (the worksheet tab it belongs to); this run was refused.';
+      else if (txn && (asApp?.id ?? null) !== txn.asAppId) txnError = `This worksheet's transaction runs as ${txn.runsAs}: Commit or Rollback it before changing Run as.`;
+      else if (txn?.busy) txnError = 'A run is still going on in this worksheet: wait for it to finish.';
+      else if (blocked) txnError = `Line ${blocked.line}: ${outsideTxnOnly(blocked.sql)} can't run inside a transaction. Switch the worksheet to Autocommit to run it.`;
+    }
+    if (statements.length && !txnError) {
       ran = { start: statements[0].start, end: statements[statements.length - 1].end };
-      // a connection of its own, closed afterwards: the SQL may SET ROLE or change settings, which must not
-      // leak into the builder's pooled connections
-      const c = await (asApp ? await devDbForApp(asApp.id) : db).pool.connect();
       const started = performance.now();
-      try {
-        if (searchSchema) await c.query(`select set_config('search_path', $1, false)`, [`${pg.escapeIdentifier(searchSchema)}, public`]);
-        if (asApp) {
-          await c.query(`select set_config('pgkiln.app_id', $1, false)`, [String(asApp.id)]);
-          await c.query(`set role ${pg.escapeIdentifier(asApp.db_role)}`);
+      const runOn = (c: pg.ClientBase, inTxn: boolean) => explaining
+        ? explainStatement(c, statements[0], m === 'autotrace', inTxn)
+        : runStatements(c, text, statements, { continueOnError: m === 'script' && continueOnError, gridRows: allRows ? ALL_ROWS : GRID_ROWS });
+      const failedRun = (e: unknown): WorksheetRun => ({ results: [{ n: 1, line: statements[0].line, sql: statements[0].sql, start: 0, end: 0, status: 'error', error: (e as Error).message, ms: 0 }], notices: [], failed: 1, ms: 0 });
+      if (useTxn) {
+        if (!txn) {
+          const note = txnNote(s.id, tabKey);
+          const began = await beginTxn({ sessionId: s.id, username: s.username!, workspaceId: currentWorkspace(s), tab: tabKey, db: asApp ? await devDbForApp(asApp.id) : db,
+            asApp: asApp ?? null, runsAs: asApp ? `the role ${asApp.db_role} of ${asApp.name}` : workshopRunsAs(db), searchSchema });
+          if (typeof began === 'string') txnError = began;
+          else {
+            txn = began;
+            if (note) txnInfo = `${note} A new transaction started.`;
+          }
+        }
+        if (txn) {
+          const t = txn;
+          t.busy = true;
+          try {
+            run = await runOn(t.client, true);
+          } catch (e) {
+            run = failedRun(e);
+          } finally {
+            t.busy = false;
+            t.lastMs = Date.now();
+          }
+        }
+      } else {
+        // a connection of its own, closed afterwards: the SQL may SET ROLE or change settings, which must not
+        // leak into the builder's pooled connections
+        const c = await (asApp ? await devDbForApp(asApp.id) : db).pool.connect();
+        try {
+          if (searchSchema) await c.query(`select set_config('search_path', $1, false)`, [`${pg.escapeIdentifier(searchSchema)}, public`]);
+          if (asApp) {
+            await c.query(`select set_config('pgkiln.app_id', $1, false)`, [String(asApp.id)]);
+            await c.query(`set role ${pg.escapeIdentifier(asApp.db_role)}`);
+          }
+          run = await runOn(c, false);
+          // (sprint 107) a BEGIN typed in Autocommit lasts for the run only: say so when it was left open
+          if (!explaining && c.getTransactionStatus() !== 'I') {
+            await c.query('rollback').catch(() => {});
+            run.notices.push({ level: 'WARNING', message: 'The transaction started with BEGIN was still open at the end of the run and was rolled back. Switch the worksheet to Transaction to keep a transaction open between runs.', n: run.results.filter((r) => r.status !== 'not_run').length, at: new Date().toISOString().slice(11, 23) });
+          }
+        } catch (e) {
+          run = failedRun(e);
+        } finally {
+          c.release(true);
         }
-        run = m === 'explain' || m === 'autotrace'
-          ? await explainStatement(c, statements[0], m === 'autotrace')
-          : await runStatements(c, text, statements, { continueOnError: m === 'script' && continueOnError, gridRows: allRows ? ALL_ROWS : GRID_ROWS });
-      } catch (e) {
-        run = { results: [{ n: 1, line: statements[0].line, sql: statements[0].sql, start: 0, end: 0, status: 'error', error: (e as Error).message, ms: 0 }], notices: [], failed: 1, ms: 0 };
-      } finally {
-        c.release(true);
       }
       // the log and history show the statements as written (with :NAME), not with the values
       if (run) for (const r of run.results) r.sql = picked[r.n - 1]?.sql ?? r.sql;
-      if (mode === 'statement' || mode === 'script') {
+      // (sprint 107) the transaction's statements and DDL; a COMMIT / ROLLBACK typed in the editor ended it
+      let committedDdl: string[] | null = null;
+      if (txn && run && !explaining) {
+        committedDdl = accountRun(txn, run.results);
+        if (txnState(txn) === 'none' && findTxn(s.id, tabKey) === txn) {
+          await endTxn(txn, 'rollback'); // nothing open: just closes the connection
+          txn = undefined;
+          txnInfo = 'The transaction ended with the COMMIT or ROLLBACK in the editor; the next run starts a new one.';
+        }
+      }
+      if (txn && findTxn(s.id, tabKey) !== txn) txn = undefined; // the database ended the connection
+      if (run && (mode === 'statement' || mode === 'script')) {
         clearCompletions(); // the statements may have changed tables or grants
-        if (run) await recordHistory(s, run);
-        // (sprint 106, DA-17) the DDL that succeeded goes into the change log
-        if (run) await recordChanges({ workspaceId: currentWorkspace(s), author: s.username ?? '?', source: 'worksheet', defaultSchema: searchSchema ?? 'public',
-          statements: run.results.filter((r) => r.status === 'ok').map((r) => r.sql) });
+        await recordHistory(s, run);
+        // (sprint 106, DA-17) the DDL that succeeded goes into the change log (in a transaction: when it commits)
+        await recordChanges({ workspaceId: currentWorkspace(s), author: s.username ?? '?', source: 'worksheet', defaultSchema: searchSchema ?? 'public',
+          statements: committedDdl ?? run.results.filter((r) => r.status === 'ok').map((r) => r.sql) });
         const detail = picked.map((x) => x.sql).join(';\n');
         await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), elapsedMs: Math.round(performance.now() - started), detail: detail.length > 2000 ? `${detail.slice(0, 2000)}…` : detail });
       }
@@ -435,6 +546,12 @@ async function worksheet(req: Req, reply: FastifyReply) {
       <div class="buttons"><button class="btn btn-hot" name="mode" value="${askValues.mode}">${icon('play')} Run</button><button class="btn" name="mode" value="nav" data-ws-binds-cancel>Cancel</button></div>
     </dialog>` : '';
   const runsAs = asApp ? `the role ${asApp.db_role} of ${asApp.name}` : workshopRunsAs(db);
+  // (sprint 107) the transaction badge: the real state of the tab's transaction on the server
+  const tState = txnState(txn);
+  const tNote = !txn && tabKey ? txnNote(s.id, tabKey) : null;
+  if (tState === 'aborted' && !txnError) txnError = 'A statement failed, so the transaction is aborted: Rollback ends it (COMMIT would roll it back too).';
+  const txnOn = txnAsked || !!txn;
+  const badge = txnBadge(tState, txn?.statements ?? 0, txn?.startedMs ?? null, tNote);
 
   const toolBtn = (m: RunMode, ic: string, label: string, key: string, hot = false) =>
     html`<button class="btn btn-sm${hot ? ' btn-hot' : ''}" name="mode" value="${m}" title="${label} (${key})" data-ws-key="${key}">${icon(ic)}<span>${label}</span></button>`;
@@ -506,6 +623,13 @@ async function worksheet(req: Req, reply: FastifyReply) {
             </dl>
             <label class="ws-kwcase" hidden>Format keywords in <select data-ws-kwcase><option value="lower">lower case</option><option value="upper">UPPER CASE</option></select></label>
             <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#sql-workshop" target="_blank" rel="noopener" data-ws-help>Help on the SQL Worksheet</a></div></div></details>
+          <span class="ws-txn" data-ws-txn data-state="${tState}" data-statements="${txn?.statements ?? 0}" data-started="${txn?.startedMs ?? ''}" data-last="${txn?.lastMs ?? ''}" data-idle="${txnIdleSeconds()}" data-note="${tNote ?? ''}" data-now="${Date.now()}" hidden>
+            <label class="ws-runas"><span>Commit</span><select name="txn" data-ws-txn-mode title="Autocommit: each statement commits on its own. Transaction: the statements stay in one transaction until Commit or Rollback.">
+              <option value="">Autocommit</option><option value="on"${txnOn ? raw(' selected') : ''}>Transaction</option></select></label>
+            <span class="ws-txn-badge" data-ws-txn-badge data-state="${tState}" role="status" title="${tState === 'none' ? '' : `Runs as ${txn?.runsAs ?? ''}`}">${badge}</span>
+            <button class="btn btn-sm" name="mode" value="commit" data-ws-txn-commit title="Commit the worksheet's transaction"${txn ? '' : raw(' disabled')}>${icon('check')}<span>Commit</span></button>
+            <button class="btn btn-sm" name="mode" value="rollback" data-ws-txn-rollback title="Roll back the worksheet's transaction"${txn ? '' : raw(' disabled')}>${icon('undo')}<span>Rollback</span></button>
+          </span>
           <label class="ws-runas"><span>Run as</span>
             <select name="as_app" title="Who the statements run as">
               <option value="">${db === owner ? 'Owner connection' : 'Workspace login'}</option>
@@ -514,9 +638,12 @@ async function worksheet(req: Req, reply: FastifyReply) {
           <button type="button" class="btn btn-sm btn-icon" data-ws-clear title="Clear the editor" hidden>${icon('trash')}<span class="sr-only">Clear</span></button>
           <button type="button" class="btn btn-sm btn-icon" data-ws-fullscreen title="Fullscreen (Escape leaves)" aria-pressed="false" hidden>${bicon('expand')}<span class="sr-only">Fullscreen</span></button>
         </div>
-        <p class="ws-runs-as muted small">Runs as ${runsAs}${searchSchema ? html`; <code>${searchSchema}</code> first in the search path (<a href="${BASE}/sql">change</a>)` : ''}. Each statement commits on its own.</p>
+        <p class="ws-runs-as muted small">Runs as ${runsAs}${searchSchema ? html`; <code>${searchSchema}</code> first in the search path (<a href="${BASE}/sql">change</a>)` : ''}. <span data-ws-commit-note>${txnOn
+          ? `The statements stay in one transaction until Commit or Rollback; it is rolled back after ${idleLabel()} without a run.`
+          : 'Each statement commits on its own.'}</span></p>
         ${fileError ? html`<p class="alert alert-error ws-file-error" role="alert">${fileError}</p>` : ''}
-        <div class="ws-wtabs" role="tablist" aria-label="Worksheets" hidden></div>
+        ${txnError ? html`<p class="alert alert-error ws-txn-alert" role="alert">${txnError}</p>` : txnInfo ? html`<p class="alert alert-info ws-txn-alert" role="status">${txnInfo}</p>` : ''}
+        <div class="ws-wtabs" role="group" aria-label="Worksheets" hidden></div>
         <div class="ws-findbar" hidden>
           <label class="sr-only" for="ws-find-q">Find</label><input id="ws-find-q" type="search" placeholder="Find" autocomplete="off" data-ws-find-q>
           <label class="sr-only" for="ws-find-r">Replace with</label><input id="ws-find-r" placeholder="Replace with" autocomplete="off" data-ws-find-r>
@@ -553,6 +680,27 @@ export async function worksheetRoutes(app: FastifyInstance) {
   // (before sprint 61 SQL Commands was /builder/sql: a post there still runs)
   app.post(`${BASE}/sql`, worksheet);
 
+  // (sprint 107, DA-2) transaction mode: a tab's transaction (the badge), Commit / Rollback without a reload (closing a
+  // worksheet tab, switching to Autocommit). Always the caller's own session: another developer's tab doesn't exist here.
+  app.get(`${BASE}/sql/worksheet/txn`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tab = String(req.query?.tab ?? '');
+    if (!/^[a-z0-9]{1,20}$/.test(tab)) return reply.code(400).send({ error: 'Which worksheet?' });
+    return reply.header('Cache-Control', 'no-store').send(txnStatus(s, tab));
+  });
+  app.post(`${BASE}/sql/worksheet/txn`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tab = String(req.body?.tab ?? '');
+    const action = req.body?.action;
+    if (!/^[a-z0-9]{1,20}$/.test(tab) || (action !== 'commit' && action !== 'rollback')) return reply.code(400).send({ error: 'Which worksheet, and commit or rollback?' });
+    const t = findTxn(s.id, tab);
+    const done = await finishTxn(req, s, tab, t && t.workspaceId === currentWorkspace(s) ? t : undefined, action);
+    return reply.code(done.busy ? 409 : 200).header('Cache-Control', 'no-store').send({ ...done, ...txnStatus(s, tab) });
+  });
+  app.addHook('onClose', async () => endAllTxns());
+
   // (sprint 93, DA-9) Format: the worksheet's text laid out, keywords in the case asked for
   app.post(`${BASE}/sql/worksheet/format`, async (req: Req, reply) => {
     const s = await developer(req, reply);