pgkiln 0.37.0 → 0.38.0

package/src/builder/home.ts

@@ -3,6 +3,7 @@ import { owner } from '../db.ts';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
 import { APP_COLORS, BASE, csrf, developer, input, region, select, send, shell, type Req } from './ui.ts';
+import { crossAppLinks } from './cross-app.ts';
 import type { Session } from '../session.ts';
 import { isAdmin } from './locks.ts';
 import { currentWorkspace, inWorkspaceSql, workspaceAdmin } from './workspaces.ts';
@@ -98,15 +99,22 @@ export async function homeRoutes(app: FastifyInstance) {
     if (typeof req.query.sort === 'string' && req.query.sort in SORTS) s.state.__BSORT = req.query.sort;
     const view: View = s.state.__BVIEW === 'grid' ? 'grid' : 'report';
     const sort: Sort = (typeof s.state.__BSORT === 'string' && s.state.__BSORT in SORTS ? s.state.__BSORT : 'name') as Sort;
+    // (092) application groups of the workspace: a filter, remembered for the session
+    const groups = (await owner.query<{ id: number; name: string }>('select id, name from meta.app_group where workspace_id = $1 order by lower(name)', [currentWorkspace(s)])).rows;
+    if (typeof req.query.group === 'string') s.state.__BGROUP = req.query.group;
+    const group = groups.find((g) => String(g.id) === s.state.__BGROUP) ?? null;
     const [apps, total, recent] = await Promise.all([
       owner.query(
-        `select a.id, a.name, a.alias, a.authentication, a.db_role, a.updated_at,
+        `select a.id, a.name, a.alias, a.authentication, a.db_role, a.updated_at, g.name as group_name,
                 (select count(*) from meta.page p where p.app_id = a.id)::int as pages,
                 (select count(*) from meta.activity_log l where l.app_id = a.id and l.event = 'page_view' and l.at > now() - interval '1 day')::int as views
            from meta.app a
+           left join meta.app_group_member gm on gm.app_id = a.id
+           left join meta.app_group g on g.id = gm.group_id
           where ($1 = '' or a.name ilike '%' || $1 || '%' or a.alias ilike '%' || $1 || '%' or a.id::text = $1) and ${inWorkspaceSql('a', 2)}
+            and ($3::int is null or gm.group_id = $3)
           order by ${SORTS[sort]}`,
-        [q.replace(/[\\%_]/g, (c) => `\\${c}`), currentWorkspace(s)],
+        [q.replace(/[\\%_]/g, (c) => `\\${c}`), currentWorkspace(s), group?.id ?? null],
       ),
       owner.one(`select count(*)::int as n from meta.app a where ${inWorkspaceSql('a', 1)}`, [currentWorkspace(s)]),
       recentApps(s),
@@ -122,11 +130,11 @@ export async function homeRoutes(app: FastifyInstance) {
       html`<th scope="col"${cls ? raw(` class="${cls}"`) : ''}${sort === key ? raw(' aria-sort="' + (key === 'pages' || key === 'updated' ? 'descending' : 'ascending') + '"') : ''}><a href="${link({ sort: key })}">${label}${sort === key ? html`<span class="ab-sorted" aria-hidden="true">${key === 'pages' || key === 'updated' ? '↓' : '↑'}</span>` : ''}</a></th>`;
     const rows = apps.rows;
     const list = rows.length === 0
-      ? html`<p class="ab-empty">${total.n ? html`No application matches “${q}”. <a href="${BASE}?q=">Show all</a>` : html`No applications yet. <a href="${BASE}/create">Create one</a> or <a href="${BASE}/import">import one</a>.`}</p>`
+      ? html`<p class="ab-empty">${total.n ? html`No application ${group ? html`in the group ${group.name}${q ? html` matches “${q}”` : ''}` : html`matches “${q}”`}. <a href="${BASE}?q=&amp;group=">Show all</a>` : html`No applications yet. <a href="${BASE}/create">Create one</a> or <a href="${BASE}/import">import one</a>.`}</p>`
       : view === 'grid'
         ? html`<div class="ab-cards">${rows.map((a) => html`<article class="ab-card" data-filter-row>
             <a class="ab-card-main" href="${BASE}/apps/${a.id}">${appIcon(a)}<span><strong>${a.name}</strong><small>${a.id} · /a/${a.alias}</small></span></a>
-            <div class="ab-card-meta"><span>${a.pages} pages</span><span>${a.views} views today</span><span>${ago(a.updated_at)}</span></div>
+            <div class="ab-card-meta">${a.group_name ? html`<span class="tag">${a.group_name}</span>` : ''}<span>${a.pages} pages</span><span>${a.views} views today</span><span>${ago(a.updated_at)}</span></div>
             <div class="ab-card-actions">
               <a class="tb-btn" href="${BASE}/apps/${a.id}" title="Edit ${a.name}">${icon('edit')}<span class="sr-only">Edit ${a.name}</span></a>
               <a class="tb-btn" href="/a/${a.alias}" target="_blank" rel="noopener" title="Run ${a.name}">${icon('play')}<span class="sr-only">Run ${a.name}</span></a>
@@ -137,7 +145,7 @@ export async function homeRoutes(app: FastifyInstance) {
             <tbody>${rows.map((a) => html`<tr data-filter-row>
               <td class="num">${a.id}</td>
               <td class="ab-name"><a href="${BASE}/apps/${a.id}">${appIcon(a)}<span>${a.name}</span></a></td>
-              <td>${a.alias}</td>
+              <td>${a.alias}${a.group_name ? html` <span class="tag">${a.group_name}</span>` : ''}</td>
               <td class="num">${a.pages}</td>
               <td class="num">${a.views}</td>
               <td>${a.authentication === 'none' ? 'Public' : a.authentication === 'header' ? 'HTTP header' : a.authentication === 'database' ? 'Database accounts' : a.authentication === 'custom' ? 'Custom' : 'App users'}</td>
@@ -151,6 +159,7 @@ export async function homeRoutes(app: FastifyInstance) {
     const main = html`<div class="ab-home">
       <div class="ab-main">
         <h1 class="sr-only">App Builder</h1>
+        ${s.workspace?.message ? html`<div class="alert alert-info ab-message" role="status">${icon('bell')}<div><strong>${s.workspace.name}</strong><p>${s.workspace.message}</p></div></div>` : ''}
         ${tiles()}
         <div class="ab-toolbar">
           <form class="ab-search" method="get" action="${BASE}" role="search">
@@ -158,6 +167,9 @@ export async function homeRoutes(app: FastifyInstance) {
             <input id="ab-q" name="q" type="search" value="${q}" placeholder="Search" autocomplete="off" data-filter-list=".ab-home [data-filter-row]">
           </form>
           <div class="ab-views" role="group" aria-label="View">${viewButton('grid', 'grid', 'Cards')}${viewButton('report', 'list', 'Report')}</div>
+          ${groups.length ? html`<form method="get" action="${BASE}" class="ab-group"><label class="sr-only" for="ab-group">Application group</label>
+            <select id="ab-group" name="group" data-autosubmit><option value="">All groups</option>${groups.map((g) => html`<option value="${g.id}"${group?.id === g.id ? raw(' selected') : ''}>${g.name}</option>`)}</select>
+            <noscript><button class="btn btn-sm">Show</button></noscript></form>` : ''}
           <details class="menu ab-menu"><summary class="btn">Actions ${icon('chevron')}</summary>
             <div class="menu-panel" role="menu">
               <div class="menu-section"><span class="small muted">Sort by</span>
@@ -195,7 +207,7 @@ export async function homeRoutes(app: FastifyInstance) {
           ${input('name', 'Name', '', { required: true })}
           ${input('alias', 'Alias (URL)', '', { required: true, help: 'lowercase, e.g. inventory → /a/inventory' })}
           ${boilerplates.length
-            ? select('boilerplate', 'Start from', '', [['', '- a blank application (a Home page) -'], ...boilerplates.map((x): [string, string] => [String(x.id), `${x.name} (boilerplate)`])],
+            ? select('boilerplate', 'Start from', /^\d{1,9}$/.test(String(req.query?.boilerplate ?? '')) ? String(req.query!.boilerplate) : '', [['', '- a blank application (a Home page) -'], ...boilerplates.map((x): [string, string] => [String(x.id), `${x.name} (boilerplate)`])],
                 'A boilerplate application\'s pages, shared components and settings are copied; the new application keeps its own name, alias, role and authentication.')
             : ''}
           ${select('schema', 'Parsing schema', '', [['', '- new schema named after the alias -'], ...schemas.rows.map((r): [string, string] => [r.nspname, r.nspname])],
@@ -275,9 +287,11 @@ export async function homeRoutes(app: FastifyInstance) {
     if (!s) return;
     const card = (href: string, ic: Raw | '', title: string, text: string) =>
       html`<a class="ab-tile" href="${href}"><span class="ab-tile-icon">${ic}</span><strong>${title}</strong><span>${text}</span></a>`;
-    const main = html`<h1 class="u-mb1">Workspace utilities</h1>
+    const main = html`<div class="ab-home"><div class="ab-main"><h1 class="u-mb1">Workspace utilities</h1>
       <div class="ab-tiles ab-tiles-wrap">
         ${card(`${BASE}/users`, icon('user'), 'Users', 'Accounts of the people who use the applications, and their access.')}
+        ${card(`${BASE}/app-groups`, icon('folder'), 'Application groups', 'Organise the applications of this workspace into groups.')}
+        ${card(`${BASE}/gallery`, icon('package'), 'App Gallery', 'Sample and starter applications to install, and this workspace\'s boilerplates.')}
         ${card(`${BASE}/users/providers`, icon('key'), 'Identity providers', 'OpenID Connect and SAML sign-in.')}
         ${card(`${BASE}/users/directories`, icon('org'), 'LDAP directories', 'Sign in with directory accounts.')}
         ${card(`${BASE}/users#account-settings`, icon('shield'), 'Password policy', 'Length, complexity and lifetime of passwords.')}
@@ -293,7 +307,12 @@ export async function homeRoutes(app: FastifyInstance) {
         ${(await isAdmin(s.username)) ? card(`${BASE}/ai`, icon('bolt'), 'AI services', 'Claude and OpenAI for the applications: models, keys, limits and usage (administrators).') : ''}
         ${(await isAdmin(s.username)) ? card(`${BASE}/mail`, icon('send'), 'Mail services', 'SMTP, Microsoft 365, Amazon SES, Resend, Postmark, SendGrid or Mailgun for the applications\' e-mail (administrators).') : ''}
         ${(await isAdmin(s.username)) ? card(`${BASE}/installation`, icon('history'), 'Installation', 'Version, install and upgrade runs, applied migrations (administrators).') : ''}
-      </div>`;
+      </div></div>
+      <aside class="ab-side" aria-label="About and reports">
+        <section><h2>About</h2><p>Workspace utilities hold what the applications of this workspace share: users and sign-in, groups, the gallery, and reports across the applications.</p>
+          <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#workspaces" target="_blank" rel="noopener">Learn more …</a></section>
+        <section><h2>Cross Application Reports</h2><ul class="ab-links ab-tasks">${crossAppLinks()}</ul></section>
+      </aside></div>`;
     return send(reply, s, shell(s, 'Workspace utilities', [['App Builder', BASE], ['Workspace utilities']], main));
   });
 }

package/src/builder/routes.ts

@@ -31,23 +31,61 @@ import { clearDevbar } from '../runtime/devbar.ts';
 
 export async function builderRoutes(app: FastifyInstance) {
   // ---------------------------------------------------------------- login
+  // (sprint 61, APEX: the workspace sign-in page) workspace (optional), username and password;
+  // "Remember workspace and username" keeps both in a cookie of the builder's path
+  const REMEMBER_COOKIE = 'pgkiln_bsignin';
+  const remembered = (req: Req): { w: string; u: string } | null => {
+    try {
+      const v = JSON.parse(Buffer.from(String(req.cookies?.[REMEMBER_COOKIE] ?? ''), 'base64url').toString('utf8'));
+      return typeof v?.w === 'string' && typeof v?.u === 'string' ? { w: v.w.slice(0, 60), u: v.u.slice(0, 100) } : null;
+    } catch {
+      return null;
+    }
+  };
+  /** Where to go after signing in: a builder page only. */
+  const safeNext = (v: unknown) => (typeof v === 'string' && /^\/builder(\/[A-Za-z0-9_/-]{0,200})?$/.test(v) ? v : BASE);
+
   app.get(`${BASE}/login`, async (req: Req, reply) => {
     const s = await getSession(req, reply, null, BASE);
     if (s.username) return reply.redirect(BASE);
     const error = takeFlash(s, '__ERROR');
     await saveState(s);
+    const r = remembered(req);
+    const next = safeNext(req.query?.next);
+    const field = (name: string, label: string, ic: string, value: string, opts: { type?: string; required?: boolean; auto?: string; placeholder?: string; reveal?: boolean }) =>
+      html`<div class="field signin-field"><label class="sr-only" for="f_${name}">${label}</label>
+        <div class="signin-input">${icon(ic)}<input id="f_${name}" name="${name}" type="${opts.type ?? 'text'}" value="${value}" placeholder="${opts.placeholder ?? label}"${opts.required ? raw(' required') : ''}${opts.auto ? raw(` autocomplete="${opts.auto}"`) : ''}>
+          ${opts.reveal ? html`<button type="button" class="signin-reveal" data-reveal="f_${name}" aria-controls="f_${name}" aria-pressed="false" data-hide="Hide" hidden>Show</button>` : ''}</div></div>`;
     return reply.type('text/html').send(
       documentShell(
         'Sign in · Builder',
-        html`<main class="login"><form method="post" class="card login-card">
-          <h1>pgkiln Builder</h1>
-          ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
-          ${csrf(s)}
-          ${input('username', 'Username', '', { required: true, auto: 'username' })}
-          ${input('password', 'Password', '', { type: 'password', required: true, auto: 'current-password' })}
-          <button class="btn btn-hot">Sign in</button>
-        </form></main>`,
-        'login-body ide-login',
+        html`<main class="signin">
+          <section class="signin-hero" aria-label="pgkiln">
+            <span class="signin-logo" aria-hidden="true">pg</span>
+            <h1 class="signin-title">pgkiln</h1>
+            <p class="signin-tagline">Build data applications on PostgreSQL, in SQL you can trust</p>
+            <p class="signin-foot">Open source under the Apache-2.0 license</p>
+          </section>
+          <section class="signin-panel">
+            <form method="post" class="signin-form">
+              <h2>Welcome</h2>
+              <p class="muted u-mt0">Sign in to your workspace to continue</p>
+              ${error ? html`<div class="alert alert-error" role="alert">${error}</div>` : ''}
+              ${csrf(s)}<input type="hidden" name="next" value="${next}">
+              ${field('workspace', 'Workspace', 'database', r?.w ?? '', { placeholder: 'Workspace (optional)', auto: 'organization' })}
+              ${field('username', 'Username', 'user', r?.u ?? '', { required: true, auto: 'username' })}
+              ${field('password', 'Password', 'key', '', { type: 'password', required: true, auto: 'current-password', reveal: true })}
+              <label class="check signin-remember"><input type="checkbox" name="remember" value="1"${r ? raw(' checked') : ''}> Remember workspace and username</label>
+              <button class="btn btn-hot signin-submit">Sign in</button>
+              <p class="muted small signin-hint">Leave the workspace empty to open your last one; you can switch later in your account menu.</p>
+              <nav class="signin-actions" aria-label="Quick actions">
+                <a href="${BASE}/login?next=${encodeURIComponent(`${BASE}/utilities`)}">${icon('settings')} Administration</a>
+                <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#workspaces" target="_blank" rel="noopener">${icon('help')} About workspaces</a>
+              </nav>
+            </form>
+          </section>
+        </main>`,
+        'login-body ide-login signin-body',
         {},
         builderHead(),
         { theme: validTheme(req.cookies?.[THEME_COOKIE]) ?? 'dark' },
@@ -58,15 +96,18 @@ export async function builderRoutes(app: FastifyInstance) {
   app.post(`${BASE}/login`, async (req: Req, reply) => {
     const s = await getSession(req, reply, null, BASE);
     const { username = '', password = '' } = req.body ?? {};
+    const workspace = String(req.body?.workspace ?? '').trim().slice(0, 60);
+    const next = safeNext(req.body?.next);
+    const again = next === BASE ? `${BASE}/login` : `${BASE}/login?next=${encodeURIComponent(next)}`;
     const ip = clientIp(req);
     if (req.body?.__csrf !== s.csrf_token) {
       flash(s, 'Your session expired. Please try again.', 'error');
-      return back(reply, s, `${BASE}/login`);
+      return back(reply, s, again);
     }
     if (await loginThrottled(null, username, ip)) {
       logActivity({ username, event: 'login_locked', ip, detail: 'builder' });
       flash(s, 'Too many failed sign-in attempts. Try again later.', 'error');
-      return back(reply, s, `${BASE}/login`);
+      return back(reply, s, again);
     }
     // bcrypt always runs (dummy salt for unknown users) so timing does not reveal accounts
     const dev = await owner.one(
@@ -76,25 +117,36 @@ export async function builderRoutes(app: FastifyInstance) {
         where crypt($2, coalesce(d.password_hash, gen_salt('bf', 10))) = d.password_hash`,
       [username, password],
     );
-    if (!dev) {
-      await logActivity({ username: username.slice(0, 100), event: 'login_failed', ip, detail: 'builder' });
-      flash(s, 'Invalid username or password.', 'error');
-      return back(reply, s, `${BASE}/login`);
+    // a workspace, when given, must be one of the developer's (administrators: any); the same answer otherwise
+    const ws = dev && workspace
+      ? await owner.one<{ id: number }>(
+          `select w.id from meta.workspace w
+            where lower(w.name) = lower($1)
+              and (exists (select 1 from meta.developer d where d.username = $2 and d.is_admin)
+                   or exists (select 1 from meta.workspace_member m where m.workspace_id = w.id and m.username = $2))`,
+          [workspace, dev.username],
+        )
+      : undefined;
+    if (!dev || (workspace && !ws)) {
+      await logActivity({ username: username.slice(0, 100), event: 'login_failed', ip, detail: workspace ? 'builder (workspace)' : 'builder' });
+      flash(s, workspace ? 'Invalid workspace, username or password.' : 'Invalid username or password.', 'error');
+      return back(reply, s, again);
     }
     await destroySession(reply, s, BASE);
     const ns = await createSession(reply, null, BASE, dev.username);
     // the builder theme chosen earlier on this device
     const theme = validTheme(req.cookies?.[THEME_COOKIE]);
-    if (theme) {
-      ns.state.__BTHEME = theme;
-      await saveState(ns);
-    }
+    if (theme) ns.state.__BTHEME = theme;
+    if (ws) ns.state.__WS = String(ws.id);
+    if (password === 'admin' || password === dev.username) ns.state.__WEAK = '1';
+    await saveState(ns);
+    if (req.body?.remember === '1')
+      reply.setCookie(REMEMBER_COOKIE, Buffer.from(JSON.stringify({ w: workspace, u: dev.username })).toString('base64url'), {
+        path: BASE, httpOnly: true, sameSite: 'lax', maxAge: 365 * 24 * 3600, secure: process.env.COOKIE_SECURE === 'true',
+      });
+    else reply.clearCookie(REMEMBER_COOKIE, { path: BASE });
     logActivity({ username: dev.username, event: 'login', ip, detail: 'builder' });
-    if (password === 'admin' || password === dev.username) {
-      ns.state.__WEAK = '1';
-      await saveState(ns);
-    }
-    return reply.redirect(BASE, 303);
+    return reply.redirect(next, 303);
   });
 
   app.post(`${BASE}/logout`, async (req: Req, reply) => {

package/src/builder/scripts.ts

@@ -7,7 +7,7 @@ import { clientIp, logActivity, type Session } from '../session.ts';
 import { runScript, splitScript, type ScriptRun, type StatementResult } from '../sqlscript.ts';
 import { clearCompletions } from './code-editor.ts';
 import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
-import { currentWorkspace, workshopDb } from './workspaces.ts';
+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,
@@ -32,9 +32,13 @@ export interface RunRequest {
 /** Run a script, record the run (history + activity log) and return the run's id. */
 export async function runAndRecord(s: Session, ip: string, r: RunRequest): Promise<{ id: string; run: ScriptRun }> {
   const statements = splitScript(r.content);
-  const c = await (await workshopDb(s)).pool.connect();
+  const db = await workshopDb(s);
+  const schema = await sessionSchema(s, db);
+  const c = await db.pool.connect();
   let run: ScriptRun;
   try {
+    // (sprint 61) the session's schema first in the search path (the SQL Workshop home)
+    if (schema) await c.query(`select set_config('search_path', $1, false)`, [`"${schema.replace(/"/g, '""')}", public`]);
     run = await runScript(c, statements, { stopOnError: r.stopOnError, transaction: r.transaction });
   } finally {
     // never hand a connection back to the pool after arbitrary SQL (SET ROLE, search_path, temp tables)

package/src/builder/sql.ts

@@ -2,19 +2,94 @@ import type { FastifyInstance, FastifyReply } from 'fastify';
 import pg from 'pg';
 import { html, raw, type Raw } from '../html.ts';
 import { icon } from '../icons.ts';
-import { BASE, csrf, developer, region, send, shell, workshopTabs, type Req } from './ui.ts';
-import { clientIp, logActivity } from '../session.ts';
+import { back, BASE, csrf, developer, flash, region, send, shell, workshopTabs, type Req } from './ui.ts';
+import { owner } from '../db.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
 import { clearCompletions } from './code-editor.ts';
 import { scriptRoutes } from './scripts.ts';
 import { quickSqlRoutes } from './quicksql.ts';
 import { queryBuilderRoutes } from './querybuilder.ts';
 import { unloadRoutes } from './unload.ts';
 import { ddlToolRoutes } from './ddl-tools.ts';
-import { workshopDb, workshopRunsAs } from './workspaces.ts';
+import { currentWorkspace, sessionSchema, usableSchemas, workshopDb, workshopRunsAs } from './workspaces.ts';
 
 // SQL Workshop: SQL commands and the object browser (owner connection; an isolated
 // workspace's developer login for its developers, see workshopDb).
 
+const ago = (t: string | Date) => {
+  const sec = Math.max(0, (Date.now() - new Date(t).getTime()) / 1000);
+  const [n, unit] = sec < 60 ? [sec, 'second'] : sec < 3600 ? [sec / 60, 'minute'] : sec < 86400 ? [sec / 3600, 'hour'] : sec < 86400 * 30 ? [sec / 86400, 'day'] : sec < 86400 * 365 ? [sec / 86400 / 30, 'month'] : [sec / 86400 / 365, 'year'];
+  const k = Math.floor(n);
+  return `${k} ${unit}${k === 1 ? '' : 's'} ago`;
+};
+
+/** (sprint 61, APEX: the SQL Workshop home) tiles, the newest tables, recent commands and scripts, the session's schema. */
+async function workshopHome(req: Req, reply: FastifyReply) {
+  const s = await developer(req, reply);
+  if (!s) return;
+  const db = await workshopDb(s);
+  const [schemas, schema, tables, commands, scripts] = await Promise.all([
+    usableSchemas(db),
+    sessionSchema(s, db),
+    // PostgreSQL keeps no creation time: object ids grow, so the highest are the newest
+    db.query<{ qname: string; schema: string; name: string; rows: number }>(
+      `select c.oid::regclass::text as qname, n.nspname as schema, c.relname as name, greatest(c.reltuples, 0)::bigint as rows
+         from pg_class c join pg_namespace n on n.oid = c.relnamespace
+        where c.relkind in ('r', 'p') and not c.relispartition and n.nspname !~ '^pg_' and n.nspname not in ('information_schema', 'meta')
+          and has_schema_privilege(n.oid, 'USAGE') and has_table_privilege(c.oid, 'SELECT')
+          and not (n.nspname = 'public' and c.relname like 'pgkiln\\_%')
+        order by c.oid desc limit 15`,
+    ),
+    owner.query<{ id: string; detail: string; at: string }>(
+      `select id, detail, at from meta.activity_log where username = $1 and event = 'sql_command' order by id desc limit 15`,
+      [s.username],
+    ),
+    owner.query<{ id: number; name: string; updated_at: string }>(
+      `select id, name, updated_at from meta.sql_script where workspace_id = $1 order by updated_at desc limit 15`,
+      [currentWorkspace(s)],
+    ),
+  ]);
+  const tile = (href: string, ic: string, title: string, text: string) =>
+    html`<a class="ab-tile sw-tile" href="${BASE}${href}"><span class="ab-tile-icon sw-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`;
+  const list = (title: string, rows: Raw[], empty: string) =>
+    html`<section class="sw-recent"><h2>${title}</h2>${rows.length ? html`<ul>${rows}</ul>` : html`<p class="muted">${empty}</p>`}</section>`;
+  const main = html`<div class="ab-home">
+    <div class="ab-main">
+      <h1 class="sr-only">SQL Workshop</h1>
+      ${workshopTabs('home')}
+      <div class="ab-tiles sw-tiles">
+        ${tile('/sql/objects', 'search', 'Object Browser', 'Browse tables, views and functions, their policies, grants and data.')}
+        ${tile('/sql/commands', 'code', 'SQL Commands', 'Run SQL statements against your schemas.')}
+        ${tile('/sql/scripts', 'file', 'SQL Scripts', 'Create, upload and run stored SQL scripts.')}
+        ${tile('/sql/load', 'upload', 'Utilities', 'Load and unload data, sample data, DDL and schema comparison.')}
+        ${tile('/sql/quick', 'bolt', 'Quick SQL', 'Write a data model in shorthand and get the DDL.')}
+      </div>
+      <div class="sw-recents">
+        ${list('Recently created tables', tables.rows.map((t) => html`<li><a href="${BASE}/sql/objects?o=${encodeURIComponent(t.qname)}">${t.qname}</a><span class="muted">~${Number(t.rows).toLocaleString('en')} rows</span></li>`), 'No tables you can read.')}
+        ${list('Recent SQL commands', commands.rows.map((c) => html`<li><a href="${BASE}/sql/commands?recent=${c.id}" title="${c.detail.slice(0, 500)}">${c.detail.replace(/\s+/g, ' ').slice(0, 60)}</a><span class="muted">${ago(c.at)}</span></li>`), 'You haven\'t run SQL commands yet.')}
+        ${list('Recent SQL scripts', scripts.rows.map((x) => html`<li><a href="${BASE}/sql/scripts/${x.id}">${x.name}</a><span class="muted">${ago(x.updated_at)}</span></li>`), 'No scripts in this workspace yet.')}
+      </div>
+    </div>
+    <aside class="ab-side" aria-label="About, schema and tasks">
+      <section><h2>About</h2><p>The SQL Workshop is a collection of tools to manage database objects. It runs as ${workshopRunsAs(db)}.</p>
+        <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#sql-workshop" target="_blank" rel="noopener">Learn more …</a></section>
+      <section><h2>Schema</h2><p>The default schema of this session: first in the search path of SQL Commands and SQL Scripts.</p>
+        <form method="post" action="${BASE}/sql/schema" class="sw-schema">${csrf(s)}
+          <label class="sr-only" for="f_schema">Schema</label>
+          <select id="f_schema" name="schema" data-autosubmit><option value="">(the default search path)</option>${schemas.map((n) => html`<option value="${n}"${n === schema ? raw(' selected') : ''}>${n}</option>`)}</select>
+          <button class="btn btn-sm">Set</button></form></section>
+      <section><h2>Tasks</h2><ul class="ab-links ab-tasks">
+        <li><a href="${BASE}/sql/quick">Create a data model with Quick SQL${icon('chevron')}</a></li>
+        <li><a href="${BASE}/blueprints">Create an application from a blueprint${icon('chevron')}</a></li>
+        <li><a href="${BASE}/sql/ai/describe">Describe tables${icon('chevron')}</a></li>
+        <li><a href="${BASE}/sql/sample-data">Generate sample data${icon('chevron')}</a></li>
+        <li><a href="${BASE}/sql/ddl">Generate DDL${icon('chevron')}</a></li>
+      </ul></section>
+    </aside>
+  </div>`;
+  return send(reply, s, shell(s, 'SQL Workshop', [['SQL Workshop']], main, 'sql'));
+}
+
 export async function sqlRoutes(app: FastifyInstance) {
   // SQL Scripts, Quick SQL and the query builder (sprint 31)
   await app.register(scriptRoutes);
@@ -37,6 +112,13 @@ export async function sqlRoutes(app: FastifyInstance) {
     const sql = req.body?.sql ?? '';
     let result: Raw | '' = '';
     const db = await workshopDb(s);
+    // (sprint 61) a command from the home page's Recent SQL Commands (the developer's own)
+    let text = sql;
+    if (req.method === 'GET' && /^\d{1,18}$/.test(String(req.query?.recent ?? ''))) {
+      const r = await owner.one<{ detail: string }>(`select detail from meta.activity_log where id = $1 and username = $2 and event = 'sql_command'`, [req.query!.recent, s.username]);
+      if (r) text = r.detail;
+    }
+    const schema = await sessionSchema(s, db);
     if (req.method === 'POST' && sql.trim()) {
       const started = performance.now();
       try {
@@ -45,6 +127,7 @@ export async function sqlRoutes(app: FastifyInstance) {
         const c = await db.pool.connect();
         let out;
         try {
+          if (schema) await c.query(`select set_config('search_path', $1, false)`, [`${pg.escapeIdentifier(schema)}, public`]);
           out = await c.query({ text: sql, rowMode: 'array' });
         } finally {
           c.release(true);
@@ -61,16 +144,32 @@ export async function sqlRoutes(app: FastifyInstance) {
       await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), elapsedMs: Math.round(performance.now() - started), detail: sql.length > 2000 ? `${sql.slice(0, 2000)}…` : sql });
     }
     const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('sql')}
-      <p class="muted">Runs as ${workshopRunsAs(db)} (not as an application role). Multiple statements are allowed; results of the last one are shown.</p>
-      <form method="post">${csrf(s)}
-        <textarea name="sql" class="code sql-editor" rows="12" spellcheck="false" aria-label="SQL" data-code="plpgsql">${sql || 'select current_user, version();'}</textarea>
+      <p class="muted">Runs as ${workshopRunsAs(db)} (not as an application role)${schema ? html`, schema <code>${schema}</code> first in the search path (<a href="${BASE}/sql">change</a>)` : ''}. Multiple statements are allowed; results of the last one are shown.</p>
+      <form method="post" action="${BASE}/sql/commands">${csrf(s)}
+        <textarea name="sql" class="code sql-editor" rows="12" spellcheck="false" aria-label="SQL" data-code="plpgsql">${text || 'select current_user, version();'}</textarea>
         <div class="buttons"><button class="btn btn-hot">${icon('play')} Run (Ctrl+Enter)</button></div>
       </form>
       <div class="u-mt1">${result}</div>`;
     return send(reply, s, shell(s, 'SQL Workshop', [['SQL Workshop']], main, 'sql'));
   };
-  app.get(`${BASE}/sql`, sqlWorkshop);
+  app.get(`${BASE}/sql/commands`, sqlWorkshop);
+  app.post(`${BASE}/sql/commands`, sqlWorkshop);
+  // (before sprint 61 SQL Commands was /builder/sql: a post there still runs)
   app.post(`${BASE}/sql`, sqlWorkshop);
+  app.get(`${BASE}/sql`, workshopHome);
+
+  // (sprint 61) the session's default schema: first in the search path of SQL Commands and SQL Scripts
+  app.post(`${BASE}/sql/schema`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const wanted = String(req.body?.schema ?? '');
+    const usable = await usableSchemas(await workshopDb(s));
+    if (wanted && !usable.includes(wanted)) return reply.code(404).send('Not found');
+    if (wanted) s.state.__SQLSCHEMA = wanted;
+    else delete s.state.__SQLSCHEMA;
+    flash(s, wanted ? `Schema ${wanted} first in the search path of SQL Commands and SQL Scripts.` : 'The default search path again.');
+    return back(reply, s, `${BASE}/sql`);
+  });
 
   app.get(`${BASE}/sql/objects`, async (req: Req, reply) => {
     const s = await developer(req, reply);

package/src/builder/ui.ts

@@ -43,7 +43,7 @@ export async function send(reply: FastifyReply, s: Session, body: string) {
   return reply.type('text/html').send(body);
 }
 
-export type Section = 'apps' | 'users' | 'sql' | 'developers';
+export type Section = 'apps' | 'users' | 'sql' | 'developers' | 'gallery';
 
 // ------------------------------------------------------------------ builder head
 // Builder-only stylesheets and scripts, loaded on every builder page after
@@ -87,8 +87,8 @@ export interface ShellOpts {
 const initials = (name: string) => name.replace(/[^\p{L}\p{N}]+/gu, ' ').trim().split(' ').map((w) => w[0]).join('').slice(0, 2).toUpperCase() || '?';
 
 /**
- * A builder page: the icon rail on the left (App Builder, SQL Workshop, Users,
- * Developers, Search, Help, the developer's menu), a compact toolbar with
+ * A builder page: the icon rail on the left (App Builder, SQL Workshop, Search;
+ * Administration, Help, the developer's menu), an environment banner (091), a compact toolbar with
  * back button and breadcrumb, then the page itself.
  */
 export function shell(s: Session, title: string, crumbs: [string, string?][], main: Raw, section: Section = 'apps', opts: ShellOpts = {}) {
@@ -110,11 +110,30 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
       <ul class="rail-list">
         ${rail('apps', BASE, 'builder', 'App Builder')}
         ${rail('sql', `${BASE}/sql`, 'database', 'SQL Workshop')}
-        ${rail('users', `${BASE}/users`, 'user', 'Users')}
-        ${rail('developers', `${BASE}/developers`, 'users', 'Developers')}
+        ${rail('gallery', `${BASE}/gallery`, 'package', 'App Gallery')}
         ${appId ? rail('search', `${BASE}/apps/${appId}/search`, 'search', 'Search this application') : ''}
       </ul>
       <ul class="rail-list rail-bottom">
+        <li><details class="menu rail-user rail-admin">
+          <summary class="rail-link${section === 'users' || section === 'developers' ? ' rail-open' : ''}" title="Administration"${section === 'users' || section === 'developers' ? raw(' aria-current="page"') : ''}>${icon('settings')}<span class="rail-label">Administration</span></summary>
+          <div class="menu-panel">
+            <div class="menu-section menu-links">
+              <strong>Administration</strong>
+              <a href="${BASE}/utilities">${icon('grid')} Workspace utilities</a>
+            </div>
+            ${s.workspace?.admin ? html`<div class="menu-section menu-links">
+              <span class="small muted">Manage service: ${s.workspace.name}</span>
+              <a href="${BASE}/workspaces/${s.workspace.id}#service">${icon('bell')} Workspace message and environment banner</a>
+              <a href="${BASE}/workspaces/${s.workspace.id}/utilization">${icon('chart')} Workspace utilization</a>
+              <a href="${BASE}/workspaces/${s.workspace.id}">${icon('layers')} Workspace and developers</a>
+            </div>` : ''}
+            <div class="menu-section menu-links">
+              <a href="${BASE}/users">${icon('user')} Manage users and groups</a>
+              <a href="${BASE}/developers">${icon('users')} Developers</a>
+              <a href="${BASE}/dashboard">${icon('activity')} Monitor activity</a>
+              <a href="${BASE}/developers">${icon('key')} Change my password</a>
+            </div>
+          </div></details></li>
         ${rail('help', 'https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md', 'help', 'Help', raw(' target="_blank" rel="noopener"'))}
         <li><details class="menu rail-user">
           <summary class="rail-avatar" title="${s.username}"><span aria-hidden="true">${initials(s.username ?? '')}</span><span class="sr-only">Account: ${s.username}</span></summary>
@@ -139,6 +158,7 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
           html`<li>${href && i < crumbs.length - 1 ? html`<a href="${href}">${label}</a>` : html`<span aria-current="page">${label}</span>`}</li>`)}</ol></nav>
         <div class="ide-tools">${opts.toolbar ?? ''}</div>
       </header>
+      ${s.workspace?.banner_label ? html`<div class="ide-banner ide-banner-${BANNER_COLORS.includes(s.workspace.banner_color ?? '') ? s.workspace.banner_color : 'blue'}" role="note" aria-label="Environment">${s.workspace.banner_label}</div>` : ''}
       ${s.state.__WEAK || ok || err ? html`<div class="ide-alerts">
         ${s.state.__WEAK ? html`<div class="alert alert-error" role="alert">You signed in with the default password. <a href="${BASE}/developers">Change it now.</a></div>` : ''}
         ${ok ? html`<div class="alert alert-success" role="status">${ok}</div>` : ''}
@@ -162,6 +182,9 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
   );
 }
 
+/** (091) the colours of a workspace's environment banner (builder.css draws them) */
+export const BANNER_COLORS = ['red', 'orange', 'yellow', 'green', 'teal', 'blue', 'purple', 'gray'];
+
 export const csrf = (s: Session) => html`<input type="hidden" name="__csrf" value="${s.csrf_token}">`;
 
 export function input(name: string, label: string, value: unknown, opts: { type?: string; help?: string; required?: boolean; placeholder?: string; auto?: string } = {}) {
@@ -209,12 +232,12 @@ export const appHeader = (a: any, active: 'pages' | 'shared' | 'settings' | 'act
 };
 
 /** Tabs of the SQL Workshop. */
-export type WorkshopTab = 'sql' | 'scripts' | 'quicksql' | 'query' | 'objects' | 'load' | 'unload' | 'sample' | 'ai' | 'ddl' | 'compare';
+export type WorkshopTab = 'home' | 'sql' | 'scripts' | 'quicksql' | 'query' | 'objects' | 'load' | 'unload' | 'sample' | 'ai' | 'ddl' | 'compare';
 export const workshopTabs = (active: WorkshopTab) => {
   const tab = (key: WorkshopTab, href: string, ic: string, label: string) =>
     html`<a class="ide-tab" href="${BASE}${href}"${active === key ? raw(' aria-current="page"') : ''}>${icon(ic)}<span>${label}</span></a>`;
   return html`<nav class="ide-tabs u-mb1" aria-label="SQL Workshop">
-    ${tab('sql', '/sql', 'code', 'SQL Commands')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('quicksql', '/sql/quick', 'bolt', 'Quick SQL')}
+    ${tab('home', '/sql', 'home', 'Home')}${tab('sql', '/sql/commands', 'code', 'SQL Commands')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('quicksql', '/sql/quick', 'bolt', 'Quick SQL')}
     ${tab('query', '/sql/query', 'filter', 'Query Builder')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('load', '/sql/load', 'upload', 'Load Data')}${tab('unload', '/sql/unload', 'download', 'Unload Data')}${tab('sample', '/sql/sample-data', 'layers', 'Sample Data')}${tab('ddl', '/sql/ddl', 'file', 'DDL')}${tab('compare', '/sql/compare', 'layers', 'Compare')}${tab('ai', '/sql/ai', 'bolt', 'AI')}</nav>`;
 };