pgkiln 0.41.0 → 0.43.0

package/src/builder/routes.ts

@@ -17,11 +17,10 @@ import { APP_COLORS, appHeader, back, BASE, builderHead, csrf, developer, flash,
 import { appOr404 } from './forms.ts';
 import { docToFiles, filesToZip } from '../appfiles.ts';
 import { homeRoutes, rememberApp } from './home.ts';
-import { appAllowed, currentWorkspace, placeApp, workshopDb, workspaceRoutes } from './workspaces.ts';
+import { currentWorkspace, placeApp, workshopDb, workspaceRoutes } from './workspaces.ts';
 import { instanceRoutes } from './instance.ts';
 import { saveTimeZoneSettings, timeZoneSettings } from './globalization.ts';
 import { WIZARD_KINDS, wizardRoutes, wizardTables } from './wizards.ts';
-import { checkNewApp, createApp, createAppError, startFromBoilerplate } from './newapp.ts';
 import { appFromFileRoutes } from './appfromfile.ts';
 import { clearDevbar } from '../runtime/devbar.ts';
 import { EMAIL } from './find-workspace.ts';
@@ -187,29 +186,14 @@ export async function builderRoutes(app: FastifyInstance) {
   await wizardRoutes(app);
   await appFromFileRoutes(app);
 
-  app.post(`${BASE}/apps`, async (req: Req, reply) => {
+  // (sprint 73) POST /apps, creating an application, is in appwizard.ts
+
+  // (sprint 74) hide the default-password warning until the next sign-in (the avatar keeps a dot)
+  app.post(`${BASE}/weak/dismiss`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
-    const b = req.body ?? {};
-    try {
-      const checked = await checkNewApp(b, currentWorkspace(s));
-      const boilerplate = /^\d{1,9}$/.test(b.boilerplate ?? '') ? Number(b.boilerplate) : null;
-      if (boilerplate && !(await appAllowed(s, boilerplate))) throw new Error('Choose a boilerplate application (an application of type Boilerplate).');
-      const { id, existingAccount } = await owner.tx(async (c) => {
-        const made = await createApp(c, checked);
-        if (boilerplate) await startFromBoilerplate(c, made.id, checked, boilerplate);
-        return made;
-      }).catch((e) => {
-        throw new Error(createAppError(e, checked.alias));
-      });
-      flash(s, existingAccount
-        ? `Application created. The existing account ${checked.adminUser} got the admin role (its password was not changed).`
-        : 'Application created.');
-      return back(reply, s, `${BASE}/apps/${id}`);
-    } catch (e) {
-      flash(s, (e as Error).message, 'error');
-      return back(reply, s, `${BASE}/create`);
-    }
+    s.state.__WEAK_HIDDEN = '1';
+    return back(reply, s, BASE);
   });
 
   app.post(`${BASE}/import`, async (req: Req, reply) => {
@@ -266,7 +250,12 @@ export async function builderRoutes(app: FastifyInstance) {
     const groups = (await owner.query<{ name: string }>('select name from meta.page_group where app_id = $1 order by name', [a.id])).rows.map((g) => g.name);
     const grouped = groups.length > 0 || pages.rows.some((p) => p.page_group);
     const groupFilter = typeof req.query?.group === 'string' ? req.query.group : '';
-    const shownPages = pages.rows.filter((p) => !groupFilter || (groupFilter === '-' ? !p.page_group : p.page_group === groupFilter));
+    // (sprint 74) search by name or number, and a report or icon view (APEX: the application home)
+    const q = typeof req.query?.q === 'string' ? req.query.q.trim().slice(0, 100) : '';
+    const icons = req.query?.view === 'icons';
+    const shownPages = pages.rows.filter((p) => (!groupFilter || (groupFilter === '-' ? !p.page_group : p.page_group === groupFilter))
+      && (!q || String(p.page_no) === q || String(p.name).toLowerCase().includes(q.toLowerCase())));
+    const keep = (extra: Record<string, string>) => `?${new URLSearchParams({ ...(q ? { q } : {}), ...(groupFilter ? { group: groupFilter } : {}), ...extra })}`;
     const locks = new Map((await appLocks(a.id)).map((l) => [l.page_no, l]));
     const commentsPerPage = new Map((await owner.query('select page_no, count(*)::int as n from meta.dev_comment where app_id = $1 group by 1', [a.id])).rows.map((r) => [r.page_no, r.n]));
     const appLock = locks.get(0);
@@ -274,21 +263,33 @@ export async function builderRoutes(app: FastifyInstance) {
     const main = html`
       ${appHeader(a, 'pages')}
       ${appLock && appLock.locked_by !== s.username ? html`<div class="alert alert-error" role="status">${icon('key')} ${lockText(appLock)} Changes are refused until it is unlocked.</div>` : ''}
+      <div class="app-home">
+      <div class="app-home-main">
+      <div class="pages-bar">
+        <form method="get" class="search u-mwnone" role="search">${groupFilter ? html`<input type="hidden" name="group" value="${groupFilter}">` : ''}${icons ? html`<input type="hidden" name="view" value="icons">` : ''}
+          <label class="sr-only" for="f_pq">Search pages</label><input id="f_pq" name="q" type="search" value="${q}" placeholder="Page name or number" data-filter-rows="pages-rows">
+          <button class="btn">${icon('search')}<span class="sr-only">Search</span></button></form>
+        <div class="seg view-toggle" role="group" aria-label="View">
+          <a href="${keep({})}"${icons ? '' : raw(' aria-current="true"')}>${icon('list')} Report</a><a href="${keep({ view: 'icons' })}"${icons ? raw(' aria-current="true"') : ''}>${icon('grid')} Icons</a></div>
+        <a class="btn btn-hot" href="#create-page">${icon('plus')} Create page</a>
+      </div>
       ${region('Pages', html`${grouped
           ? html`<form method="get" class="search u-mwnone u-mb1"><div class="field"><label class="label" for="f_group">Page group</label>
               <select id="f_group" name="group">${[['', 'All pages'], ...groups.map((g) => [g, g]), ['-', 'Without a group']].map(([v, l]) => html`<option value="${v}"${v === groupFilter ? raw(' selected') : ''}>${l}</option>`)}</select></div>
               <button class="btn u-selfend">Show</button></form>`
-          : ''}<div class="table-wrap"><table class="report">
+          : ''}${icons
+          ? html`<ul class="page-icons" id="pages-rows">${shownPages.map((p) => html`<li><a href="${BASE}/pages/${p.id}" class="page-icon"><span class="page-icon-no">${p.page_no}</span><b>${p.name}</b><small class="muted">${p.mode}, ${p.regions} region${p.regions === 1 ? '' : 's'}</small></a></li>`)}</ul>`
+          : html`<div class="table-wrap"><table class="report">
           <thead><tr><th class="num">Page</th><th>Name</th>${grouped ? html`<th>Group</th>` : ''}<th>Mode</th><th class="num">Regions</th><th class="num">Items</th><th class="num">DAs</th><th class="num">Processes</th><th>Authorization</th><th>Protection</th><th>Lock</th><th></th></tr></thead>
-          <tbody>${shownPages.map((p) => html`<tr>
+          <tbody id="pages-rows">${shownPages.map((p) => html`<tr>
             <td class="num">${p.page_no}</td><td><a href="${BASE}/pages/${p.id}">${p.name}</a>${commentsPerPage.get(p.page_no) ? html` <span class="tag" title="Developer comments">${commentsPerPage.get(p.page_no)} comment${commentsPerPage.get(p.page_no) === 1 ? '' : 's'}</span>` : ''}</td>${grouped ? html`<td>${p.page_group ?? '—'}</td>` : ''}<td>${p.mode}</td>
             <td class="num">${p.regions}</td><td class="num">${p.items}</td><td class="num">${p.das}</td><td class="num">${p.processes}</td>
             <td>${p.requires_auth ? (p.authz ?? '—') : 'public'}</td><td>${p.protection}</td>
             <td>${((l) => (l ? html`<span class="lock-tag" title="${lockText(l)}">${icon('key')}<span>${l.locked_by === s.username ? 'you' : l.locked_by}</span></span>` : '—'))(locks.get(p.page_no))}</td>
             <td><a href="/a/${a.alias}/${p.page_no}" target="_blank" rel="noopener">Run ▸</a></td></tr>`)}</tbody>
-        </table></div>`)}
-      ${region('Application lock and comments', await lockPanel(s, a.id, 0, { headings: true }))}
-      <div class="columns">
+        </table></div>`}${q && !shownPages.length ? html`<p class="muted">No page matches “${q}”.</p>` : ''}`)}
+      <div id="app-lock">${region('Application lock and comments', await lockPanel(s, a.id, 0, { headings: true }))}</div>
+      <div class="columns" id="create-page">
         ${region('Create pages from a table', html`
           <p class="muted u-mt0">Choose a page type and a table or view; the next step proposes the columns, key, dates, positions and foreign keys from the database, and creates the page with a menu entry.</p>
           <form method="get" action="${BASE}/apps/${a.id}/wizard">
@@ -309,6 +310,21 @@ export async function builderRoutes(app: FastifyInstance) {
             </div>
             <div class="buttons"><button class="btn btn-hot">Create page</button></div>
           </form>`)}
+      </div>
+      </div>
+      <aside class="app-tasks region region-standard" aria-labelledby="app-tasks-h"><header class="region-header"><h2 id="app-tasks-h">Tasks</h2></header>
+        <ul class="sc-links">
+          <li><a href="/a/${a.alias}" target="_blank" rel="noopener">${icon('play')} Run application</a></li>
+          <li><a href="#create-page">${icon('plus')} Create page</a></li>
+          <li><a href="${BASE}/apps/${a.id}/ai-pages">${icon('lightbulb')} Create pages with AI</a></li>
+          <li><a href="${BASE}/apps/${a.id}/shared">${icon('layers')} Shared Components</a></li>
+          <li><a href="${BASE}/apps/${a.id}/shared?type=page_group">${icon('folder')} Page groups</a></li>
+          <li><a href="${BASE}/apps/${a.id}/export">${icon('download')} Export</a></li>
+          <li><a href="${BASE}/apps/${a.id}/backups">${icon('history')} Backups</a></li>
+          <li><a href="${BASE}/apps/${a.id}/supporting-objects">${icon('database')} Supporting objects</a></li>
+          <li><a href="#app-lock">${icon('lock')} Lock the application</a></li>
+          <li><a href="${BASE}/apps/${a.id}/settings?tab=definition">${icon('trash')} Delete the application</a></li>
+        </ul></aside>
       </div>`;
     return send(reply, s, shell(s, a.name, [['App Builder', BASE], [a.name]], main));
   });
@@ -357,6 +373,11 @@ export async function builderRoutes(app: FastifyInstance) {
   });
 
   // ---------------------------------------------------------------- settings
+  /** (sprint 74) The tabs of an application's Settings. */
+  const SETTINGS_TABS: [string, string][] = [
+    ['definition', 'Definition'], ['security', 'Security'], ['signin', 'Sign-in'], ['ui', 'User Interface'],
+    ['globalization', 'Globalization'], ['errors', 'Errors and Sessions'], ['pwa', 'Progressive Web App'],
+  ];
   app.get(`${BASE}/apps/:id/settings`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
@@ -366,18 +387,25 @@ export async function builderRoutes(app: FastifyInstance) {
     const directories = (await owner.query('select name, display_name, enabled from meta.ldap_directory order by display_name')).rows;
     const lists = (await owner.query('select name from meta.list where app_id = $1 order by name', [a.id])).rows.map((r) => r.name as string);
     const listChoices = (v: string | null, none: string): [string, string][] => [['', none], ...lists.map((n): [string, string] => [n, n]), ...(v && !lists.includes(v) ? [[v, `${v} (missing!)`] as [string, string]] : [])];
+    // (sprint 74) tabs like APEX's Edit Application Definition and Security Attributes: every tab of the
+    // main form is in the page (the others hidden), so Save keeps all of them; without JavaScript the tabs are links
+    const tab = SETTINGS_TABS.some(([k]) => k === req.query?.tab) ? String(req.query!.tab) : 'definition';
+    const panel = (k: string) => raw(`<section class="settings-panel" data-tab="${k}"${k === tab ? '' : ' hidden'}>`);
+    const end = raw('</section>');
+    const authPart = (k: string) => raw(`<div class="auth-part" data-auth="${k}"${a.authentication === k ? '' : ' hidden'}>`);
     const main = html`${appHeader(a, 'settings')}
-      <div class="columns">
-        ${region('Application settings', html`
-          <form method="post" action="${BASE}/apps/${a.id}/settings">${csrf(s)}
+      <nav class="settings-tabs" aria-label="Settings">${SETTINGS_TABS.map(([k, label]) => html`<a href="?tab=${k}" data-tab-link="${k}"${k === tab ? raw(' aria-current="page"') : ''}>${label}</a>`)}</nav>
+      <div class="settings-body">
+        <form method="post" action="${BASE}/apps/${a.id}/settings" class="settings-form">${csrf(s)}<input type="hidden" name="tab" value="${tab}" data-settings-tab>
+            ${panel('definition')}${region('Definition', html`
             <div class="form-grid">
               ${input('name', 'Name', a.name, { required: true })}
               ${input('alias', 'Alias', a.alias, { required: true })}
               ${input('home_page', 'Home page', a.home_page, { type: 'number' })}
               ${select('app_type', 'Application type', a.app_type ?? 'standard', APP_TYPES.map((t): [string, string] => [t, APP_TYPE_LABELS[t]]),
                 'Theme and library applications offer their theme or shared components to other applications (Shared Components → Subscriptions); Create application can start from a boilerplate application.')}
-            </div>
-            <h3>Security</h3>
+            </div>`)}${end}
+            ${panel('security')}${region('Authentication', html`
             <div class="form-grid">
               ${select('authentication', 'Authentication', a.authentication, [['app_users', 'App users (login page)'], ['header', 'HTTP header (reverse proxy)'], ['database', 'Database accounts (PostgreSQL roles)'], ['custom', 'Custom (a PL/pgSQL function)'], ['none', 'None (public)']])}
               ${input('db_role', 'Database role (parsing schema)', a.db_role, { help: 'All application SQL runs as this role (SET LOCAL ROLE), so grants and row level security apply. Leave empty only for trusted internal apps.' })}
@@ -386,7 +414,7 @@ export async function builderRoutes(app: FastifyInstance) {
               <div class="field"><span class="label">Debug messages</span><span>${a.debug_level ? html`<b>on, level ${a.debug_level}</b>` : 'off'} · <a href="${BASE}/apps/${a.id}/debug">Debug messages</a></span>
                 <small class="help">Records every request's steps with timings and the messages of <code>meta.debug(level, text)</code>, kept ${a.debug_retention_days} days.</small></div>
             </div>
-            <h3>HTTP header authentication</h3>
+            ${authPart('header')}<h3>HTTP header authentication</h3>
             <p class="muted">Only used when Authentication is "HTTP header". A reverse proxy or single sign-on gateway signs users in and passes the user name in a header; pgkiln trusts it only from the proxy addresses in <code>PGKILN_AUTH_HEADER_PROXIES</code>${headerProxiesConfigured() ? '' : html` (<b>not set on this server: header sign-in is refused</b>)`}.</p>
             <div class="form-grid">
               ${input('header_name', 'User name header', a.header_name ?? '', { placeholder: DEFAULT_HEADER, help: 'The request header with the user name (APEX: HTTP Header Variable). Empty: X-Remote-User. A changed or missing header ends the session.' })}
@@ -394,13 +422,13 @@ export async function builderRoutes(app: FastifyInstance) {
             </div>
             <div class="field"><label class="check"><input type="checkbox" name="header_auto_create" value="true"${a.header_auto_create ? raw(' checked') : ''}> Create accounts automatically</label>
               <small class="help">An unknown user name gets a new account with access to this app. Otherwise the account must exist and have access.</small></div>
-            <h3>Database accounts</h3>
+            </div>${authPart('database')}<h3>Database accounts</h3>
             <p class="muted">Only used when Authentication is "Database accounts". Users sign in with a PostgreSQL login role and its password, checked by a short connection to this database as that role. Superusers and pgkiln's own roles are always refused; with neither field set nobody can sign in.</p>
             <div class="form-grid">
               ${input('db_auth_roles', 'Allowed roles', (a.db_auth_roles ?? []).join(', '), { placeholder: 'e.g. alice, bob', help: 'Login roles that may sign in, comma separated (exact names).' })}
               ${input('db_auth_member_of', 'Or members of role', a.db_auth_member_of ?? '', { placeholder: 'e.g. app_users_group', help: 'Every member of this role may sign in too.' })}
             </div>
-            <h3>Custom authentication</h3>
+            </div>${authPart('custom')}<h3>Custom authentication</h3>
             <p class="muted">Only used when Authentication is "Custom". Your own PL/pgSQL checks the user name and password on the sign-in form, as the application's database role; the password is passed as a parameter and never logged. Failed attempts are throttled like other sign-ins. With neither field set nobody can sign in.</p>
             <div class="form-grid">
               ${input('custom_auth_function', 'Function name', a.custom_auth_function ?? '', { placeholder: 'e.g. app.check_login', help: 'A function (p_username text, p_password text) returns boolean, in lower case, optionally with its schema. The app\'s role needs EXECUTE on it. Takes precedence over the body below.' })}
@@ -411,6 +439,8 @@ export async function builderRoutes(app: FastifyInstance) {
             <div class="field" data-wide><label class="label" for="f_custom_auth_post_code">Post-authentication code</label>
               <textarea id="f_custom_auth_post_code" name="custom_auth_post_code" class="code" rows="4" spellcheck="false" data-code="plpgsql">${a.custom_auth_post_code ?? ''}</textarea>
               <small class="help">Optional PL/pgSQL run after a successful check, with p_username (and meta.app_user()), e.g. to record the last sign-in. Raising an exception refuses the sign-in. Application processes "after login" run afterwards as usual.</small></div>
+            </div>`)}${end}
+            ${panel('signin')}${region('Sign-in', html`
             <h3>Sign-in methods</h3>
             <div class="field"><label class="check"><input type="checkbox" name="local_login" value="true"${a.local_login ? raw(' checked') : ''}> Username and password</label></div>
             ${directories.length
@@ -423,9 +453,11 @@ export async function builderRoutes(app: FastifyInstance) {
             ${providers.length
               ? providers.map((pr) => html`<div class="field"><label class="check"><input type="checkbox" name="sso_providers" value="${pr.name}"${a.sso_providers.includes(pr.name) ? raw(' checked') : ''}> Sign in with ${pr.display_name}${pr.enabled ? '' : ' (disabled)'}</label></div>`)
               : html`<p class="muted">No identity providers configured. <a href="${BASE}/users/providers">Add one</a> for single sign-on.</p>`}
+            `)}${end}
+            ${panel('ui')}${region('User Interface', html`
             <h3>Theme</h3>
             <div class="form-grid">
-              ${select('base', 'Base style', baseStyleOf(a.theme), [['iris', 'Iris (the default for new applications)'], ['standard', 'Standard (pgkiln until 0.28)']], 'Colours, corners, font and shadows of the whole application, light and dark. The colours below override its accent and header.')}
+              ${select('base', 'Base style', baseStyleOf(a.theme), [['iris', 'Iris (the default for new applications)'], ['lavender', 'Lavender (Iris until pgkiln 0.41)'], ['standard', 'Standard (pgkiln until 0.28)']], 'Colours, corners, font and shadows of the whole application, light and dark. The colours below override its accent and header.')}
               ${input('accent', 'Accent colour', a.theme?.accent ?? BASE_STYLES[baseStyleOf(a.theme)].accent, { type: 'color' })}
               ${input('header', 'Header colour', a.theme?.header ?? BASE_STYLES[baseStyleOf(a.theme)].header, { type: 'color' })}
               ${(['accent_dark', 'header_dark'] as const).map((k) => html`<div class="field"><label class="label" for="f_${k}">${k === 'accent_dark' ? 'Accent colour in dark mode' : 'Header colour in dark mode'}</label>
@@ -440,7 +472,8 @@ export async function builderRoutes(app: FastifyInstance) {
               <small class="help">Adds a switch to the user menu and My account; the choice is saved on the account (APEX: "Enable End Users to Choose Theme Style").</small></div>
             <p><a class="btn" href="${BASE}/apps/${a.id}/theme">${icon('settings')} Theme Roller: style variants…</a>
               <span class="muted">${(() => { const n = appStyles(a.theme).length; return n ? `${n} style${n === 1 ? '' : 's'}` : 'no styles yet'; })()}</span></p>
-            <h3>Globalization</h3>
+            `)}${end}
+            ${panel('globalization')}${region('Globalization', html`
             <div class="form-grid">
               ${input('language', 'Primary language', a.language, { help: 'The language the app is built in, e.g. en, nl, de, en-GB.' })}
               ${input('languages', 'Translated languages', (a.languages ?? []).join(', '), { placeholder: 'e.g. nl, de', help: 'Comma separated. Translate texts under Shared Components → Globalization.' })}
@@ -448,22 +481,22 @@ export async function builderRoutes(app: FastifyInstance) {
               ${input('date_format', 'Date format', a.date_format, { placeholder: 'e.g. DD-MM-YYYY (empty: per language)', help: 'Masks: YYYY YY MM MON MONTH DD DY DAY HH24 HH MI SS AM' })}
               ${input('timestamp_format', 'Date and time format', a.timestamp_format, { placeholder: 'e.g. DD-MM-YYYY HH24:MI' })}
             </div>
-            ${await timeZoneSettings(a)}
-            <div class="buttons"><button class="btn btn-hot">Save settings</button></div>
+            ${await timeZoneSettings(a)}`)}${end}
+            <div class="buttons settings-save"${['errors', 'pwa'].includes(tab) ? raw(' hidden') : ''}><button class="btn btn-hot">Save settings</button></div>
           </form>
-          <form method="post" action="${BASE}/apps/${a.id}/delete" class="danger-zone">${csrf(s)}
+          ${panel('definition')}<form method="post" action="${BASE}/apps/${a.id}/delete" class="danger-zone">${csrf(s)}
             <button class="btn btn-danger" data-confirm="Delete application ${a.name} and all its pages?">Delete application</button>
-          </form>`)}
-        ${region('Errors and sessions', html`<form method="post" action="${BASE}/apps/${a.id}/settings/behaviour">${csrf(s)}
+          </form>${end}
+        ${panel('errors')}${region('Errors and sessions', html`<form method="post" action="${BASE}/apps/${a.id}/settings/behaviour">${csrf(s)}
           <div class="form-grid">
             ${input('error_function', 'Error handling function', a.error_function ?? '', { placeholder: 'e.g. sales.error_message',
               help: 'schema.function(jsonb) returns jsonb, run as the application\'s role: it receives the message and what is known of an error (code, constraint, table, column, component, page, user, internal, reference) and may return {"message": "…"} to show instead. Empty: none.' })}
             ${input('session_warning_seconds', 'Session timeout warning (seconds)', a.session_warning_seconds ?? 120, { type: 'number',
               help: 'Signed-in users are warned this long before their session ends and can stay signed in (0: no warning).' })}
           </div>
-          <div class="buttons"><button class="btn">Save</button></div></form>`)}
-        ${region('Progressive Web App', await pwaSection({ ...a, has_icon: !!(await owner.one('select pwa_icon is not null as h from meta.app where id = $1', [a.id]))?.h }, s))}
-        ${region('Security checklist', html`<ul class="checklist">
+          <div class="buttons"><button class="btn">Save</button></div></form>`)}${end}
+        ${panel('pwa')}${region('Progressive Web App', await pwaSection({ ...a, has_icon: !!(await owner.one('select pwa_icon is not null as h from meta.app where id = $1', [a.id]))?.h }, s))}${end}
+        ${panel('security')}${region('Security checklist', html`<ul class="checklist">
           <li>${a.db_role ? '✓' : '✗'} Runs as a dedicated database role ${a.db_role ? html`(<code>${a.db_role}</code>)` : html`<b>(runs as the runtime connection)</b>`}</li>
           <li>${a.authentication !== 'none' ? '✓' : '•'} ${a.authentication !== 'none' ? 'Users must sign in' : 'Public application'}</li>
           ${a.authentication === 'header' ? html`<li>${headerProxiesConfigured() ? '✓' : '✗'} Sign-in: HTTP header <code>${a.header_name || DEFAULT_HEADER}</code> ${headerProxiesConfigured() ? 'from the proxies in PGKILN_AUTH_HEADER_PROXIES' : html`<b>refused: PGKILN_AUTH_HEADER_PROXIES is not set</b>`}; access: ${a.access_control === 'any_user' ? 'any active account' : 'listed accounts only'}${a.header_auto_create ? ', new accounts created automatically' : ''}</li>` : ''}
@@ -474,7 +507,7 @@ export async function builderRoutes(app: FastifyInstance) {
           <li>${a.debug_level ? `✗ Debug messages are on (level ${a.debug_level}): every request is recorded` : '✓ Debug messages are off'}</li>
           <li>Pages without checksum protection: ${(await owner.one("select count(*)::int as n from meta.page where app_id = $1 and protection = 'unrestricted'", [a.id])).n}</li>
           <li>Public pages: ${(await owner.one('select count(*)::int as n from meta.page where app_id = $1 and not requires_auth', [a.id])).n}</li>
-        </ul>`)}
+        </ul>`)}${end}
       </div>`;
     return send(reply, s, shell(s, `${a.name} settings`, [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Settings']], main));
   });
@@ -497,7 +530,7 @@ export async function builderRoutes(app: FastifyInstance) {
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }
-    return back(reply, s, `${BASE}/apps/${req.params.id}/settings`);
+    return back(reply, s, `${BASE}/apps/${req.params.id}/settings?tab=errors`);
   });
 
   app.post(`${BASE}/apps/:id/settings`, async (req: Req, reply) => {
@@ -516,7 +549,7 @@ export async function builderRoutes(app: FastifyInstance) {
                 app_type = $28, session_group = $29, updated_at = now() where id = $1`,
         [req.params.id, b.name?.trim(), b.alias?.trim().toLowerCase(), Number(b.home_page) || 1, b.authentication, b.db_role?.trim() || null, b.debug === 'true',
          JSON.stringify({
-           base: baseStyleOf({ base: b.base }) === 'iris' ? 'iris' : undefined,
+           base: baseStyleOf({ base: b.base }) === 'standard' ? undefined : baseStyleOf({ base: b.base }),
            accent_dark: b.accent_dark_own === 'true' && /^#[0-9a-f]{6}$/i.test(b.accent_dark ?? '') ? b.accent_dark!.toLowerCase() : undefined,
            header_dark: b.header_dark_own === 'true' && /^#[0-9a-f]{6}$/i.test(b.header_dark ?? '') ? b.header_dark!.toLowerCase() : undefined,
            // a colour equal to a base style's own is not stored, so changing the base style changes it too
@@ -554,7 +587,9 @@ export async function builderRoutes(app: FastifyInstance) {
     } catch (e) {
       flash(s, (e as Error).message, 'error');
     }
-    return back(reply, s, `${BASE}/apps/${req.params.id}/settings`);
+    // (sprint 74) back to the tab the form was saved from
+    const tab = /^[a-z]{1,20}$/.test(String(b.tab ?? '')) ? `?tab=${b.tab}` : '';
+    return back(reply, s, `${BASE}/apps/${req.params.id}/settings${tab}`);
   });
 
   app.post(`${BASE}/apps/:id/delete`, async (req: Req, reply) => {

package/src/builder/shared.ts

@@ -32,7 +32,70 @@ function listExtras(appId: number, list: any, entries: any[]): Raw {
     <p><a class="btn" href="?new=list_entry&amp;list=${encodeURIComponent(list.name)}">＋ Add entry</a></p>`;
 }
 
+/** (sprint 74) A row's second column in a component list. */
+function detailOf(kind: string, r: any): string {
+  switch (kind) {
+    case 'nav_entry': return r.target_page ? `page ${r.target_page}` : r.target_url ?? '';
+    case 'authz_scheme': return r.type;
+    case 'app_process': return r.point;
+    case 'automation': return r.enabled ? r.schedule ?? '' : 'off';
+    case 'list': return r.type;
+    case 'list_entry': return `${r.list_name}${r.target_page ? `, page ${r.target_page}` : ''}`;
+    case 'web_credential': return r.type;
+    case 'rest_source': return `${r.method ?? ''} ${r.url ?? ''}`.trim();
+    case 'supporting_script': return r.kind;
+    case 'search_config': return r.source_type;
+    case 'lov': return r.type ?? '';
+    case 'app_item': return r.scope ?? '';
+    default: return r.description ?? '';
+  }
+}
+
+interface ScItem { label: string; href: string; kind?: string }
+/**
+ * (sprint 74) The groups of the Shared Components page, like APEX's. Component types pgkiln keeps in Settings
+ * open the right Settings tab; a few APEX types have no counterpart (docs/apex-feature-parity.md says why).
+ */
+export function sharedGroups(appId: number): { key: string; title: string; icon: string; items: ScItem[] }[] {
+  const t = (kind: string, label = COMPONENTS[kind].plural): ScItem => ({ label, href: `${BASE}/apps/${appId}/shared?type=${kind}`, kind });
+  const settings = (tab: string, label: string): ScItem => ({ label, href: `${BASE}/apps/${appId}/settings?tab=${tab}` });
+  const page = (path: string, label: string): ScItem => ({ label, href: `${BASE}/apps/${appId}/${path}` });
+  return [
+    { key: 'logic', title: 'Application Logic', icon: 'code', items: [t('app_item', 'Application Items'), t('app_process', 'Application Processes'), t('app_setting', 'Application Settings'), t('build_option', 'Build Options'), page('settings?tab=definition', 'Application Definition')] },
+    { key: 'security', title: 'Security', icon: 'shield', items: [{ label: 'Access Control', href: `${BASE}/apps/${appId}/shared?view=tree`, kind: 'access' }, settings('security', 'Authentication'), t('authz_scheme', 'Authorization Schemes'), settings('security', 'Security Attributes'), settings('signin', 'Sign-in and Session Management')] },
+    { key: 'other', title: 'Other Components', icon: 'layers', items: [t('lov', 'Lists of Values'), t('list', 'Lists'), t('list_entry', 'List Entries'), t('email_template', 'Email Templates'), t('supporting_script', 'Supporting Objects'), page('subscriptions', 'Subscriptions')] },
+    { key: 'navigation', title: 'Navigation and Search', icon: 'compass', items: [t('nav_entry', 'Navigation Menu'), settings('ui', 'Navigation Bar List'), page('breadcrumbs', 'Breadcrumbs'), t('page_group', 'Page Groups'), t('search_config', 'Search Configurations')] },
+    { key: 'ui', title: 'User Interface', icon: 'grid', items: [page('theme', 'Themes and Theme Roller'), settings('ui', 'User Interface Attributes'), t('template_component', 'Template Components'), page('plugins', 'Plug-ins'), settings('pwa', 'Progressive Web App')] },
+    { key: 'files', title: 'Files and Reports', icon: 'file', items: [page('static-files', 'Static Application Files'), t('report_layout', 'Report Layouts'), t('document_template', 'Document Templates')] },
+    { key: 'data', title: 'Data Sources', icon: 'database', items: [t('rest_source', 'REST Data Sources'), t('web_credential', 'Web Credentials'), t('rest_module', 'RESTful Services'), t('data_load_def', 'Data Load Definitions')] },
+    { key: 'workflows', title: 'Workflows and Automations', icon: 'activity', items: [t('workflow_definition', 'Workflows'), t('task_definition', 'Task Definitions'), t('automation', 'Automations')] },
+    { key: 'globalization', title: 'Globalization', icon: 'globe', items: [page('globalization', 'Translations and Text Messages'), t('dynamic_translation', 'Dynamic Translations'), settings('globalization', 'Globalization Attributes')] },
+    { key: 'ai', title: 'Generative AI', icon: 'lightbulb', items: [page('ai', 'AI Services')] },
+  ];
+}
+
 export async function sharedRoutes(app: FastifyInstance) {
+  // (sprint 74) Breadcrumbs (APEX: a breadcrumb component): the pages by their breadcrumb parent
+  app.get(`${BASE}/apps/:id/breadcrumbs`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const a = await appOr404(req.params.id);
+    if (!a) return reply.code(404).send('Not found');
+    const pages = (await owner.query<{ id: number; page_no: number; name: string; parent_page: number | null }>('select id, page_no, name, parent_page from meta.page where app_id = $1 order by page_no', [a.id])).rows;
+    const known = new Set(pages.map((p) => p.page_no));
+    const tree = (parent: number | null, seen: Set<number>): Raw => {
+      const kids = pages.filter((p) => (parent === null ? p.parent_page === null || !known.has(p.parent_page) || p.parent_page === p.page_no : p.parent_page === parent && p.page_no !== parent) && !seen.has(p.page_no));
+      if (!kids.length) return html``;
+      return html`<ul class="tree">${kids.map((p) => {
+        const next = new Set(seen).add(p.page_no);
+        return html`<li><a href="${BASE}/pages/${p.id}">${icon('file')}<span>${p.name}</span><span class="kind">p${p.page_no}</span></a>${tree(p.page_no, next)}</li>`;
+      })}</ul>`;
+    };
+    const main = html`${appHeader(a, 'shared')}
+      ${region('Breadcrumbs', html`<p class="muted u-mt0">A page's breadcrumb lists the pages above it: each page names its breadcrumb parent (Page Designer → page → Breadcrumb parent). Pages without one show Home.</p>${tree(null, new Set())}`)}`;
+    return send(reply, s, shell(s, 'Breadcrumbs', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`], ['Breadcrumbs']], main));
+  });
+
   // ---------------------------------------------------------------- shared components
   const SHARED = ['nav_entry', 'authz_scheme', 'build_option', 'page_group', 'lov', 'app_item', 'app_process', 'automation', 'automation_action', 'report_layout', 'document_template', 'task_definition', 'workflow_definition', 'rest_module', 'template_component', 'web_credential', 'rest_source', 'data_load_def', 'list', 'list_entry', 'supporting_script', 'search_config', 'email_template', 'app_setting', 'dynamic_translation'];
 
@@ -61,6 +124,44 @@ export async function sharedRoutes(app: FastifyInstance) {
 
     const [selKind, selId] = (req.query.c ?? '').split('-');
     const newKind = req.query.new;
+    const type = typeof req.query.type === 'string' ? req.query.type : '';
+    const crumbsBase: [string, string?][] = [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components', `${BASE}/apps/${a.id}/shared`]];
+    // (sprint 74) APEX's Shared Components: a grid of component types in groups, with counts
+    if (!selKind && !newKind && !type && req.query.view !== 'tree') {
+      const counts: Record<string, number> = Object.fromEntries(SHARED.map((k) => [k, rows[k].length]));
+      counts.access = users.length;
+      const main = html`${appHeader(a, 'shared')}
+        <div class="sc-head"><p class="muted u-m0">The components the pages of ${a.name} share.</p><a class="btn" href="?view=tree">${icon('list')} Tree view</a></div>
+        <div class="sc-grid">${sharedGroups(a.id).map((g) => html`<section class="region region-standard sc-group" aria-labelledby="sc-${g.key}">
+          <header class="region-header"><h2 id="sc-${g.key}">${icon(g.icon)} ${g.title}</h2></header>
+          <ul class="sc-links">${g.items.map((it) => html`<li><a href="${it.href}">${it.label}</a>${it.kind && counts[it.kind] !== undefined ? html`<span class="sc-count" aria-label="${counts[it.kind]} ${it.label}">${counts[it.kind]}</span>` : ''}</li>`)}</ul>
+        </section>`)}</div>`;
+      return send(reply, s, shell(s, 'Shared Components', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components']], main));
+    }
+    // (sprint 74) one component type: a searchable, sortable list with Create; a row opens its editor
+    if (type && SHARED.includes(type)) {
+      const spec = COMPONENTS[type];
+      const q = typeof req.query.q === 'string' ? req.query.q.trim().slice(0, 100) : '';
+      const desc = req.query.sort === 'desc';
+      const shown = rows[type]
+        .map((r) => ({ r, name: String(spec.summary(r)) }))
+        .filter((x) => !q || x.name.toLowerCase().includes(q.toLowerCase()))
+        .sort((x, y) => (desc ? -1 : 1) * x.name.localeCompare(y.name, 'en', { numeric: true }));
+      const main = html`${appHeader(a, 'shared')}
+        <div class="sc-list-head"><h1>${spec.plural}</h1><a class="btn btn-hot" href="?new=${type}">${icon('plus')} Create</a></div>
+        <form method="get" class="search u-mwnone u-mb1" role="search"><input type="hidden" name="type" value="${type}">
+          <div class="field"><label class="label" for="f_q">Search</label><input id="f_q" name="q" type="search" value="${q}" placeholder="Name" data-filter-rows="sc-rows"></div>
+          <button class="btn u-selfend">${icon('search')} Go</button></form>
+        <div class="table-wrap"><table class="report"><thead><tr>
+          <th scope="col" aria-sort="${desc ? 'descending' : 'ascending'}"><a href="?type=${type}${q ? `&q=${encodeURIComponent(q)}` : ''}${desc ? '' : '&sort=desc'}">Name ${desc ? '▼' : '▲'}</a></th>
+          <th scope="col">Details</th></tr></thead>
+          <tbody id="sc-rows">${shown.length
+            ? shown.map(({ r, name }) => html`<tr><td data-label="Name"><a href="?c=${type}-${r.id}">${icon(type === 'nav_entry' ? (r.icon ?? 'chevron') : spec.icon)} ${r.parent_id ? '↳ ' : ''}${name}</a></td>
+                <td data-label="Details">${detailOf(type, r)}</td></tr>`)
+            : html`<tr><td colspan="2" class="empty">${q ? 'Nothing matches.' : `No ${spec.plural.toLowerCase()} yet.`}</td></tr>`}</tbody></table></div>
+        <p class="muted">${shown.length} of ${rows[type].length}</p>`;
+      return send(reply, s, shell(s, spec.plural, [...crumbsBase, [spec.plural]], main));
+    }
     let editor: Raw;
     if (newKind && SHARED.includes(newKind)) {
       const spec = COMPONENTS[newKind];
@@ -153,7 +254,8 @@ export async function sharedRoutes(app: FastifyInstance) {
 
     const main = html`${appHeader(a, 'shared')}
       <div class="designer"><aside class="region region-standard">${tree}</aside><div>${editor}</div></div>`;
-    return send(reply, s, shell(s, 'Shared Components', [['App Builder', BASE], [a.name, `${BASE}/apps/${a.id}`], ['Shared Components']], main));
+    const kindShown = selKind && SHARED.includes(selKind) ? selKind : newKind && SHARED.includes(newKind) ? newKind : '';
+    return send(reply, s, shell(s, 'Shared Components', kindShown ? [...crumbsBase, [COMPONENTS[kindShown].plural, `${BASE}/apps/${a.id}/shared?type=${kindShown}`], [selKind ? 'Edit' : 'Create']] : [...crumbsBase.slice(0, 2), ['Shared Components']], main));
   });
 
   app.post(`${BASE}/apps/:id/shared/:kind/:cid?`, async (req: Req, reply) => {

package/src/builder/sql.ts

@@ -12,6 +12,7 @@ import { queryBuilderRoutes } from './querybuilder.ts';
 import { unloadRoutes } from './unload.ts';
 import { ddlToolRoutes } from './ddl-tools.ts';
 import { sqlUtilityRoutes } from './sql-utilities.ts';
+import { createTemplate, objectBrowserRoutes } from './object-browser.ts';
 import { currentWorkspace, sessionSchema, usableSchemas, workshopDb, workshopRunsAs } from './workspaces.ts';
 
 // SQL Workshop: SQL commands and the object browser (owner connection; an isolated
@@ -121,6 +122,16 @@ export async function sqlRoutes(app: FastifyInstance) {
       if (r) text = r.detail;
     }
     const schema = await sessionSchema(s, db);
+    if (req.method === 'GET') {
+      // (sprint 75) a statement to review: from the Object Browser's column actions, or a CREATE template
+      if (typeof s.state.__SQLDRAFT === 'string') {
+        text = s.state.__SQLDRAFT;
+        delete s.state.__SQLDRAFT;
+      } else if (typeof req.query?.template === 'string') {
+        const into = typeof req.query.schema === 'string' && (await usableSchemas(db)).includes(req.query.schema) ? req.query.schema : (schema ?? 'public');
+        text = createTemplate(req.query.template, into) ?? text;
+      }
+    }
     if (req.method === 'POST' && sql.trim()) {
       const started = performance.now();
       try {
@@ -173,69 +184,6 @@ export async function sqlRoutes(app: FastifyInstance) {
     return back(reply, s, `${BASE}/sql`);
   });
 
-  app.get(`${BASE}/sql/objects`, async (req: Req, reply) => {
-    const s = await developer(req, reply);
-    if (!s) return;
-    const db = await workshopDb(s);
-    const objects = (
-      await db.query(
-        `select n.nspname as schema, c.relname as name, c.oid::regclass::text as qname,
-                case c.relkind when 'r' then 'table' when 'p' then 'table' when 'v' then 'view' when 'm' then 'view' end as kind,
-                c.relrowsecurity as rls
-           from pg_class c join pg_namespace n on n.oid = c.relnamespace
-          where c.relkind in ('r', 'p', 'v', 'm') and n.nspname !~ '^pg_' and n.nspname not in ('information_schema')
-            and has_schema_privilege(n.oid, 'USAGE')
-         union all
-         select n.nspname, p.proname || '(' || pg_get_function_identity_arguments(p.oid) || ')', p.oid::regprocedure::text, 'function', false
-           from pg_proc p join pg_namespace n on n.oid = p.pronamespace
-          where n.nspname !~ '^pg_' and n.nspname not in ('information_schema') and p.prokind in ('f', 'p')
-            and has_schema_privilege(n.oid, 'USAGE')
-          order by 1, 4 desc, 2`,
-      )
-    ).rows;
-    const o = req.query.o;
-    const selected = objects.find((x) => x.qname === o);
-    let detail: Raw = html`<p class="muted">Select a table, view or function.</p>`;
-    if (selected) {
-      if (selected.kind === 'function') {
-        const src = await db.one('select pg_get_functiondef($1::regprocedure) as def', [selected.qname]);
-        detail = region(selected.qname, html`<pre class="source">${src.def}</pre>`);
-      } else {
-        const [cols, policies, grants, data] = await Promise.all([
-          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"
-               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`,
-            [selected.qname],
-          ),
-          db.query('select policyname as policy, cmd, roles::text, qual as using, with_check from pg_policies where schemaname = $1 and tablename = $2', [selected.schema, selected.name]),
-          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`,
-            [selected.schema, selected.name],
-          ),
-          db.pool.query({ text: `select * from ${selected.qname} limit 25`, rowMode: 'array' }).catch((e) => e as Error),
-        ]);
-        const asArray = (r: pg.QueryResult) => ({ ...r, rows: r.rows.map((x) => Object.values(x)) }) as unknown as pg.QueryResult<any[]>;
-        detail = html`${region(`${selected.kind === 'view' ? 'View' : 'Table'} ${selected.qname}`, resultTable(asArray(cols)),
-            html`<span class="count">${selected.rls ? 'row level security ON' : 'no RLS'}</span>`)}
-          <div class="u-spacer"></div>
-          ${region('Row level security policies', policies.rowCount ? resultTable(asArray(policies)) : html`<p class="muted">No policies.</p>`)}
-          <div class="u-spacer"></div>
-          ${region('Grants', resultTable(asArray(grants)))}
-          <div class="u-spacer"></div>
-          ${region('Data (first 25 rows)', data instanceof Error ? html`<div class="alert alert-error">${data.message}</div>` : resultTable(data))}`;
-      }
-    }
-    let lastSchema = '';
-    const list = html`<ul class="tree">${objects.map((x) => {
-      const header = x.schema !== lastSchema ? html`<li class="group">${(lastSchema = x.schema)}</li>` : '';
-      return html`${header}<li><a href="?o=${encodeURIComponent(x.qname)}"${x.qname === o ? raw(' aria-current="page"') : ''}>${icon(x.kind === 'function' ? 'code' : x.kind === 'view' ? 'layers' : 'table')}<span>${x.name}</span>${x.rls ? html`<span class="tag">RLS</span>` : ''}</a></li>`;
-    })}</ul>`;
-    const main = html`<h1 class="u-mb1">SQL Workshop</h1>${workshopTabs('objects')}
-      <div class="designer"><aside class="region region-standard" aria-label="Database objects">${list}</aside><div>${detail}</div></div>`;
-    return send(reply, s, shell(s, 'Object Browser', [['SQL Workshop', `${BASE}/sql`], ['Object Browser']], main, 'sql'));
-  });
-
+  // (sprint 75) the Object Browser: object-browser.ts
+  await app.register(objectBrowserRoutes);
 }

package/src/builder/ui.ts

@@ -100,6 +100,10 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
   const rail = (key: Section | 'search' | 'help', href: string, ic: string, label: string, extra: Raw | '' = '') =>
     html`<li><a href="${href}" class="rail-link" title="${label}"${section === key ? raw(' aria-current="page"') : ''}${extra}>${bicon(ic)}<span class="rail-label">${label}</span></a></li>`;
   const back = [...crumbs].reverse().find(([, href], i) => i > 0 && href);
+  // (sprint 74) the default-password warning: on the App Builder home and the Developers page only, until
+  // dismissed (for this sign-in); a dot on the avatar stays until the password is changed
+  const weak = !!s.state.__WEAK;
+  const weakBanner = weak && !s.state.__WEAK_HIDDEN && crumbs.length === 1 && (crumbs[0][0] === 'App Builder' || crumbs[0][0] === 'Developers');
   const themeButton = (t: BuilderTheme, ic: string, label: string) =>
     html`<button name="theme" value="${t}" aria-pressed="${theme === t ? 'true' : 'false'}">${bicon(ic)}<span>${label}</span></button>`;
   return documentShell(
@@ -143,9 +147,10 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
           </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>
+          <summary class="rail-avatar${weak ? ' has-dot' : ''}" title="${weak ? `${s.username}: change the default password` : s.username}"><span aria-hidden="true">${initials(s.username ?? '')}</span><span class="sr-only">Account: ${s.username}${weak ? ' (the default password: change it)' : ''}</span></summary>
           <div class="menu-panel">
             <div class="menu-section"><strong>${s.username}</strong><span class="muted small">Developer</span></div>
+            ${weak ? html`<div class="menu-section"><a class="weak-note" href="${BASE}/developers">${icon('alert')} You use the default password: change it</a></div>` : ''}
             ${workspaceMenu(s)}
             <div class="menu-section"><span class="small muted" id="theme-label">Builder theme</span>
               <form method="post" action="${BASE}/theme" class="segmented ide-theme" role="group" aria-labelledby="theme-label">${csrf(s)}
@@ -166,8 +171,9 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
         <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>` : ''}
+      ${weakBanner || ok || err ? html`<div class="ide-alerts">
+        ${weakBanner ? html`<div class="alert alert-error alert-dismissible" role="alert"><span>You signed in with the default password. <a href="${BASE}/developers">Change it now.</a></span>
+          <form method="post" action="${BASE}/weak/dismiss">${csrf(s)}<button class="link-button" aria-label="Dismiss until the next sign-in" title="Dismiss until the next sign-in">${icon('close')}</button></form></div>` : ''}
         ${ok ? html`<div class="alert alert-success" role="status">${ok}</div>` : ''}
         ${err ? html`<div class="alert alert-error" role="alert">${err}</div>` : ''}
       </div>` : ''}
@@ -243,9 +249,18 @@ export type WorkshopTab = 'home' | 'sql' | 'scripts' | 'quicksql' | 'query' | 'o
 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('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')}${tab('utilities', '/sql/utilities', 'wrench', 'Utilities')}</nav>`;
+  // (sprint 75) the main tools as tabs, the others in a More menu (the open one is a tab too), so the strip never scrolls
+  const more: [WorkshopTab, string, string, string][] = [
+    ['quicksql', '/sql/quick', 'bolt', 'Quick SQL'], ['query', '/sql/query', 'filter', 'Query Builder'], ['load', '/sql/load', 'upload', 'Load Data'],
+    ['unload', '/sql/unload', 'download', 'Unload Data'], ['sample', '/sql/sample-data', 'layers', 'Sample Data'], ['ddl', '/sql/ddl', 'file', 'DDL'],
+    ['compare', '/sql/compare', 'layers', 'Compare'], ['ai', '/sql/ai', 'bolt', 'AI'],
+  ];
+  const open = more.find(([k]) => k === active);
+  return html`<nav class="ide-tabs sw-tabs u-mb1" aria-label="SQL Workshop">
+    ${tab('home', '/sql', 'home', 'Home')}${tab('objects', '/sql/objects', 'database', 'Object Browser')}${tab('sql', '/sql/commands', 'code', 'SQL Commands')}${tab('scripts', '/sql/scripts', 'file', 'SQL Scripts')}${tab('utilities', '/sql/utilities', 'wrench', 'Utilities')}
+    ${open ? tab(...open) : ''}
+    <details class="menu sw-more"><summary class="ide-tab">${icon('chevron-down')}<span>More</span></summary>
+      <div class="menu-panel align-right"><div class="menu-section menu-links">${more.map(([k, href, ic, label]) => html`<a href="${BASE}${href}"${k === active ? raw(' aria-current="page"') : ''}>${icon(ic)} ${label}</a>`)}</div></div></details></nav>`;
 };
 
 /** Number of app tile colours (.app-color-0 … -7 in app.css). */