claude-code-hub 1.22.0 → 1.23.0

package/lib/apps.js

@@ -85,10 +85,45 @@ function manifestError(m, id, root) {
     keysError(m.keys) ??
     pluginError(m.plugin, root) ??
     requiresError(m.requires) ??
-    listingError(m.listing, root)
+    listingError(m.listing, root) ??
+    settingsError(m.settings)
   );
 }
 
+const SETTING_KEY_RE = /^[a-zA-Z][a-zA-Z0-9]{0,31}$/;
+const MAX_SETTINGS = 20;
+const plainText = (v, max) => typeof v === 'string' && v.length > 0 && v.length <= max && !/[<>]/.test(v);
+const validSettingValue = (s, v) => (s.type === 'boolean' ? typeof v === 'boolean' : s.options.some((o) => o.value === v));
+
+function settingError(s) {
+  if (!isObject(s) || typeof s.key !== 'string' || !SETTING_KEY_RE.test(s.key)) return `settings entry has no key matching ${SETTING_KEY_RE}`;
+  const at = `settings "${s.key}"`;
+  if (!plainText(s.label, 60)) return `${at}: label is not plain text of 60 characters or fewer`;
+  if (s.help !== undefined && !plainText(s.help, 200)) return `${at}: help is not plain text of 200 characters or fewer`;
+  if (s.type === 'boolean') return validSettingValue(s, s.default) ? null : `${at}: default is not a boolean`;
+  if (s.type !== 'choice') return `${at}: type is not boolean or choice`;
+  const { options } = s;
+  if (!Array.isArray(options) || options.length < 2 || options.length > 6) return `${at}: options is not a list of 2 to 6`;
+  for (const o of options) {
+    if (!isObject(o) || typeof o.value !== 'string' || !o.value || !plainText(o.label, 30))
+      return `${at}: an option has no string value or plain-text label`;
+  }
+  if (new Set(options.map((o) => o.value)).size !== options.length) return `${at}: two options share a value`;
+  if (!validSettingValue(s, s.default)) return `${at}: default is not one of the option values`;
+  return null;
+}
+
+function settingsError(settings) {
+  if (settings === undefined) return null;
+  if (!Array.isArray(settings) || settings.length > MAX_SETTINGS) return `settings is not a list of up to ${MAX_SETTINGS}`;
+  for (const s of settings) {
+    const err = settingError(s);
+    if (err) return err;
+  }
+  if (new Set(settings.map((s) => s.key)).size !== settings.length) return 'two settings share a key';
+  return null;
+}
+
 const PLUGIN_NAME_RE = /^[\w.-]+$/;
 const VERSION_RE = /^\d+\.\d+\.\d+$/;
 
@@ -121,7 +156,7 @@ const IMAGE_RE = /\.(png|jpe?g|webp)$/i;
 const SPDX_RE = /^[A-Za-z0-9.+-]+$/;
 const isHttps = (u) => typeof u === 'string' && /^https:\/\/[^\s/]+/.test(u);
 const textError = (key, v, max) =>
-  v === undefined || (typeof v === 'string' && v.length > 0 && v.length <= max && !/[<>]/.test(v))
+  v === undefined || plainText(v, max)
     ? null
     : `listing.${key} is not plain text of ${max} characters or fewer`;
 
@@ -283,7 +318,8 @@ function loadApp(app, { flagPort, hubRoot = HUB_ROOT, resolve = require.resolve,
     provides: manifest.provides ?? {},
     publishes: manifest.publishes ?? [],
     keeps: manifest.keys?.keeps ?? [],
+    settings: manifest.settings ?? [],
   };
 }
 
-module.exports = { APPS, HUB_ROOT, ID_RE, selectApps, appRoot, loadApp, manifestError, readApp, resolvePlugin, conflicts };
+module.exports = { APPS, HUB_ROOT, ID_RE, selectApps, appRoot, loadApp, manifestError, readApp, resolvePlugin, conflicts, isObject, validSettingValue };

package/lib/settings.js

@@ -1,6 +1,6 @@
 'use strict';
 
-const { selectApps } = require('./apps');
+const { isObject, selectApps, validSettingValue } = require('./apps');
 
 const CONFIG_DIR_SWITCH = ['palette', 'swap'];
 const DEFAULT_POOL_SIZE = 3;
@@ -38,9 +38,41 @@ function appsShape(apps) {
   return JSON.stringify(apps.filter((a) => a.state !== 'off').map((a) => [a.id, a.state, a.deferredStart]));
 }
 
+const objectOr = (v) => (isObject(v) ? v : {});
+
+// An app's settings from its manifest list and the `settings` of its `apps` entry. A saved value
+// that the manifest no longer allows gives the default.
+function settingValues(schema, saved) {
+  const own = objectOr(saved);
+  return Object.fromEntries(schema.map((s) => [s.key, Object.hasOwn(own, s.key) && validSettingValue(s, own[s.key]) ? own[s.key] : s.default]));
+}
+
+function settingsPatchError(schema = [], settings) {
+  if (!isObject(settings)) return 'settings must be an object';
+  for (const [key, value] of Object.entries(settings)) {
+    const s = schema.find((x) => x.key === key);
+    if (!s) return `This app has no setting "${key}"`;
+    if (!validSettingValue(s, value))
+      return s.type === 'boolean' ? `${key} must be a boolean` : `${key} must be one of ${s.options.map((o) => o.value).join(', ')}`;
+  }
+  return null;
+}
+
+// Only a value that differs from the default is written.
+function withSettings(entry, schema, patch) {
+  const values = { ...objectOr(entry.settings) };
+  for (const [key, value] of Object.entries(patch)) {
+    if (value === schema.find((s) => s.key === key).default) delete values[key];
+    else values[key] = value;
+  }
+  if (Object.keys(values).length) entry.settings = values;
+  else delete entry.settings;
+}
+
 // `saved` is config.json as on disk. Returns the new config, or {error}. Only the keys the
-// patch names change; an app entry keeps its other fields (port, path, source).
-function applySettings(saved, patch, base) {
+// patch names change; an app entry keeps its other fields (port, path, source). `schemas` maps an
+// app id to the settings list of its manifest.
+function applySettings(saved, patch, base, schemas = {}) {
   if (!patch || typeof patch !== 'object') return { error: 'body must be an object' };
   const next = { ...saved };
   if (patch.configDirSwitch !== undefined) {
@@ -53,7 +85,7 @@ function applySettings(saved, patch, base) {
     next.poolSize = patch.poolSize;
   }
   if (patch.app !== undefined) {
-    const { id, state, deferredStart } = patch.app ?? {};
+    const { id, state, deferredStart, settings } = patch.app ?? {};
     const current = appSettings(saved.apps, base);
     if (!current.some((a) => a.id === id)) return { error: `Unknown app "${id}"` };
     if (state !== undefined && !APP_STATES.includes(state))
@@ -62,6 +94,8 @@ function applySettings(saved, patch, base) {
       return { error: 'deferredStart must be a boolean' };
     if (state === 'off' && current.every((a) => a.id === id || a.state === 'off'))
       return { error: 'At least one app must stay on' };
+    const settingsErr = settings === undefined ? null : settingsPatchError(schemas[id], settings);
+    if (settingsErr) return { error: settingsErr };
     let entries = Array.isArray(saved.apps) ? [...saved.apps] : [];
     // Listed apps come first, so a new entry appended at the end would move its tab. Listing
     // every app in its current order keeps the order.
@@ -76,6 +110,7 @@ function applySettings(saved, patch, base) {
       entry.hidden = state === 'hidden';
     }
     if (deferredStart !== undefined) entry.deferredStart = deferredStart;
+    if (settings !== undefined) withSettings(entry, schemas[id], settings);
     entries[i] = entry;
     next.apps = entries;
   }
@@ -90,4 +125,5 @@ module.exports = {
   applySettings,
   configDirSwitch,
   poolSize,
+  settingValues,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -46,10 +46,10 @@
   },
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
-    "claude-code-cost": "1.5.0",
-    "claude-code-kanban": "7.17.0",
-    "claude-code-marketplace": "1.6.0",
-    "claude-code-memory-explorer": "1.3.2",
+    "claude-code-cost": "1.5.1",
+    "claude-code-kanban": "7.19.0",
+    "claude-code-marketplace": "1.7.0",
+    "claude-code-memory-explorer": "1.3.3",
     "express": "^4.21.0",
     "open": "^10.1.0"
   },

package/packages/claude-hub-sdk/src/client.js

@@ -8,9 +8,12 @@
   // hub's proxy port, so a page framed by something other than the hub would otherwise paint the hub's last theme.
   const VARS_KEY = 'claude-hub:vars';
   const WELCOME_WAIT_MS = 2000;
+  // A press in one of these types text, so the host never gets it.
+  const FIELDS =
+    'input:not([type=checkbox], [type=radio], [type=button], [type=submit], [type=reset], [type=range], [type=color], [type=file], [type=image]), textarea, select, [contenteditable]';
 
   // keys.js comes first in the served file. Required as a module, client.js loads it itself.
-  const { comboOf, keyParts } = typeof ClaudeHubKeys === 'object' ? ClaudeHubKeys : require('./keys');
+  const { comboOf, keyParts, keySigs } = typeof ClaudeHubKeys === 'object' ? ClaudeHubKeys : require('./keys');
 
   function isVars(v) {
     return (
@@ -90,6 +93,7 @@
       const pending = new Map();
       const tokenWaiters = new Set();
       const themesFns = new Set();
+      const settingsFns = new Set();
       const queued = [];
       // Topic → payload: the latest publish before welcome.
       const outbox = new Map();
@@ -101,6 +105,7 @@
       let linkOpened = null;
       let themeBinding = null;
       let lastTheme = null;
+      let settings = null;
       let swatchesPainted = false;
       let nextId = 0;
 
@@ -172,6 +177,11 @@
         return welcome.themes.map(({ id, label }) => ({ id, label }));
       }
 
+      function setSettings(s) {
+        settings = Object.freeze(s && typeof s === 'object' && !Array.isArray(s) ? { ...s } : {});
+        for (const fn of settingsFns) fn(settings);
+      }
+
       function onWelcome(m) {
         if (m.protocol !== 1 || welcome) return;
         welcome = {
@@ -181,6 +191,7 @@
         };
         forward = strings(m.forward);
         appOrigins = strings(m.origins);
+        setSettings(m.settings);
         setStatus('live');
         if (welcome.themes.length) for (const fn of themesFns) fn(pickerThemes());
         themesFns.clear();
@@ -216,6 +227,9 @@
           case 'hub:terminalToken':
             for (const done of [...tokenWaiters]) done(typeof m.token === 'string' ? m.token : null);
             return;
+          case 'hub:settings':
+            if (welcome) setSettings(m.settings);
+            return;
         }
       }
 
@@ -223,28 +237,50 @@
         return !!forward && forward.has(comboOf(e));
       }
 
+      // Protocol §5.2. The app page that frames this one, such as a cck pane, claims the presses it acts on.
+      let hostKeys = null;
+      let hostOrigin = null;
+
+      function onHostMessage(e) {
+        const m = e.data;
+        if (!framed || e.source !== win.parent || win.parent === win.top) return;
+        if (m?.type !== 'hub:hostKeys' || !Array.isArray(m.keys)) return;
+        if (!hostKeys) win.parent.postMessage({ type: 'hub:hostReady' }, e.origin);
+        hostOrigin = e.origin;
+        hostKeys = new Set(m.keys.map((k) => keySigs(k)[0]));
+      }
+
+      const keyMessage = (type, e) => ({
+        type,
+        key: e.key,
+        code: e.code,
+        ctrl: e.ctrlKey,
+        alt: e.altKey,
+        shift: e.shiftKey,
+        meta: e.metaKey,
+      });
+
       function onKeydown(e) {
-        if (!forwards(e)) return;
+        if (forwards(e)) {
+          e.preventDefault();
+          return post(keyMessage('hub:keydown', e));
+        }
+        if (!hostKeys || e.defaultPrevented || !keySigs(e).some((s) => hostKeys.has(s))) return;
+        if (e.target?.closest?.(FIELDS)) return;
         e.preventDefault();
-        post({
-          type: 'hub:keydown',
-          key: e.key,
-          code: e.code,
-          ctrl: e.ctrlKey,
-          alt: e.altKey,
-          shift: e.shiftKey,
-          meta: e.metaKey,
-        });
+        win.parent.postMessage(keyMessage('hub:hostKey', e), hostOrigin);
       }
 
-      function run(action, params, resolve) {
+      function run(action, params, opts, resolve) {
+        const pane = opts?.open === 'pane';
         if (status === 'live') {
           const id = String(++nextId);
           pending.set(id, resolve);
-          return post({ type: 'hub:invoke', id, action, params });
+          return post({ type: 'hub:invoke', id, action, params, ...(pane && { open: 'pane' }) });
         }
         const target = standaloneFn(action)?.(params);
         if (!target) return resolve({ ok: false, reason: 'unhandled' });
+        if (pane) return resolve({ ok: true, handledBy: 'standalone', url: target });
         win.open(target, '_blank', 'noopener');
         resolve({ ok: true, handledBy: 'standalone' });
       }
@@ -286,6 +322,7 @@
       }
 
       win.addEventListener('message', onMessage);
+      win.addEventListener('message', onHostMessage);
       doc.addEventListener('keydown', onKeydown);
       win.addEventListener('click', onLinkClick, true);
       win.addEventListener('auxclick', onLinkClick, true);
@@ -357,6 +394,18 @@
           if (welcome.themes.length) fn(pickerThemes());
           return () => {};
         },
+        // The values of the settings in the app's manifest `settings`, as {key: value}. Null before
+        // welcome, standalone, or with no welcome: the app then uses its own defaults.
+        get settings() {
+          return settings;
+        },
+        // Calls fn with the values at welcome and after each change in the hub's settings. A call after
+        // welcome gets the current values at once.
+        onSettings(fn) {
+          settingsFns.add(fn);
+          if (settings) fn(settings);
+          return () => settingsFns.delete(fn);
+        },
         subscribe(topic, fn) {
           const fns = topicFns(topic);
           fns.add(fn);
@@ -385,10 +434,10 @@
           if (status === 'live') post({ type: 'hub:publish', topic, payload });
           else if (waiting()) outbox.set(topic, payload);
         },
-        invoke(action, params = {}) {
+        invoke(action, params = {}, opts = {}) {
           return new Promise((resolve) => {
-            if (waiting()) queued.push(() => run(action, params, resolve));
-            else run(action, params, resolve);
+            if (waiting()) queued.push(() => run(action, params, opts, resolve));
+            else run(action, params, opts, resolve);
           });
         },
         can(action) {

package/packages/claude-hub-sdk/src/keys.js

@@ -32,7 +32,21 @@ var ClaudeHubKeys = (() => {
     return combo.split('+').map((k) => mods[k] ?? named[k] ?? (k.length === 1 ? k.toUpperCase() : k));
   }
 
-  return { comboOf, keyParts };
+  // A host claim (protocol §5.2) names a press by its physical code, or by its character when the layout
+  // moves the key: {ctrlKey?, altKey?, shiftKey?, metaKey?, code, key: 'Unidentified'} or {…, key, code: ''}.
+  // A press matches a claim when one of its two signatures is the claim's first. AltGr types a
+  // character, so its press matches by character only. cck's frames use the same format.
+  function keySigs(e) {
+    const mods = [e.ctrlKey && 'ctrl', e.altKey && 'alt', e.shiftKey && 'shift', e.metaKey && 'meta']
+      .filter(Boolean)
+      .join('+');
+    return [
+      e.code && !e.getModifierState?.('AltGraph') && `${mods}|c:${e.code}`,
+      typeof e.key === 'string' && e.key !== 'Unidentified' && `${mods}|k:${e.key.toLowerCase()}`,
+    ].filter(Boolean);
+  }
+
+  return { comboOf, keyParts, keySigs };
 })();
 
 if (typeof module === 'object' && module.exports) module.exports = ClaudeHubKeys;

package/packages/claude-hub-sdk/src/stub.js

@@ -20,6 +20,8 @@
         status: 'standalone',
         themes: [],
         inHub: false,
+        settings: null,
+        onSettings: () => off,
         onStatus: () => off,
         onActive: () => off,
         onThemes: () => off,
@@ -27,9 +29,10 @@
         bindTheme: () => off,
         handle() {},
         publish() {},
-        invoke(action, params = {}) {
+        invoke(action, params = {}, opts = {}) {
           const target = standaloneFn(action)?.(params);
           if (!target) return Promise.resolve({ ok: false, reason: 'unhandled' });
+          if (opts.open === 'pane') return Promise.resolve({ ok: true, handledBy: 'standalone', url: target });
           win.open(target, '_blank', 'noopener');
           return Promise.resolve({ ok: true, handledBy: 'standalone' });
         },

package/plugin/plugins/claude-code-hub/.claude-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "Claude Code Hub integration: a skill to build on and extend the hub, with links to its docs, the extension mechanism and custom themes",
   "author": {
     "name": "NikiforovAll"

package/plugin/plugins/claude-code-hub/skills/hub-builder/references/extensibility.md

@@ -70,6 +70,8 @@ The page loads `/vendor/claude-hub-sdk.js` as the first element in `<body>`, a c
 
 The SDK writes the hub's color variables (`--accent`, `--bg-surface`, …) on `document.body`, so the app's CSS reads them and follows every hub theme, the user's own themes too. `bindTheme` keeps light/dark and the color theme in step. `onActive` tells a hidden tab to pause polling. The SDK forwards the hub's keys by itself; an element that eats keys first, such as a terminal, asks `forwards(e)`. An app that uses a `Ctrl+Alt` combo of its own lists it in `keys.keeps` in `hub-app.json`, for example `{"keeps": ["ctrl+alt+n"]}`, so the hub does not bind it, and the user cannot give it to a hub action in `config.json` `keys`. The user can change the hub's own keys there, so an app takes them from `welcome.forward`, never from a fixed list, and a help dialog shows each hub key with `hub.keyLabel(action)`, for example `hub.keyLabel('hub.projectPicker')` → `['Ctrl', 'Alt', 'P']`. Page: `extensibility/reference/manifest/#kept-keys`.
 
+An app that has user preferences lists them in `settings` of `hub-app.json` (`boolean` or `choice`, each with `key`, `label` and `default`). The hub shows them in its settings modal (`Ctrl+,`), stores them in `config.json` once for every config dir, and sends them to the page: read `hub.settings`, or `hub.onSettings(fn)` for the values at welcome and on each change. Alone, the app uses its own defaults. Page: `extensibility/reference/manifest/#settings`.
+
 ## Connect to other tools
 
 Apps never talk to each other directly. Each page talks to the hub page through the SDK, and the hub passes the message on. There is no server-to-server channel. Page: `extensibility/reference/connect/`.

package/public/app.js

@@ -549,7 +549,7 @@ function onIframeLoad(appId) {
   if (appId === activeApp) hideLoading();
 }
 
-function welcomeFor(data) {
+function welcomeFor(data, appId) {
   const common = Array.isArray(data.protocol) ? HUB_PROTOCOLS.filter((v) => data.protocol.includes(v)) : [];
   if (!common.length) return null;
   return {
@@ -560,13 +560,24 @@ function welcomeFor(data) {
     themes: hubThemes,
     actions: Object.keys(actions),
     origins: Object.keys(apps).map(originOf),
+    settings: apps[appId]?.settings ?? {},
   };
 }
 
+// Protocol §12.2. An app's settings go to its tab and the pages nested in it, no other app.
+function sendSettings(appId, list) {
+  if (!apps[appId]) return;
+  const settings = Object.fromEntries(list.map((s) => [s.key, s.value]));
+  apps[appId].settings = settings;
+  const message = { type: 'hub:settings', settings };
+  if (liveApps.has(appId)) postTo(appId, message);
+  for (const [win, nested] of nestedApps) if (nested.appId === appId) postNested(win, message);
+}
+
 const helloTopics = (data) => new Set(Array.isArray(data.subscribes) ? data.subscribes : []);
 
 function onHello(appId, data) {
-  const welcome = welcomeFor(data);
+  const welcome = welcomeFor(data, appId);
   if (!welcome) return;
   liveApps.set(appId, helloTopics(data));
   postTo(appId, welcome);
@@ -579,10 +590,13 @@ function onHello(appId, data) {
 }
 
 // A url such as '@evil.example/' turns the app host into userinfo, and the token rides in the fragment.
+function srcOnOrigin(appId, src) {
+  return URL.parse(src)?.origin === originOf(appId) ? src : null;
+}
+
 function navigateApp(appId, url) {
-  const src = appSrc(appId, url);
-  if (!URL.canParse(src) || new URL(src).origin !== originOf(appId)) return;
-  loadApp(appId, src, { link: true });
+  const src = srcOnOrigin(appId, appSrc(appId, url));
+  if (src) loadApp(appId, src, { link: true });
 }
 
 function isPlainObject(v) {
@@ -604,20 +618,22 @@ function fillUrl(template, params) {
 }
 
 // Protocol §7. The result does not wait for the handler: the hub queues nothing.
-function onInvoke({ id, action, params = {} }, send) {
+function onInvoke({ id, action, params = {}, open }, send) {
   if (typeof id !== 'string') return;
   const reply = (result) => send({ type: 'hub:result', id, ...result });
   const spec = typeof action === 'string' && Object.hasOwn(actions, action) ? actions[action] : null;
   if (!spec) return reply({ ok: false, reason: 'unhandled' });
   if (badParams(spec.params, params)) return reply({ ok: false, reason: 'bad-params' });
   const { app: handler, mode, url: template } = spec;
+  const url = template && fillUrl(template, params);
+  const paneSrc = open === 'pane' && url && srcOnOrigin(handler, apps[handler].url + url);
+  if (paneSrc) return reply({ ok: true, handledBy: handler, url: paneSrc });
   switchTab(handler);
   if (mode === 'message' && liveApps.has(handler)) {
     postTo(handler, { type: 'hub:action', id, action, params });
-  } else {
+  } else if (url && !guardedApps.has(handler)) {
     // Setting src reloads the app, so a guarded app only gets the switch.
-    const url = template && fillUrl(template, params);
-    if (url && !guardedApps.has(handler)) navigateApp(handler, url);
+    navigateApp(handler, url);
   }
   reply({ ok: true, handledBy: handler });
 }
@@ -669,7 +685,7 @@ function onNestedMessage(e) {
   const appId = data.type === 'hub:hello' && underTab(e.source) ? appIdByOrigin(e.origin) : known?.appId;
   if (!appId || e.origin !== originOf(appId)) return;
   if (data.type === 'hub:hello') {
-    const welcome = welcomeFor(data);
+    const welcome = welcomeFor(data, appId);
     if (!welcome) return;
     const topics = helloTopics(data);
     nestedApps.set(e.source, { appId, topics });
@@ -1337,6 +1353,8 @@ async function saveSetting(patch) {
     settingsModal.data = await sendJson('POST', '/api/settings', patch);
     settingsModal.error = null;
     configDirSwitch = settingsModal.data.configDirSwitch;
+    const appId = patch.app?.settings && patch.app.id;
+    if (appId) sendSettings(appId, settingsModal.data.apps.find((a) => a.id === appId)?.settings ?? []);
   } catch (err) {
     settingsModal.error = err.message;
   } finally {
@@ -1463,7 +1481,7 @@ function renderSettings() {
       '“Launcher only” keeps the app running but gives it no tab or number key; open it from the app launcher. “On demand” starts it the first time you open it.',
     ),
   );
-  body.replaceChildren(dirs, appsSec);
+  body.replaceChildren(dirs, appsSec, ...s.apps.filter((a) => a.settings?.length).map(appSettingsSection));
 
   let status = el('span', '', 'Saved as you change it');
   if (settingsModal.error) status = el('span', 'set-error', settingsModal.error);
@@ -1484,6 +1502,26 @@ function renderSettings() {
   }
 }
 
+const BOOLEAN_CHOICES = [
+  [false, 'Off'],
+  [true, 'On'],
+];
+
+// The settings an app lists in its manifest. They apply at once, with no restart.
+function appSettingsSection(a) {
+  const sec = el('section', 'set-sec');
+  sec.append(el('h4', '', a.name));
+  for (const setting of a.settings) {
+    const choices = setting.type === 'boolean' ? BOOLEAN_CHOICES : setting.options.map((o) => [o.value, o.label]);
+    const seg = segmented(setting.label, choices, setting.value, (v) =>
+      saveSetting({ app: { id: a.id, settings: { [setting.key]: v } } }),
+    );
+    seg.dataset.focus = `app:${a.id}:${setting.key}`;
+    sec.append(settingRow(setting.label, seg, setting.help));
+  }
+  return sec;
+}
+
 function kbd(text) {
   return el('kbd', '', text);
 }

package/server.js

@@ -30,6 +30,7 @@ const {
   poolSize,
   copyLive,
   MAX_POOL_SIZE,
+  settingValues,
 } = require('./lib/settings');
 const { version: HUB_VERSION } = require('./package.json');
 
@@ -929,6 +930,7 @@ function appsConfig() {
         publishes: a.publishes,
       };
       if (a.hidden) entry.hidden = true;
+      if (a.settings.length) entry.settings = appValues.get(a.id);
       if (TERMINAL_TOKEN && a.id === TERMINAL_APP.id) entry.terminalToken = TERMINAL_TOKEN;
       return [a.id, entry];
     }),
@@ -1066,14 +1068,34 @@ function appName(a) {
   return appNames.get(a.id);
 }
 
+// Only a running app has its manifest loaded, so only it lists settings.
+const SETTING_SCHEMAS = Object.fromEntries(
+  ENABLED_APPS.filter((a) => a.settings.length).map((a) => [a.id, a.settings]),
+);
+const savedEntry = (saved, id) => (Array.isArray(saved.apps) ? saved.apps.find((e) => e?.id === id) : undefined);
+// App settings apply at once, so the hub keeps their values here and in each page's welcome.
+const appValues = new Map();
+function loadAppValues(saved) {
+  for (const [id, schema] of Object.entries(SETTING_SCHEMAS))
+    appValues.set(id, settingValues(schema, savedEntry(saved, id)?.settings));
+}
+loadAppValues(hubConfig);
+
 function settingsView(saved) {
   const apps = appSettings(Array.isArray(saved.apps) ? saved.apps : [], CONFIG_BASE);
+  const settingsOf = (id) => SETTING_SCHEMAS[id].map((s) => ({ ...s, value: appValues.get(id)[s.key] }));
   return {
     configDirSwitch: configDirSwitch(hubConfig),
     poolSize: currentPoolSize(),
     poolSizeFlag: POOL_SIZE_FLAG !== null,
     maxPoolSize: MAX_POOL_SIZE,
-    apps: apps.map((a) => ({ id: a.id, state: a.state, deferredStart: a.deferredStart, name: appName(a) })),
+    apps: apps.map((a) => ({
+      id: a.id,
+      state: a.state,
+      deferredStart: a.deferredStart,
+      name: appName(a),
+      ...(SETTING_SCHEMAS[a.id] && { settings: settingsOf(a.id) }),
+    })),
     restartNeeded: appsShape(apps) !== RUNNING_APPS,
   };
 }
@@ -1102,13 +1124,14 @@ app.post('/api/settings', (req, res) => {
   }
   const saved = readSettingsConfig(res);
   if (!saved) return;
-  const r = applySettings(saved, req.body, CONFIG_BASE);
+  const r = applySettings(saved, req.body, CONFIG_BASE, SETTING_SCHEMAS);
   if (r.error) {
     res.status(400).json({ error: r.error });
     return;
   }
   writeHubConfig(r.config);
   copyLive(r.config, hubConfig);
+  loadAppValues(r.config);
   res.json(settingsView(r.config));
 });