pgkiln 0.52.0 → 0.53.0

package/src/builder/network-access.ts

@@ -0,0 +1,140 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { owner } from '../db.ts';
+import { html, raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { parseHostList, scopeForWorkspace } from '../network-acl.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
+import { matches, restHosts, scopeProblem, urlProblem } from '../webclient.ts';
+import { clearResponseCache } from '../websources.ts';
+import { isAdmin } from './locks.ts';
+import { back, BASE, csrf, developer, flash, input, region, send, shell, type Req } from './ui.ts';
+import { workspaceAdmin } from './workspaces.ts';
+
+// (sprint 118, WS-9; APEX 26.2 workspace network ACLs) Administration →
+// Network access: the installation's allow-list (PGKILN_REST_ALLOWED_HOSTS,
+// read-only: the server's environment), a workspace's own network access list
+// (meta.workspace.network_restricted / network_hosts, src/network-acl.ts),
+// "would this URL be called?", and the recent refusals. Administrators see and
+// change every workspace's list; a workspace administrator their current
+// workspace's only.
+
+const id = (v: unknown) => (/^\d{1,9}$/.test(String(v ?? '')) ? Number(v) : null);
+
+/** The workspace this developer may manage here (?ws=, else the current one; administrators: any), or null. */
+async function manageable(s: Session, wanted: unknown): Promise<{ admin: boolean; workspace: number } | null> {
+  const admin = await isAdmin(s.username);
+  // ?ws= or the current workspace; a workspace administrator only one they administer
+  const ws = id(wanted) ?? s.workspace?.id ?? (admin ? 1 : null);
+  if (!ws || !(await workspaceAdmin(s.username, ws))) return null;
+  return { admin, workspace: ws };
+}
+
+async function refuse(s: Session, reply: FastifyReply) {
+  const main = html`<h1 class="u-mb1">Network access</h1><div class="alert alert-error" role="alert">Only administrators and workspace administrators manage network access.</div>`;
+  await send(reply.code(403), s, shell(s, 'Network access', [['Administration'], ['Network access']], main, 'users'));
+}
+
+const when = (d: Date | string | null) => (d ? new Date(d).toISOString().slice(0, 16).replace('T', ' ') : '');
+const entries = (list: string[]) => (list.length ? html`<ul class="host-list">${list.map((h) => html`<li><code>${h}</code></li>`)}</ul>` : html`<p class="muted">None.</p>`);
+
+export async function networkAccessRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/network`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const m = await manageable(s, req.query.ws);
+    if (!m) return refuse(s, reply);
+    const w = await owner.one<{ id: number; name: string; network_restricted: boolean; network_hosts: string[] }>(
+      'select id, name, network_restricted, network_hosts from meta.workspace where id = $1', [m.workspace]);
+    if (!w) return reply.code(404).send('Not found');
+    const inst = restHosts();
+    const [all, refusals] = await Promise.all([
+      m.admin ? owner.query('select id, name, network_restricted, cardinality(network_hosts)::int as n from meta.workspace order by id = 1 desc, lower(name)').then((r) => r.rows) : [],
+      owner.query(
+        `select r.at, r.what, r.host, r.url, r.list, r.message, a.alias from meta.network_refusal r left join meta.app a on a.id = r.app_id
+          where r.workspace_id = $1 order by r.id desc limit 100`, [w.id]).then((r) => r.rows),
+    ]);
+    // entries the installation's list never lets through (they narrow nothing: worth a warning)
+    const unreachable = w.network_hosts.filter((h) => {
+      const host = h.replace(/^\*\./, 'x.');
+      try {
+        return !matches([...inst.allowed, ...inst.private], new URL(`https://${host}`)) && !inst.allowed.includes('*');
+      } catch {
+        return false;
+      }
+    });
+    const tryUrl = String(req.query.url ?? '').trim().slice(0, 2000);
+    let verdict: { ok: boolean; text: string } | null = null;
+    if (tryUrl) {
+      let url: URL | null = null;
+      try {
+        url = new URL(tryUrl);
+      } catch {
+        verdict = { ok: false, text: 'The URL is not valid.' };
+      }
+      if (url) {
+        const scope = await scopeForWorkspace(w.id, 'check');
+        const problem = urlProblem(url) ?? scopeProblem(scope, url);
+        verdict = problem ? { ok: false, text: problem } : { ok: true, text: `${url.host} may be called by this workspace's applications (the address it resolves to is checked when the call is made).` };
+      }
+    }
+    const main = html`
+      <div class="title-row"><h1>Network access</h1></div>
+      <p class="muted u-mt0">Which web services the applications may call: <code>meta.web_request</code>, REST data sources, the Invoke API process and workflow step, web credential token endpoints, object storage and REST source catalogs. The installation's list applies to every workspace; a workspace's own list can only narrow it, never widen it. Private and loopback addresses stay refused unless the installation allows them, whatever a workspace lists.</p>
+      <div class="columns wide-left">
+        ${region(`Workspace ${w.name}`, html`<form method="post" action="${BASE}/network">${csrf(s)}<input type="hidden" name="ws" value="${w.id}">
+            <fieldset class="field"><legend class="label">Outgoing calls of this workspace's applications</legend><div class="radio-group">
+              <label class="check"><input type="radio" name="restricted" value="false"${w.network_restricted ? '' : raw(' checked')}> Any host the installation allows</label>
+              <label class="check"><input type="radio" name="restricted" value="true"${w.network_restricted ? raw(' checked') : ''}> Only the hosts below (and the installation must allow them too)</label>
+            </div></fieldset>
+            <div class="field"><label class="label" for="f_hosts">Hosts</label>
+              <textarea id="f_hosts" name="hosts" rows="6" spellcheck="false">${w.network_hosts.join('\n')}</textarea>
+              <small class="help">One per line: <code>api.example.com</code>, <code>*.example.com</code> for its subdomains, <code>api.example.com:8443</code> for one port only. No scheme or path. Restricted with no hosts: no outgoing calls at all.</small></div>
+            ${unreachable.length ? html`<div class="alert alert-warning" role="status">Not on the installation's list, so never reachable: ${unreachable.join(', ')}.</div>` : ''}
+            <div class="buttons"><button class="btn btn-hot">Save</button></div></form>`, '', 'workspace-list')}
+        ${region('Installation', html`<p class="muted u-mt0">Set in the server's environment by its administrators (<code>PGKILN_REST_ALLOWED_HOSTS</code>).</p>
+            ${inst.allowed.includes('*') ? html`<p>Any public host (<code>*</code>).</p>` : entries(inst.allowed)}
+            ${m.admin ? html`<h3 class="u-mt1">Private hosts</h3><p class="muted small">Hosts on private or loopback addresses that may be called (<code>PGKILN_REST_PRIVATE_HOSTS</code>).</p>${entries(inst.private)}` : ''}`)}
+      </div>
+      ${region('Check a URL', html`<form method="get" action="${BASE}/network" class="search u-mwnone">
+          <input type="hidden" name="ws" value="${w.id}">
+          ${input('url', 'URL', tryUrl, { type: 'url', placeholder: 'https://api.example.com/v1/items' })}
+          <div class="buttons"><button class="btn">${icon('search')} Check</button></div></form>
+        <div role="status">${verdict ? html`<div class="alert ${verdict.ok ? 'alert-success' : 'alert-error'}">${verdict.text}</div>` : ''}</div>
+        <p class="muted small">Nothing is called: this applies the lists to the URL as they are now.</p>`)}
+      ${m.admin ? region('Workspaces', html`<div class="table-wrap"><table class="report report-reflow">
+          <thead><tr><th>Workspace</th><th>Outgoing calls</th></tr></thead>
+          <tbody>${all.map((x) => html`<tr><td data-label="Workspace"><a href="${BASE}/network?ws=${x.id}">${x.name}</a></td>
+            <td data-label="Outgoing calls">${x.network_restricted ? html`<span class="tag">${icon('lock')} ${x.n} host${x.n === 1 ? '' : 's'}</span>` : html`<span class="muted">the installation's list</span>`}</td></tr>`)}</tbody></table></div>`) : ''}
+      ${region('Refused calls', html`<p class="muted u-mt0">The last 100 calls of this workspace that a list refused (kept 7 days). The application's debug log has them too.</p>
+        <div class="table-wrap"><table class="report report-reflow">
+        <thead><tr><th>When (UTC)</th><th>Application</th><th>Call</th><th>Host</th><th>Refused by</th></tr></thead>
+        <tbody>${refusals.length ? refusals.map((r) => html`<tr><td data-label="When">${when(r.at)}</td><td data-label="Application">${r.alias ?? html`<span class="muted">–</span>`}</td>
+            <td data-label="Call" class="u-break">${r.what}<br><span class="muted small">${r.url ?? ''}</span></td>
+            <td data-label="Host" class="u-break"><code>${r.host}</code></td>
+            <td data-label="Refused by">${r.list === 'workspace' ? 'the workspace\'s list' : 'the installation\'s list'}</td></tr>`)
+          : html`<tr><td colspan="5" class="empty">No refused calls.</td></tr>`}</tbody></table></div>`, '', 'refusals')}`;
+    return send(reply, s, shell(s, 'Network access', [['Administration'], ['Network access']], main, 'users'));
+  });
+
+  app.post(`${BASE}/network`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s) return;
+    const m = await manageable(s, req.body?.ws);
+    if (!m) return refuse(s, reply);
+    const target = `${BASE}/network?ws=${m.workspace}`;
+    try {
+      const hosts = parseHostList(String(req.body?.hosts ?? ''));
+      const restricted = req.body?.restricted === 'true';
+      const r = await owner.query('update meta.workspace set network_restricted = $2, network_hosts = $3 where id = $1', [m.workspace, restricted, hosts]);
+      if (!r.rowCount) return reply.code(404).send('Not found');
+      // cached REST responses were fetched under the old list
+      clearResponseCache();
+      await logActivity({ appId: null, username: s.username, event: 'workspace', ip: clientIp(req),
+        detail: `network access of workspace ${m.workspace}: ${restricted ? `only ${hosts.join(', ') || 'no hosts'}` : 'the installation\'s list'}`.slice(0, 1000) });
+      flash(s, restricted ? `Saved: this workspace's applications call ${hosts.length ? 'only these hosts' : 'no hosts at all'}.` : 'Saved: the installation\'s list applies.');
+    } catch (e) {
+      flash(s, (e as Error).message, 'error');
+    }
+    return back(reply, s, target);
+  });
+}

package/src/builder/object-actions.ts

@@ -30,6 +30,7 @@ export function objectMenu(schema: string, o: MenuObj): Raw {
       ${o.type === 'policy' ? '' : html`<a href="${open}" data-obj-open="${`${BASE}/sql/objects/panel?${new URLSearchParams({ schema, k: o.type, o: o.ref })}`}">${icon('eye')} Open</a>`}
       ${table ? item(`${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}`, 'edit', 'Edit…') : ''}
       ${table ? item(`${BASE}/sql/objects/table?${new URLSearchParams({ schema, template: o.ref })}`, 'copy', 'Use as template') : ''}
+      ${table ? item(`${BASE}/sql/objects/security?${new URLSearchParams({ o: o.ref })}`, 'shield', 'Security…') : ''}
       ${table ? item(`${BASE}/sql/load`, 'upload', 'Load data') : ''}
       ${table ? html`${item(q('index'), 'list', 'Add index')}${item(q('trigger'), 'bolt', 'Add trigger')}${item(q('policy'), 'shield', 'Add policy')}` : ''}
       ${RELATIONS.has(o.type) ? item(`${BASE}/sql/rest/object?${new URLSearchParams({ schema, name: o.name })}`, 'globe', 'REST › Enable / Disable') : ''}

package/src/builder/object-browser.ts

@@ -422,5 +422,5 @@ export async function objectDetail(db: Awaited<ReturnType<typeof workshopDb>>, s
       body = await ddlOf((x) => (x.kind === 'table' || x.kind === 'view' || x.kind === 'materialized view') ? x.name === relname : x.table === relname);
   }
   return html`<h2 class="ob-title">${icon(OB_TYPES.find(([t]) => t === o.type)![2])} ${o.ref}${o.rls ? html` <span class="tag">RLS</span>` : ''}${o.type === 'table'
-    ? html` <a class="btn btn-sm" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}">${icon('edit')} Edit table</a>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
+    ? html` <a class="btn btn-sm" href="${BASE}/sql/objects/table?${new URLSearchParams({ schema, o: o.ref })}">${icon('edit')} Edit table</a> <a class="btn btn-sm" href="${BASE}/sql/objects/security?${new URLSearchParams({ o: o.ref })}">${icon('shield')} Security</a>` : ''}</h2>${nav}${region(tabs.find(([k]) => k === tab)![1], body)}`;
 }

package/src/builder/rest-catalogs.ts

@@ -12,6 +12,7 @@ import { webRequest } from '../webclient.ts';
 import { sourceProblems } from '../websources.ts';
 import { back, BASE, csrf, developer, flash, input, region, send, shell, type Body, type Req } from './ui.ts';
 import { currentWorkspace } from './workspaces.ts';
+import { scopeForWorkspace } from '../network-acl.ts';
 
 // Workspace utilities → REST Source Catalogs (migration 095; APEX: Workspace
 // Utilities → REST Source Catalogs): the current workspace's catalogs, a
@@ -59,7 +60,7 @@ function importForm(s: Session, action: string, replacing: boolean): Raw {
 }
 
 /** The text of an uploaded, pasted or fetched document (and where it came from). */
-async function documentText(req: Req): Promise<{ text: string; from?: string }> {
+async function documentText(req: Req): Promise<{ text: string; from?: string; url?: string }> {
   let text = '';
   if (req.isMultipart()) {
     const parsed = await readMultipart(req, MAX_DOC_BYTES / 1024 / 1024);
@@ -73,7 +74,19 @@ async function documentText(req: Req): Promise<{ text: string; from?: string }>
   const url = String(req.body?.url ?? '').trim();
   if (!url) throw new Error('Choose a file, paste a document or give its URL.');
   if (!/^https?:\/\//i.test(url)) throw new Error('The URL starts with http:// or https://.');
-  const r = await webRequest(url, { headers: { accept: 'application/json' }, timeoutMs: 15_000, maxBytes: MAX_DOC_BYTES });
+  return { text: '', url };
+}
+
+/**
+ * The document itself: the uploaded or pasted text, or (sprint 118) the URL read now, after the developer
+ * was checked, within the installation's allow-list and the current workspace's network access list.
+ */
+async function documentOf(doc: { text: string; from?: string; url?: string }, s: Session): Promise<{ text: string; from?: string }> {
+  if (!doc.url) return doc;
+  const r = await webRequest(doc.url, {
+    headers: { accept: 'application/json' }, timeoutMs: 15_000, maxBytes: MAX_DOC_BYTES,
+    scope: await scopeForWorkspace(currentWorkspace(s), 'REST source catalog (read from a URL)'),
+  });
   if (r.status !== 200) throw new Error(`The URL answered HTTP ${r.status}.`);
   return { text: r.body.toString('utf8'), from: r.url };
 }
@@ -177,7 +190,7 @@ export async function restCatalogRoutes(app: FastifyInstance) {
   });
 
   app.post(`${root}/import`, async (req: Req, reply) => {
-    let doc: { text: string; from?: string } | Error;
+    let doc: { text: string; from?: string; url?: string } | Error;
     try {
       doc = await documentText(req);
     } catch (e) {
@@ -187,6 +200,7 @@ export async function restCatalogRoutes(app: FastifyInstance) {
     if (!s) return;
     try {
       if (doc instanceof Error) throw doc;
+      doc = await documentOf(doc, s);
       const { catalog, notes } = readCatalogText(doc.text, { baseUrl: req.body?.base_url, from: doc.from, name: req.body?.name });
       const problems = wholeCatalogProblems(catalog);
       if (problems.length) throw new Error(`The catalog can't be used as it is: ${problems.slice(0, 8).join(' ')}${problems.length > 8 ? ` (and ${problems.length - 8} more)` : ''}`);
@@ -264,7 +278,7 @@ export async function restCatalogRoutes(app: FastifyInstance) {
   });
 
   app.post(`${root}/:cid(^\\d+$)/import`, async (req: Req, reply) => {
-    let doc: { text: string; from?: string } | Error;
+    let doc: { text: string; from?: string; url?: string } | Error;
     try {
       doc = await documentText(req);
     } catch (e) {
@@ -276,6 +290,7 @@ export async function restCatalogRoutes(app: FastifyInstance) {
     if (!c) return reply.code(404).send('Not found');
     try {
       if (doc instanceof Error) throw doc;
+      doc = await documentOf(doc, s);
       const { catalog, notes } = readCatalogText(doc.text, { baseUrl: req.body?.base_url, from: doc.from, name: c.name });
       const problems = wholeCatalogProblems(catalog);
       if (problems.length) throw new Error(problems.slice(0, 8).join(' '));

package/src/builder/sql.ts

@@ -19,6 +19,7 @@ import { sqlUtilityRoutes } from './sql-utilities.ts';
 import { createTemplate, objectBrowserRoutes } from './object-browser.ts';
 import { objectActionRoutes } from './object-actions.ts';
 import { tableEditorRoutes } from './table-editor.ts';
+import { dataSecurityRoutes } from './data-security.ts';
 import { dataModelerRoutes } from './data-modeler.ts';
 import { autoRestBuilderRoutes } from './autorest.ts';
 import { restModuleRoutes } from './rest-modules.ts';
@@ -131,6 +132,7 @@ export async function sqlRoutes(app: FastifyInstance) {
   await app.register(objectActionRoutes);
   // (sprint 95) Table Properties: create, edit or copy a table in a form
   await app.register(tableEditorRoutes);
+  await app.register(dataSecurityRoutes);
   // (sprint 98) the Data Modeler: relational diagrams, their DDL and data dictionary
   await app.register(dataModelerRoutes);
   // (sprint 100) RESTful Services: AutoREST (autorest.ts)

package/src/builder/themeroller.ts

@@ -2,7 +2,7 @@ import type { FastifyInstance } from 'fastify';
 import { owner } from '../db.ts';
 import { html, raw } from '../html.ts';
 import { icon } from '../icons.ts';
-import { appStyles, BASE_STYLES, baseStyleOf, FONT_SIZES, FONTS, HEX, ITEM_REF, MAX_STYLES, parseStyle, RADII, STYLE_NAME, type StyleVariant } from '../runtime/styles.ts';
+import { APPEARANCE_DEFAULT, appStyles, BASE_STYLES, baseStyleOf, FONT_SIZES, FONTS, HEX, ITEM_REF, MAX_STYLES, NAV_APPEARANCES, navAppearance, parseStyle, RADII, STYLE_NAME, type StyleVariant } from '../runtime/styles.ts';
 import { REGION_OPTIONS, BUTTON_OPTIONS } from '../runtime/template-options.ts';
 import { appHeader, back, BASE, csrf, developer, flash, input, region, select, send, shell, type Req } from './ui.ts';
 
@@ -28,9 +28,17 @@ async function updateTheme(id: string, change: (theme: Theme) => Theme | string)
 }
 
 const label = (list: Record<string, { label: string }>, k: string | undefined) => (k && list[k] ? list[k].label : '- as the base -');
+/** (sprint 117) a style's navigation appearance as shown in the list */
+const appearanceLabel = (k: string | undefined) => (k === APPEARANCE_DEFAULT ? 'Default' : k && NAV_APPEARANCES[k] ? NAV_APPEARANCES[k].label : '- as the application -');
+const appearanceChoices = (forStyle: boolean): [string, string][] => [
+  forStyle ? ['', '- as the application -'] : ['', 'Default (the base style\'s header and menu)'],
+  ...(forStyle ? [[APPEARANCE_DEFAULT, 'Default (the base style\'s header and menu)'] as [string, string]] : []),
+  ...Object.entries(NAV_APPEARANCES).map(([k, v]): [string, string] => [k, v.label]),
+];
+const APPEARANCE_HELP = 'APEX 26.2: Pillar Light puts the header and menu on the page\'s own light surfaces, Pillar Dark makes them one dark column in the header colour; both have a header pillar strip and show the current page as a filled pill.';
 
 function styleForm(appId: number, s: Parameters<typeof csrf>[0], st: StyleVariant | null, base: Theme) {
-  const colour = (name: 'accent' | 'header' | 'accent_dark' | 'header_dark', title: string, fallback: string) => {
+  const colour = (name: 'accent' | 'header' | 'accent_dark' | 'header_dark' | 'strip' | 'strip_dark', title: string, fallback: string) => {
     const ref = st?.[name] && ITEM_REF.test(st[name]!) ? st[name]! : '';
     const own = !!st?.[name] && !ref;
     const value = (own ? st?.[name] : undefined) ?? (typeof base[name] === 'string' && HEX.test(base[name] as string) ? (base[name] as string) : fallback);
@@ -49,14 +57,22 @@ function styleForm(appId: number, s: Parameters<typeof csrf>[0], st: StyleVarian
     sizes: Object.fromEntries(Object.entries(FONT_SIZES).map(([k, v]) => [k, v.css])),
     radii: Object.fromEntries(Object.entries(RADII).map(([k, v]) => [k, v.css])),
   });
-  const preview = html`<div class="tr-preview tr-preview-${baseStyleOf(base)}" data-tr-preview="${lists}" aria-label="Preview of the style">
+  // (sprint 117) the preview has a menu: the current page, its parent and the appearance in use
+  const appearance = navAppearance(base as never, st) ?? '';
+  const preview = html`<div class="tr-preview tr-preview-${baseStyleOf(base)}" data-tr-preview="${lists}" data-tr-app-appearance="${navAppearance(base as never, null) ?? ''}" data-appearance="${appearance}" aria-label="Preview of the style">
     <div class="tr-preview-header">${icon('menu')}<span>Preview</span></div>
+    <div class="tr-preview-main">
+    <ul class="tr-preview-nav" aria-label="Sample menu">
+      <li><span class="tr-nav-parent">${icon('users')}<span>Employees</span></span>
+        <ul><li><span class="tr-nav-current">Employee list</span></li><li><span>Directory</span></li></ul></li>
+      <li><span>${icon('chart')}<span>Reports</span></span></li>
+    </ul>
     <div class="tr-preview-body">
       <section class="region region-standard"><header class="region-header"><h2>A region</h2></header>
         <div class="region-body"><p class="u-mt0">Text with a <a href="#tr-preview-link" id="tr-preview-link">link</a> and a <span class="tc-badge tc-badge-info">badge</span>.</p>
           <div class="field"><label class="label" for="tr-preview-input">A field</label><input id="tr-preview-input" value="Value" readonly></div>
           <div class="buttons"><button type="button" class="btn">Cancel</button><button type="button" class="btn btn-hot">Save</button></div></div></section>
-    </div></div>`;
+    </div></div></div>`;
   return html`${preview}<form method="post" action="${BASE}/apps/${appId}/theme/styles" data-tr-form>${csrf(s)}
     ${st ? html`<input type="hidden" name="original" value="${st.name}">` : ''}
     <div class="form-grid">
@@ -65,6 +81,9 @@ function styleForm(appId: number, s: Parameters<typeof csrf>[0], st: StyleVarian
       ${colour('header', 'Header colour', baseOf.header)}
       ${colour('accent_dark', 'Accent colour in dark mode', '#a59cff')}
       ${colour('header_dark', 'Header colour in dark mode', '#0d0c1a')}
+      ${select('appearance', 'Navigation appearance', st?.appearance ?? '', appearanceChoices(true), APPEARANCE_HELP)}
+      ${colour('strip', 'Header strip colour', baseOf.accent)}
+      ${colour('strip_dark', 'Header strip colour in dark mode', '#a59cff')}
       ${select('font', 'Font', st?.font ?? '', choices(FONTS))}
       ${select('font_size', 'Font size', st?.font_size ?? '', choices(FONT_SIZES))}
       ${select('radius', 'Corners', st?.radius ?? '', choices(RADII))}
@@ -86,6 +105,13 @@ export async function themeRollerRoutes(app: FastifyInstance) {
     const theme: Theme = a.theme ?? {};
     const styles = appStyles(a.theme);
     const editing = typeof req.query.edit === 'string' ? styles.find((x) => x.name === req.query.edit) ?? null : null;
+    // (sprint 117) the application's header strip colours (else the accent)
+    const appColour = (k: 'strip' | 'strip_dark', title: string, fallback: string) => {
+      const v = typeof theme[k] === 'string' && HEX.test(theme[k] as string) ? (theme[k] as string) : '';
+      return html`<div class="field"><label class="label" for="f_app_${k}">${title}</label>
+        <input id="f_app_${k}" name="${k}" type="color" value="${v || fallback}">
+        <label class="check"><input type="checkbox" name="${k}_own" value="true"${v ? raw(' checked') : ''}> Use this colour (else the accent colour)</label></div>`;
+    };
     const swatch = (hex: string | undefined) =>
       !hex ? html`<span class="muted">base</span>` : ITEM_REF.test(hex) ? html`<code>${hex}</code>` : html`<input type="color" value="${hex}" disabled aria-label="${hex}" class="swatch"> <code>${hex}</code>`;
     const main = html`${appHeader(a, 'settings')}
@@ -96,9 +122,9 @@ export async function themeRollerRoutes(app: FastifyInstance) {
             are what users see without a style; each style below changes the colours and may set a font, font size and corners.
             The colours apply to the light theme, the dark-mode colours to the dark theme (pick light colours there); fonts, sizes and corners to both.</p>
           ${styles.length
-            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Name</th><th>Accent</th><th>Header</th><th>Dark accent</th><th>Dark header</th><th>Font</th><th>Font size</th><th>Corners</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody>
+            ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Name</th><th>Accent</th><th>Header</th><th>Dark accent</th><th>Dark header</th><th>Navigation</th><th>Strip</th><th>Font</th><th>Font size</th><th>Corners</th><th><span class="sr-only">Actions</span></th></tr></thead><tbody>
                 ${styles.map((x) => html`<tr><td>${x.name}${theme.style === x.name ? html` <span class="badge">default</span>` : ''}${x.condition ? html`<br><small class="muted">when <code>${x.condition.length > 60 ? `${x.condition.slice(0, 60)}…` : x.condition}</code></small>` : ''}</td>
-                  <td>${swatch(x.accent)}</td><td>${swatch(x.header)}</td><td>${swatch(x.accent_dark)}</td><td>${swatch(x.header_dark)}</td><td>${label(FONTS, x.font)}</td><td>${label(FONT_SIZES, x.font_size)}</td><td>${label(RADII, x.radius)}</td>
+                  <td>${swatch(x.accent)}</td><td>${swatch(x.header)}</td><td>${swatch(x.accent_dark)}</td><td>${swatch(x.header_dark)}</td><td>${appearanceLabel(x.appearance)}</td><td>${swatch(x.strip)}</td><td>${label(FONTS, x.font)}</td><td>${label(FONT_SIZES, x.font_size)}</td><td>${label(RADII, x.radius)}</td>
                   <td><a class="btn btn-sm" href="${BASE}/apps/${a.id}/theme?edit=${encodeURIComponent(x.name)}">${icon('edit')} Edit</a>
                     <form method="post" action="${BASE}/apps/${a.id}/theme/styles/delete" class="u-inline">${csrf(s)}<input type="hidden" name="name" value="${x.name}">
                       <button class="btn btn-sm btn-danger" data-confirm="Delete style ${x.name}?">Delete</button></form></td></tr>`)}
@@ -107,6 +133,9 @@ export async function themeRollerRoutes(app: FastifyInstance) {
           <form method="post" action="${BASE}/apps/${a.id}/theme/settings" class="u-mt1">${csrf(s)}
             <div class="form-grid">
               ${select('style', 'Default style', typeof theme.style === 'string' ? theme.style : '', [['', 'None (the base style and colours)'], ...styles.map((x): [string, string] => [x.name, x.name])], 'What everyone sees unless they chose another style.')}
+              ${select('appearance', 'Navigation appearance', navAppearance(theme as never, null) ?? '', appearanceChoices(false), `${APPEARANCE_HELP} A style may choose its own.`)}
+              ${appColour('strip', 'Header strip colour', BASE_STYLES[baseStyleOf(a.theme)].accent)}
+              ${appColour('strip_dark', 'Header strip colour in dark mode', '#a59cff')}
             </div>
             <div class="field"><label class="check"><input type="checkbox" name="style_choice" value="true"${theme.style_choice === true ? raw(' checked') : ''}> Users may choose a style</label>
               <small class="help">Adds the styles to the user menu and My account (APEX: "Enable End Users to Choose Theme Style"). A user's choice is kept per application on the account; only this application's styles can be chosen.</small></div>
@@ -138,6 +167,9 @@ export async function themeRollerRoutes(app: FastifyInstance) {
       header: b.header_item?.trim() || (b.header_own === 'true' ? b.header : undefined),
       accent_dark: b.accent_dark_item?.trim() || (b.accent_dark_own === 'true' ? b.accent_dark : undefined),
       header_dark: b.header_dark_item?.trim() || (b.header_dark_own === 'true' ? b.header_dark : undefined),
+      strip: b.strip_item?.trim() || (b.strip_own === 'true' ? b.strip : undefined),
+      strip_dark: b.strip_dark_item?.trim() || (b.strip_dark_own === 'true' ? b.strip_dark : undefined),
+      appearance: b.appearance,
       condition: b.condition,
     });
     if (typeof parsed === 'string') {
@@ -196,6 +228,15 @@ export async function themeRollerRoutes(app: FastifyInstance) {
     const problem = await updateTheme(id, (t) => {
       const styles = appStyles(t as never);
       const next: Theme = { ...t, style_choice: b.style_choice === 'true' };
+      // (sprint 117) the navigation appearance and the header strip colours: fixed keys and #rrggbb only
+      if (!b.appearance) delete next.appearance;
+      else if (Object.hasOwn(NAV_APPEARANCES, b.appearance)) next.appearance = b.appearance;
+      else return 'Navigation appearance: choose Default, Pillar Light or Pillar Dark.';
+      for (const k of ['strip', 'strip_dark'] as const) {
+        if (b[`${k}_own`] !== 'true') delete next[k];
+        else if (HEX.test(b[k] ?? '')) next[k] = b[k]!.toLowerCase();
+        else return 'Header strip colour: #rrggbb.';
+      }
       if (!b.style) delete next.style;
       else if (styles.some((x) => x.name === b.style)) next.style = b.style;
       else return 'Choose one of the styles.';

package/src/builder/ui.ts

@@ -9,6 +9,7 @@ import { documentShell } from '../layout.ts';
 import { getSession, saveState, takeFlash, type Session } from '../session.ts';
 import { SQL_TOOLS, TOOL_GROUPS } from './sql-tools.ts';
 import { ensureDevbar } from '../runtime/devbar.ts';
+import { noteChange } from './app-updates.ts';
 
 // Shared building blocks of the builder UI.
 
@@ -139,6 +140,8 @@ export function shell(s: Session, title: string, crumbs: [string, string?][], ma
               <a href="${BASE}/workspaces/${s.workspace.id}#preferences">${icon('sliders-horizontal')} Workspace preferences</a>
               <a href="${BASE}/workspaces/${s.workspace.id}#links">${icon('external-link')} Extension links</a>
               <a href="${BASE}/workspaces/${s.workspace.id}/utilization">${icon('chart')} Workspace utilization</a>
+              <a href="${BASE}/mail-queue">${icon('inbox')} Mail queue</a>
+              <a href="${BASE}/network">${icon('globe')} Network access</a>
               <a href="${BASE}/workspaces/${s.workspace.id}">${icon('layers')} Workspace and developers</a>
             </div>` : ''}
             <div class="menu-section menu-links">
@@ -326,6 +329,8 @@ export async function developer(req: Req, reply: FastifyReply) {
       await refuseLocked(req, reply, s, hit);
       return null;
     }
+    // (116) who changed the application last (app-updates.ts)
+    noteChange(req, s as Session & { username: string }, target?.appId ?? null);
   }
   return s;
 }

package/src/builder/websources.ts

@@ -276,7 +276,7 @@ export async function webSourceRoutes(app: FastifyInstance) {
       for (const p of src.params) values[p.name] = String(req.body?.[`p_${p.name}`] ?? '');
       const r = buildRequest(src, values);
       const credential = src.credential ? await loadCredential(src.app_id, src.credential) : null;
-      const res = await call({ ...r, credential, timeoutMs: src.timeout_s * 1000 });
+      const res = await call({ ...r, appId: src.app_id, what: `REST data source ${src.name} (builder test)`, credential, timeoutMs: src.timeout_s * 1000 });
       const text = res.body.toString('utf8');
       result.excerpt = text.length > 3000 ? `${text.slice(0, 3000)}…` : text;
       if (res.status < 200 || res.status > 299) throw new Error(`The web service answered ${res.status}.`);

package/src/builder/workspace-mail.ts

@@ -0,0 +1,121 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { owner } from '../db.ts';
+import { html } from '../html.ts';
+import type { MailService } from '../mail/mail.ts';
+import { PROVIDER_LABELS, PROVIDERS, type Provider } from '../mail/providers.ts';
+import { encryptSecret } from '../secrets.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
+import { formValues, parseForm, PROVIDER_TEXT, runCheck, serviceForm } from './mail.ts';
+import { back, BASE, csrf, developer, flash, region, select, send, shell, type Req } from './ui.ts';
+import { workspaceAdmin } from './workspaces.ts';
+
+// (sprint 118, WS-9; APEX 26.1 workspace-level SMTP credentials) A workspace's
+// own mail service, managed by its administrators on /builder/workspaces/:id/mail:
+// a meta.mail_service row with workspace_id (one per workspace), named
+// WORKSPACE_<id>. Its applications that an administrator gave no service send
+// through it. The secret is encrypted with PGKILN_SECRET_KEY like a web
+// credential's, write-only (never shown, never exported). It has no base URL
+// or token URL (the providers' own APIs only), and its SMTP host must be on the
+// installation's allow-list and the workspace's network access list
+// (src/mail/mail.ts serviceSettings, checked again on every send).
+
+type Service = MailService & { has_secret: boolean };
+
+async function wsAdminOnly(s: Session, reply: FastifyReply, wsId: string) {
+  if (await workspaceAdmin(s.username, wsId)) return true;
+  const main = html`<h1 class="u-mb1">Workspace mail service</h1><div class="alert alert-error" role="alert">Only the workspace's administrators manage its mail service.</div>`;
+  await send(reply.code(403), s, shell(s, 'Workspace mail service', [['Administration'], ['Workspace mail service']], main, 'users'));
+  return false;
+}
+
+const serviceOf = (wsId: number | string) =>
+  owner.one<Service>('select *, secret_enc is not null as has_secret from meta.mail_service where workspace_id = $1', [wsId]);
+
+export async function workspaceMailRoutes(app: FastifyInstance) {
+  const page = async (s: Session, req: Req, reply: FastifyReply, tried: { ok: boolean; text: string; to?: string; from?: string } | null = null, typed?: ReturnType<typeof parseForm>) => {
+    const w = await owner.one<{ id: number; name: string }>('select id, name from meta.workspace where id = $1', [req.params.id]);
+    if (!w) return reply.code(404).send('Not found');
+    const x = await serviceOf(w.id);
+    const wanted = String(req.query.provider ?? typed?.provider ?? '');
+    const provider: Provider = (PROVIDERS as readonly string[]).includes(wanted) ? (wanted as Provider) : x?.provider ?? 'smtp';
+    const users = (await owner.query<{ alias: string; own: string | null }>(
+      `select a.alias, (select s.name from meta.app_mail_service m join meta.mail_service s on s.id = m.service_id where m.app_id = a.id) as own
+         from meta.app a where meta.app_workspace(a.id) = $1 order by a.alias`, [w.id])).rows;
+    const shown = typed ? { ...x, description: typed.description, provider: typed.provider, settings: typed.settings, senders: typed.senders, enabled: typed.enabled } : x ?? {};
+    const main = html`
+      <div class="title-row"><h1>Mail service · ${w.name}</h1></div>
+      <p class="muted u-mt0">This workspace's own mail service: its applications that an administrator gave no service of their own send through it (<code>meta.send_mail()</code>, the Send e-mail process). The secret is stored encrypted and never shown again. It uses the provider's own API; an SMTP server must be on the installation's allow-list and this workspace's <a href="${BASE}/network">network access</a> list.</p>
+      <div class="mail-form-page">
+        ${region('Settings', html`
+          <form method="get" class="provider-switch">${select('provider', 'Provider', provider, PROVIDERS.map((p): [string, string] => [p, PROVIDER_LABELS[p]]),
+            x && provider !== x.provider ? 'Not saved yet: fill in the settings below and save to switch.' : PROVIDER_TEXT[provider][1])}<button class="btn btn-sm">Change</button></form>
+          ${serviceForm(shown, provider, `${BASE}/workspaces/${w.id}/mail`, csrf(s), !x, tried, { id: w.id })}
+          ${x ? html`<form method="post" action="${BASE}/workspaces/${w.id}/mail/delete" class="danger-zone">${csrf(s)}
+            <button class="btn btn-danger" data-confirm="Delete this workspace's mail service? Its applications without a service of their own can't send mail then.">Delete service</button></form>` : ''}`)}
+      </div>
+      ${region('Applications', html`<div class="table-wrap"><table class="report report-reflow">
+        <thead><tr><th>Application</th><th>Sends through</th></tr></thead>
+        <tbody>${users.length ? users.map((a) => html`<tr><td data-label="Application">${a.alias}</td>
+            <td data-label="Sends through">${a.own ? html`${a.own} <span class="muted">(chosen by an administrator)</span>` : x ? 'this service' : html`<span class="muted">nothing yet</span>`}</td></tr>`)
+          : html`<tr><td colspan="2" class="empty">No applications.</td></tr>`}</tbody></table></div>`)}`;
+    return send(reply, s, shell(s, `Mail service · ${w.name}`, [['Administration'], [w.name, `${BASE}/workspaces/${w.id}`], ['Mail service']], main, 'users'));
+  };
+
+  app.get(`${BASE}/workspaces/:id(^\\d{1,9}$)/mail`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await wsAdminOnly(s, reply, req.params.id))) return;
+    return page(s, req, reply);
+  });
+
+  app.post(`${BASE}/workspaces/:id(^\\d{1,9}$)/mail`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await wsAdminOnly(s, reply, req.params.id))) return;
+    const w = await owner.one<{ id: number }>('select id from meta.workspace where id = $1', [req.params.id]);
+    if (!w) return reply.code(404).send('Not found');
+    const b = (req.body ?? {}) as Record<string, string | undefined>;
+    try {
+      const old = await serviceOf(w.id);
+      const v = formValues(b, !!old?.has_secret && b.remove_secret !== 'true' && old.provider === parseForm(b).provider, { workspace: true });
+      const secret = b.secret ? encryptSecret(b.secret) : null;
+      if (old)
+        await owner.query(
+          `update meta.mail_service set description = $2, provider = $3, settings = $4, senders = $5, enabled = $6, updated_at = now(),
+                  secret_enc = case when $8 then null when $7::text is null then secret_enc else $7 end
+            where id = $1 and workspace_id = $9`,
+          [old.id, v.description, v.provider, JSON.stringify(v.settings), v.senders, v.enabled, secret, b.remove_secret === 'true' && !b.secret, w.id]);
+      else
+        await owner.query(
+          `insert into meta.mail_service (name, description, provider, settings, senders, enabled, secret_enc, workspace_id) values ($1, $2, $3, $4, $5, $6, $7, $8)`,
+          [`WORKSPACE_${w.id}`, v.description, v.provider, JSON.stringify(v.settings), v.senders, v.enabled, secret, w.id]);
+      await logActivity({ appId: null, username: s.username, event: 'mail_service', ip: clientIp(req), detail: `${old ? 'changed' : 'added'} the mail service of workspace ${w.id} (${v.provider})` });
+      flash(s, old ? 'Mail service saved.' : 'Mail service added: send a test mail to check it.');
+    } catch (e) {
+      flash(s, (e as Error).message.includes('mail_service_name_key') ? `A service named WORKSPACE_${w.id} exists already: an administrator renames it first.` : (e as Error).message, 'error');
+    }
+    return back(reply, s, `${BASE}/workspaces/${w.id}/mail`);
+  });
+
+  // Test connection / Send test mail, through the same checks as sending (JSON for builder.js; else the page again)
+  app.post(`${BASE}/workspaces/:id(^\\d{1,9}$)/mail/check`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await wsAdminOnly(s, reply, req.params.id))) return;
+    const w = await owner.one<{ id: number }>('select id from meta.workspace where id = $1', [req.params.id]);
+    if (!w) return reply.code(404).send('Not found');
+    const b = (req.body ?? {}) as Record<string, string | undefined>;
+    // only this workspace's stored secret (never another service's, whatever service_id says)
+    const stored = await serviceOf(w.id);
+    const result = await runCheck(b, stored ?? null, s.username, w.id);
+    await logActivity({ username: s.username, event: 'mail_check', ip: clientIp(req), detail: `${b.check === 'send' ? 'send' : 'connection'} workspace ${w.id}: ${result.ok ? 'ok' : 'failed'}` });
+    if (String(req.headers.accept ?? '').includes('application/json')) return reply.header('cache-control', 'no-store').send(result);
+    return page(s, req, reply, { ...result, to: String(b.test_to ?? '').trim(), from: String(b.test_from ?? '').trim() }, parseForm(b));
+  });
+
+  app.post(`${BASE}/workspaces/:id(^\\d{1,9}$)/mail/delete`, async (req: Req, reply) => {
+    const s = await developer(req, reply);
+    if (!s || !(await wsAdminOnly(s, reply, req.params.id))) return;
+    const r = await owner.query('delete from meta.mail_service where workspace_id = $1', [req.params.id]);
+    await logActivity({ appId: null, username: s.username, event: 'mail_service', ip: clientIp(req), detail: `deleted the mail service of workspace ${req.params.id}` });
+    flash(s, r.rowCount ? 'Mail service deleted.' : 'There was no mail service.');
+    return back(reply, s, `${BASE}/workspaces/${req.params.id}/mail`);
+  });
+}

package/src/builder/workspaces.ts

@@ -356,6 +356,7 @@ export async function workspaceRoutes(app: FastifyInstance) {
             <div class="buttons"><button class="btn">Save developers</button></div></form>`)}
       </div>
       ${serviceRegion(s, w)}
+      ${region('Mail and network access', html`<p class="u-mt0">This workspace's own <a href="${BASE}/workspaces/${w.id}/mail">mail service</a> for its applications without one of their own, its <a href="${BASE}/network?ws=${w.id}">network access</a> list (which hosts its applications may call, within the installation's list), and the <a href="${BASE}/mail-queue${full ? `?ws=${w.id}` : ''}">mail queue</a>.</p>`, '', 'mail-network')}
       <div class="columns">${preferencesRegion(s, w)}${linksRegion(s, w, links)}</div>
       ${full ? isolationRegion(s, w, roles.rows) : region('Isolation', html`<p class="u-mt0">${w.isolated ? 'Isolated: its applications and SQL run on database logins of its own.' : 'Shared.'} Administrators change it.</p>`)}
       ${!full ? '' : region('Applications', html`<div class="table-wrap"><table class="report report-reflow">

package/src/cli/main.ts

@@ -212,7 +212,7 @@ const COMMANDS: Record<string, Command> = {
   },
 
   import: {
-    usage: 'pgkiln import <path> [--alias <alias>] [--replace] [--check [--force] | --dry-run]',
+    usage: 'pgkiln import <path> [--alias <alias>] [--replace [--only <file>]…] [--check [--force] | --dry-run]',
     summary: 'import a JSON export, an application directory or a .zip of one',
     details:
       'Without --replace the alias must be free. With --replace an existing application with that\n' +
@@ -220,21 +220,43 @@ const COMMANDS: Record<string, Command> = {
       'reports, running tasks and workflows, and the on/off switch of its automations; its pages,\n' +
       'shared components and settings become those of the file. Without an existing application\n' +
       '--replace simply imports.\n\n' +
+      'With --replace, --only imports just the named files of a directory export (or .zip): a page\n' +
+      '(--only pages/12) or a shared component file or folder (--only shared/lovs/jobs.yaml); the rest\n' +
+      'of the application stays as it is in the database. Repeat --only for several.\n\n' +
       'With --check the Advisor checks the imported application before anything is committed: every\n' +
       'SQL fragment is planned as the application\'s role (unknown tables, columns, functions, types and\n' +
       'grants), and references to pages, items, lists of values and schemes are checked. Errors refuse\n' +
       'the import (exit code 1, nothing changes); --force imports anyway. --dry-run checks and never commits.',
-    options: { alias: { type: 'string', short: 'a' }, replace: { type: 'boolean' }, check: { type: 'boolean' }, force: { type: 'boolean' }, 'dry-run': { type: 'boolean' } },
+    options: { alias: { type: 'string', short: 'a' }, replace: { type: 'boolean' }, check: { type: 'boolean' }, force: { type: 'boolean' }, 'dry-run': { type: 'boolean' }, only: { type: 'string', multiple: true } },
     optionHelp: [
       ['-a, --alias <alias>', 'alias of the application (default: the one in the export)'],
       ['--replace', 'update the application with that alias in place'],
       ['--check', 'check the application\'s SQL and references first; errors refuse the import'],
       ['--force', 'with --check: import even when the check finds errors'],
       ['--dry-run', 'import, check and roll back: nothing changes'],
+      ['--only <file>', 'with --replace: import only this page (pages/12) or component file or folder'],
     ],
     positionals: [1, 1],
     async run(v, [path]) {
-      const { doc } = await readSource(path);
+      const source = await readSource(path);
+      let { doc } = source;
+      const only = (v.only as string[] | undefined) ?? [];
+      if (only.length) {
+        // (116) a file-level import: the named files over the application's current files
+        if (!v.replace) throw new UsageError('--only needs --replace');
+        if (!source.files) throw new UsageError('--only needs a directory export or a .zip of one');
+        const target = (v.alias as string) ?? doc?.app?.alias;
+        const { mergeOnly } = await import('./only.ts');
+        const style = JSON.parse(source.files.get('pgkiln.json')?.toString('utf8') ?? '{}').style === 'text' ? 'text' : 'json';
+        const current = await withDb(async (db) => {
+          if (!(await db.query('select 1 from meta.app where alias = $1', [target])).rowCount) throw new UsageError(`--only: application ${target} not found`);
+          return docToFiles(await exportDoc(db, target), style);
+        });
+        const m = mergeOnly(current, source.files, only);
+        err(m.changed.length ? `Only ${m.labels.join(', ')}: ${m.changed.length} file(s) differ.\n` : `Only ${m.labels.join(', ')}: no file differs.\n`);
+        const { filesToDoc } = await import('../appfiles.ts');
+        doc = filesToDoc(m.files);
+      }
       const alias = (v.alias as string) ?? doc?.app?.alias;
       if (!alias) throw new Error('the export has no alias: use --alias');
       const check = v['dry-run'] ? 'dry-run' : v.check ? (v.force ? 'force' : 'check') : 'off';