Restore Vars spacing and name the Business file card in Settings

packages/webui/src/public/bus.js

@@ -709,7 +709,7 @@
       : '<p class="muted">Authority comes from the system config with the business file. This Console could not read the system config, so it shows none.</p>';
     const refused = instances.filter(i => i.refused).map(i => `<li>${txt(i.instance)}: ${txt(i.refused)}</li>`).join('');
     const credRows = creds.map(c => `<tr><td>${txt(c.service)}</td><td>${txt(c.account) || '<span class="muted">not named in the business file</span>'}</td><td>${txt(c.role)}</td><td>${txt(c.dateKind === 'expires' ? 'expires' : 'rotate by')} <time datetime="${esc(c.date)}">${txt(c.date)}</time></td><td>${badge(c.state, CRED[c.state] || 'muted')}</td></tr>`).join('');
-    return settingsShell('business', `<section class="panel" aria-labelledby="bz-about"><h2 id="bz-about">Business</h2><dl class="kv"><dt>Human</dt><dd>${txt(b.human) || none}</dd><dt>Arbiters</dt><dd>${arbiterRefs(b.arbiters)}</dd><dt>Projects</dt><dd>${names(b.projects)}</dd><dt>Launcher</dt><dd>${txt(launch.by) || none}</dd><dt>May launch</dt><dd>${names(launch.instances)}</dd><dt>At most</dt><dd>${Object.entries(launch.limits?.models || {}).flatMap(([p, ms]) => Object.entries(ms).map(([m, c]) => `${txt(c)} ${txt(p)} / ${txt(m)}`)).join(', ') || none}</dd></dl>
+    return settingsShell('business', `<section class="panel" aria-labelledby="bz-about"><h2 id="bz-about">Business file</h2><dl class="kv"><dt>Human</dt><dd>${txt(b.human) || none}</dd><dt>Arbiters</dt><dd>${arbiterRefs(b.arbiters)}</dd><dt>Projects</dt><dd>${names(b.projects)}</dd><dt>Launcher</dt><dd>${txt(launch.by) || none}</dd><dt>May launch</dt><dd>${names(launch.instances)}</dd><dt>At most</dt><dd>${Object.entries(launch.limits?.models || {}).flatMap(([p, ms]) => Object.entries(ms).map(([m, c]) => `${txt(c)} ${txt(p)} / ${txt(m)}`)).join(', ') || none}</dd></dl>
       <h3>Vars</h3>${kvRows(b.vars, 'No vars Console shows are set.')}</section>
       <section aria-labelledby="bz-roles"><h2 id="bz-roles">Role instances <span class="count">${instances.length}</span></h2>${instances.length ? `<div class="table-wrap" tabindex="0" role="region" aria-label="Role instances, scroll for all columns"><table class="s1-table s1-roles"><thead><tr>${['Instance', 'Definition', 'Holder', 'Harness'].map(h => `<th scope="col">${h}</th>`).join('')}</tr></thead><tbody>${roleRows}</tbody></table></div>` : empty('This business has no role instances.', 'An instance shows here when the business file names one under roles.')}</section>
       ${instances.length ? `<section aria-labelledby="bz-auth"><h2 id="bz-auth">Authority</h2><p class="small muted">Within the role, cross-role (needs the other role), or gated (needs the human), as the business package classifies each action.</p>${matrix}${refused ? `<ul class="s1-plain">${refused}</ul>` : ''}</section>` : ''}

packages/webui/src/public/shell.css

@@ -240,6 +240,7 @@ button:disabled,[aria-disabled=true]{cursor:not-allowed}
 .settings-helper{font-size:14px;color:var(--muted);margin:0 0 16px}
 .settings-content .panel{margin:0 0 16px;padding:16px}
 .settings-content .panel h3{font-size:16px;margin:0;color:var(--strong)}
+.settings-content.settings-business .panel h3{margin:14px 0 6px}
 .settings-content .panel>p{margin:4px 0 12px;color:var(--muted);font-size:14px}
 .settings-content input:not([type=radio]):not([type=checkbox]),.settings-content select,.settings-content textarea{min-height:44px;max-width:100%;border:1px solid var(--border);border-radius:var(--r);background:var(--canvas);color:var(--text);font:inherit;padding:8px 12px}
 .settings-content input:disabled,.settings-content select:disabled,.settings-content textarea:disabled{background:var(--raised);border-color:var(--line);color:var(--muted)}

packages/webui/tests/s16-business-settings-browser.test.mjs

@@ -28,6 +28,8 @@ test('legacy Business bookmark replaces its history entry and retains its data',
   assert.deepEqual(await b.evaluate('[...document.querySelectorAll("[aria-labelledby=bz-about] dt")].map(e=>[e.textContent,e.nextElementSibling.textContent])'),[['Human','jason'],['Arbiters','pm (delivery)'],['Projects','stack'],['Launcher','pm'],['May launch','pm'],['At most','1 fixture / opus'],['region','north']]);
   const content=await b.evaluate('document.querySelector(".settings-business").textContent');
   for(const field of ['jason','pm (delivery)','stack','manager','sage','pi','opus','role.launch','within','gitea','bot-acme','2099-01-01']) assert.ok(content.includes(field),field);
+  assert.equal(await b.evaluate('document.querySelector("#bz-about").textContent'),'Business file');
+  assert.equal(await b.evaluate('getComputedStyle(document.querySelector("[aria-labelledby=bz-about] h3")).marginTop'),'14px');
   assert.equal(await b.evaluate('document.title'),'Settings · Business · Mosaic Console');
   assert.deepEqual(await b.evaluate('[...document.querySelectorAll("#breadcrumbs a, #breadcrumbs [aria-current]")].map(e=>e.textContent)'),['Settings','Business']);
   await b.evaluate('history.back()'); await wait('location.hash==="#/settings/appearance"');