@bongos/core 1.25.16 → 1.25.18

package/src/module-loader/loader.js

@@ -221,12 +221,12 @@ function mountModuleRoutes(router, { isEnabled } = {}, opts) {
 //
 // ONE SEAM, ONE FILE PER PAGE (task 1004301). `file` names which page's widget is being
 // asked for: hall-widget.js for the hall index (the default, and the only caller until
-// then), task-widget.js for a task's own page. Same declaration (uiSections), same
+// then), task-widget.js for a task's own page, settings-widget.js for the options menu (1004571). Same declaration (uiSections), same
 // enabled-only asset mount, same "a disabled module simply is not there" — so a module
 // adds a line to the task page without the page's own code ever naming it. The name is
 // matched against PAGE_WIDGET_FILES rather than trusted, so no caller can turn this into
 // a way to serve an arbitrary file.
-const PAGE_WIDGET_FILES = Object.freeze(['hall-widget.js', 'task-widget.js']);
+const PAGE_WIDGET_FILES = Object.freeze(['hall-widget.js', 'task-widget.js', 'settings-widget.js']);
 function hallWidgetScripts({ isEnabled, file = 'hall-widget.js' } = {}, opts) {
   if (!PAGE_WIDGET_FILES.includes(file)) return [];
   const out = [];

package/tests/app_host.mjs

@@ -0,0 +1,413 @@
+// tests/app_host.mjs — where the project's app runs, in the hall's options menu (task 1004571).
+//
+// The whole chain, DB-free and with no Render call anywhere:
+//   1. the provisioning port (projectAppStatus) — the row, by both halves of the projection,
+//      read through app-status.js's own shape;
+//   2. the hub route (POST /sso/app-status) — only an authenticated project, only its own row;
+//   3. the core asker (readAppStatusFromHub) — the project's credentials, never throws;
+//   4. the hall route (GET /app-host) — each state, owner vs everyone else, new fields kept;
+//   5. the module switch — the panel's script is injected only while the module is on, and
+//      loads before settings.js the way settings.js loads;
+//   6. the panel itself — what a builder reads in each state.
+//
+// Run:  node --test tests/app_host.mjs
+
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import http from 'node:http';
+import fs from 'node:fs';
+import path from 'node:path';
+import vm from 'node:vm';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const express = require('express');
+const { attachFail } = require('../src/bongos/middleware/error-envelope.js');
+
+// The doorway with a quiet logger and a stand-in sign-in gate, BEFORE any route file loads.
+const apiPath = require.resolve('../src/module-api.js');
+const realApi = require(apiPath);
+let viewer = { id: 7 };
+const fakeApi = {
+  ...realApi,
+  logger: () => ({ error() {}, warn() {}, info() {} }),
+  requireBuilder: (req, _res, next) => { req.builder = viewer; next(); },
+};
+require.cache[apiPath].exports = fakeApi;
+
+async function serve(router) {
+  const app = express();
+  app.use(express.json());
+  app.use(attachFail);
+  app.use('/api/bongos', router);
+  const server = await new Promise((r) => { const s = app.listen(0, '127.0.0.1', () => r(s)); });
+  const base = `http://127.0.0.1:${server.address().port}/api/bongos`;
+  const call = (method, route, body) => new Promise((resolve, reject) => {
+    const payload = body ? JSON.stringify(body) : '';
+    const req = http.request(`${base}${route}`, {
+      method, headers: { 'content-type': 'application/json', 'content-length': Buffer.byteLength(payload) },
+    }, (res) => {
+      let raw = '';
+      res.on('data', (c) => { raw += c; });
+      res.on('end', () => resolve({ status: res.statusCode, headers: res.headers, body: raw ? JSON.parse(raw) : null }));
+    });
+    req.on('error', reject);
+    req.end(payload);
+  });
+  return { call, close: () => server.close() };
+}
+
+// ── 1. the provisioning port ─────────────────────────────────────────────────
+
+const { projectAppStatus } = require('../modules/provisioning/seams.js');
+
+function rowDb(row) {
+  const seen = [];
+  return { seen, async query(sql, params) { seen.push({ sql: String(sql), params }); return { rows: row ? [row] : [] }; } };
+}
+
+test('port: the project is named by slug AND host, the host lowercased', async () => {
+  const db = rowDb(null);
+  assert.equal(await projectAppStatus(db, { slug: 'mercury', host: 'Mercury.Test' }), null);
+  assert.deepEqual(db.seen[0].params, ['mercury', 'mercury.test']);
+  assert.match(db.seen[0].sql, /i\.slug = \$1 AND lower\(i\.domain\) = \$2/);
+});
+
+test('port: a half-named project is no answer, and no query runs', async () => {
+  const db = rowDb({ app_host: null, waiting: false });
+  assert.equal(await projectAppStatus(db, { slug: 'mercury' }), null);
+  assert.equal(await projectAppStatus(db, { host: 'mercury.test' }), null);
+  assert.equal(db.seen.length, 0);
+});
+
+test('port: no platform yet is { app: null }; Render reads through app-status.js', async () => {
+  assert.deepEqual(await projectAppStatus(rowDb({ app_host: null, waiting: false }), { slug: 'm', host: 'm.test' }), { app: null, sandbox: null });
+  const live = await projectAppStatus(rowDb({
+    app_host: { platform: 'render', state: 'live', serviceUrl: 'https://mercury-app.onrender.com', serviceId: 'srv-abcdefgh12' },
+    waiting: false,
+  }), { slug: 'm', host: 'm.test' });
+  assert.equal(live.app.stage, 'live');
+  assert.equal(live.app.url, 'https://mercury-app.onrender.com');
+  assert.equal(live.app.links.service, 'https://dashboard.render.com/web/srv-abcdefgh12');
+  const failed = await projectAppStatus(rowDb({ app_host: { platform: 'render', state: 'failed', error: 'the build command failed' }, waiting: false }), { slug: 'm', host: 'm.test' });
+  assert.equal(failed.app.state, 'failed');
+  assert.equal(failed.app.error, 'The build command failed.');
+  const waiting = await projectAppStatus(rowDb({ app_host: { platform: 'render', state: 'requested' }, waiting: true }), { slug: 'm', host: 'm.test' });
+  assert.equal(waiting.app.waiting, true);
+  assert.equal(waiting.app.stage, 'creating');
+});
+
+// ── 2. the hub route ─────────────────────────────────────────────────────────
+
+const pi = require('../modules/platform-identity/platform-identity.js');
+const SECRET = 'project-secret';
+const CLIENTS = {
+  mercury: { client_id: 'mercury', secret_hash: pi.sha256hex(SECRET), status: 'active', origin: 'https://Mercury.test' },
+  frozen: { client_id: 'frozen', secret_hash: pi.sha256hex(SECRET), status: 'suspended', origin: 'https://frozen.test' },
+  shell: { client_id: 'shell', secret_hash: '', status: 'active', origin: 'https://shell.test' },
+};
+const clientDb = { async query(_sql, params) { return { rows: CLIENTS[params[0]] ? [CLIENTS[params[0]]] : [] }; } };
+const buildHubRoute = require('../modules/platform-identity/routes/sso-app-status.js');
+
+test('hub: a wrong secret, a suspended client and a catalog-only row are all refused, and the port is never asked', async () => {
+  const asked = [];
+  const hub = await serve(buildHubRoute({ db: clientDb, resolvePort: () => async (t) => { asked.push(t); return { app: null }; } }));
+  try {
+    for (const body of [
+      { client_id: 'mercury', client_secret: 'nope' },
+      { client_id: 'frozen', client_secret: SECRET },
+      { client_id: 'shell', client_secret: '' },
+      { client_id: 'nobody', client_secret: SECRET },
+    ]) {
+      const r = await hub.call('POST', '/sso/app-status', body);
+      assert.equal(r.status, 401, JSON.stringify(body));
+    }
+    assert.equal(asked.length, 0);
+  } finally { hub.close(); }
+});
+
+test('hub: the project reads ITS OWN row — slug from the client, host from its registered origin', async () => {
+  const asked = [];
+  const app = { platform: 'render', state: 'live', stage: 'live', url: 'https://m.onrender.com', sandbox: { url: 'https://m-sandbox.onrender.com' } };
+  const hub = await serve(buildHubRoute({ db: clientDb, resolvePort: (n) => (n === 'provisioning.projectAppStatus' ? async (t) => { asked.push(t); return { app }; } : null) }));
+  try {
+    const r = await hub.call('POST', '/sso/app-status', { client_id: 'mercury', client_secret: SECRET });
+    assert.equal(r.status, 200);
+    assert.deepEqual(asked, [{ slug: 'mercury', host: 'mercury.test' }]);
+    assert.deepEqual(r.body, { ok: true, known: true, app, sandbox: null }, 'the shape passes through, new fields and all');
+    const extra = await hub.call('POST', '/sso/app-status', { client_id: 'mercury', client_secret: SECRET, slug: 'venus' });
+    assert.equal(extra.status, 400, 'nothing in the body can name another project');
+  } finally { hub.close(); }
+});
+
+test('hub: no provisioning, or no row, is known:false', async () => {
+  for (const resolvePort of [() => null, () => async () => null]) {
+    const hub = await serve(buildHubRoute({ db: clientDb, resolvePort }));
+    try {
+      const r = await hub.call('POST', '/sso/app-status', { client_id: 'mercury', client_secret: SECRET });
+      assert.deepEqual(r.body, { ok: true, known: false, app: null, sandbox: null });
+    } finally { hub.close(); }
+  }
+});
+
+// ── 3. the core asker ────────────────────────────────────────────────────────
+
+const pin = (rel, exports) => {
+  const p = require.resolve(rel);
+  require.cache[p] = { id: p, filename: p, loaded: true, exports };
+};
+const IDP = { origin: 'https://hub.test', clientId: 'mercury', clientSecret: SECRET };
+function loadAsker(idp) {
+  pin('../src/bongos/auth-config.js', { ...require('../src/bongos/auth-config.js'), loadIdpConfig: () => idp });
+  delete require.cache[require.resolve('../src/bongos/auth-admission.js')];
+  return require('../src/bongos/auth-admission.js').readAppStatusFromHub;
+}
+async function withFetch(impl, fn) {
+  const real = globalThis.fetch;
+  const sent = [];
+  globalThis.fetch = async (url, init) => { sent.push({ url, init }); return impl(url, init); };
+  try { await fn(sent); } finally { globalThis.fetch = real; }
+}
+const MANAGE = { manage_url: 'https://hub.test/projects?view=manage&project=mercury', hub_host: 'hub.test' };
+
+test('asker: no hub answers hub:false and sends nothing', async () => {
+  const ask = loadAsker(null);
+  await withFetch(async () => ({ ok: true }), async (sent) => {
+    assert.deepEqual(await ask(), { hub: false });
+    assert.equal(sent.length, 0);
+  });
+});
+
+test('asker: it sends only this project\'s credentials, bounded, and returns the hub\'s answer with the manage page', async () => {
+  const ask = loadAsker(IDP);
+  const app = { platform: 'render', state: 'creating', stage: 'creating' };
+  await withFetch(async () => ({ ok: true, json: async () => ({ ok: true, known: true, app }) }), async (sent) => {
+    assert.deepEqual(await ask(), { hub: true, reachable: true, known: true, app, sandbox: null, manage: MANAGE });
+    assert.equal(sent[0].url, 'https://hub.test/api/bongos/sso/app-status');
+    assert.deepEqual(JSON.parse(sent[0].init.body), { client_id: 'mercury', client_secret: SECRET });
+    assert.ok(sent[0].init.signal);
+  });
+});
+
+test('asker: a hub that is down or older never throws — reachable:false', async () => {
+  const ask = loadAsker(IDP);
+  await withFetch(async () => { throw new Error('ECONNREFUSED'); }, async () => {
+    assert.deepEqual(await ask(), { hub: true, reachable: false, manage: MANAGE });
+  });
+  await withFetch(async () => ({ ok: false, status: 404, json: async () => ({}) }), async () => {
+    assert.deepEqual(await ask(), { hub: true, reachable: false, manage: MANAGE });
+  });
+});
+
+// ── 4. the hall route ────────────────────────────────────────────────────────
+
+const buildHall = require('../modules/app-host/routes/app-host.js');
+const { viewFor } = buildHall;
+const RENDER_LIVE = {
+  platform: 'render', state: 'live', stage: 'live', url: 'https://m.onrender.com',
+  links: { service: 'https://dashboard.render.com/web/srv-abcdefgh12' }, workspace: 'tea-x', retry: null,
+  sandbox: { url: 'https://m-sandbox.onrender.com', stage: 'live' },
+};
+
+test('hall: each state, as the owner and as everyone else', () => {
+  const read = (app, extra = {}) => ({ hub: true, reachable: true, known: true, app, manage: MANAGE, ...extra });
+  // no platform yet
+  let v = viewFor(read(null), { owner: true });
+  assert.equal(v.app, null);
+  assert.equal(v.connect_url, `${MANAGE.manage_url}#mAppCard`);
+  v = viewFor(read(null), { owner: false });
+  assert.equal(v.connect_url, null, 'no action a non-owner cannot complete');
+  assert.equal(v.owner, false);
+  // live, owner: links kept; non-owner: owner-only fields gone, the rest (and new fields) kept
+  v = viewFor(read(RENDER_LIVE), { owner: true });
+  assert.ok(v.app.links);
+  assert.equal('retry' in v.app, false);
+  v = viewFor(read(RENDER_LIVE), { owner: false });
+  for (const k of buildHall.OWNER_ONLY) assert.equal(k in v.app, false, k);
+  assert.equal(v.app.url, RENDER_LIVE.url);
+  assert.deepEqual(v.app.sandbox, RENDER_LIVE.sandbox, 'a field the hub adds later arrives untouched');
+  // failed: the sentence reaches everyone; only the owner gets where to retry
+  const failed = { platform: 'render', state: 'failed', stage: null, error: 'The build command failed.', retry: { owner_id: 'tea-x' } };
+  assert.equal(viewFor(read(failed), { owner: false }).app.error, 'The build command failed.');
+  assert.equal(viewFor(read(failed), { owner: false }).connect_url, null);
+  assert.ok(viewFor(read(failed), { owner: true }).connect_url);
+  // not reachable, not known, no hub
+  assert.equal(viewFor({ hub: true, reachable: false, manage: MANAGE }, { owner: true }).reachable, false);
+  assert.equal(viewFor(read(null, { known: false }), { owner: true }).known, false);
+  assert.deepEqual(viewFor({ hub: false }, { owner: true }), { hub: false, reachable: false, known: false, app: null, sandbox: null, owner: false, connect_url: null, hub_host: null });
+});
+
+test('hall: GET /app-host decides owner on the server, never from the request', async () => {
+  const read = async () => ({ hub: true, reachable: true, known: true, app: RENDER_LIVE, manage: MANAGE });
+  let ownerIds = new Set([1]);
+  const hall = await serve(buildHall({ readHub: read, isOwner: async (req) => ownerIds.has(req.builder.id) }));
+  try {
+    viewer = { id: 1 };
+    let r = await hall.call('GET', '/app-host?owner=1');
+    assert.equal(r.status, 200);
+    assert.equal(r.body.owner, true);
+    assert.ok(r.body.app.links);
+    assert.equal(r.headers['cache-control'], 'no-store');
+    viewer = { id: 2 };
+    r = await hall.call('GET', '/app-host?owner=1');
+    assert.equal(r.body.owner, false);
+    assert.equal(r.body.connect_url, null);
+    assert.equal(r.body.app.links, undefined);
+  } finally { hall.close(); viewer = { id: 7 }; }
+});
+
+test('hall: the owner atom is core.pin.move, and an unreadable authority is no', async () => {
+  // The default isOwner, through the government port.
+  const realResolve = fakeApi.resolveOptional;
+  const read = async () => ({ hub: true, reachable: true, known: true, app: null, manage: MANAGE });
+  try {
+    for (const [gov, expected] of [
+      [{ resolveBuilderPermissions: async () => ['core.pin.move'] }, true],
+      [{ resolveBuilderPermissions: async () => ['task.claim'] }, false],
+      [{ resolveBuilderPermissions: async () => { throw new Error('db down'); } }, false],
+      [null, false],
+    ]) {
+      fakeApi.resolveOptional = (n) => (n === 'government' ? gov : null);
+      const hall = await serve(buildHall({ readHub: read }));
+      try { assert.equal((await hall.call('GET', '/app-host')).body.owner, expected); } finally { hall.close(); }
+    }
+  } finally { fakeApi.resolveOptional = realResolve; }
+});
+
+// ── 5. the module switch ─────────────────────────────────────────────────────
+
+const { hallWidgetScripts } = require('../src/module-loader/loader.js');
+const { injectModuleHallWidgets } = require('../src/bongos/serve-internal.js');
+
+test('module: on, its panel script is listed for the options menu; off, it is not', () => {
+  const on = hallWidgetScripts({ isEnabled: () => true, file: 'settings-widget.js' });
+  assert.ok(on.some((s) => s.key === 'app-host' && s.src === '/modules/app-host/public/settings-widget.js'));
+  const off = hallWidgetScripts({ isEnabled: (k) => k !== 'app-host', file: 'settings-widget.js' });
+  assert.equal(off.some((s) => s.key === 'app-host'), false);
+  const manifest = JSON.parse(fs.readFileSync(path.join(ROOT, 'modules/app-host/module.json'), 'utf8'));
+  assert.equal(manifest.default, true);
+  assert.deepEqual(manifest.contributes.routes, ['app-host']);
+});
+
+test('module: the panel script lands before settings.js and loads the way it does (not deferred)', () => {
+  const html = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/settings.html'), 'utf8');
+  const out = injectModuleHallWidgets(html, [{ key: 'app-host', src: '/modules/app-host/public/settings-widget.js' }], 'settings');
+  const at = out.indexOf('<script src="/modules/app-host/public/settings-widget.js"></script>');
+  assert.ok(at > 0, 'injected as a plain script');
+  assert.ok(at < out.indexOf('<script src="/builders/settings.js'));
+  assert.ok(at > out.indexOf('<script src="/builders/dom-utils.js'), 'after the seam exists');
+  assert.equal(injectModuleHallWidgets(html, [], 'settings'), html, 'off: the page is unchanged');
+  // The hall index keeps its deferred widgets.
+  const idx = fs.readFileSync(path.join(ROOT, 'modules/hall-ui/public/index.html'), 'utf8');
+  assert.match(injectModuleHallWidgets(idx, [{ key: 'x', src: '/modules/x/public/hall-widget.js' }]), /hall-widget\.js" defer><\/script>/);
+});
+
+// ── 6. the panel ─────────────────────────────────────────────────────────────
+
+function loadPanel() {
+  const panels = [];
+  // The hall's shared escaper, as window.OTB carries it (dom-utils.js).
+  const { escapeHtml } = require('../src/html-escape.js');
+  const window = { OTB: { escapeHtml, contributeSettingsPanel: (p) => panels.push(p) } };
+  vm.runInNewContext(fs.readFileSync(path.join(ROOT, 'modules/app-host/public/settings-widget.js'), 'utf8'), { window });
+  return { panels, render: window.OTBAppHost.render };
+}
+
+test('panel: registers one options-menu panel', () => {
+  const { panels } = loadPanel();
+  assert.equal(panels.length, 1);
+  assert.equal(panels[0].id, 'app-host');
+  assert.equal(panels[0].title, 'Where the app runs');
+});
+
+test('panel: what a builder reads in each state', () => {
+  const { render } = loadPanel();
+  const base = { hub: true, reachable: true, known: true, hub_host: 'hub.test' };
+  const owner = { ...base, owner: true, connect_url: `${MANAGE.manage_url}#mAppCard` };
+  const member = { ...base, owner: false, connect_url: null };
+
+  let h = render({ ...owner, app: null });
+  assert.match(h, /No platform yet/);
+  assert.match(h, /href="https:\/\/hub\.test\/projects\?view=manage&amp;project=mercury#mAppCard">Connect Render</);
+  h = render({ ...member, app: null });
+  assert.match(h, /No platform yet/);
+  assert.doesNotMatch(h, /<a /, 'no action a non-owner cannot complete');
+  assert.match(h, /owner can connect Render/);
+
+  assert.match(render({ ...member, app: { platform: 'render', state: 'creating', stage: 'creating' } }), /creating.*Step 1 of 3|Step 1 of 3[\s\S]*creating/);
+  assert.match(render({ ...member, app: { platform: 'render', state: 'deploying', stage: 'building' } }), /Step 2 of 3/);
+  assert.match(render({ ...member, app: { platform: 'render', state: 'deploying', stage: 'quiet', quiet: true } }), /hasn’t answered/);
+  h = render({ ...member, app: { platform: 'render', state: 'live', stage: 'live', url: 'https://m.onrender.com' } });
+  assert.match(h, /status-pill--ok">live/);
+  assert.match(h, /href="https:\/\/m\.onrender\.com"/);
+  assert.doesNotMatch(render({ ...member, app: { platform: 'render', state: 'live', stage: 'live', url: 'https://evil.example' } }), /evil/, 'only an onrender.com address is linked');
+
+  h = render({ ...owner, app: { platform: 'render', state: 'failed', stage: null, error: 'The build command <b>failed</b>.' } });
+  assert.match(h, /status-pill--danger">failed/);
+  assert.match(h, /The build command &lt;b&gt;failed&lt;\/b&gt;\./, 'the setup\'s own words, escaped');
+  assert.match(h, />Retry on the project page</);
+  h = render({ ...member, app: { platform: 'render', state: 'failed', stage: null, error: 'The build command failed.' } });
+  assert.match(h, /owner can retry it from this project's page on hub\.test/);
+  assert.doesNotMatch(h, /<a /);
+
+  assert.match(render({ ...owner, reachable: false }), /Check again/);
+  assert.match(render({ ...owner, known: false }), /isn’t set up through hub\.test/);
+  assert.match(render({ hub: false }), /runs on its own server/);
+});
+
+// ── 7. the sandbox beside the app (task 1005289's shape, carried as is) ──────────
+
+test('sandbox: the port reads it from the same row, only for a Render app', async () => {
+  const row = {
+    status: 'active', waiting: false,
+    app_host: {
+      platform: 'render', state: 'live', serviceUrl: 'https://m.onrender.com', serviceId: 'srv-abcdefgh12',
+      sandbox: { state: 'live', serviceId: 'srv-sandbox1234', serviceUrl: 'https://m-sandbox.onrender.com' },
+    },
+  };
+  const got = await projectAppStatus(rowDb(row), { slug: 'm', host: 'm.test' });
+  assert.equal(got.sandbox.stage, 'live');
+  assert.equal(got.sandbox.url, 'https://m-sandbox.onrender.com');
+  assert.equal((await projectAppStatus(rowDb({ app_host: null, status: 'active', waiting: false }), { slug: 'm', host: 'm.test' })).sandbox, null);
+});
+
+test('sandbox: the hub and the asker pass it through; an older hub sends none', async () => {
+  const sandbox = { state: 'live', stage: 'live', url: 'https://m-sandbox.onrender.com' };
+  const hub = await serve(buildHubRoute({ db: clientDb, resolvePort: () => async () => ({ app: { platform: 'render', stage: 'live' }, sandbox }) }));
+  try {
+    const r = await hub.call('POST', '/sso/app-status', { client_id: 'mercury', client_secret: SECRET });
+    assert.deepEqual(r.body.sandbox, sandbox);
+  } finally { hub.close(); }
+  const ask = loadAsker(IDP);
+  await withFetch(async () => ({ ok: true, json: async () => ({ ok: true, known: true, app: null }) }), async () => {
+    assert.equal((await ask()).sandbox, null);
+  });
+});
+
+test('sandbox: everyone sees it, only the owner gets its links, and "none" is not drawn', () => {
+  const app = { platform: 'render', state: 'live', stage: 'live' };
+  const sandbox = { state: 'live', stage: 'live', url: 'https://m-sandbox.onrender.com', links: { service: 'https://dashboard.render.com/web/srv-sandbox1234' }, can_add: false, plan: 'free' };
+  const read = (sb) => ({ hub: true, reachable: true, known: true, app, sandbox: sb, manage: MANAGE });
+  assert.ok(viewFor(read(sandbox), { owner: true }).sandbox.links);
+  const other = viewFor(read(sandbox), { owner: false }).sandbox;
+  assert.equal(other.links, undefined);
+  assert.equal(other.can_add, undefined);
+  assert.equal(other.url, sandbox.url);
+  assert.equal(other.plan, 'free', 'other fields pass through');
+  assert.equal(viewFor(read({ state: 'none', message: 'This project has no sandbox yet.', can_add: true }), { owner: true }).sandbox, null);
+});
+
+test('sandbox: the panel draws a second row with its own stage and address', () => {
+  const { render } = loadPanel();
+  const d = { hub: true, reachable: true, known: true, hub_host: 'hub.test', owner: false, connect_url: null,
+    app: { platform: 'render', state: 'live', stage: 'live', url: 'https://m.onrender.com' } };
+  let h = render({ ...d, sandbox: { state: 'live', stage: 'live', url: 'https://m-sandbox.onrender.com' } });
+  assert.match(h, /Sandbox[\s\S]*href="https:\/\/m-sandbox\.onrender\.com"/);
+  h = render({ ...d, sandbox: { state: 'requested', stage: 'creating', message: 'Your sandbox is set up right after your app.' } });
+  assert.match(h, /Sandbox[\s\S]*set up right after your app[\s\S]*creating/);
+  h = render({ ...d, sandbox: { state: 'failed', stage: null, error: 'The free plan is full.' } });
+  assert.match(h, /Setting up the sandbox stopped\. The free plan is full\./);
+  assert.doesNotMatch(render({ ...d, sandbox: null }), /Sandbox/);
+});