@webship.co/workspace 0.0.0-stage → 1.0.0-alpha1

package/actions/graphs.js

@@ -0,0 +1,107 @@
+/**
+ * Building a project's knowledge graph, and what you do with it afterwards.
+ *
+ * One module per area of the dashboard, each exporting the handlers it owns keyed by the path that
+ * reaches them. server.js merges the maps and dispatches; nothing here knows about routing, and
+ * adding an action is adding an entry rather than another branch in a 1,250-line function.
+ *
+ * Every handler takes the same context: the parsed form, the response, a `send` that writes an HTML
+ * fragment, and the workspace the request named.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { esc } = require('../html');
+const { humanSize, humanTime } = require('../format');
+const { ROOT, loadWorkspaces, workspaceDir } = require('../workspaces');
+const {
+  run, jobFragment, runningJobKey, startJob, ddevProjectName, listProjects,
+  startInScreen, screenStartedHtml,
+} = require('../jobs');
+const { graphStoreDir } = require('../graphs');
+const {
+  milvusProjectName, ragInstances, ragBindings, ragInstanceFor, ragWriteBinding,
+  ragCollectionName, milvusPost, ragCollections, ragInvalidate,
+} = require('../rag');
+const {
+  findTestReports, testReportFor, invalidateTestReports, testMediaHtml, testingStackOf,
+} = require('../test-reports');
+const { NAME_RE, SCRIPT_RE } = require('../validate');
+const { commandBlock } = require('../command-block');
+const { wsUrl } = require('../urls');
+const { findGraphifyScript, findRagifyScript } = require('../workspaces');
+const { DDEV_ACTIONS } = require('../ddev');
+
+async function graphify({ form, res, send, workspace, pathname }) {
+    const dir = workspaceDir(workspace);
+    const script = findGraphifyScript(dir);
+    const projectName = String(form.projectName || '');
+    if (!script) return send('<div class="msg error">No graphify script in this workspace.</div>', 400);
+    if (!NAME_RE.test(projectName) || !listProjects(dir).includes(projectName)) {
+      return send('<div class="msg error">Unknown project.</div>', 400);
+    }
+    // graphify has no cross-process lock: two runs against one graphify-out/
+    // race on manifest.json, graph.json and cache/ast, and the loser's atomic
+    // replace silently wins, corrupting the incremental gate.
+    const jobKey = `graphify:${workspace}/${projectName}`;
+    if (runningJobKey(jobKey)) {
+      return send('<div class="msg error">A graph is already being built for this project.</div>', 409);
+    }
+    // Local AST extraction only: no API key, nothing leaves the machine. Big
+    // codebases take a while, so it gets the long build timeout.
+    const started = await startInScreen({ workspace, project: projectName, projectDir: dir, ownerDir: path.join(dir, projectName), verb: 'graphify',
+      cmdLine: `bash ${JSON.stringify(script)} ${JSON.stringify(projectName)}`, label: 'graphify' });
+    return send(screenStartedHtml(started, 'graphify', projectName), started.ok ? 200 : (started.already ? 409 : 500));
+}
+
+  // Commands the dashboard SHOWS rather than runs, with a copy button each.
+  //
+  // Two kinds end up here. `claude mcp add` writes ~/.claude.json — the CLI configuration of the
+  // person at the keyboard, not of this web request. The Upsun pulls need cloud credentials this
+  // container does not have and replace local data. Both are worth reading before they happen.
+async function graph_mcp_command({ form, res, send, workspace, pathname }) {
+    const projectName = String(form.projectName || '');
+    if (!NAME_RE.test(projectName)) return send('<div class="msg error">Unknown project.</div>', 400);
+    const graph = path.join(graphStoreDir(workspace, projectName), 'graph.json');
+    if (!fs.existsSync(graph)) return send('<div class="msg error">No graph yet — build it first.</div>', 409);
+    return send(commandBlock(
+      `Serve the ${workspace}/${projectName} graph to the Claude Code CLI`,
+      [`cd ${ROOT}/graphs && bash cmd-tools-graphs.sh ${workspace}/${projectName} -a mcp-register`,
+        `claude mcp add --scope user graph-${workspace}-${projectName} -- graphify-mcp ${graph.replace(ROOT, '~/workspace')}`],
+      'Run either one <strong>on the host</strong>, in a terminal. The first is the workspace command; '
+      + 'the second is what it runs. stdio, so there is no port and no daemon — the CLI starts the server '
+      + 'when a session needs it. Open a NEW session to see the tools; rebuilding the graph needs no '
+      + 're-registration.'));
+}
+
+  // Delete a project's graph. Bounded to graphs/<workspace>/<project> — the whole point is that a
+  // graph is regenerable, so this is the one cheap thing to throw away. The project itself is
+  // never touched: nothing of the graph lives in it.
+async function graph_remove({ form, res, send, workspace, pathname }) {
+    if (form.confirm !== 'yes') return send('<div class="msg error">Deleting requires confirmation.</div>', 400);
+    const projectName = String(form.projectName || '');
+    // The project may be gone — a graph outlives it, and that is exactly a graph worth deleting.
+    if (!NAME_RE.test(projectName)) {
+      return send('<div class="msg error">Unknown project.</div>', 400);
+    }
+    if (runningJobKey(`graphify:${workspace}/${projectName}`)) {
+      return send('<div class="msg error">A graph run is in progress for this project — wait for it to finish.</div>', 409);
+    }
+    const out = graphStoreDir(workspace, projectName);
+    let real;
+    try {
+      real = fs.realpathSync(out);
+      const base = fs.realpathSync(path.join(ROOT, 'graphs'));
+      if (!real.startsWith(base + path.sep)) throw new Error('outside');
+    } catch (_) { return send('<div class="msg assistant">No graph to delete.</div>'); }
+    fs.rmSync(real, { recursive: true, force: true });
+    res.setHeader('HX-Trigger', 'refresh-projects');
+    return send(`<div class="msg assistant">🗑️ Deleted the graph for <strong>${esc(projectName)}</strong>. Rebuild it any time from the Graph menu.</div>`);
+}
+
+module.exports = {
+  '/actions/graphify': graphify,
+  '/actions/graph-mcp-command': graph_mcp_command,
+  '/actions/graph-remove': graph_remove,
+};

package/actions/images-svg.js

@@ -0,0 +1,33 @@
+/**
+ * Generate SVG: without confirm=yes this answers with the plan; the request goes out only with the confirm dialog's Yes.
+ */
+
+const { esc } = require('../html');
+const images = require('../images');
+
+async function image_svg({ form, send, res }) {
+  const svg = require('../images-svg');
+  if (form.confirm !== 'yes') {
+    const p = svg.plan(form);
+    if (!p.ok) return send(`<div class="msg error">${esc(p.error)}</div>${svg.formHtml()}`, 400);
+    const prov = require('../images-providers').get(p.provider);
+    const a = prov.available();
+    if (!a.ok) return send(`<div class="msg error">${prov.keyName ? `Set <code>ai_providers.${esc(prov.keyName)}.api_key</code> in <code>core/config/settings.yml</code> first.` : `${esc(prov.label)}: ${esc(a.why)}.`}</div>`, 503);
+    return send(svg.planHtml(p));
+  }
+  const r = await svg.generateSvg(form);
+  if (!r.ok) {
+    const spent = r.cost ? ` It cost about $${r.cost.toFixed(4)}.` : '';
+    return send(`<div class="msg error">${esc(r.error)}${spent}</div>`, r.status);
+  }
+  if (r.async) {
+    return send(`<div class="msg assistant">Claude Code is drawing it in the screen session <strong>${esc(r.session)}</strong>: <a href="/screens">watch it on Screens</a>. The SVG and its records appear in <strong>images/svg/</strong> when it is done.</div>`);
+  }
+  images.forgetScan();
+  try { res.setHeader('HX-Trigger', 'refresh-projects'); } catch (_) { /* headers already sent */ }
+  const viewer = require('../images-page').viewerHtml({ q: '', sort: 'newest', kind: '', scope: 'here' }, 'svg', 'images', r.rel) || '';
+  return send(`<div class="msg assistant">Saved <strong>images/${esc(r.rel)}</strong> after ${r.attempts} attempt${r.attempts === 1 ? '' : 's'}${
+    r.cost === null ? '' : `, for about $${r.cost.toFixed(4)}`}.</div>${viewer}`);
+}
+
+module.exports = { '/actions/image-svg': image_svg };

package/actions/images.js

@@ -0,0 +1,145 @@
+/**
+ * Renaming and deleting an image in the images workspace. Images shown from other workspaces are
+ * read-only here, so both refuse any source but images/.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { esc } = require('../html');
+const { workspaceDir, isValidWorkspace } = require('../workspaces');
+const images = require('../images');
+
+function ownImage(form) {
+  if (!isValidWorkspace('images')) return null;
+  const where = images.safeIn(workspaceDir('images'), String(form.file || ''));
+  if (!where || !images.IMAGE_RE.test(where.abs)) return null;
+  try { if (!fs.statSync(where.abs).isFile()) return null; } catch (_) { return null; }
+  return where;
+}
+
+function refreshed(res) {
+  images.forgetScan();
+  try { res.setHeader('HX-Trigger', 'refresh-projects'); } catch (_) { /* headers already sent */ }
+}
+
+async function image_rename({ form, send, res }) {
+  const where = ownImage(form);
+  if (!where) return send('<div class="msg error">That image is not in the images workspace.</div>', 404);
+  const ext = path.extname(where.abs).toLowerCase();
+  let name = images.safeName(form.name);
+  if (!name) return send('<div class="msg error">Give it a name: letters, digits, dot, dash and underscore.</div>', 400);
+  // The extension is the file's own; a rename never changes what kind of image it is.
+  if (path.extname(name).toLowerCase() !== ext) name = `${name.replace(/\.[^.]*$/, '')}${ext}`;
+  const dest = path.join(path.dirname(where.abs), name);
+  if (dest === where.abs) return send('<div class="msg assistant">The name is unchanged.</div>');
+  if (fs.existsSync(dest)) return send(`<div class="msg error"><code>${esc(name)}</code> already exists in that folder.</div>`, 409);
+  fs.renameSync(where.abs, dest);
+  // A sidecar travels with its image.
+  if (fs.existsSync(`${where.abs}.json`)) fs.renameSync(`${where.abs}.json`, `${dest}.json`);
+  refreshed(res);
+  const rel = path.relative(fs.realpathSync(workspaceDir('images')), dest).split(path.sep).join('/');
+  return send(`<div class="msg assistant">Renamed to <strong>${esc(name)}</strong>.</div>${
+    require('../images-page').viewerHtml({ q: '', sort: 'newest', kind: '', scope: 'here' }, path.posix.dirname(rel) === '.' ? '' : path.posix.dirname(rel), 'images', rel) || ''}`);
+}
+
+async function image_delete({ form, send, res }) {
+  if (form.confirm !== 'yes') return send('<div class="msg error">Deleting needs confirmation.</div>', 400);
+  const where = ownImage(form);
+  if (!where) return send('<div class="msg error">That image is not in the images workspace.</div>', 404);
+  fs.unlinkSync(where.abs);
+  try { fs.unlinkSync(`${where.abs}.json`); } catch (_) { /* no sidecar */ }
+  refreshed(res);
+  return send(`<div class="msg assistant">Deleted <strong>${esc(where.rel)}</strong>.</div>`);
+}
+
+const viewerOf = (rel) => require('../images-page').viewerHtml({ q: '', sort: 'newest', kind: '', scope: 'here' },
+  path.posix.dirname(rel) === '.' ? '' : path.posix.dirname(rel), 'images', rel) || '';
+
+async function image_screenshot({ form, send, res }) {
+  const r = await require('../images-create').screenshot(form);
+  if (!r.ok) return send(`<div class="msg error">${esc(r.error)}</div>`, r.status);
+  refreshed(res);
+  return send(`<div class="msg assistant">Saved <strong>${esc(r.rel)}</strong>.</div>${viewerOf(r.rel)}`);
+}
+
+async function image_edit({ form, send, res }) {
+  const r = await require('../images-create').edit(form);
+  if (!r.ok) return send(`<div class="msg error">${esc(r.error)}</div>`, r.status);
+  refreshed(res);
+  return send(`<div class="msg assistant">Saved as <strong>${esc(r.name)}</strong>; the original is unchanged.</div>${viewerOf(r.rel)}`);
+}
+
+/** Why a provider cannot run here, as HTML, or '' when it can. */
+function notReady(id) {
+  const prov = require('../images-providers').get(id);
+  if (!prov) return 'Unknown provider.';
+  const a = prov.available();
+  if (a.ok) return '';
+  return prov.keyName ? `Set <code>ai_providers.${esc(prov.keyName)}.api_key</code> in <code>core/config/settings.yml</code> first.` : `${esc(prov.label)}: ${esc(a.why)}.`;
+}
+
+/** A Claude Code session has started: where to watch it and where the result lands. */
+function startedHtml(session, where) {
+  return `<div class="msg assistant">Claude Code is drawing it in the screen session <strong>${esc(session)}</strong>: <a href="/screens">watch it on Screens</a>. The SVG, its PNG and the records appear in <strong>${where}</strong> when it is done.</div>`;
+}
+
+// Without confirm=yes this only answers with the plan; the paid request needs the confirm dialog's Yes.
+async function image_generate({ form, send, res }) {
+  const ai = require('../images-ai');
+  if (form.confirm !== 'yes') {
+    const p = ai.plan(form);
+    if (!p.ok) return send(`<div class="msg error">${esc(p.error)}</div>${ai.formHtml()}`, 400);
+    const why = notReady(p.provider);
+    if (why) return send(`<div class="msg error">${why}</div>`, 503);
+    return send(ai.planHtml(p));
+  }
+  const r = await ai.generate(form);
+  if (!r.ok) return send(`<div class="msg error">${esc(r.error)}</div>`, r.status);
+  if (r.async) return send(startedHtml(r.session, 'images/generated/'));
+  refreshed(res);
+  const page = require('../images-page');
+  const thumbs = r.made.map((rel) => `<button type="button" class="img-thumb img-made-thumb"
+      hx-get="/fragments/images/view?src=images&file=${encodeURIComponent(rel)}&path=generated" hx-target="#editor-modal-body" hx-swap="innerHTML">
+      <img src="${esc(page.fileUrl('images', rel))}" alt="${esc(rel)}"></button>`).join('');
+  const missing = (r.undescribed || []).length
+    ? `<div class="msg error">The description was not written for ${r.undescribed.map((n) => `<code>${esc(n)}</code>`).join(', ')}; open it and use <strong>Describe it</strong>.</div>` : '';
+  return send(`<div class="msg assistant">Made ${r.made.length} image${r.made.length === 1 ? '' : 's'} in <strong>images/generated/</strong>, each with its prompt, a description and an alt text${
+    r.cost === null ? '' : `, for about $${r.cost.toFixed(4)} in all`}. Open one to see it full size.</div>${missing}<div class="img-made-grid">${thumbs}</div>`);
+}
+
+// Edit with AI: a plan first, and the paid request only with the confirm dialog's Yes.
+async function image_ai_edit({ form, send, res }) {
+  const ai = require('../images-ai');
+  if (form.confirm !== 'yes') {
+    const p = ai.editPlan(form);
+    if (!p.ok) return send(`<div class="msg error">${esc(p.error)}</div>`, 400);
+    const why = notReady(p.provider);
+    if (why) return send(`<div class="msg error">${why}</div>`, 503);
+    return send(ai.editPlanHtml(p));
+  }
+  const r = await ai.editImage(form);
+  if (!r.ok) return send(`<div class="msg error">${esc(r.error)}</div>`, r.status);
+  if (r.async) return send(startedHtml(r.session, `the source's folder as ${esc(r.name)}`));
+  refreshed(res);
+  return send(`<div class="msg assistant">Saved as <strong>images/${esc(r.rel)}</strong>; the source is unchanged${
+    r.cost === null ? '' : `. It cost about $${r.cost.toFixed(4)}`}.${r.described ? '' : ' The description was not written: use <strong>Describe it</strong>.'}</div>${viewerOf(r.rel)}`);
+}
+
+// Describe an image: a small paid call, so only with the confirm dialog's Yes.
+async function image_describe({ form, send, res }) {
+  const r = await require('../images-ai').describeExisting(form);
+  if (!r.ok) return send(`<div class="msg error">${esc(r.error)}</div>`, r.status);
+  refreshed(res);
+  return send(`<div class="msg assistant">Described, for about $${r.cost.toFixed(4)}.</div>${viewerOf(r.rel)}`);
+}
+
+module.exports = {
+  '/actions/image-generate': image_generate,
+  '/actions/image-ai-edit': image_ai_edit,
+  '/actions/image-describe': image_describe,
+  '/actions/image-screenshot': image_screenshot,
+  '/actions/image-edit': image_edit,
+  '/actions/image-rename': image_rename,
+  '/actions/image-delete': image_delete,
+};

package/actions/navigation.js

@@ -0,0 +1,190 @@
+/**
+ * Writing the rail's layout: what is hidden, in what order, and the entries someone added.
+ *
+ * One form carries the whole arrangement (`#nav-form`), so a drag that has not been saved is posted with
+ * anything else that is done meanwhile — adding an entry never loses a reorder. Every write carries the
+ * file's mtime and is refused with 409 when it changed since, the way every other writer here works.
+ */
+
+const rail = require('../navigation');
+const navPage = require('../navigation-page');
+const cc = require('../commands');
+const { startJob, jobFragment } = require('../jobs');
+
+const ok = (msg) => `<div class="msg assistant">✅ ${msg}</div>`;
+const bad = (msg) => `<div class="msg error">${msg}</div>`;
+
+const asArray = (v) => (v === undefined ? [] : (Array.isArray(v) ? v : [v]));
+
+/** The arrangement as posted: group order, and each entry under the group it was dropped in. */
+function arranged(form) {
+  // Deduplicated, and the reserved lists are not sidebar groups: the group order is a set, and a stray
+  // repeat would make the same group render twice.
+  const groups = [...new Set(asArray(form.group).map(String).filter(rail.isId))]
+    .filter((g) => !rail.RESERVED.has(g));
+  const order = {};
+  const hidden = [];
+  const topbar = rail.emptyTopbar();
+  // How much of each entry is shown: `<id>:icon`, `<id>:text`, or `<id>:both`. Both is the default and
+  // is not written down, which is what keeps the file a record of what somebody changed — and posting
+  // it explicitly is what makes going back to both work.
+  const ships = shippedShow(scopeOf(form));
+  const show = {};
+  for (const raw of asArray(form.show).map(String)) {
+    const at = raw.lastIndexOf(':');
+    if (at < 0) continue;
+    const id = raw.slice(0, at);
+    const how = raw.slice(at + 1);
+    if (!rail.isId(id)) continue;
+    if (how === 'icon' || how === 'text') { show[id] = how; continue; }
+    // Both is what an entry is unless somebody says otherwise, so it is not written down — EXCEPT when
+    // it is overriding an entry the dashboard ships one way. Without that there would be no way to put
+    // the assistant's label back: leaving the key out would just let its own default win again.
+    if (how === 'both' && ships[id]) show[id] = 'both';
+  }
+  for (const raw of asArray(form.item).map(String)) {
+    const at = raw.indexOf(':');
+    if (at < 0) continue;
+    const group = raw.slice(0, at);
+    const id = raw.slice(at + 1);
+    if (!rail.isId(id)) continue;
+    if (group === 'hidden') { hidden.push(id); continue; }
+    const region = rail.regionOf(group);
+    if (region) { topbar[region].push(id); continue; }
+    if (!rail.isId(group)) continue;
+    (order[group] || (order[group] = [])).push(id);
+  }
+  return { groups, order, hidden, topbar, show };
+}
+
+/** How each entry SHIPS, from what the navigation has drawn — a default an explicit answer overrides. */
+function shippedShow(scope) {
+  const out = {};
+  for (const g of Object.values(rail.seenFor(scope))) {
+    for (const [id, was] of Object.entries((g || {}).items || {})) {
+      const how = rail.seenShips(was);
+      if (how) out[id] = how;
+    }
+  }
+  return out;
+}
+
+function scopeOf(form) {
+  const scope = String(form.scope || 'global');
+  return scope === 'global' || rail.isId(scope) ? scope : 'global';
+}
+
+/** Save one scope, keeping the entries it already had — they are edited by their own actions. */
+function write(form, change) {
+  const { raw, mtime } = rail.rawLayout();
+  if (String(form.mtime || '') !== String(mtime)) {
+    return { conflict: true };
+  }
+  const scope = scopeOf(form);
+  const current = rail.scopeLayout(raw, scope);
+  const next = change({ ...current });
+  const out = rail.withScope(raw, scope, next);
+  return { mtime: rail.saveLayout(out) };
+}
+
+const editor = (send, form, message, status = 200) =>
+  send(navPage.navEditorHtml(scopeOf(form), message), status);
+
+async function nav_save({ form, send }) {
+  const { groups, order, hidden, topbar, show } = arranged(form);
+  const res = write(form, (current) => ({ ...current, groups, order, hidden, topbar, show }));
+  if (res.conflict) {
+    return editor(send, form, bad('The navigation changed somewhere else while this was open — nothing was written. This is how it is now.'), 409);
+  }
+  return editor(send, form, ok('Navigation saved. It applies on the next page you open.'));
+}
+
+async function nav_add({ form, send }) {
+  const label = String(form.new_label || '').trim().slice(0, 40);
+  if (!label) return editor(send, form, bad('An entry needs a label.'), 400);
+  const href = String(form.new_href || '').trim();
+  const use = String(form.new_use || '').trim();
+  if (!href && !use) return editor(send, form, bad('An entry needs somewhere to go, or a command to run.'), 400);
+  if (href && use) return editor(send, form, bad('An entry is a link or a command, not both.'), 400);
+  if (use && !cc.loadCatalog().commands.some((c) => c.id === use)) {
+    return editor(send, form, bad('No such command.'), 400);
+  }
+  // A link goes in an href attribute and is followed by a click: only http(s) and a path of this
+  // dashboard, so nothing can put javascript: or data: into the rail.
+  if (href && !/^(https?:\/\/|\/)[^\s"'<>]*$/i.test(href)) {
+    return editor(send, form, bad('A link is an https:// address or a path of this dashboard.'), 400);
+  }
+
+  const base = rail.slugId(label);
+  const { raw } = rail.rawLayout();
+  const taken = new Set(rail.scopeLayout(raw, scopeOf(form)).items.map((i) => i.id));
+  let id = base;
+  for (let n = 2; taken.has(id); n += 1) id = `${base}-${n}`.slice(0, 48);
+
+  const item = { id, label };
+  const iconValue = String(form.new_icon || '').trim();
+  if (iconValue) item.icon = iconValue.slice(0, 40);
+  const group = String(form.new_group || '').trim();
+  // A region of the top bar is a legal destination, and slugId leaves it alone (it is already a slug).
+  if (group) item.group = rail.slugId(group);
+  if (href) item.href = href; else item.use = use;
+  if (form.new_confirm) item.confirm = true;
+
+  const { groups, order, hidden, topbar, show } = arranged(form);
+  const res = write(form, (current) => ({ ...current, groups, order, hidden, topbar, show, items: [...current.items, item] }));
+  if (res.conflict) {
+    return editor(send, form, bad('The navigation changed somewhere else while this was open — nothing was written.'), 409);
+  }
+  return editor(send, form, ok(`Added <strong>${label}</strong> to the navigation.`));
+}
+
+async function nav_remove({ form, send }) {
+  const id = String(form.id || '');
+  const { groups, order, hidden, topbar, show } = arranged(form);
+  const res = write(form, (current) => ({
+    ...current,
+    groups,
+    show: Object.fromEntries(Object.entries(show).filter(([x]) => x !== id)),
+    order: Object.fromEntries(Object.entries(order).map(([g, ids]) => [g, ids.filter((x) => x !== id)])),
+    hidden: hidden.filter((x) => x !== id),
+    topbar: Object.fromEntries(Object.entries(topbar).map(([r, ids]) => [r, ids.filter((x) => x !== id)])),
+    items: current.items.filter((it) => it.id !== id),
+  }));
+  if (res.conflict) return editor(send, form, bad('The navigation changed somewhere else while this was open.'), 409);
+  return editor(send, form, ok('Removed.'));
+}
+
+async function nav_reset({ form, send }) {
+  const { raw, mtime } = rail.rawLayout();
+  if (String(form.mtime || '') !== String(mtime)) {
+    return editor(send, form, bad('The navigation changed somewhere else while this was open.'), 409);
+  }
+  rail.saveLayout(rail.withScope(raw, scopeOf(form), {}));
+  return editor(send, form, ok('Back to the navigation this scope ships with.'));
+}
+
+/**
+ * Run a command an entry carries. The same runner a row action uses, so there is one history and one
+ * screen session per run rather than a second way of doing it.
+ */
+async function nav_run({ form, send }) {
+  const use = String(form.use || '');
+  const command = cc.loadCatalog().commands.find((c) => c.id === use);
+  if (!command) return send(bad('No such command.'), 400);
+  let line;
+  try {
+    line = cc.commandLine(command, { workspace: command.workspace });
+  } catch (err) {
+    return send(bad(`That command cannot run from the rail: ${err.message}`), 400);
+  }
+  const id = startJob(`rail:${use}`, line, { cwd: command.dir });
+  return send(jobFragment(id).html);
+}
+
+module.exports = {
+  '/actions/nav-save': nav_save,
+  '/actions/nav-add': nav_add,
+  '/actions/nav-remove': nav_remove,
+  '/actions/nav-reset': nav_reset,
+  '/actions/nav-run': nav_run,
+};