pgkiln 0.41.0 → 0.43.0

package/src/builder/newapp.ts

@@ -3,7 +3,146 @@ import { owner, type Client } from '../db.ts';
 import { passwordProblem } from '../accounts.ts';
 import { replaceApp } from '../cli/replace.ts';
 import { placeApp } from './workspaces.ts';
-import { NEW_APP_BASE } from '../runtime/styles.ts';
+import { BASE_STYLES, NEW_APP_BASE } from '../runtime/styles.ts';
+import { LANGUAGE_NAMES } from '../i18n.ts';
+import { isIcon } from '../icons.ts';
+import { secretKeyConfigured } from '../secrets.ts';
+
+/** (097) The icon of a new application's home page when the developer chose none. */
+export const DEFAULT_APP_ICON = 'layers';
+const escapeHtml = (s: string) => s.replace(/[&<>"']/g, (ch) => `&#${ch.charCodeAt(0)};`);
+
+/** (sprint 72) The page number of a generated application's About page. */
+export const ABOUT_PAGE = 9000;
+
+/**
+ * (sprint 72) The About page of a generated application (APEX: the About Page
+ * feature): the application's name, its description or the pages of its menu,
+ * and a Help menu with it in the header's navigation bar (a list NAVBAR, unless
+ * the application has a navigation bar list already). Nothing when the page
+ * number is taken.
+ */
+export async function addAboutPage(c: Client, appId: number, description?: string | null) {
+  const app = (await c.query<{ name: string; navbar_list: string | null; home_page: number }>('select name, navbar_list, home_page from meta.app where id = $1', [appId])).rows[0];
+  if ((await c.query('select 1 from meta.page where app_id = $1 and page_no = $2', [appId, ABOUT_PAGE])).rowCount) return;
+  const pages = (
+    await c.query<{ label: string }>(
+      `select e.label from meta.nav_entry e where e.app_id = $1 and e.parent_id is null and e.target_page is not null and e.target_page <> $2 order by e.seq, e.id`,
+      [appId, app.home_page],
+    )
+  ).rows.map((r) => r.label);
+  const text = description
+    ? `<p>${escapeHtml(description)}</p>`
+    : pages.length
+      ? `<p>${escapeHtml(app.name)} has these pages:</p><ul>${pages.map((l) => `<li>${escapeHtml(l)}</li>`).join('')}</ul>`
+      : `<p>${escapeHtml(app.name)}</p>`;
+  const page = (await c.query(`insert into meta.page (app_id, page_no, name, title, parent_page) values ($1, $2, 'About', $3, $4) returning id`, [appId, ABOUT_PAGE, `About ${app.name}`.slice(0, 200), app.home_page])).rows[0].id;
+  await c.query(`insert into meta.region (page_id, seq, title, type, source) values ($1, 10, $2, 'static', $3)`, [page, app.name, text]);
+  if (app.navbar_list) return;
+  await c.query(`insert into meta.list (app_id, name, description) values ($1, 'NAVBAR', 'The navigation bar: the Help menu') on conflict (app_id, name) do nothing`, [appId]);
+  const help = (await c.query(`insert into meta.list_entry (app_id, list_name, seq, label, icon) values ($1, 'NAVBAR', 10, 'Help', 'help') returning id`, [appId])).rows[0].id;
+  await c.query(`insert into meta.list_entry (app_id, list_name, parent_id, seq, label, icon, target_page) values ($1, 'NAVBAR', $2, 10, 'About', 'info', $3)`, [appId, help, ABOUT_PAGE]);
+  await c.query(`update meta.app set navbar_list = 'NAVBAR' where id = $1`, [appId]);
+}
+
+/**
+ * (sprint 73) The Create Application wizard's features (APEX: Features). Each maps to a setting or to pages:
+ * - about: an About page in a Help menu (addAboutPage)
+ * - access: authorization schemes CONTRIBUTOR and READER next to ADMIN (roles admin, contributor, reader)
+ * - activity: an Activity page for administrators (page 9010: page views per day and the latest activity)
+ * - feedback: users may send feedback (the navigation bar's Feedback entry)
+ * - theme: users may choose light or dark (theme.user_choice)
+ * - pwa, push: installable, with push notifications (push needs PGKILN_SECRET_KEY; its key is made after the commit)
+ */
+export interface Features { about: boolean; access: boolean; activity: boolean; feedback: boolean; theme: boolean; pwa: boolean; push: boolean }
+export const FEATURES: [keyof Features, string, string, boolean][] = [
+  ['about', 'About page', 'An About page in a Help menu of the header.', true],
+  ['access', 'Access control', 'Authorization schemes for the roles admin, contributor and reader, to put on pages, regions and buttons.', false],
+  ['activity', 'Activity reporting', 'A page for administrators with the page views per day and the latest activity.', false],
+  ['feedback', 'Feedback', 'Users send feedback from the header; you read it under Activity → Feedback.', false],
+  ['theme', 'Theme style selection', 'Users may choose the light or the dark theme.', true],
+  ['pwa', 'Install as an app (PWA)', 'Installable on phones and desktops, with offline pages.', false],
+  ['push', 'Push notifications', 'Notifications to the users\' devices (with Install as an app).', false],
+];
+/** The features ticked on a form (a form without them: the defaults). */
+export const featuresFrom = (b: Record<string, unknown>, posted: boolean): Features =>
+  Object.fromEntries(FEATURES.map(([k, , , on]) => [k, posted ? b[`f_${k}`] === 'true' : on])) as unknown as Features;
+
+/** (sprint 73) The Activity page of a generated application. */
+export const ACTIVITY_PAGE = 9010;
+
+async function applyFeatures(c: Client, appId: number, f: Partial<Features>, notes: string[]) {
+  if (f.access) {
+    await c.query(
+      `insert into meta.authz_scheme (app_id, name, type, value, error_message) values
+         ($1, 'CONTRIBUTOR', 'sql', 'meta.has_role(''admin'') or meta.has_role(''contributor'')', 'Only contributors can do this.'),
+         ($1, 'READER', 'sql', 'meta.has_role(''admin'') or meta.has_role(''contributor'') or meta.has_role(''reader'')', 'Only readers can open this page.')
+       on conflict do nothing`,
+      [appId],
+    );
+  }
+  if (f.activity && !(await c.query('select 1 from meta.page where app_id = $1 and page_no = $2', [appId, ACTIVITY_PAGE])).rowCount) {
+    const home = (await c.query('select home_page from meta.app where id = $1', [appId])).rows[0].home_page;
+    const page = (await c.query(`insert into meta.page (app_id, page_no, name, title, parent_page, authz) values ($1, $2, 'Activity', 'Activity', $3, 'ADMIN') returning id`, [appId, ACTIVITY_PAGE, home])).rows[0].id;
+    await c.query(
+      `insert into meta.region (page_id, seq, title, type, source, config) values
+         ($1, 10, 'Page views per day', 'chart', $2, '{"kind": "column"}'),
+         ($1, 20, 'Latest activity', 'report', $3, '{"headings": {"at": "Time", "username": "User", "event": "Event", "page_no": "Page", "elapsed_ms": "Time taken (ms)"}}')`,
+      [page,
+       `select to_char(date_trunc('day', at), 'YYYY-MM-DD') as "Day", count(*) as "Page views"
+  from meta.app_activity(30)
+ where event = 'page_view'
+ group by 1
+ order by 1`,
+       `select at, username, event, page_no, elapsed_ms
+  from meta.app_activity(30)`],
+    );
+    await c.query(`insert into meta.nav_entry (app_id, seq, label, icon, target_page, authz) values ($1, 9010, 'Activity', 'activity', $2, 'ADMIN')`, [appId, ACTIVITY_PAGE]);
+  }
+  if (f.feedback) await c.query('update meta.app set feedback = true where id = $1', [appId]);
+  if (f.theme === false) await c.query(`update meta.app set theme = theme || '{"user_choice": false}' where id = $1`, [appId]);
+  if (f.pwa || f.push) await c.query('update meta.app set pwa = true where id = $1', [appId]);
+  if (f.push) {
+    if (secretKeyConfigured()) await c.query('update meta.app set pwa_push = true where id = $1', [appId]);
+    else notes.push('Push notifications are off: they need PGKILN_SECRET_KEY in the server\'s environment.');
+  }
+}
+
+/** (sprint 72) After a wizard generated the pages: the home page's cards and, unless turned off, the About page; (sprint 73) the chosen features. */
+export async function finishGeneratedApp(c: Client, appId: number, o: { about?: boolean; description?: string | null; features?: Partial<Features>; notes?: string[] } = {}) {
+  const f = { ...(o.features ?? {}) };
+  if (f.about === undefined) f.about = o.about !== false;
+  await applyFeatures(c, appId, f, o.notes ?? []);
+  await addHomeCards(c, appId);
+  if (f.about) await addAboutPage(c, appId, o.description);
+}
+
+/**
+ * (097) A card per page of the navigation menu on the home page (a static list
+ * HOME_PAGES shown by a list region with the cards template), after the pages
+ * of a new application were generated. Does nothing when the application has
+ * no other pages, or the list exists already.
+ */
+export async function addHomeCards(c: Client, appId: number) {
+  const entries = (
+    await c.query<{ label: string; icon: string | null; target_page: number; authz: string | null }>(
+      `select e.label, e.icon, e.target_page, e.authz from meta.nav_entry e join meta.app a on a.id = e.app_id
+        where e.app_id = $1 and e.parent_id is null and e.target_page is not null and e.target_page <> a.home_page
+        order by e.seq, e.id`,
+      [appId],
+    )
+  ).rows;
+  if (!entries.length) return;
+  const made = await c.query(`insert into meta.list (app_id, name, description) values ($1, 'HOME_PAGES', 'The cards of the home page') on conflict (app_id, name) do nothing`, [appId]);
+  if (!made.rowCount) return;
+  for (const [n, e] of entries.entries())
+    await c.query('insert into meta.list_entry (app_id, list_name, seq, label, icon, target_page, authz) values ($1, $2, $3, $4, $5, $6, $7)', [appId, 'HOME_PAGES', (n + 1) * 10, e.label, e.icon, e.target_page, e.authz]);
+  await c.query(
+    `insert into meta.region (page_id, seq, title, type, template, config)
+     select p.id, 20, 'Pages', 'list', 'plain', '{"list": "HOME_PAGES", "template": "cards"}' from meta.page p join meta.app a on a.id = p.app_id and p.page_no = a.home_page where a.id = $1`,
+    [appId],
+  );
+}
 
 // Creating an application (Create → blank application, and Create → from a
 // file): the parsing schema, a database role app_<alias> that can use only
@@ -18,6 +157,15 @@ export interface NewAppInput {
   authentication?: string;
   admin_user?: string;
   admin_password?: string;
+  /** (097) a line about the application, shown on the home page */
+  description?: string;
+  /** (097) the application's icon (a name from icons.svg) */
+  icon?: string;
+  /** (sprint 73) appearance: base style, menu position, accent colour; the primary language */
+  base?: string;
+  nav?: string;
+  accent?: string;
+  language?: string;
 }
 
 export interface CheckedApp {
@@ -31,6 +179,16 @@ export interface CheckedApp {
   adminPassword: string | null;
   /** the workspace that gets the application (the developer's current one) */
   workspaceId: number;
+  /** (097) shown under the name on the home page */
+  description?: string | null;
+  /** (097) the home page's icon */
+  icon?: string | null;
+  /** (sprint 73) the theme: base style (Iris when not given), menu at the top, own accent colour */
+  base?: 'iris' | 'lavender' | 'standard';
+  topNav?: boolean;
+  accent?: string | null;
+  /** (sprint 73) the primary language (default en) */
+  language?: string;
 }
 
 /** pgkiln's and the system's schemas never become an application's parsing schema. */
@@ -56,7 +214,17 @@ export async function checkNewApp(b: NewAppInput, workspaceId: number): Promise<
     if (problem) throw new Error(problem);
     adminPassword = known ? null : (b.admin_password ?? '');
   }
-  return { name, alias, schema, role: `app_${alias.replace(/-/g, '_')}`, authentication, adminUser, adminPassword, workspaceId };
+  const description = (b.description ?? '').trim().slice(0, 300) || null;
+  const appIcon = (b.icon ?? '').trim();
+  if (appIcon && !isIcon(appIcon)) throw new Error('Choose one of the icons in the list.');
+  const base = b.base === 'lavender' || b.base === 'standard' ? b.base : 'iris';
+  const accent = /^#[0-9a-f]{6}$/i.test(b.accent ?? '') && b.accent!.toLowerCase() !== BASE_STYLES[base].accent ? b.accent!.toLowerCase() : null;
+  const language = (b.language ?? '').trim() || 'en';
+  if (!(language in LANGUAGE_NAMES)) throw new Error('Choose one of the languages in the list.');
+  return {
+    name, alias, schema, role: `app_${alias.replace(/-/g, '_')}`, authentication, adminUser, adminPassword, workspaceId, description, icon: appIcon || null,
+    base, topNav: b.nav === 'top', accent, language,
+  };
 }
 
 /** Create the schema, the role and the application (inside the caller's owner transaction). */
@@ -93,12 +261,21 @@ export async function createApp(c: Client, a: CheckedApp): Promise<{ id: number;
   await c.query(`alter default privileges in schema ${S} grant usage, select on sequences to ${R}`);
   await c.query(`alter default privileges in schema ${S} grant execute on functions to ${R}`);
 
-  // new applications start with the newest base style (Iris); existing ones keep theirs
-  const r = await c.query('insert into meta.app (alias, name, authentication, db_role, theme) values ($1, $2, $3, $4, $5) returning id', [a.alias, a.name, a.authentication, a.role, { base: NEW_APP_BASE }]);
+  // new applications start with the newest base style (Iris), light (users may switch to dark); existing ones keep theirs
+  // (sprint 73) the wizard's appearance: base style, menu at the top, an own accent colour
+  const theme: Record<string, string> = { mode: 'light' };
+  const base = a.base ?? NEW_APP_BASE;
+  if (base !== 'standard') theme.base = base;
+  if (a.topNav) theme.nav = 'top';
+  if (a.accent) theme.accent = a.accent;
+  const r = await c.query('insert into meta.app (alias, name, authentication, db_role, theme, language) values ($1, $2, $3, $4, $5, $6) returning id', [a.alias, a.name, a.authentication, a.role, theme, a.language ?? 'en']);
   const appId = r.rows[0].id as number;
   await placeApp(c, appId, a.workspaceId);
   const p = await c.query(`insert into meta.page (app_id, page_no, name, title) values ($1, 1, 'Home', 'Home') returning id`, [appId]);
-  await c.query(`insert into meta.region (page_id, title, type, source) values ($1, 'Welcome', 'static', '<p>Hello, &APP_USER.! Edit this page in the builder.</p>')`, [p.rows[0].id]);
+  // (097) a hero with the application's icon, name and description (no developer wording for end users)
+  await c.query(`insert into meta.region (page_id, seq, title, type, source, template, config) values ($1, 10, $2, 'static', $3, 'hero', $4)`, [
+    p.rows[0].id, a.name, a.description ? `<p>${escapeHtml(a.description)}</p>` : '', { icon: a.icon ?? DEFAULT_APP_ICON },
+  ]);
   await c.query(`insert into meta.nav_entry (app_id, seq, label, icon, target_page) values ($1, 1, 'Home', 'home', 1)`, [appId]);
   await c.query(`insert into meta.authz_scheme (app_id, name, type, value, error_message) values ($1, 'ADMIN', 'role', 'admin', 'Only administrators can access this page.')`, [appId]);
   let existingAccount = false;

package/src/builder/object-browser.ts

@@ -0,0 +1,342 @@
+import type { FastifyInstance } from 'fastify';
+import pg from 'pg';
+import { html, raw, type Raw } from '../html.ts';
+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 { sessionSchema, workshopDb } from './workspaces.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,
+// 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
+// Commands to review and run (nothing runs here). Everything is read with the workshop's connection
+// (an isolated workspace's developer login for its developers), and every name in a URL is looked up
+// 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 OB_TYPES = [
+  ['table', 'Tables', 'table'],
+  ['view', 'Views', 'layers'],
+  ['matview', 'Materialized Views', 'layers'],
+  ['index', 'Indexes', 'list'],
+  ['sequence', 'Sequences', 'hash'],
+  ['type', 'Types', 'tag'],
+  ['function', 'Functions', 'code'],
+  ['procedure', 'Procedures', 'code'],
+  ['trigger', 'Triggers', 'bolt'],
+] as const;
+type ObType = (typeof OB_TYPES)[number][0];
+
+interface Obj {
+  type: ObType;
+  name: string;
+  /** the object as SQL can name it: regclass, regprocedure or regtype text; a trigger: "table" */
+  ref: string;
+  rls: boolean;
+  /** an extension's object */
+  ext: boolean;
+}
+
+const TABLE_TABS = [
+  ['columns', 'Columns'], ['data', 'Data'], ['indexes', 'Indexes'], ['constraints', 'Constraints'], ['triggers', 'Triggers'],
+  ['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). */
+export function createTemplate(kind: string, schema: string): string | null {
+  const S = pg.escapeIdentifier(schema);
+  switch (kind) {
+    case 'table': return `create table ${S}.new_table (\n  id bigint generated by default as identity primary key,\n  name text not null,\n  created_at timestamptz not null default now()\n);`;
+    case 'view': return `create view ${S}.new_view as\nselect *\n  from ${S}.some_table;`;
+    case 'function': return `create function ${S}.new_function(p_id bigint) returns text\nlanguage sql stable as $$\n  select 'x'\n$$;`;
+    case 'sequence': return `create sequence ${S}.new_sequence start 1;`;
+    case 'index': return `create index on ${S}.some_table (some_column);`;
+    default: return null;
+  }
+}
+
+const PAGE_SIZE = 25;
+/** 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}$/;
+
+export async function objectBrowserRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/sql/objects`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const db = await workshopDb(s);
+    const q = req.query ?? {};
+    const system = q.system === '1';
+    const schemas = (
+      await db.query<{ n: string }>(
+        `select nspname as n from pg_namespace
+          where nspname !~ '^pg_' and nspname <> 'information_schema' and has_schema_privilege(oid, 'USAGE')
+            and ($1 or not (nspname = any ($2)))
+          order by nspname = 'public', 1`,
+        [system, SYSTEM_SCHEMAS],
+      )
+    ).rows.map((r) => r.n);
+    const own = await sessionSchema(s, db);
+    const schema = typeof q.schema === 'string' && schemas.includes(q.schema) ? q.schema : own && schemas.includes(own) ? own : (schemas[0] ?? '');
+    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()));
+    const kind = String(q.k ?? '') as ObType;
+    const selected = objects.find((o) => o.type === kind && o.ref === q.o);
+    const link = (extra: Record<string, string>) => `?${new URLSearchParams({ schema, ...(system ? { system: '1' } : {}), ...(filter ? { q: filter } : {}), ...extra })}`;
+
+    const tree = html`<form method="get" class="ob-filter" role="search"><input type="hidden" name="schema" value="${schema}">${system ? html`<input type="hidden" name="system" value="1">` : ''}
+        <label class="sr-only" for="ob-q">Filter objects</label><input id="ob-q" name="q" type="search" value="${filter}" placeholder="Filter" data-filter-tree="ob-tree"></form>
+      <div id="ob-tree">${OB_TYPES.map(([t, label, ic]) => {
+        const list = shown.filter((o) => o.type === t);
+        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>
+        </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
+      detail = region(`Create database objects in ${schema}`, html`<div class="ob-tiles">${[
+        ['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>`)}
+        <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>`);
+
+    const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('objects')}
+      <div class="ob-head">
+        <form method="get" class="ob-schema">${filter ? html`<input type="hidden" name="q" value="${filter}">` : ''}
+          <label class="label" for="ob-schema">Schema</label>
+          <select id="ob-schema" name="schema" data-autosubmit>${schemas.map((n) => html`<option value="${n}"${n === schema ? raw(' selected') : ''}>${n}</option>`)}</select>
+          <label class="check"><input type="checkbox" name="system" value="1"${system ? raw(' checked') : ''} data-autosubmit> Show system objects</label>
+          <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>
+      </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
+  app.post(`${BASE}/sql/objects/alter`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const db = await workshopDb(s);
+    const b = req.body ?? {};
+    const table = await db.one<{ q: string; ok: boolean }>(
+      `select c.oid::regclass::text as q, has_table_privilege(c.oid, 'select') or pg_has_role(c.relowner, 'usage') as ok
+         from pg_class c join pg_namespace n on n.oid = c.relnamespace
+        where c.oid = to_regclass($1) and c.relkind in ('r', 'p')
+          and n.nspname !~ '^pg_' and n.nspname <> 'information_schema' and not (n.nspname = any ($2))`,
+      [String(b.table ?? ''), SYSTEM_SCHEMAS],
+    ).catch(() => undefined);
+    const backTo = `${BASE}/sql/objects?${new URLSearchParams({ schema: String(b.schema ?? ''), k: 'table', o: String(b.table ?? ''), tab: 'columns' })}`;
+    if (!table?.ok) {
+      flash(s, 'Choose a table you may use.', 'error');
+      return back(reply, s, `${BASE}/sql/objects`);
+    }
+    const col = String(b.column ?? '').trim();
+    const cols = (await db.query<{ n: string }>(`select attname as n from pg_attribute where attrelid = $1::regclass and attnum > 0 and not attisdropped`, [table.q])).rows.map((r) => r.n);
+    const ident = pg.escapeIdentifier;
+    let sql: string | null = null;
+    let problem = '';
+    if (b.action === 'add') {
+      const type = String(b.type ?? '').trim();
+      if (!NAME_RE.test(col)) problem = 'A column name is a letter or _ followed by letters, digits, _ or $.';
+      else if (cols.includes(col)) problem = `${col} is a column already.`;
+      else if (!TYPE_RE.test(type)) problem = 'A type is a name with an optional size, e.g. text, numeric(9,2), varchar(40), int[].';
+      else sql = `alter table ${table.q} add column ${ident(col)} ${type}${b.not_null === 'true' ? ' not null' : ''};`;
+    } else if (b.action === 'rename') {
+      const to = String(b.new_name ?? '').trim();
+      if (!cols.includes(col)) problem = 'Choose a column of the table.';
+      else if (!NAME_RE.test(to) || cols.includes(to)) problem = 'The new name must be a valid name that the table doesn\'t have yet.';
+      else sql = `alter table ${table.q} rename column ${ident(col)} to ${ident(to)};`;
+    } else if (b.action === 'drop') {
+      if (!cols.includes(col)) problem = 'Choose a column of the table.';
+      else sql = `alter table ${table.q} drop column ${ident(col)};`;
+    } else problem = 'Unknown action.';
+    if (!sql) {
+      flash(s, problem, 'error');
+      return back(reply, s, backTo);
+    }
+    s.state.__SQLDRAFT = sql;
+    flash(s, 'Review the statement and press Run: nothing has been changed yet.');
+    return back(reply, s, `${BASE}/sql/commands`);
+  });
+}
+
+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>(
+      `select * from (
+         select case c.relkind when 'r' then 'table' when 'p' then 'table' when 'v' then 'view' when 'm' then 'matview'
+                               when 'S' then 'sequence' when 'i' then 'index' when 'I' then 'index' end as type,
+                c.relname as name, c.oid::regclass::text as ref, c.relrowsecurity as rls, ${ext('pg_class', 'c.oid')} as ext
+           from pg_class c join pg_namespace n on n.oid = c.relnamespace
+          where n.nspname = $1 and c.relkind in ('r', 'p', 'v', 'm', 'S', 'i', 'I') and not c.relispartition
+         union all
+         select case p.prokind when 'p' then 'procedure' else 'function' end, p.proname || '(' || pg_get_function_identity_arguments(p.oid) || ')',
+                p.oid::regprocedure::text, false, ${ext('pg_proc', 'p.oid')}
+           from pg_proc p join pg_namespace n on n.oid = p.pronamespace
+          where n.nspname = $1 and p.prokind in ('f', 'p', 'a', 'w')
+         union all
+         select 'type', t.typname, t.oid::regtype::text, false, ${ext('pg_type', 't.oid')}
+           from pg_type t join pg_namespace n on n.oid = t.typnamespace
+          where n.nspname = $1 and t.typtype in ('c', 'e', 'd', 'r', 'm') and t.typname !~ '^_'
+            and (t.typrelid = 0 or (select relkind from pg_class where oid = t.typrelid) = 'c')
+         union all
+         select 'trigger', tg.tgname || ' on ' || c.relname, c.oid::regclass::text || '|' || tg.tgname, false, false
+           from pg_trigger tg join pg_class c on c.oid = tg.tgrelid join pg_namespace n on n.oid = c.relnamespace
+          where n.nspname = $1 and not tg.tgisinternal
+       ) x order by 2`,
+      [schema],
+    )
+  ).rows;
+  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> {
+  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>
+        <tbody>${rows.map((r) => html`<tr>${Object.values(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>`
+      : html`<p class="muted">${empty}</p>`;
+  const ddlOf = async (match: (x: { kind: string; name: string; table?: string }) => boolean) => {
+    const objects = await readSchema(db.pool as pg.Pool, schema).catch(() => []);
+    const text = objects.filter(match).map((x) => x.ddl).join('\n\n');
+    return text ? html`<pre class="source">${text}</pre>` : html`<p class="muted">No DDL (an extension's object, or not readable with this connection).</p>`;
+  };
+  const relname = o.ref.includes('.') ? o.ref.slice(o.ref.lastIndexOf('.') + 1).replace(/^"|"$/g, '') : o.ref.replace(/^"|"$/g, '');
+
+  if (o.type === 'function' || o.type === 'procedure') {
+    const src = await db.one<{ def: string }>('select pg_get_functiondef($1::regprocedure) as def', [o.ref]).catch(() => undefined);
+    return region(o.name, src ? html`<pre class="source">${src.def}</pre>` : html`<p class="muted">An aggregate or window function: no source.</p>`);
+  }
+  if (o.type === 'trigger') {
+    const [rel, name] = o.ref.split('|');
+    const t = 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]);
+    return region(o.name, html`<pre class="source">${t?.def ?? ''}</pre>`);
+  }
+  if (o.type === 'index') {
+    const i = await db.one<{ def: string; size: string }>('select pg_get_indexdef($1::regclass) as def, pg_size_pretty(pg_relation_size($1::regclass)) as size', [o.ref]);
+    return region(o.name, html`<pre class="source">${i?.def ?? ''};</pre><p class="muted">Size: ${i?.size ?? ''}</p>`);
+  }
+  if (o.type === 'sequence') {
+    const q = await db.one<Record<string, unknown>>(
+      `select data_type, start_value, min_value, max_value, increment_by, cycle, cache_size, last_value from pg_sequences where schemaname = $1 and sequencename = $2`,
+      [schema, relname],
+    );
+    return html`${region(o.name, table(q ? [q] : []))}${region('DDL', await ddlOf((x) => x.kind === 'sequence' && x.name === relname))}`;
+  }
+  if (o.type === 'type') {
+    return region(o.name, await ddlOf((x) => (x.kind === 'type' || x.kind === 'domain') && x.name === relname));
+  }
+
+  // tables, views and materialized views: tabs
+  const isTable = o.type === 'table';
+  const tabs = TABLE_TABS.filter(([k]) => isTable || !['indexes', 'constraints', 'triggers', 'rls'].includes(k) || (o.type === 'matview' && k === 'indexes'));
+  const tab = tabs.some(([k]) => k === tabAsked) ? tabAsked : 'columns';
+  const nav = html`<nav class="settings-tabs ob-tabs" aria-label="${o.name}">${tabs.map(([k, label]) => html`<a href="${link({ k: o.type, o: o.ref, tab: k })}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`)}</nav>`;
+  let body: Raw;
+  switch (tab) {
+    case 'columns': {
+      const cols = (
+        await db.query(
+          `select a.attname as "column", format_type(a.atttypid, a.atttypmod) as type, not a.attnotnull as nullable,
+                  pg_get_expr(d.adbin, d.adrelid) as "default", col_description(a.attrelid, a.attnum) as comment
+             from pg_attribute a left join pg_attrdef d on d.adrelid = a.attrelid and d.adnum = a.attnum
+            where a.attrelid = $1::regclass and a.attnum > 0 and not a.attisdropped order by a.attnum`,
+          [o.ref],
+        )
+      ).rows;
+      const names = cols.map((c) => String(c.column));
+      const hidden = html`${raw(`<input type="hidden" name="__csrf" value="${s.csrf_token}">`)}<input type="hidden" name="table" value="${o.ref}"><input type="hidden" name="schema" value="${schema}">`;
+      const pick = (id: string) => html`<label class="sr-only" for="${id}">Column</label><select id="${id}" name="column">${names.map((n) => html`<option>${n}</option>`)}</select>`;
+      body = html`${table(cols)}${isTable
+        ? html`<div class="ob-actions">
+            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="add">
+              <b>Add column</b><label class="sr-only" for="ob-add-name">Name</label><input id="ob-add-name" name="column" placeholder="name" required>
+              <label class="sr-only" for="ob-add-type">Type</label><input id="ob-add-type" name="type" placeholder="text" required>
+              <label class="check"><input type="checkbox" name="not_null" value="true"> not null</label><button class="btn btn-sm">Show the SQL</button></form>
+            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="rename">
+              <b>Rename column</b>${pick('ob-ren-col')}<label class="sr-only" for="ob-ren-to">New name</label><input id="ob-ren-to" name="new_name" placeholder="new name" required><button class="btn btn-sm">Show the SQL</button></form>
+            <form method="post" action="${BASE}/sql/objects/alter" class="ob-action">${hidden}<input type="hidden" name="action" value="drop">
+              <b>Drop column</b>${pick('ob-drop-col')}<button class="btn btn-sm">Show the SQL</button></form>
+            <p class="muted u-m0">Each action writes the ALTER TABLE statement into SQL Commands: review it there and press Run.</p>
+          </div>`
+        : ''}`;
+      break;
+    }
+    case 'data': {
+      const offset = (Math.max(1, Math.min(page, 100000)) - 1) * PAGE_SIZE;
+      const data = await db.pool.query({ text: `select * from ${o.ref} limit ${PAGE_SIZE + 1} offset ${offset}`, rowMode: 'array' }).catch((e: Error) => e);
+      if (data instanceof Error) body = html`<div class="alert alert-error" role="alert">${data.message}</div>`;
+      else {
+        const more = data.rows.length > PAGE_SIZE;
+        const rows = data.rows.slice(0, PAGE_SIZE).map((r: unknown[]) => Object.fromEntries(data.fields.map((f, i) => [f.name, r[i]])));
+        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>`;
+      }
+      break;
+    }
+    case 'indexes':
+      body = table((await db.query(`select i.relname as "index", ix.indisunique as "unique", ix.indisprimary as "primary", pg_get_indexdef(ix.indexrelid) as definition, pg_size_pretty(pg_relation_size(ix.indexrelid)) as size
+                                      from pg_index ix join pg_class i on i.oid = ix.indexrelid where ix.indrelid = $1::regclass order by i.relname`, [o.ref])).rows);
+      break;
+    case 'constraints':
+      body = table((await db.query(`select conname as "constraint", case contype when 'p' then 'primary key' when 'f' then 'foreign key' when 'u' then 'unique' when 'c' then 'check' when 'x' then 'exclusion' when 'n' then 'not null' end as type,
+                                           pg_get_constraintdef(oid, true) as definition, case when contype = 'f' then confrelid::regclass::text end as "references"
+                                      from pg_constraint where conrelid = $1::regclass order by contype = 'p' desc, contype, conname`, [o.ref])).rows);
+      break;
+    case 'triggers':
+      body = table((await db.query(`select tgname as "trigger", tgenabled <> 'D' as enabled, pg_get_triggerdef(oid, true) as definition from pg_trigger where tgrelid = $1::regclass and not tgisinternal order by tgname`, [o.ref])).rows);
+      break;
+    case 'grants':
+      body = table((await db.query(`select grantee, string_agg(privilege_type, ', ' order by privilege_type) as privileges from information_schema.role_table_grants where table_schema = $1 and table_name = $2 group by grantee order by grantee`, [schema, relname])).rows);
+      break;
+    case 'rls': {
+      const on = await db.one<{ rls: boolean; force: boolean }>('select relrowsecurity as rls, relforcerowsecurity as force from pg_class where oid = $1::regclass', [o.ref]);
+      body = html`<p>${on?.rls ? html`<b>Row level security is on</b>${on.force ? ' (forced for the owner too)' : ''}.` : 'Row level security is off.'}</p>
+        ${table((await db.query(`select policyname as policy, permissive, cmd, roles::text, qual as "using", with_check from pg_policies where schemaname = $1 and tablename = $2 order by policyname`, [schema, relname])).rows, 'No policies.')}`;
+      break;
+    }
+    case 'dependencies':
+      body = html`<h3>Used by</h3>${table((await db.query(
+        `select distinct dc.oid::regclass::text as object, case dc.relkind when 'v' then 'view' when 'm' then 'materialized view' else 'table' end as type
+           from pg_depend d join pg_rewrite r on r.oid = d.objid join pg_class dc on dc.oid = r.ev_class
+          where d.classid = 'pg_rewrite'::regclass and d.refobjid = $1::regclass and dc.oid <> $1::regclass
+         union
+         select conrelid::regclass::text, 'foreign key ' || conname from pg_constraint where confrelid = $1::regclass and contype = 'f' and conrelid <> $1::regclass
+         order by 1`, [o.ref])).rows, 'Nothing refers to it.')}
+        <h3>Uses</h3>${table((await db.query(
+        `select distinct d.refobjid::regclass::text as object, 'table or view' as type
+           from pg_rewrite r join pg_depend d on d.objid = r.oid and d.classid = 'pg_rewrite'::regclass and d.refclassid = 'pg_class'::regclass
+          where r.ev_class = $1::regclass and d.refobjid <> $1::regclass
+         union
+         select confrelid::regclass::text, 'foreign key ' || conname from pg_constraint where conrelid = $1::regclass and contype = 'f' and confrelid <> $1::regclass
+         order by 1`, [o.ref])).rows, 'It refers to nothing else.')}`;
+      break;
+    case 'statistics':
+      body = table([(await db.one(
+        `select c.reltuples::bigint as estimated_rows, pg_size_pretty(pg_total_relation_size(c.oid)) as total_size, pg_size_pretty(pg_relation_size(c.oid)) as table_size,
+                st.last_analyze, st.last_autoanalyze, st.last_vacuum, st.last_autovacuum, st.n_live_tup as live_rows, st.n_dead_tup as dead_rows
+           from pg_class c left join pg_stat_user_tables st on st.relid = c.oid where c.oid = $1::regclass`, [o.ref]))!]);
+      break;
+    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)}`;
+}

package/src/builder/pwa.ts

@@ -74,7 +74,7 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     const id = req.params.id;
-    const target = `${BASE}/apps/${id}/settings`;
+    const target = `${BASE}/apps/${id}/settings?tab=pwa`;
     const a = /^\d+$/.test(id) ? await owner.one('select id from meta.app where id = $1', [id]) : undefined;
     if (!a) return reply.code(404).send('Not found');
     const b = req.body ?? {};
@@ -111,7 +111,7 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
     const s = await developer(req, reply);
     if (!s) return;
     const id = req.params.id;
-    const target = `${BASE}/apps/${id}/settings`;
+    const target = `${BASE}/apps/${id}/settings?tab=pwa`;
     const a = /^\d+$/.test(id) ? await owner.one<{ id: number; name: string }>('select id, name from meta.app where id = $1', [id]) : undefined;
     if (!a) return reply.code(404).send('Not found');
     const user = String(req.body?.push_user ?? '').trim();
@@ -137,6 +137,6 @@ export async function pwaBuilderRoutes(app: FastifyInstance) {
     if (!/^\d+$/.test(id) || !(await owner.one('select 1 from meta.app where id = $1', [id]))) return reply.code(404).send('Not found');
     await newAppKeys(Number(id));
     flash(s, 'New keys made. Users have to turn notifications on again on each device.');
-    return back(reply, s, `${BASE}/apps/${id}/settings`);
+    return back(reply, s, `${BASE}/apps/${id}/settings?tab=pwa`);
   });
 }