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

package/core/workspace-app/tests/unit/modal-fit.test.js

@@ -0,0 +1,87 @@
+/**
+ * The editor modal fits the screen.
+ *
+ * At 1080px high New screen was 1205px tall (1565 with Claude Code) and its Start button sat 130 to 490px below
+ * the fold, with its title scrolled away above it; Sections of the video editor was 1404px. The dialog is now capped
+ * to the viewport and is a column: title and tabs pinned, the form scrolling, the action row pinned. The editors
+ * take the height that is left. A form opts in with `.modal-head` and `.modal-actions`.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const APP = path.join(__dirname, '../..');
+const read = (f) => fs.readFileSync(path.join(APP, f), 'utf8');
+const css = read('public/css/components/modal-fit.css');
+const { assembleCss, listComponents } = require('../../themes');
+
+test('the stylesheet is a component and comes after the rules it overrides', () => {
+  const list = listComponents();
+  assert.ok(list.includes('modal-fit'));
+  assert.ok(list.indexOf('modal-fit') > list.indexOf('settings-editor-core-config-yml'),
+    'the editor height rule it replaces is in the settings component, and a later one wins');
+  assert.match(assembleCss(''), /\/\* component: modal-fit \*\//);
+});
+
+test('the dialog is capped to the screen, a column, with its own scroll that does not chain', () => {
+  assert.match(css, /#editor-modal \.uk-modal-dialog \{[^}]*display: flex;[^}]*flex-direction: column;[^}]*max-height: calc\(100dvh - 7rem\);/s);
+  assert.match(css, /#editor-modal \.uk-modal-body \{[^}]*overflow-y: auto;[^}]*overscroll-behavior: contain;/s);
+});
+
+test('the title is pinned above and the actions below, with no strip for the form to scroll through', () => {
+  assert.match(css, /#editor-modal \.modal-head \{[^}]*position: sticky;[^}]*top: 0;/s);
+  assert.match(css, /\.modal-actions,\s*#editor-modal form > :last-child:has\(> button\[type="submit"\]\) \{[^}]*position: sticky;[^}]*bottom: 0;/s);
+  assert.match(css, /\.uk-modal-body:has\(\.modal-head\) \{ padding-top: 0; \}/);
+  assert.match(css, /\.uk-modal-body:has\(\.modal-actions\) \{ padding-bottom: 0; \}/);
+});
+
+test('editors take the height that is left of the screen, never a fixed share of it', () => {
+  assert.match(css, /\.ace-host:not\(\.ace-host-single\) \{\s*height: clamp\(12rem, calc\(100dvh - 19rem\), 46rem\) !important;/);
+  assert.match(css, /\.new-screen-card \.ace-host:not\(\.ace-host-single\) \{\s*height: clamp\(11rem, calc\(100dvh - 44rem\), 26rem\)/);
+});
+
+test('New screen asks for the prompt before the Claude options', () => {
+  assert.match(css, /fieldset\[data-claude-only\] \{ order: 3; \}/);
+  assert.match(css, /fieldset:not\(\[data-claude-only\]\):last-of-type \{ order: 2; \}/);
+});
+
+test('the forms carry the two classes', () => {
+  assert.match(read('screens.js'), /<div class="modal-head">\s*<h3 class="uk-margin-small-bottom">New screen<\/h3>/);
+  assert.match(read('screens.js'), /<p class="modal-actions"><button class="uk-button uk-button-primary" type="submit">Start it<\/button><\/p>/);
+  assert.match(read('video-edit.js'), /const head = `<div class="modal-head"><h3[^>]*>Edit a video<\/h3>\$\{tabsHtml\(chosen, tab\)\}<\/div>`/);
+  assert.match(read('video-edit.js'), /<div class="modal-actions">\s*<button type="submit" class="uk-button uk-button-primary">/);
+  assert.match(read('audio-voice.js'), /<div class="modal-actions">/);
+  assert.match(read('audio-voice.js'), /<div class="modal-head"><h3[^>]*>\$\{video \? 'Voice over a video' : 'Generate a voice'\}<\/h3><\/div>/);
+});
+
+test('motion honours the system setting', () => {
+  assert.match(css, /@media \(prefers-reduced-motion: reduce\) \{[^}]*uk-accordion-content[^}]*transition-duration: 0\.01ms !important;/s);
+});
+
+test('the dialog is named, and the page behind it is out of reach while it is open', () => {
+  const server = read('server.js');
+  const ui = read('public/ui.js');
+  assert.ok(!/id="editor-modal"[^>]*role="dialog"/.test(server), 'UIkit puts role="dialog" on the inner dialog, so a second one is not added outside it');
+  assert.match(ui, /function containEditorModal\(open\)/);
+  assert.match(ui, /el\.inert = true;/);
+  assert.match(ui, /el\.inert = el\.dataset\.wasInert === '1';/, 'what was inert before is left as it was');
+  assert.match(ui, /el\.id === 'confirm-modal'/, 'the confirm dialog that stacks above it stays reachable');
+  assert.match(ui, /dialog\.setAttribute\('aria-label', h\.textContent/, 'the inner .uk-modal-dialog is the one that is named');
+  assert.match(ui, /containEditorModal\(false\);/);
+});
+
+test('no inner scroll box inside the scrolling body, and the focus ring and checkbox edge are visible', () => {
+  assert.match(css, /#editor-modal \.video-edit-sections \{ max-height: none; overflow: visible; \}/);
+  assert.match(css, /\.modal-actions \.uk-button:focus-visible[\s\S]*outline: 2px solid var\(--brand-primary\)/);
+  assert.match(css, /#editor-modal \.uk-checkbox,\s*#editor-modal \.uk-radio \{ border-color: var\(--text-subtle\); \}/);
+  assert.match(css, /#editor-modal \.editor-card\.uk-margin-top \{ margin-top: 0; \}/, 'the pinned header sits flush at the top of the body');
+});
+
+test('controls that sit beside their label are named, and a checkbox is a 24px target', () => {
+  assert.match(read('audio-voice.js'), /aria-label="\$\{esc\(NAMES\[name\] \|\| name\)\}"/);
+  assert.match(read('audio-voice.js'), /duration: 'Length of the sound', influence: 'How closely to follow the description', length: 'Length of the music'/);
+  assert.match(read('screens.js'), /name="resume" disabled aria-label="Claude conversation to resume"/);
+  assert.match(css, /#editor-modal \.uk-checkbox,\s*#editor-modal \.uk-radio \{ width: 1\.5rem; height: 1\.5rem; \}/);
+});

package/core/workspace-app/tests/unit/modules-load.test.js

@@ -0,0 +1,23 @@
+'use strict';
+// Every core module must load. A module the core no longer ships, still required somewhere,
+// surfaces here instead of at the first start of the dashboard (issue #91: `./graphs` after the
+// graph feature moved to its plugin).
+const test = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const APP = path.join(__dirname, '..', '..');
+const SKIP = new Set(['server.js']); // starts listening on require
+
+function modules(dir) {
+  return fs.readdirSync(dir).filter((f) => f.endsWith('.js') && !SKIP.has(f)).map((f) => path.join(dir, f));
+}
+
+test('every core module in the app root and actions/ loads', () => {
+  const failures = [];
+  for (const file of [...modules(APP), ...modules(path.join(APP, 'actions'))]) {
+    try { require(file); } catch (e) { failures.push(`${path.relative(APP, file)}: ${e.message.split('\n')[0]}`); }
+  }
+  assert.deepStrictEqual(failures, []);
+});

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

@@ -0,0 +1,186 @@
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const { cleanSpoken, summaryFromHtml, createNarrator } = require('../../public/narration');
+const { panelConfig } = require('../../speech');
+
+const app = (f) => fs.readFileSync(path.join(__dirname, '../..', f), 'utf8');
+
+function fakes(pref) {
+  const store = new Map(pref ? Object.entries(pref) : []);
+  const spoken = [];
+  const synth = {
+    spoken, cancelled: 0,
+    speak: (u) => spoken.push(u), cancel() { this.cancelled += 1; },
+    getVoices: () => [{ name: 'Google US English' }],
+  };
+  return {
+    store, synth, spoken,
+    opts: {
+      synth, Utterance: function (t) { this.text = t; },
+      getPref: (n) => (store.has(n) ? store.get(n) : null),
+      setPref: (n, v) => store.set(n, v),
+    },
+  };
+}
+
+test('a summary is the first sentences, without code blocks, tables, buttons or the plan card', () => {
+  const html = '<p>Started the build. It takes about <code>5 min</code>. See https://x.test/a for more.</p>'
+    + '<pre>ddev start\nddev drush cr</pre><table><tr><td>a</td></tr></table>'
+    + '<div class="plan-card"><p class="plan-summary">Run it</p><button>Run it</button></div>';
+  assert.strictEqual(summaryFromHtml(html), 'Started the build. It takes about 5 min.');
+  assert.ok(!/ddev|Run it|a link|https/.test(summaryFromHtml(html)));
+});
+
+test('a summary reads entities, lists and headings as sentences, and is bounded', () => {
+  assert.strictEqual(summaryFromHtml('<h2>Done</h2><ul><li>One &amp; two</li><li>Three</li></ul>'), 'Done. One & two.');
+  assert.ok(summaryFromHtml(`<p>${'word '.repeat(200)}</p>`).length <= 240);
+  assert.strictEqual(summaryFromHtml(''), '');
+  assert.strictEqual(summaryFromHtml(undefined), '');
+});
+
+test('spoken text loses markdown marks and URLs', () => {
+  assert.strictEqual(cleanSpoken('**Done** — see https://a.test/x now'), 'Done — see a link now');
+  assert.ok(cleanSpoken('x '.repeat(400)).length <= 300);
+});
+
+test('it starts as settings.yml says, and the saved choice wins', () => {
+  assert.strictEqual(createNarrator({ ...fakes().opts, defaultOn: true }).isOn(), true);
+  assert.strictEqual(createNarrator({ ...fakes().opts, defaultOn: false }).isOn(), false);
+  assert.strictEqual(createNarrator({ ...fakes({ 'ws-voice': '0' }).opts, defaultOn: true }).isOn(), false);
+  assert.strictEqual(createNarrator({ ...fakes({ 'ws-voice': '1' }).opts, defaultOn: false }).isOn(), true);
+});
+
+test('turning it off is remembered and stops what is being said', () => {
+  const f = fakes();
+  const n = createNarrator({ ...f.opts, defaultOn: true });
+  n.setOn(false);
+  assert.strictEqual(f.store.get('ws-voice'), '0');
+  assert.strictEqual(f.synth.cancelled, 1);
+  assert.strictEqual(n.isOn(), false);
+  n.setOn(true);
+  assert.strictEqual(f.store.get('ws-voice'), '1');
+  assert.strictEqual(n.isOn(), true);
+});
+
+test('with voice on, the assistant\'s own summary is spoken; without one, the first sentences are', () => {
+  const f = fakes();
+  const n = createNarrator({ ...f.opts, defaultOn: true });
+  assert.strictEqual(n.narrate({ spoken: 'The project is running.', html: '<p>Long reply here.</p>' }), true);
+  assert.strictEqual(f.spoken.at(-1).text, 'The project is running.');
+  n.narrate({ html: '<p>First one. Second one. Third one.</p>' });
+  assert.strictEqual(f.spoken.at(-1).text, 'First one. Second one.');
+});
+
+test('with voice off, or nothing to say, nothing is spoken', () => {
+  const f = fakes({ 'ws-voice': '0' });
+  const off = createNarrator({ ...f.opts, defaultOn: true });
+  assert.strictEqual(off.narrate({ spoken: 'Hello there.' }), false);
+  assert.strictEqual(f.spoken.length, 0);
+  const on = createNarrator({ ...fakes().opts, defaultOn: true });
+  assert.strictEqual(on.narrate({ html: '<pre>only code</pre>' }), false);
+});
+
+test('a new utterance replaces the one being said, and carries the configured voice', () => {
+  const f = fakes();
+  const n = createNarrator({ ...f.opts, defaultOn: true, params: { rate: 1.2, pitch: 0.9, volume: 0.5, lang: 'ar-JO', voiceName: 'google us english' } });
+  n.speak('Hello there.');
+  const u = f.spoken[0];
+  assert.deepStrictEqual([u.rate, u.pitch, u.volume, u.lang], [1.2, 0.9, 0.5, 'ar-JO']);
+  assert.strictEqual(u.voice.name, 'Google US English');
+  assert.strictEqual(f.synth.cancelled, 1, 'the previous one is cancelled first');
+});
+
+test('a browser without speech has the control hidden, not a switch that does nothing', () => {
+  const n = createNarrator({ getPref: () => null, setPref: () => {}, defaultOn: true });
+  assert.strictEqual(n.supported, false);
+  assert.strictEqual(n.isOn(), false);
+  assert.strictEqual(n.narrate({ spoken: 'Hi there.' }), false);
+  assert.ok(app('public/ui.js').includes('show: narrator.supported'));
+});
+
+test('the page is given where the switch starts and the voice to use, even when the setting is off', () => {
+  const on = panelConfig({ assistant: { voice_output: true, speech_rate: 1.1 } });
+  assert.strictEqual(on.voiceOutput, true);
+  assert.strictEqual(on.narration.rate, 1.1);
+  const off = panelConfig({ assistant: { voice_output: false, speech_rate: 1.1 } });
+  assert.strictEqual(off.voiceOutput, false);
+  assert.strictEqual(off.textToSpeech, false);
+  assert.strictEqual(off.narration.rate, 1.1, 'turning the switch on still speaks in the configured voice');
+});
+
+test('the checkbox is in the assistant options, and the helper loads before ui.js', () => {
+  const server = app('server.js');
+  const menu = server.slice(server.indexOf('function assistantMenuItemsHtml'), server.indexOf('const AI_MARK'));
+  assert.ok(menu.includes('class="uk-checkbox assistant-switch" type="checkbox" data-switch="${key}"'));
+  assert.ok(menu.includes("['voice', 'Voice summary'"));
+  assert.ok(server.indexOf("assetUrl('/narration.js')") > 0);
+  assert.ok(server.indexOf("assetUrl('/narration.js')") < server.indexOf("assetUrl('/ui.js')"));
+});
+
+test('the flag reaches the server, and the summary line is asked for only when it is on', () => {
+  const ui = app('public/ui.js');
+  assert.ok(ui.includes('voice: narrator.isOn()'));
+  assert.ok(ui.includes('narrator.narrate({ spoken: d && d.spoken, html: response.html })'));
+  assert.ok(ui.includes('el.textToSpeech = false;'));
+  assert.ok(app('server.js').includes('{ voice: parsed.voice === true, avatar: parsed.avatar === true, avatarName: parsed.avatarName, avatarId: parsed.avatarId, page: parsed.page }'));
+  const assistant = app('assistant.js');
+  assert.ok(assistant.includes('...(voice ? ['), 'the SUMMARY instruction is conditional');
+  assert.ok(assistant.includes('/^\\s*SUMMARY:\\s*(.+)$/'), 'and the line never reaches the reply text');
+});
+
+test('the voice tells whoever listens when it starts, each word, and when it stops', () => {
+  const f = fakes();
+  const heard = [];
+  const n = createNarrator({ ...f.opts, onSpeech: (d) => heard.push(d) });
+  assert.ok(n.speak('Two projects are running.'));
+  const u = f.spoken[0];
+  u.onstart();
+  u.onboundary({ name: 'word', charIndex: 4 });
+  u.onboundary({ name: 'sentence', charIndex: 0 });
+  u.onend();
+  assert.deepStrictEqual(heard.map((d) => d.word || d.type), ['end', 'start', 'projects', 'end'],
+    'speaking first cancels what was being said, then start, the word, and the end; a sentence boundary is not a word');
+  n.cancel();
+  assert.strictEqual(heard[heard.length - 1].type, 'end', 'a cancel is an end too, so a mouth never stays open');
+});
+
+test('with no voice configured, the best free voice in the language is chosen, and a named one always wins', () => {
+  const { bestVoice } = require('../../public/narration');
+  const voices = [
+    { name: 'eSpeak English', lang: 'en-US' },
+    { name: 'Google US English', lang: 'en-US' },
+    { name: 'Microsoft Aria Online (Natural) - English (United States)', lang: 'en-US' },
+    { name: 'Microsoft Hamed Online (Natural) - Arabic', lang: 'ar-SA' },
+  ];
+  assert.match(bestVoice(voices, 'en-US').name, /Aria Online \(Natural\)/);
+  assert.match(bestVoice(voices, 'ar-SA').name, /Hamed/);
+  assert.strictEqual(bestVoice([{ name: 'eSpeak English', lang: 'en-US' }], 'en-US'), null, 'nothing better than the default: leave the default');
+  const f = fakes();
+  f.synth.getVoices = () => voices;
+  createNarrator({ ...f.opts, params: { voiceName: 'Google US English', lang: 'en-US' } }).speak('Hello there.');
+  assert.strictEqual(f.spoken[0].voice.name, 'Google US English');
+  createNarrator({ ...f.opts, params: { lang: 'en-US' } }).speak('Hello there.');
+  assert.match(f.spoken[1].voice.name, /Natural/);
+});
+
+test('an ElevenLabs voice speaks through the server, and falls back to the browser when it cannot', () => {
+  const f = fakes();
+  const sent = [];
+  let stopped = 0;
+  let fallback = null;
+  const remote = (text, id, params, onSpeech, fb) => { sent.push([text, id]); fallback = fb; return () => { stopped += 1; }; };
+  const n = createNarrator({ ...f.opts, remote, params: { voiceName: 'elevenlabs:EXAVITQu4vr4xnSDxMaL' } });
+  assert.strictEqual(n.speak('Hello team.'), true);
+  assert.deepStrictEqual(sent, [['Hello team.', 'EXAVITQu4vr4xnSDxMaL']]);
+  assert.strictEqual(f.spoken.length, 0, 'the browser stays quiet while the server speaks');
+  n.cancel();
+  assert.strictEqual(stopped, 1, 'muting stops the audio');
+  fallback();
+  assert.strictEqual(f.spoken.length, 1, 'the same words in the browser voice when the server cannot');
+  const plain = createNarrator({ ...fakes().opts, remote, params: { voiceName: 'Google US English' } });
+  plain.speak('Hi.');
+  assert.strictEqual(sent.length, 1, 'a browser voice never goes to the server');
+});

package/core/workspace-app/tests/unit/navigation-editor.test.js

@@ -0,0 +1,260 @@
+/**
+ * The Navigation editor and its endpoints.
+ *
+ * Two things here have already broken once and must not again. **A form's fields cannot share a name
+ * with the arrangement's**: the Add form posts the whole arrangement with it (hx-include), so an input
+ * called `group` merged with the sidebar's group order and the typed value arrived as the whole list
+ * joined by commas. And **the group an entry posts is rewritten on every drop**, because htmx collects
+ * a form's values when the request is TRIGGERED — rewriting them in htmx:before:request is already too
+ * late, and the save kept arriving with every entry still in the group it was rendered in.
+ */
+
+const assert = require('node:assert');
+const { test } = require('node:test');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'navigation-editor-'));
+process.env.NAVIGATION_FILE = path.join(tmp, 'navigation.yml');
+process.env.NAVIGATION_SEEN_FILE = path.join(tmp, 'navigation.seen.json');
+process.on('exit', () => fs.rmSync(tmp, { recursive: true, force: true }));
+
+const read = (f) => fs.readFileSync(path.join(__dirname, '..', '..', f), 'utf8');
+const nav = require('../../navigation');
+const page = read('navigation-page.js');
+const actions = read('actions/navigation.js');
+const ui = read('public/ui.js');
+const server = read('server.js');
+const tabs = read('commands-page.js');
+
+test('the Add form shares no field name with the arrangement it posts with it', () => {
+  const add = page.slice(page.indexOf('class="nav-add-form"'));
+  const names = [...add.matchAll(/name="([a-z_]+)"/g)].map((m) => m[1]);
+  assert.ok(names.length >= 5, 'the form still has its fields');
+  for (const n of names) {
+    assert.ok(!['group', 'item', 'scope', 'mtime'].includes(n),
+      `"${n}" is a field of the arrangement; hx-include would merge the two into one value`);
+  }
+  assert.ok(names.every((n) => n.startsWith('new_')), 'every field of the Add form is prefixed');
+  for (const n of names) assert.match(actions, new RegExp(`form\\.${n}\\b`), `the endpoint reads ${n}`);
+});
+
+test('the group an entry posts is rewritten on every drop, not when the form is sent', () => {
+  assert.match(ui, /window\.navSyncGroups = function navSyncGroups/);
+  assert.match(ui, /for \(const ev of \['moved', 'added', 'removed', 'stop'\]\)/,
+    "UIkit's sortable events are the moment the values go stale");
+  assert.match(ui, /input\.value = `\$\{list\.dataset\.group\}:\$\{entry\.dataset\.id\}`/);
+});
+
+test('every list is a drop target of the same sortable group, so one drag reaches them all', () => {
+  const lists = [...page.matchAll(/class="nav-entries" data-group="([^"]+)"/g)].map((m) => m[1]);
+  assert.ok(lists.includes('hidden'), 'Hidden is a place you can drag into');
+  // The three regions are drawn from one template, so the source carries the interpolated name once.
+  assert.ok(lists.includes('topbar-${r}'), 'each top-bar region is a drop target');
+  assert.match(page, /rail\.REGIONS\.map\(\(r\) =>/, 'and all three are drawn, not one hardcoded');
+  const sortables = [...page.matchAll(/uk-sortable="group: nav-entries/g)];
+  assert.strictEqual(sortables.length, 3, "the regions, the sidebar groups and Hidden are all one sortable group — each drawn once, from a template");
+});
+
+test('a reserved list is never saved back as a sidebar group', () => {
+  assert.match(actions, /\.filter\(\(g\) => !rail\.RESERVED\.has\(g\)\)/);
+  assert.match(actions, /const region = rail\.regionOf\(group\);/);
+  assert.match(actions, /if \(region\) \{ topbar\[region\]\.push\(id\); continue; \}/);
+});
+
+test('the group order is a set: a repeat would draw the same group twice', () => {
+  assert.match(actions, /\[\.\.\.new Set\(asArray\(form\.group\)/);
+});
+
+test('an added link is an https address or a path of this dashboard, and nothing else', () => {
+  assert.match(actions, /\/\^\(https\?:\\\/\\\/\|\\\/\)\[\^\\s"'<>\]\*\$\/i/,
+    'javascript: and data: never reach an href');
+  assert.match(actions, /An entry is a link or a command, not both/);
+  assert.match(actions, /No such command/, 'a use: must name a command of the catalog');
+});
+
+test('every write carries the mtime and is refused with 409 when the file changed underneath', () => {
+  assert.match(actions, /if \(String\(form\.mtime \|\| ''\) !== String\(mtime\)\) \{/);
+  const refusals = [...actions.matchAll(/, 409\)/g)];
+  assert.ok(refusals.length >= 3, 'save, add and remove all refuse rather than overwrite');
+  assert.match(page, /name="mtime" value="\$\{mtime\}"/);
+});
+
+test('removing an entry asks first, the way every destructive action here does', () => {
+  assert.match(page, /class="uk-button uk-button-link nav-remove arm-step"/);
+  assert.match(page, /hx-trigger="confirmed-remove"/);
+});
+
+test('the navigation is a SETTING, and both the tabs it used to be land on it', () => {
+  // What the sidebar and the top bar show is configuration, not a command — so it is a Settings tab.
+  // It was Commands → Rail, then Commands → Navigation; neither bookmark is a dead link.
+  assert.match(server, /pathname === '\/commands\/rail' \|\| pathname === '\/commands\/navigation'[\s\S]{0,240}Location: `\/settings\/navigation/);
+  assert.match(server, /pathname === '\/settings\/navigation'/);
+  assert.match(server, /settingsPage\('navigation', readPageState\(req\), \{ scope, fragment: isFragment\(req\) \}\)/);
+  assert.match(server, /card\('\/settings\/navigation', 'tabler:layout-sidebar-right', 'Navigation',/,
+    'and it is one of the cards there, in The dashboard group rather than among the workspaces');
+  assert.ok(!tabs.includes('/commands/navigation'), 'and no longer one of the Commands tabs');
+  assert.match(page, /href="\/settings\/navigation\?scope=/, 'the scope tabs stay inside Settings');
+});
+
+test('adding opens in the editor modal, and posts the arrangement with it', () => {
+  // The add card sat under a list of groups that can run past the fold, so the way to put something IN
+  // the navigation was the one thing you had to scroll to find.
+  assert.match(page, /hx-get="\/fragments\/nav-add\?scope=/);
+  assert.match(page, /hx-target="#editor-modal-body"/);
+  assert.match(server, /pathname === '\/fragments\/nav-add'/);
+  const form = page.slice(page.indexOf('function navAddFormHtml'));
+  assert.match(form, /hx-include="#nav-form"/, 'a drag that has not been saved is not lost by adding');
+  assert.match(form, /hx-target="#nav-editor" hx-swap="outerHTML"/, 'the answer is the editor behind it');
+  assert.match(form, /UIkit\.modal\('#editor-modal'\)\.hide\(\)/, 'which the modal stops covering');
+});
+
+test('the Add form offers the two places by name, rather than asking for a group id', () => {
+  const form = page.slice(page.indexOf('function navAddFormHtml'));
+  assert.match(form, /optgroup label="The navigation topbar"/);
+  assert.match(form, /optgroup label="The navigation sidebar"/);
+  assert.match(form, /rail\.REGIONS\.map\(\(r\) => `<option value="topbar-\$\{r\}">/);
+  assert.match(form, /<option value="yours" selected>/, 'with a sensible default');
+});
+
+test('the top bar renders only the regions that have something in them', () => {
+  assert.match(server, /const topbarHtml = \(region\) => \(topbar\[region\]\.length/,
+    'an empty region is three pieces of furniture for no one');
+  assert.match(server, /toolbar-nav toolbar-nav-\$\{region\}/);
+  assert.match(server, /\$\{topbarHtml\('start'\)\}/);
+  assert.match(server, /uk-navbar-center[\s\S]{0,80}topbarHtml\('center'\)/);
+  assert.match(server, /\$\{topbarHtml\('end'\)\}/);
+});
+
+test('two entries never share an id: a layout would move or hide both at once', () => {
+  assert.match(server, /id: 'open-screens'/,
+    "the Screens BUTTON is not the Go group's Screens link");
+});
+
+test('a fresh install has the AI assistant at the start of the top bar too', () => {
+  assert.match(server, /\{ id: 'ai-assistant', topbar: 'start', show: 'icon', label: assistantName/,
+    'it applies to whatever page you are on, and it is the only way in when the panel is closed');
+  // Its menu is anchored below the control, because the control is PLACED now rather than fixed to the
+  // rail: centred on the left it opened across the wordmark with half of it off the top of the page.
+  assert.match(server, /uk-dropdown="mode: click; pos: bottom-right"/);
+});
+
+test('a fresh install has the version at the start of the top bar and the screens count at the end', () => {
+  // Both are default PLACEMENTS in the code, so a machine with no core/config/navigation.yml — which is
+  // every fresh install — gets them, and arranging either in Settings → Navigation still wins.
+  assert.match(server, /id: 'version',\s*\n\s*topbar: 'start',/,
+    'the release is what the product IS: it belongs beside the wordmark');
+  assert.match(server, /id: 'open-screens',\s*\n\s*topbar: 'end',/,
+    'a live count of what is running is a status, not a page action');
+});
+
+test('the screens status is on every page: what is running is a fact about the machine', () => {
+  const block = server.slice(server.indexOf('// Not gated on Jira'), server.indexOf("id: 'open-screens'"));
+  assert.ok(!block.includes("if (view === 'workspace'"),
+    'a count that appeared on /dev and vanished on /settings was telling you about the page');
+  assert.ok(/not gated on being on a[\s/]*workspace page/i.test(block), 'and it says why');
+});
+
+test('the status button carries its own class rather than having one patched into its markup', () => {
+  assert.match(server, /action-btn actions-screens" type="button"/);
+  assert.ok(!/it\.html\.replace\('<\/button>'/.test(server),
+    'reaching into a button\'s markup to add a class is how this breaks');
+});
+
+test('the button follows the count, the way a project row SCREENS button does', () => {
+  const css = read('public/css/components/settings-editor-core-config-yml.css');
+  assert.match(css, /\.toolbar-nav \.actions-screens:has\(\.uk-badge\)/,
+    'the count arrives on a poll, so the button follows the badge rather than a re-render');
+  assert.match(css, /\.actions-screens \.screens-count:empty \{ display: none; \}/,
+    'nothing running, nothing shouting');
+  assert.match(server, /n \? ` <span class="uk-badge">\$\{n\}<\/span>` : ''/,
+    'and the fragment says nothing at all when nothing is running');
+});
+
+test("a plugin's group is given ids, so what a plugin adds can be arranged like anything else", () => {
+  assert.match(server, /id: g\.id \|\| rail\.slugId\(g\.label\)/);
+  assert.match(server, /return \{ id: rail\.slugId\(label\), label, html: it \};/);
+});
+
+test('Settings is grouped and shown as a grid, not 26 identical pills', () => {
+  // The hub's own settings, an editor that is not a file at all, and twenty-four workspaces were all
+  // weighted the same and wrapped onto three lines.
+  assert.match(server, /<h2 class="settings-group-head">The dashboard<\/h2>/);
+  assert.match(server, /<h2 class="settings-group-head">Workspace settings<\/h2>/);
+  // Every editor that is not a settings FILE has to be excluded here, or choosing it would fall
+  // through to the index. Matched loosely on purpose: the list grows (Command order joined it), and a
+  // test that pins the exact expression fails on the addition rather than on the behaviour.
+  assert.match(server, /const isIndex = !isScreens && !isNavigation && !isButtons &&[^;]*!current;/,
+    'with nothing chosen the page IS the index, rather than defaulting into one file');
+  assert.match(server, /class="settings-grid"/);
+  // Not `settings-card`: that is already the class of the settings FORM wrapper, and a grid rule on it
+  // squeezed that form's description into a 71px ribbon down the right of the page.
+  assert.match(server, /class="settings-tile\$\{active \? ' is-current' : ''\}"/);
+});
+
+test('a workspace card carries that workspace own icon and name', () => {
+  assert.match(server, /const m = meta\[key\] \|\| \{\};/);
+  assert.match(server, /m\.icon \|\| 'tabler:folder',\s*\n?\s*m\.label \|\| key/);
+});
+
+test('opening one gives it the width, with a line back rather than the whole list again', () => {
+  assert.match(server, /class="settings-back"/);
+  assert.match(server, /href="\/settings">\s*<span uk-icon="icon: arrow-left; ratio: \.8"><\/span> All settings<\/a>/);
+});
+
+test('each entry says how much of itself is shown, and the control offers all three', () => {
+  const card = page.slice(page.indexOf('function entryCard'), page.indexOf('function navEditorHtml'));
+  assert.match(card, /<select class="nav-entry-show" name="show"/);
+  for (const how of ['both', 'icon', 'text']) {
+    assert.ok(card.includes(`:${how}"`), `${how} is one of the answers`);
+  }
+  assert.match(card, /aria-label="How much of \$\{esc\(label\)\} is shown"/, 'and the control has a name');
+});
+
+test('the drawn state of that control is the layout answer, or the way the entry ships', () => {
+  assert.match(page, /const asked = own\.show\[id\];/);
+  assert.match(page, /return shipsAs\(id\) \|\| 'both';/);
+  assert.match(page, /const shipsAs = \(id\) => rail\.seenShips\(seenItem\(id\)\);/);
+});
+
+test('both is not written down, except when it overrides something the dashboard ships', () => {
+  assert.match(actions, /if \(how === 'both' && ships\[id\]\) show\[id\] = 'both';/,
+    'without it there would be no way to put the assistant label back — leaving the key out lets its own default win again');
+  assert.match(actions, /function shippedShow\(scope\)/, 'and what ships is read from what the navigation drew');
+});
+
+test('an entry shown one way is WRAPPED, never rewritten', () => {
+  assert.match(server, /const navItemHtml = \(it\) => \(it\.show === 'icon' \|\| it\.show === 'text'/,
+    "an entry's html is built by whatever added it; reaching into that string is how this breaks");
+  assert.match(server, /nav-show-\$\{it\.show\}/);
+  assert.match(server, /\$\{g\.items\.map\(\(it\) => railIcons\(navItemHtml\(it\)\)\)\.join\(''\)\}/, 'the sidebar draws it');
+  assert.match(server, /topbar\[region\]\.map\(\(it\) => navItemHtml\(it\)\)/, 'and so does the top bar');
+});
+
+test('the assistant ships as its mark alone, and keeps its label in the markup', () => {
+  assert.match(server, /\{ id: 'ai-assistant', topbar: 'start', show: 'icon', label: assistantName/);
+  assert.match(server, /\$\{AI_MARK\}<span class="action-label">\$\{esc\(assistantName\)\}<\/span>/,
+    'a screen reader still reads the name; hiding it is presentation only');
+});
+
+test('every place that names the assistant reads the same setting', () => {
+  // A heading, a button, a launcher and a full page, each with its own hardcoded 'AI Assistant',
+  // is four things to miss when somebody renames it — and the one that gets missed is the one that
+  // then contradicts the other three. They all go through assistantIdentityFor(context).
+  assert.match(server, /const assistantName = assistantIdentityFor\(context\)\.name;/,
+    'the navigation control');
+  assert.match(server, /<h3 class="uk-margin-remove">\$\{esc\(identity\.name\)\}<\/h3>/,
+    "the panel's heading");
+  assert.match(server, /title="Ask the \$\{esc\(assistantIdentityFor\(context\)\.name\)\}"/,
+    'the launcher, which is the way back in when the panel is closed');
+  assert.match(server, /<h1 class="uk-margin-remove">\$\{esc\(identity\.name\)\}<\/h1>/,
+    'the full page at /assistant');
+  assert.doesNotMatch(server, /\$\{scopeLabel\} AI Assistant/,
+    'and none of them prefixes the workspace: it is not the "Designs AI Assistant"');
+});
+
+test('the panel and the composer are scoped to the page, not to the whole dashboard', () => {
+  assert.match(server, /data-settings="\$\{esc\(JSON\.stringify\(assistantSettings\(context\)\)\)\}"/,
+    'the placeholder is a per-workspace setting, so the panel has to be told which page it is on');
+});