claude-code-hub 1.24.0 → 1.26.0

package/lib/apps.js

@@ -81,6 +81,7 @@ function manifestError(m, id, root) {
   if (entry === path.resolve(root) || !isContained(entry, root)) return 'run.entry is outside the app directory';
   return (
     providesError(m.provides) ??
+    launcherError(m.launcher) ??
     publishesError(m.publishes) ??
     keysError(m.keys) ??
     pluginError(m.plugin, root) ??
@@ -242,17 +243,23 @@ function publishesError(publishes) {
 // The hub fetches each path from the provider's own server.
 const CAPABILITY_PATHS = { projects: 'path', terminal: 'liveWork' };
 
+const isPath = (p) => typeof p === 'string' && p.startsWith('/');
+
 function providesError(provides) {
   if (provides === undefined) return null;
   if (!isObject(provides)) return 'provides is not an object';
   for (const [cap, key] of Object.entries(CAPABILITY_PATHS)) {
     if (provides[cap] === undefined) continue;
-    const p = provides[cap]?.[key];
-    if (typeof p !== 'string' || !p.startsWith('/')) return `provides.${cap}.${key} is not a path`;
+    if (!isPath(provides[cap]?.[key])) return `provides.${cap}.${key} is not a path`;
   }
   return null;
 }
 
+function launcherError(launcher) {
+  if (launcher === undefined) return null;
+  return isPath(launcher?.items) ? null : 'launcher.items is not a path';
+}
+
 // The manifest at root and its resolved plugin. With no id, the manifest's own id is checked. Throws with the file and the reason.
 function readApp(root, id) {
   const file = path.join(root, 'hub-app.json');
@@ -316,6 +323,7 @@ function loadApp(app, { flagPort, hubRoot = HUB_ROOT, resolve = require.resolve,
     loading: manifest.loading ?? {},
     actions: manifest.actions ?? {},
     provides: manifest.provides ?? {},
+    launcher: manifest.launcher ?? {},
     publishes: manifest.publishes ?? [],
     keeps: manifest.keys?.keeps ?? [],
     settings: manifest.settings ?? [],

package/lib/ext.js

@@ -17,13 +17,16 @@ const USAGE = `Usage: claude-code-hub ext <command>
   ext install github:<owner>/<repo>[/<folder>][@<commit or branch>]
                          Clone the extension into the hub dir, add it to the hub and install its plugin
   ext install <dir>      Run the extension in <dir> from the hub and install its plugin
-  ext install <id>       Install the plugin of an app the hub runs, in a config dir
+  ext install <id>       Install the plugin of an app the hub runs, or put an add-on on the dock, in a config dir
   ext list               List the extensions and the state of their plugins
   ext update <id>        Get the latest code of a GitHub extension, and install its plugin again
   ext remove <id>        Remove the extension's plugin and its entry, and the clone of a GitHub extension
 
+  A Kanban dock add-on (addon.json) installs the same way: in place of a plugin, it goes on the
+  Kanban dock of the config dir, for every session.
+
   --hub-dir <path>       The hub dir (default CLAUDE_HUB_DIR, else ~/.claude-hub)
-  --dir <path>           The config dir for plugin steps (default CLAUDE_CONFIG_DIR, else ~/.claude)`;
+  --dir <path>           The config dir for plugin and dock steps (default CLAUDE_CONFIG_DIR, else ~/.claude)`;
 
 const RESTART = '  Restart the hub to load the change.';
 const REGISTRY = 'https://nikiforovall.blog/claude-code-hub/extensions.json';
@@ -43,19 +46,27 @@ function checkRequires(ctx, { id, requires }, config) {
 
 const isExt = (e) => typeof e?.id === 'string' && typeof e.source === 'string';
 
+// [entry, kind] for each entry of the kinds' lists in config.json; extEntries keeps the extensions.
+const allEntries = (config) => Object.values(KINDS).flatMap((kind) => (config[kind.list] ?? []).map((e) => [e, kind]));
+const extEntries = (config) => allEntries(config).filter(([e]) => isExt(e));
+
+const withList = (config, kind, change) => ({ ...config, [kind.list]: change(config[kind.list] ?? []) });
+
 function extEntry(config, id) {
   if (!id) throw new Error(USAGE);
-  const entry = (config.apps ?? []).find((e) => isExt(e) && e.id === id);
-  if (!entry) throw new Error(`"${id}" is not an extension. ext list shows them.`);
-  return entry;
+  const found = extEntries(config).find(([e]) => e.id === id);
+  if (!found) throw new Error(`"${id}" is not an extension. ext list shows them.`);
+  return found;
 }
 
 const isGithub = (entry) => entry.source.startsWith('github:');
 
 function managedEntry(config, id, verb) {
-  const entry = extEntry(config, id);
-  if (entry.source !== 'local' && !isGithub(entry)) throw new Error(`${id} has source "${entry.source}": only a local or GitHub extension can ${verb}.`);
-  return entry;
+  const found = extEntry(config, id);
+  const [entry] = found;
+  const { source } = entry;
+  if (source !== 'local' && !isGithub(entry)) throw new Error(`${id} has source "${source}": only a local or GitHub extension can ${verb}.`);
+  return found;
 }
 
 const rootOf = (ctx, entry) => path.resolve(ctx.hubDir, entry.path);
@@ -108,9 +119,10 @@ function cloneSource(ctx, src) {
   }
 }
 
+// The retries outlast a dock add-on's server, which the board stops a moment after the add-on goes.
 function removeDir(dir) {
   try {
-    fs.rmSync(dir, { recursive: true, force: true, maxRetries: 3 });
+    fs.rmSync(dir, { recursive: true, force: true, maxRetries: 10 });
     return true;
   } catch (e) {
     console.log(`  Could not delete ${dir} (${e.code ?? e.message}). Delete it by hand.`);
@@ -181,6 +193,72 @@ function pluginStep(ctx, plugin, step, root) {
   return { install: installPlugin, reinstall: reinstallPlugin, uninstall: uninstallPlugin }[step](args);
 }
 
+function readAddon(root, id) {
+  const file = path.join(root, 'addon.json');
+  let manifest;
+  try {
+    manifest = JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch (e) {
+    throw new Error(`${file}: ${e.code === 'ENOENT' ? 'not found' : e.message}`);
+  }
+  // Kanban's addon add --manifest checks the rest of the manifest.
+  if (manifest?.kind !== 'addon' || !ID_RE.test(manifest.id ?? '')) {
+    throw new Error(`${file}: an add-on manifest needs "kind": "addon" and an id of lowercase letters, digits and dashes`);
+  }
+  if (id && manifest.id !== id) throw new Error(`${file}: its id is ${manifest.id}, not ${id}`);
+  return { manifest };
+}
+
+// Kanban's CLI writes the dock entry into the config dir's addons.json, and a running board picks it up.
+// The manifest's id keys the entry, so an add again updates it.
+function dockStep(ctx, id, _ext, step, root, config) {
+  const kanban = selectApps(config.apps, ctx.hubDir).apps.find((a) => a.id === 'kanban');
+  if (!kanban) {
+    console.log('  Kanban is off in the hub, so it has no dock to change.');
+    return false;
+  }
+  const configDir = ctx.configDir();
+  console.log(`\n  Dock add-on ${id}\n  Config dir: ${configDir}\n`);
+  const [label, cmd] =
+    step === 'uninstall'
+      ? ['Take it off the dock', `claude-code-kanban addon rm --key ${id} --offline`]
+      : ['Put it on the dock', `claude-code-kanban addon add --manifest "${root}" --offline`];
+  return report(label, ctx.exec(appCommand(cmd, appRoot(kanban, HUB_ROOT, require.resolve)), claudeEnv(configDir)));
+}
+
+// What differs between an app the hub runs (hub-app.json, with a plugin) and a Kanban dock add-on
+// (addon.json, put on the dock). The hub keeps add-ons in `addons`, because it runs every entry of `apps`.
+const KINDS = {
+  app: {
+    list: 'apps',
+    file: 'hub-app.json',
+    read: readApp,
+    step: (ctx, _id, ext, step, root) => !ext?.plugin || pluginStep(ctx, ext.plugin, step, root),
+    stepName: 'Plugin install',
+    removeName: 'Plugin removal',
+    unread: 'The plugin is not removed, because the manifest does not name it.',
+    installed: RESTART,
+    removed: RESTART,
+    updated: 'Restart it (Ctrl+R in the app launcher) to load app changes, and start a new Claude Code session to load plugin changes.',
+    noPlugin: 'no plugin',
+  },
+  addon: {
+    list: 'addons',
+    file: 'addon.json',
+    read: readAddon,
+    step: dockStep,
+    stepName: 'Putting it on the dock',
+    removeName: 'Taking it off the dock',
+    unread: 'It is taken off the dock by its id.',
+    installed: '  It is on the Kanban dock of every session in that config dir.',
+    removed: '  It is off the Kanban dock of that config dir.',
+    updated: 'Restart its server (Ctrl+R on its row in the app launcher) to load the new code.',
+    noPlugin: 'dock add-on',
+  },
+};
+
+const kindOf = (root) => (fs.existsSync(path.join(root, 'addon.json')) ? KINDS.addon : KINDS.app);
+
 // An id the hub runs gets its plugin installed. A folder is added to the hub, with its plugin, unless the
 // hub already runs it from there; then only the plugin is installed. Any other name is looked up in the registry.
 function install(ctx, target) {
@@ -190,6 +268,8 @@ function install(ctx, target) {
   if (/^(npm|https?):/.test(target)) throw new Error('Only a registry name, a github: source or a local folder installs. ext --help shows the forms.');
   const app = selectApps(config.apps, ctx.hubDir).apps.find((a) => a.id === target);
   if (app) return installAppPlugin(ctx, app);
+  const [addon] = extEntries(config).find(([e, k]) => k === KINDS.addon && e.id === target) ?? [];
+  if (addon) return dockStep(ctx, target, null, 'install', rootOf(ctx, addon), config);
   if (!fs.existsSync(target) && ID_RE.test(target)) return installRegistry(ctx, target, file, config);
   return installFolder(ctx, target, file, config);
 }
@@ -226,22 +306,23 @@ function installRegistry(ctx, name, file, config) {
 }
 
 // The entry the hub has for the id when `same` accepts it; throws when the id is built-in or taken.
-function claimId(id, config, file, same) {
+function claimId(id, config, file, kind, same) {
   if (APPS.some((a) => a.id === id)) throw new Error(`Cannot install ${id}: it is the id of a built-in app.`);
-  const entry = (config.apps ?? []).find((e) => e?.id === id);
-  if (entry && !(isExt(entry) && same(entry))) throw new Error(`Cannot install ${id}: ${file} already has an entry for it.`);
+  const [entry, k] = allEntries(config).find(([e]) => e?.id === id) ?? [];
+  const ours = entry && isExt(entry) && k === kind && same(entry);
+  if (entry && !ours) throw new Error(`Cannot install ${id}: ${file} already has an entry for it.`);
   return entry;
 }
 
-// Installs the plugin, then adds the entry. Returns false with nothing written when the plugin fails.
-function addExtension(ctx, root, file, config, fields) {
-  const ext = readApp(root);
+// Runs the install step, then adds the entry. Returns false with nothing written when the step fails.
+function addExtension(ctx, root, file, config, fields, kind) {
+  const ext = kind.read(root);
   const { id } = ext.manifest;
-  if (ext.plugin && !pluginStep(ctx, ext.plugin, 'install', root)) {
-    console.log(`\n  Plugin install failed, so ${id} is not added. See the errors above.`);
+  if (!kind.step(ctx, id, ext, 'install', root, config)) {
+    console.log(`\n  ${kind.stepName} failed, so ${id} is not added. See the errors above.`);
     return false;
   }
-  writeConfigFile(file, { ...config, apps: [...(config.apps ?? []), { id, ...fields }] });
+  writeConfigFile(file, withList(config, kind, (list) => [...list, { id, ...fields }]));
   return true;
 }
 
@@ -249,16 +330,18 @@ function installGithub(ctx, target, file, config, name) {
   const src = parseGithub(target);
   const { dir, sha } = cloneSource(ctx, src);
   let id;
+  let kind;
   try {
-    const ext = readApp(path.join(dir, src.subdir));
+    const extDir = path.join(dir, src.subdir);
+    kind = kindOf(extDir);
+    const ext = kind.read(extDir);
     id = ext.manifest.id;
-    if (name && id !== name) throw new Error(`The registry lists ${name} at ${src.source}, but its hub-app.json has the id ${id}.`);
-    const entry = claimId(id, config, file, (e) => e.source === src.source);
+    if (name && id !== name) throw new Error(`The registry lists ${name} at ${src.source}, but its ${kind.file} has the id ${id}.`);
+    const entry = claimId(id, config, file, kind, (e) => e.source === src.source);
     if (entry) {
       removeDir(dir);
       const root = rootOf(ctx, entry);
-      const { plugin } = readApp(root, id);
-      if (plugin && !pluginStep(ctx, plugin, 'install', root)) return false;
+      if (!kind.step(ctx, id, kind.read(root, id), 'install', root, config)) return false;
       console.log(`\n  ${id} is already in the hub, at ${short(entry.sha ?? '')}. ext update ${id} gets the latest code.`);
       return true;
     }
@@ -276,11 +359,11 @@ function installGithub(ctx, target, file, config, name) {
   const root = path.join(clone, src.subdir);
   const rel = path.relative(ctx.hubDir, root).replaceAll('\\', '/');
   const fields = { path: rel, source: src.source, ...(src.ref && { ref: src.ref }), sha };
-  if (!installDeps(ctx, root) || !addExtension(ctx, root, file, config, fields)) {
+  if (!installDeps(ctx, root) || !addExtension(ctx, root, file, config, fields, kind)) {
     removeDir(clone);
     return false;
   }
-  console.log(`\n  Installed ${id} from ${src.source} at ${short(sha)}.\n${RESTART}`);
+  console.log(`\n  Installed ${id} from ${src.source} at ${short(sha)}.\n${kind.installed}`);
   return true;
 }
 
@@ -297,37 +380,38 @@ function installFolder(ctx, target, file, config) {
   } catch {
     throw new Error(`"${target}" is not an app the hub runs, and no folder has that name.`);
   }
-  const ext = readApp(root);
+  const kind = kindOf(root);
+  const ext = kind.read(root);
   const { id } = ext.manifest;
-  const entry = claimId(id, config, file, (e) => rootOf(ctx, e) === root);
+  const entry = claimId(id, config, file, kind, (e) => rootOf(ctx, e) === root);
   checkRequires(ctx, ext.manifest, config);
   if (entry) {
-    if (ext.plugin && !pluginStep(ctx, ext.plugin, 'install', root)) {
-      console.log('\n  Plugin install failed. See the errors above.');
+    if (!kind.step(ctx, id, ext, 'install', root, config)) {
+      console.log(`\n  ${kind.stepName} failed. See the errors above.`);
       return false;
     }
     console.log(`\n  ${id} is already in the hub.`);
     return true;
   }
   const linked = root.replaceAll('\\', '/');
-  if (!addExtension(ctx, root, file, config, { path: linked, source: 'local' })) return false;
-  console.log(`\n  Linked ${id} to ${linked}.\n${RESTART}`);
+  if (!addExtension(ctx, root, file, config, { path: linked, source: 'local' }, kind)) return false;
+  console.log(`\n  Linked ${id} to ${linked}.\n${kind.installed}`);
   return true;
 }
 
 function list(ctx) {
   const { config } = readConfig(ctx.hubDir);
-  const entries = (config.apps ?? []).filter(isExt);
+  const entries = extEntries(config);
   if (!entries.length) {
     console.log('  No extensions.');
     return true;
   }
   const check = pluginChecker(ctx.configDir());
-  for (const e of entries) {
+  for (const [e, kind] of entries) {
     const where = e.source === 'local' ? `local ${e.path}` : [e.source, e.ref, e.sha && short(e.sha)].filter(Boolean).join(' ');
-    let plugin = 'no plugin';
+    let plugin = kind.noPlugin;
     try {
-      const p = readApp(rootOf(ctx, e), e.id).plugin;
+      const p = kind.read(rootOf(ctx, e), e.id).plugin;
       if (p) plugin = `${p.id} ${check(p).state}`;
     } catch (err) {
       plugin = err.message;
@@ -340,7 +424,7 @@ function list(ctx) {
 // A GitHub extension moves to the tip of its ref, or of the default branch, and goes back when the new code fails.
 function update(ctx, id) {
   const { file, config } = readConfig(ctx.hubDir);
-  const entry = managedEntry(config, id, 'update');
+  const [entry, kind] = managedEntry(config, id, 'update');
   const root = rootOf(ctx, entry);
   let sha;
   if (isGithub(entry)) {
@@ -349,7 +433,7 @@ function update(ctx, id) {
     sha = checkout(clone, entry.ref);
     const back = () => entry.sha && entry.sha !== sha && checkout(clone, entry.sha);
     try {
-      checkRequires(ctx, readApp(root, id).manifest, config);
+      checkRequires(ctx, kind.read(root, id).manifest, config);
     } catch (e) {
       back();
       throw e;
@@ -359,37 +443,37 @@ function update(ctx, id) {
       return false;
     }
   } else {
-    checkRequires(ctx, readApp(root, id).manifest, config);
+    checkRequires(ctx, kind.read(root, id).manifest, config);
   }
-  const { plugin } = readApp(root, id);
-  if (plugin && !pluginStep(ctx, plugin, 'reinstall', root)) return false;
-  if (sha && sha !== entry.sha) writeConfigFile(file, { ...config, apps: config.apps.map((e) => (e === entry ? { ...e, sha } : e)) });
+  if (!kind.step(ctx, id, kind.read(root, id), 'reinstall', root, config)) return false;
+  if (sha && sha !== entry.sha) writeConfigFile(file, withList(config, kind, (list) => list.map((e) => (e === entry ? { ...e, sha } : e))));
   const at = sha ? ` to ${short(sha)}` : '';
-  console.log(`\n  Updated ${id}${at}. Restart it (Ctrl+R in the app launcher) to load app changes, and start a new Claude Code session to load plugin changes.`);
+  console.log(`\n  Updated ${id}${at}. ${kind.updated}`);
   return true;
 }
 
 function remove(ctx, id) {
   const { file, config } = readConfig(ctx.hubDir);
-  const entry = managedEntry(config, id, 'be removed');
+  const [entry, kind] = managedEntry(config, id, 'be removed');
+  const root = rootOf(ctx, entry);
   let ext = null;
   try {
-    ext = readApp(rootOf(ctx, entry), id);
+    ext = kind.read(root, id);
   } catch (e) {
-    console.log(`  ${e.message}\n  The plugin is not removed, because the manifest does not name it.`);
+    console.log(`  ${e.message}\n  ${kind.unread}`);
   }
-  if (ext?.plugin && !pluginStep(ctx, ext.plugin, 'uninstall')) {
-    console.log(`\n  Plugin removal failed, so ${id} keeps its entry. See the errors above.`);
+  if (!kind.step(ctx, id, ext, 'uninstall', root, config)) {
+    console.log(`\n  ${kind.removeName} failed, so ${id} keeps its entry. See the errors above.`);
     return false;
   }
   const extensions = path.join(ctx.hubDir, 'extensions');
   const clone = isGithub(entry) ? path.join(extensions, id) : null;
-  writeConfigFile(file, { ...config, apps: config.apps.filter((e) => e !== entry) });
+  writeConfigFile(file, withList(config, kind, (list) => list.filter((e) => e !== entry)));
   if (clone && isContained(clone, extensions) && fs.existsSync(clone)) {
-    if (removeDir(clone)) console.log(`\n  Removed ${id} and its clone.\n${RESTART}`);
+    if (removeDir(clone)) console.log(`\n  Removed ${id} and its clone.\n${kind.removed}`);
     return true;
   }
-  console.log(`\n  Removed ${id}. ${entry.path} is left in place.\n${RESTART}`);
+  console.log(`\n  Removed ${id}. ${entry.path} is left in place.\n${kind.removed}`);
   return true;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-hub",
-  "version": "1.24.0",
+  "version": "1.26.0",
   "description": "Unified hub for Claude Code tools — Marketplace + Kanban in one PWA",
   "main": "server.js",
   "bin": {
@@ -47,7 +47,7 @@
   "homepage": "https://github.com/NikiforovAll/claude-code-hub#readme",
   "dependencies": {
     "claude-code-cost": "1.6.0",
-    "claude-code-kanban": "7.21.0",
+    "claude-code-kanban": "7.23.0",
     "claude-code-marketplace": "1.7.1",
     "claude-code-memory-explorer": "1.3.4",
     "express": "^4.21.0",

package/public/app.js

@@ -1029,6 +1029,14 @@ const APP_ICONS = {
     ['path', { d: 'M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3' }],
     ['path', { d: 'M12 12V8' }],
   ],
+  puzzle: [
+    [
+      'path',
+      {
+        d: 'M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z',
+      },
+    ],
+  ],
 };
 
 const ROW_ICONS = {
@@ -1074,12 +1082,80 @@ function appIcon(app) {
   return box;
 }
 
+// An app's own rows (`items` in its stats) follow its row and match on their own name.
 function appRows(q) {
   const tabs = tabIds();
-  const list = Object.entries(apps).map(([id, a]) => ({ kind: 'app', id, app: a, index: tabs.indexOf(id) }));
+  const list = Object.entries(apps).flatMap(([id, a]) => [
+    { kind: 'app', id, app: a, index: tabs.indexOf(id), name: a.name },
+    ...(palette.appStats?.[id]?.items ?? []).map((item) => ({ kind: 'item', id, app: a, item, name: item.name })),
+  ]);
   if (!q) return list;
-  const hit = list.filter((r) => r.app.name.toLowerCase().includes(q) || r.id.includes(q));
-  return hit.length ? hit : list.filter((r) => subseq(r.app.name.toLowerCase(), q));
+  const hit = list.filter((r) => r.name.toLowerCase().includes(q) || (r.kind === 'app' && r.id.includes(q)));
+  return hit.length ? hit : list.filter((r) => subseq(r.name.toLowerCase(), q));
+}
+
+function fillItemRow(li, row, q) {
+  const { item } = row;
+  li.classList.add('palette-item');
+  li.append(appIcon({ icon: 'puzzle' }), markedSpan('name', item.name, q), el('span', 'url', item.detail));
+  li.append(el('span', 'stats', item.state), el('span', 'age', item.kind || row.app.name));
+  if (item.path)
+    li.append(rowButton('palette-copy', 'copy', 'c', 'Copy the path (Ctrl+C)', `Copy the path of ${item.name}`));
+  for (const op of item.ops) {
+    const { key, glyph, title } = ITEM_OPS[op];
+    li.append(rowButton(`palette-${op}`, glyph, key, `${title} (Ctrl+${key.toUpperCase()})`, `${title} ${item.name}`));
+  }
+}
+
+// The ops the hub knows for an app's launcher rows; the app lists which ones each row offers.
+const ITEM_OPS = {
+  restart: { key: 'r', glyph: 'restart', title: 'Restart', doing: 'Restarting', done: 'Restarted' },
+  remove: { key: 'd', glyph: '×', title: 'Remove', doing: 'Removing', done: 'Removed', confirm: true },
+};
+
+const itemKeys = (item) =>
+  [item.path && 'Ctrl+C copy path', ...item.ops.map((op) => `Ctrl+${ITEM_OPS[op].key.toUpperCase()} ${op}`)]
+    .filter(Boolean)
+    .join(' · ');
+
+const APP_ROW_KEYS = {
+  c: (row) => copyToHint(apps[row.id].url),
+  r: (row) => appOpFromPalette(row.id, 'restart'),
+  s: (row) => toggleFromPalette(row.id),
+};
+
+const ITEM_ROW_KEYS = {
+  c: (row) => row.item.path && copyToHint(row.item.path),
+  ...Object.fromEntries(Object.entries(ITEM_OPS).map(([op, { key }]) => [key, (row) => itemOpFromPalette(row, op)])),
+};
+
+// An op with `confirm` asks once: the same key again on the same row sends it.
+async function itemOpFromPalette(row, op) {
+  const { id, item } = row;
+  if (!item.ops.includes(op)) return;
+  const { key, doing, done } = ITEM_OPS[op];
+  const confirm = `item\n${op}\n${id}\n${item.id}`;
+  if (ITEM_OPS[op].confirm && palette.confirmOp !== confirm) {
+    palette.confirmOp = confirm;
+    setPaletteHint(`Press Ctrl+${key.toUpperCase()} again to ${op} ${item.name} from ${row.app.name}.`);
+    return;
+  }
+  palette.confirmOp = null;
+  setPaletteHint(`${doing} ${item.name}…`);
+  let body;
+  try {
+    body = await withPaletteBusy(() =>
+      sendJson('POST', `/api/apps/${encodeURIComponent(id)}/items/${encodeURIComponent(item.id)}/${op}`),
+    );
+  } catch (err) {
+    setPaletteHint(`Could not ${op} ${item.name}: ${err.message}`);
+    return;
+  }
+  setPaletteHint(body?.message ?? `${done} ${item.name}`);
+  if (op === 'remove' && palette.appStats?.[id]?.items) {
+    palette.appStats[id].items = palette.appStats[id].items.filter((i) => i.id !== item.id);
+  } else if (body?.state) item.state = body.state;
+  renderPalette();
 }
 
 // A click on the button runs the mode's rowKeys entry for `key`, the same as Ctrl+<key>.
@@ -1247,7 +1323,11 @@ const PALETTE_MODES = {
     placeholder: 'Search apps...',
     label: 'Switch app',
     get hint() {
-      const keys = 'Enter switch · Ctrl+C copy URL · Ctrl+R restart · Ctrl+S start/stop';
+      const row = palette.rows?.[palette.sel];
+      const keys =
+        row?.kind === 'item'
+          ? itemKeys(row.item)
+          : 'Enter switch · Ctrl+C copy URL · Ctrl+R restart · Ctrl+S start/stop';
       if (!hubInfo.version) return keys;
       const plugin = hubInfo.plugin ? [pluginNode(hubInfo.plugin), ' · '] : [];
       return [`Hub ${hubInfo.version} · `, ...plugin, keys];
@@ -1260,6 +1340,10 @@ const PALETTE_MODES = {
       return prev < 0 ? 0 : prev;
     },
     fillRow(li, row, q) {
+      if (row.kind === 'item') {
+        fillItemRow(li, row, q);
+        return;
+      }
       li.append(appIcon(row.app), markedSpan('name', row.app.name, q), el('span', 'url', new URL(row.app.url).host));
       const s = palette.appStats?.[row.id];
       if (s?.version) li.append(el('span', 'ver', s.version));
@@ -1289,11 +1373,9 @@ const PALETTE_MODES = {
           : rowButton('palette-toggle', 'stop', 's', 'Stop the app (Ctrl+S)', `Stop ${row.app.name}`),
       );
     },
-    rowKeys: {
-      c: (row) => copyToHint(apps[row.id].url),
-      r: (row) => appOpFromPalette(row.id, 'restart'),
-      s: (row) => toggleFromPalette(row.id),
-    },
+    rowKeys: Object.fromEntries(
+      ['c', 'd', 'r', 's'].map((k) => [k, (row) => (row.kind === 'item' ? ITEM_ROW_KEYS : APP_ROW_KEYS)[k]?.(row)]),
+    ),
     commit(row) {
       closePalette();
       switchTab(row.id);
@@ -1552,6 +1634,7 @@ function renderPalette() {
   // sel is null until the first render that has rows: the cached list may be empty until load() lands.
   if (palette.sel === null && rows.length > 0) palette.sel = spec.initialSel?.(rows) ?? 0;
   palette.sel = Math.min(palette.sel, Math.max(0, rows.length - 1));
+  drawPaletteHint();
   if (rows.length === 0) {
     list.replaceChildren(el('li', 'palette-empty', spec.empty));
     return;
@@ -1597,7 +1680,6 @@ function openPalette(mode) {
   input.value = '';
   input.placeholder = spec.placeholder;
   document.querySelector('#palette .palette-box').setAttribute('aria-label', spec.label);
-  drawPaletteHint();
   showOverlay('palette', closePalette);
   renderPalette();
   input.focus();
@@ -1605,7 +1687,6 @@ function openPalette(mode) {
   Promise.resolve(spec.load?.())
     .then(() => {
       if (!palette.open || palette.mode !== mode) return;
-      drawPaletteHint();
       renderPalette();
     })
     .catch((err) => {

package/public/index.html

@@ -252,6 +252,10 @@
 
     .palette-row .name { font-weight: 600; }
 
+    .palette-row.palette-item { padding-left: 40px; }
+
+    .palette-row.palette-item .name { font-weight: 400; }
+
     /* The letters that made this row match. Accent-coloured rather than block-highlighted so it
        reads inside a bold name without fighting the selected row's bar. */
     .palette-row mark {

package/server.js

@@ -1173,6 +1173,36 @@ async function checkPortHealth() {
 }
 
 const STATS_TIMEOUT_MS = 1000;
+const ITEM_OPS = ['restart', 'remove'];
+// A restart can wait 20 s for the old server to free its port and 20 s for the new one to answer.
+const ITEM_OP_TIMEOUT_MS = 45000;
+
+// The app's own rows for the launcher (`launcher.items`), or null when it has none or does not answer in time.
+async function launcherItems(pool, a) {
+  const itemsPath = a.launcher.items;
+  const port = pool?.ports[a.id];
+  if (!itemsPath || !port || pool.stopped.has(a.id)) return null;
+  try {
+    const r = await fetch(`http://127.0.0.1:${port}${itemsPath}`, { signal: AbortSignal.timeout(STATS_TIMEOUT_MS) });
+    if (!r.ok) return null;
+    const { items } = await r.json();
+    if (!Array.isArray(items)) return null;
+    return items
+      .filter((i) => typeof i?.id === 'string' && typeof i.name === 'string')
+      .map((i) => ({
+        id: i.id,
+        name: i.name,
+        kind: typeof i.kind === 'string' ? i.kind : '',
+        detail: typeof i.detail === 'string' ? i.detail : '',
+        state: typeof i.state === 'string' ? i.state : '',
+        path: typeof i.path === 'string' ? i.path : '',
+        ops: Array.isArray(i.ops) ? i.ops.filter((op) => ITEM_OPS.includes(op)) : [],
+      }));
+  } catch {
+    return null;
+  }
+}
+
 app.get('/api/apps/stats', async (_req, res) => {
   res.setHeader('Cache-Control', 'no-store');
   const pool = activePool();
@@ -1182,10 +1212,12 @@ app.get('/api/apps/stats', async (_req, res) => {
     ENABLED_APPS.map(async (a) => {
       const child = pool?.children.get(a.id);
       const slowMs = (child && portHealth.flagged(child)?.worstMs) ?? null;
+      const [usage, items] = await Promise.all([stats(child, STATS_TIMEOUT_MS), launcherItems(pool, a)]);
       return [
         a.id,
         {
-          ...(await stats(child, STATS_TIMEOUT_MS)),
+          ...usage,
+          items,
           slowMs,
           stopped: !!pool?.stopped.has(a.id),
           linked: a.linked,
@@ -1234,6 +1266,33 @@ app.post('/api/apps/:id/:op(restart|start|stop)', async (req, res) => {
   }
 });
 
+// An op on one of an app's launcher rows, sent to `<items path>/<item id>/<op>` on that app.
+app.post(`/api/apps/:id/items/:item/:op(${ITEM_OPS.join('|')})`, async (req, res) => {
+  const { id, item, op } = req.params;
+  const target = ENABLED_APPS.find((a) => a.id === id);
+  const itemsPath = target?.launcher.items;
+  if (!itemsPath) {
+    res.status(404).json({ error: 'Unknown app or app with no launcher items' });
+    return;
+  }
+  const port = await waitForPort(id, Date.now() + API_PORT_WAIT_MS);
+  if (!port) {
+    res.status(503).json({ error: `${target.name} ${noPortReason(id).headline}` });
+    return;
+  }
+  console.log(`[${id}] ${op} ${item} asked for by the hub page`);
+  try {
+    const upstream = await fetch(`http://127.0.0.1:${port}${itemsPath}/${encodeURIComponent(item)}/${op}`, {
+      method: 'POST',
+      signal: AbortSignal.timeout(ITEM_OP_TIMEOUT_MS),
+    });
+    const body = await upstream.json().catch(() => ({}));
+    res.status(upstream.status).json(body);
+  } catch (err) {
+    res.status(502).json({ error: `${target.name} unavailable: ${err.message}` });
+  }
+});
+
 // Project list for the switcher palette, proxied from the app that provides `projects`. The port is
 // read per request because the provider's real port is only known once its banner has been scraped
 // (see spawnApp).