webui: serve the Console first screen from the control board (#1507)

2026-09-12 19:37:35 -05:00
parent 7c8e530add
commit ea00ec66d9
29 changed files with 1639 additions and 0 deletions
@@ -0,0 +1,63 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { createServer } from 'node:http';
+import { browser } from './browser.mjs';
+import { close } from './fixture.mjs';
+import { startServer } from '../src/serve.mjs';
+
+test('browser edge states: loading, empty, malformed, stale, hostile/long values, in-flight reply and appearance fallback', { timeout: 120000 }, async () => {
+  let index = { sessions: [], counts: {}, generatedAt: 'fixture time' }, held = null, sends = 0, holdBoard = true, boardResponse;
+  let resolveBoardRequest;
+  const boardRequested = new Promise(resolve => { resolveBoardRequest = resolve; });
+  const server = createServer(async (req, res) => {
+    for await (const chunk of req) { void chunk; }
+    res.setHeader('content-type', 'application/json');
+    if (req.url === '/api/board') { if (holdBoard) { boardResponse = res; resolveBoardRequest(); return; } return res.end(JSON.stringify(index)); }
+    sends++; held = res;
+  });
+  await new Promise(r => server.listen(0, '127.0.0.1', r));
+  const web = await startServer({ port: 0, board: `http://127.0.0.1:${server.address().port}` });
+  const b = await browser();
+  const wait = expr => b.evaluate(`(async()=>{for(let i=0;i<100;i++){if(${expr})return true;await new Promise(r=>setTimeout(r,50))}throw new Error('Condition timed out')})()`);
+  try {
+    await b.call('Page.addScriptToEvaluateOnNewDocument', { source: 'Object.defineProperty(window,"localStorage",{get(){throw new Error("storage denied")}});window.errors=[];addEventListener("error",e=>errors.push(e.message));' });
+    await b.viewport(320); await b.navigate(`http://127.0.0.1:${web.address().port}`);
+    assert.match(await b.evaluate('document.querySelector("#status").textContent'), /Loading/);
+    await boardRequested;
+    holdBoard = false; boardResponse.end(JSON.stringify(index));
+    await wait('document.querySelector("#sessions").textContent.includes("No sessions")');
+    assert.equal(await b.evaluate('document.querySelector("#waiting-count").textContent'), '0');
+    assert.equal(await b.evaluate('document.documentElement.dataset.palette'), 'harbor');
+    const agent = 'agent"[\\<script>', project = '__proto__';
+    const rec = { agent, project, state: 'waiting', waitingOnYou: true, task: 'Long '.repeat(300), workspace: '/' + 'path/'.repeat(100), taskSource: 'registration', lastActivity: '2026-09-01', lastAssistantText: '<img src=x onerror=alert(1)>', registered: { alive: true, tmux: { session: agent } } };
+    index = { sessions: [rec], counts: { waiting: 1 } };
+    await b.evaluate('document.querySelector("#refresh").click()'); await wait('document.querySelectorAll("table.sessions [data-open]").length===1');
+    await b.evaluate('document.querySelector("table.sessions [data-open]").click()');
+    assert.equal(await b.evaluate('document.querySelector("#inspector-title").textContent'), agent);
+    assert.equal(await b.evaluate('document.querySelectorAll("#inspection img").length'), 0);
+    assert.equal(await b.evaluate('document.documentElement.scrollWidth<=innerWidth'), true);
+    await b.evaluate('document.querySelector("#reply").focus()'); await b.call('Input.insertText', { text: 'original draft' });
+    await b.evaluate('document.querySelector(".reply-form").requestSubmit();document.querySelector(".reply-form").requestSubmit()');
+    await wait('document.querySelector(".reply-form button").disabled');
+    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#refresh").disabled');
+    assert.equal(await b.evaluate('document.querySelector(".reply-form button").disabled'), true);
+    await b.evaluate('document.querySelector("#reply").focus()'); await b.call('Input.insertText', { text: 'newer ' });
+    held.end(JSON.stringify({ delivered: true, sentAt: 'fixture', session: agent }));
+    await wait('document.querySelector(".receipt")?.textContent.startsWith("delivered")');
+    assert.equal(sends, 1); assert.match(await b.evaluate('document.querySelector("#reply").value'), /newer/);
+    // A stale registration removes the form, but does not destroy its draft.
+    index.sessions[0].registered.alive = false;
+    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#refresh").disabled');
+    assert.equal(await b.evaluate('!!document.querySelector("#reply")'), false);
+    assert.match(await b.evaluate('document.querySelector("#inspection").textContent'), /reply needs a registered seat/);
+    index.sessions[0].registered.alive = true;
+    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!!document.querySelector("#reply")');
+    assert.match(await b.evaluate('document.querySelector("#reply").value'), /newer/);
+    // Malformed data must not erase a valid snapshot.
+    index = { sessions: [null] };
+    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#error").hidden');
+    assert.match(await b.evaluate('document.querySelector("#error").textContent'), /Invalid board session data/);
+    assert.equal(await b.evaluate('document.querySelectorAll("table.sessions [data-open]").length'), 1);
+    assert.deepEqual(await b.evaluate('window.errors'), []);
+  } finally { boardResponse?.end(); held?.end(); await b.close(); await close(web); await close(server); }
+});