pgkiln 0.51.0 → 0.53.0

package/public/app.js

@@ -483,6 +483,9 @@ const pgkilnUnsaved = (() => {
     // (077) APEX: apex.page.isChanged()
     isChanged: () => pgkilnUnsaved.changed(),
     setValue: (name, value) => setItemValue(name, value),
+    // (124) APEX: apex.widget.waitPopup; the returned function removes it
+    waitPopup: (message) => (showWait(message == null ? '' : String(message)), removeWait),
+    removeWaitPopup: () => removeWait(),
     showSuccess: (message) => showMessage(String(message), 'success'),
     showError: (message, item) => (item ? itemError(item, String(message)) : showMessage(String(message), 'error')),
     clearErrors: (...items) => clearErrors(items),
@@ -521,6 +524,39 @@ const pgkilnUnsaved = (() => {
     }
   }
 
+  // (124) APEX: Show / Remove Wait Popup. A modal dialog (the page below is inert, Escape doesn't
+  // close it) with a spinner and a status text read out by screen readers; <main> is aria-busy.
+  // It goes with the page on a submit; a submit the browser refused (an invalid field) or a page
+  // restored from the back/forward cache removes it.
+  let waitDlg = null;
+  function showWait(message) {
+    if (!waitDlg) {
+      waitDlg = document.createElement('dialog');
+      waitDlg.className = 'wait-popup';
+      waitDlg.tabIndex = -1;
+      const spin = document.createElement('span');
+      spin.className = 'wait-popup-spinner';
+      spin.setAttribute('aria-hidden', 'true');
+      const p = document.createElement('p');
+      p.className = 'wait-popup-text';
+      p.id = 'pgkiln-wait-text';
+      p.setAttribute('role', 'status');
+      waitDlg.setAttribute('aria-labelledby', p.id);
+      waitDlg.append(spin, p);
+      waitDlg.addEventListener('cancel', (e) => e.preventDefault());
+      body.appendChild(waitDlg);
+    }
+    waitDlg.querySelector('.wait-popup-text').textContent = message || text('da.wait');
+    if (!waitDlg.open) waitDlg.showModal();
+    (document.getElementById('main') || body).setAttribute('aria-busy', 'true');
+  }
+  function removeWait() {
+    if (waitDlg && waitDlg.open) waitDlg.close();
+    (document.getElementById('main') || body).removeAttribute('aria-busy');
+  }
+  document.addEventListener('invalid', () => waitDlg && waitDlg.open && removeWait(), true);
+  window.addEventListener('pageshow', (e) => e.persisted && removeWait());
+
   async function runDa(da, initial, value, extra) {
     const holds = conditionHolds(da, value);
     switch (da.action) {
@@ -567,6 +603,13 @@ const pgkilnUnsaved = (() => {
       case 'print':
         window.print();
         return;
+      // (124) the wait popup: until remove_wait_popup, the next page or a refused submit
+      case 'wait_popup':
+        showWait(da.message);
+        return;
+      case 'remove_wait_popup':
+        removeWait();
+        return;
       case 'current_position':
         return new Promise((resolve) => {
           if (!navigator.geolocation) return showError(text('item.locate_error')), resolve();
@@ -679,6 +722,28 @@ const pgkilnUnsaved = (() => {
   }
 
   const das = meta.das || [];
+  // (121) an AI agent's javascript tools: after the answer, the registered function of the action
+  // (pgkiln.actions.register) and the dynamic actions of the custom event of that name, with the arguments
+  scriptsLoaded.then(async () => {
+    for (const el of document.querySelectorAll('.assistant-action[data-ai-action]')) {
+      const name = el.dataset.aiAction;
+      let args = {};
+      try {
+        args = JSON.parse(el.dataset.aiArgs || '{}');
+      } catch {
+        // ignored
+      }
+      const region = el.closest('[id^="R"]');
+      el.remove();
+      const fn = actions.get(name);
+      try {
+        if (fn) await fn({ value: args, items: [], region, elements: [], message: null });
+        await runChain(das.filter((da) => da.event === 'custom' && da.trigger.some((t) => String(t).toLowerCase() === name.toLowerCase())), JSON.stringify(args));
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  });
   document.addEventListener('change', (e) => {
     const name = e.target.name;
     if (!name) return;
@@ -688,7 +753,7 @@ const pgkilnUnsaved = (() => {
   });
   document.addEventListener('click', (e) => {
     const btn = e.target.closest('[data-button]');
-    if (!btn) return;
+    if (!btn || e.target.closest('[data-menu-entry]')) return;
     const run = das.filter((da) => da.event === 'click' && da.trigger.includes(btn.dataset.button));
     // "Generate text with AI" on a submit button: the AJAX call replaces the submit
     // (without JavaScript the button submits and the page process runs instead)
@@ -705,6 +770,21 @@ const pgkilnUnsaved = (() => {
       });
     }
   });
+  // (124) menu_entry: an entry {"action": NAME} of a menu button was chosen (a declined confirm
+  // stops it in the capture handler below). Trigger: the entry's name or the menu button's name;
+  // the value a client-side condition tests is the entry's name.
+  document.addEventListener('click', (e) => {
+    const entry = e.target.closest?.('[data-menu-entry]');
+    if (!entry) return;
+    const name = entry.dataset.menuEntry;
+    const menu = entry.closest('details.menu');
+    const owner = (menu && menu.dataset.button) || '';
+    if (menu) {
+      menu.open = false;
+      menu.querySelector('summary')?.focus();
+    }
+    runChain(das.filter((da) => da.event === 'menu_entry' && (da.trigger.includes(name) || (owner && da.trigger.includes(owner)))), name);
+  });
   for (const da of das) if (da.event !== 'dialog_closed' && ['show', 'hide', 'enable', 'disable'].includes(da.action)) runDa(da, true);
   runChain(das.filter((da) => da.event === 'load'));
 
@@ -1882,7 +1962,7 @@ document.querySelectorAll('[data-rds]').forEach((nav) => {
 
 // Popup list of values: the select (which works without JavaScript) is hidden
 // behind a read-only field and a button that opens a dialog searching the
-// item's list of values on the server, page by page.
+// item's list of values on the server, page by page (loaded as the list scrolls).
 function enhancePopupLovs(root) {
   const selects = root.matches?.('select[data-popup-lov]') ? [root] : [...(root.querySelectorAll?.('select[data-popup-lov]') ?? [])];
   selects.forEach(popupLov);
@@ -1964,8 +2044,16 @@ function popupLov(sel) {
     sel.dispatchEvent(new Event('change', { bubbles: true }));
     dlg.close();
   };
+  // (124) infinite scrolling: the next page loads when the end of the list scrolls into view
+  // (APEX: lazy loading); without IntersectionObserver the dialog pages with ‹ and More
+  const infinite = 'IntersectionObserver' in window;
+  let observer = null;
+  let seq = 0;
+  let loading = false;
   async function load(p) {
     page = p;
+    const my = ++seq;
+    const append = infinite && p > 0;
     const results = dlg.querySelector('.popup-lov-results');
     const params = new URLSearchParams({ q: dlg.querySelector('.popup-lov-search').value, p: String(p), __csrf: csrf });
     // a cascading LOV sends its parents' current values
@@ -1975,31 +2063,45 @@ function popupLov(sel) {
       if (el) params.set(parent, el.value);
     }
     let json;
+    loading = true;
     try {
       const res = await fetch(d.popupLov, { method: 'POST', body: params, headers: { accept: 'application/json' }, credentials: 'same-origin' });
       json = await res.json();
       if (!res.ok) throw new Error(json.error || res.statusText);
     } catch (e) {
-      results.textContent = e.message;
+      if (my !== seq) return;
+      loading = false;
+      const end = results.querySelector('.popup-lov-sentinel');
+      if (append && end) end.textContent = e.message;
+      else results.textContent = e.message;
       return;
     }
-    results.replaceChildren();
-    if (!json.rows.length) {
-      const none = document.createElement('p');
-      none.textContent = d.noneLabel || 'Nothing found.';
-      results.append(none);
-      return;
-    }
-    const table = document.createElement('table');
-    table.className = 'popup-lov-table';
-    const tr = table.createTHead().insertRow();
-    for (const hd of json.headings) {
-      const th = document.createElement('th');
-      th.scope = 'col';
-      th.textContent = hd;
-      tr.append(th);
+    // a newer search (or page) replaced this one
+    if (my !== seq) return;
+    loading = false;
+    observer?.disconnect();
+    results.querySelector('.popup-lov-pages, .popup-lov-sentinel')?.remove();
+    let tb = append ? results.querySelector('.popup-lov-table tbody') : null;
+    if (!tb) {
+      results.replaceChildren();
+      if (!json.rows.length) {
+        const none = document.createElement('p');
+        none.textContent = d.noneLabel || 'Nothing found.';
+        results.append(none);
+        return;
+      }
+      const table = document.createElement('table');
+      table.className = 'popup-lov-table';
+      const tr = table.createTHead().insertRow();
+      for (const hd of json.headings) {
+        const th = document.createElement('th');
+        th.scope = 'col';
+        th.textContent = hd;
+        tr.append(th);
+      }
+      tb = table.createTBody();
+      results.append(table);
     }
-    const tb = table.createTBody();
     for (const r of json.rows) {
       const row = tb.insertRow();
       r.columns.forEach((v, i) => {
@@ -2015,7 +2117,19 @@ function popupLov(sel) {
       });
       if (r.value === sel.value) row.className = 'is-current';
     }
-    results.append(table);
+    if (infinite) {
+      if (!json.more) return;
+      const end = document.createElement('p');
+      end.className = 'popup-lov-sentinel muted';
+      end.textContent = d.loadingLabel || 'Loading more…';
+      results.append(end);
+      // the implicit root: whichever box scrolls the list (the dialog's body or the results), it clips
+      observer = observer || new IntersectionObserver((entries) => {
+        if (entries.some((x) => x.isIntersecting) && !loading) load(page + 1);
+      });
+      observer.observe(end);
+      return;
+    }
     if (json.more || page > 0) {
       const nav = document.createElement('div');
       nav.className = 'popup-lov-pages';

package/public/builder.css

@@ -1016,6 +1016,30 @@ button.is-busy { opacity: 0.7; cursor: progress; }
 .tr-preview .btn { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: calc(var(--radius) * 0.75); font: inherit; }
 .tr-preview .btn-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 .tr-preview-lavender .btn-hot { border-radius: 999px; }
+/* (sprint 117) the preview's menu: current page, its parent, and the Pillar Light / Dark appearances */
+.tr-preview { --nav-bg: var(--surface); --nav-text: var(--text); --nav-active: var(--accent-soft); --nav-current: var(--accent); }
+.tr-preview-iris { --nav-bg: #2f2b28; --nav-text: #ece8e4; --nav-active: #4a443f; --nav-current: #ffffff; }
+.tr-preview-main { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); }
+.tr-preview-nav, .tr-preview-nav ul { list-style: none; margin: 0; padding: 0; }
+.tr-preview-nav { padding: 0.5rem; background: var(--nav-bg); color: var(--nav-text); border-inline-end: 1px solid var(--border); font-size: 0.85rem; }
+.tr-preview-nav ul { margin-inline-start: 0.9rem; padding-inline-start: 0.3rem; border-inline-start: 1px solid color-mix(in srgb, var(--nav-current) 55%, transparent); }
+.tr-preview-nav span { display: flex; align-items: center; gap: 0.4rem; }
+.tr-preview-nav li > span { padding: 0.3rem 0.5rem; border-radius: 6px; border-inline-start: 3px solid transparent; }
+.tr-preview-nav .icon { width: 1em; height: 1em; }
+.tr-preview-nav .tr-nav-parent { font-weight: 600; }
+.tr-preview-nav .tr-nav-parent .icon { color: var(--nav-current); }
+.tr-preview-nav .tr-nav-current { background: var(--nav-active); color: var(--nav-current); font-weight: 600; border-inline-start-color: var(--accent); }
+.tr-preview[data-appearance^="pillar"] .tr-preview-header { box-shadow: inset 0 4px 0 var(--strip, var(--accent)); }
+.tr-preview[data-appearance^="pillar"] .tr-preview-nav li > span { border-radius: 999px; }
+.tr-preview[data-appearance^="pillar"] .tr-nav-current { background: var(--accent); color: var(--accent-text); border-inline-start-color: transparent; }
+.tr-preview[data-appearance="pillar_light"] { --header: var(--surface-2); --header-text: var(--text); --nav-bg: var(--surface-2); --nav-text: var(--text); --nav-current: var(--accent); }
+.tr-preview[data-appearance="pillar_light"] .tr-preview-header { border-bottom: 1px solid var(--border); }
+.tr-preview[data-appearance="pillar_dark"] { --nav-bg: var(--header); --nav-text: var(--header-text); --nav-current: var(--header-text); }
+.tr-preview[data-appearance="pillar_dark"] .tr-preview-nav { border-inline-end-color: transparent; }
+@media (max-width: 640px) {
+  .tr-preview-main { grid-template-columns: minmax(0, 1fr); }
+  .tr-preview-nav { border-inline-end: 0; border-bottom: 1px solid var(--border); }
+}
 
 /* icon picker (forms.ts iconPicker) */
 .icon-picker > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; list-style: none; background: var(--surface); }
@@ -1274,6 +1298,13 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .dbu-members { max-height: 16rem; overflow: auto; }
 .dbu-schemas .te-c { text-align: center; width: 1%; white-space: nowrap; }
 .dbu-sql { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* (sprint 119) a table's Security: roles × columns and masks */
+.ds-section { margin-block: 1.25rem; }
+.ds-section h2 { display: flex; align-items: center; gap: 0.4rem; }
+.ds-table .ds-cell .check { display: flex; white-space: nowrap; margin: 0; }
+.ds-table .ds-c { text-align: center; width: 1%; }
+.ds-table th code { white-space: nowrap; }
+.ds .source { white-space: pre-wrap; overflow-wrap: anywhere; }
 .dbu-list td { white-space: normal; overflow: visible; max-width: 24rem; }
 .dbu-list td .tag { margin: 0.1rem 0; }
 .dbu-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
@@ -1369,7 +1400,7 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .wh-top-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
 .wh-top-head h2 { margin: 0; }
 .wh-timeframe { display: inline-flex; }
-.wh-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: 10px; }
+.wh-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 10px 0 20px; }
 .wh-top > .region { margin: 0; min-width: 0; }
 .wh-message { margin-bottom: 16px; }
 .wh-message-text { margin: 0 0 8px; white-space: pre-line; overflow-wrap: anywhere; }
@@ -1393,3 +1424,104 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .dataset-page pre.code { white-space: pre-wrap; overflow-wrap: anywhere; }
 .dataset-schema { flex-wrap: wrap; }
 .dataset-schema > select { flex: 1 1 10rem; min-width: 0; }
+
+/* (sprint 113) Team Development: issues, board, labels, milestones, templates */
+.team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
+.team-head h1 { margin: 0; font-size: var(--fs-xl); }
+.team-head .team-counts { margin: 0; flex: 1 1 200px; }
+.team-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
+@media (min-width: 1024px) { .team-layout { grid-template-columns: minmax(0, 1fr) 280px; } }
+.team-main { min-width: 0; }
+.team-side { min-width: 0; }
+.team-side section { padding: 10px 0; border-top: 1px solid var(--border); }
+.team-side section:first-child { border-top: 0; padding-top: 0; }
+.team-side h2 { margin: 0 0 6px; font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
+.team-side p, .team-side li { overflow-wrap: anywhere; }
+.team-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px 12px; align-items: end; margin-bottom: 10px; }
+.team-filters .field { margin: 0; min-width: 0; }
+.team-filters select, .team-filters input { width: 100%; min-width: 0; }
+.team-filters .buttons { margin: 0; }
+.team-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.team-issue { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
+.team-issue.is-closed { opacity: 0.8; }
+.team-issue-title { display: flex; gap: 6px; align-items: baseline; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
+.team-issue-title .icon { flex: none; width: 15px; height: 15px; color: var(--hot); align-self: center; }
+.team-issue.is-closed .team-issue-title .icon { color: var(--success, #2f7d32); }
+.team-issue-title a { min-width: 0; }
+.team-labels { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
+.team-issue-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; overflow-wrap: anywhere; }
+.team-issue-meta span { display: inline-flex; gap: 4px; align-items: center; min-width: 0; }
+.team-issue-meta .icon { width: 13px; height: 13px; flex: none; }
+.team-label { display: inline-block; max-width: 100%; padding: 1px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
+.team-label-red { background: #b42318; color: #fff; }
+.team-label-orange { background: #c4520f; color: #fff; }
+.team-label-yellow { background: #e6b400; color: #1e1d1b; }
+.team-label-green { background: #2f7d32; color: #fff; }
+.team-label-teal { background: #0e7a74; color: #fff; }
+.team-label-blue { background: #1a5f99; color: #fff; }
+.team-label-purple { background: #6941c6; color: #fff; }
+.team-label-gray { background: #5e5a54; color: #fff; }
+.team-board-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
+.team-board-filters { margin-bottom: 10px; }
+.team-board-filters > summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; color: var(--muted); }
+.team-board-filters[open] > summary { margin-bottom: 8px; }
+.team-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: start; }
+.team-col { min-width: 0; padding: 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
+.team-col-head { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: var(--fs-sm, 0.9rem); overflow-wrap: anywhere; }
+.team-move { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
+.team-move select { flex: 1 1 120px; min-width: 0; }
+.team-status { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; margin-right: 6px; }
+.team-status-open { background: var(--accent-soft); color: var(--text); }
+.team-status-closed { background: var(--surface-3); color: var(--muted); }
+.team-issue-h { margin: 0 0 4px; font-size: var(--fs-lg, 1.2rem); overflow-wrap: anywhere; }
+.team-md { overflow-wrap: anywhere; min-width: 0; }
+.team-md pre { overflow-x: auto; max-width: 100%; }
+.team-body { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
+.mention { font-weight: 600; color: var(--accent); }
+.team-timeline { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
+.team-comment { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); min-width: 0; }
+.team-comment-head { margin-bottom: 4px; overflow-wrap: anywhere; }
+.team-event { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
+.team-event .icon { flex: none; width: 13px; height: 13px; margin-top: 3px; }
+.team-response-pick, .team-template-pick, .team-save-view { display: flex; flex-wrap: wrap; gap: 6px; align-items: end; margin-bottom: 8px; }
+.team-response-pick .field, .team-template-pick .field { margin: 0; min-width: 0; flex: 1 1 200px; }
+.team-save-view input { flex: 1 1 140px; min-width: 0; }
+.team-edit { margin-top: 16px; }
+.team-edit > summary { list-style: none; }
+.team-edit[open] > summary { margin-bottom: 10px; }
+.team-fieldset { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; min-width: 0; }
+.team-check-group { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin-bottom: 4px; }
+.team-check-group > .small { flex-basis: 100%; }
+.team-label-list, .team-template-list, .team-milestones, .team-views, .team-mentions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
+.team-label-list li, .team-template-list li, .team-views li, .team-mentions li { overflow-wrap: anywhere; min-width: 0; }
+.team-views li { display: flex; gap: 6px; justify-content: space-between; align-items: center; }
+.team-views a[aria-current] { font-weight: 700; }
+.team-inline-edit { margin-top: 4px; }
+.team-inline-edit[open] { padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
+.team-milestone { padding: 8px 0; border-bottom: 1px solid var(--border); }
+.team-milestone-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; overflow-wrap: anywhere; }
+.team-milestone-head .icon { width: 14px; height: 14px; margin-right: 4px; }
+.team-progress { width: 100%; max-width: 360px; height: 8px; }
+.team-page-issues { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 6px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--warning-soft); overflow-wrap: anywhere; }
+.team-page-issues .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
+.wh-team-n { margin-left: auto; padding-left: 8px; }
+.feedback-issue { margin: 4px 0; }
+
+/* (116) App Builder list: updated by, working copies and the application lock (WS-12) */
+.ab-name .ab-lock { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--muted); }
+.ab-name .ab-lock .icon { width: 15px; height: 15px; }
+.ab-by { overflow-wrap: anywhere; }
+.ab-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
+.ab-card-badges .tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; text-decoration: none; }
+.ab-card-badges .tag .icon { width: 13px; height: 13px; flex: none; }
+/* (sprint 118) Administration → Mail queue, Network access */
+.mail-queue-filters { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 12px; }
+.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); }
+.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; }
+.host-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.host-list code { overflow-wrap: anywhere; }

package/public/builder.js

@@ -823,6 +823,10 @@
       set('--font', from(lists.fonts, form.elements.font?.value));
       set('--font-size', from(lists.sizes, form.elements.font_size?.value));
       set('--radius', from(lists.radii, form.elements.radius?.value));
+      // (sprint 117) the navigation appearance ('' = the application's, 'default' = none) and the header strip
+      const ap = form.elements.appearance?.value ?? '';
+      preview.dataset.appearance = ap === 'default' ? '' : ap || preview.dataset.trAppAppearance || '';
+      set('--strip', own('strip') ? hex(form.elements.strip?.value) : '');
     };
     form.addEventListener('input', update);
     form.addEventListener('change', update);
@@ -1282,3 +1286,50 @@ document.querySelectorAll('input[data-filter-tree]').forEach((el) => {
   });
   for (const b of form.querySelectorAll('[data-cron-nojs]')) b.hidden = true;
 })();
+
+// (123) Workflow diagram as PNG: the server's SVG file drawn on a canvas. Without JavaScript the
+// button stays hidden and the SVG link is the download.
+(() => {
+  for (const button of document.querySelectorAll('[data-wf-png]')) {
+    const link = button.parentElement?.querySelector('[data-wf-svg]');
+    if (!link || typeof HTMLCanvasElement === 'undefined') continue;
+    button.hidden = false;
+    button.addEventListener('click', async () => {
+      button.disabled = true;
+      try {
+        const res = await fetch(link.href, { credentials: 'same-origin' });
+        if (!res.ok) throw new Error(`HTTP ${res.status}`);
+        const svg = await res.text();
+        const img = new Image();
+        await new Promise((ok, fail) => {
+          img.onload = ok;
+          img.onerror = () => fail(new Error('The diagram could not be drawn.'));
+          img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+        });
+        const scale = 2;
+        const canvas = document.createElement('canvas');
+        canvas.width = Math.max(1, Math.round((img.naturalWidth || 800) * scale));
+        canvas.height = Math.max(1, Math.round((img.naturalHeight || 600) * scale));
+        const g = canvas.getContext('2d');
+        g.fillStyle = '#ffffff';
+        g.fillRect(0, 0, canvas.width, canvas.height);
+        g.drawImage(img, 0, 0, canvas.width, canvas.height);
+        const blob = await new Promise((ok) => canvas.toBlob(ok, 'image/png'));
+        if (!blob) throw new Error('The browser could not make a PNG.');
+        const a = document.createElement('a');
+        a.href = URL.createObjectURL(blob);
+        a.download = 'workflow.png';
+        const name = /([^/?]+)\.svg/.exec(res.headers.get('content-disposition') || '');
+        if (name) a.download = `${name[1]}.png`;
+        document.body.append(a);
+        a.click();
+        a.remove();
+        setTimeout(() => URL.revokeObjectURL(a.href), 10000);
+      } catch (e) {
+        window.alert(e.message);
+      } finally {
+        button.disabled = false;
+      }
+    });
+  }
+})();

package/src/ai/chat.ts

@@ -1,10 +1,9 @@
 import Anthropic from '@anthropic-ai/sdk';
 import OpenAI from 'openai';
 import { owner } from '../db.ts';
-import { decryptSecret } from '../secrets.ts';
 import { claudeError } from './anthropic.ts';
 import { openAiError } from './openai.ts';
-import { envKeyName, MAX_PROMPT_CHARS, MAX_SYSTEM_CHARS, serviceForApp, usageToday, logUsage, type AiService, type CallInfo } from './service.ts';
+import { baseUrlFor, MAX_PROMPT_CHARS, MAX_SYSTEM_CHARS, serviceForApp, serviceKey, usageToday, logUsage, type AiService, type CallInfo } from './service.ts';
 import { AiError } from './types.ts';
 
 // Conversations with tools (AI assistant regions, src/runtime/assistant.ts):
@@ -23,7 +22,9 @@ import { AiError } from './types.ts';
 // service's effort, server-side refusal fallbacks. The assistant's content
 // is appended to the history unchanged (thinking blocks included): the
 // history only ever grows, as the API expects. OpenAI: Chat Completions with
-// strict function tools.
+// strict function tools; also Gemini (its OpenAI-compatible endpoint) and
+// OpenAI-compatible endpoints (121). An agent (src/runtime/ai-agents.ts)
+// may set the reasoning effort and a lower output limit per call.
 
 export interface ChatTool {
   name: string;
@@ -47,6 +48,10 @@ export interface ChatRequest {
   /** at most this many rounds of tool calls (then the model must answer) */
   maxRounds: number;
   runTool(name: string, input: Record<string, unknown>): Promise<ToolOutcome>;
+  /** (121) an agent's reasoning effort: Claude's output_config.effort, OpenAI's reasoning_effort (else the service's own) */
+  effort?: 'low' | 'medium' | 'high' | null;
+  /** (121) an agent's output limit per call (never above the service's maximum) */
+  maxTokens?: number | null;
 }
 
 export interface ChatResult {
@@ -69,16 +74,9 @@ export interface ChatInfo {
 /** Tool results are cut to this many characters (the model sees that they were). */
 export const MAX_TOOL_RESULT_CHARS = 20_000;
 
-function apiKey(s: AiService) {
-  let key: string | undefined;
-  try {
-    key = s.api_key_enc ? decryptSecret(s.api_key_enc) : process.env[envKeyName(s.provider)];
-  } catch (e) {
-    throw new AiError('config', `AI service ${s.name}: ${(e as Error).message}`);
-  }
-  if (!key) throw new AiError('config', `AI service ${s.name} has no API key (enter one in the builder, or set ${envKeyName(s.provider)} on the server).`);
-  return key;
-}
+
+/** The output limit of one call: the agent's, never above the service's. */
+const outputLimit = (s: AiService, req: ChatRequest) => Math.min(s.max_tokens, req.maxTokens ?? s.max_tokens);
 
 const clip = (text: string) => (text.length > MAX_TOOL_RESULT_CHARS ? `${text.slice(0, MAX_TOOL_RESULT_CHARS)}\n[cut off: the result was longer]` : text);
 
@@ -114,7 +112,7 @@ async function metered<T extends { model: string; input: number; output: number
 const TOO_MANY_ROUNDS = 'The assistant needed more steps than it may take for one question: ask a simpler question, or start a new conversation.';
 
 async function claudeChat(s: AiService, limits: Parameters<typeof metered>[1], req: ChatRequest, info: ChatInfo): Promise<ChatResult> {
-  const client = new Anthropic({ apiKey: apiKey(s), authToken: null, baseURL: s.base_url || undefined, timeout: s.timeout_s * 1000, maxRetries: 1 });
+  const client = new Anthropic({ apiKey: serviceKey(s), authToken: null, baseURL: baseUrlFor(s), timeout: s.timeout_s * 1000, maxRetries: 1 });
   const messages = [...(req.history as Anthropic.Beta.BetaMessageParam[]), { role: 'user', content: req.message } as Anthropic.Beta.BetaMessageParam];
   const tools: Anthropic.Beta.BetaTool[] = req.tools.map((t) => ({
     name: t.name, description: t.description, strict: true, input_schema: t.parameters as Anthropic.Beta.BetaTool.InputSchema,
@@ -126,11 +124,11 @@ async function claudeChat(s: AiService, limits: Parameters<typeof metered>[1], r
       try {
         m = await client.beta.messages.stream({
           model: s.model,
-          max_tokens: s.max_tokens,
+          max_tokens: outputLimit(s, req),
           system: req.system,
           messages,
           ...(tools.length ? { tools } : {}),
-          ...(s.effort ? { output_config: { effort: s.effort } } : {}),
+          ...((req.effort ?? s.effort) ? { output_config: { effort: (req.effort ?? s.effort)! } } : {}),
           ...(s.refusal_fallback ? { betas: ['server-side-fallback-2026-07-01'], fallbacks: 'default' as const } : {}),
         }).finalMessage();
       } catch (e) {
@@ -161,7 +159,7 @@ async function claudeChat(s: AiService, limits: Parameters<typeof metered>[1], r
 }
 
 async function openAiChat(s: AiService, limits: Parameters<typeof metered>[1], req: ChatRequest, info: ChatInfo): Promise<ChatResult> {
-  const client = new OpenAI({ apiKey: apiKey(s), baseURL: s.base_url || undefined, timeout: s.timeout_s * 1000, maxRetries: 1 });
+  const client = new OpenAI({ apiKey: serviceKey(s), baseURL: baseUrlFor(s), timeout: s.timeout_s * 1000, maxRetries: 1 });
   const messages = [...(req.history as OpenAI.Chat.ChatCompletionMessageParam[]), { role: 'user', content: req.message } as OpenAI.Chat.ChatCompletionMessageParam];
   const tools: OpenAI.Chat.ChatCompletionTool[] = req.tools.map((t) => ({
     type: 'function', function: { name: t.name, description: t.description, parameters: t.parameters, strict: true },
@@ -175,8 +173,10 @@ async function openAiChat(s: AiService, limits: Parameters<typeof metered>[1], r
           model: s.model,
           // the system prompt is sent with each request, not kept in the history
           messages: [{ role: 'system', content: req.system }, ...messages],
-          max_completion_tokens: s.max_tokens,
+          max_completion_tokens: outputLimit(s, req),
           ...(tools.length ? { tools } : {}),
+          // (121) an agent's reasoning effort; models without reasoning refuse it, so none is sent without one
+          ...(req.effort ? { reasoning_effort: req.effort } : {}),
         });
       } catch (e) {
         throw openAiError(e);

package/src/ai/service.ts

@@ -4,7 +4,7 @@ import { ClaudeProvider } from './anthropic.ts';
 import { OpenAiProvider } from './openai.ts';
 import { AiError, type AiProvider, type GenerateRequest, type GenerateResult, type ProviderName } from './types.ts';
 
-// AI services (migration 060): an administrator configures them in the
+// AI services (migration 060; Gemini and OpenAI-compatible endpoints: 121): an administrator configures them in the
 // builder (Workspace utilities → AI services) and allows each application
 // to use some of them, with optional limits per day. Every call goes
 // through generate() here: the service must exist, be enabled and be
@@ -35,33 +35,57 @@ export const DEFAULT_CLAUDE_MODEL = 'claude-opus-5-5';
 export const MAX_PROMPT_CHARS = 200_000;
 export const MAX_SYSTEM_CHARS = 50_000;
 
-const ENV_KEY: Record<ProviderName, string> = { anthropic: 'ANTHROPIC_API_KEY', openai: 'OPENAI_API_KEY' };
+const ENV_KEY: Record<ProviderName, string> = {
+  anthropic: 'ANTHROPIC_API_KEY', openai: 'OPENAI_API_KEY', gemini: 'GEMINI_API_KEY', openai_compatible: 'OPENAI_COMPATIBLE_API_KEY',
+};
 
 export const envKeyName = (p: ProviderName) => ENV_KEY[p];
 
+/** (121) The providers, as the builder names them. */
+export const PROVIDER_LABELS: Record<ProviderName, string> = {
+  anthropic: 'Claude', openai: 'OpenAI', gemini: 'Gemini', openai_compatible: 'OpenAI-compatible',
+};
+export const providerLabel = (p: string) => PROVIDER_LABELS[p as ProviderName] ?? p;
+
+/** (121) Google's OpenAI-compatible endpoint for Gemini (used when a Gemini service names no base URL). */
+export const GEMINI_BASE_URL = 'https://generativelanguage.googleapis.com/v1beta/openai/';
+
+/** The base URL a service's SDK client uses: its own, Gemini's default, or the SDK's default (undefined). */
+export const baseUrlFor = (s: Pick<AiService, 'provider' | 'base_url'>) => s.base_url || (s.provider === 'gemini' ? GEMINI_BASE_URL : undefined);
+
 /** Where the service's key comes from: stored (encrypted), the server's environment, or nowhere. */
 export function keySource(s: Pick<AiService, 'provider' | 'api_key_enc'>): 'stored' | 'env' | 'missing' {
   if (s.api_key_enc) return 'stored';
   return process.env[ENV_KEY[s.provider]] ? 'env' : 'missing';
 }
 
+/**
+ * The service's API key, decrypted only here (never stored elsewhere): the stored one, else the server's
+ * environment variable. An OpenAI-compatible endpoint may need none (a local Ollama): the SDK then sends a
+ * placeholder.
+ */
+export function serviceKey(s: AiService): string {
+  let key: string | undefined;
+  try {
+    key = s.api_key_enc ? decryptSecret(s.api_key_enc) : process.env[ENV_KEY[s.provider]];
+  } catch (e) {
+    throw new AiError('config', `AI service ${s.name}: ${(e as Error).message}`);
+  }
+  if (!key && s.provider === 'openai_compatible') return 'none';
+  if (!key) throw new AiError('config', `AI service ${s.name} has no API key (enter one in the builder, or set ${ENV_KEY[s.provider]} on the server).`);
+  return key;
+}
+
 export async function loadService(name: string): Promise<AiService | undefined> {
   return owner.one<AiService>('select * from meta.ai_service where name = $1', [name.toUpperCase()]);
 }
 
 /** The provider of a service, with its key (decrypted only here, never stored elsewhere). */
 export function providerFor(s: AiService): AiProvider {
-  let apiKey: string | undefined;
-  try {
-    apiKey = s.api_key_enc ? decryptSecret(s.api_key_enc) : process.env[ENV_KEY[s.provider]];
-  } catch (e) {
-    throw new AiError('config', `AI service ${s.name}: ${(e as Error).message}`);
-  }
-  if (!apiKey) throw new AiError('config', `AI service ${s.name} has no API key (enter one in the builder, or set ${ENV_KEY[s.provider]} on the server).`);
   const conf = {
     model: s.model,
-    apiKey,
-    baseUrl: s.base_url,
+    apiKey: serviceKey(s),
+    baseUrl: baseUrlFor(s),
     timeoutMs: s.timeout_s * 1000,
     maxTokens: s.max_tokens,
     effort: s.effort,

package/src/ai/types.ts

@@ -1,10 +1,15 @@
 // The provider interface of pgkiln's AI features (src/ai/): one request in,
 // one answer out, whatever the provider. Providers live in anthropic.ts
 // (Claude, with the official @anthropic-ai/sdk) and openai.ts (the official
-// openai SDK); service.ts picks one for an AI service and adds the checks,
+// openai SDK: OpenAI itself, Google Gemini through its OpenAI-compatible
+// endpoint, and any OpenAI-compatible endpoint such as Ollama, vLLM or Azure
+// OpenAI); service.ts picks one for an AI service and adds the checks,
 // limits and the usage log.
 
-export type ProviderName = 'anthropic' | 'openai';
+export type ProviderName = 'anthropic' | 'openai' | 'gemini' | 'openai_compatible';
+
+/** Providers that speak OpenAI's Chat Completions (the openai SDK). */
+export const isOpenAiFamily = (p: ProviderName) => p !== 'anthropic';
 
 export interface ProviderConfig {
   /** the model, exactly as the developer entered it (never changed or downgraded) */