pgkiln 0.45.0 → 0.47.0

package/src/builder/sql.ts

@@ -7,12 +7,15 @@ import { owner } from '../db.ts';
 import { clientIp, logActivity, type Session } from '../session.ts';
 import { clearCompletions } from './code-editor.ts';
 import { scriptRoutes } from './scripts.ts';
+import { worksheetRoutes } from './worksheet.ts';
 import { quickSqlRoutes } from './quicksql.ts';
 import { queryBuilderRoutes } from './querybuilder.ts';
 import { unloadRoutes } from './unload.ts';
 import { ddlToolRoutes } from './ddl-tools.ts';
 import { sqlUtilityRoutes } from './sql-utilities.ts';
 import { createTemplate, objectBrowserRoutes } from './object-browser.ts';
+import { objectActionRoutes } from './object-actions.ts';
+import { tableEditorRoutes } from './table-editor.ts';
 import { currentWorkspace, sessionSchema, usableSchemas, workshopDb, workshopRunsAs } from './workspaces.ts';
 
 // SQL Workshop: SQL commands and the object browser (owner connection; an isolated
@@ -53,29 +56,29 @@ async function workshopHome(req: Req, reply: FastifyReply) {
   ]);
   const tile = (href: string, ic: string, title: string, text: string) =>
     html`<a class="ab-tile sw-tile" href="${BASE}${href}"><span class="ab-tile-icon sw-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`;
-  const list = (title: string, rows: Raw[], empty: string) =>
+  const list = (title: string | Raw, rows: Raw[], empty: string) =>
     html`<section class="sw-recent"><h2>${title}</h2>${rows.length ? html`<ul>${rows}</ul>` : html`<p class="muted">${empty}</p>`}</section>`;
   const main = html`<div class="ab-home">
     <div class="ab-main">
       <h1 class="sr-only">SQL Workshop</h1>
       ${workshopTabs('home')}
       <div class="ab-tiles sw-tiles">
+        ${tile('/sql/worksheet', 'code', 'SQL Worksheet', 'Run statements and scripts, with a navigator, plans and history.')}
         ${tile('/sql/objects', 'search', 'Object Browser', 'Browse tables, views and functions, their policies, grants and data.')}
-        ${tile('/sql/commands', 'code', 'SQL Commands', 'Run SQL statements against your schemas.')}
         ${tile('/sql/scripts', 'file', 'SQL Scripts', 'Create, upload and run stored SQL scripts.')}
         ${tile('/sql/utilities', 'wrench', 'Utilities', 'Load and unload data, sample data, DDL, schema comparison, object reports and the database.')}
         ${tile('/sql/quick', 'bolt', 'Quick SQL', 'Write a data model in shorthand and get the DDL.')}
       </div>
       <div class="sw-recents">
         ${list('Recently created tables', tables.rows.map((t) => html`<li><a href="${BASE}/sql/objects?o=${encodeURIComponent(t.qname)}">${t.qname}</a><span class="muted">~${Number(t.rows).toLocaleString('en')} rows</span></li>`), 'No tables you can read.')}
-        ${list('Recent SQL commands', commands.rows.map((c) => html`<li><a href="${BASE}/sql/commands?recent=${c.id}" title="${c.detail.slice(0, 500)}">${c.detail.replace(/\s+/g, ' ').slice(0, 60)}</a><span class="muted">${ago(c.at)}</span></li>`), 'You haven\'t run SQL commands yet.')}
+        ${list(html`<a href="${BASE}/sql/worksheet?tab=history" title="Open SQL History">Recent SQL commands</a>`, commands.rows.map((c) => html`<li><a href="${BASE}/sql/worksheet?recent=${c.id}" title="${c.detail.slice(0, 500)}">${c.detail.replace(/\s+/g, ' ').slice(0, 60)}</a><span class="muted">${ago(c.at)}</span></li>`), 'You haven\'t run SQL commands yet.')}
         ${list('Recent SQL scripts', scripts.rows.map((x) => html`<li><a href="${BASE}/sql/scripts/${x.id}">${x.name}</a><span class="muted">${ago(x.updated_at)}</span></li>`), 'No scripts in this workspace yet.')}
       </div>
     </div>
     <aside class="ab-side" aria-label="About, schema and tasks">
       <section><h2>About</h2><p>The SQL Workshop is a collection of tools to manage database objects. It runs as ${workshopRunsAs(db)}.</p>
         <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#sql-workshop" target="_blank" rel="noopener">Learn more …</a></section>
-      <section><h2>Schema</h2><p>The default schema of this session: first in the search path of SQL Commands and SQL Scripts.</p>
+      <section><h2>Schema</h2><p>The default schema of this session: first in the search path of the SQL Worksheet and SQL Scripts.</p>
         <form method="post" action="${BASE}/sql/schema" class="sw-schema">${csrf(s)}
           <label class="sr-only" for="f_schema">Schema</label>
           <select id="f_schema" name="schema" data-autosubmit><option value="">(the default search path)</option>${schemas.map((n) => html`<option value="${n}"${n === schema ? raw(' selected') : ''}>${n}</option>`)}</select>
@@ -102,76 +105,11 @@ export async function sqlRoutes(app: FastifyInstance) {
   // Generate DDL and Schema Comparison (sprint 56)
   await app.register(ddlToolRoutes);
   await app.register(sqlUtilityRoutes);
-  // ---------------------------------------------------------------- SQL workshop
-  const resultTable = (res: pg.QueryResult<any[]>, limit = 500) => {
-    const rows = (res.rows ?? []).slice(0, limit);
-    return html`<div class="table-wrap"><table class="report"><thead><tr>${res.fields.map((f) => html`<th>${f.name}</th>`)}</tr></thead>
-      <tbody>${rows.map((r) => html`<tr>${r.map((v) => html`<td>${v === null ? html`<span class="null">null</span>` : typeof v === 'object' ? JSON.stringify(v) : String(v)}</td>`)}</tr>`)}</tbody></table></div>`;
-  };
-
-  const sqlWorkshop = async (req: Req, reply: FastifyReply) => {
-    const s = await developer(req, reply);
-    if (!s) return;
-    const sql = req.body?.sql ?? '';
-    let result: Raw | '' = '';
-    const db = await workshopDb(s);
-    // (sprint 61) a command from the home page's Recent SQL Commands (the developer's own)
-    let text = sql;
-    if (req.method === 'GET' && /^\d{1,18}$/.test(String(req.query?.recent ?? ''))) {
-      const r = await owner.one<{ detail: string }>(`select detail from meta.activity_log where id = $1 and username = $2 and event = 'sql_command'`, [req.query!.recent, s.username]);
-      if (r) text = r.detail;
-    }
-    const schema = await sessionSchema(s, db);
-    if (req.method === 'GET') {
-      // (sprint 75) a statement to review: from the Object Browser's column actions, or a CREATE template
-      if (typeof s.state.__SQLDRAFT === 'string') {
-        text = s.state.__SQLDRAFT;
-        delete s.state.__SQLDRAFT;
-      } else if (typeof req.query?.template === 'string') {
-        const into = typeof req.query.schema === 'string' && (await usableSchemas(db)).includes(req.query.schema) ? req.query.schema : (schema ?? 'public');
-        text = createTemplate(req.query.template, into) ?? text;
-      }
-    }
-    if (req.method === 'POST' && sql.trim()) {
-      const started = performance.now();
-      try {
-        // a connection of its own, closed afterwards: the SQL may SET ROLE or change settings,
-        // which must not leak into the builder's pooled owner connections
-        const c = await db.pool.connect();
-        let out;
-        try {
-          if (schema) await c.query(`select set_config('search_path', $1, false)`, [`${pg.escapeIdentifier(schema)}, public`]);
-          out = await c.query({ text: sql, rowMode: 'array' });
-        } finally {
-          c.release(true);
-        }
-        const res = Array.isArray(out) ? out[out.length - 1] : out;
-        const ms = (performance.now() - started).toFixed(0);
-        result = res.fields?.length
-          ? html`<p class="muted">${res.rowCount} row(s) in ${ms} ms${res.rows.length > 500 ? ' (showing 500)' : ''}</p>${resultTable(res)}`
-          : html`<div class="alert alert-success">${res.command ?? 'Statement'} completed${res.rowCount !== null ? `, ${res.rowCount} row(s)` : ''} in ${ms} ms.</div>`;
-      } catch (e) {
-        result = html`<div class="alert alert-error"><strong>Error:</strong> ${(e as Error).message}</div>`;
-      }
-      clearCompletions(); // the script may have changed tables or grants
-      await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), elapsedMs: Math.round(performance.now() - started), detail: sql.length > 2000 ? `${sql.slice(0, 2000)}…` : sql });
-    }
-    const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('sql')}
-      <p class="muted">Runs as ${workshopRunsAs(db)} (not as an application role)${schema ? html`, schema <code>${schema}</code> first in the search path (<a href="${BASE}/sql">change</a>)` : ''}. Multiple statements are allowed; results of the last one are shown.</p>
-      <form method="post" action="${BASE}/sql/commands">${csrf(s)}
-        <textarea name="sql" class="code sql-editor" rows="12" spellcheck="false" aria-label="SQL" data-code="plpgsql">${text || 'select current_user, version();'}</textarea>
-        <div class="buttons"><button class="btn btn-hot">${icon('play')} Run (Ctrl+Enter)</button></div>
-      </form>
-      <div class="u-mt1">${result}</div>`;
-    return send(reply, s, shell(s, 'SQL Workshop', [['SQL Workshop']], main, 'sql'));
-  };
-  app.get(`${BASE}/sql/commands`, sqlWorkshop);
-  app.post(`${BASE}/sql/commands`, sqlWorkshop);
-  // (before sprint 61 SQL Commands was /builder/sql: a post there still runs)
-  app.post(`${BASE}/sql`, sqlWorkshop);
+  // (sprint 91) the SQL Worksheet (was SQL Commands; /sql/commands and a post to /sql are the same page)
+  await app.register(worksheetRoutes);
   app.get(`${BASE}/sql`, workshopHome);
 
-  // (sprint 61) the session's default schema: first in the search path of SQL Commands and SQL Scripts
+  // (sprint 61) the session's default schema: first in the search path of the SQL Worksheet and SQL Scripts
   app.post(`${BASE}/sql/schema`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
@@ -180,10 +118,14 @@ export async function sqlRoutes(app: FastifyInstance) {
     if (wanted && !usable.includes(wanted)) return reply.code(404).send('Not found');
     if (wanted) s.state.__SQLSCHEMA = wanted;
     else delete s.state.__SQLSCHEMA;
-    flash(s, wanted ? `Schema ${wanted} first in the search path of SQL Commands and SQL Scripts.` : 'The default search path again.');
+    flash(s, wanted ? `Schema ${wanted} first in the search path of the SQL Worksheet and SQL Scripts.` : 'The default search path again.');
     return back(reply, s, `${BASE}/sql`);
   });
 
   // (sprint 75) the Object Browser: object-browser.ts
   await app.register(objectBrowserRoutes);
+  // (sprint 94) an object's menu: Quick DDL, Drop, Add index / trigger / policy, Open in a panel
+  await app.register(objectActionRoutes);
+  // (sprint 95) Table Properties: create, edit or copy a table in a form
+  await app.register(tableEditorRoutes);
 }

package/src/builder/table-editor.ts

@@ -0,0 +1,219 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { esc, html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
+import { back, BASE, csrf, developer, flash, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
+import { SYSTEM_SCHEMAS } from './object-browser.ts';
+import { clearCompletions } from './code-editor.ts';
+import { usableSchemas, workshopDb } from './workspaces.ts';
+import { checkTable, emptyTable, ON_DELETE, readTable, tableSql, type ColumnDef, type TableDef } from '../tabledef.ts';
+
+// (sprint 95, Database Actions DA-8: Table Properties) Create a table, edit one, or start from one as a template, in
+// a form: columns (name, type, not null, default, identity, comment, primary key), unique keys, foreign keys,
+// checks, indexes, the comment, row level security and, for a new table, partitioning. Preview DDL shows the exact
+// CREATE or ALTER statements; Apply runs them in one transaction with the workshop's connection (nothing is
+// changed when one fails); Open in the worksheet puts them there to review. The form posts the whole definition;
+// readTable() gives the table as it is now, so the statements are always made against the catalog, not against
+// what the page showed. Without JavaScript the sections stack and spare empty rows add columns and keys.
+
+const SPARE = 3; // empty rows for new columns, keys, checks and indexes (the page adds more with script)
+const TYPES = ['bigint', 'integer', 'smallint', 'numeric', 'numeric(12,2)', 'real', 'double precision', 'text', 'varchar(200)', 'char(1)', 'boolean', 'date',
+  'timestamp', 'timestamptz', 'time', 'interval', 'uuid', 'jsonb', 'json', 'bytea', 'inet', 'text[]', 'integer[]'];
+
+const rows = (b: Body, prefix: string) => {
+  const ix = [...new Set(Object.keys(b).map((k) => new RegExp(`^${prefix}\\.(\\d{1,3})\\.`).exec(k)?.[1]).filter((x): x is string => !!x))].map(Number).sort((x, y) => x - y);
+  return ix.map((i) => (f: string) => String(b[`${prefix}.${i}.${f}`] ?? '').trim());
+};
+
+/** The definition the form posted; generated expressions and indexes the form can't edit come from the table as it is. */
+function fromForm(b: Body, schema: string, old: TableDef | null): TableDef {
+  const def = emptyTable(schema);
+  def.name = String(b.name ?? '').trim();
+  def.comment = String(b.comment ?? '').trim();
+  def.pkName = String(b.pk_name ?? '').trim();
+  def.rls = b.rls === 'on';
+  def.forceRls = b.force_rls === 'on';
+  if (!old) {
+    def.partitionBy = (['range', 'list', 'hash'] as const).find((x) => x === b.part_by) ?? '';
+    def.partitionKey = def.partitionBy ? String(b.part_key ?? '').trim() : '';
+  }
+  for (const r of rows(b, 'col')) {
+    if (r('drop') === 'on' || (!r('name') && !r('type'))) continue;
+    const orig = old?.columns.find((c) => c.orig === r('orig')) ? r('orig') : '';
+    const was = old?.columns.find((c) => c.orig === orig);
+    const identity = r('identity') === 'always' || r('identity') === 'by default' ? (r('identity') as ColumnDef['identity']) : '';
+    def.columns.push({ name: r('name'), orig, type: r('type'), notNull: r('nn') === 'on', default: r('def'), identity, generated: was?.generated ?? '', comment: r('comment'), pk: r('pk') === 'on' });
+  }
+  for (const r of rows(b, 'uk')) if (r('drop') !== 'on' && (r('name') || r('cols'))) def.uniques.push({ name: r('name'), columns: r('cols') });
+  for (const r of rows(b, 'fk')) if (r('drop') !== 'on' && (r('name') || r('cols'))) def.fks.push({ name: r('name'), columns: r('cols'), refTable: r('ref'), refColumns: r('refcols'), onDelete: r('del') || 'no action' });
+  for (const r of rows(b, 'ck')) if (r('drop') !== 'on' && (r('name') || r('expr'))) def.checks.push({ name: r('name'), expr: r('expr') });
+  for (const r of rows(b, 'ix')) if (r('drop') !== 'on' && (r('name') || r('cols'))) def.indexes.push({ name: r('name'), columns: r('cols'), unique: r('unique') === 'on' });
+  // indexes the form can't express stay as they are
+  for (const i of old?.indexes ?? []) if (i.fixed) def.indexes.push(i);
+  return def;
+}
+
+/** A copy of a table under a new name, for "Use as template": new names for its constraints and indexes too. */
+function asTemplate(t: TableDef): TableDef {
+  const name = `${t.name}_copy`.slice(0, 63);
+  const rename = (n: string) => (n.includes(t.name) ? n.replace(t.name, name) : `${n}_copy`).slice(0, 63);
+  return {
+    ...structuredClone(t), name, pkName: t.pkName ? rename(t.pkName) : '',
+    columns: t.columns.map((c) => ({ ...c, orig: '' })),
+    uniques: t.uniques.map((k) => ({ ...k, name: rename(k.name) })),
+    fks: t.fks.map((k) => ({ ...k, name: rename(k.name) })),
+    checks: t.checks.map((k) => ({ ...k, name: rename(k.name) })),
+    indexes: t.indexes.filter((i) => !i.fixed).map((i) => ({ ...i, name: rename(i.name) })),
+  };
+}
+
+async function tables(db: Awaited<ReturnType<typeof workshopDb>>) {
+  return (await db.query<{ q: string }>(
+    `select c.oid::regclass::text as q from pg_class c join pg_namespace n on n.oid = c.relnamespace
+      where c.relkind in ('r', 'p') and not c.relispartition and n.nspname !~ '^pg_' and n.nspname <> 'information_schema' and not (n.nspname = any ($1))
+        and has_schema_privilege(n.oid, 'USAGE') order by 1 limit 2000`, [SYSTEM_SCHEMAS])).rows.map((r) => r.q);
+}
+
+function form(s: Session, def: TableDef, opts: { editing: TableDef | null; schemas: string[]; refTables: string[]; ddl: string[]; errors: string[]; output: Raw | ''; tab: string; ref: string }): Raw {
+  const { editing } = opts;
+  const chk = (on: boolean) => (on ? raw(' checked') : '');
+  const sel = (v: string, cur: string) => (v === cur ? raw(' selected') : '');
+  const typeList = html`<datalist id="te-types">${TYPES.map((t) => html`<option value="${t}">`)}</datalist>`;
+  const colRow = (c: ColumnDef | null, i: number) => html`<tr class="te-row${c ? '' : ' te-spare'}">
+      <td class="te-move"><button type="button" class="btn btn-sm btn-icon" data-te-up title="Move up" hidden>↑</button><button type="button" class="btn btn-sm btn-icon" data-te-down title="Move down" hidden>↓</button></td>
+      <td><input type="hidden" name="col.${i}.orig" value="${c?.orig ?? ''}"><input id="te-c${i}-name" aria-label="Name" name="col.${i}.name" value="${c?.name ?? ''}" autocomplete="off" spellcheck="false"></td>
+      <td><input id="te-c${i}-type" aria-label="Type" name="col.${i}.type" value="${c?.type ?? ''}" list="te-types" autocomplete="off" spellcheck="false"></td>
+      <td class="te-c"><input type="checkbox" aria-label="Primary key" id="te-c${i}-pk" name="col.${i}.pk"${chk(!!c?.pk)}></td>
+      <td class="te-c"><input type="checkbox" aria-label="Not null" id="te-c${i}-nn" name="col.${i}.nn"${chk(!!c?.notNull)}></td>
+      <td>${c?.generated
+        ? html`<code class="te-generated" title="Generated (stored)">= ${c.generated}</code><input type="hidden" name="col.${i}.def" value="">`
+        : html`<input id="te-c${i}-def" aria-label="Default" name="col.${i}.def" value="${c?.default ?? ''}" class="code" spellcheck="false">`}</td>
+      <td><select id="te-c${i}-id" aria-label="Identity" name="col.${i}.identity"><option value="">-</option><option value="by default"${sel('by default', c?.identity ?? '')}>by default</option><option value="always"${sel('always', c?.identity ?? '')}>always</option></select></td>
+      <td><input id="te-c${i}-cm" aria-label="Comment" name="col.${i}.comment" value="${c?.comment ?? ''}"></td>
+      <td class="te-c"><label class="te-drop"><input type="checkbox" name="col.${i}.drop"><span>Remove</span></label></td></tr>`;
+  const simpleRows = <T,>(list: T[], prefix: string, cells: (x: T | null, i: number) => Raw) =>
+    [...list, ...Array<null>(SPARE).fill(null)].map((x, i) => html`<tr class="te-row${x ? '' : ' te-spare'}">${cells(x, i)}<td class="te-c"><label class="te-drop"><input type="checkbox" name="${prefix}.${i}.drop"><span>Remove</span></label></td></tr>`);
+  // extra: attributes written by this file (constants, or values escaped with esc())
+  const input = (name: string, value: string, label: string, extra = '') => html`<input id="te-${name}" aria-label="${label}" name="${name}" value="${value}" autocomplete="off" spellcheck="false"${extra ? raw(` ${extra}`) : ''}>`;
+  const sections: [string, string, Raw][] = [
+    ['columns', 'Columns', html`<div class="table-wrap"><table class="report te-table" data-te-grid="col"><thead><tr><th></th><th>Name</th><th>Type</th><th>Key</th><th>Not null</th><th>Default</th><th>Identity</th><th>Comment</th><th></th></tr></thead>
+      <tbody>${[...def.columns, ...Array<null>(SPARE).fill(null)].map((c, i) => colRow(c, i))}</tbody></table></div>
+      <div class="buttons"><button type="button" class="btn btn-sm" data-te-add="col" hidden>${icon('plus')} Add column</button></div>
+      <div class="field u-mt1"><label class="label" for="te-pk_name">Primary key name</label>${input('pk_name', def.pkName, 'Primary key name', `placeholder="${esc(def.name ? `${def.name}_pkey` : 'table_pkey')}"`)}<small class="help">Tick Key on the columns of the primary key.</small></div>`],
+    ['keys', 'Unique keys', html`<div class="table-wrap"><table class="report te-table" data-te-grid="uk"><thead><tr><th>Name</th><th>Columns (comma-separated)</th><th></th></tr></thead><tbody>
+      ${simpleRows(def.uniques, 'uk', (k, i) => html`<td>${input(`uk.${i}.name`, k?.name ?? '', 'Name')}</td><td>${input(`uk.${i}.cols`, k?.columns ?? '', 'Columns')}</td>`)}</tbody></table></div>`],
+    ['fks', 'Foreign keys', html`<div class="table-wrap"><table class="report te-table" data-te-grid="fk"><thead><tr><th>Name</th><th>Columns</th><th>References</th><th>Their columns</th><th>On delete</th><th></th></tr></thead><tbody>
+      ${simpleRows(def.fks, 'fk', (f, i) => html`<td>${input(`fk.${i}.name`, f?.name ?? '', 'Name')}</td><td>${input(`fk.${i}.cols`, f?.columns ?? '', 'Columns')}</td>
+        <td><select id="te-fk${i}-ref" aria-label="References" name="fk.${i}.ref"><option value="">-</option>${opts.refTables.map((t) => html`<option value="${t}"${sel(t, f?.refTable ?? '')}>${t}</option>`)}</select></td>
+        <td>${input(`fk.${i}.refcols`, f?.refColumns ?? '', 'Their columns', 'placeholder="its primary key"')}</td>
+        <td><select id="te-fk${i}-del" aria-label="On delete" name="fk.${i}.del">${ON_DELETE.map((d) => html`<option value="${d}"${sel(d, f?.onDelete ?? 'no action')}>${d}</option>`)}</select></td>`)}</tbody></table></div>`],
+    ['checks', 'Checks', html`<div class="table-wrap"><table class="report te-table" data-te-grid="ck"><thead><tr><th>Name</th><th>Condition</th><th></th></tr></thead><tbody>
+      ${simpleRows(def.checks, 'ck', (k, i) => html`<td>${input(`ck.${i}.name`, k?.name ?? '', 'Name')}</td><td>${input(`ck.${i}.expr`, k?.expr ?? '', 'Condition', 'class="code" placeholder="salary &gt;= 0"')}</td>`)}</tbody></table></div>`],
+    ['indexes', 'Indexes', html`<div class="table-wrap"><table class="report te-table" data-te-grid="ix"><thead><tr><th>Name</th><th>Columns or expressions</th><th>Unique</th><th></th></tr></thead><tbody>
+      ${simpleRows(def.indexes.filter((i) => !i.fixed), 'ix', (x, i) => html`<td>${input(`ix.${i}.name`, x?.name ?? '', 'Name')}</td><td>${input(`ix.${i}.cols`, x?.columns ?? '', 'Columns', 'class="code" placeholder="lower(name), created_at desc"')}</td>
+        <td class="te-c"><input type="checkbox" aria-label="Unique" id="te-ix${i}-u" name="ix.${i}.unique"${chk(!!x?.unique)}></td>`)}</tbody></table></div>
+      ${def.indexes.some((i) => i.fixed) ? html`<p class="muted small">Kept as they are (another method or a condition): ${def.indexes.filter((i) => i.fixed).map((i) => html`<code>${i.fixed}</code> `)}</p>` : ''}`],
+    ['more', 'Comment and security', html`<div class="field"><label class="label" for="te-comment">Comment</label><textarea id="te-comment" name="comment" rows="2">${def.comment}</textarea></div>
+      <label class="check"><input type="checkbox" name="rls"${chk(def.rls)}> Row level security: rows only through policies</label>
+      <label class="check"><input type="checkbox" name="force_rls"${chk(def.forceRls)}> Force it for the table's owner too</label>
+      ${editing ? '' : html`<fieldset class="prop-group u-mt1"><legend>Partitioning</legend><div class="form-grid">
+        <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>`],
+    ['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';
+  return html`<form method="post" action="${BASE}/sql/objects/table" class="te" data-te-tab="${tab}">${csrf(s)}
+    <input type="hidden" name="ref" value="${opts.ref}">${typeList}
+    ${opts.errors.length ? html`<div class="alert alert-error" role="alert"><ul>${opts.errors.map((e) => html`<li>${e}</li>`)}</ul></div>` : ''}
+    <div class="form-grid te-head">
+      <div class="field"><label class="label" for="te-schema">Schema</label>${editing
+        ? html`<input id="te-schema" value="${def.schema}" readonly><input type="hidden" name="schema" value="${def.schema}">`
+        : html`<select id="te-schema" name="schema">${opts.schemas.map((n) => html`<option value="${n}"${sel(n, def.schema)}>${n}</option>`)}</select>`}</div>
+      <div class="field"><label class="label" for="te-name">Table name</label><input id="te-name" name="name" value="${def.name}" required autocomplete="off" spellcheck="false"></div>
+    </div>
+    <nav class="te-tabs" role="tablist" aria-label="Table properties" hidden>${sections.map(([k, label]) => html`<button type="button" role="tab" aria-selected="${k === tab ? 'true' : 'false'}" data-te-show="${k}">${label}</button>`)}</nav>
+    ${sections.map(([k, label, body]) => html`<section class="te-section" data-te-section="${k}"><h2>${label}</h2>${body}</section>`)}
+    <div class="buttons te-buttons">
+      <button class="btn" name="mode" value="preview">${icon('eye')} Preview DDL</button>
+      <button class="btn btn-hot" name="mode" value="apply">${icon('check')} Apply</button>
+      <button class="btn" name="mode" value="worksheet">${icon('code')} Open in the worksheet</button>
+      <a class="btn" href="${editing ? `${BASE}/sql/objects?${new URLSearchParams({ schema: def.schema, k: 'table', o: opts.ref })}` : `${BASE}/sql/objects?${new URLSearchParams({ schema: def.schema })}`}">Cancel</a>
+    </div></form>`;
+}
+
+async function page(req: Req, reply: FastifyReply) {
+  const s = await developer(req, reply);
+  if (!s) return;
+  const db = await workshopDb(s);
+  const isPost = req.method === 'POST';
+  const b: Body = isPost ? (req.body ?? {}) : (req.query ?? {});
+  const schemas = (await usableSchemas(db)).filter((n) => !SYSTEM_SCHEMAS.includes(n));
+  const refTables = await tables(db);
+  // the table being edited, read again from the catalog on every request
+  const ref = String((isPost ? b.ref : b.o) ?? '');
+  const editing = ref ? await readTable(db, ref) : null;
+  if (ref && (!editing || SYSTEM_SCHEMAS.includes(editing.schema) || !schemas.includes(editing.schema))) return reply.code(404).send('Not found');
+  let def: TableDef;
+  let errors: string[] = [];
+  let ddl: string[] = [];
+  let output: Raw | '' = '';
+  let tab = 'columns';
+  if (!isPost) {
+    const template = typeof b.template === 'string' && b.template ? await readTable(db, b.template) : null;
+    if (b.template && (!template || !schemas.includes(template.schema))) return reply.code(404).send('Not found');
+    def = editing ?? (template ? asTemplate(template) : emptyTable(schemas.includes(String(b.schema)) ? String(b.schema) : (schemas[0] ?? 'public')));
+  } else {
+    const schema = editing ? editing.schema : String(b.schema ?? '');
+    if (!schemas.includes(schema)) return reply.code(404).send('Not found');
+    def = fromForm(b, schema, editing);
+    errors = checkTable(def, editing);
+    if (!errors.length) ddl = tableSql(def, editing);
+    tab = 'ddl';
+    if (!errors.length && b.mode === 'worksheet') {
+      s.state.__SQLDRAFT = ddl.join('\n\n') || '-- no changes';
+      flash(s, 'Review the statements and run them: nothing has been changed yet.');
+      return back(reply, s, `${BASE}/sql/worksheet`);
+    }
+    if (!errors.length && b.mode === 'apply' && ddl.length) {
+      const c = await db.pool.connect();
+      let failed = '';
+      let at = '';
+      try {
+        await c.query('begin');
+        for (const x of ddl) {
+          at = x;
+          await c.query(x);
+        }
+        await c.query('commit');
+      } catch (e) {
+        failed = (e as Error).message;
+        await c.query('rollback').catch(() => {});
+      } finally {
+        c.release(true);
+      }
+      await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), detail: ddl.join(';\n').slice(0, 2000) });
+      clearCompletions();
+      if (!failed) {
+        flash(s, `${editing ? 'Changed' : 'Created'} ${def.schema}.${def.name}: ${ddl.length} statement${ddl.length === 1 ? '' : 's'}.`);
+        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>`;
+      tab = 'output';
+    }
+    if (errors.length) tab = 'columns';
+  }
+  const title = editing ? `Table ${editing.schema}.${editing.name}` : 'Create table';
+  const main = html`<h1 class="u-mb1">${title}</h1>${workshopTabs('objects')}
+    ${form(s, def, { editing, schemas, refTables, ddl, errors, output, tab, ref: editing ? ref : '' })}`;
+  return send(reply, s, shell(s, title, [['SQL Workshop', `${BASE}/sql`], ['Object Browser', `${BASE}/sql/objects`], [title]], main, 'sql'));
+}
+
+const pgIdent = (n: string) => (/^[a-z_][a-z0-9_$]*$/.test(n) ? n : `"${n.replace(/"/g, '""')}"`);
+
+export async function tableEditorRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/sql/objects/table`, page);
+  app.post(`${BASE}/sql/objects/table`, page);
+}

package/src/builder/ui.ts

@@ -12,6 +12,8 @@ import { ensureDevbar } from '../runtime/devbar.ts';
 // Shared building blocks of the builder UI.
 
 export const BASE = '/builder';
+/** (sprint 86) The page designer's address: the application's id and the page's number (/builder/pages/:id redirects here). */
+export const designerUrl = (appId: number, pageNo: number, query = '') => `${BASE}/apps/${appId}/pages/${pageNo}${query ? `?${query}` : ''}`;
 
 /** pgkiln's version and the database name, for the builder's status bar. */
 const VERSION = (JSON.parse(readFileSync(new URL('../../package.json', import.meta.url), 'utf8')) as { version: string }).version;
@@ -49,8 +51,8 @@ export type Section = 'apps' | 'users' | 'sql' | 'developers' | 'gallery';
 // Builder-only stylesheets and scripts, loaded on every builder page after
 // app.css / app.js (the runtime never loads them). Add new builder assets
 // here, and only here.
-export const BUILDER_STYLES = ['/static/builder.css', '/static/code-editor.css'];
-export const BUILDER_SCRIPTS = ['/static/builder.js', '/static/code-editor.js'];
+export const BUILDER_STYLES = ['/static/builder.css', '/static/code-editor.css', '/static/worksheet.css'];
+export const BUILDER_SCRIPTS = ['/static/builder.js', '/static/code-editor.js', '/static/worksheet.js'];
 export const builderHead = () =>
   html`${BUILDER_STYLES.map((href) => html`<link rel="stylesheet" href="${href}">\n`)}${BUILDER_SCRIPTS.map((src) => html`<script src="${src}" defer></script>\n`)}`;
 
@@ -257,7 +259,7 @@ export const workshopTabs = (active: WorkshopTab) => {
   ];
   const open = more.find(([k]) => k === active);
   return html`<nav class="ide-tabs sw-tabs u-mb1" aria-label="SQL Workshop">
-    ${tab('home', '/sql', 'home', 'Home')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('sql', '/sql/commands', 'code', 'SQL Commands')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('utilities', '/sql/utilities', 'wrench', 'Utilities')}
+    ${tab('home', '/sql', 'home', 'Home')}${tab('sql', '/sql/worksheet', 'code', 'SQL Worksheet')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('utilities', '/sql/utilities', 'wrench', 'Utilities')}
     ${open ? tab(...open) : ''}
     <details class="menu sw-more"><summary class="ide-tab">${icon('chevron-down')}<span>More</span></summary>
       <div class="menu-panel align-right"><div class="menu-section menu-links">${more.map(([k, href, ic, label]) => html`<a href="${BASE}${href}"${k === active ? raw(' aria-current="page"') : ''}>${icon(ic)} ${label}</a>`)}</div></div></details></nav>`;

package/src/builder/unload.ts

@@ -21,12 +21,12 @@ import {
   type UnloadOptions,
 } from '../unload.ts';
 import { BASE, csrf, developer, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
-import { workshopDb } from './workspaces.ts';
+import { sessionSchema, workshopDb } from './workspaces.ts';
 
 // SQL Workshop → Unload Data (APEX: Data Workshop → Unload Data): a table or
 // view (chosen columns, an optional WHERE and ORDER BY) or a query, to CSV,
 // JSON, Excel or XML, streamed from a cursor (src/unload.ts). Runs on a
-// connection of its own as the owner, like SQL Commands, but in a READ ONLY
+// connection of its own as the owner, like the SQL Worksheet, but in a READ ONLY
 // transaction with a statement timeout; the connection is closed afterwards
 // so nothing the query sets can leak into the pool. The table step is a GET
 // form and the download a POST form (CSRF), so it works without JavaScript.
@@ -100,7 +100,7 @@ export async function unloadRoutes(app: FastifyInstance) {
     return html`
       <fieldset class="prop-group u-mt125"><legend>Format</legend>
         <div class="unload-formats" role="radiogroup" aria-label="Format">${UNLOAD_FORMATS.map(
-          (f) => html`<label class="check"><input type="radio" name="format" value="${f}"${fmt === f ? raw(' checked') : ''}> ${{ csv: 'CSV', json: 'JSON', xlsx: 'Excel (.xlsx)', xml: 'XML' }[f]}</label>`,
+          (f) => html`<label class="check"><input type="radio" name="format" value="${f}"${fmt === f ? raw(' checked') : ''}> ${{ csv: 'CSV', json: 'JSON', xlsx: 'Excel (.xlsx)', xml: 'XML', sql: 'SQL inserts' }[f]}</label>`,
         )}</div>
       </fieldset>
       <fieldset class="prop-group"><legend>CSV</legend><div class="form-grid">
@@ -213,11 +213,15 @@ export async function unloadRoutes(app: FastifyInstance) {
     if (typeof opts === 'string') return refuse(opts);
 
     const started = performance.now();
-    const c = await (await workshopDb(s)).pool.connect();
+    const db = await workshopDb(s);
+    const schema = await sessionSchema(s, db);
+    const c = await db.pool.connect();
     let opened;
     try {
       await c.query('begin transaction read only');
       await c.query(`select set_config('statement_timeout', $1, true)`, [timeout()]);
+      // (sprint 92) the session's schema first in the search path, like the SQL Worksheet (its downloads come here)
+      if (schema) await c.query(`select set_config('search_path', $1, true)`, [`${pg.escapeIdentifier(schema)}, public`]);
       opened = await openUnload(c, sql, opts);
     } catch (e) {
       await c.query('rollback').catch(() => {});