stack/packages/webui/tests/browser-edge.test.mjs

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', taskSetBy: '<img src=x onerror=alert(2)>', 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);
    // #1511: a hostile setter value is text, in the table and the inspector.
    assert.equal(await b.evaluate('document.querySelectorAll("img").length'), 0);
    assert.match(await b.evaluate('document.querySelector("#inspection").textContent'), /Task set by\s*<img src=x onerror=alert\(2\)> \(as claimed/);
    assert.match(await b.evaluate('document.querySelector("table.sessions td.task").textContent'), /set by <img src=x onerror=alert\(2\)>/);
    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/);
    // #1511: attribution never enables a reply: a setter with no registration at all still gets no form.
    const savedRegistration = index.sessions[0].registered;
    index.sessions[0].registered = null; index.sessions[0].taskSetBy = 'someone';
    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'), /Task set by\s*someone/);
    // R1-U1: null means not applicable (task not selected from a registration); it is never shown as "unknown",
    // and a previous setter never lingers after the transition.
    index.sessions[0].registered = savedRegistration; index.sessions[0].taskSetBy = null;
    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#refresh").disabled');
    assert.match(await b.evaluate('document.querySelector("#inspection").textContent'), /Task set by\s*not applicable \(task is not from a registration\)/);
    assert.equal(await b.evaluate('document.querySelector("#inspection").textContent.includes("someone")'), false);
    assert.doesNotMatch(await b.evaluate('document.querySelector("#inspection").textContent'), /Task set by\s*unknown/);
    assert.equal(await b.evaluate('document.querySelector("table.sessions td.task").textContent.includes("set by")'), false);
    // A selected legacy registration (record predates taskSetBy) reads "unknown", distinct from not applicable.
    index.sessions[0].taskSource = 'registration'; index.sessions[0].taskSetBy = 'unknown';
    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#refresh").disabled');
    assert.match(await b.evaluate('document.querySelector("#inspection").textContent'), /Task set by\s*unknown \(as claimed by the caller, not verified\)/);
    assert.equal(await b.evaluate('document.querySelector("#inspection").textContent.includes("not applicable")'), false);
    assert.match(await b.evaluate('document.querySelector("table.sessions td.task").textContent'), /set by unknown/);
    index.sessions[0].taskSource = 'first-user-message'; index.sessions[0].taskSetBy = null;
    await b.evaluate('document.querySelector("#refresh").click()'); await wait('!document.querySelector("#refresh").disabled');
    assert.equal(await b.evaluate('document.querySelector("#inspection").textContent.includes("set by unknown")'), false);
    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); }
});