create-pmos 0.15.0 → 0.16.1

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

@@ -0,0 +1,553 @@
+/* pm/panel-repos.js — PANEL 1, repositories.
+ *
+ * A port of the prototype's first column (template lines 66–109) plus the `addprod` detail body it
+ * opens (template lines 730–768, derivation lines 1572–1618). Every inline `style` string below is
+ * copied from that file character for character: the comparator diffs computed style and geometry,
+ * so a "tidied" declaration is a defect, not an improvement.
+ *
+ * ── Exports ──────────────────────────────────────────────────────────────────────────────────
+ *   renderRepos(host)      the panel-1 renderer app.js calls (host = the open-panel container).
+ *   addProductBody()       the `addprod` detail body, as an ARRAY of sibling nodes. Panel 3 owns
+ *                          the sticky detail header and appends these after it — the add-repository
+ *                          form belongs to this module (build contract, ownership table) but it
+ *                          renders inside panel 3, exactly as the prototype does.
+ *   renderAddProduct(host) convenience: appends addProductBody() to `host` WITHOUT clearing it.
+ *   onAddProduct()         the "＋ add repository" click handler, for anything else that offers it.
+ *   selectRepo(id)         pick a repository — the row's own handler, exported for the test suite.
+ *
+ * ── The bare <span> around every interpolated value ──────────────────────────────────────────
+ * The prototype's template runtime renders each `{{ value }}` inside its own inline
+ * `<span class="sc-interp">`; literal text in the template is NOT wrapped. The comparator anchors
+ * its style/geometry comparison on the element that OWNS a text node, so a value moved out of that
+ * inline span would be measured as a block instead of a text run and read as a difference. `ip()`
+ * below reproduces the wrapper; it is used at exactly the positions the template has `{{ … }}`.
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import {
+  productsList, repoRow, firstSlugOf, MODE_META, SETTINGS_GROUPS, ADDABLE_PRODUCTS,
+  INGESTED_KNOW, INGEST_LOG_GITHUB, INGEST_LOG_LOCAL, INGEST_ALREADY,
+} from './fixture.js';
+
+/** An interpolated value, in the inline span the prototype's runtime puts it in. */
+const ip = (v) => el('span', null, v);
+
+/* ── the repository list ─────────────────────────────────────────────────────────────────────
+ * Fixture mode is the prototype's two seed repositories. Normal mode asks the data layer once, at
+ * boot, and repaints when it answers; until then the list is empty, which renders an empty panel
+ * rather than a wrong one. `data.js` is imported dynamically because a panel must still come up if
+ * the data layer is absent — the shell tolerates a missing module and so does this.
+ */
+
+let realRepos = null;                 // [[id, sub, kind], …] once the data layer has answered
+let dataMod = null;
+const initiativesByRepo = new Map();  // repo id → first initiative slug, learned lazily
+
+/** Normalise whatever `loadRepos()` returns into the prototype's `[id, sub, kind]` triple. */
+function toTuple(r) {
+  if (Array.isArray(r)) return [String(r[0]), String(r[1] ?? ''), r[2] === 'local' ? 'local' : 'github'];
+  if (!r || typeof r !== 'object') return null;
+  const id = r.name || r.id || r.repo || r.key;
+  if (!id) return null;
+  const n = typeof r.count === 'number' ? r.count
+    : typeof r.initiatives === 'number' ? r.initiatives
+      : Array.isArray(r.initiatives) ? r.initiatives.length : null;
+  /* An UNREADABLE count is an em dash, never an empty string. A repository whose spine could not be
+   * read (a folder with no `planning/`, a tree that errored) rendered "local · " — a sub-line that
+   * trails off mid-sentence and reads as a bug in the row rather than as "PMOS has not counted
+   * this". The dash is the design's own vocabulary for a value that is not there. */
+  const sub = r.sub || (n === null ? '—' : n + (n === 1 ? ' initiative' : ' initiatives'));
+  const kind = (r.kind || r.source) === 'local' ? 'local' : (r.kind || r.source) === 'github' ? 'github'
+    : (r.remote || r.origin) ? 'github' : 'local';
+  return [String(id), sub, kind];
+}
+
+/** The first initiative slug of a repository, from whatever shape the data layer hands back. */
+function firstSlugIn(payload) {
+  if (!payload) return null;
+  if (Array.isArray(payload)) {
+    for (const g of payload) {
+      if (typeof g === 'string') return g;
+      if (!g || typeof g !== 'object') continue;
+      if (Array.isArray(g.slugs) && g.slugs.length) return g.slugs[0];
+      if (g.slug) return g.slug;
+      if (g.id) return g.id;
+    }
+    return null;
+  }
+  if (Array.isArray(payload.groups)) return firstSlugIn(payload.groups);
+  if (Array.isArray(payload.initiatives)) return firstSlugIn(payload.initiatives);
+  return null;
+}
+
+async function connectData() {
+  if (FIXTURE) return;
+  try { dataMod = await import('./data.js'); } catch { dataMod = null; return; }
+  if (!dataMod || typeof dataMod.loadRepos !== 'function') return;
+  try {
+    const list = await dataMod.loadRepos();
+    const tuples = (Array.isArray(list) ? list : []).map(toTuple).filter(Boolean);
+    realRepos = tuples;
+    setState({});                       // repaint with the real list
+  } catch { realRepos = []; }
+}
+connectData();
+
+/** allProds (line 1431) — the base repositories plus anything the PM added in this window. */
+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) {
+  if (state.product) return state.product;
+  const list = tuples || repoTuples();
+  return list.length ? list[0][0] : null;
+}
+
+/* THE SELECTED REPOSITORY IS A FACT, NOT A COINCIDENCE.
+ * `state.product` is null until something sets it. Real mode gets it from `loadRepos()`; fixture
+ * mode had nothing to set it, so until the PM clicked a row it stayed null and each panel fell back
+ * to "the first one in the list" on its own. The screen looks right — every fallback picks the same
+ * repository — but the FIELD that says which repository the window is standing in is empty, and
+ * everything that reads it rather than re-deriving it gets no answer: panel 4's tab scoping, the
+ * phone chrome, and any check that asks the app which repository it is showing. Set once, at load,
+ * from the same list the rows are drawn from, so the highlighted row and `state.product` are the
+ * same statement. */
+if (FIXTURE && !state.product) {
+  const firstTuple = repoTuples()[0];
+  if (firstTuple) setState({ product: firstTuple[0] });
+}
+
+/** The initiative selected when a repository is picked (line 1440), where it is known synchronously. */
+function firstSlugSync(id) {
+  if (FIXTURE) return firstSlugOf(id);
+  if (initiativesByRepo.has(id)) return initiativesByRepo.get(id);
+  if (dataMod && typeof dataMod.firstSlugOf === 'function') {
+    try { return dataMod.firstSlugOf(id) || null; } catch { /* fall through */ }
+  }
+  return null;
+}
+
+/**
+ * Pick a repository. Verbatim from the prototype's row handler (lines 1439–1442): the repository
+ * becomes current, the board goes back to `product` mode — so a PM who wandered into `skills` and
+ * then switched repository lands on the board, not on another repository's skills — and the first
+ * initiative of that repository is selected. A repository with no initiatives selects nothing and
+ * the detail panel says so; it does not keep the previous repository's selection.
+ */
+export function selectRepo(id) {
+  const slug = firstSlugSync(id);
+  setState({ product: id, mode: 'product', sel: slug, detail: slug ? { kind: 'init' } : { kind: 'none' } });
+  if (slug || FIXTURE || !dataMod || typeof dataMod.loadInitiatives !== 'function') return;
+  Promise.resolve(dataMod.loadInitiatives(id)).then((payload) => {
+    const found = firstSlugIn(payload);
+    initiativesByRepo.set(id, found || null);
+    if (found && state.product === id && !state.sel) setState({ sel: found, detail: { kind: 'init' } });
+  }).catch(() => { /* an unreadable repository still selects; panel 3 reports the read */ });
+}
+
+/* ── settings & tools ────────────────────────────────────────────────────────────────────────
+ * EXACTLY two groups, and no `workflow` entry. The prototype's `modeMeta` still carries `workflow`
+ * because the mode exists in code, but it is deliberately absent from the drawer: a workflow is
+ * decided by the agent at runtime, not configured by hand (PRD, panel-1 scope). The filter below is
+ * belt and braces — it makes the absence a property of THIS module, so it cannot regress by someone
+ * adding an id to the seed list.
+ */
+const DRAWER_GROUPS = SETTINGS_GROUPS.map((g) => ({
+  label: g.label,
+  items: g.items.filter((id) => id !== 'workflow' && MODE_META[id]),
+}));
+
+function drawerButton(id) {
+  const [glyph, label] = MODE_META[id];
+  const on = state.mode === id;
+  return el('button', {
+    onClick: () => setState({ mode: id, settingsOpen: false, col1: true }),
+    style: 'display:flex;align-items:center;gap:9px;width:100%;padding:7px 14px;min-height:38px;border-left:2px solid '
+      + (on ? 'var(--brand)' : 'transparent') + ';background:' + (on ? 'var(--accent)' : 'transparent')
+      + ';color:' + (on ? 'var(--foreground)' : 'var(--muted-foreground)'),
+    hover: 'background:var(--accent)',
+  },
+    el('span', { style: 'flex:none;width:16px;text-align:center;font-size:13px;line-height:1' }, ip(glyph)),
+    el('span', { style: 'font-size:12px' }, ip(label)),
+  );
+}
+
+function drawer() {
+  const kids = [];
+  if (state.settingsOpen) {
+    const groups = [];
+    for (const g of DRAWER_GROUPS) {
+      groups.push(el('div', {
+        style: 'padding:8px 14px 3px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)',
+      }, ip(g.label)));
+      for (const id of g.items) groups.push(drawerButton(id));
+    }
+    kids.push(el('div', { style: 'max-height:44vh;overflow-y:auto;border-bottom:1px solid var(--border)' }, groups));
+  }
+  kids.push(el('button', {
+    onClick: () => setState((s) => ({ settingsOpen: !s.settingsOpen })),
+    style: 'display:flex;align-items:center;gap:9px;width:100%;padding:11px 14px;min-height:44px;color:var(--muted-foreground)',
+    hover: 'color:var(--foreground);background:var(--accent)',
+  },
+    el('span', { style: 'flex:none;width:14px;text-align:center;font-size:14px' }, '⚙'),
+    el('span', { style: 'font-size:12px' }, 'settings & tools'),
+    el('span', { style: 'margin-left:auto;font-size:10px' }, ip(state.settingsOpen ? '▾' : '▸')),
+  ));
+  return el('div', { style: 'border-top:1px solid var(--border);flex:none' }, kids);
+}
+
+/* ── the rows ────────────────────────────────────────────────────────────────────────────────── */
+
+function repoButton(tuple, product) {
+  const rp = repoRow(tuple);
+  const active = product === rp.name;
+  const gc = active ? (rp.kind === 'github' ? 'var(--info)' : 'var(--brand)') : 'var(--muted-foreground)';
+  return el('button', {
+    onClick: () => selectRepo(rp.name),
+    style: 'display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;min-height:46px;border-left:2px solid '
+      + (active ? 'var(--brand)' : 'transparent') + ';background:' + (active ? 'var(--accent)' : 'transparent'),
+    hover: 'background:var(--accent)',
+  },
+    el('span', {
+      style: 'flex:none;width:16px;text-align:center;font-size:14px;line-height:1;color:' + gc,
+      title: rp.kindLabel + ' repository',
+    }, ip(rp.kindGlyph)),
+    el('span', { style: 'min-width:0' },
+      el('span', { style: 'display:block;font-family:var(--mono);font-size:12.5px;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, ip(rp.name)),
+      el('span', { style: 'display:block;font-size:10.5px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, ip(rp.displaySub)),
+    ),
+  );
+}
+
+/** setDetail (line 1401) — open panel 3 on a detail kind, un-collapsing it if the PM folded it. */
+const setDetail = (d) => setState({ detail: d, col2: true });
+
+/** onAddProduct (line 1444). */
+export function onAddProduct() { setDetail({ kind: 'addprod' }); }
+
+/* ── the panel ───────────────────────────────────────────────────────────────────────────────── */
+
+/**
+ * Fill panel 1. `host` IS the prototype's open-panel container (app.js owns its style), so this
+ * appends the panel's three parts as direct children and never wraps them.
+ */
+export function renderRepos(host) {
+  const tuples = repoTuples();
+  const product = activeProduct(tuples);
+
+  const header = el('div', {
+    style: 'display:flex;align-items:center;gap:8px;padding:11px 10px 10px 14px;border-bottom:1px solid var(--border)',
+  },
+    el('span', { style: 'font-size:14px;font-weight:600;letter-spacing:.01em' }, 'repositories'),
+    el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, ip(String(tuples.length))),
+    el('button', {
+      onClick: () => setState((s) => ({ col0: !s.col0 })),
+      style: 'color:var(--muted-foreground);font-size:14px;padding:2px 6px',
+      hover: 'color:var(--foreground)',
+    }, '⟨'),
+  );
+
+  const scroll = el('div', { style: 'flex:1;overflow-y:auto;min-height:0' },
+    tuples.map((t) => repoButton(t, product)),
+    el('button', {
+      onClick: onAddProduct,
+      style: 'display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;min-height:40px;color:var(--muted-foreground)',
+      hover: 'color:var(--foreground);background:var(--accent)',
+    },
+      el('span', { style: 'flex:none;width:14px;text-align:center;font-size:14px' }, '＋'),
+      el('span', { style: 'font-size:12px' }, 'add repository'),
+    ),
+  );
+
+  setChildren(host, [header, scroll, drawer()]);
+  return host;
+}
+
+/* ── the add-repository form (panel 3, detail kind `addprod`) ────────────────────────────────
+ * The two sources the prototype offers: a GitHub repo, which is cloned and scanned, and a local
+ * folder, which starts with an empty board because nothing can be imported from a bare folder.
+ *
+ * In FIXTURE mode the two buttons reproduce the prototype's scripted ingest exactly — the same log
+ * lines, the same two repositories, the same landing selection — because the comparator's captured
+ * "09-add-repo" state is that script. Outside fixture mode the form posts the declaration to the
+ * data layer if it offers `addRepo()`, and otherwise reports, in the log, that nothing was added.
+ * It never prints a log line describing work that did not happen: a scripted "clone … ok" against a
+ * repo nobody read is precisely the watermelon this PRD names.
+ */
+
+const inputStyle = 'font-family:var(--mono);font-size:11.5px;padding:6px 9px;border:1px solid var(--input);min-height:32px';
+const labelStyle = 'font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);padding-top:8px';
+const rowStyle = 'display:grid;grid-template-columns:76px 1fr;gap:10px;padding:10px 14px';
+const goStyle = 'padding:5px 12px;min-height:30px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-size:12px;font-weight:500';
+
+/**
+ * A form field. `oninput` writes the value straight onto the state object WITHOUT a render — a
+ * repaint between keystrokes would rebuild the input and take the caret with it — and `onchange`
+ * commits with a real `setState` so everything derived from the field catches up.
+ */
+function field(key, value) {
+  return el('input', {
+    value,
+    style: inputStyle,
+    onInput: (e) => { state[key] = e.target.value; },
+    onChange: (e) => setState({ [key]: e.target.value }),
+  });
+}
+
+/* ── choosing the folder, instead of typing its path ─────────────────────────────────────────
+ * The form's local branch used to be a bare text field, so "add the repo I am looking at" meant
+ * knowing its absolute path and typing it correctly — and the two endpoints that exist to avoid
+ * exactly that (`/api/pick-folder`, `/api/fs/list`) had no caller anywhere in the front end.
+ *
+ * Two ways in, because one of them is not always there: the machine's native dialog first, and the
+ * in-app browser when there is no native chooser (headless Linux), when one is already open, or
+ * when the PM asks for it. A cancelled dialog changes nothing — it is an answer, not a failure.
+ */
+const browseRowStyle = 'display:grid;grid-template-columns:76px 1fr auto;gap:10px;padding:10px 14px';
+const chooseStyle = 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:32px;'
+  + 'background:transparent;border:1px solid var(--border);color:var(--muted-foreground)';
+
+/** The in-app browser, opened at `dir` (empty = the server's idea of home). */
+function openBrowse(dir) {
+  // Fixture mode reads NOTHING off this machine — the comparator drives this surface, and a run
+  // that opened a dialog or listed the PM's home directory would be doing real work behind a
+  // scripted board. It says so instead of degrading into a vaguer "no endpoint" line.
+  if (FIXTURE) {
+    setState({ addLog: [{ t: 'the folder chooser is off in fixture mode — nothing on this machine is read', c: 'var(--warning)' }] });
+    return;
+  }
+  if (!dataMod || typeof dataMod.listFolder !== 'function') {
+    setState({ addLog: [{ t: 'no local endpoint for browsing folders — type the path instead', c: 'var(--warning)' }] });
+    return;
+  }
+  setState({ addBrowse: { loading: true, path: dir || '', entries: [] } });
+  Promise.resolve(dataMod.listFolder(dir)).then((res) => {
+    if (!res || res.ok === false) {
+      setState({ addBrowse: { path: dir || '', entries: [], error: (res && res.error) || 'that folder could not be listed' } });
+      return;
+    }
+    setState({ addBrowse: res });
+  }).catch((e) => setState({ addBrowse: { path: dir || '', entries: [], error: e && e.message ? e.message : String(e) } }));
+}
+
+/** Ask the server to open the machine's folder dialog; fall back to the in-app browser. */
+function chooseFolder() {
+  if (FIXTURE || !dataMod || typeof dataMod.chooseFolder !== 'function') { openBrowse(state.addPath); return; }
+  setState({ addPicking: true });
+  Promise.resolve(dataMod.chooseFolder(state.addPath)).then((res) => {
+    setState({ addPicking: false });
+    if (res && res.ok && res.root) { setState({ addPath: res.root, addBrowse: null }); return; }
+    if (res && res.cancelled) return;                       // the PM closed the dialog: no change, no noise
+    openBrowse(state.addPath);                              // unsupported, busy, or unreachable → in-app
+  }).catch(() => { setState({ addPicking: false }); openBrowse(state.addPath); });
+}
+
+/** Take the folder currently open in the browser as the answer. */
+function useFolder(p) {
+  if (!p) return;
+  setState({ addPath: p, addBrowse: null });
+}
+
+const browseRow = (label, title, onClick, muted) => el('button', {
+  onClick, title,
+  style: 'display:flex;align-items:center;gap:8px;width:100%;padding:5px 10px;min-height:28px;text-align:left;'
+    + 'font-family:var(--mono);font-size:11px;color:var(--' + (muted ? 'muted-foreground' : 'foreground') + ')',
+  hover: 'background:var(--accent)',
+}, label);
+
+/** The browser body: where we are, one row per sub-directory, and a way to take the current one. */
+function browseBody() {
+  const b = state.addBrowse;
+  const rows = [];
+  rows.push(el('div', { style: 'display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border)' },
+    el('span', { style: 'flex:1;font-family:var(--mono);font-size:11px;overflow-wrap:anywhere' }, ip(b.path || '…')),
+    el('button', { onClick: () => useFolder(b.path), style: chooseStyle + ';min-height:26px', hover: 'border-color:var(--ring)' },
+      ip('use this folder')),
+  ));
+  if (b.error) rows.push(el('div', { style: 'padding:8px 10px;font-size:11.5px;color:var(--destructive)' }, ip(b.error)));
+  else if (b.loading) rows.push(el('div', { style: 'padding:8px 10px;font-size:11.5px;color:var(--muted-foreground)' }, ip('reading…')));
+  else {
+    const list = [];
+    if (b.parent) list.push(browseRow('↑  ..', b.parent, () => openBrowse(b.parent), true));
+    for (const e of b.entries || []) {
+      // The repo marker is the whole point of showing this list rather than a plain file chooser:
+      // it says which of these folders PMOS can actually open as a workspace.
+      list.push(browseRow((e.isRepo ? '⑂  ' : '·  ') + e.name, e.path, () => openBrowse(e.path), !e.isRepo));
+    }
+    if (b.denied) list.push(el('div', { style: 'padding:8px 10px;font-size:11.5px;color:var(--warning)' }, ip('this folder cannot be read')));
+    else if (!list.length) list.push(el('div', { style: 'padding:8px 10px;font-size:11.5px;color:var(--muted-foreground)' }, ip('no sub-folders here')));
+    rows.push(el('div', { style: 'max-height:220px;overflow-y:auto' }, list));
+  }
+  return el('div', { style: 'margin:0 14px 10px;border:1px solid var(--border)' }, rows);
+}
+
+function srcButton(id, label) {
+  const on = state.addSrc === id;
+  return el('button', {
+    onClick: () => setState({ addSrc: id }),
+    style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;background:'
+      + (on ? 'var(--secondary)' : 'transparent') + ';border:1px solid ' + (on ? 'var(--input)' : 'var(--border)')
+      + ';color:' + (on ? 'var(--foreground)' : 'var(--muted-foreground)'),
+    hover: 'border-color:var(--ring)',
+  }, ip(label));
+}
+
+/**
+ * Land on a freshly added repository — the prototype's post-ingest selection (lines 1602, 1616).
+ * `detail` is deliberately NOT touched: panel 3 stays on the add-product form so the ingest log the
+ * PM just triggered is still on screen next to the board it produced.
+ */
+function landOn(id, slug) {
+  setState((s) => ({
+    addedProducts: s.addedProducts.find((x) => x.id === id) ? s.addedProducts
+      : [...s.addedProducts, { ...(ADDABLE_PRODUCTS[id] || { id, sub: '0 initiatives', kind: 'github' }) }],
+    mode: 'product', product: id, sel: slug,
+  }));
+}
+
+function alreadyAdded(id) {
+  return (state.addedProducts || []).some((x) => x.id === id);
+}
+
+/** ⇣ connect + ingest (lines 1595–1611). */
+function ingestGithub() {
+  if (FIXTURE) {
+    if (alreadyAdded('atlas-mobile')) { setState({ addLog: INGEST_ALREADY('atlas-mobile') }); return; }
+    // The scan imports two ADRs into knowledge alongside the board (lines 1597–1601), so the
+    // `knowledge` mode shows what the ingest claimed to have read.
+    setState((s) => ({ addLog: INGEST_LOG_GITHUB(s.addRepo), extraKnow: { ...s.extraKnow, ...INGESTED_KNOW } }));
+    landOn('atlas-mobile', firstSlugOf('atlas-mobile'));
+    return;
+  }
+  addThroughData(state.addRepo, 'github');
+}
+
+/** ＋ add product (lines 1612–1617). */
+function addLocal() {
+  if (FIXTURE) {
+    if (alreadyAdded('notes-cli')) { setState({ addLog: INGEST_ALREADY('notes-cli') }); return; }
+    setState({ addLog: INGEST_LOG_LOCAL(state.addPath) });
+    landOn('notes-cli', firstSlugOf('notes-cli'));
+    return;
+  }
+  addThroughData(state.addPath, 'local');
+}
+
+/**
+ * The honest path. With a data layer that can register a repository, the log is whatever that layer
+ * reports. Without one, the log says so in one line and nothing is added — the alternative is a
+ * board showing a repository the server has never heard of.
+ */
+function addThroughData(target, kind) {
+  const source = String(target || '').trim();
+  if (!source) {
+    setState({ addLog: [{ t: 'nothing to add — name a ' + (kind === 'github' ? 'repository' : 'folder') + ' first', c: 'var(--warning)' }] });
+    return;
+  }
+  if (!dataMod || typeof dataMod.addRepo !== 'function') {
+    setState({ addLog: [
+      { t: '$ pmos product add ' + source, c: 'var(--success)' },
+      { t: 'no local endpoint for adding a repository — nothing was read, and nothing was written', c: 'var(--warning)' },
+    ] });
+    return;
+  }
+  setState({ addLog: [{ t: '$ pmos product add ' + source, c: 'var(--success)' }] });
+  Promise.resolve(dataMod.addRepo({ source, kind })).then((res) => {
+    const log = Array.isArray(res && res.log) ? res.log : [];
+    setState((s) => ({ addLog: [...s.addLog, ...log] }));
+    const tuple = toTuple(res && res.repo ? res.repo : res);
+    if (!tuple) return;
+    realRepos = [...(realRepos || []).filter((r) => r[0] !== tuple[0]), tuple];
+    initiativesByRepo.delete(tuple[0]);
+    // The repository is now in the real list, so it must NOT also go into `addedProducts` — that
+    // list is the fixture's in-window overlay and would render the row twice.
+    setState({ mode: 'product', product: tuple[0], sel: null });
+    if (typeof dataMod.loadInitiatives !== 'function') return;
+    Promise.resolve(dataMod.loadInitiatives(tuple[0])).then((payload) => {
+      const found = firstSlugIn(payload);
+      initiativesByRepo.set(tuple[0], found || null);
+      if (found && state.product === tuple[0] && !state.sel) setState({ sel: found });
+    }).catch(() => { /* the repository is added either way; panel 3 reports the read */ });
+  }).catch((e) => {
+    setState((s) => ({ addLog: [...s.addLog, { t: 'failed — ' + (e && e.message ? e.message : String(e)), c: 'var(--destructive)' }] }));
+  });
+}
+
+/**
+ * The `addprod` detail body, as an array of sibling nodes. Panel 3 appends these after its own
+ * sticky header — see the module header for why this lives here rather than in `panel-detail.js`.
+ */
+export function addProductBody() {
+  const isGh = state.addSrc === 'github';
+  const log = state.addLog || [];
+  const out = [];
+
+  out.push(el('div', { style: 'padding:13px 14px 11px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'font-family:var(--mono);font-size:15px;font-weight:600' }, 'add a product'),
+    el('div', { style: 'font-size:12px;color:var(--muted-foreground);margin-top:2px' }, 'one product = one repo'),
+  ));
+
+  out.push(el('div', { style: 'display:flex;gap:4px;padding:10px 14px 2px' },
+    srcButton('github', 'github repo'),
+    srcButton('local', 'local folder'),
+  ));
+
+  if (isGh) {
+    out.push(el('div', { style: rowStyle },
+      el('span', { style: labelStyle }, 'repo'),
+      field('addRepo', state.addRepo),
+    ));
+    out.push(el('div', { style: 'padding:2px 14px 8px;font-size:11.5px;line-height:1.7;color:var(--muted-foreground)' },
+      'Ingest plan: clone the repo → scan ',
+      el('span', { style: 'font-family:var(--mono)' }, 'planning/'),
+      ' for initiative records → import ADRs into knowledge → propose a board with guessed anchors. ',
+      el('span', { style: 'color:var(--foreground)' }, 'You confirm every anchor — the scan proposes, it never decides.'),
+    ));
+    out.push(el('div', { style: 'padding:2px 14px 12px;border-bottom:1px solid var(--border)' },
+      el('button', { onClick: ingestGithub, style: goStyle }, '⇣ connect + ingest'),
+    ));
+  } else {
+    // Field FIRST, chooser beside it: the path is still typeable (and still the thing that gets
+    // registered), the button only fills it in. The row keeps label + input as its first two
+    // children, which is the shape panel 1's suite reads.
+    out.push(el('div', { style: browseRowStyle },
+      el('span', { style: labelStyle }, 'folder'),
+      field('addPath', state.addPath),
+      el('button', { onClick: chooseFolder, style: chooseStyle, hover: 'border-color:var(--ring)' },
+        ip(state.addPicking ? 'choosing…' : 'choose…')),
+    ));
+    if (state.addBrowse) out.push(browseBody());
+    out.push(el('div', { style: 'padding:2px 14px 8px;font-size:11.5px;line-height:1.5;color:var(--muted-foreground)' },
+      'Starts with an empty board — nothing is imported from a bare folder. File the first initiative to begin.'));
+    out.push(el('div', { style: 'padding:2px 14px 12px;border-bottom:1px solid var(--border)' },
+      el('button', { onClick: addLocal, style: goStyle }, '＋ add product'),
+    ));
+  }
+
+  if (log.length) {
+    out.push(el('div', { style: 'padding:9px 14px 4px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground)' }, 'ingest log'));
+    out.push(el('div', { style: 'padding:4px 14px 12px;font-family:var(--mono);font-size:11px;line-height:1.8' },
+      log.map((l) => el('div', { style: 'color:' + l.c + ';white-space:pre-wrap;overflow-wrap:anywhere' }, ip(l.t))),
+    ));
+  }
+
+  out.push(el('div', { style: 'margin-top:auto;padding:8px 14px;border-top:1px solid var(--border);font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' },
+    'pmos product add <repo | folder>'));
+
+  return out;
+}
+
+/** Append the add-repository form to `host`. Does NOT clear — panel 3's header is already there. */
+export function renderAddProduct(host) {
+  for (const n of addProductBody()) host.appendChild(n);
+  return host;
+}
+
+/* Exposed for the browser suite: the drawer's exact shape is an acceptance criterion (two groups,
+ * no `workflow`), and an assertion should be able to read it without scraping the DOM. */
+export const settingsGroups = () => DRAWER_GROUPS.map((g) => ({ label: g.label, items: [...g.items] }));