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

package/core/workspace-app/tests/unit/images-svg.test.js

@@ -0,0 +1,213 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const http = require('http');
+
+const { sanitizeSvg, removedSummary } = require('../../images-svg-sanitize');
+const core = require('../../images-svg-core');
+const svg = require('../../images-svg');
+
+const GOOD = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 400">'
+  + '<g class="part"><path d="M10 10 L100 10" fill="none" stroke="#0074e0" stroke-width="4"/></g>'
+  + '<g class="part"><circle cx="200" cy="200" r="40" fill="none" stroke="#2b447c" stroke-width="4"/></g>'
+  + '<g class="part"><line x1="300" y1="100" x2="400" y2="300" stroke="#000000" stroke-width="4"/></g>'
+  + '<g class="part" transform="translate(20 0)"><rect x="500" y="100" width="80" height="80" fill="none" stroke="#0074e0" stroke-width="4"/></g></svg>';
+
+test('the sanitiser strips scripts, handlers and every way out of the file, and keeps safe drawing', () => {
+  const r = sanitizeSvg(`<?xml version="1.0"?><svg viewBox="0 0 10 10" onload="x()"><script>alert(1)</script>
+    <style>@import url(https://e.example/x.css); .a{fill:url(#g)} .b{background:url(https://e.example/t.png)}</style>
+    <defs><linearGradient id="g"><stop offset="0" stop-color="#0074e0"/></linearGradient></defs>
+    <foreignObject><div>hi</div><rect/></foreignObject>
+    <a href="https://e.example"><path d="M0 0" onclick="x()" fill="url(#g)"/></a>
+    <use href="https://e.example/s.svg#a"/><use href="#g"/><image href="https://e.example/p.png"/>
+    <set attributeName="href" to="javascript:alert(1)"/><animate attributeName="opacity" from="0" to="1" dur="1s"/>
+    <circle cx="1" cy="1" r="1" style="fill:url(https://e.example/x)"/><text>A &amp; B</text></svg>`);
+  assert.doesNotMatch(r.svg, /script|onload|onclick|foreignObject|<image|e\.example|javascript:|@import|<a |<set/i);
+  assert.match(r.svg, /<linearGradient id="g">/);
+  assert.match(r.svg, /<path d="M0 0" fill="url\(#g\)"\/>/, 'a local url() survives; the handler does not');
+  assert.match(r.svg, /<use href="#g"\/>/);
+  assert.match(r.svg, /<animate attributeName="opacity"/);
+  assert.match(r.svg, /<text>A &amp; B<\/text>/);
+  assert.match(r.svg, /^<svg xmlns="http:\/\/www\.w3\.org\/2000\/svg" viewBox="0 0 10 10">/);
+  assert.equal(r.drawableLost, 1, 'the rect inside foreignObject was lost');
+  assert.deepEqual(r.removed.elements, { script: 1, foreignObject: 1, a: 1, image: 1, set: 1 });
+  assert.match(removedSummary(r), /1 script/);
+  assert.equal(sanitizeSvg('no drawing here').svg, '');
+});
+
+test('the substance check wants a viewBox, four shapes and four parts', () => {
+  assert.deepEqual(core.substance(GOOD), { ok: true, why: '', drawable: 4, parts: 4 });
+  const thin = core.substance('<svg viewBox="0 0 1 1" width="10"><g class="part"><rect/></g></svg>');
+  assert.equal(thin.ok, false);
+  assert.match(thin.why, /width or height/);
+  assert.match(thin.why, /1 drawable element, and it needs at least 4/);
+  assert.match(thin.why, /1 <g class="part"> group, and it needs at least 4/);
+  assert.match(core.substance('<svg><rect/></svg>').why, /no viewBox/);
+  assert.equal(core.fixRoot('<svg width="960" height="400px"><g/></svg>'), '<svg viewBox="0 0 960 400"><g/></svg>');
+});
+
+test('a transform on an element a CSS animation moves goes onto a wrapping <g>', () => {
+  const r = core.repairTransforms('<svg viewBox="0 0 1 1"><style>@media (prefers-reduced-motion: no-preference){.spin{animation:s 1s}}</style>'
+    + '<g class="spin" transform="rotate(5)"><rect/></g><rect class="spin" transform="scale(2)"/><rect class="still" transform="scale(3)"/></svg>');
+  assert.equal(r.moved, 2);
+  assert.match(r.svg, /<g transform="rotate\(5\)"><g class="spin"><rect\/><\/g><\/g>/);
+  assert.match(r.svg, /<g transform="scale\(2\)"><rect class="spin"\/><\/g>/);
+  assert.match(r.svg, /<rect class="still" transform="scale\(3\)"\/>/, 'an element nothing animates keeps its transform');
+});
+
+test('Draw the strokes: parts are numbered for the stagger, strokes traced by length, reduced motion respected', () => {
+  const done = core.finish(GOOD, { style: 'draw', motion: { duration: 1100, stagger: 110 } });
+  assert.equal(done.ok, true, done.why);
+  assert.equal(done.moved, 1, 'the part placed with a transform was wrapped');
+  assert.match(done.svg, /@media \(prefers-reduced-motion: no-preference\)/);
+  assert.match(done.svg, /animation:part-rise 1100ms/);
+  assert.match(done.svg, /calc\(var\(--i,0\)\*110ms\)/);
+  assert.deepEqual([...done.svg.matchAll(/style="--i:(\d)"/g)].map((m) => m[1]), ['0', '1', '2', '3']);
+  assert.equal((done.svg.match(/pathLength="1"/g) || []).length, 4);
+  assert.doesNotMatch(core.finish(GOOD, { style: 'still' }).svg, /part-rise/);
+});
+
+test('the prompt is built from the svg: settings, with the brand palette and the style rules', () => {
+  const cfg = svg.config();
+  assert.match(cfg.brief, /flat line illustrations/);
+  assert.deepEqual(cfg.palette, { primary: '#0074e0', secondary: '#2b447c', accent: '#e4dcff', dark: '#000000', light: '#ebe8e5' });
+  assert.deepEqual([cfg.max_attempts, cfg.request_timeout, cfg.time_budget], [3, 180, 240]);
+  assert.deepEqual([cfg.motion.duration, cfg.motion.stagger, cfg.motion.threshold, cfg.motion.replay], [1100, 110, 0.25, true]);
+  const { system, user } = core.buildPrompt({ prompt: 'a lighthouse', style: 'draw', palette: cfg.palette, brief: cfg.brief, shape: 'wide' });
+  assert.match(system, /The brief: Clean, flat line illustrations/);
+  assert.match(system, /viewBox="0 0 960 400"> root, with no width or height/);
+  assert.match(system, /primary #0074e0, secondary #2b447c, accent #e4dcff, dark #000000, light #ebe8e5/);
+  assert.match(system, /Stroke only: every shape has fill="none"/);
+  assert.match(system, /Answer with JSON only/);
+  assert.equal(user, 'Draw: a lighthouse');
+  assert.match(core.buildPrompt({ prompt: 'x', style: 'css', palette: cfg.palette, shape: 'square' }).system, /prefers-reduced-motion: no-preference/);
+  const p = svg.plan({ prompt: 'x', palette_primary: '#ff0000', palette_dark: 'red; x' });
+  assert.equal(p.palette.primary, '#ff0000', 'the form may change a colour for one run');
+  assert.equal(p.palette.dark, '#000000', 'a value that is not a colour is ignored');
+});
+
+test('the examples are data in settings, generic, and free of the names they were adapted from', () => {
+  const ex = svg.config().examples;
+  assert.ok(ex.length >= 6 && ex.length <= 10, `${ex.length} examples`);
+  const deny = /enlyte|mitchell|genex|coventry|partstrader|claim|insur|casualty|pharmac|nurse|injur|adjuster|workers.? comp|bill review|carrier|policyholder/i;
+  const raw = fs.readFileSync(path.join(__dirname, '..', '..', '..', 'config', 'workspace.images.settings.yml'), 'utf8');
+  assert.doesNotMatch(raw, deny);
+  for (const e of ex) {
+    assert.ok(core.STYLES[e.style], e.title);
+    assert.ok(e.prompt.length > 40, e.title);
+    assert.doesNotMatch(`${e.title} ${e.prompt}`, deny);
+  }
+  const form = svg.formHtml();
+  assert.match(form, /<select class="uk-select uk-form-small" id="svg-example" data-svg-example>/);
+  assert.match(form, /data-prompt="Five rounded bars rising/);
+});
+
+// A stand-in for a chat model that answers from a list, recording each request.
+async function standIn(replies) {
+  const seen = [];
+  const srv = http.createServer((req, res) => {
+    let body = '';
+    req.on('data', (d) => { body += d; });
+    req.on('end', () => {
+      seen.push(JSON.parse(body));
+      const text = replies[Math.min(seen.length - 1, replies.length - 1)];
+      res.writeHead(200, { 'Content-Type': 'application/json' });
+      res.end(JSON.stringify({ choices: [{ message: { content: text } }], usage: { prompt_tokens: 1000, completion_tokens: 1000 } }));
+    });
+  });
+  await new Promise((r) => srv.listen(0, r));
+  process.env.OPENAI_CHAT_API = `http://127.0.0.1:${srv.address().port}/v1/chat/completions`;
+  const https = require('https');
+  const real = https.request;
+  https.request = http.request;
+  return { seen, close: () => { https.request = real; srv.close(); delete process.env.OPENAI_CHAT_API; } };
+}
+
+test('a thin answer is retried with the reason, and the second is saved with its records', async () => {
+  const thin = JSON.stringify({ svg: '<svg viewBox="0 0 960 400"><g class="part"><rect/></g></svg>', summary: 's', alt: 'a' });
+  const good = JSON.stringify({ svg: GOOD, summary: 'Four shapes in a row.', alt: 'Four outlined shapes' });
+  const s = await standIn([thin, good]);
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'svg-'));
+  try {
+    assert.equal((await svg.generateSvg({ prompt: 'shapes' })).status, 400, 'nothing without confirm');
+    const r = await svg.generateSvg({ prompt: 'shapes', provider: 'openai', style: 'draw', name: 'shapes', confirm: 'yes' }, { key: 'sk-test', dir });
+    assert.equal(r.ok, true, r.error);
+    assert.equal(r.attempts, 2);
+    assert.equal(r.cost.toFixed(6), (2 * (1000 * 0.75 / 1e6 + 1000 * 4.5 / 1e6)).toFixed(6));
+    const second = s.seen[1].messages;
+    assert.equal(second[2].role, 'assistant');
+    assert.match(second[3].content, /The drawing was not used: it has 1 drawable element/);
+    const side = JSON.parse(fs.readFileSync(path.join(dir, 'shapes.svg.json'), 'utf8'));
+    assert.deepEqual([side.style, side.attempts, side.provider, side.summary, side.alt],
+      ['Draw the strokes', 2, 'OpenAI', 'Four shapes in a row.', 'Four outlined shapes']);
+    assert.match(side.palette, /primary #0074e0/);
+    assert.match(fs.readFileSync(path.join(dir, 'shapes.md'), 'utf8'), /- \*\*Style:\*\* Draw the strokes/);
+    assert.match(fs.readFileSync(path.join(dir, 'shapes.svg'), 'utf8'), /part-rise/);
+  } finally {
+    s.close();
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test('a drawing that lost shapes to the sanitiser is drawn again; one that never passes is reported, not saved', async () => {
+  const lost = JSON.stringify({ svg: GOOD.replace('</svg>', '<foreignObject><rect/></foreignObject></svg>') });
+  const s = await standIn([lost]);
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'svg-'));
+  try {
+    const r = await svg.generateSvg({ prompt: 'x', provider: 'openai', style: 'still', confirm: 'yes' }, { key: 'sk-test', dir });
+    assert.equal(r.ok, false);
+    assert.equal(s.seen.length, 3, 'max_attempts');
+    assert.match(s.seen[1].messages[3].content, /1 drawable element was lost/);
+    assert.match(r.error, /No usable drawing after 3 attempts/);
+    assert.deepEqual(fs.readdirSync(dir), []);
+  } finally {
+    s.close();
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test('Gemini and Anthropic need a real key; Claude Code draws in a session, retried by its finish step', async () => {
+  const noKey = await svg.generateSvg({ prompt: 'x', provider: 'anthropic', confirm: 'yes' });
+  assert.equal(noKey.status, 503);
+  assert.match(noKey.error, /ai_providers\.anthropic\.api_key/);
+  const calls = [];
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'svgcc-'));
+  try {
+    const r = await svg.generateSvg({ prompt: 'nodes; $(id)', provider: 'claude_code_cli', style: 'draw', name: 'nodes', confirm: 'yes' },
+      { dir, start: async (a, payload) => { calls.push(payload); return { ok: true }; } });
+    assert.equal(r.ok, true, r.error);
+    const { cmd } = calls[0];
+    assert.doesNotMatch(cmd, /nodes;|\$\(id\)/);
+    assert.match(cmd, /^for try in \$\(seq 1 3\); do claude -p "\$\(cat '[^']+'\)" /);
+    const promptFile = cmd.match(/cat '([^']+)'/)[1];
+    const jobFile = cmd.match(/'([^']+\.job\.json)'/)[1];
+    assert.match(fs.readFileSync(promptFile, 'utf8'), /Write exactly two files[\s\S]*1\. nodes\.svg/);
+    const finish = require('../../scripts/images-claude-finish');
+    fs.writeFileSync(path.join(dir, 'nodes.svg'), '<svg viewBox="0 0 960 400"><g class="part"><rect/></g></svg>');
+    assert.equal(finish.main(jobFile), 3, 'refused, drawn again');
+    assert.match(fs.readFileSync(promptFile, 'utf8'), /Your last drawing was refused\. The drawing was not used/);
+    fs.writeFileSync(path.join(dir, 'nodes.svg'), GOOD);
+    fs.writeFileSync(path.join(dir, 'nodes.claude.json'), JSON.stringify({ summary: 'Nodes.', alt: 'Nodes' }));
+    assert.equal(finish.main(jobFile), 0);
+    const side = JSON.parse(fs.readFileSync(path.join(dir, 'nodes.svg.json'), 'utf8'));
+    assert.deepEqual([side.provider, side.attempts, side.style, side.alt], ['claude_code_cli', 2, 'Draw the strokes', 'Nodes']);
+    assert.ok(!fs.existsSync(promptFile) && !fs.existsSync(jobFile));
+    fs.rmSync(path.join(path.dirname(path.dirname(promptFile)), 'images--claude-nodes.cwd'), { force: true });
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test('the plan comes first, through the confirm dialog, and the viewer can replay and copy the markup', () => {
+  const p = svg.plan({ prompt: 'nodes', provider: 'openai', style: 'draw' });
+  const html = svg.planHtml(p);
+  assert.match(html, /hx-trigger="confirmed-remove"/);
+  assert.match(html, /&quot;confirm&quot;:&quot;yes&quot;/);
+  assert.match(html, /at most 3 attempts/);
+  const page = fs.readFileSync(path.join(__dirname, '..', '..', 'images-page.js'), 'utf8');
+  assert.match(page, /data-svg-replay/);
+  assert.match(page, /Copy SVG markup/);
+  assert.match(page, /<source media="\(prefers-reduced-motion: reduce\)"/);
+});

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

@@ -0,0 +1,144 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const images = require('../../images');
+
+const root = path.join(__dirname, '..', '..');
+const repo = path.join(root, '..', '..');
+const read = (p) => fs.readFileSync(path.join(root, p), 'utf8');
+
+function png(w, h) {
+  const b = Buffer.alloc(33);
+  Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]).copy(b, 0);
+  b.writeUInt32BE(13, 8); b.write('IHDR', 12); b.writeUInt32BE(w, 16); b.writeUInt32BE(h, 20);
+  return b;
+}
+function gif(w, h) { const b = Buffer.alloc(13); b.write('GIF89a'); b.writeUInt16LE(w, 6); b.writeUInt16LE(h, 8); return b; }
+function jpeg(w, h) {
+  // SOI, an APP0 segment, then SOF0 with height and width.
+  return Buffer.concat([Buffer.from([0xff, 0xd8, 0xff, 0xe0, 0x00, 0x04, 0x00, 0x00]),
+    Buffer.from([0xff, 0xc0, 0x00, 0x11, 0x08, h >> 8, h & 255, w >> 8, w & 255, 0x03])]);
+}
+function webp8x(w, h) {
+  const b = Buffer.alloc(30); b.write('RIFF'); b.write('WEBP', 8); b.write('VP8X', 12);
+  b.writeUIntLE(w - 1, 24, 3); b.writeUIntLE(h - 1, 27, 3); return b;
+}
+
+test('dimensions are read from each format\'s own header', () => {
+  const p = images._parsers;
+  assert.deepEqual(p.pngSize(png(1920, 1080)), { width: 1920, height: 1080 });
+  assert.deepEqual(p.gifSize(gif(64, 32)), { width: 64, height: 32 });
+  assert.deepEqual(p.jpegSize(jpeg(800, 600)), { width: 800, height: 600 });
+  assert.deepEqual(p.webpSize(webp8x(1600, 1000)), { width: 1600, height: 1000 });
+  assert.deepEqual(p.svgSize(Buffer.from('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 40"></svg>')), { width: 120, height: 40 });
+  assert.deepEqual(p.svgSize(Buffer.from('<svg width="24px" height="16" viewBox="0 0 1 1">')), { width: 24, height: 16 });
+  assert.equal(p.pngSize(Buffer.from('not a png at all, really not')), null);
+});
+
+test('a folder lists its folders and images, and nothing outside it', () => {
+  const ws = fs.mkdtempSync(path.join(os.tmpdir(), 'img-'));
+  try {
+    fs.mkdirSync(path.join(ws, 'shots'));
+    fs.writeFileSync(path.join(ws, 'a.png'), png(10, 20));
+    fs.writeFileSync(path.join(ws, 'shots', 'b.gif'), gif(3, 4));
+    fs.writeFileSync(path.join(ws, 'notes.md'), '# not an image');
+    fs.writeFileSync(path.join(ws, '.hidden.png'), png(1, 1));
+    const top = images.listFolder(ws, '');
+    assert.deepEqual(top.images.map((i) => [i.name, i.width, i.height, i.type]), [['a.png', 10, 20, 'png']]);
+    assert.deepEqual(top.folders.map((f) => [f.name, f.count]), [['shots', 1]]);
+    assert.equal(images.listFolder(ws, 'shots').images[0].rel, 'shots/b.gif');
+    assert.equal(images.listFolder(ws, '../etc').ok, false);
+    assert.equal(images.safeIn(ws, '../../etc/passwd'), null);
+  } finally {
+    fs.rmSync(ws, { recursive: true, force: true });
+  }
+});
+
+test('names are made safe, and a new name never takes an existing one', () => {
+  const ws = fs.mkdtempSync(path.join(os.tmpdir(), 'img-'));
+  try {
+    assert.equal(images.safeName('../My Shot (1).PNG'), 'My-Shot-1.PNG');
+    fs.writeFileSync(path.join(ws, 'shot.png'), 'x');
+    assert.equal(images.freeName(ws, 'shot', 'png'), 'shot-2.png');
+    assert.equal(images.versionName(ws, 'shot.png', 'webp'), 'shot-v2.webp');
+    fs.writeFileSync(path.join(ws, 'shot-v2.png'), 'x');
+    assert.equal(images.versionName(ws, 'shot-v2.png', 'png'), 'shot-v3.png');
+  } finally {
+    fs.rmSync(ws, { recursive: true, force: true });
+  }
+});
+
+test('"All media images" reads media and doc workspaces and the dashboard screenshots, never sites', () => {
+  assert.deepEqual(images.EVERYWHERE, ['images', 'docs', 'videos', 'audio', 'specs', 'designs']);
+  for (const site of ['dev', 'test', 'demos', 'sandboxes', 'projects', 'products']) assert.ok(!images.EVERYWHERE.includes(site), site);
+  assert.match(images.appShotsDir(), /core\/workspace-app\/docs\/screenshots$/);
+  const list = images.scanEverywhere({ fresh: true });
+  assert.ok(Array.isArray(list));
+  assert.ok(list.every((im) => images.IMAGE_RE.test(im.name) && im.src));
+});
+
+test('the workspace is registered before videos, as a media workspace with a gallery', () => {
+  const settings = fs.readFileSync(path.join(repo, 'core/config/settings.yml'), 'utf8');
+  assert.match(settings, /\n {2}- images\n {2}- videos\n/);
+  assert.match(fs.readFileSync(path.join(repo, 'core/config/workspace.images.settings.yml'), 'utf8'), /type: media/);
+  assert.match(read('workspaces.js'), /images: +\{ icon: 'tabler:photo', subtitle: 'Images, screenshots and generated pictures', noun: 'image', kind: 'files' \}/);
+  assert.match(read('workspace-types.js'), /images: 'media'/);
+  assert.match(read('files-browser.js'), /'images'/);
+  assert.match(read('.ddev/config.yaml'), /"\*\.images\.workspace"/);
+  for (const f of ['README.md', 'AGENTS.md', 'CLAUDE.md']) assert.ok(fs.existsSync(path.join(repo, 'images', f)), f);
+  const server = read('server.js');
+  assert.match(server, /if \(key === 'images'\) return require\('\.\/images-page'\)\.galleryHtml\(/);
+  assert.match(server, /'\.webp': 'image\/webp', '\.avif': 'image\/avif'/);
+  assert.match(server, /type === 'image\/svg\+xml' \? \{ 'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; sandbox" \}/);
+});
+
+test('the gallery and the viewer draw what the list holds, and only the images workspace can rename or delete', () => {
+  const page = require('../../images-page');
+  const ws = { per: 'all', page: 1, q: '', sort: 'newest', kind: '', scope: 'here' };
+  const html = page.galleryHtml(ws, '', { folderDocs: '', openWith: '', viewSwitcher: '<div class="layout-controls"></div>' });
+  // The same building blocks the docs and videos lists use: heading with a count, summary, layout switcher, file list.
+  assert.match(html, /<div class="cards-head fx-head">/);
+  assert.match(html, /<h3 class="uk-margin-remove">Images <span class="uk-badge">\d+<\/span><\/h3>/);
+  assert.match(html, /<p class="uk-text-meta fx-summary">/);
+  assert.match(html, /<div class="layout-controls"><\/div>/);
+  assert.match(html, /<option value="here" selected>This workspace<\/option>/);
+  assert.match(html, /<option value="all">All media images<\/option>/);
+  assert.match(html, /name="kind" aria-label="Image type"/);
+  assert.match(read('lists.js'), /size: +\{ label: 'Largest first', filesOnly: true/);
+  const actions = read('actions/images.js');
+  assert.match(actions, /images\.safeIn\(workspaceDir\('images'\)/);
+  assert.match(actions, /if \(form\.confirm !== 'yes'\) return send/);
+  const ui = read('public/ui.js');
+  assert.match(ui, /#editor-modal\.uk-open \[data-img-viewer\]/);
+});
+
+test('each source has its own share of the scan, and a vector thumbnail is padded, not stretched', () => {
+  assert.equal(images.SCAN_MAX, 1000);
+  assert.match(read('images.js'), /const full = \(\) => out\.length - start >= SCAN_MAX;/);
+  assert.match(read('images-page.js'), /im\.type === 'svg' \? ' is-vector' : ''/);
+  const css = read('public/css/components/images.css');
+  assert.match(css, /\.img-row \.fx-thumb\.is-vector img \{ object-fit: contain; padding: 1\.25rem;/);
+  assert.match(css, /\.img-stage\.is-fit \{ overflow: hidden; \}/);
+});
+
+test('an image is a card of the shared file list: thumbnail with its size in the corner, name, meta, View and a menu', () => {
+  const page = require('../../images-page');
+  const src = read('images-page.js');
+  assert.match(src, /<div class="fx-row fx-file has-thumb img-row">/);
+  assert.match(src, /<span class="fx-duration fx-dims">/);
+  assert.match(src, /<a class="fx-row fx-folder"/);
+  assert.match(src, /<div class="file-list img-list">/);
+  assert.match(src, /class="uk-button uk-button-default uk-button-small fx-open" title="View/);
+  assert.match(read('server.js'), /viewSwitcher: viewSwitcherHtml\('files'\)/);
+  assert.equal(typeof page.galleryHtml, 'function');
+});
+
+test('a thumbnail fills the card shape and is cropped from the top, so a tall screenshot stays sharp', () => {
+  const src = read('images-page.js');
+  assert.match(src, /'-thumbnail', `\$\{THUMB_W\}x\$\{THUMB_H\}\^`, '-gravity', 'north',\n\s+'-extent', `\$\{THUMB_W\}x\$\{THUMB_H\}`/);
+  assert.match(src, /thumb\?v=2&src=/);
+  assert.match(read('images.js'), /folders\.push\(\{ folder: true, name: e\.name, rel: childRel, count, folders: subs,/);
+});

package/core/workspace-app/tests/unit/jobs-fragment.test.js

@@ -0,0 +1,66 @@
+/**
+ * The job fragment's two newer faces: the phase progress bar and inline mode.
+ *
+ * Both are rendered from the job record alone, so they can be tested by seeding
+ * the registry directly — no process is spawned. The phase bar's one honesty
+ * rule is tested from both sides: a phase counts only when its marker is in the
+ * output, and a finished job reports full whatever the output said.
+ */
+
+const { test } = require('node:test');
+const assert = require('node:assert');
+
+const { jobs, jobFragment } = require('../../jobs');
+
+function seed(id, job) {
+  jobs.set(id, { title: 'T', key: null, phases: null, inline: false, buf: '', done: false, ok: null, ...job });
+  return id;
+}
+
+test('a job without phases renders no progress bar', () => {
+  const { html } = jobFragment(seed('t-plain', { buf: 'hello' }));
+  assert.ok(!html.includes('job-progress'));
+});
+
+test('the phase bar counts only markers that actually appeared', () => {
+  const phases = ['Exporting', 'Copying', 'Importing'];
+  const { html } = jobFragment(seed('t-phases', { phases, buf: 'Exporting the db\nCopying files' }));
+  assert.match(html, /value="2" max="3"/);
+  // The label names the phase the run is ON, not one it finished.
+  assert.ok(html.includes('Importing (2/3)'));
+});
+
+test('a finished successful job reports the bar full', () => {
+  const { html } = jobFragment(seed('t-done', { phases: ['A', 'B'], buf: 'A', done: true, ok: true }));
+  assert.match(html, /value="2" max="2"/);
+  assert.ok(html.includes('Done (2/2)'));
+});
+
+test('inline jobs carry the class that keeps them out of the toast stack, and a done note', () => {
+  const running = jobFragment(seed('t-inline', { inline: true, buf: 'x' })).html;
+  assert.ok(running.includes('job-inline'));
+  assert.ok(!running.includes('job-done-note'), 'no done note while running');
+  const done = jobFragment(seed('t-inline-done', { inline: true, buf: 'x', done: true, ok: true })).html;
+  assert.ok(done.includes('job-done-note'));
+  assert.ok(done.includes('Done — the process finished'));
+  const failed = jobFragment(seed('t-inline-fail', { inline: true, buf: 'x', done: true, ok: false })).html;
+  assert.ok(failed.includes('The process failed'));
+});
+
+test('a non-inline job never renders the done note', () => {
+  const { html } = jobFragment(seed('t-stack-done', { buf: 'x', done: true, ok: true }));
+  assert.ok(!html.includes('job-done-note'));
+});
+
+const { screenWrap } = require('../../jobs');
+
+test('screenWrap builds the detach-tail-wait line and refuses bad names', () => {
+  const line = screenWrap({ session: 'jira-x-1', inner: 'echo hi', logFile: '/tmp/x.log' });
+  assert.match(line, /screen -c "[^"]*\/screenrc" -dmS jira-x-1/,
+    "under the dashboard's own screenrc, never the machine's");
+  assert.ok(line.includes('tail -F "/tmp/x.log"'));
+  // The waiter must match the session EXACTLY: a bare "[.]jira-x-1" also matches
+  // jira-x-12, so a job would wait on the wrong session's lifetime.
+  assert.ok(line.includes('grep -q "[.]jira-x-1[[:space:]]"'), 'the waiter dot-escapes and terminates the session name');
+  assert.throws(() => screenWrap({ session: 'bad name; rm', inner: 'x', logFile: '/tmp/y' }));
+});

package/core/workspace-app/tests/unit/media-ux.test.js

@@ -0,0 +1,164 @@
+/**
+ * The player and the cards, the way a streaming site has them.
+ *
+ * Lengths are read from the files, so they are checked against ffprobe where it is installed and against
+ * hand-built headers where it is not. The rows, the chapters and the player markup come from the real server.
+ */
+
+const { test, before, after } = require('node:test');
+const assert = require('node:assert');
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+const net = require('net');
+const { spawn, execFileSync } = require('child_process');
+
+const APP = path.join(__dirname, '../..');
+const REPO = path.join(APP, '../..');
+const { copyConfig } = require('./_isolated-config');
+const mi = require('../../media-info');
+
+const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'ws-media-'));
+const root = fs.mkdtempSync(path.join(os.tmpdir(), 'ws-media-root-'));
+
+function hasFfmpeg() {
+  try { execFileSync('ffmpeg', ['-version'], { stdio: 'ignore' }); return true; } catch (_) { return false; }
+}
+const ffmpeg = (...a) => execFileSync('ffmpeg', ['-y', '-loglevel', 'error', ...a]);
+
+test('a length is said the way a player says it', () => {
+  assert.strictEqual(mi.clock(476.1), '7:56');
+  assert.strictEqual(mi.clock(59.6), '1:00');
+  assert.strictEqual(mi.clock(3725), '1:02:05');
+  assert.strictEqual(mi.clock(0), '');
+  assert.strictEqual(mi.clock(null), '');
+});
+
+test('a wav and a constant bit rate mp3 are read from their headers', () => {
+  const wav = Buffer.alloc(44 + 88200);
+  wav.write('RIFF', 0); wav.writeUInt32LE(36 + 88200, 4); wav.write('WAVEfmt ', 8); wav.writeUInt32LE(16, 16);
+  wav.writeUInt16LE(1, 20); wav.writeUInt16LE(1, 22); wav.writeUInt32LE(22050, 24); wav.writeUInt32LE(44100, 28);
+  wav.writeUInt16LE(2, 32); wav.writeUInt16LE(16, 34); wav.write('data', 36); wav.writeUInt32LE(88200, 40);
+  fs.writeFileSync(path.join(tmp, 'two.wav'), wav);
+  assert.strictEqual(mi.seconds(path.join(tmp, 'two.wav')), 2);
+  // MPEG-1 Layer III, 128 kbit/s, 44.1 kHz: 0xFFFB 0x90 0x00. 160000 bytes at 128 kbit/s is 10 seconds.
+  const mp3 = Buffer.alloc(160000, 0);
+  Buffer.from([0xff, 0xfb, 0x90, 0x00]).copy(mp3, 0);
+  fs.writeFileSync(path.join(tmp, 'ten.mp3'), mp3);
+  assert.strictEqual(mi.seconds(path.join(tmp, 'ten.mp3')), 10);
+  fs.writeFileSync(path.join(tmp, 'junk.mp3'), Buffer.alloc(500, 1));
+  assert.strictEqual(mi.seconds(path.join(tmp, 'junk.mp3')), null);
+  assert.strictEqual(mi.seconds(path.join(tmp, 'missing.mp4')), null);
+  assert.strictEqual(mi.seconds(path.join(tmp, 'two.txt')), null);
+});
+
+test('an mp4 length is found whether the encoder put its header first or last', { skip: !hasFfmpeg() }, () => {
+  for (const [name, flags] of [['front.mp4', ['-movflags', '+faststart']], ['end.mp4', []]]) {
+    const out = path.join(tmp, name);
+    ffmpeg('-f', 'lavfi', '-i', 'testsrc=duration=5:size=160x120:rate=10', '-f', 'lavfi', '-i', 'sine=duration=5', '-shortest', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-c:a', 'aac', ...flags, out);
+    const truth = parseFloat(execFileSync('ffprobe', ['-v', 'error', '-show_entries', 'format=duration', '-of', 'csv=p=0', out]).toString());
+    assert.ok(Math.abs(mi.seconds(out) - truth) < 0.1, `${name}: ${mi.seconds(out)} against ${truth}`);
+  }
+  const mp3 = path.join(tmp, 'tone.mp3');
+  ffmpeg('-f', 'lavfi', '-i', 'sine=duration=4', '-codec:a', 'libmp3lame', '-b:a', '128k', mp3);
+  assert.ok(Math.abs(mi.seconds(mp3) - 4) < 0.2, String(mi.seconds(mp3)));
+});
+
+test('the player offers what people expect, and the cards say how long and whether there are words', () => {
+  const js = fs.readFileSync(path.join(APP, 'public/media-player.js'), 'utf8');
+  for (const bit of ["key === 'j'", "key === 'l'", "'ArrowLeft'", "'ArrowUp'", "key === 'm'", "requestFullscreen", "key === '<'", "/^[0-9]$/", "ws-media-speed", "media.play()", "data-media-step", "mouseover"]) {
+    assert.ok(js.includes(bit), bit);
+  }
+  assert.strictEqual(fs.readFileSync(path.join(APP, 'public/ui.js'), 'utf8').indexOf('data-sound-speed'), -1, 'the old handlers are gone from ui.js');
+});
+
+// ---- the running server ------------------------------------------------------------------------
+
+let proc; let base;
+const free = () => new Promise((resolve) => {
+  const s = net.createServer().listen(0, '127.0.0.1', () => { const p = s.address().port; s.close(() => resolve(p)); });
+});
+const SCRIPT = `# Demo
+
+## E01 Opening (00:00.0 to 00:02.0)
+
+> Hello there.
+
+## E02 Close (00:02.0 to 00:05.0)
+
+> Goodbye now.
+`;
+
+before(async () => {
+  fs.mkdirSync(path.join(root, 'core'), { recursive: true });
+  copyConfig(path.join(REPO, 'core/config'), path.join(root, 'core/config'));
+  fs.symlinkSync(path.join(REPO, 'core/scripts'), path.join(root, 'core/scripts'));
+  fs.symlinkSync(APP, path.join(root, 'core/workspace-app'));
+  for (const d of ['videos', 'docs', 'audio']) fs.mkdirSync(path.join(root, d), { recursive: true });
+  if (hasFfmpeg()) {
+    ffmpeg('-f', 'lavfi', '-i', 'testsrc=duration=5:size=160x120:rate=10', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-movflags', '+faststart', path.join(root, 'videos/demo.mp4'));
+    ffmpeg('-f', 'lavfi', '-i', 'sine=duration=3', '-codec:a', 'libmp3lame', '-b:a', '128k', path.join(root, 'audio/tone.mp3'));
+  } else {
+    fs.writeFileSync(path.join(root, 'videos/demo.mp4'), Buffer.alloc(100, 1));
+    fs.writeFileSync(path.join(root, 'audio/tone.mp3'), Buffer.alloc(100, 1));
+  }
+  fs.writeFileSync(path.join(root, 'videos/plain.mp4'), Buffer.alloc(100, 2));
+  fs.writeFileSync(path.join(root, 'docs/demo-voiceover-script.md'), SCRIPT);
+  const port = await free();
+  base = `http://127.0.0.1:${port}`;
+  proc = spawn(process.execPath, ['server.js'], { cwd: APP, env: { ...process.env, PORT: String(port), WORKSPACE_ROOT: root }, stdio: ['ignore', 'pipe', 'pipe'] });
+  await new Promise((resolve, reject) => {
+    const t = setTimeout(() => reject(new Error('server did not start')), 15000);
+    proc.stdout.on('data', (d) => { if (/listening/.test(String(d))) { clearTimeout(t); resolve(); } });
+    proc.on('exit', (c) => { clearTimeout(t); reject(new Error(`server exited ${c}`)); });
+  });
+});
+
+after(() => {
+  if (proc) proc.kill();
+  for (const d of [tmp, root]) fs.rmSync(d, { recursive: true, force: true });
+});
+
+const get = (p) => fetch(base + p);
+const rowOf = (html, name) => { const at = html.indexOf(`title="Play ${name}`); return html.slice(Math.max(0, at - 2500), at + 1500); };
+
+test('a recording\'s card carries its length, CC when it has a script, and a preview address', { skip: !hasFfmpeg() }, async () => {
+  const html = await (await get('/fragments/videos/items')).text();
+  const demo = rowOf(html, 'demo.mp4');
+  assert.match(demo, /<span class="fx-duration">0:05<\/span>/);
+  assert.match(demo, /<span class="fx-cc" title="Has a transcript">CC<\/span>/);
+  assert.match(demo, /data-preview="\/files\/videos\/demo\.mp4"/);
+  assert.match(demo, /<span class="fx-size">[^<]*· 0:05<\/span>/);
+  const plain = rowOf(html, 'plain.mp4');
+  assert.ok(!/fx-duration|fx-cc/.test(plain.slice(plain.lastIndexOf('<div class="fx-row'))), 'no length and no CC where there is neither');
+  const sound = await (await get('/fragments/audio/items')).text();
+  assert.match(sound, /<span class="fx-duration">0:03<\/span>/);
+  assert.ok(!/data-preview/.test(sound), 'a sound has no picture to preview');
+});
+
+test('the player is a stage with a speed menu, chapters from the script, and previous and next', async () => {
+  const html = await (await get('/fragments/videos/play/demo.mp4')).text();
+  assert.match(html, /class="uk-card uk-card-default uk-card-body uk-margin-top editor-card media-card"/);
+  assert.match(html, /<div class="media-stage"><video class="video-player"/);
+  assert.match(html, /data-speed-label[^>]*>1×<\/button>\s*<div uk-dropdown=/);
+  assert.strictEqual((html.match(/data-sound-speed=/g) || []).length, 19);
+  const chapters = JSON.parse(html.match(/data-chapters="([^"]*)"/)[1].replace(/&quot;/g, '"'));
+  assert.deepStrictEqual(chapters, [{ start: 0, end: 2, title: 'E01 Opening' }, { start: 2, end: 5, title: 'E02 Close' }]);
+  assert.match(html, /<section class="transcript-section" data-start="2" data-end="5">/);
+  assert.match(html, /data-media-step="-1" disabled/);
+  assert.match(html, /data-media-step="1" disabled/);
+  assert.match(html, /Space play/);
+  assert.match(html, /<p class="player-chapter" data-chapter hidden><\/p>/);
+  const sound = await (await get('/fragments/audio/play/tone.mp3')).text();
+  assert.match(sound, /media-stage is-sound/);
+  assert.ok(!/chapter-bar/.test(sound), 'a sound has no chapters');
+  const plain = await (await get('/fragments/videos/play/plain.mp4')).text();
+  assert.ok(!/chapter-bar/.test(plain), 'no script, no chapters');
+});
+
+test('the shell loads the player script', async () => {
+  const page = await (await get('/videos')).text();
+  assert.match(page, /<script src="\/media-player\.js[^"]*" defer><\/script>/);
+  const js = await get('/media-player.js');
+  assert.strictEqual(js.status, 200);
+});