create-pmos 0.47.0 → 0.48.0

package/workspace/public/pm/panel-newsess.js

@@ -48,34 +48,54 @@ const iv = (v) => el('span', null, v === null || v === undefined ? '' : String(v
 
 /* ── styles: design tokens only, no raw hex (workspace-ci's token-hygiene check) ────────────── */
 
-const WRAP = 'flex:none;max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:9px;'
-  + 'padding:12px 14px;border-bottom:1px solid var(--border);background:var(--card)';
-const TITLE = 'font-size:12.5px;color:var(--foreground)';
-const SUB = 'font-size:11.5px;color:var(--muted-foreground);line-height:1.5';
-const LABEL = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;'
-  + 'color:var(--muted-foreground)';
+/* Drawn from planning/design/cockpit-mockup/ViewNewSession.dc.html (Run 3 of workspace-cockpit-nav):
+ * a centred dialog card over a dimmed backdrop, option cards with a radio mark for where the session
+ * works, pill chips and badges, and the two buttons bottom right. The dialog is position:fixed, so it
+ * takes no room in the panel's flow: the panes below keep their size and their place, which is the
+ * same promise the inline block made. It is still a DOM child of panel 4, so every reader that looks
+ * for the form there still finds it. */
+const BACKDROP = 'position:fixed;inset:0;z-index:55;display:grid;place-items:center;padding:16px;'
+  + 'background:oklch(0 0 0 / 45%)';
+const WRAP = 'width:640px;max-width:100%;max-height:calc(100vh - 32px);overflow-y:auto;box-sizing:border-box;'
+  + 'display:flex;flex-direction:column;gap:12px;padding:22px;background:var(--card);color:var(--foreground);'
+  + 'border:1px solid var(--input);border-radius:12px;box-shadow:0 16px 48px oklch(0 0 0 / 50%);'
+  + 'font-family:var(--sans);font-size:13px;line-height:1.45';
+const HEAD = 'font-family:var(--sans);font-size:18px;font-weight:600;color:var(--foreground)';
+const TITLE = 'font-size:12.5px;color:var(--muted-foreground)';
+const SUB = 'font-size:12px;color:var(--muted-foreground);line-height:1.5';
+const LABEL = 'font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;'
+  + 'color:var(--muted-foreground);margin-top:2px';
 const ROW = 'display:flex;gap:6px;align-items:center;flex-wrap:wrap';
-const INPUT = 'font-family:var(--mono);font-size:11.5px;padding:5px 8px;min-height:30px;'
-  + 'background:var(--secondary);border:1px solid var(--input);color:var(--foreground);min-width:200px';
-const CHIP = 'font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:26px;'
-  + 'background:var(--secondary);border:1px solid var(--border);color:var(--foreground)';
-const CHIP_ON = 'font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:26px;'
-  + 'background:var(--accent);border:1px solid var(--ring);color:var(--foreground)';
-const CHIP_DEAD = 'font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:26px;'
-  + 'background:var(--secondary);border:1px solid var(--border);color:var(--muted-foreground);opacity:.55';
-const CHIP_BAD = 'font-family:var(--mono);font-size:10.5px;padding:4px 9px;min-height:26px;'
-  + 'background:var(--secondary);border:1px solid var(--destructive);color:var(--destructive);opacity:.75';
+const INPUT = 'font-family:var(--mono);font-size:12px;padding:5px 10px;min-height:32px;box-sizing:border-box;'
+  + 'background:var(--background);border:1px solid var(--input);border-radius:8px;color:var(--foreground);min-width:240px';
+const PILL = 'font-family:var(--mono);font-size:11px;padding:0 10px;min-height:26px;border-radius:999px;';
+const CHIP = PILL + 'background:transparent;border:1px solid var(--border);color:var(--foreground)';
+/* `var(--accent)` appears in CHIP_ON and in no other chip rule: pm-tabs-test reads a lit chip off it. */
+const CHIP_ON = PILL + 'background:var(--accent);border:1px solid var(--brand);color:var(--foreground)';
+const CHIP_DEAD = PILL + 'background:transparent;border:1px solid var(--border);color:var(--muted-foreground);opacity:.55';
+const CHIP_BAD = PILL + 'background:transparent;border:1px solid var(--destructive);color:var(--destructive);opacity:.75';
 const HOVER = 'border-color:var(--ring)';
-/* `--brand` is the token layer's one accent; there is no `--primary` in tokens.css and inventing a
- * name would be a token that resolves to nothing in both themes. */
-const PRIMARY = 'font-family:var(--mono);font-size:11px;padding:6px 14px;min-height:32px;'
-  + 'background:var(--brand-wash);border:1px solid var(--brand);color:var(--foreground)';
-const PRIMARY_OFF = 'font-family:var(--mono);font-size:11px;padding:6px 14px;min-height:32px;'
-  + 'background:var(--secondary);border:1px solid var(--border);color:var(--muted-foreground)';
-const ERR = 'font-size:11.5px;line-height:1.5;color:var(--destructive);'
-  + 'border:1px solid var(--destructive);padding:7px 9px;overflow-wrap:anywhere';
-const WARN = 'font-size:11px;line-height:1.5;color:var(--warning);overflow-wrap:anywhere';
-const MUTED_MONO = 'font-family:var(--mono);font-size:10.5px;color:var(--muted-foreground);overflow-wrap:anywhere';
+/* The board's primary button is the inverted one: foreground on background. */
+const BTN_BASE = 'font-family:var(--sans);font-size:12.5px;font-weight:500;padding:0 14px;min-height:32px;border-radius:8px;';
+const PRIMARY = BTN_BASE + 'background:var(--foreground);border:1px solid var(--foreground);color:var(--background)';
+const PRIMARY_OFF = BTN_BASE + 'background:var(--secondary);border:1px solid var(--border);color:var(--muted-foreground)';
+const SECONDARY = BTN_BASE + 'background:transparent;border:1px solid var(--input);color:var(--foreground)';
+const CLOSE = 'font-size:16px;line-height:1;padding:4px 6px;background:transparent;border:0;color:var(--muted-foreground)';
+const ERR = 'font-size:12px;line-height:1.5;color:var(--destructive);border-radius:8px;'
+  + 'border:1px solid var(--destructive);padding:7px 10px;overflow-wrap:anywhere';
+const WARN = 'font-size:12px;line-height:1.5;color:var(--warning);overflow-wrap:anywhere';
+const MUTED_MONO = 'font-family:var(--mono);font-size:12px;color:var(--muted-foreground);overflow-wrap:anywhere';
+const BADGE = 'font-family:var(--sans);font-size:11px;font-weight:500;border:1px solid var(--border);border-radius:999px;'
+  + 'padding:0 8px;line-height:18px;white-space:nowrap;color:var(--foreground)';
+const BADGE_W = BADGE + ';border-color:transparent;background:color-mix(in oklab, var(--warning) 16%, transparent);color:var(--warning)';
+const BADGE_S = BADGE + ';border-color:transparent;background:color-mix(in oklab, var(--success) 16%, transparent);color:var(--success)';
+/* An option card: the board's `.opt`, with its radio mark. */
+const OPT = 'display:flex;gap:12px;align-items:flex-start;width:100%;box-sizing:border-box;text-align:left;'
+  + 'padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--foreground);'
+  + 'font-family:var(--sans);font-size:13px';
+const OPT_ON = OPT + ';border-color:var(--brand);background:color-mix(in oklab, var(--brand) 8%, transparent)';
+const RADIO = 'flex:none;width:16px;height:16px;margin-top:2px;box-sizing:border-box;border-radius:50%;border:1px solid var(--input)';
+const RADIO_ON = RADIO + ';border:5px solid var(--brand)';
 
 /* ── open / close ──────────────────────────────────────────────────────────────────────────── */
 
@@ -193,7 +213,8 @@ function absorbBranchBroadcast() {
 function branchSection() {
   const info = state.newSessBranches;
   const out = [];
-  out.push(el('div', { style: LABEL }, 'branch'));
+  // The board calls this "Where it works". The word `branch` stays its own text: suites read it.
+  out.push(el('div', { style: LABEL, 'data-r29': 'where' }, el('span', null, 'where it works'), el('span', null, ' · '), el('span', null, 'branch')));
 
   if (FIXTURE) {
     out.push(el('div', { style: SUB }, 'fixture mode reads no repository — a session started here applies no branch'));
@@ -228,13 +249,22 @@ function branchSection() {
   }
 
   const pick = (v) => setState({ newSessBranch: v, newSessBranchMode: false, newSessError: null });
-  const chips = [
-    // ALWAYS first and ALWAYS the default: starting a session must never require a git decision.
-    el('button', {
-      onClick: () => pick(''),
-      style: state.newSessBranch === '' && !state.newSessBranchMode ? CHIP_ON : CHIP, hover: HOVER,
-    }, iv('stay on current' + (current ? ' (' + current + ')' : ''))),
-  ];
+  /* The sessions already running in this folder, read from the same list isolateNow reads. The
+   * board's "Shared with 1 running session" is this count; nothing else is claimed about them. */
+  const sharing = (state.sessions || []).filter((x) => x && x.ws === state.wsId && x.state !== 'exited');
+  const stayOn = state.newSessBranch === '' && !state.newSessBranchMode;
+  // ALWAYS first and ALWAYS the default: starting a session must never require a git decision.
+  out.push(optionCard({
+    on: stayOn, onClick: () => pick(''), hook: 'opt-current',
+    title: 'stay on current' + (current ? ' (' + current + ')' : ''),
+    meta: current ? '⎇ ' + current : null,
+    sub: sharing.length
+      ? 'Shared with ' + sharing.length + ' running session' + (sharing.length === 1 ? '' : 's') + ': '
+        + sharing.map((x) => x.name || x.id).filter(Boolean).slice(0, 3).join(', ') + '.'
+      : 'No other session runs in this folder now.',
+    badge: sharing.length ? ['they can overwrite each other', BADGE_W] : null,
+  }));
+  const chips = [];
   for (const b of branches) {
     if (b === current) continue;
     const taken = elsewhere.get(b);
@@ -259,12 +289,16 @@ function branchSection() {
           style: state.newSessBranch === b && !state.newSessBranchMode ? CHIP_ON : CHIP, hover: HOVER,
         }, iv(b)));
   }
-  chips.push(el('button', {
+  if (chips.length) {
+    out.push(el('div', { style: SUB }, 'Or move this folder to another branch:'));
+    out.push(el('div', { style: ROW, 'data-r29': 'branches' }, chips));
+  }
+  out.push(optionCard({
+    on: !!state.newSessBranchMode, hook: 'opt-new',
     onClick: () => setState({ newSessBranchMode: true, newSessBranch: '', newSessError: null }),
-    style: state.newSessBranchMode ? CHIP_ON : CHIP, hover: HOVER,
-  }, '+ new branch…'));
-
-  out.push(el('div', { style: ROW }, chips));
+    title: '+ new branch…',
+    sub: 'Creates a branch from the current one. Choose below if it gets its own folder.',
+  }));
 
   if (state.newSessBranchMode) {
     out.push(el('div', { style: ROW },
@@ -282,11 +316,12 @@ function branchSection() {
   // that is staying put, it would be a checkbox with no meaning.
   if (state.newSessBranchMode || state.newSessBranch) {
     const on = isolateNow();
-    out.push(el('div', { style: ROW },
+    out.push(el('div', { style: ROW, 'data-r29': 'isolate' },
       el('button', {
         onClick: () => setState({ newSessIsolate: !on }),
         style: on ? CHIP_ON : CHIP, hover: HOVER,
       }, iv((on ? '☑' : '☐') + ' its own folder (worktree)')),
+      el('span', { style: on ? BADGE_S : BADGE_W }, iv(on ? 'isolated' : 'shared folder')),
       el('span', { style: SUB }, iv(on
         ? 'the branch is checked out in a new folder — sessions already running are untouched'
         : 'this repository is switched to that branch — every session already in it moves too')),
@@ -295,6 +330,19 @@ function branchSection() {
   return out;
 }
 
+/** The board's option card: a radio mark, a bold title, a mono aside, a muted line and a badge. The
+ * title is its own span, so a reader of the panel's text still finds it as one item. */
+function optionCard({ on, onClick, hook, title, meta, sub, badge }) {
+  return el('button', { onClick, style: on ? OPT_ON : OPT, hover: on ? null : HOVER, 'data-r29': hook, 'data-on': on ? 'yes' : 'no' },
+    el('span', { style: on ? RADIO_ON : RADIO }),
+    el('span', { style: 'display:flex;flex-direction:column;gap:2px;min-width:0' },
+      el('span', { style: 'display:flex;gap:8px;align-items:baseline;flex-wrap:wrap' },
+        el('b', { style: 'font-weight:600' }, iv(title)),
+        meta ? el('span', { style: MUTED_MONO }, iv(meta)) : null),
+      sub ? el('span', { style: SUB }, iv(sub)) : null,
+      badge ? el('span', { style: 'margin-top:4px' }, el('span', { style: badge[1] }, iv(badge[0]))) : null));
+}
+
 const shortPath = (p) => { const s = String(p || ''); const i = s.lastIndexOf('/'); return i < 0 ? s : s.slice(i + 1); };
 
 /** What the isolate checkbox currently reads — the PM's choice if they made one, else the server's
@@ -505,53 +553,64 @@ export function newSessionBlock() {
   const slug = state.newSess.slug;
   const busy = !!state.newSessBusy;
 
-  return el('div', { style: WRAP },
-    el('div', { style: 'display:flex;gap:8px;align-items:baseline;flex-wrap:wrap' },
-      el('span', { style: TITLE }, 'start a session — more options'),
-      el('span', { style: MUTED_MONO }, iv(slug)),
-    ),
-    el('div', { style: SUB },
-      'What this session runs, and where. ＋ session does all of this in one click on the rule; '
-      + 'this is for the times the rule is not what you want.'),
-
-    el('div', { style: LABEL }, 'name'),
-    el('div', { style: ROW },
-      el('input', {
-        value: state.newSessName, placeholder: slug + ' 1', style: INPUT, disabled: busy,
-        onInput: (e) => { state.newSessName = e.target.value; },
-        onChange: () => setState({}),
-      }),
-    ),
-
-    el('div', { style: LABEL }, 'agent'),
-    el('div', { style: ROW },
-      ['shell', 'claude'].map((a) => el('button', {
-        onClick: () => setState({ newSessAgent: a, newSessError: null }),
-        style: state.newSessAgent === a ? CHIP_ON : CHIP, hover: HOVER,
-      }, iv(a))),
-      el('span', { style: SUB }, 'a CLI that is not on PATH is refused by the server, and says so'),
-    ),
-
-    modelSection(),
-    branchSection(),
-    profileSection(),
-
-    // The refusal, where the question was asked. It is rendered ABOVE the button so the PM reads it
-    // before pressing again, and it survives until something changes.
-    state.newSessError ? el('div', { style: ERR }, iv(state.newSessError)) : null,
-
-    el('div', { style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:2px' },
-      el('button', {
-        onClick: () => { if (!busy) onStart(); },
-        disabled: busy, style: busy ? PRIMARY_OFF : PRIMARY, hover: busy ? null : HOVER,
-      }, busy ? 'starting…' : 'start session'),
-      el('button', { onClick: () => closeNewSession(), style: CHIP, hover: HOVER, disabled: busy }, 'cancel'),
+  const badges = [slug, state.product && state.product !== slug ? state.product : null, state.newSessAgent || 'shell']
+    .filter(Boolean).map((b) => el('span', { style: BADGE }, iv(b)));
+
+  return el('div', { style: BACKDROP, 'data-r29': 'newsess' },
+    el('div', { style: WRAP, role: 'dialog', 'aria-label': 'New session', 'data-board': 'new-session' },
+      el('div', { style: 'display:flex;justify-content:space-between;align-items:center;gap:8px' },
+        el('span', { style: HEAD, 'data-r29': 'newsess-title' }, 'New session'),
+        el('button', { onClick: () => closeNewSession(), style: CLOSE, hover: 'color:var(--foreground)', disabled: busy,
+          'aria-label': 'close', title: 'close without starting', 'data-r29': 'newsess-close' }, '×'),
+      ),
+      el('div', { style: 'display:flex;gap:8px;flex-wrap:wrap', 'data-r29': 'newsess-badges' }, badges),
+      el('div', { style: 'display:flex;gap:8px;align-items:baseline;flex-wrap:wrap' },
+        el('span', { style: TITLE }, 'start a session — more options'),
+        el('span', { style: MUTED_MONO }, iv(slug)),
+      ),
+      el('div', { style: SUB },
+        'What this session runs, and where. ＋ session does all of this in one click on the rule; '
+        + 'this is for the times the rule is not what you want.'),
+
+      el('div', { style: LABEL }, 'name'),
+      el('div', { style: ROW },
+        el('input', {
+          value: state.newSessName, placeholder: slug + ' 1', style: INPUT, disabled: busy,
+          onInput: (e) => { state.newSessName = e.target.value; },
+          onChange: () => setState({}),
+        }),
+      ),
+
+      el('div', { style: LABEL }, 'agent'),
+      el('div', { style: ROW },
+        ['shell', 'claude'].map((a) => el('button', {
+          onClick: () => setState({ newSessAgent: a, newSessError: null }),
+          style: state.newSessAgent === a ? CHIP_ON : CHIP, hover: HOVER,
+        }, iv(a))),
+        el('span', { style: SUB }, 'a CLI that is not on PATH is refused by the server, and says so'),
+      ),
+
+      modelSection(),
+      el('div', { style: 'display:flex;flex-direction:column;gap:8px', 'data-r29': 'newsess-where' }, branchSection()),
+      el('div', { style: 'display:flex;flex-direction:column;gap:8px', 'data-r29': 'newsess-profile' }, profileSection()),
+
+      // The refusal, where the question was asked. It is rendered ABOVE the button so the PM reads it
+      // before pressing again, and it survives until something changes.
+      state.newSessError ? el('div', { style: ERR }, iv(state.newSessError)) : null,
+
+      el('div', { style: SUB, 'data-r29': 'newsess-advice' },
+        'Nothing appears until the server says it started. If it refuses — an unreadable profile, a '
+        + 'branch git will not check out — you will read the reason here and no session, tab or '
+        + 'terminal will have been created.'),
+
+      el('div', { style: 'display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;padding-top:2px', 'data-r29': 'newsess-actions' },
+        el('button', { onClick: () => closeNewSession(), style: SECONDARY, hover: HOVER, disabled: busy }, 'cancel'),
+        el('button', {
+          onClick: () => { if (!busy) onStart(); },
+          disabled: busy, style: busy ? PRIMARY_OFF : PRIMARY, hover: busy ? null : 'opacity:.9',
+        }, busy ? 'starting…' : 'start session'),
+      ),
     ),
-
-    el('div', { style: SUB },
-      'Nothing appears until the server says it started. If it refuses — an unreadable profile, a '
-      + 'branch git will not check out — you will read the reason here and no session, tab or '
-      + 'terminal will have been created.'),
   );
 }
 

package/workspace/public/pm/panel-repos.js

@@ -106,14 +106,14 @@ async function connectData() {
 connectData();
 
 /** allProds (line 1431) — the base repositories plus anything the PM added in this window. */
-function repoTuples() {
+export function repoTuples() {
   if (FIXTURE) return productsList(state.addedProducts || []);
   const added = (state.addedProducts || []).map((x) => [x.id, x.sub, x.kind || 'github']);
   return [...(realRepos || []), ...added];
 }
 
 /** `product` (line 1396): the state field, defaulting to the first repository in the list. */
-function activeProduct(tuples) {
+export function activeProduct(tuples) {
   if (state.product) return state.product;
   const list = tuples || repoTuples();
   return list.length ? list[0][0] : null;
@@ -255,11 +255,11 @@ function repoButton(tuple, product) {
 const chipStyle = 'flex:none;font-family:var(--mono);font-size:10px;padding:1px 6px;border:1px solid var(--border);color:var(--muted-foreground);min-height:22px';
 const actStyle = 'flex:none;font-size:12px;padding:2px 6px;color:var(--muted-foreground);min-height:28px';
 
-function treesOf(name) {
+export function treesOf(name) {
   return dataMod && typeof dataMod.productTrees === 'function' ? dataMod.productTrees(name) : [];
 }
 
-async function renameRepo(name) {
+export async function renameRepo(name) {
   const win = typeof window !== 'undefined' && window.prompt ? window : null;
   const label = win ? win.prompt('Rename “' + name + '” to:', name) : null;
   if (label === null || !String(label).trim()) return;
@@ -329,10 +329,11 @@ async function removeRepo(name) {
   setState({ repoNotice: null });
 }
 
-function repoEntry(tuple, product) {
-  const row = repoButton(tuple, product);
-  if (FIXTURE || !dataMod) return row;
-  const name = tuple[0];
+/** What the live app adds under a repository: the chips (trees, sync, profile, audit, rename, remove) and the blocks
+ * they open. Empty in fixture mode, where the repository row is the prototype's and carries nothing more. The cockpit
+ * list column draws this under the repository's name; the phone's repository list draws it under the row. */
+export function manageParts(name, product) {
+  if (FIXTURE || !dataMod) return { tools: [], below: [] };
   const trees = treesOf(name);
   /* The trees list is always available — the main tree is a line of work too, and a repository with
    * one tree still has branches to create. The active repository opens it by default; others on a
@@ -359,23 +360,39 @@ function repoEntry(tuple, product) {
     tools.push(el('button', { onClick: () => renameRepo(name), style: actStyle, hover: 'color:var(--foreground)', title: 'rename this repository', 'data-r1': 'rename' }, '✎'));
     tools.push(el('button', { onClick: () => removeRepo(name), style: actStyle, hover: 'color:var(--destructive)', title: 'remove this repository from PMOS (no folder is deleted)', 'data-r1': 'remove' }, '✕'));
   }
-  const kids = [el('div', { style: 'display:flex;align-items:center' },
-    el('div', { style: 'flex:1;min-width:0' }, row),
-    tools.length ? el('div', { style: 'display:flex;align-items:center;gap:2px;padding-right:8px' }, tools) : null)];
-  { const bf = branchForm(name); if (bf) kids.push(bf); }
-  if (open && trees.length) kids.push(treesBlock(name, trees, product === name));
-  { const tn = treeNoteFor(name); if (tn) kids.push(tn); }
-  { const ab = auditBlock(name); if (ab) kids.push(ab); }
+  const below = [];
+  { const bf = branchForm(name); if (bf) below.push(bf); }
+  if (open && trees.length) below.push(treesBlock(name, trees, product === name));
+  { const tn = treeNoteFor(name); if (tn) below.push(tn); }
+  { const ab = auditBlock(name); if (ab) below.push(ab); }
   const n = state.repoNotice;
   if (n && n.name === name) {
-    kids.push(el('div', {
+    below.push(el('div', {
       style: 'padding:4px 14px 8px 39px;font-size:11px;color:' + (n.tone === 'bad' ? 'var(--destructive)' : 'var(--muted-foreground)'),
       'data-r1': 'notice',
     }, ip(n.text)));
   }
+  return { tools, below };
+}
+
+function repoEntry(tuple, product) {
+  const row = repoButton(tuple, product);
+  if (FIXTURE || !dataMod) return row;
+  const { tools, below } = manageParts(tuple[0], product);
+  const kids = [el('div', { style: 'display:flex;align-items:center' },
+    el('div', { style: 'flex:1;min-width:0' }, row),
+    tools.length ? el('div', { style: 'display:flex;align-items:center;gap:2px;padding-right:8px' }, tools) : null)];
+  for (const b of below) kids.push(b);
   return el('div', null, kids);
 }
 
+/** The abbreviation a repository shows on a rail tile: the one the PM set, else its first letters. */
+export function repoInitial(name) {
+  const set = dataMod && dataMod.repoInitials ? dataMod.repoInitials(name) : null;
+  return (set || String(name).replace(/[^A-Za-z0-9]+/g, ' ').trim().split(' ').filter(Boolean).slice(0, 2)
+    .map((w) => w[0]).join('') || String(name).slice(0, 2)).toUpperCase();
+}
+
 /**
  * overhaul-r1 R4 — the collapsed repositories rail, one glyph per repository, LIVE mode only (the
  * fixture rail is the prototype's and the comparator reads it). Initials + kind badge; a dot when a
@@ -447,7 +464,7 @@ export function onAddProduct() { setDetail({ kind: 'addprod' }); }
  * resolved. It is deliberately NOT dismissible: the condition is still true after the click.
  * Nothing renders when the state is settled — including in fixture mode, which has no data layer
  * and therefore never sets the key, so the comparator sees the prototype's markup unchanged. */
-function stateHealthBanner() {
+export function stateHealthBanner() {
   const h = state.stateHealth;
   if (!h || h.ok !== false) return null;
   return el('div', {