@webship.co/workspace 1.0.0-beta1 → 1.0.0-rc1

package/core/workspace-app/tests/unit/node-menu.test.js

@@ -0,0 +1,161 @@
+/**
+ * The NODE menu on a project row.
+ *
+ * What must never drift: it appears only where there is a package.json; it offers yarn and npm as tabs
+ * that say whether each lock file is there, opening on the manager the project uses; Yarn 1 and Yarn 2+
+ * get their own command forms, read from the folder; every command runs in a screen session through
+ * DDEV, never a host npm or yarn; the handler runs only its tables, a real package name and a script
+ * package.json declares; and NODE sits right after COMPOSER.
+ */
+
+const assert = require('node:assert');
+const { test } = require('node:test');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const node = require('../../actions/node');
+const { MANAGERS, NODE_GROUPS, NODE_RUN_ACTIONS, NODE_PACKAGE_ACTIONS, NODE_SCRIPT_ROUTE, hasPackageJson, nodeInfo,
+  nodeArgsFor, nodePackageRefusal, nodeScripts, nodeScreenCommand } = node;
+const { LINGER_MARK } = require('../../linger');
+
+function folder(files) {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'nodemenu-'));
+  for (const [name, body] of Object.entries(files)) {
+    fs.mkdirSync(path.dirname(path.join(dir, name)), { recursive: true });
+    fs.writeFileSync(path.join(dir, name), typeof body === 'string' ? body : JSON.stringify(body));
+  }
+  return dir;
+}
+
+test('every entry has a group, a handler and shell-safe forms for npm, Yarn 1 and Yarn 2+', () => {
+  assert.deepStrictEqual(MANAGERS, ['yarn', 'npm']);
+  const order = Object.values(NODE_RUN_ACTIONS).map((a) => NODE_GROUPS.indexOf(a.group));
+  assert.ok(order.every((g) => g >= 0));
+  assert.deepStrictEqual(order, [...order].sort((x, y) => x - y), 'listed group by group, Daily first');
+  for (const [route, act] of [...Object.entries(NODE_RUN_ACTIONS), ...Object.entries(NODE_PACKAGE_ACTIONS)]) {
+    assert.match(route, /^\/actions\/node-[a-z-]+$/);
+    assert.strictEqual(typeof node[route], 'function', `${route} has no handler exported`);
+    for (const form of ['npm', 'yarn1', 'yarn']) {
+      if (act[form] === null) continue;
+      assert.ok(Array.isArray(act[form]) && act[form].length, `${route} ${form}`);
+      // The manager and these args become the session's closing echo.
+      assert.match(act[form].join(' '), /^[\w .=-]+$/, `${route} ${form} is not shell-safe`);
+    }
+  }
+  assert.strictEqual(typeof node[NODE_SCRIPT_ROUTE], 'function');
+});
+
+test('the folder decides the manager and which Yarn; the lock files are reported', () => {
+  const dirs = [];
+  try {
+    const yarn1 = folder({ 'package.json': { name: 'a' }, 'yarn.lock': '' }); dirs.push(yarn1);
+    let i = nodeInfo(yarn1);
+    assert.deepStrictEqual([i.valid, i.preferred, i.yarnBerry, i.locks.yarn, i.locks.npm], [true, 'yarn', false, true, false]);
+    assert.deepStrictEqual(nodeArgsFor(NODE_RUN_ACTIONS['/actions/node-ci'], 'yarn', i), ['install', '--frozen-lockfile']);
+
+    const berry = folder({ 'package.json': { packageManager: 'yarn@4.18.0+sha512.abc' }, 'yarn.lock': '' }); dirs.push(berry);
+    i = nodeInfo(berry);
+    assert.deepStrictEqual([i.preferred, i.yarnBerry, i.pinned.spec], ['yarn', true, 'yarn@4.18.0']);
+    assert.deepStrictEqual(nodeArgsFor(NODE_RUN_ACTIONS['/actions/node-ci'], 'yarn', i), ['install', '--immutable']);
+    assert.deepStrictEqual(nodeArgsFor(NODE_RUN_ACTIONS['/actions/node-outdated'], 'yarn', i), ['upgrade-interactive']);
+    assert.strictEqual(nodeArgsFor(NODE_RUN_ACTIONS['/actions/node-update'], 'yarn', i), null, 'Yarn 2+ has no bare upgrade');
+
+    const rc = folder({ 'package.json': {}, '.yarnrc.yml': 'yarnPath: x\n' }); dirs.push(rc);
+    assert.strictEqual(nodeInfo(rc).yarnBerry, true, '.yarnrc.yml alone means Yarn 2+');
+
+    const npm = folder({ 'package.json': {}, 'package-lock.json': '{}' }); dirs.push(npm);
+    i = nodeInfo(npm);
+    assert.deepStrictEqual([i.preferred, i.locks.npm, i.locks.yarn], ['npm', true, false]);
+    assert.deepStrictEqual(nodeArgsFor(NODE_RUN_ACTIONS['/actions/node-ci'], 'npm', i), ['ci']);
+
+    // The pin wins over a stray lock file.
+    const pinned = folder({ 'package.json': { packageManager: 'yarn@4.1.0' }, 'package-lock.json': '{}' }); dirs.push(pinned);
+    assert.strictEqual(nodeInfo(pinned).preferred, 'yarn');
+
+    const bad = folder({ 'package.json': '{ not json' }); dirs.push(bad);
+    assert.strictEqual(nodeInfo(bad).valid, false);
+    assert.strictEqual(hasPackageJson(bad), true);
+    assert.strictEqual(hasPackageJson(path.join(bad, 'missing')), false);
+  } finally { for (const d of dirs) fs.rmSync(d, { recursive: true, force: true }); }
+});
+
+test('a package must be an npm package name; only add takes a version', () => {
+  const add = NODE_PACKAGE_ACTIONS['/actions/node-add'];
+  const rm = NODE_PACKAGE_ACTIONS['/actions/node-remove'];
+  for (const ok of ['react', 'lodash.merge', '@storybook/react', '@storybook/react@^8.0', 'lodash@latest', 'sass@>=1.70 <2']) {
+    assert.strictEqual(nodePackageRefusal(ok, add), '', `should pass: ${ok}`);
+  }
+  assert.strictEqual(nodePackageRefusal('@storybook/react', rm), '');
+  assert.notStrictEqual(nodePackageRefusal('react@^18', rm), '', 'remove takes no version');
+  for (const bad of ['', 'React', "react'; id; '", 'react@$(id)', 'react@`id`', 'react;id', 'github:user/repo',
+    'file:../x', 'https://x.test/a.tgz', 'react@git+ssh://x', 'react@1\\2', '../etc']) {
+    assert.notStrictEqual(nodePackageRefusal(bad, add), '', `must be refused: ${bad}`);
+  }
+});
+
+test('scripts come from package.json; lifecycle hooks and unsafe names do not', () => {
+  const found = nodeScripts({ scripts: {
+    'storybook:dev': 'storybook dev -p 6006',
+    build: 'webpack', prebuild: 'rimraf dist', postbuild: 'echo done',
+    prettier: 'prettier --write .', postcss: 'postcss src',
+    postinstall: 'patch-package', prepare: 'husky',
+    'bad name; id': 'x',
+  } });
+  assert.deepStrictEqual(found.map((s) => s.name), ['storybook:dev', 'build', 'prettier', 'postcss']);
+  assert.strictEqual(found[0].command, 'storybook dev -p 6006');
+  assert.deepStrictEqual(nodeScripts(null), []);
+});
+
+test('a command runs through DDEV, never a host npm or yarn, and stays open to be read', () => {
+  const ddev = nodeScreenCommand('yarn install', 'yarn', ['install'], { isDdev: true, projectDir: '/home/u/workspace/dev/site1' });
+  assert.ok(ddev.startsWith('ddev yarn install;'), ddev);
+  const npm = nodeScreenCommand('npm ci', 'npm', ['ci'], { isDdev: false, projectDir: '/home/u/workspace/products/lib' });
+  assert.match(npm, /^cd '[^']+\/core\/workspace-app' && ddev exec -d '\/home\/u\/workspace\/products\/lib' npm ci;/, npm);
+  const pinned = nodeScreenCommand('yarn install', 'yarn', ['install'],
+    { isDdev: false, projectDir: '/home/u/workspace/products/theme', pinned: { name: 'yarn', major: 4, spec: 'yarn@4.18.0' } });
+  assert.match(pinned, /ddev exec -d '\/home\/u\/workspace\/products\/theme' env COREPACK_ENABLE_DOWNLOAD_PROMPT=0 corepack yarn install;/, pinned);
+  for (const line of [ddev, npm, pinned]) {
+    assert.ok(!/(^|[;&|]\s*)(npm|yarn)\b/.test(line), `a bare host npm or yarn: ${line}`);
+    assert.ok(line.includes(LINGER_MARK), 'the session must wait to be read');
+    assert.ok(!line.includes('$'), `a $ would be expanded by the runner's outer shell: ${line}`);
+  }
+});
+
+test('the handler refuses anything outside its tables and bad input, before touching the folder', async () => {
+  const call = async (pathname, form) => {
+    const out = {};
+    await node[NODE_SCRIPT_ROUTE]({ form, send: (html, code = 200) => { out.html = html; out.code = code; }, workspace: 'test', pathname });
+    return out;
+  };
+  let r = await call('/actions/node-exec', { projectName: 'anything', manager: 'npm' });
+  assert.strictEqual(r.code, 404);
+  r = await call('/actions/node-install', { projectName: '../etc', manager: 'npm' });
+  assert.strictEqual(r.code, 400);
+  r = await call('/actions/node-install', { projectName: 'anything', manager: 'pnpm; id' });
+  assert.strictEqual(r.code, 400);
+  assert.match(r.html, /Pick npm or yarn/);
+  r = await call('/actions/node-add', { projectName: 'anything', manager: 'yarn', package: 'github:evil/repo' });
+  assert.strictEqual(r.code, 400);
+  assert.match(r.html, /not a package name/);
+  r = await call(NODE_SCRIPT_ROUTE, { projectName: 'anything', manager: 'yarn', script: 'x; id' });
+  assert.strictEqual(r.code, 400);
+  r = await call('/actions/node-install', { projectName: 'no-such-project-for-node-menu-test', manager: 'yarn' });
+  assert.strictEqual(r.code, 400);
+  assert.match(r.html, /has no package\.json/);
+});
+
+test('the row shows NODE right after COMPOSER, only where there is a package.json, with a tab per manager', () => {
+  const src = fs.readFileSync(path.join(__dirname, '..', '..', 'server.js'), 'utf8');
+  assert.match(src, /\.\.\.require\('\.\/actions\/node'\)/, 'the node routes are not merged');
+  // Where the buttons sit is Commands → Buttons now (row-layout.js); by default NODE comes right after COMPOSER.
+  const { DEFAULT_LINES } = require('../../row-layout');
+  assert.strictEqual(DEFAULT_LINES[1][DEFAULT_LINES[1].indexOf('composer') + 1], 'node', 'NODE must come right after COMPOSER by default');
+  assert.strictEqual((src.match(/\bnode: nodeMenu\b/g) || []).length, 1, 'handed to the layout once per row');
+  const fn = src.slice(src.indexOf('function nodeMenuHtml'), src.indexOf('function openWithMenuHtml'));
+  assert.match(fn, /if \(!hasPackageJson\(projectPath\)\) return '';/, 'no package.json, no button');
+  assert.match(fn, /uk-tab="active: \$\{Math\.max\(0, MANAGERS\.indexOf\(info\.preferred\)\)\}"/, 'opens on the manager the project uses');
+  assert.match(fn, /info\.locks\[m\] \? 'lock ✓' : 'no lock'/, 'each tab says whether its lock file is there');
+  assert.match(fn, /hx-include="closest \.node-package"/);
+  assert.match(fn, /NODE_SCRIPT_ROUTE/, 'the scripts from package.json must be offered');
+});

package/core/workspace-app/tests/unit/notes.test.js

@@ -0,0 +1,128 @@
+/**
+ * The note on a folder, and the name you would rather call it.
+ *
+ * The note lives IN the folder (`.workspace-note`), which is the choice `.jira-project` already made
+ * here — so a project renamed, moved or cloned takes its note with it, one removed takes its note away,
+ * and a `claude` session started there can read it. A central index would have to be told about every
+ * one of those events, and would be wrong the first time somebody moved a folder in a terminal.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const notes = require('../../notes');
+const { folderOf } = require('../../actions/notes');
+
+const server = fs.readFileSync(path.join(__dirname, '../../server.js'), 'utf8');
+const tmp = () => fs.mkdtempSync(path.join(os.tmpdir(), 'ws-note-'));
+
+test('a note is one file with two fields, written as a titled markdown note', () => {
+  const dir = tmp();
+  notes.writeNote(dir, { title: 'Gleap widget spike', body: 'Reproducing WEBSHIP-1925.' });
+  // A document, not a config format: an agent that opens it gets something to read.
+  assert.equal(
+    fs.readFileSync(path.join(dir, notes.NOTE_FILE), 'utf8'),
+    '# Gleap widget spike\n\nReproducing WEBSHIP-1925.\n',
+  );
+  assert.deepEqual(notes.readNote(dir), { title: 'Gleap widget spike', body: 'Reproducing WEBSHIP-1925.' });
+});
+
+test('either half can stand alone', () => {
+  const dir = tmp();
+  notes.writeNote(dir, { title: '', body: 'no heading, all note' });
+  assert.deepEqual(notes.readNote(dir), { title: '', body: 'no heading, all note' });
+  notes.writeNote(dir, { title: 'name only', body: '' });
+  assert.deepEqual(notes.readNote(dir), { title: 'name only', body: '' });
+});
+
+test('emptying both fields removes the file', () => {
+  // A note nobody wants should not need a second control to get rid of, and a file holding only
+  // whitespace would keep the row marked as annotated.
+  const dir = tmp();
+  notes.writeNote(dir, { title: 'x', body: 'y' });
+  notes.writeNote(dir, { title: '  ', body: '\n' });
+  assert.equal(fs.existsSync(path.join(dir, notes.NOTE_FILE)), false);
+  assert.equal(notes.hasNote(dir), false);
+  assert.deepEqual(notes.readNote(dir), { title: '', body: '' });
+});
+
+test('a title is one line, whatever was pasted into the field', () => {
+  const dir = tmp();
+  notes.writeNote(dir, { title: '#  Hash and\nnewlines  ', body: '' });
+  assert.equal(notes.readNote(dir).title, 'Hash and newlines');
+  // And it cannot push a project row sideways.
+  notes.writeNote(dir, { title: 'x'.repeat(200), body: '' });
+  assert.equal(notes.readNote(dir).title.length, notes.TITLE_MAX);
+});
+
+test('control characters never reach a title attribute', () => {
+  // The note is rendered into `title=` and read out by a screen reader; an escape sequence pasted from
+  // a terminal line would be neither. Newlines survive, because a note is prose.
+  const dir = tmp();
+  notes.writeNote(dir, { title: '', body: 'onetwo\nthree' });
+  assert.equal(notes.readNote(dir).body, 'onetwo[31m\nthree');
+});
+
+test('displayName falls back to the folder name', () => {
+  const dir = tmp();
+  assert.equal(notes.displayName(dir, 'v11x00b1gleap'), 'v11x00b1gleap');
+  notes.writeNote(dir, { title: 'Gleap widget spike', body: '' });
+  assert.equal(notes.displayName(dir, 'v11x00b1gleap'), 'Gleap widget spike');
+});
+
+test('a folder is only ever one inside the workspace it names', () => {
+  // The workspace and the project come from the browser; a path built from them unchecked would write
+  // .workspace-note anywhere `..` can reach.
+  assert.equal(folderOf({ workspace: 'no-such-workspace', projectName: 'x' }), null);
+  assert.equal(folderOf({ workspace: 'test', projectName: '../../etc' }), null);
+  assert.equal(folderOf({ workspace: 'test', projectName: 'definitely-not-here-1234' }), null);
+  // And a workspace with no project is the workspace folder itself, which does exist.
+  assert.ok(folderOf({ workspace: 'test' }));
+});
+
+test('the tooltip is cut to what a tooltip can carry', () => {
+  const tip = notes.noteTooltip({ title: 'T', body: 'word '.repeat(200) });
+  assert.ok(tip.length <= 301, 'trimmed');
+  assert.match(tip, /…$/, 'and marked, so it reads as cut rather than as all there is');
+  assert.equal(notes.noteTooltip({ title: 'short', body: '' }), 'short');
+  assert.equal(notes.noteTooltip({ title: '', body: '' }), '');
+});
+
+test('the row shows the note, and keeps the folder name beside a custom one', () => {
+  // The folder's own name is what `cd` takes, what DDEV calls the project and what every command on
+  // the row needs — so a custom name is shown WITH it, never instead of it.
+  assert.match(server, /const rawLabel = note\.title \|\| p;/);
+  assert.match(server, /class="pcard-chip pcard-slug"/);
+  assert.match(server, /title="\$\{esc\(tip \|\| rawLabel\)\}"/);
+  assert.match(server, /const sayFolder = note\.title && !note\.title\.toLowerCase\(\)\.includes\(p\.toLowerCase\(\)\);/,
+    'the folder is said beside a custom name only when the name does not already hold it');
+});
+
+test('the pen that edits it is in the card corner, not on the name line', () => {
+  // The name is the one thing the eye scans a list of thirty cards for; a control sitting in the
+  // middle of it reads as part of the name. The pen belongs in the card's bottom-right cluster.
+  const card = server.slice(server.indexOf('<div class="uk-card uk-card-default uk-card-small uk-card-body uk-margin-small project-row">'));
+  const titleLine = card.slice(card.indexOf('project-title-row'), card.indexOf('project-title-status'));
+  assert.ok(!titleLine.includes('project-note'), 'no pen on the name line');
+  assert.match(server, /const noteCorner = `<span class="project-note-corner">/);
+});
+
+test('the cluster rides in the last row of controls, and reserves nothing', () => {
+  // It used to float in the corner, which had to be paid for with reserved padding on EVERY action
+  // row — and that padding pushed `More` onto a line of its own while the row still had room for it.
+  // As a flex item pushed right it costs nothing until the row is genuinely full.
+  assert.match(server, /\$\{testBadge\}\$\{runningBadge\}\s*\$\{noteCorner\}/, 'the cluster ends the facts row of the card');
+  const css = fs.readFileSync(path.join(__dirname, '../../public/css/components/project-rows.css'), 'utf8');
+  assert.match(css, /\.project-note-corner \{[^}]*margin-left: auto/);
+  assert.ok(!/\.project-row \.project-actions \{[^}]*padding-right/.test(css), 'no reserved gutter');
+});
+
+test('the pen out-specifies UIKit, which is linked after us', () => {
+  // A bare .project-note ties with UIKit's own .uk-button-link, and UIKit wins the tie — silently.
+  const css = fs.readFileSync(path.join(__dirname, '../../public/css/components/project-rows.css'), 'utf8');
+  assert.match(css, /\.project-note-corner \.project-note \{/);
+  assert.ok(!/^\.project-note \{/m.test(css), 'not a single class of ours against UIKit');
+});

package/core/workspace-app/tests/unit/page-structure.test.js

@@ -0,0 +1,40 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('fs');
+const path = require('path');
+
+const read = (...p) => fs.readFileSync(path.join(__dirname, '..', '..', ...p), 'utf8');
+const server = read('server.js');
+const screens = read('screens.js');
+const lists = read('lists.js');
+
+test('Home has one h1, and each workspace card title is an h2', () => {
+  assert.match(server, /<h1 class="uk-h4 uk-margin-remove">Workspaces <span class="uk-text-meta">\$\{keys\.length\}<\/span><\/h1>/);
+  assert.match(server, /<h2 class="uk-card-title uk-margin-remove uk-text-bold">\$\{esc\(w\.label\)\}<\/h2>/);
+  assert.doesNotMatch(server, /<h4 class="uk-card-title/);
+});
+
+test('a project list is an h2 under the workspace h1', () => {
+  assert.match(server, /<h2 class="uk-h3 uk-margin-remove">\$\{esc\(heading\)\} <span class="uk-badge">/);
+});
+
+test('Playwright browsers sit in a one-column group with its own h2', () => {
+  assert.match(screens, /<h2 class="uk-h4[^"]*" id="screens-browsers-title">Playwright browsers<\/h2>\s*<div class="screens-list" data-cols="1" role="group" aria-labelledby="screens-browsers-title">/);
+});
+
+test('filters say what they filter, and the visible word is inside the accessible name', () => {
+  assert.match(server, /<label class="uk-text-meta">State\s*<select[^>]*aria-label="Filter [^"]*by state"/);
+  assert.match(server, /<label class="uk-text-meta">Type\s*<select[^>]*aria-label="File type"/);
+  assert.match(lists, /<label class="list-pager-size uk-text-meta">Per page\s*<select[^>]*aria-label="How many rows per page"/);
+});
+
+test('the Build button is as tall as the fields beside it', () => {
+  const css = read('public', 'css', 'components', 'mic-on-any-field-that-wants-typing.css');
+  assert.match(css, /\.build-form \.uk-button-primary \{[^}]*height:2\.625rem; line-height:2\.625rem;/);
+});
+
+test('swap listeners use htmx 4 event names, which are the only ones it fires', () => {
+  for (const f of ['ui.js', 'mic.js']) {
+    assert.doesNotMatch(read('public', f), /'htmx:(afterSwap|beforeSwap|afterSettle)'/, `${f} listens for an event htmx 4 never fires`);
+  }
+});

package/core/workspace-app/tests/unit/page-width.test.js

@@ -0,0 +1,59 @@
+/**
+ * How much of the window a page's content may use.
+ *
+ * `uk-container-small` capped every page at 900px, which was the right answer while the assistant was
+ * a fixed column and the rail was another. Neither is fixed any more, so the cap is a choice — and the
+ * two things that can break quietly are the same two as with the assistant's views: it must be applied
+ * before first paint (this is the width of the main column; changing it afterwards moves the page), and
+ * the setting must be a default rather than an override.
+ */
+
+const assert = require('node:assert');
+const { test } = require('node:test');
+const fs = require('fs');
+const path = require('path');
+
+const app = path.join(__dirname, '..', '..');
+const server = fs.readFileSync(path.join(app, 'server.js'), 'utf8');
+const ui = fs.readFileSync(path.join(app, 'public', 'ui.js'), 'utf8');
+const css = fs.readFileSync(path.join(app, 'public', 'css', 'components', 'page-width.css'), 'utf8');
+const { styleSettings } = require(path.join(app, 'workspaces'));
+
+test('the width is a setting, and a typo falls back rather than rendering nothing', () => {
+  assert.ok(['comfortable', 'wide', 'full'].includes(styleSettings().pageWidth));
+});
+
+test('it is applied before first paint, and a stored choice wins over the setting', () => {
+  const head = server.slice(server.indexOf("var d=document.documentElement"), server.indexOf('</script>'));
+  // Read through wsPref: the choice is a cookie on the hub domain, so the page is the same width on
+  // every workspace subdomain rather than one width per origin.
+  assert.match(head, /wsPref\('ws-page-width',null\)\|\|'\$\{style\.pageWidth\}'/,
+    'the setting is the default; the stored choice wins, as with style.mode');
+  assert.match(head, /indexOf\(w\)<0\)w='comfortable'/, 'an unknown width must fall back');
+  assert.match(head, /d\.dataset\.pageWidth=w/);
+});
+
+test('the control sits with the other layout controls, not in the rail', () => {
+  // How wide the page may be and how many fit across it are one question; answering it from the rail
+  // meant looking away from the thing being changed.
+  const fn = server.slice(server.indexOf('function viewSwitcherHtml'), server.indexOf('/* ---------------- pages ---------------- */'));
+  assert.match(fn, /class="view-switcher width-switcher"/);
+  for (const w of ['comfortable', 'wide', 'full']) {
+    assert.match(fn, new RegExp(`\\['${w}',`), `no way to choose ${w}`);
+  }
+  assert.ok(!/actions-width/.test(server), 'the rail row is gone');
+  assert.match(ui, /const pick = e\.target\.closest\('\.page-width-pick'\)/);
+  assert.match(ui, /wsPrefSet\('ws-page-width', width\)/, 'and it is remembered for the whole dashboard');
+});
+
+test('the cap is beaten on specificity, never with !important', () => {
+  // UIKit's own .uk-container-small is a single class in a stylesheet linked after this one, so a
+  // single class of ours would lose the tie — the same trap the assistant's New chat button hit.
+  // .page-body, not .page-body.uk-container-small: the home page is a `large` container, and the
+  // control did nothing at all on the page most worth widening.
+  assert.match(css, /html\[data-page-width="wide"\] \.page-body \{ max-width/);
+  assert.match(css, /html\[data-page-width="full"\] \.page-body \{ max-width: none; \}/);
+  // The comment above those rules says the word; what matters is that no DECLARATION carries it.
+  const declarations = css.replace(/\/\*[\s\S]*?\*\//g, '');
+  assert.ok(!/!important/.test(declarations), 'never !important, and never a fork of the vendored CSS');
+});

package/core/workspace-app/tests/unit/php-version.test.js

@@ -0,0 +1,90 @@
+/**
+ * `--php-version` on every builder that runs `ddev config`, as a list rather than a free-text box.
+ *
+ * The versions are the seven most recent DDEV supports, and DDEV is the authority on that: asked of it
+ * rather than remembered, it answers `[5.6 7.0 7.1 7.2 7.3 7.4 8.0 8.1 8.2 8.3 8.4 8.5]`. A version
+ * outside the list is refused by argparse BY NAME, which is why offering it as a list matters — a
+ * typo in a text box becomes a build that dies on its first line.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const { ROOT } = require('../../workspaces');
+const { parseArgparseText, parseBuilderArgs } = require('../../builder-args');
+
+const VERSIONS = ['8.5', '8.4', '8.3', '8.2', '8.1', '8.0', '7.4'];
+const ARGS = path.join(ROOT, 'core/scripts/args');
+const read = (f) => fs.readFileSync(f, 'utf8');
+
+// Every argparse file a site-building builder sources. Not the site-template ones: a site-template
+// build takes a name and nothing else, so the PHP version there is the one DDEV picks.
+const BUILDER_ARGS = [
+  'arg-drupal.sh', 'arg-drupal_cms.sh',
+  'arg-webship.sh', 'arg-webships.sh', 'arg-cucumber.sh',
+  'arg-website.sh', 'arg-webships-project.sh',
+];
+
+test('every builder argparse offers the seven versions', () => {
+  for (const f of BUILDER_ARGS) {
+    const src = read(path.join(ARGS, f));
+    const opt = parseArgparseText(src).find((a) => a.flag === '--php-version');
+    assert.ok(opt, `${f} has --php-version`);
+    assert.deepEqual(opt.choices, VERSIONS, `${f} offers exactly the seven`);
+  }
+});
+
+test('the automated-testing builders take it too, instead of hardcoding one', () => {
+  const dir = path.join(ROOT, 'test');
+  if (!fs.existsSync(dir)) return;                     // a clone without the workspaces built
+  const builders = fs.readdirSync(dir).filter((f) => /^cmd-automated-testing-.*-project\.sh$/.test(f));
+  assert.ok(builders.length, 'there are automated-testing builders');
+  for (const f of builders) {
+    const src = read(path.join(dir, f));
+    assert.match(src, /'-p', '--php-version'/, `${f} takes the flag`);
+    // Either the script configures DDEV itself and passes the flag through, or it delegates the whole
+    // build to a build function, which reads PHP_VERSION on its own.
+    assert.ok(/--php-version=\$\{PHP_VERSION\}/.test(src) || !/ddev config/.test(src), `${f} passes what it was given`);
+    assert.doesNotMatch(src, /--php-version=8\.4\b/, `${f} no longer hardcodes a version`);
+  }
+});
+
+test('the flag wins over the version a builder declares it needs', () => {
+  // A builder says what its core NEEDS (Drupal 12: php >= 8.5.0); somebody passing --php-version is
+  // saying what they want to build on. A version the core cannot take fails in composer with a
+  // platform requirement that names it — a better answer than silently ignoring what was asked for.
+  const fn = read(path.join(ROOT, 'core/scripts/functions/fun-build-distribution.sh'));
+  assert.match(fn, /php_version="\$\{PHP_VERSION:-\$\{site_php_version:-\}\}"/);
+  assert.match(fn, /\$\{php_version:\+--php-version=\$\{php_version\}\}/);
+});
+
+test('nothing asked for means nothing passed, and DDEV keeps its own default', () => {
+  const fn = read(path.join(ROOT, 'core/scripts/functions/fun-build-distribution.sh'));
+  // `${x:+--php-version=$x}` expands to NOTHING when x is empty — the flag is absent rather than
+  // present and blank, which ddev config would refuse.
+  assert.match(fn, /\$\{php_version:\+/);
+});
+
+test('an argument with choices is drawn as a list, not a text box', () => {
+  const server = read(path.join(__dirname, '../../server.js'));
+  assert.match(server, /if \(a\.choices && a\.choices\.length\) \{/);
+  assert.match(server, /<select class="uk-select uk-form-small arg-value"/);
+  // An empty default keeps "leave it alone" reachable; a builder that defaults to a real version does
+  // not get an empty option, because it has an answer already.
+  assert.match(server, /— leave it to the builder —/);
+  assert.match(server, /String\(a\.def \|\| ''\) === '' \? \[/);
+});
+
+test('the Build form offers the dropdown on a real builder', () => {
+  const dir = path.join(ROOT, 'dev');
+  if (!fs.existsSync(dir)) return;
+  for (const b of ['cmd-webship11-0-x-project.sh', 'cmd-drupal12-recommended-project.sh']) {
+    if (!fs.existsSync(path.join(dir, b))) continue;
+    const opt = parseBuilderArgs(dir, b, ROOT).find((a) => a.flag === '--php-version');
+    assert.ok(opt, `${b} exposes it to the form`);
+    assert.deepEqual(opt.choices, VERSIONS);
+    assert.equal(opt.def, '', 'and leaves the builder in charge unless asked');
+  }
+});

package/core/workspace-app/tests/unit/plan-card.test.js

@@ -0,0 +1,44 @@
+/**
+ * The Auto-mode confirm card, and the poll interval beside it.
+ *
+ * Both of these broke the same way: something the browser accepts silently. htmx parses only
+ * ms/s/m, so `every 6h` was an interval of ZERO and one span re-requested itself about
+ * forty-five times a second; and deep-chat draws its messages in a SHADOW ROOT, so a plain
+ * `e.target.closest('.plan-run')` never saw the button and "Run it" did nothing at all.
+ * Neither failed loudly, which is why they are pinned here.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const ui = fs.readFileSync(path.join(__dirname, '../../public/ui.js'), 'utf8');
+const server = fs.readFileSync(path.join(__dirname, '../../server.js'), 'utf8');
+const htmx = fs.readFileSync(path.join(__dirname, '../../public/htmx.min.js'), 'utf8');
+
+test('htmx parses only ms, s and m — so no poll may be declared in hours or days', () => {
+  // Read from the vendored library rather than asserted from memory: a later htmx may add units,
+  // and this test should be what notices.
+  assert.match(htmx, /\(ms\|s\|m\)\?/,
+    'htmx parseInterval still accepts ms/s/m only');
+  const bad = [...server.matchAll(/hx-trigger="[^"]*every\s+[\d.]+\s*([a-z]+)"/g)]
+    .map((m) => m[1]).filter((u) => !['ms', 's', 'm'].includes(u));
+  assert.deepStrictEqual(bad, [],
+    'an interval htmx cannot parse is undefined, and setTimeout treats that as zero');
+});
+
+test('the version hint polls in minutes', () => {
+  assert.match(server, /hx-trigger="load, every 360m"/);
+});
+
+test('"Run it" reaches through the shadow root and sends the turn through deep-chat', () => {
+  const block = ui.slice(ui.indexOf('// The Auto-mode confirm card'), ui.indexOf('// The image picker in settings'));
+  assert.ok(block, 'the confirm-card handler is still there');
+  assert.match(block, /composedPath\(\)/,
+    'a click inside deep-chat retargets to the host element, so closest() sees nothing');
+  assert.match(block, /submitUserMessage/,
+    'there is no .chat-input form any more — the panel owns its own input');
+  assert.doesNotMatch(block, /querySelector\('\.chat-input'\)/,
+    'the old HTMX chat form is gone; looking for it is what made the button do nothing');
+});

package/core/workspace-app/tests/unit/plugin-catalog.test.js

@@ -0,0 +1,31 @@
+/**
+ * The catalogue: what the empty dashboard suggests and the Plugins page offers to require. Every
+ * entry is an npm package of the one scope, named once, and the page marks what is already required.
+ */
+const assert = require('node:assert');
+const { test } = require('node:test');
+
+const { FAMILIES, SCOPE, catalog } = require('../../plugin-catalog');
+
+test('every catalogue entry is an @webship.co/workspace-<name> package, named once, in a family that says what it is for', () => {
+  assert.strictEqual(SCOPE, '@webship.co');
+  const all = catalog();
+  assert.ok(all.length >= 50, `${all.length} plugins`);
+  const names = all.map((p) => p.name);
+  assert.strictEqual(new Set(names).size, names.length, 'no plugin is listed twice');
+  for (const p of all) {
+    assert.match(p.name, /^[a-z0-9-]+$/);
+    assert.strictEqual(p.module, `${SCOPE}/workspace-${p.name}`);
+    assert.ok(p.label && p.familyLabel);
+  }
+  for (const f of FAMILIES) assert.ok(f.about && f.plugins.length, `${f.id} says what it is for and holds plugins`);
+  for (const must of ['dev', 'github', 'upsun', 'lando', 'git', 'ide', 'drupal-modules']) assert.ok(names.includes(must), `${must} is in the catalogue`);
+});
+
+test('the Plugins page marks what is already required and offers the rest', () => {
+  const { catalogHtml } = require('../../plugins-page');
+  const html = catalogHtml(new Set(['@webship.co/workspace-git']));
+  assert.match(html, /Catalogue/);
+  assert.ok((html.match(/<span class="uk-label">required<\/span>/g) || []).length === 1, 'git is marked required, once');
+  assert.match(html, /"spec":"@webship\.co\/workspace-upsun"/, 'the rest get a Require button with the package to install');
+});