pgkiln 0.72.0 → 0.74.0

package/public/app.js

@@ -264,6 +264,8 @@ const pgkilnUnsaved = (() => {
     if (el.closest('[data-range]')) return els.some((e) => e.value) ? els.slice(0, 2).map((e) => e.value).join(':') : '';
     if (el.type === 'radio') return (els.find((e) => e.checked) || {}).value || '';
     if (el.type === 'checkbox') return el.checked ? 'true' : 'false';
+    // (140) a multi-value list (multiselect, shuttle, select many): its values colon-separated, in order
+    if (el.tagName === 'SELECT' && el.multiple) return [...el.selectedOptions].map((o) => o.value).join(':');
     return el.value;
   }
 
@@ -281,7 +283,10 @@ const pgkilnUnsaved = (() => {
       els.slice(0, 2).forEach((e, i) => (e.value = parts[i] || ''));
     } else if (el.type === 'radio') els.forEach((e) => (e.checked = e.value === value));
     else if (el.type === 'checkbox') el.checked = ['true', 't', 'on', '1', 'yes', 'y'].includes(String(value).toLowerCase());
-    else el.value = value ?? '';
+    else if (el.tagName === 'SELECT' && el.multiple) {
+      const values = String(value ?? '').split(':').filter(Boolean);
+      for (const o of el.options) o.selected = values.includes(o.value);
+    } else el.value = value ?? '';
     if (depth < 5) {
       depth++;
       el.dispatchEvent(new Event('change', { bubbles: true }));
@@ -2162,6 +2167,377 @@ function popupLov(sel) {
   });
 }
 
+// (140; APEX: Shuttle) Two lists, available and chosen, with buttons to move one or all values across and to
+// order the chosen ones. The item's own <select multiple> (it works without JavaScript) stays in the form, hidden:
+// its selected options are the value, in the order of the chosen list (they come first in it).
+function enhanceShuttles(root) {
+  const boxes = root.matches?.('[data-shuttle]') ? [root] : [...(root.querySelectorAll?.('[data-shuttle]') ?? [])];
+  boxes.forEach(shuttle);
+}
+document.addEventListener('pgkiln:replaced', (e) => e.detail && enhanceShuttles(e.detail));
+enhanceShuttles(document);
+function shuttle(box) {
+  const sel = box.querySelector('select[multiple]');
+  if (!sel || box.dataset.enhanced) return;
+  box.dataset.enhanced = '1';
+  const d = box.dataset;
+  const id = sel.id;
+  const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+  const name = (label?.textContent || sel.name).replace(/\*\s*$/, '').trim();
+  const el = (tag, cls) => {
+    const x = document.createElement(tag);
+    if (cls) x.className = cls;
+    return x;
+  };
+  const list = (suffix, text) => {
+    const l = el('select', 'shuttle-list');
+    l.multiple = true;
+    l.id = `${id}_${suffix}`;
+    l.size = Math.max(sel.size || 6, 6);
+    l.setAttribute('aria-label', `${name}: ${text}`);
+    for (const a of ['aria-describedby', 'aria-invalid']) if (sel.hasAttribute(a)) l.setAttribute(a, sel.getAttribute(a));
+    return l;
+  };
+  const avail = list('available', d.availableLabel || 'Available');
+  const chosen = list('chosen', d.chosenLabel || 'Selected');
+  const filter = el('input', 'shuttle-filter');
+  filter.type = 'search';
+  filter.id = `${id}_filter`;
+  filter.autocomplete = 'off';
+  filter.placeholder = d.filterLabel || 'Filter';
+  filter.setAttribute('aria-label', `${name}: ${d.filterLabel || 'Filter'}`);
+  filter.setAttribute('aria-controls', avail.id);
+  const button = (cmd, text, glyph) => {
+    const b = el('button', 'btn btn-sm shuttle-btn');
+    b.type = 'button';
+    b.dataset.cmd = cmd;
+    b.title = text;
+    b.setAttribute('aria-label', text);
+    const g = el('span');
+    g.setAttribute('aria-hidden', 'true');
+    g.textContent = glyph;
+    b.append(g);
+    return b;
+  };
+  const moves = el('div', 'shuttle-moves');
+  moves.setAttribute('role', 'group');
+  moves.append(button('all', d.moveAllLabel || 'Move all', '»'), button('move', d.moveLabel || 'Move', '›'), button('remove', d.removeLabel || 'Remove', '‹'), button('none', d.removeAllLabel || 'Remove all', '«'));
+  const order = el('div', 'shuttle-order');
+  order.setAttribute('role', 'group');
+  order.append(button('top', d.topLabel || 'Move to top', '⤒'), button('up', d.upLabel || 'Move up', '↑'), button('down', d.downLabel || 'Move down', '↓'), button('bottom', d.bottomLabel || 'Move to bottom', '⤓'));
+  const left = el('div', 'shuttle-col');
+  left.append(filter, avail);
+  const right = el('div', 'shuttle-col');
+  right.append(chosen);
+  const ui = el('div', 'shuttle-ui');
+  ui.append(left, moves, right, order);
+  sel.hidden = true;
+  box.append(ui);
+  if (label) label.htmlFor = avail.id;
+
+  const src = new Map(); // a shown option → the item's option
+  const lovIndex = (o) => Number(o.dataset.i ?? 0);
+  // the item's options: the chosen ones first (in their order), then the others in the list of values' order
+  const arrange = (picked) => {
+    const rest = [...sel.options].filter((o) => !picked.includes(o)).sort((a, b) => lovIndex(a) - lovIndex(b));
+    for (const o of sel.options) o.selected = picked.includes(o);
+    sel.append(...picked, ...rest);
+  };
+  const picked = () => [...sel.options].filter((o) => o.selected);
+  const draw = (keep = new Set()) => {
+    const q = filter.value.trim().toLowerCase();
+    const fill = (l, opts) => {
+      l.replaceChildren(
+        ...opts.map((o) => {
+          const x = new Option(o.text, o.value);
+          x.selected = keep.has(o);
+          src.set(x, o);
+          return x;
+        }),
+      );
+    };
+    src.clear();
+    fill(avail, [...sel.options].filter((o) => !o.selected && (!q || o.text.toLowerCase().includes(q))));
+    fill(chosen, picked());
+  };
+  let own = false;
+  const changed = (keep) => {
+    draw(keep);
+    own = true;
+    sel.dispatchEvent(new Event('change', { bubbles: true }));
+    own = false;
+  };
+  const marked = (l) => [...l.selectedOptions].map((x) => src.get(x)).filter(Boolean);
+  const run = (cmd) => {
+    let now = picked();
+    let keep = new Set();
+    if (cmd === 'move' || cmd === 'all') {
+      const add = cmd === 'all' ? [...avail.options].map((x) => src.get(x)) : marked(avail);
+      if (!add.length) return;
+      now = [...now, ...add];
+      keep = new Set(add);
+    } else if (cmd === 'remove' || cmd === 'none') {
+      const drop = cmd === 'none' ? now : marked(chosen);
+      if (!drop.length) return;
+      now = now.filter((o) => !drop.includes(o));
+      keep = new Set(drop);
+    } else {
+      const m = marked(chosen);
+      if (!m.length) return;
+      keep = new Set(m);
+      const others = now.filter((o) => !keep.has(o));
+      if (cmd === 'top') now = [...m, ...others];
+      else if (cmd === 'bottom') now = [...others, ...m];
+      else {
+        const step = cmd === 'up' ? -1 : 1;
+        const idx = (cmd === 'up' ? m : [...m].reverse()).map((o) => now.indexOf(o));
+        for (const i of idx) {
+          const j = i + step;
+          if (j < 0 || j >= now.length || keep.has(now[j])) continue;
+          [now[i], now[j]] = [now[j], now[i]];
+        }
+      }
+    }
+    arrange(now);
+    changed(keep);
+  };
+  ui.addEventListener('click', (e) => {
+    const b = e.target.closest('button[data-cmd]');
+    if (b) run(b.dataset.cmd);
+  });
+  avail.addEventListener('dblclick', () => run('move'));
+  chosen.addEventListener('dblclick', () => run('remove'));
+  // the keyboard: Enter moves the marked values across; in the chosen list Alt+arrows order them
+  avail.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      run('move');
+    }
+  });
+  chosen.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' || e.key === 'Delete') {
+      e.preventDefault();
+      run('remove');
+    } else if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+      e.preventDefault();
+      run(e.key === 'ArrowUp' ? (e.shiftKey ? 'top' : 'up') : e.shiftKey ? 'bottom' : 'down');
+    }
+  });
+  // the lists' own change events are not the item's
+  for (const l of [avail, chosen]) l.addEventListener('change', (e) => e.stopPropagation());
+  filter.addEventListener('input', () => draw(new Set(marked(avail))));
+  filter.addEventListener('change', (e) => e.stopPropagation());
+  filter.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') e.preventDefault();
+  });
+  // a dynamic action (Set value, Clear) changed the item
+  sel.addEventListener('change', () => {
+    if (!own) draw();
+  });
+  arrange(picked());
+  draw();
+}
+
+// (140; APEX 24.2: Select One, Select Many) A search field over the item's list of values: typing filters a list
+// box below it (arrow keys, Enter, Escape); Select Many shows the chosen values as chips with a remove button.
+// The item's <select> (single or multiple; it works without JavaScript) stays in the form, hidden, as the value.
+function enhanceSelectPicks(root) {
+  const boxes = root.matches?.('[data-select-pick]') ? [root] : [...(root.querySelectorAll?.('[data-select-pick]') ?? [])];
+  boxes.forEach(selectPick);
+}
+let selectPickSeq = 0;
+document.addEventListener('pgkiln:replaced', (e) => e.detail && enhanceSelectPicks(e.detail));
+enhanceSelectPicks(document);
+function selectPick(box) {
+  const sel = box.querySelector('select');
+  if (!sel || box.dataset.enhanced) return;
+  box.dataset.enhanced = '1';
+  const d = box.dataset;
+  const many = sel.multiple;
+  const id = sel.id;
+  const label = document.querySelector(`label[for="${CSS.escape(id)}"]`);
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.id = `${id}_search`;
+  input.className = 'select-pick-input';
+  input.autocomplete = 'off';
+  input.spellcheck = false;
+  input.placeholder = d.searchLabel || 'Search…';
+  input.setAttribute('role', 'combobox');
+  input.setAttribute('aria-autocomplete', 'list');
+  input.setAttribute('aria-expanded', 'false');
+  for (const a of ['aria-describedby', 'aria-invalid', 'aria-required']) if (sel.hasAttribute(a)) input.setAttribute(a, sel.getAttribute(a));
+  const listId = `${id}_listbox_${++selectPickSeq}`;
+  input.setAttribute('aria-controls', listId);
+  const list = document.createElement('ul');
+  list.id = listId;
+  list.className = 'select-pick-list';
+  list.setAttribute('role', 'listbox');
+  if (label) list.setAttribute('aria-label', label.textContent.replace(/\*\s*$/, '').trim());
+  if (many) list.setAttribute('aria-multiselectable', 'true');
+  list.hidden = true;
+  const chips = document.createElement('ul');
+  chips.className = 'tag-list select-pick-chips';
+  const ui = document.createElement('div');
+  ui.className = 'select-pick-ui';
+  if (many) ui.append(chips);
+  ui.append(input, list);
+  sel.hidden = true;
+  box.append(ui);
+  if (label) label.htmlFor = input.id;
+  const status = document.createElement('span');
+  status.className = 'sr-only';
+  status.setAttribute('aria-live', 'polite');
+  ui.append(status);
+
+  let active = -1;
+  let shown = [];
+  const options = () => [...sel.options];
+  const textOf = (o) => o.text;
+  const syncInput = () => {
+    if (!many) input.value = sel.value ? (sel.selectedOptions[0]?.text ?? '') : '';
+  };
+  const drawChips = () => {
+    if (!many) return;
+    chips.replaceChildren(
+      ...[...sel.selectedOptions].map((o) => {
+        const li = document.createElement('li');
+        li.className = 'tag';
+        li.append(o.text);
+        const x = document.createElement('button');
+        x.type = 'button';
+        x.className = 'tag-remove';
+        x.textContent = '×';
+        x.setAttribute('aria-label', (d.removeLabel || 'Remove {value}').replace('{value}', o.text));
+        x.addEventListener('click', () => {
+          o.selected = false;
+          changed();
+          input.focus();
+        });
+        li.append(x);
+        return li;
+      }),
+    );
+  };
+  let own = false;
+  const changed = () => {
+    drawChips();
+    syncInput();
+    if (!list.hidden) draw();
+    own = true;
+    sel.dispatchEvent(new Event('change', { bubbles: true }));
+    own = false;
+  };
+  const setActive = (i) => {
+    active = i;
+    [...list.children].forEach((li, n) => li.classList.toggle('is-active', n === i));
+    const li = list.children[i];
+    if (li && li.id) {
+      input.setAttribute('aria-activedescendant', li.id);
+      li.scrollIntoView?.({ block: 'nearest' });
+    } else input.removeAttribute('aria-activedescendant');
+  };
+  const draw = () => {
+    const q = (many || input.dataset.typed ? input.value : '').trim().toLowerCase();
+    shown = options().filter((o) => (many ? o.value !== '' : true) && (!q || textOf(o).toLowerCase().includes(q)));
+    list.replaceChildren(
+      ...shown.map((o, n) => {
+        const li = document.createElement('li');
+        li.id = `${listId}_${n}`;
+        li.setAttribute('role', 'option');
+        li.setAttribute('aria-selected', String(o.selected && (many || o.value !== '')));
+        li.textContent = textOf(o);
+        li.addEventListener('mousedown', (e) => e.preventDefault()); // keep the focus in the field
+        li.addEventListener('click', () => pick(n));
+        return li;
+      }),
+    );
+    if (!shown.length) {
+      const li = document.createElement('li');
+      li.className = 'select-pick-none';
+      li.textContent = d.noneLabel || 'Nothing found.';
+      list.append(li);
+    }
+    status.textContent = shown.length ? '' : d.noneLabel || 'Nothing found.';
+    setActive(shown.length ? Math.min(Math.max(active, 0), shown.length - 1) : -1);
+  };
+  const open = () => {
+    if (!list.hidden) return;
+    list.hidden = false;
+    input.setAttribute('aria-expanded', 'true');
+    active = many ? 0 : Math.max(0, options().findIndex((o) => o.selected));
+    draw();
+  };
+  const close = () => {
+    list.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+    input.removeAttribute('aria-activedescendant');
+    delete input.dataset.typed;
+    if (many) input.value = '';
+    else syncInput();
+  };
+  const pick = (n) => {
+    const o = shown[n];
+    if (!o) return;
+    if (many) {
+      o.selected = !o.selected;
+      input.value = '';
+      active = n;
+      changed();
+    } else {
+      sel.value = o.value;
+      close();
+      changed();
+    }
+  };
+  input.addEventListener('focus', () => {
+    if (!many) input.select?.();
+  });
+  input.addEventListener('click', open);
+  input.addEventListener('input', () => {
+    input.dataset.typed = '1';
+    if (list.hidden) open();
+    active = 0;
+    draw();
+  });
+  input.addEventListener('change', (e) => e.stopPropagation()); // the item's value is the select's
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      if (list.hidden) return open();
+      if (shown.length) setActive((active + (e.key === 'ArrowDown' ? 1 : -1) + shown.length) % shown.length);
+    } else if (e.key === 'Enter') {
+      if (list.hidden) return;
+      e.preventDefault();
+      if (active >= 0) pick(active);
+    } else if (e.key === 'Escape') {
+      if (list.hidden) return;
+      e.preventDefault();
+      close();
+    } else if (e.key === 'Backspace' && many && !input.value && sel.selectedOptions.length) {
+      sel.selectedOptions[sel.selectedOptions.length - 1].selected = false;
+      changed();
+    } else if (e.key === 'Tab') close();
+  });
+  input.addEventListener('blur', () => {
+    if (list.hidden) return;
+    // Select One: a field emptied by the user chooses no value
+    if (!many && input.dataset.typed && !input.value.trim() && [...sel.options].some((o) => o.value === '')) {
+      sel.value = '';
+      close();
+      changed();
+    } else close();
+  });
+  // a dynamic action (Set value, Clear) changed the item
+  sel.addEventListener('change', () => {
+    if (own) return;
+    drawChips();
+    if (document.activeElement !== input) syncInput();
+  });
+  drawChips();
+  syncInput();
+}
+
 // Builder: role suggestions. Clicking a role adds it to the roles field of
 // the same form; in a form with an application select, only that app's
 // suggestions are shown.

package/src/ai/service.ts

@@ -1,5 +1,6 @@
 import { owner } from '../db.ts';
 import { decryptSecret } from '../secrets.ts';
+import { aiServerUrl } from '../remote-servers.ts';
 import { ClaudeProvider } from './anthropic.ts';
 import { OpenAiProvider } from './openai.ts';
 import { AiError, type AiProvider, type GenerateRequest, type GenerateResult, type ProviderName } from './types.ts';
@@ -27,6 +28,9 @@ export interface AiService {
   base_url: string | null;
   api_key_enc: string | null;
   enabled: boolean;
+  /** (141) a remote server whose base URL (plus server_path) the service calls instead of base_url */
+  server_id?: number | null;
+  server_path?: string | null;
 }
 
 /** The default model of a new Claude service; OpenAI services name theirs. */
@@ -78,7 +82,12 @@ export function serviceKey(s: AiService): string {
 }
 
 export async function loadService(name: string): Promise<AiService | undefined> {
-  return owner.one<AiService>('select * from meta.ai_service where name = $1', [name.toUpperCase()]);
+  const s = await owner.one<AiService>('select * from meta.ai_service where name = $1', [name.toUpperCase()]);
+  if (!s?.server_id) return s;
+  // (141) on a remote server: its URL now (base_url is then what baseUrlFor gives the SDK)
+  const r = await aiServerUrl(s.server_id, s.server_path);
+  if (!r.url) throw new AiError('config', `AI service ${s.name}: ${r.problem}`);
+  return { ...s, base_url: r.url };
 }
 
 /** The provider of a service, with its key (decrypted only here, never stored elsewhere). */

package/src/app.ts

@@ -96,6 +96,7 @@ import { findWorkspaceRoutes } from './builder/find-workspace.ts';
 import { mailQueueRoutes } from './builder/mail-queue.ts';
 import { networkAccessRoutes } from './builder/network-access.ts';
 import { workspaceMailRoutes } from './builder/workspace-mail.ts';
+import { workspaceResourceRoutes } from './builder/workspace-resources.ts';
 import { runtimeScope } from './db.ts';
 // (sprint 139, AP-6) OpenTelemetry: a trace per request, /metrics, the browser relay
 import { startTelemetry } from './telemetry/export.ts';
@@ -281,6 +282,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(mailQueueRoutes);
   await app.register(networkAccessRoutes);
   await app.register(workspaceMailRoutes);
+  await app.register(workspaceResourceRoutes);
   // (sprint 138, AP-5) an application's Utilities
   await app.register(utilityRoutes);
   await app.register(dependencyRoutes);

package/src/builder/advisor.ts

@@ -15,6 +15,7 @@ import { configColumns, searchConfigProblems, textSearchConfig, tsvectorSql } fr
 import { COMPONENTS } from './components.ts';
 import { DISTANCES, PGVECTOR_MISSING, vectorColumnDims, vectorSchema, type Distance } from '../vector.ts';
 import { appEntries, type Entry } from './search.ts';
+import { LOV_CHECKED } from '../runtime/items.ts';
 import { appHeader, BASE, developer, region, send, shell, type Req } from './ui.ts';
 
 // App Builder → Advisor (APEX: Advisor): checks an application without
@@ -48,7 +49,7 @@ export function sqlFields(kind: string, row: any): { name: string; shape: SqlSha
   switch (kind) {
     case 'region':
       return [
-        ...(['report', 'grid', 'chart', 'cards', 'calendar', 'map', 'tree', 'dynamic'].includes(row.type) && row.source?.trim() && !row.rest_source ? [{ name: 'source', shape: 'select' as const }] : []),
+        ...(['report', 'classic_report', 'grid', 'chart', 'cards', 'calendar', 'map', 'tree', 'dynamic'].includes(row.type) && row.source?.trim() && !row.rest_source ? [{ name: 'source', shape: 'select' as const }] : []),
         { name: 'condition', shape: 'boolean' },
       ];
     case 'item':
@@ -386,6 +387,10 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
   // (104) a document button names a document template or a report query
   const documents = new Set(all.filter((x) => x.kind === 'document_template' || x.kind === 'report_query').map((x) => x.row.name.toUpperCase()));
   const missing = (entry: Entry | null, field: string, message: string, severity: Severity = 'error') => findings.push({ severity, entry, field, message });
+  // (141) remote servers and web credentials of the application's workspace (sources and invoke steps may name them)
+  const wsServers = new Map((await query('select static_id, credential from meta.remote_server where workspace_id = meta.app_workspace($1)', [appId])).rows.map((r) => [r.static_id as string, r.credential as string | null]));
+  const wsCredentials = new Set((await query('select name from meta.workspace_credential where workspace_id = meta.app_workspace($1)', [appId])).rows.map((r) => r.name as string));
+  const appCredentials = new Set(all.filter((x) => x.kind === 'web_credential').map((x) => String(x.row.name).toUpperCase()));
 
   for (const e of entries) {
     for (const f of e.fields) {
@@ -428,6 +433,9 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
     if (kind === 'region' && row.type === 'grid' && !all.some((x) => x.kind === 'process' && x.row.type === 'grid_dml' && x.row.region_id === row.id))
       missing(e, 'Source', 'No grid_dml process saves this grid, so it is read-only.', 'info');
     if (kind === 'region' && row.type === 'form' && row.pk_item && !items.has(String(row.pk_item).toUpperCase())) missing(e, 'Primary key item', `Item ${row.pk_item} doesn't exist.`);
+    // (140) a list item (select list, radio group, shuttle, select one or many …) shows no choices without a list of values
+    if (kind === 'item' && LOV_CHECKED.has(row.type) && !String(row.lov ?? '').trim())
+      missing(e, 'List of values', `A ${row.type} item needs a list of values: it has no choices, and no value passes the check on submit.`, 'warning');
     // (078) a URL region: a literal origin, valid attributes
     if (kind === 'region' && row.type === 'url') {
       const target = urlTarget(row.source);
@@ -453,6 +461,14 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
     if (kind === 'button' && row.action === 'document' && !documents.has(String(row.document ?? '').toUpperCase()))
       missing(e, 'Document template', row.document ? `Document template or report query ${row.document} doesn't exist.` : 'A document button needs a document template or a report query.');
     if (kind === 'rest_module') for (const problem of handlerProblems(row.handlers)) missing(e, 'Handlers (JSON)', problem);
+    if (kind === 'rest_source') {
+      // (141) an export may name a server or credential this workspace doesn't have (yet): it imports, and says so here
+      if (row.server && !wsServers.has(row.server))
+        missing(e, 'Remote server', `Remote server ${row.server} doesn't exist in this application's workspace: add it under Workspace utilities → Remote servers (calls fail until then).`, 'warning');
+      const credential = row.credential || (row.server ? wsServers.get(row.server) : null);
+      if (credential && !appCredentials.has(credential) && !wsCredentials.has(credential))
+        missing(e, 'Web credential', `Web credential ${credential} is neither the application's nor its workspace's (calls fail until it exists).`, 'warning');
+    }
     if (kind === 'workflow_definition') {
       const tasks = new Set(all.filter((x) => x.kind === 'task_definition').map((x) => x.row.name.toUpperCase()));
       const outcomes = outcomeMap(all.filter((x) => x.kind === 'task_definition').map((x) => x.row));
@@ -461,7 +477,7 @@ export async function advise(appId: number, tx?: pg.ClientBase, opts: { db?: Db
       // invoke_api steps: REST data sources, parameters, web credentials, variables (sprint 32)
       const refs = {
         sources: new Map(all.filter((x) => x.kind === 'rest_source').map((x) => [String(x.row.name).toUpperCase(), x.row])),
-        credentials: new Set(all.filter((x) => x.kind === 'web_credential').map((x) => String(x.row.name).toUpperCase())),
+        credentials: new Set([...appCredentials, ...wsCredentials]),
         startVars: [...String(row.title ?? '').matchAll(/&([A-Za-z][A-Za-z0-9_]*)\./g)].map((m) => m[1]),
       };
       const invokeRefs = invokeStepReferences(row.steps, refs);

package/src/builder/ai.ts

@@ -55,7 +55,7 @@ function serviceForm(s: Partial<AiService>, action: string, csrfField: ReturnTyp
 }
 
 /** The form's values, checked; throws with a message. */
-function formValues(b: Record<string, string | undefined>) {
+function formValues(b: Record<string, string | undefined>, hasServer = false) {
   const provider: ProviderName = (['openai', 'gemini', 'openai_compatible'] as const).find((p) => p === b.provider) ?? 'anthropic';
   const model = (b.model ?? '').trim();
   if (!/^[A-Za-z0-9][A-Za-z0-9._:/@-]{0,199}$/.test(model)) throw new Error('The model is a name like claude-opus-5-5 (letters, digits and . _ : / @ -).');
@@ -65,7 +65,7 @@ function formValues(b: Record<string, string | undefined>) {
   if (!Number.isInteger(timeout) || timeout < 5 || timeout > 600) throw new Error('Time limit: 5 to 600 seconds.');
   const baseUrl = (b.base_url ?? '').trim() || null;
   if (baseUrl && (!/^https?:\/\/[^\s]+$/i.test(baseUrl) || baseUrl.length > 500)) throw new Error('The base URL starts with http:// or https://.');
-  if (!baseUrl && provider === 'openai_compatible') throw new Error('An OpenAI-compatible service needs a base URL (e.g. http://localhost:11434/v1 for Ollama).');
+  if (!baseUrl && provider === 'openai_compatible' && !hasServer) throw new Error('An OpenAI-compatible service needs a base URL (e.g. http://localhost:11434/v1 for Ollama).');
   const effort = ['low', 'medium', 'high', 'xhigh', 'max'].includes(b.effort ?? '') ? b.effort! : null;
   return [(b.description ?? '').trim() || null, provider, model, provider === 'anthropic' ? effort : null, b.refusal_fallback === 'true', maxTokens, timeout, baseUrl, b.enabled === 'true'];
 }
@@ -157,12 +157,20 @@ export async function aiRoutes(app: FastifyInstance) {
     delete s.state[TEST_RESULT];
     const recent = (await owner.query(`select u.*, a.alias as app from meta.ai_usage u left join meta.app a on a.id = u.app_id where u.service_id = $1 order by u.id desc limit 50`, [x.id])).rows;
     const view = { ...x, api_key_enc: x.api_key_enc ? 'stored' : null }; // the key itself never reaches the page
+    // (141) the remote servers of every workspace (administrators choose one)
+    const servers = (await owner.query<{ id: number; static_id: string; workspace: string }>(
+      'select r.id, r.static_id, w.name as workspace from meta.remote_server r join meta.workspace w on w.id = r.workspace_id order by lower(w.name), r.static_id')).rows;
     const main = html`
       <div class="title-row"><h1 class="ai-name">${x.name}</h1></div>
       <div class="columns wide-left">
         ${region('Settings', html`${serviceForm(view, `${BASE}/ai/${x.id}`, csrf(s), false)}
           <form method="post" action="${BASE}/ai/${x.id}/delete" class="danger-zone">${csrf(s)}
             <button class="btn btn-danger" data-confirm="Delete AI service ${x.name}? Processes that use it fail until another service gets its name.">Delete service</button></form>`)}
+        ${region('Remote server', html`<form method="post" action="${BASE}/ai/${x.id}/server">${csrf(s)}
+            <p class="muted u-mt0">Instead of the base URL: a remote server's URL (Workspace utilities → Remote servers) plus a path, so moving the endpoint changes one value. The API key is sent there: choose a server whose workspace administrators you trust with it.</p>
+            <div class="form-grid">${select('server_id', 'Remote server', x.server_id ? String(x.server_id) : '', [['', 'none: the base URL above'], ...servers.map((r): [string, string] => [String(r.id), `${r.static_id} (${r.workspace})`])])}
+              ${input('server_path', 'Path', x.server_path ?? '', { placeholder: '/v1', help: 'After the server\'s base URL, e.g. /v1; empty: the base URL itself.' })}</div>
+            <div class="buttons"><button class="btn">Save</button></div></form>`)}
         ${region('Test', html`
           <p class="muted u-mt0">Sends a prompt to the service (counted in the usage log as a builder test).</p>
           <form method="post" action="${BASE}/ai/${x.id}/test">${csrf(s)}
@@ -194,7 +202,7 @@ export async function aiRoutes(app: FastifyInstance) {
         `update meta.ai_service set (${COLUMNS}) = ($2, $3, $4, $5, $6, $7, $8, $9, $10), updated_at = now(),
                 api_key_enc = case when $12 then null when $11::text is null then api_key_enc else $11 end
           where id = $1`,
-        [req.params.id, ...formValues(b), key, b.remove_key === 'true'],
+        [req.params.id, ...formValues(b, !!(await owner.one('select 1 as ok from meta.ai_service where id = $1 and server_id is not null', [req.params.id]))), key, b.remove_key === 'true'],
       );
       flash(s, r.rowCount ? 'AI service saved.' : 'Not found.', r.rowCount ? 'ok' : 'error');
     } catch (e) {
@@ -203,6 +211,24 @@ export async function aiRoutes(app: FastifyInstance) {
     return back(reply, s, `${BASE}/ai/${req.params.id}`);
   });
 
+  // (141) the service's remote server and path
+  app.post(`${BASE}/ai/:id(^\\d+$)/server`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await adminOnly(s, reply, 'AI services'))) return;
+    const b = req.body ?? {};
+    try {
+      const serverId = /^\d{1,9}$/.test(String(b.server_id ?? '')) ? Number(b.server_id) : null;
+      const path = String(b.server_path ?? '').trim() || null;
+      if (path && (!/^\/[^\s]*$/.test(path) || path.length > 500)) throw new Error('The path starts with /, without spaces, e.g. /v1.');
+      if (serverId && !(await owner.one('select 1 as ok from meta.remote_server where id = $1', [serverId]))) throw new Error('No such remote server.');
+      const r = await owner.query('update meta.ai_service set server_id = $2, server_path = $3, updated_at = now() where id = $1', [req.params.id, serverId, serverId ? path : null]);
+      flash(s, r.rowCount ? (serverId ? 'The service now calls its remote server: test it.' : 'The service calls its base URL again.') : 'Not found.', r.rowCount ? 'ok' : 'error');
+    } catch (e) {
+      flash(s, (e as Error).message.includes('ai_service_compatible_url') ? 'An OpenAI-compatible service needs a base URL or a remote server.' : (e as Error).message, 'error');
+    }
+    return back(reply, s, `${BASE}/ai/${req.params.id}`);
+  });
+
   app.post(`${BASE}/ai/:id(^\\d+$)/apps`, async (req: Req, reply) => {
     const s = await developer(req, reply);
     if (!s || !(await adminOnly(s, reply, 'AI services'))) return;

package/src/builder/arrange.ts

@@ -45,6 +45,7 @@ export const REGION_LABELS: Record<string, [string, string]> = {
   workflows: ['Workflow Console', 'activity'], map: ['Map', 'map'], tree: ['Tree', 'org'], static: ['Static Content', 'region'], dynamic: ['Dynamic Content', 'code'],
   template_component: ['Template Component', 'layers'], list: ['List', 'list'], data_reporter: ['Data Reporter', 'table'], form_designer: ['Form Designer', 'file'],
   ai_assistant: ['AI Assistant', 'bolt'], url: ['URL', 'link'], search: ['Search', 'search'], login: ['Login', 'lock'], plugin: ['Plug-in', 'layers'],
+  classic_report: ['Classic Report', 'table'], breadcrumb: ['Breadcrumb', 'chevron'], help_text: ['Help Text', 'help'],
 };
 export const ITEM_LABELS: Record<string, [string, string]> = {
   text: ['Text Field', 'item'], textarea: ['Text Area', 'item'], number: ['Number Field', 'item'], date: ['Date Picker', 'calendar'],
@@ -53,6 +54,7 @@ export const ITEM_LABELS: Record<string, [string, string]> = {
   email: ['E-mail', 'inbox'], tel: ['Phone Number', 'item'], url: ['URL', 'item'], color: ['Color Picker', 'item'], file: ['File Upload', 'upload'],
   location: ['Location', 'map'], richtext: ['Rich Text Editor', 'edit'], markdown: ['Markdown Editor', 'code'], rating: ['Star Rating', 'check'],
   combobox: ['Combobox (Tags)', 'list'], daterange: ['Date Range', 'calendar'], qrcode: ['QR Code', 'scan'], image: ['Display Image', 'file'], address: ['Geocoded Address', 'map'], hidden: ['Hidden', 'item'], display: ['Display Only', 'file'], password: ['Password', 'key'],
+  shuttle: ['Shuttle', 'arrow-right'], select_one: ['Select One', 'search'], select_many: ['Select Many', 'check'],
 };
 export const BUTTON_LABELS: Record<string, [string, string]> = {
   submit: ['Submit Page', 'button'], redirect: ['Redirect to Page', 'button'], da: ['Dynamic Action', 'bolt'], document: ['Download Document', 'download'],
@@ -212,6 +214,11 @@ export async function createComponent(c: Q, pid: number, kind: LayoutKind, type:
     if (!REGION_TYPES().includes(type)) throw new LayoutError(400, 'Unknown region type.');
     id = (await c.query(`insert into meta.region (page_id, seq, title, type, source) values ($1, 999999, $2, $3, $4) returning id`,
       [pid, `New ${REGION_LABELS[type]?.[0].toLowerCase() ?? type}`, type, NEW_REGION_SOURCE[type] ?? null])).rows[0].id;
+    // (140) a breadcrumb goes in the breadcrumb bar, without a frame of its own (unless it is dropped elsewhere)
+    if (type === 'breadcrumb') {
+      await c.query(`update meta.region set template = 'plain', title = 'Breadcrumb' where id = $1`, [id]);
+      if (!o.position && !o.before) o = { ...o, position: 'breadcrumb' };
+    }
   } else {
     const region = await targetRegion(c, pid, o.region ?? '');
     if (kind === 'item') {