pgkiln 0.82.0 → 0.84.0

package/docs/guide/12-development.md

@@ -328,6 +328,10 @@ src/
     availability.ts        availabilityRefusal(): who may use an application (migration 083); loadContext, the login page
                            and REST modules ask it (PostgREST: meta.api_check)
     feedback.ts            users' feedback page and the navigation bar entry (migration 084)
+    notifications.ts       (sprint 165, migration 154) the notification bell (bellMarkup: unread count, newest 8, Mark all read),
+                           /a/:alias/notifications, POST …/notifications/:id/open (the user's own only, marks read, its signed
+                           link under the current alias) and …/notifications/read; GET …/:page/live (liveState: list entry
+                           badges n:/b:<key>, buttons btn:<id>, the bell) with loadContext touch: false (no last_seen, no new session)
     data-items.ts          display image and address items (migration 086): imageUrl (https origins into the CSP's img-src),
                            GET …/image/:item (a BLOB from the item's query), POST …/geocode/:item, and items kept per user
                            (loadPreferences / savePreferences through meta.get_preference / set_preference)
@@ -338,7 +342,8 @@ src/
     components.ts          property spec of every component (drives the property editor)
     ui.ts                  IDE shell (icon rail, toolbar, breadcrumb, status bar), builder theme, form helpers, CSRF check, app tabs
     i18n.ts                (sprint 121) the builder's own texts: BUILDER_LANGUAGES, tr(s) / translatorFor(lang) → tx(key, params),
-                           tx.rich (markup in a sentence), tx.dyn (keys made at run time), tx.label (known breadcrumb labels)
+                           tx.rich (markup in a sentence), tx.dyn (keys made at run time), tx.label (known breadcrumb labels),
+                           (sprint 162) tx.code (`backticks` become <code>), withTranslator / scopedTx (a request-scoped translator)
     i18n/                  en.ts defines the builder's keys; de, es, fr, it, nl, pt, zh-cn, zh-tw, ja, ko (sprint 134) are Records of the same keys
     language.ts            (migration 127) the status bar's language menu (POST /builder/language), the sign-in page's
                            language links (?lang=, a cookie), meta.developer.language
@@ -610,6 +615,8 @@ test/
   fixtures/                test files (employees.xlsx)
   template-components.test.ts  template language, escaping, plug-ins, regions and column templates
   logic.test.ts            computations, branches, menu buttons and badges, new dynamic actions, build options, export
+  notifications.test.ts    (165) meta.notify and its checks, the bell, opening and Mark all read, list entry badge queries,
+                           the live endpoint, send_notification, the timer event, the settings (security cases in security.test.ts)
   page-logic.test.ts       download, chain (background jobs) and workflow processes, function/app branches, dialog_closed (HR page 28)
   code-editor.test.ts      code editor: completions scoped to the app's role, the check, marked fields
   builder-i18n.test.ts     (sprint 121) builder languages: the coverage check of src/builder against i18n/en.ts, the message
@@ -683,6 +690,7 @@ test/
   e2e/globalization.test.ts the browser's time zone (sign-in, app.js), no-JavaScript fallback, a masked number item
   e2e/grid.test.ts         interactive grid in a browser: master-detail refresh, move/resize columns, row menu, copy/paste; without JavaScript
   e2e/page-logic.test.ts   dialog_closed refreshes a region without a reload, download process in a browser, dialog link without JavaScript
+  e2e/notifications.test.ts (165) a notification reaches the open page (bell and navigation bar badge), opened from the bell; a timer action
   e2e/ai-builder.test.ts   App Builder AI in a browser (mock Claude): SQL from a question, a drafted description, proposed pages,
                            a blueprint drafted and reviewed
   e2e/ai-assistant.test.ts the AI assistant and report questions on HR page 38 in a browser (mock Claude), with and without JavaScript
@@ -704,8 +712,15 @@ const tx = tr(s);                                  // the developer's language (
 html`<h2>${tx('wh.summary')}</h2><p>${tx('ab.count', { n: 3 })}</p>`;   // plain text: html`` escapes it
 tx.rich('ab.none_yet', { create: html`<a href="…">${tx('ab.create_one')}</a>` });   // markup inside a sentence
 tx.dyn(`gallery.region.${type}`, REGION_LABELS[type][0]);              // a key made at run time, with a fallback
+tx.code('cr.schedule_help');                     // (sprint 162) `backticked` parts become <code>: syntax help
 ```
 
+(sprint 162) A long form built by many helpers (the region and report settings, RESTful Services' pages) doesn't
+pass `tx` to each of them: its entry point runs inside `withTranslator(tr(s), () => …)`, and the helpers import
+`scopedTx as tx`, which takes the translator of the request being rendered from an `AsyncLocalStorage` (so two
+requests in different languages never mix; `test/builder-i18n.test.ts` renders German and French concurrently).
+Outside `withTranslator` it is English.
+
 A missing text falls back to English, never to the raw key. Shared helpers that render chrome take the session as
 an optional last argument (`appHeader(a, 'pages', s)`, `workshopTabs('sql', s)`); `shell()` translates known English
 breadcrumb labels (`tx.label`) so pages that aren't moved yet still get a translated trail.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgkiln",
-  "version": "0.82.0",
+  "version": "0.84.0",
   "description": "Open source low-code, SQL-driven application builder for PostgreSQL, inspired by Oracle APEX",
   "keywords": [
     "postgresql",

package/public/app.css

@@ -280,6 +280,35 @@ h2 { font-size: 1rem; margin: 0; font-weight: 600; }
 .t-user > summary::-webkit-details-marker { display: none; }
 .t-user > summary:hover { background: rgb(255 255 255 / 10%); }
 
+/* (165) the notification bell: the unread count on the icon, the newest notifications in its menu */
+.t-bell > summary { position: relative; }
+.t-bell-count {
+  position: absolute; top: 1px; inset-inline-end: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; border-radius: 99px;
+  background: #d92d20; color: #fff; font-size: 0.68rem; font-weight: 700; line-height: 1.15rem; text-align: center;
+  box-shadow: 0 0 0 2px var(--header, #1d1b31);
+}
+.t-bell-panel { width: min(380px, calc(100vw - 1rem)); }
+.t-bell-head { flex-direction: row; align-items: center; justify-content: space-between; }
+.t-bell-read { margin: 0; }
+.t-bell-read .link-button { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
+.t-bell-none { padding: 0.5rem 0.9rem; margin: 0; }
+.t-bell-list, .t-notification-list { list-style: none; margin: 0; padding: 0; }
+.t-bell-list form, .t-notification-list form { margin: 0; }
+.t-notification {
+  display: flex; gap: 0.6rem; align-items: flex-start; width: 100%; padding: 0.55rem 0.9rem; border: 0; background: none;
+  color: var(--text); font: inherit; text-align: start; cursor: pointer;
+}
+.t-notification:hover, .t-notification:focus-visible { background: var(--surface-2, rgb(0 0 0 / 4%)); }
+.t-notification > .icon { flex: none; margin-top: 0.15rem; color: var(--muted); }
+.t-notification-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
+.t-notification-title { font-weight: 500; }
+.t-notification-body { color: var(--muted); font-size: 0.88rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
+.t-notification-time { color: var(--muted); font-size: 0.78rem; }
+.is-unread > form > .t-notification { box-shadow: inset 3px 0 0 var(--accent); }
+.is-unread .t-notification-title { font-weight: 700; }
+.is-unread > form > .t-notification > .icon { color: var(--accent); }
+.t-notification-list > li + li { border-top: 1px solid var(--border); }
+
 /* ---------- menus (details dropdowns) ---------- */
 details.menu { position: relative; }
 details.menu > summary { list-style: none; }
@@ -1468,6 +1497,8 @@ path.map-near { stroke: #1f2733; stroke-dasharray: 6 4; fill: #1f2733; fill-opac
 .tree-view a, .tree-view summary > span, .tree-leaf > span { display: inline-flex; align-items: center; gap: 0.35rem; }
 .tree-leaf { padding-left: 1rem; }
 .tree-count { font-size: 0.75rem; color: var(--muted); }
+/* (161) the node a tree_selection_change dynamic action chose */
+.tree-view li.tree-selected > :is(a, span:not(.tree-count), .tree-row), .tree-view li.tree-selected > details > summary > span { background: var(--accent-soft); border-radius: 3px; outline: 1px solid var(--accent); outline-offset: 1px; }
 /* a linked branch: the disclosure triangle sits in front of the link's row */
 .tree-branch { position: relative; }
 .tree-branch > .tree-row { display: inline-flex; align-items: center; gap: 0.35rem; }

package/public/app.js

@@ -507,6 +507,8 @@ const pgkilnUnsaved = (() => {
 
   /** (085) what runDa returns to stop the actions after it (a declined confirm) */
   const STOP = Symbol('stop');
+  /** (161) the element of a component event (a grid row, calendar cell, map, tree node): execute_javascript's `element` */
+  let componentElement = null;
   /** (156) does a Cancel Event in these actions hold its condition (decided at once, so the event's effect can be stopped)? */
   const cancels = (list) => list.some((da) => da.action === 'cancel_event' && conditionHolds(da));
   const text = (k) => (meta.texts && meta.texts[k]) || k;
@@ -634,6 +636,11 @@ const pgkilnUnsaved = (() => {
       case 'clear':
         for (const n of da.items) setItemValue(n, '');
         return;
+      // (161) set_value without SQL on a component event: the event's value, set in the browser
+      case 'set_value':
+        if (!da.eventValue) break;
+        for (const n of da.items) setItemValue(n, value == null ? '' : String(value));
+        return;
       case 'open_region':
       case 'close_region':
         for (const el of targets(da)) {
@@ -731,7 +738,7 @@ const pgkilnUnsaved = (() => {
         const fn = da.fn && actions.get(da.fn);
         if (!fn) return console.warn(`pgkiln: no function "${da.fn}" registered (pgkiln.actions.register) for dynamic action ${da.id}`);
         try {
-          await fn({ value, items: da.items, region: da.region ? document.getElementById(`R${da.region}`) : null, elements: targets(da), message: da.message });
+          await fn({ value, items: da.items, region: da.region ? document.getElementById(`R${da.region}`) : null, elements: targets(da), message: da.message, element: componentElement });
         } catch (e) {
           console.error(e);
           showError(e.message);
@@ -908,6 +915,16 @@ const pgkilnUnsaved = (() => {
       requestAnimationFrame(() => { queued = false; runChain(run); });
     }, { passive: true });
   }
+  // (165) timer: every so many seconds (the trigger), while the page is visible
+  {
+    const bySeconds = new Map();
+    for (const da of das.filter((d) => d.event === 'timer')) {
+      const seconds = Number(da.trigger[0]);
+      if (!(seconds >= 5 && seconds <= 3600)) continue;
+      bySeconds.set(seconds, [...(bySeconds.get(seconds) || []), da]);
+    }
+    for (const [seconds, run] of bySeconds) setInterval(() => { if (!document.hidden) runChain(run); }, seconds * 1000);
+  }
   // page_unload: the page is left (only quick, local actions finish)
   window.addEventListener('pagehide', () => runChain(das.filter((da) => da.event === 'page_unload')));
   // facets_change: a faceted search region's facets were applied (the page came back from its form)
@@ -920,6 +937,58 @@ const pgkilnUnsaved = (() => {
       runChain(regionRun('facets_change', document.getElementById(`R${changed.replace(/\D/g, '')}`)));
     }
   }
+  // (161) component events of grid, calendar, map and tree regions (trigger: the region). The component
+  // raises pgkiln:component {event, element, value}; detail.cancelled tells it a cancel_event holds
+  // (the calendar's Create link, the tree node's link) and detail.ran how many actions run.
+  document.addEventListener('pgkiln:component', (e) => {
+    const d = e.detail || {};
+    const region = d.element && d.element.closest && d.element.closest('section[id^="R"], div[id^="R"], dialog[id^="R"]');
+    const run = regionRun(d.event, region);
+    d.ran = run.length;
+    if (!run.length) return;
+    const value = d.value == null ? '' : String(d.value);
+    if (run.some((da) => da.action === 'cancel_event' && conditionHolds(da, value))) d.cancelled = true;
+    componentElement = d.element;
+    runChain(run, value).finally(() => (componentElement = null));
+  });
+  // grid_save: the page that comes back after a grid's Save
+  for (const id of meta.savedGrids || []) {
+    const run = regionRun('grid_save', document.getElementById(`R${id}`));
+    if (run.length) runChain(run);
+  }
+  // calendar_view_change: the page that comes back from a calendar's view or period link (cal_changed=<region>)
+  {
+    const params = new URLSearchParams(location.search);
+    const changed = params.get('cal_changed');
+    if (changed) {
+      params.delete('cal_changed');
+      history.replaceState(history.state, '', `${location.pathname}${params.size ? `?${params}` : ''}${location.hash}`);
+      const region = document.getElementById(`R${changed.replace(/\D/g, '')}`);
+      const run = regionRun('calendar_view_change', region);
+      if (run.length) runChain(run, region.querySelector('.calendar')?.dataset.view || '');
+    }
+  }
+  document.addEventListener('click', (e) => {
+    const a = e.target.closest?.('.calendar .cal-toolbar a[href]');
+    const region = a && a.closest('section[id^="R"], div[id^="R"]');
+    if (!region || !regionRun('calendar_view_change', region).length) return;
+    const url = new URL(a.href, location.href);
+    url.searchParams.set('cal_changed', region.id.slice(1));
+    a.href = url.pathname + url.search + url.hash;
+  }, true);
+  // tree_selection_change: a node's label chosen (not the disclosure of a linked branch); the node is marked
+  document.addEventListener('click', (e) => {
+    const node = e.target.closest?.('.tree-view li[data-node]');
+    if (!node) return;
+    const summary = e.target.closest('summary');
+    if (summary && !summary.querySelector(':scope > span:not(.sr-only), :scope > a')) return;
+    const d = { event: 'tree_selection_change', element: node, value: node.dataset.node };
+    document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: d }));
+    if (!d.ran) return;
+    node.closest('.tree-view').querySelectorAll('li.tree-selected').forEach((li) => li.classList.remove('tree-selected'));
+    node.classList.add('tree-selected');
+    if (d.cancelled) e.preventDefault();
+  });
   // after_refresh: a region replaced by a refresh, a lazy load or a master row
   document.addEventListener('pgkiln:replaced', (e) => {
     const run = regionRun('after_refresh', e.detail);
@@ -1143,10 +1212,23 @@ const pgkilnUnsaved = (() => {
 
   // ------------------------------------------------------------ calendar
   // Create on click: a click on an empty day or hour slot follows its "+" link.
+  // (161) a day or hour chosen (a click on the cell or its "+"): calendar_date_select; its cancel_event keeps the link closed
+  let addClicked = false;
   document.addEventListener('click', (e) => {
-    const cell = e.target.closest?.('.calendar [data-add]');
-    if (!cell || e.target.closest('a, button')) return;
-    cell.querySelector(':scope > .cal-add')?.click();
+    if (addClicked) return void (addClicked = false);
+    const cell = e.target.closest?.('.calendar [data-date]');
+    if (!cell) return;
+    const add = e.target.closest('a.cal-add');
+    if (!add && e.target.closest('a, button')) return;
+    const d = { event: 'calendar_date_select', element: cell, value: cell.dataset.date };
+    document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: d }));
+    if (d.cancelled) return void e.preventDefault();
+    const link = !add && cell.hasAttribute('data-add') && cell.querySelector(':scope > .cal-add');
+    if (link) {
+      addClicked = true;
+      link.click();
+      addClicked = false;
+    }
   });
   // Drag and drop (mouse): drop an event on a day or hour slot; the server moves it
   // and sends the calendar back. Without JS (and from the keyboard) the event's
@@ -1442,6 +1524,9 @@ const pgkilnUnsaved = (() => {
     return row;
   }
 
+  /** (161) grid_row_init: a new row (Add row, Duplicate); the condition sees the row's number among the new rows */
+  const rowInit = (row) => document.dispatchEvent(new CustomEvent('pgkiln:component', { detail: { event: 'grid_row_init', element: row, value: row.dataset.newRow } }));
+
   /** The editable control of a cell, if any. */
   const control = (td) => td?.querySelector('input:not([type=hidden]), select');
 
@@ -1482,6 +1567,7 @@ const pgkilnUnsaved = (() => {
     if (add) {
       const row = addRow(add.closest('[data-grid]'));
       row?.querySelector('input:not([type=hidden]), select')?.focus();
+      if (row) rowInit(row);
       return;
     }
     // Duplicate: the row's values in a new row (without JS a link does it on the server)
@@ -1498,6 +1584,7 @@ const pgkilnUnsaved = (() => {
         if (from && control(td) && control(from)) setCell(td, control(from).tagName === 'SELECT' ? control(from).value : cellText(from));
       }
       control(row.querySelector('td[data-col]:not([hidden])'))?.focus();
+      rowInit(row);
       return;
     }
     if (e.target.closest('[data-grid-del]')) {
@@ -2774,6 +2861,66 @@ document.addEventListener('DOMContentLoaded', () => {
   for (const form of document.querySelectorAll('form[data-autosubmit]')) form.submit();
 });
 
+// (165) Live badges and the notification bell (body data-live: seconds; GET <base>/<page>/live).
+const liveBadges = (() => {
+  let seconds = 0;
+  let timer = 0;
+  let last = 0;
+  let busy = false;
+  let stopped = false;
+  const apply = (state) => {
+    for (const el of document.querySelectorAll('[data-badge]')) {
+      const key = el.dataset.badge;
+      if (key === 'bell' || !(key in state.badges)) continue;
+      const v = state.badges[key];
+      el.textContent = v ?? '';
+      el.hidden = v === null || v === '';
+    }
+    const bell = state.bell && document.querySelector('[data-bell]');
+    if (!bell) return;
+    const count = bell.querySelector('[data-badge="bell"]');
+    if (count) {
+      count.textContent = state.bell.unread ? (state.bell.unread > 99 ? '99+' : String(state.bell.unread)) : '';
+      count.hidden = !state.bell.unread;
+    }
+    const summary = bell.querySelector('summary');
+    if (summary) {
+      summary.title = state.bell.label;
+      summary.setAttribute('aria-label', state.bell.label);
+    }
+    // the list is replaced while the menu is closed only (not under the user's pointer or focus)
+    const panel = bell.querySelector('[data-bell-panel]');
+    if (panel && !bell.open && panel.innerHTML !== state.bell.panel) panel.innerHTML = state.bell.panel;
+  };
+  const poll = () => {
+    const base = document.body.dataset.base;
+    const page = document.body.dataset.page;
+    if (stopped || busy || !base || !page) return;
+    busy = true;
+    last = Date.now();
+    fetch(`${base}/${page}/live`, { credentials: 'same-origin', headers: { Accept: 'application/json' } })
+      .then((r) => {
+        if (r.status === 401 || r.status === 403 || r.status === 404) stopped = true;
+        return r.ok ? r.json() : null;
+      })
+      .then((state) => state && state.badges && apply(state))
+      .catch(() => {})
+      .finally(() => { busy = false; });
+  };
+  return {
+    start(s) {
+      if (!(s >= 10) || timer) return;
+      seconds = s;
+      timer = setInterval(() => { if (!document.hidden) poll(); }, seconds * 1000);
+      // back to a tab that was hidden longer than the interval: at once
+      document.addEventListener('visibilitychange', () => { if (!document.hidden && Date.now() - last > seconds * 1000) poll(); });
+    },
+    now() {
+      if (seconds) poll();
+    },
+  };
+})();
+
 // ------------------------------------------------------------------ Progressive Web App and field work
 (() => {
   const metaEl = document.getElementById('pgkiln-meta');
@@ -2802,10 +2949,17 @@ document.addEventListener('DOMContentLoaded', () => {
     }
     navigator.serviceWorker.addEventListener('message', (e) => {
       if (e.data && e.data.type === 'pgkiln:queue') showQueue(e.data.items, post);
+      // (165) a push notification arrived: the badges and the bell now, not at the next refresh
+      if (e.data && e.data.type === 'pgkiln:pushed') liveBadges.now();
     });
     if (new URLSearchParams(location.search).get('queued') === '1') note(t('pwa.queued'));
   }
 
+  // (165) live badges: every data-live seconds the page asks for its badges (navigation menu and bar,
+  // buttons with a badge query) and the bell, and updates them in place; not while the tab is hidden.
+  // A signed-out session (401) or a page without them (404, 403) stops it.
+  liveBadges.start(Number(body.dataset.live) || 0);
+
   // offline: say so (the page may come from the device)
   const banner = () => {
     let b = document.querySelector('.offline-banner');
@@ -3247,6 +3401,8 @@ document.addEventListener('DOMContentLoaded', () => {
     // without a Referer: the tiles get the site's origin only (no paths or item values)
     window.L.tileLayer(data.tiles, { attribution: data.attribution, maxZoom: 19, referrerPolicy: 'strict-origin-when-cross-origin' }).addTo(map);
     const popup = (p) => {
+      // (161) a marker or shape clicked (its popup opens): map_object_click sees its id, else its title
+      el.dispatchEvent(new CustomEvent('pgkiln:component', { bubbles: true, detail: { event: 'map_object_click', element: el, value: p.id ?? p.title ?? '' } }));
       // built with the DOM, not HTML strings: titles and texts are data
       const box = document.createElement('div');
       const b = document.createElement('strong');
@@ -3290,6 +3446,8 @@ document.addEventListener('DOMContentLoaded', () => {
     if (data.layers.some((l) => l.kind === 'heat')) heatLegend(map, data.legend);
     if (several) layerSwitch(map, group, built, data.layersLabel);
     if (f) areaFilter(map, f);
+    // (161) map_change: moved or zoomed by the user (after the first view); the condition sees the zoom level
+    map.on('moveend', () => el.dispatchEvent(new CustomEvent('pgkiln:component', { bubbles: true, detail: { event: 'map_change', element: el, value: map.getZoom() } })));
   }
 });
 
@@ -5160,3 +5318,4 @@ document.addEventListener('change', (e) => {
   document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') send(); });
   window.addEventListener('pagehide', send);
 })();
+

package/public/builder.css

@@ -401,6 +401,10 @@ body.ide {
 .ide-head-actions { margin-left: auto; }
 .ide-tabs { display: flex; gap: 4px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; }
 .ide-page > .ide-tabs { margin-top: 0; border-bottom: 1px solid var(--border); }
+/* (sprint 163) regions and two-column rows stacked on a page always have a gap between them (pages used to rely on
+   an explicit .u-spacer, and the ones without one let a region touch the one above); not the regions side by side in a
+   grid, which have the grid's gap; :where() keeps it weaker than any page's own margin rule */
+:where(.ide-page :is(.region, .columns, :has(> .region)) + :is(.region, .columns, :has(> .region)):not(:is(.columns, .qs-columns, .vec-columns, .ws-cols, .wh-top, [class*="grid"]) > *)) { margin-top: 1rem; }
 .ide-tab {
   position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px 9px; color: var(--muted); text-decoration: none;
   border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; white-space: nowrap; font-weight: 550;
@@ -1340,7 +1344,7 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .cron-field-grid input { width: 100%; font-family: var(--mono, monospace); }
 .cron-preview { border-left: 3px solid var(--accent); padding: 0.4rem 0.8rem; margin: 0.6rem 0; background: var(--accent-soft); border-radius: 0 4px 4px 0; }
 .cron-runs { margin: 0.25rem 0 0; padding-left: 1.4rem; font-variant-numeric: tabular-nums; }
-.cron-error { color: var(--danger, #b42318); }
+.cron-error { color: var(--danger); }
 .cron-sql { white-space: pre-wrap; overflow-wrap: anywhere; }
 /* (sprint 102) SQL Monitor: refresh controls, session actions, bars in Top SQL */
 .sm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
@@ -1526,7 +1530,7 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .mail-queue-filters .field { min-width: 0; flex: 1 1 160px; max-width: 260px; }
 .mail-queue-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
 .mail-queue-stats .stat b { font-size: 1.3rem; }
-.stat.stat-bad b { color: var(--danger, #b42318); }
+.stat.stat-bad b { color: var(--danger); }
 .inline-form { display: inline; margin: 0; }
 .mail-failures .buttons { flex-wrap: wrap; gap: 6px; }
 .mail-answer { overflow-wrap: anywhere; font-family: var(--font-mono, monospace); font-size: 0.85em; }
@@ -1648,3 +1652,22 @@ a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
 
 /* (sprint 139, AP-6) OpenTelemetry */
 .otel-problem { color: var(--danger); overflow-wrap: anywhere; }
+
+/* (sprint 163) an application's REST API page: status pills under the intro, the New client form behind a button */
+.api-intro { max-width: 80ch; margin: 0 0 0.6rem; }
+.api-status { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
+.api-status li { display: inline-block; border: 1px solid var(--border); border-radius: 14px; padding: 3px 12px; font-size: 0.875rem; overflow-wrap: anywhere; }
+.api-status li.is-ok > span:first-child { color: var(--success); }
+.api-status li.is-bad { border-color: var(--danger); }
+.api-status li.is-bad > span:first-child { color: var(--danger); font-weight: 700; }
+.api-top { align-items: start; }
+.api-top form > .field + .field { margin-top: 0.9rem; }
+.api-sub { font-size: 0.95rem; margin: 1.25rem 0 0.5rem; }
+.api-new > summary { list-style: none; display: inline-flex; }
+.api-new > summary::-webkit-details-marker { display: none; }
+.api-new[open] > summary { margin-bottom: 0.75rem; }
+.api-new-body { border-top: 1px solid var(--border); padding-top: 0.75rem; }
+.api-client-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
+.api-client-actions select { width: auto; min-height: 0; padding-block: 0.2rem; font-size: 0.8125rem; }
+.api-client-actions .inline-form { display: flex; gap: 6px; align-items: center; }
+.api-clients td.actions { text-align: end; }

package/public/data-modeler.js

@@ -10,6 +10,9 @@
 // Strict CSP: no inline styles; geometry goes into SVG attributes, sizes through the CSSOM.
 (() => {
   'use strict';
+  // (sprint 162) texts in the builder's language: #builder-texts (shell(), keys js.*), English in en.ts
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
   // the data dictionary's Print button
   for (const b of document.querySelectorAll('.dm-dict-actions [data-dm=print]')) {
     b.hidden = false;
@@ -104,7 +107,7 @@
     btn('redo').disabled = !redo.length;
     const d = dirty();
     btn('save').classList.toggle('btn-hot', d);
-    status.textContent = d ? 'Unsaved changes' : '';
+    status.textContent = d ? msg('js.dm.unsaved') : '';
   }
   function remember(before) {
     undo.push(before);
@@ -136,15 +139,15 @@
       format: 'json',
       positions: JSON.stringify([...boxes].map(([name, b]) => ({ name, x: Math.round(b.x), y: Math.round(b.y) }))),
     });
-    status.textContent = 'Saving…';
+    status.textContent = msg('js.dm.saving');
     try {
       const res = await fetch(saveForm.action, { method: 'POST', body, credentials: 'same-origin', headers: { accept: 'application/json' } });
       if (!res.ok) throw new Error(String(res.status));
       saved = JSON.stringify(snapshot());
       changed();
-      status.textContent = 'Saved';
+      status.textContent = msg('js.dm.saved');
     } catch (e) {
-      status.textContent = `Not saved (${e.message}): try again`;
+      status.textContent = msg('js.dm.not_saved', { error: e.message });
     }
   }
   btn('save').addEventListener('click', save);
@@ -333,7 +336,7 @@
       ctx.drawImage(img, 0, 0, W, H);
       c.toBlob((blob) => blob && download(blob, `${fileName}.png`), 'image/png');
     };
-    img.onerror = () => (status.textContent = 'The PNG could not be made: export SVG instead');
+    img.onerror = () => (status.textContent = msg('js.dm.no_png'));
     img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgText())}`;
   });
   btn('print').addEventListener('click', () => {

package/public/sql-monitor.js

@@ -7,6 +7,9 @@
 // JavaScript the page's Refresh link reloads it.
 (() => {
   'use strict';
+  // (sprint 162) texts in the builder's language: #builder-texts (shell(), keys js.*), English in en.ts
+  const TEXTS = (() => { try { return JSON.parse(document.getElementById('builder-texts')?.dataset.texts || '{}'); } catch { return {}; } })();
+  const msg = (key, params = {}) => (TEXTS[key] ?? key).replace(/\{(\w+)\}/g, (m, k) => (k in params ? String(params[k]) : m));
   const live = document.querySelector('[data-sm-live]');
   const controls = document.querySelector('[data-sm-controls]');
   if (!live || !controls) return;
@@ -26,7 +29,7 @@
 
   const show = () => {
     pause.setAttribute('aria-pressed', paused ? 'true' : 'false');
-    pause.textContent = paused ? 'Resume' : 'Pause';
+    pause.textContent = paused ? msg('js.sm.resume') : msg('js.sm.pause');
     live.classList.toggle('is-paused', paused);
   };
   const schedule = () => {
@@ -52,7 +55,7 @@
       paused = true;
       show();
       const note = live.querySelector('[data-sm-updated]');
-      if (note) note.textContent = 'Refresh stopped: the monitor could not be reached (signed out?). Reload the page.';
+      if (note) note.textContent = msg('js.sm.stopped');
     }
   }
   select.addEventListener('change', () => {

package/public/sw.js

@@ -210,7 +210,11 @@ self.addEventListener('push', (event) => {
     data: { url: appUrl(m.url) || appUrl(`${PGKILN.base}/`) },
   };
   if (typeof m.tag === 'string' && m.tag) Object.assign(options, { tag: m.tag, renotify: true });
-  event.waitUntil(self.registration.showNotification(typeof m.title === 'string' && m.title ? m.title : 'Notification', options));
+  event.waitUntil(Promise.all([
+    self.registration.showNotification(typeof m.title === 'string' && m.title ? m.title : 'Notification', options),
+    // (165) open pages refresh their badges and the bell now
+    self.clients.matchAll({ type: 'window' }).then((wins) => wins.forEach((w) => w.postMessage({ type: 'pgkiln:pushed' }))),
+  ]));
 });
 
 self.addEventListener('notificationclick', (event) => {

package/src/app.ts

@@ -60,6 +60,7 @@ import { assistantBuilderRoutes } from './builder/assistant.ts';
 import { aiBuilderRoutes } from './builder/ai-builder.ts';
 import { blueprintRoutes } from './builder/blueprints.ts';
 import { accountRoutes } from './runtime/account.ts';
+import { notificationRoutes } from './runtime/notifications.ts';
 import { taskRoutes } from './runtime/tasks.ts';
 import { dataReporterRoutes } from './runtime/data-reporter.ts';
 import { datasetRoutes } from './builder/datasets.ts';
@@ -210,6 +211,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   });
   await app.register(runtimeRoutes);
   await app.register(accountRoutes);
+  await app.register(notificationRoutes);
   await app.register(taskRoutes);
   await app.register(workflowRoutes);
   await app.register(pwaRoutes);