pgkiln 0.46.0 → 0.48.0

package/src/builder/object-actions.ts

@@ -0,0 +1,167 @@
+import type { FastifyInstance } from 'fastify';
+import pg from 'pg';
+import { html, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { readSchema } from '../ddl.ts';
+import { back, BASE, developer, flash, type Req } from './ui.ts';
+import { listObjects, objectDetail, OB_TYPES, SYSTEM_SCHEMAS, type Obj } from './object-browser.ts';
+import { usableSchemas, workshopDb } from './workspaces.ts';
+
+// (sprint 94, Database Actions DA-8) An object's menu in the SQL Worksheet's navigator and the Object Browser's
+// tree (Database Actions: the navigator's right-click menu): Open (the Object Browser's detail, in a panel beside
+// the worksheet), Quick DDL into the worksheet or as a file, Load data, Add an index / trigger / policy, Use as a
+// template, and Drop with what depends on the object. Nothing here changes the database: every statement goes into
+// the worksheet to review and run. The object is looked up in the catalog with the workshop's connection (its
+// schema, type and reference must name one of the listed objects) before anything is read.
+
+type Db = Awaited<ReturnType<typeof workshopDb>>;
+export type MenuObj = Pick<Obj, 'name' | 'ref'> & { type: Obj['type'] | 'policy' };
+
+const RELATIONS = new Set(['table', 'view', 'matview']);
+
+/** The ⋯ menu of an object (works without JavaScript: a details menu of links). */
+export function objectMenu(schema: string, o: MenuObj): Raw {
+  const q = (act: string) => `${BASE}/sql/objects/action?${new URLSearchParams({ schema, k: o.type, o: o.ref, ...(o.type === 'policy' || o.type === 'trigger' ? { n: o.name } : {}), do: act })}`;
+  const open = `${BASE}/sql/objects?${new URLSearchParams(o.type === 'policy' ? { schema, k: 'table', o: o.ref, tab: 'rls' } : { schema, k: o.type, o: o.ref })}`;
+  const item = (href: string, ic: string, label: string, extra = '') => html`<a href="${href}"${extra ? html` ${extra}` : ''}>${icon(ic)} ${label}</a>`;
+  const table = o.type === 'table';
+  return html`<details class="menu obj-menu"><summary title="Actions for ${o.name}" aria-label="Actions for ${o.name}">⋯</summary>
+    <div class="menu-panel"><div class="menu-section menu-links">
+      ${o.type === 'policy' ? '' : html`<a href="${open}" data-obj-open="${`${BASE}/sql/objects/panel?${new URLSearchParams({ schema, k: o.type, o: o.ref })}`}">${icon('eye')} Open</a>`}
+      ${table ? item(`${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}`, 'edit', 'Edit…') : ''}
+      ${table ? item(`${BASE}/sql/objects/table?${new URLSearchParams({ schema, template: o.ref })}`, 'copy', 'Use as template') : ''}
+      ${table ? item(`${BASE}/sql/load`, 'upload', 'Load data') : ''}
+      ${table ? html`${item(q('index'), 'list', 'Add index')}${item(q('trigger'), 'bolt', 'Add trigger')}${item(q('policy'), 'shield', 'Add policy')}` : ''}
+      ${RELATIONS.has(o.type) ? item(`${BASE}/sql/rest/object?${new URLSearchParams({ schema, name: o.name })}`, 'globe', 'REST › Enable / Disable') : ''}
+      ${item(q('ddl'), 'code', 'Quick DDL to the worksheet')}
+      ${item(q('download'), 'download', 'Quick DDL as a file')}
+      ${item(q('drop'), 'trash', 'Drop…')}
+    </div></div></details>`;
+}
+
+/** The listed object the request names, or undefined. */
+async function findObject(db: Db, schema: unknown, kind: unknown, ref: unknown, name: unknown): Promise<MenuObj | undefined> {
+  if (typeof schema !== 'string' || typeof ref !== 'string' || typeof kind !== 'string') return undefined;
+  if (SYSTEM_SCHEMAS.includes(schema) || !(await usableSchemas(db)).includes(schema)) return undefined;
+  if (kind === 'policy') {
+    const p = await db.one<{ name: string }>(
+      `select p.polname || ' on ' || c.relname as name from pg_policy p join pg_class c on c.oid = p.polrelid join pg_namespace n on n.oid = c.relnamespace
+        where n.nspname = $1 and c.oid::regclass::text = $2 and p.polname || ' on ' || c.relname = $3`, [schema, ref, String(name ?? '')]);
+    return p ? { type: 'policy', name: p.name, ref } : undefined;
+  }
+  return (await listObjects(db, schema, false)).find((o) => o.type === kind && o.ref === ref);
+}
+
+const relnameOf = (o: MenuObj, schema: string) => {
+  const t = o.type === 'trigger' ? o.ref.split('|')[0] : o.ref;
+  return t.startsWith(`${pg.escapeIdentifier(schema)}.`) || t.startsWith(`${schema}.`) ? t.slice(t.indexOf('.') + 1).replace(/^"|"$/g, '').replace(/""/g, '"') : t.replace(/^"|"$/g, '');
+};
+
+/** The DDL of one object: what the Object Browser's DDL tab shows. */
+export async function objectDdl(db: Db, schema: string, o: MenuObj): Promise<string> {
+  if (o.type === 'function' || o.type === 'procedure') return `${(await db.one<{ def: string }>('select pg_get_functiondef($1::regprocedure) as def', [o.ref]).catch(() => undefined))?.def?.trimEnd() ?? ''};`;
+  if (o.type === 'trigger') {
+    const [rel, name] = o.ref.split('|');
+    return `${(await db.one<{ def: string }>('select pg_get_triggerdef(oid, true) as def from pg_trigger where tgrelid = $1::regclass and tgname = $2', [rel, name]))?.def ?? ''};`;
+  }
+  if (o.type === 'index') return `${(await db.one<{ def: string }>('select pg_get_indexdef($1::regclass) as def', [o.ref]))?.def ?? ''};`;
+  const rel = relnameOf(o, schema);
+  const objects = await readSchema(db.pool as pg.Pool, schema).catch(() => []);
+  const pick = o.type === 'policy'
+    ? objects.filter((x) => x.kind === 'policy' && x.table === rel && x.name.endsWith(`.${o.name.slice(0, o.name.lastIndexOf(' on '))}`))
+    : o.type === 'sequence' ? objects.filter((x) => x.kind === 'sequence' && x.name === rel)
+      : o.type === 'type' ? objects.filter((x) => (x.kind === 'type' || x.kind === 'domain') && x.name === rel)
+        : objects.filter((x) => (['table', 'view', 'materialized view'].includes(x.kind) ? x.name === rel : x.table === rel));
+  return pick.map((x) => x.ddl).join('\n\n');
+}
+
+/** What depends on the object (views, foreign keys, triggers' functions…), as lines for a comment. */
+async function dependents(db: Db, o: MenuObj): Promise<string[]> {
+  if (!RELATIONS.has(o.type) && o.type !== 'function' && o.type !== 'type' && o.type !== 'sequence') return [];
+  const rows = (await db.query<{ what: string }>(
+    o.type === 'function'
+      ? `select distinct pg_describe_object(d.classid, d.objid, d.objsubid) as what from pg_depend d
+          where d.refclassid = 'pg_proc'::regclass and d.refobjid = $1::regprocedure and d.deptype = 'n' order by 1 limit 50`
+      : o.type === 'type'
+        ? `select distinct pg_describe_object(d.classid, d.objid, d.objsubid) as what from pg_depend d
+            where d.refclassid = 'pg_type'::regclass and d.refobjid = $1::regtype and d.deptype = 'n' order by 1 limit 50`
+        : `select distinct coalesce(case when d.classid = 'pg_rewrite'::regclass then 'view ' || r.ev_class::regclass::text end, pg_describe_object(d.classid, d.objid, d.objsubid)) as what
+             from pg_depend d left join pg_rewrite r on d.classid = 'pg_rewrite'::regclass and r.oid = d.objid
+            where d.refclassid = 'pg_class'::regclass and d.refobjid = $1::regclass and d.deptype = 'n'
+              and not (d.classid = 'pg_rewrite'::regclass and r.ev_class = $1::regclass)
+            order by 1 limit 50`,
+    [o.ref])).rows;
+  return rows.map((r) => r.what);
+}
+
+const DROP_KIND: Record<string, string> = { table: 'table', view: 'view', matview: 'materialized view', index: 'index', sequence: 'sequence', type: 'type', function: 'function', procedure: 'procedure' };
+
+/** The statements a menu entry writes into the worksheet. */
+async function draft(db: Db, schema: string, o: MenuObj, act: string): Promise<string | null> {
+  const ident = (n: string) => (/^[a-z_][a-z0-9_$]*$/.test(n) ? n : pg.escapeIdentifier(n));
+  const firstCol = async () => (await db.one<{ n: string }>(`select attname as n from pg_attribute where attrelid = $1::regclass and attnum > 0 and not attisdropped order by attnum limit 1`, [o.ref]))?.n ?? 'id';
+  const base = relnameOf(o, schema).replace(/[^A-Za-z0-9_]+/g, '_').toLowerCase().slice(0, 40);
+  switch (act) {
+    case 'ddl':
+      // the DDL names objects within their schema: the search path makes the statements run there
+      return `-- DDL of ${o.ref}\nset search_path to ${ident(schema)}, public;\n\n${await objectDdl(db, schema, o)}`;
+    case 'index':
+      return `create index ${base}_${(await firstCol()).replace(/[^A-Za-z0-9_]+/g, '_').toLowerCase()}_idx on ${o.ref} (${ident(await firstCol())});`;
+    case 'trigger':
+      return `create or replace function ${ident(schema)}.${base}_trg() returns trigger\nlanguage plpgsql as $$\nbegin\n  -- new and old are the row after and before the change\n  return new;\nend\n$$;\n\ncreate trigger ${base}_trg\n  before insert or update on ${o.ref}\n  for each row execute function ${ident(schema)}.${base}_trg();`;
+    case 'policy':
+      return `-- row level security applies once it is enabled on the table\nalter table ${o.ref} enable row level security;\n\ncreate policy ${base}_select on ${o.ref}\n  for select\n  using (true);`;
+    case 'drop': {
+      const deps = await dependents(db, o);
+      const note = deps.length
+        ? `-- These depend on ${o.ref}: drop them first, or add CASCADE to drop them too:\n${deps.map((d) => `--   ${d}`).join('\n')}\n`
+        : `-- Nothing else depends on ${o.ref}.\n`;
+      if (o.type === 'trigger') {
+        const [rel, name] = o.ref.split('|');
+        return `drop trigger ${ident(name)} on ${rel};`;
+      }
+      if (o.type === 'policy') return `drop policy ${ident(o.name.slice(0, o.name.lastIndexOf(' on ')))} on ${o.ref};`;
+      return `${note}drop ${DROP_KIND[o.type]} ${o.ref};`;
+    }
+  }
+  return null;
+}
+
+export async function objectActionRoutes(app: FastifyInstance) {
+  // a menu entry: the statement into the worksheet (a new tab there), or the DDL as a file
+  app.get(`${BASE}/sql/objects/action`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const db = await workshopDb(s);
+    const q = req.query ?? {};
+    const o = await findObject(db, q.schema, q.k, q.o, q.n);
+    const act = String(q.do ?? '');
+    if (!o || !['ddl', 'download', 'index', 'trigger', 'policy', 'drop'].includes(act)) return reply.code(404).send('Not found');
+    if (['index', 'trigger', 'policy'].includes(act) && o.type !== 'table') return reply.code(404).send('Not found');
+    if (act === 'download') {
+      const file = `${relnameOf(o, String(q.schema))}`.replace(/[^\w.-]+/g, '_').replace(/^_+|_+$/g, '') || 'ddl';
+      return reply.header('content-disposition', `attachment; filename="${file}.sql"`).header('cache-control', 'private, no-store')
+        .type('application/sql; charset=utf-8').send(`${await objectDdl(db, String(q.schema), o)}\n`);
+    }
+    const sql = await draft(db, String(q.schema), o, act);
+    s.state.__SQLDRAFT = sql ?? '';
+    flash(s, act === 'ddl' ? `The DDL of ${o.ref}.` : act === 'drop' ? 'Review the DROP statement and run it yourself: nothing has been dropped yet.' : 'Fill in the statement and run it: nothing has been changed yet.');
+    return back(reply, s, `${BASE}/sql/worksheet`);
+  });
+
+  // Open: the Object Browser's detail of an object without the page around it (the worksheet shows it in a panel)
+  app.get(`${BASE}/sql/objects/panel`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const db = await workshopDb(s);
+    const q = req.query ?? {};
+    const o = await findObject(db, q.schema, q.k, q.o, q.n);
+    if (!o || o.type === 'policy') return reply.code(404).send('Not found');
+    const schema = String(q.schema);
+    const link = (extra: Record<string, string>) => `${BASE}/sql/objects/panel?${new URLSearchParams({ schema, ...extra })}`;
+    const detail = await objectDetail(db, s, schema, o as Obj, String(q.tab ?? ''), Number(q.p) || 1, link);
+    const label = OB_TYPES.find(([t]) => t === o.type)?.[1] ?? o.type;
+    return reply.header('Cache-Control', 'private, no-store').type('text/html')
+      .send(String(html`<div class="obj-panel" data-label="${label}: ${o.ref}">${detail}</div>`));
+  });
+}

package/src/builder/object-browser.ts

@@ -5,12 +5,14 @@ import { icon } from '../icons.ts';
 import { readSchema } from '../ddl.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Req } from './ui.ts';
 import { currentWorkspace, inWorkspaceSql, sessionSchema, workshopDb } from './workspaces.ts';
+import { objectMenu } from './object-actions.ts';
+import { isPinned, pinButton } from './launchpad.ts';
 import { owner } from '../db.ts';
 import type { Session } from '../session.ts';
 
 // (sprint 75) The SQL Workshop's Object Browser like APEX's: a schema in the header (the session's
 // schema by default), a tree with a folder per object type, a filter, a + menu that starts a CREATE
-// statement in SQL Commands, and create tiles when nothing is selected. pgkiln's own schemas (meta,
+// statement in the SQL Worksheet, and create tiles when nothing is selected. pgkiln's own schemas (meta,
 // pgkiln_plugins) and objects that belong to an extension are left out unless "Show system objects" is
 // on. A table opens in tabs: Columns, Data, Indexes, Constraints, Triggers, Grants, Row level security,
 // Dependencies, Statistics and DDL; the column actions write the ALTER TABLE statement into SQL
@@ -19,7 +21,7 @@ import type { Session } from '../session.ts';
 // in the catalog before it is used, quoted.
 
 /** pgkiln's own schemas: shown with "Show system objects" only. */
-const SYSTEM_SCHEMAS = ['meta', 'pgkiln_plugins'];
+export const SYSTEM_SCHEMAS = ['meta', 'pgkiln_plugins'];
 
 export const OB_TYPES = [
   ['table', 'Tables', 'table'],
@@ -32,9 +34,9 @@ export const OB_TYPES = [
   ['procedure', 'Procedures', 'code'],
   ['trigger', 'Triggers', 'bolt'],
 ] as const;
-type ObType = (typeof OB_TYPES)[number][0];
+export type ObType = (typeof OB_TYPES)[number][0];
 
-interface Obj {
+export interface Obj {
   type: ObType;
   name: string;
   /** the object as SQL can name it: regclass, regprocedure or regtype text; a trigger: "table" */
@@ -49,7 +51,7 @@ const TABLE_TABS = [
   ['grants', 'Grants'], ['rls', 'Row level security'], ['dependencies', 'Dependencies'], ['statistics', 'Statistics'], ['ddl', 'DDL'],
 ] as const;
 
-/** CREATE statements the + menu and the tiles start with (SQL Commands shows them; nothing runs until Run). */
+/** CREATE statements the + menu and the tiles start with (the SQL Worksheet shows them; nothing runs until Run). */
 export function createTemplate(kind: string, schema: string): string | null {
   const S = pg.escapeIdentifier(schema);
   switch (kind) {
@@ -80,6 +82,26 @@ async function parsingSchema(s: Session): Promise<string | null> {
   ).catch(() => undefined);
   return row?.n ?? null;
 }
+/**
+ * (sprint 89, SQL-4) The schema to show: the one asked for, else the last one shown (remembered per session, shared
+ * by the Object Browser and the worksheet's navigator), else the session's schema of the SQL Worksheet, else the parsing
+ * schema of the application changed last, else the first of `schemas`.
+ */
+export async function pickSchema(s: Session, db: Awaited<ReturnType<typeof workshopDb>>, schemas: string[], asked: unknown): Promise<string> {
+  const usable = (v: unknown): v is string => typeof v === 'string' && schemas.includes(v);
+  if (usable(asked)) {
+    s.state.__OBSCHEMA = asked;
+    return asked;
+  }
+  const last = s.state.__OBSCHEMA;
+  if (usable(last)) return last;
+  const own = await sessionSchema(s, db);
+  const parsing = usable(own) ? null : await parsingSchema(s);
+  const schema = usable(own) ? own : usable(parsing) ? parsing : (schemas[0] ?? '');
+  if (schema) s.state.__OBSCHEMA = schema;
+  return schema;
+}
+
 /** A column type in an action: a type name with an optional size and array brackets. */
 const TYPE_RE = /^[a-z][a-z0-9_ ]{0,40}(\(\d{1,4}(,\s?\d{1,4})?\))?(\[\])?$/i;
 const NAME_RE = /^[A-Za-z_][A-Za-z0-9_$]{0,62}$/;
@@ -100,15 +122,7 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
         [system, SYSTEM_SCHEMAS],
       )
     ).rows.map((r) => r.n);
-    // (sprint 89, SQL-4) the schema asked for, else the last one shown (remembered per session), else the session's
-    // schema of SQL Commands, else the parsing schema of the application changed last, else the first
-    const usable = (v: unknown): v is string => typeof v === 'string' && schemas.includes(v);
-    const asked = usable(q.schema) ? q.schema : null;
-    const last = s.state.__OBSCHEMA;
-    const own = asked || usable(last) ? null : await sessionSchema(s, db);
-    const parsing = asked || usable(last) || usable(own) ? null : await parsingSchema(s);
-    const schema = asked ?? (usable(last) ? last : usable(own) ? own : usable(parsing) ? parsing : (schemas[0] ?? ''));
-    if (schema && schema !== last) s.state.__OBSCHEMA = schema;
+    const schema = await pickSchema(s, db, schemas, q.schema);
     const filter = typeof q.q === 'string' ? q.q.trim().slice(0, 100) : '';
     const objects = schema ? await listObjects(db, schema, system) : [];
     const shown = objects.filter((o) => !filter || o.name.toLowerCase().includes(filter.toLowerCase()));
@@ -123,17 +137,23 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
         if (!list.length && filter) return '';
         return html`<details class="ob-folder"${list.length && (filter || list.length <= 50 || selected?.type === t) ? raw(' open') : ''}>
           <summary>${icon(ic)}<span>${label}</span><span class="kind">${list.length}</span></summary>
-          <ul class="tree">${list.map((o) => html`<li><a href="${link({ k: o.type, o: o.ref })}"${selected === o ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${o.name}</span>${o.rls ? html`<span class="tag">RLS</span>` : ''}${o.ext ? html`<span class="tag">extension</span>` : ''}</a></li>`)}</ul>
+          <ul class="tree">${list.map((o) => html`<li class="ob-item"><a href="${link({ k: o.type, o: o.ref })}"${selected === o ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${o.name}</span>${o.rls ? html`<span class="tag">RLS</span>` : ''}${o.ext ? html`<span class="tag">extension</span>` : ''}</a>${objectMenu(schema, o)}</li>`)}</ul>
         </details>`;
       })}</div>`;
 
     let detail: Raw;
     if (!schema) detail = html`<p class="muted">No schema you may use.</p>`;
-    else if (selected) detail = await objectDetail(db, s, schema, selected, String(q.tab ?? ''), Number(q.p) || 1, link);
+    else if (selected) {
+      // (sprint 96) pin the object to the SQL Workshop's home
+      const href = `${BASE}/sql/objects?${new URLSearchParams({ schema, k: selected.type, o: selected.ref })}`;
+      const pin = pinButton(s, { href, label: selected.name, icon: OB_TYPES.find(([t]) => t === selected.type)![2] }, await isPinned(s, href), href);
+      detail = html`<div class="ob-pin">${pin}</div>${await objectDetail(db, s, schema, selected, String(q.tab ?? ''), Number(q.p) || 1, link)}`;
+    }
     else
-      detail = region(`Create database objects in ${schema}`, html`<div class="ob-tiles">${[
+      detail = region(`Create database objects in ${schema}`, html`<div class="ob-tiles">
+        <a class="create-source" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema })}">${icon('table')}<span><b>Table (form)</b><small class="muted">Columns, keys, indexes and security in a form</small></span></a>${[
         ['table', 'table', 'Table'], ['view', 'layers', 'View'], ['function', 'code', 'Function'], ['sequence', 'hash', 'Sequence'], ['index', 'list', 'Index'],
-      ].map(([k, ic, label]) => html`<a class="create-source" href="${BASE}/sql/commands?${new URLSearchParams({ template: k, schema })}">${icon(ic)}<span><b>${label}</b><small class="muted">Start a CREATE ${label.toUpperCase()} statement</small></span></a>`)}
+      ].map(([k, ic, label]) => html`<a class="create-source" href="${BASE}/sql/worksheet?${new URLSearchParams({ template: k, schema })}">${icon(ic)}<span><b>${label}</b><small class="muted">Start a CREATE ${label.toUpperCase()} statement</small></span></a>`)}
         <a class="create-source" href="${BASE}/sql/quick">${icon('bolt')}<span><b>Quick SQL</b><small class="muted">A data model in shorthand</small></span></a>
         <a class="create-source" href="${BASE}/sql/load">${icon('upload')}<span><b>Load data</b><small class="muted">A table from a file</small></span></a></div>
         <p class="muted">Select an object in the tree, or filter it by name.</p>`);
@@ -147,13 +167,13 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
           <button class="btn btn-sm">Show</button></form>
         <details class="menu ob-create"><summary class="btn btn-hot">${icon('plus')} Create</summary>
           <div class="menu-panel align-right"><div class="menu-section menu-links">${['table', 'view', 'function', 'sequence', 'index'].map((k) =>
-            html`<a href="${BASE}/sql/commands?${new URLSearchParams({ template: k, schema })}">${icon('plus')} ${k[0].toUpperCase() + k.slice(1)}</a>`)}</div></div></details>
+            html`<a href="${BASE}/sql/worksheet?${new URLSearchParams({ template: k, schema })}">${icon('plus')} ${k[0].toUpperCase() + k.slice(1)}</a>`)}</div></div></details>
       </div>
       <div class="designer"><aside class="region region-standard ob-tree" aria-label="Database objects">${tree}</aside><div>${detail}</div></div>`;
     return send(reply, s, shell(s, 'Object Browser', [['SQL Workshop', `${BASE}/sql`], ['Object Browser']], main, 'sql'));
   });
 
-  // column actions: the ALTER TABLE statement, into SQL Commands to review and run
+  // column actions: the ALTER TABLE statement, into the SQL Worksheet to review and run
   app.post(`${BASE}/sql/objects/alter`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
@@ -215,11 +235,11 @@ export async function objectBrowserRoutes(app: FastifyInstance) {
     }
     s.state.__SQLDRAFT = sql;
     flash(s, 'Review the statement and press Run: nothing has been changed yet.');
-    return back(reply, s, `${BASE}/sql/commands`);
+    return back(reply, s, `${BASE}/sql/worksheet`);
   });
 }
 
-async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: string, system: boolean): Promise<Obj[]> {
+export async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: string, system: boolean): Promise<Obj[]> {
   const ext = (cls: string, oid: string) => `exists (select 1 from pg_depend d where d.classid = '${cls}'::regclass and d.objid = ${oid} and d.deptype = 'e')`;
   const rows = (
     await db.query<Obj>(
@@ -250,7 +270,7 @@ async function listObjects(db: Awaited<ReturnType<typeof workshopDb>>, schema: s
   return system ? rows : rows.filter((o) => !o.ext);
 }
 
-async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csrf_token: string }, schema: string, o: Obj, tabAsked: string, page: number, link: (x: Record<string, string>) => string): Promise<Raw> {
+export async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csrf_token: string }, schema: string, o: Obj, tabAsked: string, page: number, link: (x: Record<string, string>) => string): Promise<Raw> {
   const table = (rows: Record<string, unknown>[], empty = 'None.') =>
     rows.length
       ? html`<div class="table-wrap"><table class="report"><thead><tr>${Object.keys(rows[0]).map((k) => html`<th scope="col">${k}</th>`)}</tr></thead>
@@ -336,7 +356,7 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
             <details class="menu ob-tool"><summary class="btn btn-sm">${icon('trash')} Drop column</summary><div class="menu-panel">
               <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
                 ${pick('ob-drop-col')}<button class="btn btn-sm btn-danger">Show the SQL</button></form></div></details>
-            <span class="muted ob-toolbar-note">Each writes the ALTER TABLE statement into SQL Commands: review it there and press Run.</span>
+            <span class="muted ob-toolbar-note">Each writes the ALTER TABLE statement into the SQL Worksheet: review it there and run it.</span>
           </div>`
         : ''}${table(cols)}`;
       break;
@@ -351,7 +371,7 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
         const p = offset / PAGE_SIZE + 1;
         body = html`${table(rows, 'No rows.')}<nav class="pager" aria-label="Pages">${p > 1 ? html`<a href="${link({ k: o.type, o: o.ref, tab: 'data', p: String(p - 1) })}">‹ Previous</a>` : ''}
           <span>Rows ${rows.length ? offset + 1 : 0}–${offset + rows.length}</span>${more ? html`<a href="${link({ k: o.type, o: o.ref, tab: 'data', p: String(p + 1) })}">Next ›</a>` : ''}</nav>
-          <p class="muted">To change rows, use SQL Commands, or an interactive grid on the table in an application.</p>`;
+          <p class="muted">To change rows, use the SQL Worksheet, or an interactive grid on the table in an application.</p>`;
       }
       break;
     }
@@ -401,5 +421,6 @@ async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s: { csr
     default:
       body = await ddlOf((x) => (x.kind === 'table' || x.kind === 'view' || x.kind === 'materialized view') ? x.name === relname : x.table === relname);
   }
-  return html`<h2 class="ob-title">${icon(OB_TYPES.find(([t]) => t === o.type)![2])} ${o.ref}${o.rls ? html` <span class="tag">RLS</span>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
+  return html`<h2 class="ob-title">${icon(OB_TYPES.find(([t]) => t === o.type)![2])} ${o.ref}${o.rls ? html` <span class="tag">RLS</span>` : ''}${o.type === 'table'
+    ? html` <a class="btn btn-sm" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}">${icon('edit')} Edit table</a>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
 }

package/src/builder/querybuilder.ts

@@ -363,7 +363,7 @@ export async function queryBuilderRoutes(app: FastifyInstance) {
     const output = built
       ? html`<div class="u-spacer"></div>${region('SQL', html`<pre class="source" 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 SQL Commands</button></div></form>`)}`
+            <div class="buttons"><button class="btn btn-hot">${icon('play')} Run in the SQL Worksheet</button></div></form>`)}`
       : '';
     return send(reply, s, shell(s, 'Query Builder', [['SQL Workshop', `${BASE}/sql`], ['Query Builder']], html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('query')}${form}${output}`, 'sql'));
   });

package/src/builder/sampledata.ts

@@ -40,7 +40,7 @@ import { currentWorkspace, workshopDb } from './workspaces.ts';
 // nulls, all proposed from the catalog. The form posts (CSRF) to preview
 // (insert and roll back), insert (one transaction, parents first), download
 // as SQL or CSV, or save the definition (meta.data_generator) to rerun.
-// Runs on a connection of its own as the owner, like SQL Commands, with a
+// Runs on a connection of its own as the owner, like the SQL Worksheet, with a
 // statement timeout; the connection is closed afterwards. No JavaScript needed.
 
 /** The statement timeout of a run (PostgreSQL interval syntax). */
@@ -109,7 +109,7 @@ export async function sampleDataRoutes(app: FastifyInstance) {
 
   const intro = html`<p class="muted">Generate realistic rows for the tables of a schema: names, e-mail addresses, dates and numbers in a range, values from a list,
     foreign keys that pick existing parent rows. Preview them, insert them in one transaction (parents first) or download them as SQL or CSV.
-    Runs as the builder's owner connection (an isolated workspace's developer login for its developers), like <a href="${BASE}/sql">SQL Commands</a>.</p>`;
+    Runs as the builder's owner connection (an isolated workspace's developer login for its developers), like the <a href="${BASE}/sql/worksheet">SQL Worksheet</a>.</p>`;
 
   // ------------------------------------------------------------ step 1 and 2: schema and tables
   const start = async (s: Session, reply: FastifyReply, schema: string | undefined) => {

package/src/builder/scripts.ts

@@ -12,7 +12,7 @@ import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
 // SQL Workshop → SQL Scripts: saved scripts (create, edit, upload, download,
 // delete), run with a result per statement (stop at the first error or go on,
 // optionally in one transaction), and the run history. Scripts run on the
-// owner connection, like SQL Commands, on a connection of their own that is
+// owner connection, like the SQL Worksheet, on a connection of their own that is
 // closed afterwards (a script may SET ROLE or change settings). Scripts and runs belong
 // to the current workspace; an isolated workspace's run on its developer login (090).
 
@@ -139,11 +139,11 @@ export async function scriptRoutes(app: FastifyInstance) {
     ).rows;
     const runs = (await owner.query('select * from meta.sql_script_run where workspace_id = $1 order by id desc limit 20', [currentWorkspace(s)])).rows;
     const list = scripts.length
-      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Script</th><th>Updated</th><th class="num">Size</th><th>Last run</th><th>File</th></tr></thead><tbody>
+      ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Script</th><th>Updated</th><th class="num">Size</th><th>Last run</th><th>Open</th></tr></thead><tbody>
           ${scripts.map((x) => html`<tr><td><a href="${BASE}/sql/scripts/${x.id}">${x.name}</a>${x.description ? html`<br><span class="muted small">${x.description}</span>` : ''}</td>
             <td>${when(x.updated_at)}${x.updated_by ? html` <span class="muted small">by ${x.updated_by}</span>` : ''}</td><td class="num">${bytes(Number(x.size))}</td>
             <td>${x.last_run ? html`${when(x.last_run)} ${x.last_failed ? html`<span class="tag tag-error">Errors</span>` : html`<span class="tag tag-ok">OK</span>`}` : html`<span class="muted">never</span>`}</td>
-            <td><a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} Download</a></td></tr>`)}
+            <td><a class="btn btn-sm" href="${BASE}/sql/worksheet?script=${x.id}">${icon('code')} Worksheet</a> <a class="btn btn-sm" href="${BASE}/sql/scripts/${x.id}/download">${icon('download')} Download</a></td></tr>`)}
         </tbody></table></div>`
       : html`<p class="muted">No scripts yet. Create one, upload a .sql file, or generate one with Quick SQL.</p>`;
     return page(

package/src/builder/sql-charts.ts

@@ -0,0 +1,203 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import pg from 'pg';
+import { PageCss } from '../css.ts';
+import { owner } from '../db.ts';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { isNumeric } from '../runtime/report.ts';
+import { renderChartBody, type ChartKind } from '../runtime/charts.ts';
+import type { Session } from '../session.ts';
+import { unloadStatement } from '../unload.ts';
+import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
+import { currentWorkspace, sessionSchema, workshopDb } from './workspaces.ts';
+
+// (sprint 97, Database Actions DA-6: Create Chart and Charts) A query drawn as a chart with pgkiln's own
+// server-rendered charts (src/runtime/charts.ts): the worksheet's Chart tab draws the last query, guessing the label
+// column (the first text or date column) and the value columns (the numbers); saved charts (meta.sql_chart,
+// migration 110) are listed under SQL Workshop → Charts, the ones on the dashboard drawn there. A saved chart's
+// SELECT runs read-only, with a statement timeout and at most 500 rows, as the workshop's connection.
+
+export const SQL_CHART_KINDS: [ChartKind, string][] = [['bar', 'Bar'], ['column', 'Column'], ['stacked', 'Stacked bar'], ['line', 'Line'], ['area', 'Area'], ['donut', 'Donut'], ['pie', 'Pie'], ['scatter', 'Scatter']];
+const MAX_ROWS = 500;
+
+export interface ChartSpec { kind: ChartKind; label: string; values: string[] }
+
+/** The columns to draw: the ones asked for when they exist, else a label (first non-number) and the numbers. */
+export function chartSpec(columns: string[], numeric: boolean[], asked: Partial<ChartSpec> = {}): ChartSpec | null {
+  const kind = SQL_CHART_KINDS.some(([k]) => k === asked.kind) ? asked.kind! : 'bar';
+  const label = asked.label && columns.includes(asked.label) ? asked.label : (columns.find((_, i) => !numeric[i]) ?? columns[0]);
+  const wanted = (asked.values ?? []).filter((v) => columns.includes(v) && v !== label);
+  const values = wanted.length ? wanted : columns.filter((c, i) => numeric[i] && c !== label);
+  return label && values.length ? { kind, label, values } : null;
+}
+
+/** A chart of rows (text values from the worksheet, or values from a query), with the rules for the page's <style>. */
+export function drawChart(title: string, columns: string[], rows: unknown[][], spec: ChartSpec): { body: Raw; css: string } {
+  const css = new PageCss();
+  const li = columns.indexOf(spec.label);
+  const vi = spec.values.map((v) => columns.indexOf(v));
+  const data = rows.map((r) => [r[li] === null || r[li] === undefined ? '' : String(r[li]), ...vi.map((i) => (r[i] === null || r[i] === undefined || r[i] === '' ? null : Number(r[i])))]);
+  const body = renderChartBody(spec.kind, title, data, [{ name: spec.label }, ...spec.values.map((name) => ({ name }))], css);
+  return { body, css: css.text };
+}
+
+/** The controls of a chart (type, label column, value columns), named chart_*. */
+export function chartControls(columns: string[], spec: ChartSpec, idPrefix = 'ch'): Raw {
+  return html`<div class="ch-controls">
+    <label><span>Type</span><select name="chart_kind" id="${idPrefix}-kind">${SQL_CHART_KINDS.map(([k, label]) => html`<option value="${k}"${k === spec.kind ? raw(' selected') : ''}>${label}</option>`)}</select></label>
+    <label><span>Labels</span><select name="chart_label" id="${idPrefix}-label">${columns.map((c) => html`<option value="${c}"${c === spec.label ? raw(' selected') : ''}>${c}</option>`)}</select></label>
+    <fieldset><legend>Values</legend>${columns.map((c) => html`<label class="check"><input type="checkbox" name="chart_values" value="${c}"${spec.values.includes(c) ? raw(' checked') : ''}> ${c}</label>`)}</fieldset>
+  </div>`;
+}
+
+const list = (v: unknown) => (Array.isArray(v) ? v : v === undefined || v === null || v === '' ? [] : [v]).map(String);
+export const askedSpec = (b: Body): Partial<ChartSpec> => ({ kind: b.chart_kind as ChartKind, label: typeof b.chart_label === 'string' ? b.chart_label : undefined, values: list(b.chart_values) });
+
+interface SavedChart { id: number; name: string; sql: string; kind: ChartKind; label_col: string; value_cols: string[]; on_dashboard: boolean; created_by: string | null; updated_at: string }
+
+/** A saved chart's SELECT, run read-only: columns, which are numbers, and the rows. */
+async function runChart(s: Session, sql: string) {
+  const db = await workshopDb(s);
+  const schema = await sessionSchema(s, db);
+  const c = await db.pool.connect();
+  try {
+    await c.query('begin transaction read only');
+    await c.query(`select set_config('statement_timeout', '10s', true)`);
+    if (schema) await c.query(`select set_config('search_path', $1, true)`, [`${pg.escapeIdentifier(schema)}, public`]);
+    const res = await c.query({ text: `select * from (${unloadStatement(sql)}\n) chart_rows limit ${MAX_ROWS}`, rowMode: 'array' });
+    return { columns: res.fields.map((f) => f.name), numeric: res.fields.map((f) => isNumeric(f.dataTypeID)), rows: res.rows as unknown[][] };
+  } finally {
+    await c.query('rollback').catch(() => {});
+    c.release(true);
+  }
+}
+
+async function chartCard(s: Session, ch: SavedChart, full = false): Promise<{ body: Raw; css: string }> {
+  try {
+    const r = await runChart(s, ch.sql);
+    const spec = chartSpec(r.columns, r.numeric, { kind: ch.kind, label: ch.label_col, values: ch.value_cols });
+    if (!spec) return { body: html`<p class="muted">The query has no number column to draw.</p>`, css: '' };
+    const d = drawChart(ch.name, r.columns, r.rows, spec);
+    return { body: html`${d.body}${full ? html`<p class="muted small">${r.rows.length} row${r.rows.length === 1 ? '' : 's'}${r.rows.length === MAX_ROWS ? ` (the first ${MAX_ROWS})` : ''}.</p>` : ''}`, css: d.css };
+  } catch (e) {
+    return { body: html`<p class="alert alert-error">${(e as Error).message}</p>`, css: '' };
+  }
+}
+
+const style = (nonce: string, css: string) => (css ? html`<style nonce="${nonce}">${raw(css.replace(/</g, ''))}</style>` : '');
+
+export async function sqlChartRoutes(app: FastifyInstance) {
+  // the list and the dashboard
+  app.get(`${BASE}/sql/charts`, async (req: Req, reply: FastifyReply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const charts = (await owner.query<SavedChart>('select * from meta.sql_chart where workspace_id = $1 order by lower(name)', [currentWorkspace(s)])).rows;
+    let css = '';
+    const cards: Raw[] = [];
+    for (const ch of charts.filter((c) => c.on_dashboard)) {
+      const card = await chartCard(s, ch);
+      css += `\n${card.css}`;
+      cards.push(html`<section class="ch-card"><h2><a href="${BASE}/sql/charts/${ch.id}">${ch.name}</a></h2>${card.body}</section>`);
+    }
+    const main = html`<h1 class="u-mb1">Charts</h1>${workshopTabs('charts')}${style(req.cspNonce, css)}
+      <p class="muted">Queries drawn as charts. Make one from a query in the <a href="${BASE}/sql/worksheet">SQL Worksheet</a> (its Chart tab, Ctrl+F11), then save it.</p>
+      ${cards.length ? html`<div class="ch-dashboard">${cards}</div>` : ''}
+      ${region('All charts', charts.length ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Chart</th><th>Type</th><th>On the dashboard</th><th>Changed</th></tr></thead><tbody>
+        ${charts.map((c) => html`<tr><td><a href="${BASE}/sql/charts/${c.id}">${c.name}</a></td><td>${SQL_CHART_KINDS.find(([k]) => k === c.kind)?.[1] ?? c.kind}</td><td>${c.on_dashboard ? 'Yes' : 'No'}</td>
+          <td>${new Date(c.updated_at).toISOString().slice(0, 16).replace('T', ' ')}${c.created_by ? html` <span class="muted small">by ${c.created_by}</span>` : ''}</td></tr>`)}</tbody></table></div>`
+        : html`<p class="muted">No charts yet.</p>`)}`;
+    return send(reply, s, shell(s, 'Charts', [['SQL Workshop', `${BASE}/sql`], ['Charts']], main, 'sql'));
+  });
+
+  // one chart: drawn, with its settings
+  app.get(`${BASE}/sql/charts/:id`, async (req: Req, reply: FastifyReply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const ch = /^\d{1,9}$/.test(String(req.params.id)) ? await owner.one<SavedChart>('select * from meta.sql_chart where id = $1 and workspace_id = $2', [req.params.id, currentWorkspace(s)]) : undefined;
+    if (!ch) return reply.code(404).send('Not found');
+    const card = await chartCard(s, ch, true);
+    let controls: Raw | '' = '';
+    try {
+      const r = await runChart(s, ch.sql);
+      const spec = chartSpec(r.columns, r.numeric, { kind: ch.kind, label: ch.label_col, values: ch.value_cols });
+      if (spec) controls = chartControls(r.columns, spec, 'sch');
+    } catch {
+      controls = '';
+    }
+    const main = html`<h1 class="u-mb1">${ch.name}</h1>${workshopTabs('charts')}${style(req.cspNonce, card.css)}
+      <div class="ch-view">${card.body}</div>
+      <form method="post" action="${BASE}/sql/charts/${ch.id}" class="ch-edit">${csrf(s)}
+        <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>
+        <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>
+      </form>`;
+    return send(reply, s, shell(s, ch.name, [['SQL Workshop', `${BASE}/sql`], ['Charts', `${BASE}/sql/charts`], [ch.name]], main, 'sql'));
+  });
+
+  // save a chart from the worksheet (a new one), or change, open or delete a saved one
+  const save = async (req: Req, reply: FastifyReply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const b = req.body ?? {};
+    const ws = currentWorkspace(s);
+    const id = req.params?.id;
+    const name = String(b.name ?? b.chart_name ?? '').trim();
+    const asked = askedSpec(b);
+    const kind = SQL_CHART_KINDS.some(([k]) => k === asked.kind) ? asked.kind! : 'bar';
+    if (id !== undefined) {
+      const ch = /^\d{1,9}$/.test(String(id)) ? await owner.one<SavedChart>('select * from meta.sql_chart where id = $1 and workspace_id = $2', [id, ws]) : undefined;
+      if (!ch) return reply.code(404).send('Not found');
+      if (b.action === 'delete') {
+        await owner.query('delete from meta.sql_chart where id = $1', [ch.id]);
+        flash(s, `Deleted the chart ${ch.name}.`);
+        return back(reply, s, `${BASE}/sql/charts`);
+      }
+      if (b.action === 'worksheet') {
+        s.state.__SQLDRAFT = ch.sql;
+        return back(reply, s, `${BASE}/sql/worksheet`);
+      }
+      if (!name || name.length > 120) {
+        flash(s, 'A chart needs a name (at most 120 characters).', 'error');
+        return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
+      }
+      try {
+        await owner.query(`update meta.sql_chart set name = $2, kind = $3, label_col = $4, value_cols = $5, on_dashboard = $6, updated_at = now() where id = $1`,
+          [ch.id, name, kind, asked.label ?? ch.label_col, asked.values?.length ? asked.values : ch.value_cols, b.on_dashboard === 'on']);
+      } catch (e) {
+        if ((e as { code?: string }).code !== '23505') throw e;
+        flash(s, `A chart named “${name}” exists already.`, 'error');
+        return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
+      }
+      flash(s, `Saved the chart ${name}.`);
+      return back(reply, s, `${BASE}/sql/charts/${ch.id}`);
+    }
+    let sql = '';
+    try {
+      sql = unloadStatement(String(b.chart_sql ?? ''));
+    } catch {
+      flash(s, 'Only a chart of one SELECT can be saved.', 'error');
+      return back(reply, s, `${BASE}/sql/worksheet`);
+    }
+    if (!name || name.length > 120) {
+      flash(s, 'Name the chart to save it (at most 120 characters).', 'error');
+      return back(reply, s, `${BASE}/sql/worksheet`);
+    }
+    try {
+      const r = await owner.one<{ id: number }>(
+        `insert into meta.sql_chart (workspace_id, name, sql, kind, label_col, value_cols, created_by) values ($1, $2, $3, $4, $5, $6, $7) returning id`,
+        [ws, name, sql, kind, asked.label ?? '', asked.values ?? [], s.username]);
+      flash(s, `Saved the chart ${name}: it is on the Charts dashboard.`);
+      return back(reply, s, `${BASE}/sql/charts/${r!.id}`);
+    } catch (e) {
+      if ((e as { code?: string }).code !== '23505') throw e;
+      flash(s, `A chart named “${name}” exists already.`, 'error');
+      return back(reply, s, `${BASE}/sql/worksheet`);
+    }
+  };
+  app.post(`${BASE}/sql/charts`, save);
+  app.post(`${BASE}/sql/charts/:id`, save);
+}