pgkiln 0.71.0 → 0.73.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.
@@ -4362,3 +4738,53 @@ document.addEventListener('change', (e) => {
     });
   }
 })();
+
+// (sprint 139, AP-6) Browser spans: a page whose trace goes to an OpenTelemetry collector carries a
+// signed <meta name="pgkiln-trace">. Its load timings and its Ajax calls to the same application are
+// reported to pgkiln (POST /a/<alias>/telemetry), which adds them to the page's trace; the browser
+// never sees the collector. Nothing happens on pages without the meta.
+(() => {
+  const meta = document.querySelector('meta[name="pgkiln-trace"]');
+  const m = /^\/a\/[^/]+\//.exec(location.pathname);
+  if (!meta || !m || !window.fetch || !window.performance) return;
+  const token = meta.content;
+  const url = `${m[0]}telemetry`;
+  const origin = performance.timeOrigin || Date.now() - performance.now();
+  let queue = [];
+  const send = () => {
+    if (!queue.length) return;
+    const body = JSON.stringify({ t: token, spans: queue.splice(0, 50) });
+    const blob = new Blob([body], { type: 'application/json' });
+    if (!(navigator.sendBeacon && navigator.sendBeacon(url, blob)))
+      realFetch(url, { method: 'POST', body, headers: { 'content-type': 'application/json' }, keepalive: true, credentials: 'same-origin' }).catch(() => {});
+  };
+  const realFetch = window.fetch.bind(window);
+  window.fetch = function (input, init) {
+    const t0 = performance.now();
+    let path = '';
+    try {
+      const u = new URL(typeof input === 'string' ? input : input instanceof Request ? input.url : String(input), location.href);
+      if (u.origin === location.origin && u.pathname.startsWith(m[0]) && u.pathname !== url) path = u.pathname + u.search;
+    } catch {
+      // not a URL we report
+    }
+    const p = realFetch(input, init);
+    if (path) {
+      const method = String((init && init.method) || (input instanceof Request ? input.method : 'GET')).toUpperCase();
+      const done = (status) => {
+        queue.push({ k: 'ajax', path, method, status, start: origin + t0, dur: performance.now() - t0 });
+        if (queue.length >= 20) send();
+      };
+      p.then((r) => done(r.status), () => done(0));
+    }
+    return p;
+  };
+  window.addEventListener('load', () => setTimeout(() => {
+    const n = performance.getEntriesByType('navigation')[0];
+    if (n) queue.push({ k: 'load', start: origin + n.startTime, dur: (n.loadEventEnd || performance.now()) - n.startTime,
+      t: { ttfb: n.responseStart - n.startTime, dom_interactive: n.domInteractive - n.startTime, dom_complete: n.domComplete - n.startTime, load: n.loadEventEnd - n.startTime } });
+    send();
+  }, 0));
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') send(); });
+  window.addEventListener('pagehide', send);
+})();

package/public/builder.css

@@ -1645,3 +1645,6 @@ a.cp-type:hover, a.cp-type:focus-visible { border-color: var(--accent); }
 .util-icons code { font-size: 0.75rem; overflow-wrap: anywhere; }
 .ui-defaults :is(input, select, textarea) { width: 100%; min-width: 7rem; }
 .util-upgrade + .util-upgrade { margin-top: 1rem; }
+
+/* (sprint 139, AP-6) OpenTelemetry */
+.otel-problem { color: var(--danger); overflow-wrap: anywhere; }

package/src/ai/service.ts

@@ -3,6 +3,7 @@ import { decryptSecret } from '../secrets.ts';
 import { ClaudeProvider } from './anthropic.ts';
 import { OpenAiProvider } from './openai.ts';
 import { AiError, type AiProvider, type GenerateRequest, type GenerateResult, type ProviderName } from './types.ts';
+import { count, recordSpan } from '../telemetry/trace.ts';
 
 // 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
@@ -115,6 +116,19 @@ export interface Usage {
 }
 
 export async function logUsage(info: Pick<CallInfo, 'appId' | 'pageNo' | 'user' | 'source'>, u: Usage) {
+  // (sprint 139, AP-6) the call as a span of the current trace (timed by the caller), tokens as metrics
+  if (u.status !== 'limited')
+    recordSpan(`AI ${u.service.provider} ${u.model}`.slice(0, 120), {
+      ms: u.ms,
+      attrs: {
+        'gen_ai.system': u.service.provider, 'gen_ai.request.model': u.model, 'gen_ai.operation.name': info.source === 'embedding' ? 'embeddings' : 'chat',
+        'gen_ai.usage.input_tokens': u.inputTokens, 'gen_ai.usage.output_tokens': u.outputTokens, 'pgkiln.ai.service': u.service.name, 'pgkiln.ai.source': info.source,
+      },
+      error: u.status === 'ok' ? null : `${u.status}${u.message ? `: ${u.message}` : ''}`,
+    });
+  count('pgkiln.ai.requests', { provider: u.service.provider, status: u.status });
+  count('pgkiln.ai.tokens', { provider: u.service.provider, model: u.model.slice(0, 100), type: 'input' }, u.inputTokens);
+  count('pgkiln.ai.tokens', { provider: u.service.provider, model: u.model.slice(0, 100), type: 'output' }, u.outputTokens);
   try {
     await owner.query(
       `insert into meta.ai_usage (app_id, page_no, username, service_id, service, provider, model, source, input_tokens, output_tokens, duration_ms, status, message)

package/src/app.ts

@@ -97,6 +97,10 @@ import { mailQueueRoutes } from './builder/mail-queue.ts';
 import { networkAccessRoutes } from './builder/network-access.ts';
 import { workspaceMailRoutes } from './builder/workspace-mail.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';
+import { telemetryHooks, telemetryRoutes } from './telemetry/http.ts';
+import { telemetryBuilderRoutes } from './builder/telemetry.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
   // a database older than the code: apply the migrations (MIGRATE_ON_START=true)
@@ -117,6 +121,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
     trustProxy: trustProxySetting(process.env.TRUST_PROXY),
   });
   securityHeaders(app);
+  // (sprint 139) before the workspace scope below, so the request's trace encloses everything
+  if (!pending.length) await startTelemetry();
+  telemetryHooks(app);
   if (pending.length) {
     // checked again (at most every 5 s) until someone migrates; then requests go through
     let checkedAt = Date.now();
@@ -279,6 +286,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(dependencyRoutes);
   await app.register(upgradeRoutes);
   await app.register(uiDefaultRoutes);
+  // (sprint 139, AP-6) OpenTelemetry: Workspace utilities → OpenTelemetry, a workspace's own, /metrics, the browser relay
+  await app.register(telemetryRoutes);
+  await app.register(telemetryBuilderRoutes);
   app.get('/', async (_req, reply) => reply.redirect('/builder/home'));
   return app;
 }

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':
@@ -428,6 +429,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);

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') {

package/src/builder/components.ts

@@ -116,9 +116,9 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'title', common: true, label: 'Title', kind: 'text', group: 'Identification' },
       { name: 'static_id', label: 'Static ID', kind: 'text', group: 'Identification',
         help: 'Optional, unique on the page: lower case letters, digits, _ and -, starting with a letter. Names the region in exported files (so renaming it keeps them) and is data-static-id on the page, for CSS and JavaScript.' },
-      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search'], group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['report', 'grid', 'form', 'login', 'chart', 'cards', 'calendar', 'facets', 'smart_filters', 'display_selector', 'tasks', 'workflows', 'map', 'tree', 'template_component', 'list', 'static', 'dynamic', 'data_reporter', 'form_designer', 'ai_assistant', 'plugin', 'url', 'search', 'classic_report', 'breadcrumb', 'help_text'], group: 'Identification' },
       { name: 'source', common: true, label: 'Source', kind: 'code', wide: true, group: 'Source',
-        help: 'report/grid: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
+        help: 'report/grid/classic_report: a SELECT (use :ITEM binds) · chart: label column + one numeric column per series · cards: title, subtitle, body, badge, icon · calendar: start_date, end_date, title · map: lat and lng (or location "lat,lng"), title, body, geojson · tree: id, parent_id, label, icon · template_component: any SELECT (its columns are #COLUMN# in the template), or empty for one instance · dynamic: a SELECT returning HTML (escape with meta.html_escape) · static: HTML with &ITEM. substitutions · url: the page to show, https://host/path?q=&P1_ITEM. (the host is written out; items are URL-encoded) or a path on this server (/a/other/1).' },
       { name: 'rest_source', label: 'REST data source', kind: 'rest_source', group: 'Source',
         help: 'Read the rows of a REST data source (Shared Components) instead of a table: the source above is then optional SQL over them, e.g. select * from rest where price > 10. Parameters: {"rest_params": {"city": "&P1_CITY."}} in the attributes.' },
       { name: 'table_name', common: true, label: 'Table (form, grid)', kind: 'text', help: 'e.g. sales.orders', group: 'Source' },
@@ -149,13 +149,13 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
     validate: (v) => formatSettingsProblem(v.config),
     fields: [
       { name: 'name', common: true, label: 'Name', kind: 'upper', help: 'Referenced in SQL as :NAME, e.g. P3_NAME', group: 'Identification' },
-      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin'], group: 'Identification' },
+      { name: 'type', common: true, label: 'Type', kind: 'select', options: ['text', 'textarea', 'number', 'date', 'datetime', 'select', 'popup_lov', 'radio', 'checkbox', 'switch', 'checkbox_group', 'multiselect', 'email', 'tel', 'url', 'color', 'file', 'location', 'richtext', 'markdown', 'rating', 'combobox', 'daterange', 'qrcode', 'image', 'address', 'hidden', 'display', 'password', 'plugin', 'shuttle', 'select_one', 'select_many'], group: 'Identification' },
       { name: 'label', common: true, label: 'Label', kind: 'text', group: 'Identification' },
       { name: 'region_id', common: true, label: 'Region', kind: 'region', group: 'Layout' },
       { name: 'seq', label: 'Sequence', kind: 'int', group: 'Layout' },
       { name: 'source_column', common: true, label: 'Source column (form)', kind: 'text', group: 'Source' },
       { name: 'default_value', common: true, label: 'Default value', kind: 'text', group: 'Source' },
-      { name: 'lov', common: true, label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect store values colon-separated: string_to_array(:P1_X, \':\')' },
+      { name: 'lov', common: true, label: 'List of values', kind: 'code', wide: true, group: 'List of values', help: 'select display, return from … · STATIC:Yes;Y,No;N · LOV:NAME (shared) · checkbox_group/multiselect/shuttle/select_many store values colon-separated: string_to_array(:P1_X, \':\')' },
       { name: 'template_options', label: 'Template options', kind: 'options', choices: ITEM_OPTIONS, group: 'Appearance',
         help: 'CSS classes from a fixed list, added to the item (APEX: Template Options).' },
       { name: 'required', common: true, label: 'Value required', kind: 'bool', group: 'Validation' },
@@ -163,7 +163,7 @@ export const COMPONENTS: Record<string, ComponentSpec> = {
       { name: 'readonly_condition', label: 'Read-only condition (SQL)', kind: 'code', group: 'Security', help: 'When true the item is shown read-only and ignored on submit.' },
       { name: 'authz', label: 'Authorization', kind: 'authz', group: 'Security', help: AUTHZ_HELP },
       buildOption('Security'),
-      { name: 'config', label: 'Attributes (JSON)', kind: 'json', group: 'Attributes', help: '{"submit_on_change":true,"null_label":"- All -","cascade_parents":"P3_DEPTNO","wide":true}. {"warn_unsaved":false}: a change of this item doesn\'t count for the page\'s "Warn on unsaved changes". Lists of values read at most {"max_rows":5000} rows. File items: {"filename_column":"photo_name","mime_column":"photo_mime","size_column":"photo_size","updated_column":"photo_updated","accept":"image/*,.pdf","max_mb":2,"capture":"environment","max_px":1600} (capture opens the camera on phones; max_px makes photos smaller before upload). {"crop":"1:1"} lets the user crop a picture before upload (free, 1:1, 4:3, 3:4, 16:9, 3:2, 2:3). Several files: {"multiple":true,"max_files":5,"table":"doc.attachment","parent_column":"ticket_id","key_column":"id"} with the content column as source (one row per file). Text items: {"scan":true} adds a barcode/QR scan button where the browser can read codes. Location items hold "lat,lng" with a "Use my location" button. Rich text: sanitised HTML; markdown: Markdown text ({"rows":10}). Rating: {"max":5} stars, stored as 1..max. Combobox: free text with list-of-values suggestions, values colon-separated ({"multiple":false} for one value). Date range: "from:to" (ISO dates; split_part(:P1_X, \':\', 1)). QR code: shows the value as a QR code ({"ecc":"M","size":200,"show_value":true}). Password: {"reveal":true} adds a show/hide button. Image (display image): the value is an https URL, a path or a data:image URL; or {"sql":"select photo, photo_mime from hr.emp where id = :P3_ID"} shows the first column of the first row (a BLOB); {"alt":"Photo of &P3_NAME.","width":160,"height":160}. Address: {"coordinates_item":"P3_LOCATION","country":"nl"} (a "Check address" button where the installation has a geocoder, GEOCODER_URL; the chosen address\'s position goes into the item as "lat,lng"). Any item: {"persist":"user"} keeps its value per user across sessions (a user preference named like the item). Number and display items: {"format_mask":"999G999G990D00"} shows the number in the language\'s notation (FML999G990D00 adds the currency) and reads it back on submit. · plugin: {"plugin":"name","attributes":{"NAME":"value"}} (an item plug-in: a text field its JavaScript enhances)' },
+      { name: 'config', label: 'Attributes (JSON)', kind: 'json', group: 'Attributes', help: '{"submit_on_change":true,"null_label":"- All -","cascade_parents":"P3_DEPTNO","wide":true}. {"warn_unsaved":false}: a change of this item doesn\'t count for the page\'s "Warn on unsaved changes". Lists of values read at most {"max_rows":5000} rows. File items: {"filename_column":"photo_name","mime_column":"photo_mime","size_column":"photo_size","updated_column":"photo_updated","accept":"image/*,.pdf","max_mb":2,"capture":"environment","max_px":1600} (capture opens the camera on phones; max_px makes photos smaller before upload). {"crop":"1:1"} lets the user crop a picture before upload (free, 1:1, 4:3, 3:4, 16:9, 3:2, 2:3). Several files: {"multiple":true,"max_files":5,"table":"doc.attachment","parent_column":"ticket_id","key_column":"id"} with the content column as source (one row per file). Text items: {"scan":true} adds a barcode/QR scan button where the browser can read codes. Location items hold "lat,lng" with a "Use my location" button. Rich text: sanitised HTML; markdown: Markdown text ({"rows":10}). Rating: {"max":5} stars, stored as 1..max. Combobox: free text with list-of-values suggestions, values colon-separated ({"multiple":false} for one value). Shuttle: two lists (available, chosen) with move and order buttons; the chosen values colon-separated in their order. Select One / Select Many: a search field over the list of values (Select Many: chosen values as chips, colon-separated); {"null_label":"- None -"} or false for Select One. Date range: "from:to" (ISO dates; split_part(:P1_X, \':\', 1)). QR code: shows the value as a QR code ({"ecc":"M","size":200,"show_value":true}). Password: {"reveal":true} adds a show/hide button. Image (display image): the value is an https URL, a path or a data:image URL; or {"sql":"select photo, photo_mime from hr.emp where id = :P3_ID"} shows the first column of the first row (a BLOB); {"alt":"Photo of &P3_NAME.","width":160,"height":160}. Address: {"coordinates_item":"P3_LOCATION","country":"nl"} (a "Check address" button where the installation has a geocoder, GEOCODER_URL; the chosen address\'s position goes into the item as "lat,lng"). Any item: {"persist":"user"} keeps its value per user across sessions (a user preference named like the item). Number and display items: {"format_mask":"999G999G990D00"} shows the number in the language\'s notation (FML999G990D00 adds the currency) and reads it back on submit. · plugin: {"plugin":"name","attributes":{"NAME":"value"}} (an item plug-in: a text field its JavaScript enhances)' },
     ],
   },
   button: {