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

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

@@ -0,0 +1,68 @@
+/**
+ * The favicon, asserted on the artwork rather than on the page.
+ *
+ * The page's link tags are checked in the browser suite; what cannot be checked there is the file
+ * itself — a browser handed an icon renders it as an image, so there is no text to read and a
+ * navigation to it is not a page. Here it is a file, which is what it is.
+ *
+ * Why any of this is worth a test: the favicon is the one piece of brand that appears in a place we
+ * do not control, at 16px, beside example.com's own tab. The dashboard wears the Webship mark, from
+ * the product's own image set, and ships it as PNGs: there is no SVG emblem, so the shipped default
+ * must not point at one.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const PUBLIC = path.join(__dirname, '..', '..', 'public');
+
+// A PNG header carries its dimensions and colour type at fixed offsets; no image library needed.
+const png = (f) => {
+  const b = fs.readFileSync(path.join(PUBLIC, f));
+  assert.equal(b.toString('latin1', 1, 4), 'PNG', `${f} is a PNG`);
+  return { width: b.readUInt32BE(16), height: b.readUInt32BE(20), colour: b.readUInt8(25) };
+};
+
+test('the icons are the sizes the places that use them ask for', () => {
+  // 64 for the tab, which browsers scale down from; 180 for the home screen, which iOS asks for exactly.
+  const tab = png('favicon.png');
+  assert.deepEqual([tab.width, tab.height], [64, 64], 'the tab icon');
+  const touch = png('touch-icon.png');
+  assert.deepEqual([touch.width, touch.height], [180, 180], 'the home-screen icon');
+});
+
+test('the home-screen icon carries no alpha, because it lands on somebody\'s wallpaper', () => {
+  // A knocked-out mark over a wallpaper is whatever the wallpaper is. Asserted on the IHDR colour
+  // type, which is the fact and not a proxy for it: byte 25 of a PNG is 2 for RGB and 6 for RGBA,
+  // so 2 means there is no transparency left to get wrong.
+  assert.equal(png('touch-icon.png').colour, 2, 'touch-icon.png still has an alpha channel — flatten it');
+});
+
+test('the one logo serves both surfaces, and the legacy .ico is there for what asks for it by name', () => {
+  // One logo for the light page and the dark one: the mark reads on either, so there is no second file
+  // to drift from the first. favicon.ico is what an old client fetches without reading the page.
+  const logo = png('logo.png');
+  assert.ok(logo.width >= 180 && logo.width === logo.height, 'the mark is square and large enough to scale down');
+  const ico = fs.readFileSync(path.join(PUBLIC, 'favicon.ico'));
+  assert.equal(ico.readUInt16LE(0), 0, 'favicon.ico is an ICO');
+  assert.equal(ico.readUInt16LE(2), 1);
+  assert.ok(ico.readUInt16LE(4) >= 1, 'with at least one image in it');
+});
+
+test('the shipped default is the PNGs, with no SVG to point at', () => {
+  const { styleSettings } = require('../../workspaces');
+  const style = styleSettings();
+  assert.equal(style.faviconSvg, '', 'an empty SVG means no <link rel="icon" type="image/svg+xml"> at all');
+  assert.equal(style.faviconPng, 'favicon.png');
+  assert.equal(style.touchIcon, 'touch-icon.png');
+  assert.equal(style.logoOnLight, 'logo.png');
+  assert.equal(style.logoOnDark, 'logo.png');
+  for (const f of [style.faviconPng, style.touchIcon, style.logoOnLight]) {
+    assert.ok(fs.existsSync(path.join(PUBLIC, f)), `${f} ships with the dashboard`);
+  }
+  // And the page only writes the SVG tag when there is an SVG to write.
+  const server = fs.readFileSync(path.join(__dirname, '..', '..', 'server.js'), 'utf8');
+  assert.match(server, /\$\{style\.faviconSvg \? `<link rel="icon" type="image\/svg\+xml"[^`]*` : ''\}/);
+});

package/core/workspace-app/tests/unit/files-browser.test.js

@@ -0,0 +1,224 @@
+/**
+ * Browsing a documents folder, not just the top of it.
+ *
+ * `docs/` holds 29 folders and 8,105 files and the page listed 21 rows: everything in a subfolder was
+ * invisible, and so was every file whose extension was not on a curated list. The folder on disk and
+ * the page describing it disagreed, which is the one thing a file listing must not do.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const fb = require('../../files-browser');
+
+const APP = path.join(__dirname, '../..');
+const server = fs.readFileSync(path.join(APP, 'server.js'), 'utf8');
+const lists = fs.readFileSync(path.join(APP, 'lists.js'), 'utf8');
+const del = fs.readFileSync(path.join(APP, 'actions/ai-items.js'), 'utf8');
+
+/** A workspace-shaped fixture: two folders, a file, some noise, and a symlink pointing out of it. */
+function fixture() {
+  const base = fs.mkdtempSync(path.join(os.tmpdir(), 'ws-files-'));
+  const root = path.join(base, 'docs');
+  const outside = path.join(base, 'secrets');
+  fs.mkdirSync(path.join(root, 'shots'), { recursive: true });
+  fs.mkdirSync(path.join(root, 'shots', 'raw'), { recursive: true });
+  fs.mkdirSync(path.join(root, 'node_modules'), { recursive: true });
+  fs.mkdirSync(path.join(root, '.hidden'), { recursive: true });
+  fs.mkdirSync(outside, { recursive: true });
+  fs.writeFileSync(path.join(outside, 'keys.txt'), 'nope');
+  fs.writeFileSync(path.join(root, 'guide.pdf'), 'x');
+  fs.writeFileSync(path.join(root, 'shots', 'one.png'), 'x');
+  fs.writeFileSync(path.join(root, 'shots', 'two.png'), 'x');
+  fs.symlinkSync(outside, path.join(root, 'escape'));
+  return { base, root, outside };
+}
+
+test('a path from the browser is split, resolved, and refused when it leaves the workspace', () => {
+  const { root } = fixture();
+  assert.equal(fb.safeSubIn(root, '').rel, '', 'no path is the top of the workspace');
+  assert.equal(fb.safeSubIn(root, 'shots/raw').rel, 'shots/raw');
+  // The segment check, which catches the obvious attempts before anything touches the filesystem.
+  for (const bad of ['..', '../..', 'shots/../..', 'a//b', '.', './x']) {
+    assert.equal(fb.safeSubIn(root, bad).ok, false, `refused: ${bad}`);
+  }
+  // And the one the segment check cannot catch: every segment is innocent, and the link leads out.
+  assert.equal(fb.safeSubIn(root, 'escape').ok, false, 'a symlink out of the workspace is refused');
+  assert.equal(fb.safeSubIn(root, 'no-such-folder').ok, false);
+  assert.equal(fb.safeSubIn(root, 'guide.pdf').ok, false, 'a file is not a folder to browse');
+});
+
+test('a folder row says how many entries are inside, counting direct children only', () => {
+  // A recursive count would walk thousands of files to render one line, and "8 items" is what tells
+  // you whether opening it is worth it anyway.
+  const { root } = fixture();
+  const subs = fb.subfolders(root, '');
+  const byName = Object.fromEntries(subs.map((s) => [s.name, s]));
+  assert.deepEqual(subs.map((s) => s.name).sort(), ['shots'], 'noise and the escape link are not folders to browse');
+  assert.equal(byName.shots.count, 3, 'two pictures and a folder');
+  assert.equal(byName.shots.folders, 1);
+  assert.equal(byName.shots.rel, 'shots');
+  assert.equal(fb.subfolders(path.join(root, 'shots'), 'shots')[0].rel, 'shots/raw', 'a nested folder keeps its full path');
+});
+
+test('noise is named, not guessed at', () => {
+  // The workspace's own plumbing is tooling rather than content, and the three folder documents are
+  // already rendered under the list. Everything else shows, whatever its extension.
+  for (const n of ['node_modules', '.git', 'dev-ai-agents', '.hidden']) assert.ok(fb.isNoise(n, true), n);
+  for (const n of ['cmd-tool-backup-doc.sh', 'docs.code-workspace', 'README.md', 'AGENTS.md', 'CLAUDE.md', '.DS_Store']) {
+    assert.ok(fb.isNoise(n, false), n);
+  }
+  for (const n of ['guide.pdf', 'shot.png', 'demo.mp4', 'export.zip', 'notes.txt', 'data.json']) {
+    assert.equal(fb.isNoise(n, false), false, `${n} is content`);
+  }
+  assert.equal(fb.isNoise('screenshots', true), false);
+});
+
+test('the trail back out names every level', () => {
+  const trail = fb.crumbs('docs', 'a/b/c', 'Docs');
+  assert.deepEqual(trail.map((c) => c.name), ['Docs', 'a', 'b', 'c']);
+  assert.deepEqual(trail.map((c) => c.rel), ['', 'a', 'a/b', 'a/b/c']);
+  assert.deepEqual(fb.crumbs('docs', '', 'Docs'), [{ name: 'Docs', rel: '' }]);
+});
+
+test('a file says what KIND it is, and every icon exists in the sprite', () => {
+  // A missing symbol renders an empty box rather than failing, so the names are checked against the
+  // sprite rather than trusted.
+  const sprite = fs.readFileSync(path.join(APP, 'public/vendor/tabler-sprite.svg'), 'utf8');
+  const cases = { 'a.pdf': 'file-type-pdf', 'a.docx': 'file-type-doc', 'a.csv': 'table', 'a.pptx': 'presentation',
+    'a.html': 'world', 'a.png': 'photo', 'a.mp4': 'player-play', 'a.mp3': 'music', 'a.zip': 'file-zip',
+    'a.md': 'file-text', 'a.yml': 'code', 'a.unknown-ext': 'file' };
+  for (const [file, icon] of Object.entries(cases)) {
+    assert.equal(fb.kindIcon(file), `tabler:${icon}`, file);
+    assert.ok(sprite.includes(`id="${icon}"`), `the sprite carries ${icon}`);
+  }
+  for (const extra of ['folder', 'chevron-right']) assert.ok(sprite.includes(`id="${extra}"`), extra);
+});
+
+test('only the folder workspaces browse; the item ones are left alone', () => {
+  // The ai-* workspaces list items by the name declared in their frontmatter, and a subdirectory
+  // there is a skill they already handle — folders would be a second, competing idea of a row.
+  assert.deepEqual([...fb.BROWSABLE].sort(), ['audio', 'designs', 'docs', 'images', 'specs', 'videos']);
+  for (const k of ['ai-agents', 'ai-skills', 'ai-commands', 'ai-prompts']) assert.equal(fb.BROWSABLE.has(k), false, k);
+});
+
+test('specs browses, because a spec IS a folder', () => {
+  // A spec is products/<project>/NNN-topic/ holding four files, and a product's constitution is
+  // products/<project>/00-constitution.md — everything is two levels down. Without browsing, the
+  // flat read of the top level found nothing and the page said "No specs here yet" on a workspace
+  // that had twelve of them.
+  assert.equal(fb.BROWSABLE.has('specs'), true);
+});
+
+test("a recording's poster is its thumbnail, never a row of its own", () => {
+  // The rule that used to keep videos out of browsing altogether: a poster frame is an input to the
+  // player, and listing it doubles the rows and makes half of them stills. Both shapes the recorder
+  // writes are covered — `demo-poster.jpg` beside `demo.mp4`, and `demo.jpg` beside `demo.mp4`.
+  const groups = new Map([
+    ['demo', { name: 'demo', formats: [{ file: 'demo.mp4', path: 'demo.mp4', video: true }] }],
+    ['demo-poster', { name: 'demo-poster', formats: [{ file: 'demo-poster.jpg', path: 'demo-poster.jpg', video: false }] }],
+    ['talk', { name: 'talk', formats: [
+      { file: 'talk.mp4', path: 'talk.mp4', video: true },
+      { file: 'talk.jpg', path: 'talk.jpg', video: false }] }],
+    // A picture that belongs to nothing is still a picture, and keeps its row.
+    ['diagram', { name: 'diagram', formats: [{ file: 'diagram.png', path: 'diagram.png', video: false }] }],
+  ]);
+  fb.attachPosters(groups);
+  assert.equal(groups.get('demo').poster, 'demo-poster.jpg');
+  assert.equal(groups.has('demo-poster'), false, 'the poster is not a row');
+  assert.equal(groups.get('talk').poster, 'talk.jpg');
+  assert.deepEqual(groups.get('talk').formats.map((f) => f.file), ['talk.mp4'], 'and not a format to offer a button for');
+  assert.equal(groups.get('diagram').poster, undefined);
+  assert.equal(groups.has('diagram'), true);
+});
+
+test('the grid views show the picture itself, and the list does not', () => {
+  // A folder of screenshots is a contact sheet; a column of identical photo icons answers none of the
+  // questions you open it with. In a list a row is one line of text, and a thumbnail there would set
+  // the row height for every file whether or not it has one.
+  const css = fs.readFileSync(path.join(APP, 'public/css/components/project-rows.css'), 'utf8');
+  assert.match(server, /class="fx-thumb\$\{it\.poster \? ' is-video' : ''\}"/);
+  assert.match(server, /loading="lazy"/, 'a folder can hold two hundred of them');
+  assert.match(css, /\.fx-thumb \{ display: none; \}/);
+  assert.match(css, /html\[data-files-view\^="grid"\] \.fx-thumb \{[^}]*display: block/);
+  assert.match(css, /aspect-ratio: 4 \/ 3/, 'a fixed box, so cards do not jump as shots load');
+});
+
+test('the layout and the filter are the list\'s own controls', () => {
+  // List, or a grid one to six across — a folder of screenshots wants a contact sheet and a folder of
+  // reports wants a list of names.
+  assert.match(server, /const files = kind === 'files';/);
+  assert.match(server, /pref = home \? 'ws-home-view' : files \? 'ws-files-view' : 'ws-rows-view'/);
+  assert.match(server, /\['grid-6', 'Six across — the most files on one screen'\]/);
+  const ui = fs.readFileSync(path.join(APP, 'public/ui.js'), 'utf8');
+  assert.match(ui, /'ws-files-view': \{ attr: 'filesView', allowed: \['list', 'grid-1', 'grid-2', 'grid-3', 'grid-4', 'grid-5', 'grid-6'\] \}/);
+  assert.match(server, /d\.dataset\.filesView=fv/, 'applied before first paint, like every other layout');
+
+  // And what the folder is narrowed to. The first two are about ORDER: a folder of thirty subfolders
+  // and a folder of thirty files want opposite things at the top.
+  assert.match(server, /const FILE_FILTERS = \{/);
+  for (const k of ['all', 'files-first', 'folders', 'files', 'documents', 'images', 'video', 'archives']) {
+    assert.match(server, new RegExp(`(^|\\s|')${k.replace('-', '-')}'?: \\{ label:`, 'm'), `the filter offers ${k}`);
+  }
+  assert.match(server, /foldersFirst \? \(!!b\.folder - !!a\.folder\) : \(!!a\.folder - !!b\.folder\)/);
+});
+
+test('the listing draws folders first, as one row that opens', () => {
+  assert.match(server, /if \(browsable\) items\.push\(\.\.\.filesBrowser\.subfolders\(dir, rel\)\)/);
+  assert.match(server, /class="fx-row fx-folder"/);
+  assert.match(server, /hx-get="\/fragments\/\$\{esc\(key\)\}\/items\?path=\$\{encodePath\(it\.rel\)\}"/);
+  // Folders stay first whatever the sort: you scan a file list for a name and a folder list for
+  // where to go next, and mixing them by date makes both slower.
+  assert.match(server, /const kept = browsable \? matched\.filter\(\(it\) => filter\.keep\(it\)\) : matched;/);
+});
+
+test('the folder travels with every request the list makes', () => {
+  // Otherwise page 2 of a subfolder is page 2 of the workspace root, and a delete throws you back to
+  // the top.
+  assert.match(server, /if \(rel\) qs\.set\('path', rel\)/, 'the pager and the sort carry it');
+  assert.match(server, /listControlsHtml\(`\/fragments\/\$\{key\}\/items`, target, st, meta\.nounPlural, browsable \? kindFilter : null, \{/);
+  assert.match(server, /if \(st\.kind && FILE_FILTERS\[st\.kind\] && st\.kind !== defaultKind\(key\)\) qs\.set\('kind', st\.kind\);/,
+    'the filter travels with the folder, unless it is the workspace\'s own default');
+  assert.match(server, /hx-include="find input\[name='path'\]"/, 'a refresh comes back to this folder');
+  assert.match(lists, /const carriedInputs = /, 'the controls render it as a hidden input');
+  assert.match(lists, /hx-get="\$\{esc\(url\)\}\?\$\{esc\(resetQs\.toString\(\)\)\}"/, 'Reset clears the search where you stand');
+  assert.match(lists, /path: \(url\.searchParams\.get\('path'\) \|\| ''\)/, 'and it is read back off the query');
+});
+
+test('a file is reached by its path in the tree, not by its bare name', () => {
+  // encodeURIComponent on the whole path turns the separators into %2F and the file server then
+  // looks for one file whose name has slashes in it.
+  assert.match(server, /const encodePath = \(rel\) => String\(rel\)\.split\('\/'\)\.map\(encodeURIComponent\)\.join\('\/'\)/);
+  assert.match(server, /const filePath = \(key, rel\) => `\/files\/\$\{encodeURIComponent\(key\)\}\/\$\{encodePath\(rel\)\}`/);
+  // Review and play take a path now, and check it the same way the listing does.
+  assert.match(server, /pathname\.match\(\/\^\\\/fragments\\\/\(\[a-z0-9_-\]\+\)\\\/review\\\/\(\.\+\)\$\/\)/);
+  assert.match(server, /pathname\.match\(\/\^\\\/fragments\\\/\(\[a-z0-9_-\]\+\)\\\/play\\\/\(\.\+\)\$\/\)/);
+  const review = server.slice(server.indexOf('const reviewMatch'), server.indexOf('const cmdEditMatch'));
+  assert.match(review, /filesBrowser\.safeSub\(key, dirRel\)/, 'the folder half is resolved, not trusted');
+  assert.match(review, /!\/\^\[\^\/\\\\\]\+\$\/\.test\(name\)/, 'and the file half cannot be a path');
+});
+
+test('a text file is read in the modal, bounded', () => {
+  // A browser shows a .md or a .yml as a download or as raw text in a tab; neither is reading it
+  // where you found it, which is the point of a folder you can look inside.
+  assert.match(server, /const REVIEW_TEXT_RE = /);
+  assert.match(server, /REVIEW_TEXT_MAX/);
+  const re = server.match(/const REVIEWABLE_RE = (\/[^\n]+\/i);/)[1];
+  // eslint-disable-next-line no-eval
+  const reviewable = eval(re);
+  for (const f of ['a.md', 'a.txt', 'a.log', 'a.json', 'a.yml', 'a.csv', 'a.pdf', 'a.png']) {
+    assert.ok(reviewable.test(f), `${f} can be reviewed`);
+  }
+  assert.equal(reviewable.test('a.zip'), false, 'an archive has nothing to show');
+});
+
+test('deleting reaches into the folder being browsed, and nowhere else', () => {
+  assert.match(del, /filesBrowser\.safeSub\(workspace, form\.dir \|\| ''\)/);
+  assert.match(del, /if \(!where\.ok\) return send/, 'a folder that does not resolve is refused');
+  assert.match(del, /if \(inSub \|\| DOC_ARTIFACT_RE\.test\(name\) \|\| VIDEO_RE\.test\(name\)\)/,
+    'inside a folder every row is a file, whatever its extension');
+  assert.match(server, /"dir":"\$\{esc\(rel\)\}"/, 'the row tells the action which folder it was in');
+});

package/core/workspace-app/tests/unit/git-info.test.js

@@ -0,0 +1,26 @@
+/**
+ * What the dashboard asks git about a folder is answered once per row per render: the worktree
+ * answer is memoised for a few seconds and forgotten on demand.
+ */
+const assert = require('node:assert');
+const { test } = require('node:test');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const { execFileSync } = require('child_process');
+
+const g = require('../../git-info');
+
+test('gitWorktreeInfo answers from the memo within the window, and forgets when told', () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'git-info-'));
+  execFileSync('git', ['init', '-q', dir]);
+  const a = g.gitWorktreeInfo(dir);
+  assert.strictEqual(a.role, 'plain');
+  assert.strictEqual(a.dirty, 0);
+  fs.writeFileSync(path.join(dir, 'x.txt'), 'x');
+  assert.strictEqual(g.gitWorktreeInfo(dir).dirty, 0, 'the memo answers within the window');
+  assert.strictEqual(g.gitWorktreeInfoNow(dir).dirty, 1, 'the fresh answer sees the change');
+  g.gitWorktreeInfoForget(dir);
+  assert.strictEqual(g.gitWorktreeInfo(dir).dirty, 1, 'forgotten, it asks git again');
+  assert.strictEqual(g.gitWorktreeInfo(path.join(dir, 'nope')).role, 'none');
+});

package/core/workspace-app/tests/unit/grid-and-list.test.js

@@ -0,0 +1,103 @@
+/**
+ * Grid or list, on the home page and inside a workspace.
+ *
+ * Two different questions wearing one control: a workspace card is small and four fit across, while a
+ * project row carries a dozen buttons — so a workspace opens as a LIST and the home page as a grid.
+ * What is checked here is what would break quietly: the layout must be decided before first paint, the
+ * choice must be the same on every workspace subdomain, and UIKit's utility classes must not be the
+ * thing holding the layout, since those carry !important and cannot be overridden.
+ */
+
+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', 'grid-and-list.css'), 'utf8');
+
+test('the layout is applied before first paint, from the shared preference', () => {
+  const head = server.slice(server.indexOf("var hv=wsPref('ws-home-view'"), server.indexOf('})();</script>'));
+  assert.match(head, /wsPref\('ws-home-view','grid-4'\)/, 'the home page keeps the four-across it has');
+  assert.match(head, /wsPref\('ws-rows-view','list'\)/, 'a workspace opens as a list');
+  assert.match(head, /indexOf\(hv\)<0\)hv='grid-4'/, 'an unknown value falls back rather than rendering nothing');
+  assert.match(head, /indexOf\(rv\)<0\)rv='list'/);
+  assert.match(head, /d\.dataset\.homeView=hv/);
+  assert.match(head, /d\.dataset\.rowsView=rv/);
+});
+
+test('the two lists offer the counts that suit what they hold', () => {
+  const fn = server.slice(server.indexOf('function viewSwitcherHtml'), server.indexOf('/* ---------------- pages ---------------- */'));
+  for (const v of ['list', 'grid-1', 'grid-2', 'grid-3', 'grid-4', 'grid-5', 'grid-6']) {
+    assert.match(fn, new RegExp(`'${v}'`), `home: no ${v}`);
+  }
+  // Four across is a home-page answer only: three project rows are already tight.
+  const rowsPart = fn.slice(fn.indexOf(': [['));
+  assert.ok(!/grid-4/.test(rowsPart), 'a workspace must not offer four across');
+  assert.match(fn, /aria-label="\$\{esc\(v === 'list' \?/, 'each button says what it does');
+  // The icon is the answer, drawn to Tabler's rules — the set every workspace icon already comes from,
+  // which ships columns-1/2/3 and nothing past it and nothing for a page width.
+  assert.match(server, /const ICON_FRAME = '<rect x="3" y="3" width="18" height="18" rx="2" \/>'/,
+    "Tabler's own frame, the one columns-2 and columns-3 are built on");
+  assert.match(server, /stroke-width="1\.9" stroke-linecap="round" stroke-linejoin="round"/,
+    'a stroked outline like the sprite, not a filled blob');
+  assert.match(server, /function viewIcon\(view\)/);
+  assert.match(server, /Array\.from\(\{ length: n - 1 \}/,
+    'N columns are N-1 dividers, drawn from the count rather than picked from a set');
+  assert.match(server, /function widthIcon\(width\)/);
+});
+
+test('a choice is remembered for the whole dashboard, not one workspace', () => {
+  assert.match(ui, /wsPrefSet\(btn\.dataset\.pref, btn\.dataset\.view\)/,
+    'through the hub-domain cookie, like the theme');
+  assert.match(ui, /allowed\.includes\(btn\.dataset\.view\)/, 'and only a value we render');
+  // The rows arrive in fragments, so the marking has to be redone after a swap.
+  assert.match(ui, /document\.addEventListener\('htmx:after:settle', markCurrentViews\)/);
+});
+
+test('the card does not depend on UIKit utilities for its layout', () => {
+  // uk-text-center and uk-display-block are utilities and carry !important: with them on the card the
+  // list view could not turn it into a row at all.
+  const card = server.slice(server.indexOf('class="uk-card uk-card-default uk-card-hover'), server.indexOf('class="uk-card uk-card-default uk-card-hover') + 200);
+  assert.ok(!/uk-text-center|uk-display-block/.test(card), 'those belong in the stylesheet now');
+  assert.match(css, /\.workspace-card \{ display: block; text-align: center; \}/, 'and here is what they did');
+});
+
+test('the grids collapse where a column would be a sliver', () => {
+  assert.match(css, /@media \(max-width: 63\.99em\)/);
+  const narrow = css.slice(css.indexOf('@media (max-width: 63.99em)'));
+  assert.match(narrow, /html\[data-rows-view="grid-3"\] #webship-workspace-projects \{ grid-template-columns: 1fr; \}/);
+});
+
+
+test('the width control is on every page, exactly once', () => {
+  // It used to be a row in the rail, which every page has. Moved beside the grid control, it has to
+  // reach the pages that have no grid control — and must not appear twice on the ones that do.
+  assert.match(server, /function widthSwitcherHtml\(\)/);
+  const heads = (server.match(/page-heading">\$\{widthSwitcherHtml\(\)\}/g) || []).length;
+  assert.ok(heads >= 4, `only ${heads} page headings carry it`);
+  // A workspace of projects carries it beside its rows, so its heading must not repeat it — and a
+  // workspace of FILES has no such row, so there the heading is where it goes.
+  assert.match(server, /\$\{meta\.kind === 'files' \? widthSwitcherHtml\(\) : ''\}/,
+    'the workspace page decides by kind, or it is either missing or doubled');
+});
+
+test('the list is separated from the Build form, not flush against it', () => {
+  // Measured before the fix: on /dev, /test and /projects the form's last control and "Projects · how
+  // to lay them out" touched at ZERO pixels, so one question ran straight into the next. A rule as well
+  // as the space, because they are two different things to do rather than one thing with a gap in it.
+  const rule = css.slice(css.indexOf('.build-form + #webship-workspace-projects'));
+  assert.ok(css.includes('.build-form + #webship-workspace-projects'), 'the pairing is what is spaced');
+  assert.match(rule, /margin-top: 1\.75rem;/);
+  assert.match(rule, /padding-top: 1\.5rem;/);
+  assert.match(rule, /border-top: 1px solid var\(--line\);/, 'the hairline every card here uses');
+});
+
+test('a workspace with no Build form is not given a rule to nothing', () => {
+  // A files workspace has no form above the list, so the pairing simply does not match there —
+  // which is the point of spacing the RELATIONSHIP rather than the element.
+  assert.ok(!/^#webship-workspace-projects \{[^}]*border-top/m.test(css),
+    'the wrapper itself carries no border of its own');
+});

package/core/workspace-app/tests/unit/host-tool-wrapper.test.js

@@ -0,0 +1,18 @@
+/**
+ * The image offers `twg` on PATH through a wrapper that execs the host's binary from the mounted bin
+ * directory: a single-file bind mount binds an inode, so `twg update` on the host would never reach a
+ * container that mounted the file itself. The Jira plugin mounts the directory; the wrapper is the
+ * image's half of that arrangement, and a machine without twg is told so.
+ */
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const dockerfile = fs.readFileSync(path.join(__dirname, '../../.ddev/web-build/Dockerfile.workspace-app'), 'utf8');
+
+test('PATH finds twg through a wrapper that execs whatever the host has now', () => {
+  assert.match(dockerfile, /exec \/host-local-bin\/twg "\$@"/);
+  assert.match(dockerfile, /chmod 0755 \/usr\/local\/bin\/twg/);
+  assert.match(dockerfile, /twg is not installed on the host/, 'a machine without twg says so');
+});

package/core/workspace-app/tests/unit/html-patterns.test.js

@@ -0,0 +1,51 @@
+/**
+ * Every `pattern` attribute has to be a regular expression the BROWSER accepts.
+ *
+ * HTML compiles `pattern` with the `v` flag, which is stricter inside a character class than anything
+ * Node applies by default: a bare `-` or `/` there is a SyntaxError. The browser then throws, drops
+ * the attribute, and the field silently has no validation at all — while every render logs
+ * "Pattern attribute value … is not a valid regular expression".
+ *
+ * Found by opening a page with the console open, which is the only place it can be found: the server
+ * renders the attribute perfectly happily, and Node's own RegExp accepts it too.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const path = require('path');
+
+const APP = path.join(__dirname, '../..');
+
+test('every pattern in the app compiles the way the browser compiles it', () => {
+  const files = ['server.js', 'screens.js', 'commands-page.js', 'ddev-addons-page.js', 'ddev-import.js',
+    'build-order-page.js', 'navigation-page.js'].filter((f) => fs.existsSync(path.join(APP, f)));
+  const bad = [];
+  for (const f of files) {
+    const src = fs.readFileSync(path.join(APP, f), 'utf8');
+    for (const m of src.matchAll(/pattern="([^"]+)"/g)) {
+      // A template expression is checked where its values are DEFINED (below) rather than guessed at
+      // here: this test reads source, and `${esc(lm.pattern || '…')}` has no value until it runs.
+      if (m[1].includes('${')) continue;
+      // What reaches the browser: the JS source escapes a backslash, the HTML attribute does not.
+      const asServed = m[1].replace(/\\\\/g, '\\');
+      try { new RegExp(asServed, 'v'); } catch (_) { bad.push(`${f}: ${m[1]}`); }
+    }
+  }
+  assert.deepEqual(bad, [], 'a pattern the browser cannot compile is a field with no validation');
+});
+
+test('the patterns a list editor can emit compile too', () => {
+  // These reach the same attribute through `${esc(lm.pattern || '…')}`, so they are the other half of
+  // the check above — and the fallback is the one every list without its own pattern gets.
+  const src = fs.readFileSync(path.join(APP, 'server.js'), 'utf8')
+    + fs.readFileSync(path.join(APP, 'lists.js'), 'utf8');
+  const candidates = [...src.matchAll(/pattern: '([^']+)'/g)].map((m) => m[1]);
+  candidates.push("[a-zA-Z0-9_.\\-]+");                      // the fallback, spelled as the source spells it
+  const bad = [];
+  for (const p of candidates) {
+    const asServed = p.replace(/\\\\/g, '\\');
+    try { new RegExp(asServed, 'v'); } catch (_) { bad.push(p); }
+  }
+  assert.deepEqual(bad, []);
+});

package/core/workspace-app/tests/unit/ide-infra.test.js

@@ -0,0 +1,28 @@
+/**
+ * The Web IDE's infrastructure stays with the dashboard image: code-server as a supervised daemon
+ * bound to loopback, and the nginx vhost that proxies the ide. host to it. The menu that opens it
+ * is the IDE plugin's (@webship.co/workspace-ide), which expects this same address.
+ */
+const assert = require('node:assert');
+const { test } = require('node:test');
+const fs = require('fs');
+const path = require('path');
+
+const BIND = '127.0.0.1:8443';
+
+test('the start script binds code-server to loopback only, where the plugin and nginx expect it', () => {
+  const sh = fs.readFileSync(path.join(__dirname, '..', '..', 'scripts', 'code-server-start.sh'), 'utf8');
+  assert.ok(sh.includes(`--bind-addr ${BIND}`), 'the start script binds elsewhere');
+});
+
+test('the daemon runs that script', () => {
+  const cfg = fs.readFileSync(path.join(__dirname, '..', '..', '.ddev', 'config.yaml'), 'utf8');
+  assert.match(cfg, /name: "code-server"/);
+  assert.match(cfg, /command: "bash scripts\/code-server-start\.sh"/);
+});
+
+test('nginx proxies the IDE hostname to that same port, with websocket upgrade', () => {
+  const conf = fs.readFileSync(path.join(__dirname, '..', '..', '.ddev', 'nginx_full', 'nginx-site.conf'), 'utf8');
+  assert.ok(conf.includes(`proxy_pass http://${BIND}`), 'vhost points elsewhere');
+  assert.match(conf, /proxy_set_header Upgrade/);
+});