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

package/obsidian.js

@@ -0,0 +1,405 @@
+/**
+ * The Obsidian vault a graphed project can have, and the menu entries that make and read it.
+ *
+ * A vault is made FROM the graph — `cmd-tools-obsidian.sh` reads `graph.json` and writes notes,
+ * wikilinks and a JSON Canvas — so it lives inside the graph store at
+ * `graphs/<workspace>/<project>/obsidian/` and is thrown away with it. It also means the entries
+ * belong in the Graph menu rather than a menu of their own: without a graph there is nothing to
+ * convert, and a second button that is disabled most of the time only adds noise to the row.
+ *
+ * `views.js` builds the row's menu from this and `server.js` serves what the menu points at, so
+ * the menu cannot offer a file the server will not find.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const { ROOT } = require('./workspaces');
+const { esc } = require('./html');
+const { graphStoreDir } = require('./graphs');
+
+// Where a project's vault lives. Inside its graph, never inside the project.
+function vaultDir(wsKey, project) {
+  return path.join(graphStoreDir(wsKey, project), 'obsidian');
+}
+
+// The index note is named after the project, with the same sanitising the builder applies, so the
+// server and the builder agree on one filename.
+function indexNote(project) {
+  return `${String(project).replace(/[\\/:*?"<>|[\]#^]+/g, '-').replace(/^[ .-]+|[ .-]+$/g, '').slice(0, 120) || 'unnamed'}.md`;
+}
+
+// Same memo window as the graph's: a row re-renders once a second while a job runs, and asking the
+// filesystem per render turns a list of twenty projects into a stream of stat calls.
+let _cache = new Map();
+let _cacheAt = 0;
+function hasVault(wsKey, project) {
+  const now = Date.now();
+  if (now - _cacheAt > 2000) { _cache = new Map(); _cacheAt = now; }
+  const k = `${wsKey}/${project}`;
+  if (!_cache.has(k)) _cache.set(k, fs.existsSync(path.join(vaultDir(wsKey, project), '.obsidian')));
+  return _cache.get(k);
+}
+
+/**
+ * The Obsidian entries of the Graph menu.
+ *
+ * Returned as a list of `<li>` strings rather than a menu, because they hang off the Graph button:
+ * `graphMenuHtml` decides where they sit and only asks for them once a graph exists.
+ */
+function obsidianMenuItems(key, project, vals, busy) {
+  const built = hasVault(key, project);
+  const items = ['<li class="uk-nav-divider"></li>', '<li class="uk-nav-header">Obsidian</li>'];
+
+  items.push(`<li><a href hx-post="/actions/obsidian" ${vals()} class="${busy ? 'uk-disabled' : ''}"><span uk-icon="icon: file-edit; ratio: .7"></span> ${built ? 'Rebuild the vault' : 'Build the vault'}${busy ? ' (running…)' : ''}</a></li>`);
+
+  if (built) {
+    // A desktop protocol link, not an HTTP one: it hands the absolute path to the Obsidian app on
+    // the machine running the browser. Every reserved character has to be encoded — an unescaped
+    // slash makes Obsidian read the path as a vault name and open the wrong thing, or nothing.
+    const uri = `obsidian://open?path=${encodeURIComponent(vaultDir(key, project))}`;
+    items.push(`<li><a href="${esc(uri)}" title="Opens the Obsidian app on this machine"><span uk-icon="icon: link-external; ratio: .7"></span> Open in Obsidian</a></li>`);
+    // The reader first: the vault lives on the machine running the dashboard, which is not
+    // necessarily the machine looking at it, and this needs nothing installed.
+    items.push(`<li><a href hx-get="/obsidian/${esc(key)}/${esc(project)}/frame?what=view" hx-target="#editor-modal-body" hx-swap="innerHTML"><span uk-icon="icon: file-text; ratio: .7"></span> Read the notes</a></li>`);
+    items.push(`<li><a href hx-get="/obsidian/${esc(key)}/${esc(project)}/frame?what=canvas" hx-target="#editor-modal-body" hx-swap="innerHTML"><span uk-icon="icon: git-fork; ratio: .7"></span> Open the map</a></li>`);
+    items.push(`<li><a href="/obsidian/${esc(key)}/${esc(project)}/download" title="The vault as a .tar.gz, to open on another machine"><span uk-icon="icon: download; ratio: .7"></span> Download the vault</a></li>`);
+    items.push(`<li><a href class="uk-text-danger arm-step" data-armed="0" hx-post="/actions/obsidian-remove" ${vals(',"confirm":"yes"')} hx-trigger="confirmed-remove"><span uk-icon="icon: trash; ratio: .7"></span> Delete the vault</a></li>`);
+  }
+
+  return items.join('');
+}
+
+module.exports = { vaultDir, hasVault, obsidianMenuItems, indexNote };
+
+/* ---------------------------------------------------------------------------
+ * The web reader.
+ *
+ * Obsidian is a desktop app, and the vault lives on the machine running the
+ * dashboard — which is not necessarily the machine looking at it. So the vault is
+ * also readable in the browser: the notes with their wikilinks working, and the
+ * canvas drawn as the map it describes.
+ *
+ * Everything is served from this app. No CDN, because the graph viewer already
+ * needs the internet for vis-network and having one thing in the dashboard that
+ * stops working on a train is enough.
+ * ------------------------------------------------------------------------- */
+
+// The notes, by name. One pass over the vault, because every view needs the full
+// set: the list, and the link resolver that decides which [[targets]] are real.
+function vaultNotes(wsKey, project) {
+  const dir = vaultDir(wsKey, project);
+  const found = new Map();
+  const walk = (d, rel) => {
+    let entries;
+    try { entries = fs.readdirSync(d, { withFileTypes: true }); } catch (_) { return; }
+    for (const e of entries) {
+      if (e.name === '.obsidian') continue;
+      const full = path.join(d, e.name);
+      if (e.isDirectory()) walk(full, path.join(rel, e.name));
+      else if (e.name.endsWith('.md')) found.set(e.name.slice(0, -3), path.join(rel, e.name));
+    }
+  };
+  walk(dir, '');
+  return found;
+}
+
+/**
+ * The note shape this workspace writes, rendered.
+ *
+ * Not a general markdown parser — a parser that handles every construct would be a
+ * dependency and a much larger surface, and these notes are written by
+ * fun-obsidian.sh, so their shape is known: frontmatter, a heading, a source line,
+ * two link lists, a rule and a footer.
+ *
+ * Everything is escaped first and marked up second, so a note whose content happens
+ * to contain markup is displayed rather than obeyed.
+ */
+function renderNote(md, linkHref, exists) {
+  let meta = {};
+  let body = md;
+  const fm = md.match(/^---\n([\s\S]*?)\n---\n?/);
+  if (fm) {
+    body = md.slice(fm[0].length);
+    for (const line of fm[1].split('\n')) {
+      const m = line.match(/^([a-z_]+):\s*(.*)$/i);
+      if (m) meta[m[1]] = m[2].replace(/^["']|["']$/g, '');
+    }
+  }
+
+  const inline = (t) => esc(t)
+    .replace(/`([^`]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/\[\[([^\]|#]+)(\|[^\]]+)?\]\]/g, (_, name) => {
+      const n = name.trim();
+      return exists(n)
+        ? `<a class="wl" href="${linkHref(n)}">${esc(n)}</a>`
+        : `<span class="wl wl-missing" title="No note of that name in this vault">${esc(n)}</span>`;
+    });
+
+  const out = [];
+  let inList = false;
+  for (const raw of body.split('\n')) {
+    const line = raw.trimEnd();
+    if (/^-{3,}$/.test(line)) { if (inList) { out.push('</ul>'); inList = false; } out.push('<hr>'); continue; }
+    const li = line.match(/^-\s+(.*)$/);
+    if (li) {
+      if (!inList) { out.push('<ul class="links">'); inList = true; }
+      out.push(`<li>${inline(li[1])}</li>`);
+      continue;
+    }
+    if (inList) { out.push('</ul>'); inList = false; }
+    const h = line.match(/^(#{1,6})\s+(.*)$/);
+    if (h) { out.push(`<h${h[1].length}>${inline(h[2])}</h${h[1].length}>`); continue; }
+    if (!line) continue;
+    out.push(`<p>${inline(line)}</p>`);
+  }
+  if (inList) out.push('</ul>');
+  return { meta, html: out.join('\n') };
+}
+
+// One stylesheet for both views, using the dashboard's own theme tokens so the reader
+// follows whatever theme is set instead of picking its own colours.
+const VAULT_CSS = `
+  body { background: var(--surface); color: var(--ink); margin: 0; }
+  .vault { display: grid; grid-template-columns: 16rem 1fr; gap: 0; height: calc(100vh - 3.5rem); }
+  .vault-list { border-right: 1px solid var(--line); overflow-y: auto; padding: .5rem; }
+  .vault-list input { width: 100%; margin-bottom: .5rem; padding: .35rem .5rem;
+    border: 1px solid var(--line); border-radius: 4px; background: var(--surface);
+    color: var(--ink); }
+  .vault-list a { display: block; padding: .25rem .4rem; border-radius: 4px;
+    color: var(--ink); text-decoration: none; font-size: .82rem; overflow: hidden;
+    text-overflow: ellipsis; white-space: nowrap; }
+  .vault-list a:hover { background: var(--surface-sunken); }
+  .vault-list a.on { background: var(--link); color: var(--danger-ink); }
+  .vault-body { overflow-y: auto; padding: 1.25rem 1.75rem; }
+  .vault-body h1 { font-size: 1.5rem; margin: 0 0 .75rem; }
+  .vault-body h2 { font-size: 1rem; margin: 1.25rem 0 .4rem; color: var(--text-subtle); }
+  .vault-body ul.links { list-style: none; padding-left: 0; }
+  .vault-body ul.links li { padding: .15rem 0; }
+  .wl { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; }
+  .wl:hover { border-bottom-color: var(--link); }
+  .wl-missing { color: var(--text-subtle); border-bottom: 1px dotted var(--text-subtle); }
+  .vault-meta { font-size: .78rem; color: var(--text-subtle); margin-bottom: 1rem; }
+  .vault-meta code { background: var(--surface-sunken); padding: .05rem .3rem; border-radius: 3px; }
+  .vault-bar { display: flex; gap: .5rem; align-items: center; padding: .5rem .75rem;
+    border-bottom: 1px solid var(--line); background: var(--surface-raised); }
+  .vault-bar a, .vault-bar span { font-size: .82rem; }
+  #cv { width: 100%; height: calc(100vh - 7rem); background: var(--surface); cursor: grab; }
+  #cv:active { cursor: grabbing; }
+  #cv text { font: 15px system-ui, sans-serif; fill: var(--ink); pointer-events: none; }
+  #cv .n rect { fill: var(--surface-raised); stroke: var(--line); stroke-width: 1.5; }
+  #cv .n:hover rect { stroke: var(--link); stroke-width: 3; }
+  #cv .e { stroke: var(--text-subtle); stroke-width: 1.5; fill: none; opacity: .55; }
+  .vault-bar button { font-size: .8rem; padding: .15rem .55rem; border: 1px solid var(--line);
+    border-radius: 4px; background: var(--surface-raised); color: var(--ink); cursor: pointer; }
+  .vault-bar button:hover { border-color: var(--link); }
+`;
+
+// A page frame that inherits the dashboard's assembled theme sheet.
+function vaultPage(title, cssVersion, bodyHtml) {
+  return `<!doctype html><html><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(title)}</title>
+<link rel="icon" href="/favicon.ico">
+<link rel="stylesheet" href="/style.css?v=${esc(String(cssVersion))}">
+<style>${VAULT_CSS}</style>
+</head><body>${bodyHtml}</body></html>`;
+}
+
+/** The note browser: the list, and one note with its links live. */
+function vaultView(wsKey, project, note, cssVersion) {
+  const notes = vaultNotes(wsKey, project);
+  const names = [...notes.keys()].sort((a, b) => a.localeCompare(b));
+  const current = notes.has(note) ? note : (names.includes(project) ? project : names[0]);
+  const base = `/obsidian/${encodeURIComponent(wsKey)}/${encodeURIComponent(project)}/view`;
+  const href = (n) => `${base}?note=${encodeURIComponent(n)}`;
+
+  let rendered = { meta: {}, html: '<p class="uk-text-meta">This vault has no notes.</p>' };
+  if (current) {
+    try {
+      rendered = renderNote(fs.readFileSync(path.join(vaultDir(wsKey, project), notes.get(current)), 'utf8'),
+        href, (n) => notes.has(n));
+    } catch (_) {
+      rendered = { meta: {}, html: '<p class="msg error">That note could not be read.</p>' };
+    }
+  }
+
+  const meta = rendered.meta;
+  const metaLine = [
+    meta.source_file ? `<code>${esc(meta.source_file)}</code>` : '',
+    meta.source_location ? esc(meta.source_location) : '',
+    meta.cluster !== undefined ? `cluster ${esc(meta.cluster)}` : '',
+    meta.tags ? esc(meta.tags) : '',
+  ].filter(Boolean).join(' · ');
+
+  return vaultPage(`${current || project} · ${project}`, cssVersion, `
+    <div class="vault-bar">
+      <strong>${esc(project)}</strong>
+      <span class="uk-text-meta">${names.length} notes</span>
+      <a href="/obsidian/${esc(wsKey)}/${esc(project)}/canvas">Map</a>
+      <a href="/obsidian/${esc(wsKey)}/${esc(project)}/download">Download</a>
+      <a href="obsidian://open?path=${encodeURIComponent(vaultDir(wsKey, project))}">Open in the Obsidian app</a>
+      <span style="margin-left:auto"><a href="/">${esc(wsKey)} workspace</a></span>
+    </div>
+    <div class="vault">
+      <nav class="vault-list">
+        <input id="q" type="search" placeholder="Filter ${names.length} notes…" autocomplete="off">
+        <div id="ls">
+          ${names.map((n) => `<a href="${href(n)}" class="${n === current ? 'on' : ''}" data-n="${esc(n.toLowerCase())}">${esc(n)}</a>`).join('')}
+        </div>
+      </nav>
+      <article class="vault-body">
+        ${metaLine ? `<div class="vault-meta">${metaLine}</div>` : ''}
+        ${rendered.html}
+      </article>
+    </div>
+    <script>
+      // Filtering is the one thing worth scripting here: every link is a real URL, so
+      // the reader works with scripting off apart from this.
+      var q = document.getElementById('q'), ls = document.getElementById('ls');
+      q.addEventListener('input', function () {
+        var v = q.value.toLowerCase();
+        for (var i = 0; i < ls.children.length; i++) {
+          var a = ls.children[i];
+          a.style.display = a.dataset.n.indexOf(v) === -1 ? 'none' : '';
+        }
+      });
+    </script>`);
+}
+
+/**
+ * The canvas, drawn.
+ *
+ * The .canvas file already carries a position for every node — the builder laid them
+ * out cluster by cluster — so this is a straight projection into SVG rather than a
+ * layout algorithm. That also means the web map and the map Obsidian's Canvas shows
+ * are the same picture, which is the point of storing coordinates at all.
+ */
+function vaultCanvas(wsKey, project, cssVersion) {
+  const file = path.join(vaultDir(wsKey, project), `${indexNote(project).slice(0, -3)}.canvas`);
+  let canvas;
+  try {
+    canvas = JSON.parse(fs.readFileSync(file, 'utf8'));
+  } catch (_) {
+    return vaultPage(`${project} map`, cssVersion,
+      '<div class="vault-bar"><span class="msg error">This vault has no canvas. Rebuild it.</span></div>');
+  }
+
+  const nodes = canvas.nodes || [];
+  const edges = canvas.edges || [];
+  const at = new Map(nodes.map((n) => [n.id, n]));
+  const pad = 60;
+  const xs = nodes.map((n) => n.x); const ys = nodes.map((n) => n.y);
+  const minX = Math.min(...xs, 0) - pad; const minY = Math.min(...ys, 0) - pad;
+  const w = Math.max(...xs.map((x, i) => x + nodes[i].width), 100) - minX + pad;
+  const h = Math.max(...ys.map((y, i) => y + nodes[i].height), 100) - minY + pad;
+
+  // The colour a node carries is a JSON Canvas preset number, not a CSS colour.
+  const PRESET = { 1: '#e05252', 2: '#e08c52', 3: '#d9c04a', 4: '#4fa373', 5: '#4f9fa3', 6: '#8b6fc4' };
+
+  const view = `/obsidian/${encodeURIComponent(wsKey)}/${encodeURIComponent(project)}/view`;
+  const noteOf = (n) => (n.file || '').replace(/^notes\//, '').replace(/\.md$/, '');
+
+  const edgeSvg = edges.map((e) => {
+    const a = at.get(e.fromNode); const b = at.get(e.toNode);
+    if (!a || !b) return '';
+    const x1 = a.x + a.width; const y1 = a.y + a.height / 2;
+    const x2 = b.x; const y2 = b.y + b.height / 2;
+    const mid = (x1 + x2) / 2;
+    return `<path class="e" d="M${x1},${y1} C${mid},${y1} ${mid},${y2} ${x2},${y2}"/>`;
+  }).join('');
+
+  const nodeSvg = nodes.map((n) => {
+    const name = noteOf(n);
+    const label = name.length > 30 ? `${name.slice(0, 29)}…` : name;
+    const stroke = PRESET[n.color] || '';
+    return `<a class="n" href="${view}?note=${encodeURIComponent(name)}"><title>${esc(name)}</title>
+      <rect x="${n.x}" y="${n.y}" width="${n.width}" height="${n.height}" rx="6"${stroke ? ` style="stroke:${stroke}"` : ''}/>
+      <text x="${n.x + 12}" y="${n.y + n.height / 2 + 4}">${esc(label)}</text></a>`;
+  }).join('');
+
+  return vaultPage(`${project} map`, cssVersion, `
+    <div class="vault-bar">
+      <strong>${esc(project)}</strong>
+      <span class="uk-text-meta">${nodes.length} on the map · ${edges.length} links</span>
+      <a href="${view}">Notes</a>
+      <a href="obsidian://open?path=${encodeURIComponent(vaultDir(wsKey, project))}">Open in the Obsidian app</a>
+      <button id="fit" type="button">Fit</button>
+      <button id="one" type="button">100%</button>
+      <span class="uk-text-meta" style="margin-left:auto">drag to pan · scroll to zoom · click a node to read it</span>
+    </div>
+    <svg id="cv" viewBox="${minX} ${minY} ${w} ${h}">
+      <g id="vp">${edgeSvg}${nodeSvg}</g>
+    </svg>
+    <script>
+      // Pan and zoom by moving the viewBox, so the drawing stays vector-sharp and the
+      // links keep working — a CSS transform would break hit testing on the anchors.
+      (function () {
+        var svg = document.getElementById('cv');
+        var full = { x: ${minX}, y: ${minY}, w: ${w}, h: ${h} };
+        var vb = { x: full.x, y: full.y, w: full.w, h: full.h };
+        function apply() { svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h); }
+        function set(o) { vb.x = o.x; vb.y = o.y; vb.w = o.w; vb.h = o.h;
+          svg.setAttribute('viewBox', vb.x + ' ' + vb.y + ' ' + vb.w + ' ' + vb.h); }
+        function fit() { set(full); }
+        // 100%: one user unit per CSS pixel, anchored at the top-left of the map.
+        function oneToOne() {
+          set({ x: full.x, y: full.y, w: svg.clientWidth, h: svg.clientHeight });
+        }
+        document.getElementById('fit').addEventListener('click', fit);
+        document.getElementById('one').addEventListener('click', oneToOne);
+        // Fit only when the whole map already fits comfortably; otherwise open readable.
+        if (full.w <= svg.clientWidth * 1.4 && full.h <= svg.clientHeight * 1.4) { fit(); } else { oneToOne(); }
+        var drag = null, moved = false;
+        svg.addEventListener('pointerdown', function (e) { drag = { x: e.clientX, y: e.clientY }; moved = false; });
+        window.addEventListener('pointerup', function () { drag = null; });
+        window.addEventListener('pointermove', function (e) {
+          if (!drag) return;
+          var k = vb.w / svg.clientWidth;
+          vb.x -= (e.clientX - drag.x) * k; vb.y -= (e.clientY - drag.y) * k;
+          drag = { x: e.clientX, y: e.clientY };
+          if (Math.abs(e.movementX) + Math.abs(e.movementY) > 2) moved = true;
+          apply();
+        });
+        // A drag that ends over a node must not also open it.
+        svg.addEventListener('click', function (e) { if (moved) { e.preventDefault(); moved = false; } }, true);
+        svg.addEventListener('wheel', function (e) {
+          e.preventDefault();
+          var f = e.deltaY > 0 ? 1.12 : 0.89;
+          var r = svg.getBoundingClientRect();
+          var mx = vb.x + (e.clientX - r.left) / r.width * vb.w;
+          var my = vb.y + (e.clientY - r.top) / r.height * vb.h;
+          vb.x = mx - (mx - vb.x) * f; vb.y = my - (my - vb.y) * f;
+          vb.w *= f; vb.h *= f;
+          apply();
+        }, { passive: false });
+      })();
+    </script>`);
+}
+
+/**
+ * The modal wrapper: one of the two views in an iframe, filling the dialog.
+ *
+ * An iframe rather than the page's markup inlined, because both views are whole documents — own
+ * stylesheet link, own script, own pan/zoom state — and splicing that into the dashboard would
+ * put two competing sets of handlers on one document.
+ */
+function vaultFrame(wsKey, project, what) {
+  const src = `/obsidian/${encodeURIComponent(wsKey)}/${encodeURIComponent(project)}/${what === 'canvas' ? 'canvas' : 'view'}`;
+  const other = what === 'canvas' ? 'view' : 'canvas';
+  return `<div class="uk-flex uk-flex-between uk-flex-middle uk-margin-small-bottom">
+      <h3 class="uk-margin-remove">${esc(project)} <span class="uk-text-meta">${what === 'canvas' ? 'map' : 'notes'}</span></h3>
+      <div>
+        <a class="uk-button uk-button-default uk-button-small" href hx-get="/obsidian/${esc(wsKey)}/${esc(project)}/frame?what=${other}" hx-target="#editor-modal-body" hx-swap="innerHTML">${other === 'canvas' ? 'Map' : 'Notes'}</a>
+        <a class="uk-button uk-button-default uk-button-small" href="${esc(src)}" target="_blank">Open full screen</a>
+      </div>
+    </div>
+    <iframe src="${esc(src)}" title="${esc(project)}" style="width:100%;height:74vh;border:1px solid var(--line);border-radius:4px;background:var(--surface)"></iframe>`;
+}
+
+module.exports.vaultFrame = vaultFrame;
+module.exports.vaultNotes = vaultNotes;
+module.exports.renderNote = renderNote;
+module.exports.vaultView = vaultView;
+module.exports.vaultCanvas = vaultCanvas;

package/package.json

@@ -1,6 +1,49 @@
 {
   "name": "@webship.co/workspace",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-alpha1",
+  "description": "The Webship Workspace dashboard: a lean core (workspaces, builders, settings, the assistant shell, the plugin system) that every feature joins as a @webship.co/workspace-<name> plugin \u2014 required with npm, then activated, installed and configured.",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webship/workspace.git",
+    "directory": "core/workspace-app"
+  },
+  "main": "server.js",
+  "files": [
+    "*.js",
+    "actions",
+    "commands",
+    "docs",
+    "public",
+    "scripts",
+    "plugins/workspace-notes",
+    "screenrc",
+    "PLUGINS.md",
+    "WORKSPACES.md",
+    "README.md"
+  ],
+  "scripts": {
+    "start": "node server.js",
+    "test": "npm run test:unit && npm run test:browser",
+    "test:unit": "node --test \"tests/unit/*.test.js\" \"plugins/*/tests/*.test.js\"",
+    "test:browser": "cucumber-js --config cucumber.js"
+  },
+  "dependencies": {
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/xterm": "^5.5.0",
+    "ace-builds": "^1.44.0",
+    "htmx.org": "^4.0.0",
+    "js-yaml": "^5.2.1",
+    "ws": "^8.21.3"
+  },
+  "devDependencies": {
+    "webship-js": "^2.0.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [],
+  "author": ""
+}

package/palette-index.js

@@ -0,0 +1,46 @@
+/**
+ * What the command palette can go to: the workspaces, a few pages, and every project folder of the
+ * workspaces that hold projects. One small JSON document, kept for ten seconds, read by public/palette.js.
+ */
+
+const fs = require('fs');
+const path = require('path');
+const { loadWorkspaces, hubDomain } = require('./workspaces');
+
+const MAX_PROJECTS = 800;
+const NAME_RE = /^[a-zA-Z0-9][a-zA-Z0-9._-]{0,100}$/;
+let cache = null;
+let cachedAt = 0;
+
+const PAGES = [
+  { label: 'Screens', url: '/screens', hint: 'Detached sessions' },
+  { label: 'Commands', url: '/commands', hint: 'Every command the dashboard can run' },
+  { label: 'Settings', url: '/settings', hint: 'core/config' },
+  { label: 'Help', url: '/help', hint: 'The user guide' },
+];
+
+function buildIndex() {
+  const hub = hubDomain();
+  const workspaces = [];
+  const projects = [];
+  for (const [key, meta] of Object.entries(loadWorkspaces())) {
+    workspaces.push({ key, label: meta.label || key, url: `https://${key}.${hub}/`, kind: meta.kind || 'projects' });
+    if (meta.kind === 'files' || projects.length >= MAX_PROJECTS) continue;
+    let entries = [];
+    try { entries = fs.readdirSync(meta.dir, { withFileTypes: true }); } catch (_) { continue; }
+    for (const e of entries) {
+      if (!e.isDirectory() || e.name.startsWith('.') || !NAME_RE.test(e.name) || projects.length >= MAX_PROJECTS) continue;
+      const ddev = fs.existsSync(path.join(meta.dir, e.name, '.ddev', 'config.yaml'));
+      projects.push({ ws: key, name: e.name, ddev, url: ddev ? `https://${e.name}.${key}.${hub}/` : `https://${key}.${hub}/` });
+    }
+  }
+  return { workspaces, pages: PAGES, projects };
+}
+
+function paletteIndex() {
+  const now = Date.now();
+  if (!cache || now - cachedAt > 10000) { cache = buildIndex(); cachedAt = now; }
+  return cache;
+}
+
+module.exports = { paletteIndex, buildIndex, PAGES };

package/playwright.config.js

@@ -0,0 +1,23 @@
+/**
+ * The browser webship-js drives.
+ *
+ * Not a Playwright test-runner config: webship-js reads `browser`, `launchOptions` and
+ * `contextOptions` from here and launches the browser itself — cucumber-js is the runner.
+ */
+
+module.exports = {
+  // Chromium only. The suite asserts behaviour, not rendering differences between engines, and
+  // three browsers is three downloads for no extra answer.
+  browser: 'chromium',
+  launchOptions: {
+    // Headless unless something asks otherwise: `HEADLESS=false ddev test-dashboard browser` shows
+    // the run, which is the only time watching it is worth the window.
+    headless: process.env.HEADLESS !== 'false',
+    slowMo: Number(process.env.SLOW_MO || 0),
+  },
+  contextOptions: {
+    viewport: { width: 1440, height: 900 },
+    // DDEV signs its own certificates, and a browser launched here has no reason to trust one.
+    ignoreHTTPSErrors: true,
+  },
+};