pgkiln 0.37.0 → 0.38.0

package/public/builder.css

@@ -437,6 +437,41 @@ kbd { display: inline-block; padding: 0 0.35em; border: 1px solid var(--border);
 .ide-login { background: linear-gradient(180deg, var(--chrome) 0 40%, var(--bg) 40%); color: var(--text); }
 .ide-login .btn-hot { background: var(--hot); border-color: var(--hot); color: var(--hot-text); }
 .ide-login .btn-hot:hover { background: var(--hot-hover); }
+.signin-body.ide-login { display: block; background: var(--bg); }
+.signin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; max-width: none; min-height: 100vh; min-height: 100dvh; margin: 0; padding: 0; }
+.signin-hero {
+  display: flex; flex-direction: column; justify-content: flex-start; gap: 0.75rem; padding: 3rem;
+  color: var(--chrome-text); background-color: var(--chrome);
+  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 14px),
+                    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.02) 0 1px, transparent 1px 22px);
+}
+.signin-logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: var(--hot); color: var(--hot-text); font-weight: 700; font-size: 18px; margin-bottom: 2rem; }
+.signin-title { margin: 0; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 750; color: var(--chrome-text); }
+.signin-tagline { margin: 0; font-size: 1.2rem; color: var(--chrome-muted); max-width: 30ch; }
+.signin-foot { margin: auto 0 0; font-size: 0.85rem; color: var(--chrome-muted); }
+.signin-panel { display: grid; place-items: center; padding: 2rem 1rem; background: var(--surface); }
+.signin-form { display: flex; flex-direction: column; gap: 0.85rem; width: 100%; max-width: 420px; }
+.signin-form h2 { margin: 0; font-size: 1.5rem; }
+.signin-form .field { margin: 0; }
+.signin-input { display: flex; align-items: center; gap: 0.6rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
+.signin-input:focus-within { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -1px; }
+.signin-input > .icon { flex: none; width: 18px; height: 18px; color: var(--muted); }
+.ide-login .signin-input input { flex: 1; width: auto; min-width: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0.7rem 0; font-size: 1rem; color: var(--text); outline: none; }
+.signin-reveal { flex: none; border: 0; background: none; color: var(--accent); cursor: pointer; font-size: 0.85rem; padding: 0.25rem; }
+.signin-remember { font-size: 0.9rem; }
+.signin-submit { padding: 0.75rem; font-size: 1rem; }
+.signin-hint { margin: 0; text-align: center; }
+.signin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
+.signin-actions a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--gold); text-decoration: none; }
+.signin-actions a:hover { text-decoration: underline; }
+@media (max-width: 760px) {
+  .signin { grid-template-columns: 1fr; }
+  .signin-hero { padding: 1.25rem 1rem; gap: 0.25rem; }
+  .signin-logo { margin-bottom: 0.5rem; width: 36px; height: 36px; font-size: 15px; }
+  .signin-tagline { font-size: 1rem; }
+  .signin-foot { display: none; }
+  .signin-panel { place-items: start center; }
+}
 
 /* ------------------------------------------------------------ small screens */
 /* ------------------------------------------------------------ status bar (every builder page, like APEX's footer) */
@@ -781,3 +816,59 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .pe-help-body { padding-top: 0.4rem; overflow-wrap: anywhere; }
 .pe-help-body h3 { font-size: 0.95rem; margin: 0 0 0.3rem; }
 .pe-help-body p { margin: 0 0 0.4rem; }
+
+/* ------------------------------------------------------------ environment banner, workspace message (091), Administration menu */
+.ide-banner { padding: 3px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; }
+.ide-banner-red { background: #b42318; color: #fff; }
+.ide-banner-orange { background: #c4520f; color: #fff; }
+.ide-banner-yellow { background: #e6b400; color: #1e1d1b; }
+.ide-banner-green { background: #2f7d32; color: #fff; }
+.ide-banner-teal { background: #0e7a74; color: #fff; }
+.ide-banner-blue { background: #1a5f99; color: #fff; }
+.ide-banner-purple { background: #6941c6; color: #fff; }
+.ide-banner-gray { background: #5e5a54; color: #fff; }
+.ab-message { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 12px; }
+.ab-message p { margin: 0.15rem 0 0; white-space: pre-line; }
+.rail-admin { padding: 0; }
+.rail-admin > summary { list-style: none; cursor: pointer; }
+.rail-admin > summary::-webkit-details-marker { display: none; }
+.rail-admin .menu-panel { bottom: 56px; }
+.rail-admin .menu-links strong { padding: 2px 0 4px; }
+.ide .alert-info { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
+
+/* ------------------------------------------------------------ SQL Workshop home (sprint 61) */
+.sw-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.sw-tile-icon { background: #2f7d32; }
+.sw-recents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
+.sw-recent { min-width: 0; border-left: 1px solid var(--border); }
+.sw-recent:first-child { border-left: 0; }
+.sw-recent h2 { margin: 0; padding: 10px 12px; font-size: 13.5px; border-bottom: 1px solid var(--border); }
+.sw-recent ul { list-style: none; margin: 0; padding: 0; max-height: 440px; overflow-y: auto; }
+.sw-recent li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
+.sw-recent li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold); text-decoration: none; }
+.sw-recent li a:hover { text-decoration: underline; }
+.sw-recent li .muted { flex: none; font-size: 12px; }
+.sw-recent > p { padding: 0 12px; }
+.sw-schema { display: flex; gap: 6px; }
+.sw-schema select { flex: 1; min-width: 0; }
+@media (max-width: 1100px) { .sw-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .sw-recents { grid-template-columns: 1fr; } .sw-recent { border-left: 0; border-top: 1px solid var(--border); } .sw-recent:first-child { border-top: 0; } }
+
+/* ------------------------------------------------------------ App Gallery (sprint 61) */
+.gal-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
+.gal-search { flex: 1 1 320px; }
+.gal-tabs { display: inline-flex; }
+.gal-tabs a { padding: 6px 12px; text-decoration: none; color: var(--text); border: 1px solid var(--border); background: var(--surface); }
+.gal-tabs a + a { border-left: 0; }
+.gal-tabs a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
+.gal-tabs a:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
+.gal-tabs a[aria-current] { background: var(--surface-3); font-weight: 650; }
+.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
+.gal-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); min-width: 0; }
+.gal-head { display: flex; gap: 12px; align-items: center; }
+.gal-head h2 { margin: 0; font-size: 15px; }
+.gal-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
+.gal-icon .icon { width: 26px; height: 26px; }
+.gal-card > p { margin: 0; flex: 1; line-height: 1.5; }
+.gal-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
+.gal-foot form { margin: 0; }
+.ab-group select { min-width: 140px; }

package/src/app.ts

@@ -66,6 +66,9 @@ import { refreshInstanceSettings } from './instance.ts';
 import { loadSecrets, securityHeaders, trustProxySetting } from './security.ts';
 import { lucideSymbol } from './icons.ts';
 import { runtimeForAlias } from './workspace-db.ts';
+import { galleryRoutes } from './builder/gallery.ts';
+import { appGroupRoutes } from './builder/app-groups.ts';
+import { crossAppRoutes } from './builder/cross-app.ts';
 import { runtimeScope } from './db.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
@@ -171,6 +174,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(staticFileRoutes);
   await app.register(restRoutes);
   await app.register(builderRoutes);
+  await app.register(galleryRoutes);
+  await app.register(appGroupRoutes);
+  await app.register(crossAppRoutes);
   await app.register(sharedRoutes);
   await app.register(designerRoutes);
   await app.register(lockRoutes);

package/src/builder/app-groups.ts

@@ -0,0 +1,132 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { clientIp, logActivity } from '../session.ts';
+import { back, BASE, csrf, developer, flash, input, region, send, shell, type Req } from './ui.ts';
+import { currentWorkspace } from './workspaces.ts';
+
+// Application groups (092; APEX: Workspace Utilities → Application Groups): a
+// workspace's named groups of applications. The App Builder home filters and
+// labels applications by group. Every developer of the workspace manages them.
+
+const NAME = /^\S(.{0,58}\S)?$/;
+const crumbs = (extra: [string, string?][] = []): [string, string?][] => [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], ['Application groups', `${BASE}/app-groups`], ...extra];
+
+const groupError = (e: unknown) => {
+  const m = (e as Error).message;
+  if (m.includes('app_group_workspace_id_name_key')) return 'A group with this name exists already.';
+  if (m.includes('app_group_name_check')) return 'The name is 1 to 60 characters, without spaces at the start or end.';
+  return m;
+};
+
+export async function appGroupRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/app-groups`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const ws = currentWorkspace(s);
+    const [groups, apps] = await Promise.all([
+      owner.query<{ id: number; name: string; description: string | null; apps: number }>(
+        `select g.id, g.name, g.description, (select count(*) from meta.app_group_member m where m.group_id = g.id)::int as apps
+           from meta.app_group g where g.workspace_id = $1 order by lower(g.name)`,
+        [ws],
+      ),
+      owner.query<{ id: number; name: string; alias: string; group_id: number | null }>(
+        `select a.id, a.name, a.alias, m.group_id from meta.app a left join meta.app_group_member m on m.app_id = a.id
+          where meta.app_workspace(a.id) = $1 order by lower(a.name), a.id`,
+        [ws],
+      ),
+    ]);
+    const main = html`<div class="title-row"><h1>Application groups</h1></div>
+      <p class="muted u-mt0">Groups organise the applications of this workspace (${s.workspace?.name ?? ''}) on the App Builder home, which can show one group at a time. They change nothing in the applications.</p>
+      <div class="columns wide-left">
+        ${region('Groups', groups.rows.length
+          ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Group</th><th class="num">Applications</th><th>Rename</th><th></th></tr></thead><tbody>
+              ${groups.rows.map((g) => html`<tr>
+                <td data-label="Group"><a href="${BASE}?group=${g.id}">${g.name}</a>${g.description ? html`<br><span class="muted small">${g.description}</span>` : ''}</td>
+                <td class="num" data-label="Applications">${g.apps}</td>
+                <td data-label="Rename"><form method="post" action="${BASE}/app-groups/${g.id}" class="search u-mwnone">${csrf(s)}
+                  <label class="sr-only" for="g-${g.id}">New name for ${g.name}</label><input id="g-${g.id}" name="name" value="${g.name}" required maxlength="60">
+                  <button class="btn btn-sm">Rename</button></form></td>
+                <td><form method="post" action="${BASE}/app-groups/${g.id}/delete">${csrf(s)}<button class="btn btn-sm btn-danger" data-confirm="Delete the group ${g.name}? Its applications stay, without a group.">${icon('trash')}<span class="sr-only">Delete ${g.name}</span></button></form></td></tr>`)}
+            </tbody></table></div>`
+          : html`<p class="muted">No groups yet.</p>`)}
+        ${region('Add a group', html`<form method="post" action="${BASE}/app-groups">${csrf(s)}
+          ${input('name', 'Name', '', { required: true, placeholder: 'Finance' })}
+          ${input('description', 'Description', '')}
+          <div class="buttons"><button class="btn btn-hot">${icon('plus')} Add group</button></div></form>`)}
+      </div>
+      <div class="u-spacer"></div>
+      ${region('Applications', apps.rows.length
+        ? html`<form method="post" action="${BASE}/app-groups/assign">${csrf(s)}
+            <div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Application</th><th>Group</th></tr></thead><tbody>
+            ${apps.rows.map((a) => html`<tr><td data-label="Application"><a href="${BASE}/apps/${a.id}">${a.name}</a> <span class="muted">/a/${a.alias}</span></td>
+              <td data-label="Group"><label class="sr-only" for="a-${a.id}">Group of ${a.name}</label>
+                <select id="a-${a.id}" name="app_${a.id}"><option value="">(no group)</option>${groups.rows.map((g) => html`<option value="${g.id}"${a.group_id === g.id ? raw(' selected') : ''}>${g.name}</option>`)}</select></td></tr>`)}
+            </tbody></table></div>
+            <div class="buttons"><button class="btn"${groups.rows.length ? '' : raw(' disabled')}>Save groups</button></div></form>`
+        : html`<p class="muted">No applications in this workspace.</p>`)}`;
+    return send(reply, s, shell(s, 'Application groups', crumbs(), main));
+  });
+
+  app.post(`${BASE}/app-groups`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const name = String(req.body?.name ?? '').trim();
+    try {
+      if (!NAME.test(name)) throw new Error('The name is 1 to 60 characters, without spaces at the start or end.');
+      await owner.query('insert into meta.app_group (workspace_id, name, description) values ($1, $2, $3)', [currentWorkspace(s), name, String(req.body?.description ?? '').trim().slice(0, 2000) || null]);
+      await logActivity({ username: s.username, event: 'app_group', ip: clientIp(req), detail: `added ${name}` });
+      flash(s, `Group ${name} added.`);
+    } catch (e) {
+      flash(s, groupError(e), 'error');
+    }
+    return back(reply, s, `${BASE}/app-groups`);
+  });
+
+  app.post(`${BASE}/app-groups/:id(^\\d{1,9}$)`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const name = String(req.body?.name ?? '').trim();
+    try {
+      if (!NAME.test(name)) throw new Error('The name is 1 to 60 characters, without spaces at the start or end.');
+      const r = await owner.query('update meta.app_group set name = $3 where id = $1 and workspace_id = $2', [req.params.id, currentWorkspace(s), name]);
+      if (!r.rowCount) return reply.code(404).send('Not found');
+      flash(s, `Group renamed to ${name}.`);
+    } catch (e) {
+      flash(s, groupError(e), 'error');
+    }
+    return back(reply, s, `${BASE}/app-groups`);
+  });
+
+  app.post(`${BASE}/app-groups/:id(^\\d{1,9}$)/delete`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const r = await owner.one<{ name: string }>('delete from meta.app_group where id = $1 and workspace_id = $2 returning name', [req.params.id, currentWorkspace(s)]);
+    if (!r) return reply.code(404).send('Not found');
+    await logActivity({ username: s.username, event: 'app_group', ip: clientIp(req), detail: `deleted ${r.name}` });
+    flash(s, `Group ${r.name} deleted.`);
+    return back(reply, s, `${BASE}/app-groups`);
+  });
+
+  // the group of each application of the workspace (only this workspace's groups and applications)
+  app.post(`${BASE}/app-groups/assign`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const ws = currentWorkspace(s);
+    const pairs = Object.entries(req.body ?? {}).flatMap(([k, v]) => {
+      const m = /^app_(\d{1,9})$/.exec(k);
+      return m ? [[Number(m[1]), /^\d{1,9}$/.test(String(v)) ? Number(v) : null] as [number, number | null]] : [];
+    }).slice(0, 5000);
+    await owner.tx(async (c) => {
+      for (const [appId, groupId] of pairs) {
+        if (!(await c.query('select 1 from meta.app where id = $1 and meta.app_workspace(id) = $2', [appId, ws])).rowCount) continue;
+        if (groupId === null) await c.query('delete from meta.app_group_member where app_id = $1', [appId]);
+        else if ((await c.query('select 1 from meta.app_group where id = $1 and workspace_id = $2', [groupId, ws])).rowCount)
+          await c.query('insert into meta.app_group_member (app_id, group_id) values ($1, $2) on conflict (app_id) do update set group_id = excluded.group_id', [appId, groupId]);
+      }
+    });
+    flash(s, 'Groups saved.');
+    return back(reply, s, `${BASE}/app-groups`);
+  });
+}

package/src/builder/blueprints.ts

@@ -129,6 +129,20 @@ function review(s: Session, bp: Blueprint, spec: string, id: number | null, name
     </form>`)}`;
 }
 
+/**
+ * (sprint 61) Open a blueprint (e.g. a starter app of the App Gallery): its review when it can be
+ * created, else the editor with its problems. Nothing is created before the developer confirms.
+ */
+export async function openBlueprint(s: Session, reply: FastifyReply, name: string, spec: string) {
+  const { json, error } = parse(spec);
+  const { blueprint, problems } = error ? { blueprint: null, problems: [error] } : checkBlueprint(json);
+  const taken = blueprint ? await owner.one('select 1 from meta.app where alias = $1', [blueprint.alias]) : null;
+  if (taken) problems.push(`An application with the alias ${blueprint!.alias} already exists: change "alias" and "schema" in the blueprint.`);
+  if (!blueprint || problems.length)
+    return editor(s, reply, { name, spec, message: html`<div class="alert alert-error" role="alert"><p>The blueprint can't be created yet:</p><ul>${problems.map((p) => html`<li>${p}</li>`)}</ul></div>` });
+  return page(s, reply, 'Review', review(s, blueprint, spec, null, name));
+}
+
 export async function blueprintRoutes(app: FastifyInstance) {
   app.get(`${BASE}/blueprints`, async (req: Req, reply) => {
     const s = await developer(req, reply);

package/src/builder/cross-app.ts

@@ -0,0 +1,106 @@
+import type { FastifyInstance } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { BASE, developer, region, send, shell, type Req } from './ui.ts';
+import { currentWorkspace } from './workspaces.ts';
+
+// Cross-application reports (sprint 61; APEX: Workspace Utilities → Cross
+// Application Reports): one read-only report per topic over every application
+// of the current workspace. Each query takes the workspace id as $1 and
+// returns app_id and app (the name) first; those become a link.
+
+interface Report {
+  title: string;
+  about: string;
+  columns: [key: string, label: string, cls?: 'num'][];
+  sql: string;
+}
+
+/** The current workspace's applications (alias a). */
+const IN_WS = 'meta.app_workspace(a.id) = $1';
+
+export const REPORTS: Record<string, Report> = {
+  attributes: {
+    title: 'Application attributes',
+    about: 'The main settings of every application: type, sign-in, availability, build status, debug level, language and database role.',
+    columns: [['alias', 'Alias'], ['app_type', 'Type'], ['authentication', 'Sign-in'], ['availability', 'Availability'], ['build_status', 'Build status'], ['debug_level', 'Debug', 'num'], ['language', 'Language'], ['db_role', 'Database role'], ['updated', 'Updated']],
+    sql: `select a.id as app_id, a.name as app, a.alias, a.app_type, a.authentication, a.availability, a.build_status, a.debug_level,
+                 a.language, coalesce(a.db_role, '(runtime connection)') as db_role, to_char(a.updated_at, 'YYYY-MM-DD HH24:MI') as updated
+            from meta.app a where ${IN_WS} order by lower(a.name)`,
+  },
+  'build-options': {
+    title: 'Build options',
+    about: 'The build options of every application and whether their components are included.',
+    columns: [['name', 'Build option'], ['status', 'Status'], ['description', 'Description']],
+    sql: `select a.id as app_id, a.name as app, b.name, b.status, b.description
+            from meta.app a join meta.build_option b on b.app_id = a.id where ${IN_WS} order by lower(a.name), b.name`,
+  },
+  comments: {
+    title: 'Developer comments',
+    about: 'The developers\' comments on applications and pages, newest first.',
+    columns: [['page_no', 'Page', 'num'], ['author', 'Author'], ['created', 'Written'], ['body', 'Comment']],
+    sql: `select a.id as app_id, a.name as app, c.page_no, c.author, to_char(c.created_at, 'YYYY-MM-DD HH24:MI') as created, left(c.body, 500) as body
+            from meta.app a join meta.dev_comment c on c.app_id = a.id where ${IN_WS} order by c.created_at desc limit 500`,
+  },
+  authentication: {
+    title: 'Authentication',
+    about: 'How people sign in to every application: the sign-in method, password sign-in, identity providers and LDAP directories, access control, the login page and Forgot password.',
+    columns: [['authentication', 'Sign-in'], ['local_login', 'Passwords'], ['providers', 'Identity providers'], ['ldap', 'LDAP directories'], ['access_control', 'Access'], ['remember_me_days', 'Keep me signed in (days)', 'num'], ['login_page', 'Login page', 'num'], ['password_reset', 'Forgot password']],
+    sql: `select a.id as app_id, a.name as app, a.authentication, case when a.local_login then 'yes' else 'no' end as local_login,
+                 array_to_string(a.sso_providers, ', ') as providers, array_to_string(a.ldap_directories, ', ') as ldap,
+                 a.access_control, a.remember_me_days, a.login_page, case when a.password_reset then 'yes' else 'no' end as password_reset
+            from meta.app a where ${IN_WS} order by lower(a.name)`,
+  },
+  authorization: {
+    title: 'Authorization schemes',
+    about: 'The authorization schemes of every application: their type and what they check.',
+    columns: [['name', 'Scheme'], ['type', 'Type'], ['value', 'Checks'], ['error_message', 'Error message']],
+    sql: `select a.id as app_id, a.name as app, s.name, s.type, left(s.value, 300) as value, s.error_message
+            from meta.app a join meta.authz_scheme s on s.app_id = a.id where ${IN_WS} order by lower(a.name), s.name`,
+  },
+  'password-items': {
+    title: 'Password items',
+    about: 'Every password item: pgkiln never shows their values again, never keeps them in session state for the next page and never writes them to the debug log.',
+    columns: [['page_no', 'Page', 'num'], ['name', 'Item'], ['label', 'Label'], ['reveal', 'Show button'], ['required', 'Required']],
+    sql: `select a.id as app_id, a.name as app, p.page_no, i.name, i.label,
+                 case when (i.config ->> 'reveal')::boolean then 'yes' else 'no' end as reveal, case when i.required then 'yes' else 'no' end as required
+            from meta.app a join meta.page p on p.app_id = a.id join meta.item i on i.page_id = p.id
+           where ${IN_WS} and i.type = 'password' order by lower(a.name), p.page_no, i.seq`,
+  },
+  theme: {
+    title: 'Theme summary',
+    about: 'The look of every application: base style, Theme Roller style, navigation and the colours it sets.',
+    columns: [['base', 'Base style'], ['style', 'Style'], ['nav', 'Navigation'], ['colors', 'Colours set', 'num'], ['pwa', 'Installable (PWA)']],
+    sql: `select a.id as app_id, a.name as app, coalesce(a.theme ->> 'base', 'default') as base, coalesce(a.theme ->> 'style', '-') as style,
+                 coalesce(a.theme ->> 'nav', 'side') as nav,
+                 (select count(*) from jsonb_object_keys(coalesce(a.theme -> 'colors', '{}'::jsonb)))::int as colors,
+                 case when a.pwa then 'yes' else 'no' end as pwa
+            from meta.app a where ${IN_WS} order by lower(a.name)`,
+  },
+};
+
+/** The links in Workspace utilities' side column. */
+export const crossAppLinks = () =>
+  Object.entries(REPORTS).map(([k, r]) => html`<li><a href="${BASE}/utilities/reports/${k}">${r.title}${icon('chevron')}</a></li>`);
+
+export async function crossAppRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/utilities/reports/:kind`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const r = Object.hasOwn(REPORTS, req.params.kind) ? REPORTS[req.params.kind] : undefined;
+    if (!r) return reply.code(404).send('Not found');
+    const rows = (await owner.query(r.sql, [currentWorkspace(s)])).rows;
+    const cell = (v: unknown) => (v === null || v === undefined || v === '' ? html`<span class="muted">-</span>` : String(v));
+    const main = html`<div class="title-row"><h1>${r.title}</h1></div>
+      <p class="muted u-mt0">${r.about} Applications of the workspace ${s.workspace?.name ?? ''}.</p>
+      <nav class="ide-tabs u-mb1" aria-label="Cross-application reports">${Object.entries(REPORTS).map(([k, x]) =>
+        html`<a class="ide-tab" href="${BASE}/utilities/reports/${k}"${k === req.params.kind ? raw(' aria-current="page"') : ''}><span>${x.title}</span></a>`)}</nav>
+      ${region(r.title, rows.length
+        ? html`<div class="table-wrap"><table class="report report-reflow"><thead><tr><th>Application</th>${r.columns.map(([, l, c]) => html`<th${c ? raw(` class="${c}"`) : ''}>${l}</th>`)}</tr></thead>
+            <tbody>${rows.map((row) => html`<tr><td data-label="Application"><a href="${BASE}/apps/${row.app_id}">${row.app}</a></td>
+              ${r.columns.map(([k, l, c]) => html`<td data-label="${l}"${c ? raw(` class="${c}"`) : ''}>${cell(row[k])}</td>`)}</tr>`)}</tbody></table></div>`
+        : html`<p class="muted">Nothing to report in this workspace.</p>`, html`<span class="count">${rows.length}</span>`)}`;
+    return send(reply, s, shell(s, r.title, [['App Builder', BASE], ['Workspace utilities', `${BASE}/utilities`], [r.title]], main));
+  });
+}

package/src/builder/gallery.ts

@@ -0,0 +1,154 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import type { FastifyInstance } from 'fastify';
+import { owner, ownerUrl } from '../db.ts';
+import { root } from '../env.ts';
+import { html, raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { migrate } from '../migrate.ts';
+import { clientIp, logActivity } from '../session.ts';
+import { openBlueprint } from './blueprints.ts';
+import { isAdmin } from './locks.ts';
+import { back, BASE, csrf, developer, flash, send, shell, type Req } from './ui.ts';
+import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
+import { workspacesChanged } from '../workspace-db.ts';
+
+// The App Gallery (sprint 61; APEX: App Gallery with Sample, Starter and Custom Apps).
+//
+//   Sample apps   applications shipped with pgkiln (examples/): an administrator installs
+//                 one with its schema, data and demo accounts, as `pgkiln migrate --example`;
+//   Starter apps  blueprints shipped with pgkiln (examples/gallery/starters/): Install opens
+//                 the blueprint's review, and the developer creates the application from it
+//                 in the current workspace (a new role and schema, like every new application);
+//   Custom apps   the workspace's boilerplate applications: Create application starts from one.
+//
+// The list is examples/gallery/gallery.json.
+
+interface Sample {
+  key: string;
+  title: string;
+  alias: string;
+  icon: string;
+  description: string;
+  example?: string;
+  file?: string;
+}
+interface Starter {
+  key: string;
+  title: string;
+  icon: string;
+  description: string;
+  file: string;
+}
+
+const GALLERY = join(root, 'examples', 'gallery');
+const KEY = /^[a-z][a-z0-9-]{0,40}$/;
+
+function catalog(): { samples: Sample[]; starters: Starter[] } {
+  try {
+    const c = JSON.parse(readFileSync(join(GALLERY, 'gallery.json'), 'utf8'));
+    return { samples: Array.isArray(c.samples) ? c.samples : [], starters: Array.isArray(c.starters) ? c.starters : [] };
+  } catch {
+    return { samples: [], starters: [] };
+  }
+}
+
+/** A file of the gallery: only names from the catalogue, never a path from the request. */
+const galleryFile = (rel: string) => readFileSync(join(rel.includes('/') ? GALLERY : join(root, 'examples'), rel), 'utf8');
+
+type Tab = 'samples' | 'starters' | 'custom';
+
+export async function galleryRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/gallery`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const tab: Tab = (['samples', 'starters', 'custom'] as const).find((t) => t === req.query?.tab) ?? 'samples';
+    const admin = await isAdmin(s.username);
+    const { samples, starters } = catalog();
+    const installed = new Map(
+      (await owner.query<{ alias: string; id: number }>('select alias, id from meta.app where alias = any($1)', [samples.map((x) => x.alias)])).rows.map((r) => [r.alias, r.id]),
+    );
+    const custom = (await owner.query<{ id: number; name: string; description: string | null }>(
+      `select a.id, a.name, null::text as description from meta.app a where a.app_type = 'boilerplate' and ${inWorkspaceSql('a', 1)} order by lower(a.name), a.id`,
+      [currentWorkspace(s)],
+    )).rows;
+    const card = (ic: string, title: string, by: string, text: string, action: unknown) =>
+      html`<article class="gal-card" data-filter-row><div class="gal-head"><span class="gal-icon">${icon(ic)}</span><div><h2>${title}</h2><span class="muted small">${by}</span></div></div>
+        <p>${text}</p><div class="gal-foot">${action}</div></article>`;
+    const tabs = html`<nav class="gal-tabs segmented" aria-label="Kinds of applications">${([['samples', 'Sample Apps'], ['starters', 'Starter Apps'], ['custom', 'Custom Apps']] as const).map(([t, l]) =>
+      html`<a href="${BASE}/gallery?tab=${t}"${tab === t ? raw(' aria-current="page"') : ''}>${l}</a>`)}</nav>`;
+    const cards =
+      tab === 'samples'
+        ? samples.map((x) => card(x.icon, x.title, 'pgkiln', x.description,
+            installed.has(x.alias)
+              ? html`<span class="tag tag-ok">Installed</span><a class="btn btn-sm" href="/a/${x.alias}" target="_blank" rel="noopener">Run</a><a class="btn btn-sm" href="${BASE}/apps/${installed.get(x.alias)}">Edit</a>`
+              : admin
+                ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="Install ${x.title}? It adds its own schema, data and demo accounts with known passwords: not for a production instance.">Install</button></form>`
+                : html`<span class="muted small">An administrator installs it.</span>`))
+        : tab === 'starters'
+          ? starters.map((x) => card(x.icon, x.title, 'pgkiln', x.description,
+              html`<form method="post" action="${BASE}/gallery/starters/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">Install</button></form>`))
+          : custom.map((x) => card('copy', x.name, 'This workspace', x.description ?? 'A boilerplate application: a new application starts with its pages, shared components and settings.',
+              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">Create from it</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">Edit</a>`));
+    const empty = tab === 'custom'
+      ? html`<p class="muted">No custom apps yet: make an application of type <em>Boilerplate</em> (Application settings → Application type) and it appears here.</p>`
+      : html`<p class="muted">The gallery is empty.</p>`;
+    const intro = {
+      samples: 'Applications that show what pgkiln can do, with their own data and demo accounts. Install them on a development or demo instance.',
+      starters: 'Small, ready-to-use applications. Install shows what will be created (tables, pages, sample data) before anything happens; the application gets its own role and schema in this workspace.',
+      custom: 'The boilerplate applications of this workspace: start a new application from one.',
+    }[tab];
+    const main = html`<div class="gal">
+      <div class="gal-bar">
+        <div class="ab-search gal-search" role="search"><label class="sr-only" for="gal-q">Search apps</label>${icon('search')}
+          <input id="gal-q" type="search" placeholder="Search apps" autocomplete="off" data-filter-list=".gal [data-filter-row]"></div>
+        ${tabs}
+      </div>
+      <h1 class="sr-only">App Gallery</h1>
+      <p class="muted">${intro}</p>
+      ${cards.length ? html`<div class="gal-grid">${cards}</div>` : empty}
+    </div>`;
+    return send(reply, s, shell(s, 'App Gallery', [['App Gallery']], main, 'gallery'));
+  });
+
+  // a sample app: an administrator installs it (shipped SQL, run as the owner)
+  app.post(`${BASE}/gallery/samples/:key`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    if (!(await isAdmin(s.username))) return reply.code(403).send('Only administrators install sample apps.');
+    const x = KEY.test(req.params.key) ? catalog().samples.find((c) => c.key === req.params.key) : undefined;
+    if (!x) return reply.code(404).send('Not found');
+    try {
+      if (await owner.one('select 1 as ok from meta.app where alias = $1', [x.alias])) throw new Error(`an application with the alias ${x.alias} exists already.`);
+      if (x.example && KEY.test(x.example)) await migrate({ root, databaseUrl: ownerUrl, example: x.example, log: () => {} });
+      else if (x.file && /^[a-z0-9-]+\.sql$/.test(x.file)) await owner.query(galleryFile(x.file));
+      else throw new Error('the gallery entry names nothing to install.');
+      const made = await owner.one<{ id: number; db_role: string | null }>('select id, db_role from meta.app where alias = $1', [x.alias]);
+      if (!made) throw new Error(`the scripts ran, but there is no application ${x.alias}.`);
+      // into the current workspace (an isolated one gets the application's role too)
+      const ws = currentWorkspace(s);
+      if (ws > 1)
+        await owner.tx(async (c) => {
+          if (made.db_role && (await c.query('select 1 from meta.workspace where id = $1 and isolated', [ws])).rowCount)
+            await c.query('insert into meta.workspace_role (workspace_id, role_name) values ($1, $2) on conflict do nothing', [ws, made.db_role]);
+          await placeApp(c, made.id, ws);
+        });
+      await workspacesChanged();
+      await logActivity({ appId: made.id, username: s.username, event: 'gallery', ip: clientIp(req), detail: `installed sample app ${x.key}` });
+      flash(s, `${x.title} installed (/a/${x.alias}).`);
+      return back(reply, s, `${BASE}/apps/${made.id}`);
+    } catch (e) {
+      flash(s, `${x.title} was not installed: ${(e as Error).message}`, 'error');
+      return back(reply, s, `${BASE}/gallery`);
+    }
+  });
+
+  // a starter app: its blueprint's review (nothing is created before the developer confirms there)
+  app.post(`${BASE}/gallery/starters/:key`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const x = KEY.test(req.params.key) ? catalog().starters.find((c) => c.key === req.params.key) : undefined;
+    if (!x || !/^starters\/[a-z0-9-]+\.json$/.test(x.file)) return reply.code(404).send('Not found');
+    return openBlueprint(s, reply, x.title, JSON.stringify(JSON.parse(galleryFile(x.file)), null, 2));
+  });
+}