pgkiln 0.87.0 → 0.89.0

package/public/sw.js

@@ -4,6 +4,8 @@
 //   (offline, the cached copy of another version)
 //   pages (navigations): network first; offline, the cached copy (only when the app keeps pages) or the offline page
 //   signing in or out empties the page cache, so the next person on the device doesn't see them
+//   (168) with prefetchHours: the pages app.js hands over (the navigation's) are fetched one by one and kept, again
+//   when the copies are older than prefetchHours (a stamp in the page cache, so a sign-in starts over)
 //   push notifications (migration 074): shown as they arrive, a click opens their page of the app;
 //   signing out turns them off on this device
 /* global PGKILN */
@@ -77,10 +79,58 @@ self.addEventListener('message', (event) => {
     caches
       .open(PAGES)
       .then((c) => c.keys())
-      .then((keys) => event.source.postMessage({ type: 'pgkiln:pages', pages: keys.map((k) => k.url) }));
+      .then((keys) => event.source.postMessage({ type: 'pgkiln:pages', pages: keys.map((k) => k.url).filter((u) => new URL(u).pathname !== STAMP) }));
   }
+  if (event.data && event.data.type === 'pgkiln:prefetch' && Array.isArray(event.data.urls)) event.waitUntil(prefetchPages(event.data.urls));
 });
 
+// ------------------------------------------------------------------ every page offline (168, PGKILN.prefetchHours)
+// The server answers a request with X-Pgkiln-Prefetch read-only, keeps no session state, and refuses (409) pages
+// that run processes when they open; only 200 pages are kept. One page at a time, a short pause between them;
+// the stamp is written when the list is done, so a list cut short by the network is tried again next time.
+const STAMP = `${PGKILN.base}/__prefetched`;
+const MAX_PREFETCH = 60;
+let prefetching = false;
+async function prefetchPages(urls) {
+  if (!PGKILN.offlinePages || !PGKILN.prefetchHours || prefetching) return;
+  prefetching = true;
+  try {
+    const cache = await caches.open(PAGES);
+    const stamp = await cache.match(STAMP);
+    if (stamp && Date.now() - Number(await stamp.text()) < PGKILN.prefetchHours * 3600 * 1000) return;
+    const seen = new Set();
+    let kept = 0;
+    for (const u of urls) {
+      if (seen.size >= MAX_PREFETCH) break;
+      let url;
+      try {
+        url = new URL(u, self.location.origin);
+      } catch {
+        continue;
+      }
+      url.hash = '';
+      if (url.origin !== self.location.origin || !url.pathname.startsWith(`${PGKILN.base}/`) || signInOrOut(url) || seen.has(url.href)) continue;
+      seen.add(url.href);
+      let res;
+      try {
+        res = await fetch(url.href, { credentials: 'same-origin', redirect: 'manual', headers: { 'X-Pgkiln-Prefetch': '1' } });
+      } catch {
+        return; // offline: again on the next page
+      }
+      if (res.status === 200 && (res.headers.get('content-type') || '').startsWith('text/html')) {
+        await cache.put(new Request(url.href), res);
+        kept++;
+      }
+      await new Promise((r) => setTimeout(r, 150));
+    }
+    if (!seen.size) return;
+    await cache.put(STAMP, new Response(String(Date.now())));
+    for (const c of await self.clients.matchAll({ type: 'window' })) c.postMessage({ type: 'pgkiln:prefetched', kept });
+  } finally {
+    prefetching = false;
+  }
+}
+
 // ------------------------------------------------------------------ offline form queue (PGKILN.offlineSubmit)
 // A form posted while the network is down is kept on the device (IndexedDB, files included) and the
 // browser shows the page again with ?queued=1. It is sent later (on "online", when a page of the app

package/public/worksheet.css

@@ -3,7 +3,7 @@
    screens: navigator | editor over output tabs, filling the window, with a status bar at the bottom. */
 .ws-page { display: flex; flex-direction: column; padding: 8px 10px 0; background: var(--bg); }
 .ws-page > .sw-tabs { margin-bottom: 6px; }
-.ws { --ws-nav: 280px; --ws-out: 42vh; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface);
+.ws { --ws-nav: 280px; --ws-out: 45%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface);
   border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
 .ws-default { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); border: 0; padding: 0; }
 .ws-nav { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); }
@@ -32,7 +32,7 @@
 .ws-obj-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 10px 8px 34px; }
 .ws-obj-actions .btn { font-size: 11px; padding: 1px 6px; }
 
-.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
+.ws-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; container-type: inline-size; }
 .ws-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
 .ws-toolbar .btn { display: inline-flex; align-items: center; gap: 4px; }
 .ws-toolbar .icon { width: 15px; height: 15px; }
@@ -99,12 +99,16 @@
   .js .ide-full .ws-editor .ce { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; border: 0; border-radius: 0; }
   .js .ide-full .ws-editor .ce-main { min-height: 0; }
   .js .ide-full .ws-editor .ce textarea.ce-input { height: 100%; min-height: 0; resize: none; }
-  .js .ide-full .ws-output { flex: 0 0 var(--ws-out); }
+  .js .ide-full .ws-output { flex: 0 1 var(--ws-out); }
+  /* (UX-1) the editor keeps at least ten lines; an empty output is only its tab strip until a run */
+  .js .ide-full .ws-editor { min-height: 13.5rem; }
+  .js .ide-full .ws-output[data-empty] { flex: 0 0 auto; }
+  .js .ide-full .ws-output[data-empty] .ws-pane { display: none; }
   .js .ide-full .ws-pane { flex: 1 1 auto; }
   .js .ide-full .ws-nav { overflow: hidden; }
 }
 @media (max-width: 899px) {
-  .ws-toolbar .btn span:not(.sr-only) { display: none; }
+  .ws-toolbar .btn span:not(.sr-only):not(.ws-dots) { display: none; }
   .ws-toolbar .btn-hot span:not(.sr-only) { display: inline; }
 }
 /* fullscreen: only the editor and its toolbar */
@@ -299,3 +303,34 @@ details.menu.obj-menu > summary::before, details.menu.obj-menu > summary::after
 .ws-txn-badge[data-state="open"] { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 10%, transparent); font-weight: 600; }
 .ws-txn-badge[data-state="aborted"] { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); font-weight: 600; }
 .ws-txn-alert { margin: 6px 8px; }
+
+/* (UX-1) one toolbar row: the run buttons, Suggest / Check, Commit mode, fullscreen and a ⋯ menu with the rest */
+/* it fits on one row; an open transaction (badge, Commit, Rollback) may take a second one */
+.ws-toolbar > * { flex: none; }
+/* the commit mode's options name it (Autocommit / Transaction): no label beside the select */
+.ws-toolbar .ws-txn .ws-runas > span { display: none; }
+@container (max-width: 950px) {
+  .ws-toolbar .btn:not(.btn-hot) > span:not(.sr-only):not(.ws-dots) { display: none; }
+}
+@container (max-width: 640px) {
+  .ws-toolbar > * { flex: 0 1 auto; min-width: 0; }
+  .ws-toolbar .ws-txn { flex-wrap: wrap; }
+}
+.ws-more .menu-panel { min-width: 18rem; max-height: calc(100dvh - 190px); overflow: auto; }
+/* with script the worksheet tabs name the file: the file menu is its icon */
+.js .ws-toolbar .ws-file-name { display: none; }
+.ws-more-tools { display: flex; flex-direction: column; gap: 2px; }
+.ws-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: none;
+  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
+.ws-menu-item:hover, .ws-menu-item:focus-visible { background: var(--surface-2); }
+.ws-menu-item .icon { width: 15px; height: 15px; }
+.ws-menu-item kbd { margin-left: auto; font-size: 11.5px; color: var(--muted); }
+.ws-more-tools .ws-check { padding: 6px 8px; }
+.ws-more-head { display: block; margin-bottom: 4px; }
+/* the code editor's hint bar under the editor: only while it has something to say (Check's result) */
+.ws-editor .ce-bar:not(:has(.ce-msg:not(:empty))) { display: none; }
+.ws-editor .ce-bar :is(.ce-hint, .ce-suggest, .ce-check) { display: none; }
+/* (UX-1) who the statements run as: a chip at the right of the status bar */
+.ws-status-run { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
+.ws-runas-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; }
+.ws-runas-chip select { padding: 1px 22px 1px 6px; min-height: 0; font-size: 12.5px; }

package/public/worksheet.js

@@ -104,11 +104,15 @@
     out.dataset.active = key;
   };
   show(out.dataset.active || 'result');
+  // (UX-1) before a run the output is only its tab strip; choosing a tab opens it
   out.querySelector('[role=tablist]').addEventListener('click', (e) => {
     const t = e.target.closest('[role=tab]');
-    if (t) show(t.dataset.wsTab);
+    if (!t) return;
+    delete out.dataset.empty;
+    show(t.dataset.wsTab);
   });
   out.querySelector('[role=tablist]').addEventListener('keydown', (e) => {
+    delete out.dataset.empty;
     const k = tabs.findIndex((t) => t.getAttribute('aria-selected') === 'true');
     const next = { ArrowRight: k + 1, ArrowLeft: k - 1, Home: 0, End: tabs.length - 1 }[e.key];
     if (next === undefined) return;
@@ -552,6 +556,16 @@
     (k === 'h' ? fr : k === 'g' ? bar.querySelector('[data-ws-goto]') : fq).focus();
   };
   form.querySelector('[data-ws-find]').addEventListener('click', () => openFind('f'));
+  // (UX-1) Suggest and Check in the toolbar: the code editor's own buttons (its bar below the editor stays hidden
+  // until it has a message, such as Check's result)
+  const ceButton = (cls) => form.querySelector(`.ws-editor .${cls}`);
+  for (const [attr, cls] of [['data-ws-suggest', 'ce-suggest'], ['data-ws-check', 'ce-check']]) {
+    const btn = form.querySelector(`[${attr}]`);
+    btn?.addEventListener('click', () => ceButton(cls)?.click());
+    const sync = () => { if (btn) btn.hidden = !ceButton(cls) || ceButton(cls).hidden; };
+    sync();
+    window.addEventListener('load', sync);
+  }
   form.querySelector('[data-ws-format]').addEventListener('click', format);
   form.querySelector('[data-ws-case]').addEventListener('click', convertCase);
   bar.addEventListener('keydown', (e) => {

package/src/builder/designer.ts

@@ -123,7 +123,7 @@ export async function designerRoutes(app: FastifyInstance) {
     // (sprint 90) a commented-out component: struck through in the tree, Uncomment in its menu
     const commented = (r: any) => (r.build_option === 'COMMENTED_OUT' ? raw(' data-commented') : '');
     const leaf = (k: string, r: any, ic: Raw | '', label: string, note = '') =>
-      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
+      html`<li><a class="pd-node" href="${url(`c=${k}-${r.id}`)}"${cur(`${k}-${r.id}`)} data-kind="${k}" data-id="${r.id}" title="${note ? `${label} (${note})` : label}"${commented(r)}>${ic}<span class="pd-label">${label}</span>${badges(r)}${note ? html`<span class="pd-note">${note}</span>` : ''}</a></li>`;
     const folder = (label: string, children: Raw[] | Raw, open = true) =>
       html`<li${open ? '' : raw(' data-collapsed')}><span class="pd-node pd-folder"><span class="pd-label">${label}</span></span><ul>${children}</ul></li>`;
     const none = (text: string) => html`<li class="pd-empty">${text}</li>`;
@@ -136,7 +136,7 @@ export async function designerRoutes(app: FastifyInstance) {
       const bySlot = ['region', ...TOP_SLOTS, ...BOTTOM_SLOTS].map((sl) => [sl, buttons.filter((b) => (b.slot ?? 'region') === sl)] as const).filter(([, list]) => list.length);
       const kids = [...(items.length ? [folder(tx('pd.tree.items'), items.map(itemLeaf))] : []),
         ...bySlot.map(([sl, list]) => folder(sl === 'region' ? tx('pd.tree.buttons') : tx('pd.tree.buttons_at', { slot: slotLabel(sl) }), list.map(buttonLeaf)))];
-      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
+      return html`<li><a class="pd-node" href="${url(`c=region-${r.id}`)}"${cur(`region-${r.id}`)} data-kind="region" data-id="${r.id}" data-position="${r.position ?? ''}" data-next="${next?.id ?? ''}" title="${regionTitle(r)} (${r.type})"${commented(r)}>${bicon(regionIcon(r.type))}<span class="pd-label">${regionTitle(r)}</span>${badges(r)}<span class="pd-note">${r.type}</span></a>${kids.length ? html`<ul>${kids}</ul>` : ''}</li>`;
     };
     // (sprint 77, APEX: the rendering tree by display position) the page template's positions, and others in use
     const treeSide = p.page_template === 'left_side_column' ? 'left' : p.page_template === 'right_side_column' ? 'right' : null;

package/src/builder/gallery.ts

@@ -9,7 +9,7 @@ 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 { back, BASE, csrf, developer, flash, pageHeader, send, shell, type Req } from './ui.ts';
 import { currentWorkspace, inWorkspaceSql, placeApp } from './workspaces.ts';
 import { workspacesChanged } from '../workspace-db.ts';
 import { scopedTx as tx, type BuilderKey } from './i18n.ts';
@@ -104,7 +104,7 @@ export async function galleryRoutes(app: FastifyInstance) {
     const tabs = html`<nav class="gal-tabs segmented" aria-label="${tx('gal.kinds')}">${TABS.map(([t, l]) =>
       html`<a href="${BASE}/gallery?tab=${t}${q ? `&q=${encodeURIComponent(q)}` : ''}"${tab === t ? raw(' aria-current="page"') : ''}>${tx(l)} <span class="gal-count">${counts[t]}</span></a>`)}</nav>`;
     const blueprintCard = (kind: 'starters' | 'utilities') => (x: Starter) => card(x.icon, x.title, 'pgkiln', x.description,
-      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm">${tx('gal.install')}</button></form>`);
+      html`<form method="post" action="${BASE}/gallery/${kind}/${x.key}">${csrf(s)}<button class="btn btn-sm">${tx('gal.install')}</button></form>`);
     const cards =
       tab === 'samples'
         ? samples.filter(matches).map((x) => {
@@ -115,13 +115,13 @@ export async function galleryRoutes(app: FastifyInstance) {
                     ? html`<a class="btn btn-sm" href="${BASE}/apps/${it.id}">${tx('gal.edit')}</a>`
                     : html`<span class="muted small">${tx('gal.other_workspace')}</span>`}`
                 : admin
-                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-hot btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
+                  ? html`<form method="post" action="${BASE}/gallery/samples/${x.key}">${csrf(s)}<button class="btn btn-sm" data-confirm="${tx('gal.confirm_install', { title: x.title })}">${tx('gal.install')}</button></form>`
                   : html`<span class="muted small">${tx('gal.admin_installs')}</span>`);
           })
         : tab === 'starters' || tab === 'utilities'
           ? (tab === 'starters' ? starters : utilities).filter(matches).map(blueprintCard(tab))
           : custom.filter(matches).map((x) => card('copy', x.name, tx('gal.this_workspace'), x.description ?? tx('gal.boilerplate_desc'),
-              html`<a class="btn btn-hot btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
+              html`<a class="btn btn-sm" href="${BASE}/create?boilerplate=${x.id}">${tx('gal.create_from')}</a><a class="btn btn-sm" href="${BASE}/apps/${x.id}">${tx('gal.edit')}</a>`));
     const empty = q && counts[tab]
       ? html`<p class="muted">${tx.rich('gal.no_match', { q: html`<strong>${q}</strong>` })} <a href="${BASE}/gallery?tab=${tab}">${tx('gal.show_all')}</a></p>`
       : tab === 'custom'
@@ -129,13 +129,13 @@ export async function galleryRoutes(app: FastifyInstance) {
         : html`<p class="muted">${tx('gal.empty')}</p>`;
     const intro = tx(({ samples: 'gal.intro.samples', starters: 'gal.intro.starters', utilities: 'gal.intro.utilities', custom: 'gal.intro.custom' } as const)[tab]);
     const main = html`<div class="gal">
+      ${pageHeader(tx('rail.gallery'))}
       <div class="gal-bar">
         <form class="ab-search gal-search" role="search" method="get" action="${BASE}/gallery"><label class="sr-only" for="gal-q">${tx('gal.search')}</label>${icon('search')}
           <input type="hidden" name="tab" value="${tab}">
           <input id="gal-q" name="q" type="search" placeholder="${tx('gal.search')}" autocomplete="off" value="${q}" data-filter-list=".gal [data-filter-row]"></form>
         ${tabs}
       </div>
-      <h1 class="sr-only">${tx('rail.gallery')}</h1>
       <p class="muted">${intro}</p>
       ${cards.length ? html`<div class="gal-grid">${cards}</div>` : empty}
     </div>`;

package/src/builder/home.ts

@@ -2,7 +2,7 @@ import type { FastifyInstance, FastifyReply } from 'fastify';
 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, send, shell, type Req } from './ui.ts';
+import { APP_COLORS, BASE, csrf, developer, input, pageHeader, region, send, shell, type Req } from './ui.ts';
 import { crossAppLinks } from './cross-app.ts';
 import type { Session } from '../session.ts';
 import { isAdmin } from './locks.ts';
@@ -53,16 +53,6 @@ const lockedText = (tx: BuilderTranslate, by: string) => tx('ab.locked_by', { us
 const appIcon = (a: { id: number; name: string }, cls = '') =>
   html`<span class="app-icon app-color-${a.id % APP_COLORS}${cls ? ` ${cls}` : ''}" aria-hidden="true">${a.name.slice(0, 1).toUpperCase()}</span>`;
 
-/** The four tiles at the top of the App Builder. */
-const tiles = (tx: BuilderTranslate) => html`<nav class="ab-tiles" aria-label="${tx('rail.app_builder')}">
-  ${([
-    ['create', 'plus', tx('ab.tile.create'), tx('ab.tile.create_text')],
-    ['import', 'upload', tx('ab.tile.import'), tx('ab.tile.import_text')],
-    ['dashboard', 'activity', tx('ab.tile.dashboard'), tx('ab.tile.dashboard_text')],
-    ['utilities', 'settings', tx('ab.tile.utilities'), tx('ab.tile.utilities_text')],
-  ] as const).map(([path, ic, title, text]) => html`<a class="ab-tile" href="${BASE}/${path}"><span class="ab-tile-icon">${icon(ic)}</span><strong>${title}</strong><span>${text}</span></a>`)}
-</nav>`;
-
 /** The side column: About, Recent, Tasks. */
 function aside(tx: BuilderTranslate, recent: { id: number; name: string }[], about: string, tasks: [string, string][]) {
   return html`<aside class="ab-side" aria-label="${tx('ab.aside')}">
@@ -73,10 +63,9 @@ function aside(tx: BuilderTranslate, recent: { id: number; name: string }[], abo
   </aside>`;
 }
 
+// (UX-5) what the header doesn't offer already (Create and Import are there)
 const TASKS: [BuilderKey, string][] = [
-  ['ab.task.create', `${BASE}/create`],
   ['ab.task.create_file', `${BASE}/create/file`],
-  ['ab.task.import', `${BASE}/import`],
   ['ab.task.users', `${BASE}/users`],
   ['ab.task.providers', `${BASE}/users/providers`],
   ['rail.sql_workshop', `${BASE}/sql`],
@@ -174,9 +163,13 @@ export async function homeRoutes(app: FastifyInstance) {
       html`<a class="tb-btn" href="${link({ view: v })}" title="${label}"${view === v ? raw(' aria-current="true"') : ''}>${icon(ic)}<span class="sr-only">${label}</span></a>`;
     const main = html`<div class="ab-home">
       <div class="ab-main">
-        <h1 class="sr-only">${tx('rail.app_builder')}</h1>
+        ${pageHeader(tx('rail.app_builder'), {
+          primary: [`${BASE}/create`, tx('ab.tile.create'), 'plus'],
+          secondary: [[`${BASE}/import`, tx('ab.tile.import'), 'upload']],
+          more: [[`${BASE}/dashboard`, tx('ab.tile.dashboard'), 'activity'], [`${BASE}/utilities`, tx('rail.admin'), 'settings']],
+          moreLabel: tx('ws.more'),
+        })}
         ${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(tx)}
         <div class="ab-toolbar">
           <form class="ab-search" method="get" action="${BASE}/apps" role="search">
             <label class="sr-only" for="ab-q">${tx('ab.search_label')}</label>${icon('search')}
@@ -190,13 +183,8 @@ export async function homeRoutes(app: FastifyInstance) {
             <div class="menu-panel" role="menu">
               <div class="menu-section"><span class="small muted">${tx('ab.sort_by')}</span>
                 ${(Object.keys(SORTS) as Sort[]).map((k) => html`<a role="menuitem" href="${link({ sort: k })}"${sort === k ? raw(' aria-current="true"') : ''}>${tx(`ab.sort.${k}`)}</a>`)}</div>
-              <div class="menu-section menu-links">
-                <a role="menuitem" href="${BASE}/import">${icon('upload')} ${tx('ab.task.import')}</a>
-                <a role="menuitem" href="${BASE}/dashboard">${icon('activity')} ${tx('ab.ws_dashboard')}</a>
-              </div>
             </div></details>
           <span class="ab-count muted" aria-live="polite">${rows.length === total.n ? tx(total.n === 1 ? 'ab.count_one' : 'ab.count', { n: total.n }) : tx('ab.count_of', { n: rows.length, total: total.n })}</span>
-          <a class="btn btn-hot ab-create" href="${BASE}/create">${tx('ab.tile.create')}</a>
         </div>
         ${list}
       </div>
@@ -271,49 +259,72 @@ export async function homeRoutes(app: FastifyInstance) {
   });
 
   // ---------------------------------------------------------------- workspace utilities
+  // (UX-4) Administration: the workspace utilities in sections, with a filter; the rail's Administration entry (UX-3)
   app.get(`${BASE}/utilities`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s) return;
     const tx = tr(s);
-    const card = (href: string, ic: Raw | '', title: string, text: string | Raw) =>
-      html`<a class="ab-tile" href="${href}"><span class="ab-tile-icon">${ic}</span><strong>${title}</strong><span>${text}</span></a>`;
-    const main = html`<div class="ab-home"><div class="ab-main"><h1 class="u-mb1">${tx('wu.title')}</h1>
-      <div class="ab-tiles ab-tiles-wrap">
-        ${card(`${BASE}/users`, icon('user'), tx('wu.users'), tx('wu.users_text'))}
-        ${card(`${BASE}/app-groups`, icon('folder'), tx('wu.app_groups'), tx('wu.app_groups_text'))}
-        ${card(`${BASE}/gallery`, icon('package'), tx('wu.gallery'), tx('wu.gallery_text'))}
-        ${card(`${BASE}/users/providers`, icon('key'), tx('wu.providers'), tx('wu.providers_text'))}
-        ${card(`${BASE}/users/directories`, icon('org'), tx('wu.ldap'), tx('wu.ldap_text'))}
-        ${card(`${BASE}/users#account-settings`, icon('shield'), tx('wu.password_policy'), tx('wu.password_policy_text'))}
-        ${card(`${BASE}/developers`, icon('users'), tx('wu.developers'), tx('wu.developers_text'))}
-        ${s.workspace?.sql_workshop === false ? '' : card(`${BASE}/sql`, icon('database'), tx('wu.sql'), tx('wu.sql_text'))}
-        ${card(`${BASE}/backups`, icon('archive'), tx('wu.backups'), tx('wu.backups_text'))}
-        ${card(`${BASE}/workspace-files`, icon('file'), tx('wu.files'), tx('wu.files_text', { tag: '#WORKSPACE_FILES#' }))}
-        ${card(`${BASE}/remote-servers`, icon('server'), tx('wu.servers'), tx('wu.servers_text'))}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/remote-databases`, icon('database'), tx('wu.remote_dbs'), tx('wu.remote_dbs_text')) : ''}
-        ${card(`${BASE}/workspace-credentials`, icon('key'), tx('wu.credentials'), tx('wu.credentials_text'))}
-        ${card(`${BASE}/rest-catalogs`, icon('globe'), tx('wu.catalogs'), tx('wu.catalogs_text'))}
-        ${s.workspace?.admin ? card(`${BASE}/workspace-export`, icon('download'), tx('wu.export'), tx('wu.export_text')) : ''}
-        ${card(`${BASE}/dashboard`, icon('activity'), tx('wu.dashboard'), tx('wu.dashboard_text'))}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/instance`, icon('settings'), tx('wu.instance'), tx('wu.instance_text')) : ''}
-        ${(await isAdmin(s.username))
-          ? card(`${BASE}/workspaces`, icon('layers'), tx('wu.workspaces'), tx('wu.workspaces_text'))
-          : s.workspace && (await workspaceAdmin(s.username, s.workspace.id))
-            ? card(`${BASE}/workspaces/${s.workspace.id}`, icon('layers'), tx('wu.workspace', { name: s.workspace.name }), tx('wu.workspace_text'))
-            : ''}
-        ${card(`${BASE}/ui-defaults`, icon('sliders-horizontal'), tx('wu.ui_defaults'), tx('wu.ui_defaults_text'))}
-        ${card(`${BASE}/icons`, icon('image'), tx('wu.icons'), tx('wu.icons_text'))}
-        ${card(`${BASE}/vector-providers`, icon('search'), tx('wu.vectors'), tx('wu.vectors_text'))}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/ai`, icon('bolt'), tx('wu.ai'), tx('wu.ai_text')) : ''}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/mail`, icon('send'), tx('wu.mail'), tx('wu.mail_text')) : ''}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/telemetry`, icon('activity'), tx('wu.otel'), tx('wu.otel_text')) : ''}
-        ${(await isAdmin(s.username)) ? card(`${BASE}/installation`, icon('history'), tx('wu.installation'), tx('wu.installation_text')) : ''}
-      </div></div>
-      <aside class="ab-side" aria-label="${tx('wu.side')}">
-        <section><h2>${tx('wu.about')}</h2><p>${tx('wu.about_text')}</p>
-          <a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#workspaces" target="_blank" rel="noopener">${tx('wu.learn_more')}</a></section>
-        <section><h2>${tx('wu.cross_app')}</h2><ul class="ab-links ab-tasks">${crossAppLinks()}</ul></section>
-      </aside></div>`;
-    return send(reply, s, shell(s, tx('wu.title'), [[tx('rail.app_builder'), BASE], [tx('wu.title')]], main));
+    const admin = await isAdmin(s.username);
+    const wsAdmin = !!s.workspace?.admin || (!!s.workspace && (await workspaceAdmin(s.username, s.workspace.id)));
+    const ws = s.workspace;
+    type Tile = [href: string, ic: string, title: string, text: string | Raw] | null;
+    const tile = (t: Tile) =>
+      t ? html`<li><a class="adm-tile" href="${t[0]}"><span class="adm-tile-head">${icon(t[1])}<strong>${t[2]}</strong></span>${t[3] ? html`<span class="adm-tile-text">${t[3]}</span>` : ''}</a></li>` : '';
+    const section = (id: string, title: string, tiles: Tile[]) => {
+      const shown = tiles.filter(Boolean);
+      return shown.length ? html`<section class="adm-section" aria-labelledby="adm-${id}"><h2 id="adm-${id}">${title}</h2><ul class="adm-tiles">${shown.map(tile)}</ul></section>` : '';
+    };
+    const main = html`<div class="adm">
+      <div class="title-row"><h1>${tx('rail.admin')}</h1>
+        <div class="adm-filter" hidden><label class="sr-only" for="adm-q">${tx('wu.filter')}</label>
+          <input id="adm-q" type="search" placeholder="${tx('wu.filter')}" autocomplete="off" data-adm-filter></div></div>
+      <p class="u-mt0 adm-lede"><a href="https://github.com/pgkiln/pgkiln/blob/main/docs/guide/03-builder.md#workspaces" target="_blank" rel="noopener">${tx('wu.learn_more')}</a></p>
+      ${section('people', tx('wu.sec.people'), [
+        [`${BASE}/users`, 'user', tx('wu.users'), tx('wu.users_text')],
+        [`${BASE}/developers`, 'users', tx('wu.developers'), tx('wu.developers_text')],
+        [`${BASE}/users/providers`, 'key', tx('wu.providers'), tx('wu.providers_text')],
+        [`${BASE}/users/directories`, 'org', tx('wu.ldap'), tx('wu.ldap_text')],
+        [`${BASE}/users#account-settings`, 'shield', tx('wu.password_policy'), tx('wu.password_policy_text')],
+      ])}
+      ${section('connections', tx('wu.sec.connections'), [
+        [`${BASE}/remote-servers`, 'server', tx('wu.servers'), tx('wu.servers_text')],
+        admin ? [`${BASE}/remote-databases`, 'database', tx('wu.remote_dbs'), tx('wu.remote_dbs_text')] : null,
+        [`${BASE}/workspace-credentials`, 'key', tx('wu.credentials'), tx('wu.credentials_text')],
+        [`${BASE}/rest-catalogs`, 'globe', tx('wu.catalogs'), tx('wu.catalogs_text')],
+        admin ? [`${BASE}/mail`, 'send', tx('wu.mail'), tx('wu.mail_text')] : null,
+        wsAdmin ? [`${BASE}/mail-queue`, 'inbox', tx('admin.mail_queue'), ''] : null,
+        wsAdmin ? [`${BASE}/network`, 'globe', tx('admin.network'), ''] : null,
+      ])}
+      ${section('data', tx('wu.sec.data'), [
+        admin ? [`${BASE}/ai`, 'bolt', tx('wu.ai'), tx('wu.ai_text')] : null,
+        [`${BASE}/vector-providers`, 'search', tx('wu.vectors'), tx('wu.vectors_text')],
+        [`${BASE}/ui-defaults`, 'sliders-horizontal', tx('wu.ui_defaults'), tx('wu.ui_defaults_text')],
+        [`${BASE}/workspace-files`, 'file', tx('wu.files'), tx('wu.files_text', { tag: '#WORKSPACE_FILES#' })],
+        [`${BASE}/icons`, 'image', tx('wu.icons'), tx('wu.icons_text')],
+      ])}
+      ${section('operations', tx('wu.sec.operations'), [
+        [`${BASE}/app-groups`, 'folder', tx('wu.app_groups'), tx('wu.app_groups_text')],
+        [`${BASE}/backups`, 'archive', tx('wu.backups'), tx('wu.backups_text')],
+        wsAdmin ? [`${BASE}/workspace-export`, 'download', tx('wu.export'), tx('wu.export_text')] : null,
+        [`${BASE}/dashboard`, 'activity', tx('wu.dashboard'), tx('wu.dashboard_text')],
+        admin ? [`${BASE}/telemetry`, 'activity', tx('wu.otel'), tx('wu.otel_text')] : null,
+      ])}
+      ${ws && wsAdmin ? section('workspace', tx('wu.sec.workspace', { name: ws.name }), [
+        [`${BASE}/workspaces/${ws.id}`, 'layers', tx('admin.ws_devs'), tx('wu.workspace_text')],
+        [`${BASE}/workspaces/${ws.id}#service`, 'bell', tx('admin.ws_message'), ''],
+        [`${BASE}/workspaces/${ws.id}#preferences`, 'sliders-horizontal', tx('admin.ws_prefs'), ''],
+        [`${BASE}/workspaces/${ws.id}#links`, 'external-link', tx('admin.ext_links'), ''],
+        [`${BASE}/workspaces/${ws.id}/utilization`, 'chart', tx('admin.utilization'), ''],
+      ]) : ''}
+      ${admin ? section('instance', tx('wu.sec.instance'), [
+        [`${BASE}/instance`, 'settings', tx('wu.instance'), tx('wu.instance_text')],
+        [`${BASE}/workspaces`, 'layers', tx('wu.workspaces'), tx('wu.workspaces_text')],
+        s.instanceAdmin ? [`${BASE}/db-users`, 'key', tx('admin.db_users'), ''] : null,
+        [`${BASE}/installation`, 'history', tx('wu.installation'), tx('wu.installation_text')],
+      ]) : ''}
+      <section class="adm-section" aria-labelledby="adm-reports"><h2 id="adm-reports">${tx('wu.cross_app')}</h2><ul class="ab-links ab-tasks adm-reports">${crossAppLinks()}</ul></section>
+      <p class="adm-none muted" hidden>${tx('wu.filter_none')}</p>
+    </div>`;
+    return send(reply, s, shell(s, tx('rail.admin'), [[tx('rail.admin')]], main));
   });
 }

package/src/builder/i18n/de.ts

@@ -7510,4 +7510,32 @@ export const de: BuilderMessages = {
   'pjb.steps': 'Schritte',
   'pjb.message': 'Meldung',
   'pjb.no_runs': 'Noch keine Ausführungen.',
+  // ------------------------------------------------------------ PWA: every page offline (sprint 168)
+  'pwa.prefetch': 'Alle Seiten der Navigation nach der Anmeldung offline verfügbar machen',
+  'pwa.prefetch_help': 'Erfordert „Besuchte Seiten behalten“. Nach einer Anmeldung und auf der ersten auf einem Gerät geöffneten Seite lädt das Gerät nacheinander alle Seiten des Navigationsmenüs und der Navigationsleiste, die der Benutzer öffnen darf. Der Server zeigt sie schreibgeschützt: Seiten, die beim Öffnen Prozesse ausführen, werden ausgelassen und erst gespeichert, wenn der Benutzer sie öffnet.',
+  'pwa.prefetch_hours': 'Erneut laden nach (Stunden)',
+  'pwa.prefetch_hours_help': '1 bis 168. Die Seiten werden nach dieser Zeit beim ersten Seitenaufruf erneut geladen, sofern eine Verbindung besteht.',
+  'pwa.prefetch_hours_range': 'Erneut laden nach: eine ganze Zahl von Stunden zwischen 1 und 168.',
+  // ------------------------------------------------------------ SQL Worksheet: one toolbar row (UX-1)
+  'ws.more': 'Weitere Aktionen',
+  'ws.suggest': 'Vorschläge',
+  'ws.suggest_title': 'Vorschläge an der Cursorposition (Strg+Leertaste)',
+  'ws.check': 'Prüfen',
+  'ws.check_title': 'Das SQL planen, ohne es auszuführen, wie der Advisor',
+  'ws.key.indent': 'Einrücken (Esc, dann Tab: nächstes Feld)',
+  'ws.search_path_plain': '{schema} zuerst im Suchpfad',
+  // ------------------------------------------------------------ Rail labels (UX-3)
+  'rail.labels_show': 'Beschriftungen anzeigen',
+  'rail.labels_hide': 'Beschriftungen ausblenden',
+  // ------------------------------------------------------------ Administration page (UX-4)
+  'wu.filter': 'Hilfsprogramme filtern',
+  'wu.filter_none': 'Nichts entspricht dem Filter.',
+  'wu.sec.people': 'Personen und Anmeldung',
+  'wu.sec.connections': 'Verbindungen',
+  'wu.sec.data': 'Daten und KI',
+  'wu.sec.operations': 'Betrieb',
+  'wu.sec.workspace': 'Arbeitsbereich {name}',
+  'wu.sec.instance': 'Instanz',
+  // ------------------------------------------------------------ Workspace home: needs attention (UX-13)
+  'wh.attention': 'Erfordert Aufmerksamkeit',
 };

package/src/builder/i18n/en.ts

@@ -7514,4 +7514,32 @@ export const en = {
   'pjb.steps': 'Steps',
   'pjb.message': 'Message',
   'pjb.no_runs': 'No runs yet.',
+  // ------------------------------------------------------------ PWA: every page offline (sprint 168)
+  'pwa.prefetch': 'Make every page of the navigation available offline after sign-in',
+  'pwa.prefetch_help': 'Needs Keep visited pages. After a sign-in, and on the first page opened on a device, the device fetches every page of the navigation menu and navigation bar the user may open, one at a time. The server shows them read-only: pages that run processes when they open are left out and kept only when the user opens them.',
+  'pwa.prefetch_hours': 'Fetch them again after (hours)',
+  'pwa.prefetch_hours_help': '1 to 168. The pages are fetched again on the first page opened after this time, while there is a connection.',
+  'pwa.prefetch_hours_range': 'Fetch them again after: a whole number of hours from 1 to 168.',
+  // ------------------------------------------------------------ SQL Worksheet: one toolbar row (UX-1)
+  'ws.more': 'More actions',
+  'ws.suggest': 'Suggest',
+  'ws.suggest_title': 'Suggestions at the cursor (Ctrl+Space)',
+  'ws.check': 'Check',
+  'ws.check_title': 'Plan the SQL without running it, as the Advisor does',
+  'ws.key.indent': 'Indent (Esc, then Tab: next field)',
+  'ws.search_path_plain': '{schema} first in the search path',
+  // ------------------------------------------------------------ Rail labels (UX-3)
+  'rail.labels_show': 'Show labels',
+  'rail.labels_hide': 'Hide labels',
+  // ------------------------------------------------------------ Administration page (UX-4)
+  'wu.filter': 'Filter the utilities',
+  'wu.filter_none': 'Nothing matches the filter.',
+  'wu.sec.people': 'People and sign-in',
+  'wu.sec.connections': 'Connections',
+  'wu.sec.data': 'Data and AI',
+  'wu.sec.operations': 'Operations',
+  'wu.sec.workspace': 'Workspace {name}',
+  'wu.sec.instance': 'Instance',
+  // ------------------------------------------------------------ Workspace home: needs attention (UX-13)
+  'wh.attention': 'Needs attention',
 } as const;

package/src/builder/i18n/es.ts

@@ -7510,4 +7510,32 @@ export const es: BuilderMessages = {
   'pjb.steps': 'Pasos',
   'pjb.message': 'Mensaje',
   'pjb.no_runs': 'Aún no hay ejecuciones.',
+  // ------------------------------------------------------------ PWA: every page offline (sprint 168)
+  'pwa.prefetch': 'Hacer que todas las páginas de la navegación estén disponibles sin conexión después de iniciar sesión',
+  'pwa.prefetch_help': 'Requiere Guardar las páginas visitadas. Después de iniciar sesión, y en la primera página abierta en un dispositivo, el dispositivo obtiene una por una todas las páginas del menú y de la barra de navegación que el usuario puede abrir. El servidor las muestra en solo lectura: las páginas que ejecutan procesos al abrirse se omiten y solo se guardan cuando el usuario las abre.',
+  'pwa.prefetch_hours': 'Volver a obtenerlas después de (horas)',
+  'pwa.prefetch_hours_help': 'De 1 a 168. Las páginas se vuelven a obtener en la primera página abierta después de este tiempo, mientras haya conexión.',
+  'pwa.prefetch_hours_range': 'Volver a obtenerlas después de: un número entero de horas entre 1 y 168.',
+  // ------------------------------------------------------------ SQL Worksheet: one toolbar row (UX-1)
+  'ws.more': 'Más acciones',
+  'ws.suggest': 'Sugerir',
+  'ws.suggest_title': 'Sugerencias en el cursor (Ctrl+Espacio)',
+  'ws.check': 'Comprobar',
+  'ws.check_title': 'Planificar el SQL sin ejecutarlo, como el Advisor',
+  'ws.key.indent': 'Sangrar (Esc y luego Tab: siguiente campo)',
+  'ws.search_path_plain': '{schema} primero en la ruta de búsqueda',
+  // ------------------------------------------------------------ Rail labels (UX-3)
+  'rail.labels_show': 'Mostrar etiquetas',
+  'rail.labels_hide': 'Ocultar etiquetas',
+  // ------------------------------------------------------------ Administration page (UX-4)
+  'wu.filter': 'Filtrar las utilidades',
+  'wu.filter_none': 'Nada coincide con el filtro.',
+  'wu.sec.people': 'Personas e inicio de sesión',
+  'wu.sec.connections': 'Conexiones',
+  'wu.sec.data': 'Datos e IA',
+  'wu.sec.operations': 'Operaciones',
+  'wu.sec.workspace': 'Espacio de trabajo {name}',
+  'wu.sec.instance': 'Instancia',
+  // ------------------------------------------------------------ Workspace home: needs attention (UX-13)
+  'wh.attention': 'Requiere atención',
 };

package/src/builder/i18n/fr.ts

@@ -7510,4 +7510,32 @@ export const fr: BuilderMessages = {
   'pjb.steps': 'Étapes',
   'pjb.message': 'Message',
   'pjb.no_runs': 'Aucune exécution pour l’instant.',
+  // ------------------------------------------------------------ PWA: every page offline (sprint 168)
+  'pwa.prefetch': 'Rendre toutes les pages de la navigation disponibles hors ligne après la connexion',
+  'pwa.prefetch_help': 'Nécessite Conserver les pages visitées. Après une connexion, et sur la première page ouverte sur un appareil, l’appareil récupère une à une toutes les pages du menu et de la barre de navigation que l’utilisateur peut ouvrir. Le serveur les affiche en lecture seule : les pages qui exécutent des processus à l’ouverture sont ignorées et conservées seulement quand l’utilisateur les ouvre.',
+  'pwa.prefetch_hours': 'Les récupérer à nouveau après (heures)',
+  'pwa.prefetch_hours_help': 'De 1 à 168. Les pages sont récupérées à nouveau à la première page ouverte après ce délai, s’il y a une connexion.',
+  'pwa.prefetch_hours_range': 'Les récupérer à nouveau après : un nombre entier d’heures entre 1 et 168.',
+  // ------------------------------------------------------------ SQL Worksheet: one toolbar row (UX-1)
+  'ws.more': 'Plus d’actions',
+  'ws.suggest': 'Suggérer',
+  'ws.suggest_title': 'Suggestions au curseur (Ctrl+Espace)',
+  'ws.check': 'Vérifier',
+  'ws.check_title': 'Planifier le SQL sans l’exécuter, comme l’Advisor',
+  'ws.key.indent': 'Indenter (Échap puis Tab : champ suivant)',
+  'ws.search_path_plain': '{schema} en premier dans le chemin de recherche',
+  // ------------------------------------------------------------ Rail labels (UX-3)
+  'rail.labels_show': 'Afficher les libellés',
+  'rail.labels_hide': 'Masquer les libellés',
+  // ------------------------------------------------------------ Administration page (UX-4)
+  'wu.filter': 'Filtrer les utilitaires',
+  'wu.filter_none': 'Rien ne correspond au filtre.',
+  'wu.sec.people': 'Personnes et connexion',
+  'wu.sec.connections': 'Connexions',
+  'wu.sec.data': 'Données et IA',
+  'wu.sec.operations': 'Exploitation',
+  'wu.sec.workspace': 'Espace de travail {name}',
+  'wu.sec.instance': 'Instance',
+  // ------------------------------------------------------------ Workspace home: needs attention (UX-13)
+  'wh.attention': 'À traiter',
 };