ECC/tests/lib/control-pane-ui.test.js

/**
 * Tests for the browser script the local ECC2 control pane serves.
 */

const assert = require('assert');
const fs = require('fs');
const os = require('os');
const path = require('path');
const vm = require('vm');

const { buildControlPaneSnapshot } = require('../../scripts/lib/control-pane/state');
const { renderControlPaneHtml } = require('../../scripts/lib/control-pane/ui');

async function test(name, fn) {
  try {
    await fn();
    console.log(`  PASS ${name}`);
    return true;
  } catch (error) {
    console.log(`  FAIL ${name}`);
    console.log(`    Error: ${error.message}`);
    return false;
  }
}

function inlineScript(html) {
  const start = html.indexOf('<script>') + '<script>'.length;
  return html.slice(start, html.lastIndexOf('</script>'));
}

// The page's clock. The page shows times with toLocaleString, which follows
// the locale's calendar (a Thai locale counts Buddhist years), so a test
// compares against the same call on this instant.
const NOW = new Date(2026, 8, 25, 10, 30);

class PageDate extends Date {
  constructor(...args) {
    super(...(args.length > 0 ? args : [NOW.getTime()]));
  }
}

// Runs the page script against a stand-in for the few browser APIs it uses:
// elements looked up by selector, fetch, a fixed clock, and a setInterval
// whose callback the test fires itself. While `hold` is set, a fetch waits in
// `pending` until the test settles it, with the page's snapshot or another one.
// With `hold`, the first load is held too. Listeners are kept per element, so a
// test can press a button. Every request is recorded, and `page.script` holds
// the page's own functions, such as the runAction a Run button calls.
function openPage(snapshot, { hold = false } = {}) {
  const elements = new Map();
  const element = selector => {
    if (!elements.has(selector)) {
      elements.set(selector, {
        hidden: selector === '#app',
        textContent: '',
        innerHTML: '',
        value: '',
        dataset: {},
        listeners: {},
        addEventListener(type, listener) {
          this.listeners[type] = listener;
        }
      });
    }
    return elements.get(selector);
  };
  const page = { online: true, hold, pending: [], requests: [], refresh: null, element, now: NOW };
  class Clock extends PageDate {
    constructor(...args) {
      super(...(args.length > 0 ? args : [page.now.getTime()]));
    }
  }
  page.script = {
    document: { hidden: false, querySelector: element, querySelectorAll: () => [] },
    window: { location: { href: 'http://127.0.0.1:8765/' } },
    URL,
    Intl,
    Date: Clock,
    console,
    fetch: (url, options = {}) =>
      new Promise((resolve, reject) => {
        page.requests = [...page.requests, { url: String(url), options }];
        const reply = {
          succeed: (data = snapshot) => resolve({ ok: true, status: 200, statusText: 'OK', json: async () => data }),
          fail: () => reject(new TypeError('Failed to fetch'))
        };
        if (page.hold) page.pending = [...page.pending, reply];
        else if (page.online) reply.succeed();
        else reply.fail();
      }),
    setInterval: callback => {
      page.refresh = callback;
    }
  };
  vm.runInNewContext(inlineScript(renderControlPaneHtml()), page.script);
  return page;
}

const settle = () => new Promise(resolve => setImmediate(resolve));

async function isolatedSnapshot() {
  const root = fs.mkdtempSync(path.join(os.tmpdir(), 'ecc-control-pane-ui-'));
  try {
    // Explicit config and both database paths keep this UI test away from
    // user config, parent-directory config, and the default state store.
    return JSON.parse(JSON.stringify(await buildControlPaneSnapshot({
      config: {},
      dbPath: path.join(root, 'missing-ecc2.db'),
      stateDbPath: path.join(root, 'missing-state.db'),
      repoRoot: root,
      cwd: root,
      env: { HOME: root, USERPROFILE: root },
      query: ''
    })));
  } finally {
    fs.rmSync(root, { recursive: true, force: true });
  }
}

function displayedBoard(page) {
  const fields = {
    '#query': 'value',
    '#db-path': 'textContent',
    '#action-status': 'textContent',
    '#metrics': 'innerHTML',
    '#sessions': 'innerHTML',
    '#work-item-count': 'textContent',
    '#work-items': 'innerHTML',
    '#knowledge-count': 'textContent',
    '#knowledge': 'innerHTML',
    '#connector-count': 'textContent',
    '#connectors': 'innerHTML',
    '#actions': 'innerHTML'
  };
  return Object.fromEntries(Object.entries(fields).map(([selector, field]) => [selector, page.element(selector)[field]]));
}

async function runTests() {
  console.log('\n=== Testing control-pane UI ===\n');

  let passed = 0;
  let failed = 0;

  const snapshot = await isolatedSnapshot();

  if (
    await test('a failed live refresh is reported, and cleared by the next one that succeeds', async () => {
      const page = openPage(snapshot);
      await settle();
      assert.strictEqual(page.element('#app').hidden, true, 'the first load succeeds');

      page.online = false;
      page.refresh();
      await settle();
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'the failure is shown');
      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
      assert.ok(box.textContent.includes(NOW.toLocaleString()), 'the time of the data includes its date');
      assert.match(box.textContent, /Failed to fetch/);

      page.online = true;
      page.refresh();
      await settle();
      assert.strictEqual(page.element('#app').hidden, true, 'a successful refresh clears it');
    })
  )
    passed++;
  else failed++;

  if (
    await test('a refresh that fails after a newer load succeeded is not reported', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.refresh();
      page.hold = false;
      page.refresh();
      await settle();
      page.pending[0].fail();
      await settle();
      assert.strictEqual(page.element('#app').hidden, true, 'the newer data is not marked as stale');
    })
  )
    passed++;
  else failed++;

  if (
    await test('a failed refresh stays off the board while newer data is shown and another refresh runs', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.refresh();
      page.refresh();
      page.refresh();
      page.pending[1].succeed();
      await settle();
      page.pending[0].fail();
      await settle();
      assert.strictEqual(page.element('#app').hidden, true, 'the board shows data from a load that started after the failed one');
    })
  )
    passed++;
  else failed++;

  if (
    await test('a refresh that fails after an older one succeeded is reported', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.refresh();
      page.refresh();
      page.pending[0].succeed();
      await settle();
      page.pending[1].fail();
      await settle();
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'the latest refresh failed, so the board is not live');
      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
    })
  )
    passed++;
  else failed++;

  if (
    await test('an older refresh that succeeds after a newer one failed leaves the failure up', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.refresh();
      page.refresh();
      page.pending[1].fail();
      await settle();
      page.pending[0].succeed();
      await settle();
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'no load that started after the failed one has succeeded');
      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
    })
  )
    passed++;
  else failed++;

  if (
    await test('an older response that arrives after a newer one does not replace its data', async () => {
      const page = openPage(snapshot);
      await settle();
      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });

      page.hold = true;
      page.refresh();
      page.refresh();
      page.pending[1].succeed(answer('newer'));
      await settle();
      page.pending[0].succeed(answer('older'));
      await settle();
      assert.strictEqual(page.element('#query').value, 'newer');
    })
  )
    passed++;
  else failed++;

  if (
    await test('the first snapshot still shows when a live refresh fails before it arrives', async () => {
      const page = openPage(snapshot, { hold: true });
      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });

      page.refresh();
      page.pending[1].fail();
      await settle();
      page.pending[0].succeed(answer('first'));
      await settle();
      assert.strictEqual(page.element('#query').value, 'first', 'the pane is not left empty');
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'the newer failure stays up');
      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
    })
  )
    passed++;
  else failed++;

  if (
    await test('a manual refresh that fails after a newer load succeeded is not shown', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.element('#refresh').listeners.click();
      page.refresh();
      page.pending[1].succeed();
      await settle();
      page.pending[0].fail();
      await settle();
      assert.strictEqual(page.element('#app').hidden, true, 'the newer success decides the board');
    })
  )
    passed++;
  else failed++;

  if (
    await test('an older load that succeeds after a newer manual refresh failed leaves the failure up', async () => {
      const page = openPage(snapshot);
      await settle();

      page.hold = true;
      page.refresh();
      page.element('#refresh').listeners.click();
      page.pending[1].fail();
      await settle();
      page.pending[0].succeed();
      await settle();
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'the newer failure decides the board');
      assert.match(box.textContent, /Failed to fetch/);
    })
  )
    passed++;
  else failed++;

  if (
    await test('a snapshot that cannot be shown fails its load, and older data can still take the board', async () => {
      const page = openPage(snapshot);
      await settle();
      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
      // The session table cannot list harnesses stored as an object.
      const unshowable = {
        ...answer('newer'),
        sessions: [{ id: 'session-1', state: 'running', detectedHarnesses: { claude: true } }]
      };

      page.hold = true;
      page.refresh();
      page.refresh();
      page.pending[1].succeed(unshowable);
      await settle();
      const box = page.element('#app');
      assert.strictEqual(box.hidden, false, 'the newer load failed');
      assert.match(box.textContent, /Live refresh failed\. The data below is from /);
      page.pending[0].succeed(answer('older'));
      await settle();
      assert.strictEqual(page.element('#query').value, 'older', 'the older snapshot is shown');
      assert.strictEqual(box.hidden, false, 'the newer failure stays up');
    })
  )
    passed++;
  else failed++;

  if (
    await test('Run acts on the query whose results are on the board', async () => {
      const page = openPage(snapshot);
      await settle();
      const answer = query => ({ ...snapshot, knowledge: { ...snapshot.knowledge, query } });
      const search = query => {
        page.element('#query').value = query;
        page.element('#query-form').listeners.submit({ preventDefault() {} });
      };

      page.hold = true;
      search('older');
      search('newer');
      page.pending[1].fail();
      await settle();
      page.pending[0].succeed(answer('older'));
      await settle();
      page.hold = false;
      await page.script.runAction('recall-knowledge');
      const run = page.requests.find(request => request.options.method === 'POST');
      assert.strictEqual(run.url, '/api/actions/recall-knowledge');
      assert.deepStrictEqual(JSON.parse(run.options.body), { query: 'older' }, 'the recall shown on the board');
    })
  )
    passed++;
  else failed++;

  for (const [brokenSection, allowActions] of [
    ['connectors', true], ['connectors', false], ['actions', true], ['actions', false]
  ]) {
    if (
      await test(`a late ${brokenSection} failure preserves the board with actions ${allowActions ? 'enabled' : 'disabled'}`, async () => {
        const original = {
          ...snapshot,
          knowledge: { ...snapshot.knowledge, query: 'prior', entityCount: 1,
            results: [{ entity: { name: 'prior result', entityType: 'note' }, score: 1 }] },
          execution: { allowActions },
          workItems: { ...snapshot.workItems, items: [{ id: 'prior-item', title: 'prior work' }] }
        };
        const page = openPage(original, { hold: true });
        // Finish the initial request, then establish the matching request query.
        page.pending[0].succeed(original);
        await settle();
        page.element('#query').value = 'prior';
        page.element('#query-form').listeners.submit({ preventDefault() {} });
        page.pending[1].succeed(original);
        await settle();
        const before = displayedBoard(page);
        page.now = new Date(NOW.getTime() + 60_000);
        page.refresh();
        const invalid = {
          ...original,
          dbPath: 'new-database', database: { exists: true },
          execution: { allowActions: !allowActions },
          summary: { ...snapshot.summary, totalSessions: 99 },
          sessions: [{ id: 'new-session', state: 'running' }],
          workItems: { ...snapshot.workItems, items: [{ id: 'new-item', title: 'new work' }] },
          knowledge: { ...original.knowledge, query: 'new', entityCount: 2,
            results: [{ entity: { name: 'new result', entityType: 'note' }, score: 2 }] },
          connectors: [{ name: 'new connector', kind: 'test' }],
          actions: [{ id: 'new-action', label: 'new action', executable: true }],
          [brokenSection]: brokenSection === 'actions' ? {} : [null]
        };
        page.pending[2].succeed(invalid);
        await settle();
        assert.deepStrictEqual(displayedBoard(page), before, 'a failed snapshot changes no displayed section');
        const error = page.element('#app');
        assert.strictEqual(error.hidden, false);
        assert.ok(error.textContent.includes(NOW.toLocaleString()), 'the failure retains the prior successful snapshot time');
        assert.ok(!error.textContent.includes(page.now.toLocaleString()), 'the failed snapshot has no successful timestamp');

        // Failed refreshes neither enable nor disable the prior work-item controls.
        page.script.window.eccMoveItem('prior-item', 'ready');
        const move = page.requests.find(request => request.url === '/api/work-items/prior-item/move');
        assert.strictEqual(Boolean(move), allowActions, 'work-item permission still matches the prior board');
        const run = page.script.runAction('recall-knowledge');
        const request = page.requests.find(request => request.url === '/api/actions/recall-knowledge');
        assert.deepStrictEqual(JSON.parse(request.options.body), { query: 'prior' });
        // Fail both fake action responses; no subsequent snapshot is requested.
        page.pending.slice(3).forEach(reply => reply.fail());
        await run;
        await settle();
      })
    ) passed++;
    else failed++;
  }

  if (
    await test('an older empty-query response stays empty while a newer query is pending', async () => {
      const page = openPage(snapshot, { hold: true });
      page.element('#query').value = 'new request';
      page.element('#query-form').listeners.submit({ preventDefault() {} });
      page.pending[0].succeed(snapshot);
      await settle();
      assert.strictEqual(page.element('#query').value, '', 'the completed empty query is not replaced by the pending query');
      const run = page.script.runAction('recall-knowledge');
      const request = page.requests.find(item => item.options.method === 'POST');
      assert.deepStrictEqual(JSON.parse(request.options.body), { query: '' });
      page.pending[1].fail();
      page.pending[2].fail();
      await run;
      await settle();
    })
  ) passed++;
  else failed++;

  console.log(`\nResults: Passed: ${passed}, Failed: ${failed}`);
  process.exit(failed > 0 ? 1 : 0);
}

runTests();