create-pmos 0.10.0 → 0.11.0

package/workspace/public/app.js

@@ -19,7 +19,10 @@ const state = {
   ws: null, sessions: [], workspaces: [], home: null, openHarness: new Set(),
   wsId: null,                   // selected workspace
   lib: null,                    // library payload for the selected workspace
-  lens: 'initiatives',          // 'initiatives' | 'folders'
+  lens: 'dossier',              // the current sub-view: dossier | folders | scheduled | history
+  detail: { kind: 'repo', id: null, wsId: null },   // R7 — what the rail is showing, from the selection
+  libByWs: {},                 // ws id -> library payload, so a dossier can be read for a tree that
+                               // is NOT selected (R9: opening a dossier is a read, never a checkout)
   filter: '',
   active: null,                 // active session id — always groups[focusG].activeId
   groups: [{ activeId: null }, { activeId: null }],  // terminal groups (R6); [1] exists when split
@@ -44,6 +47,13 @@ const state = {
   worktrees: [],               // the selected workspace's repo's working trees, with removability
   newBranchMode: false,        // new-session form: creating a branch vs picking an existing one
   sessSig: null,               // structural fingerprint of the last session push (see structSig)
+  boards: {},                  // repo_key -> cached workflow board (lib/board-cache envelope)
+  boardWanted: new Set(),      // repo_keys a fetch is already in flight for
+  boardTries: {},              // repo_key -> re-polls spent waiting for a pending board
+  boardsStopped: false,        // set on unload — nothing may keep polling a page that is going away
+  needsByWs: {},               // ws id -> {count,error} — what a COLLAPSED tree row shows (R12)
+  openTrees: new Set(),        // trees the PM opened explicitly — beats the derived default (R6)
+  closedTrees: new Set(),      // …and the ones they closed explicitly
 };
 
 // ── workspace state survives reloads (R7): theme + selected workspace + focused session,
@@ -53,7 +63,12 @@ const store = {
   set: (k, v) => { try { localStorage.setItem('pmos-ws:' + k, v); } catch {} },
 };
 { const t = store.get('theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t; }
-{ const l = store.get('lens'); if (['folders', 'initiatives', 'scheduled', 'history'].includes(l)) state.lens = l; }
+// R13 — the lens key stays where it was (global localStorage, not per-workspace) rather than being
+// moved silently; only its vocabulary changes. `initiatives` is retired and maps to the dossier,
+// which is the same intent expressed against the new structure.
+{ const l = store.get('lens');
+  if (['folders', 'scheduled', 'history', 'dossier'].includes(l)) state.lens = l;
+  else if (l === 'initiatives') state.lens = 'dossier'; }
 // ?ws=<id> is how `pmos` in another repo lands you in THAT repo, not the last one you opened.
 const urlWs = new URLSearchParams(location.search).get('ws');
 
@@ -107,7 +122,7 @@ function handle(m) {
   } else if (m.t === 'workspaces') {
     state.workspaces = m.workspaces;
     if (!state.workspaces.some((w) => w.id === state.wsId)) selectWorkspace(state.home, { restoreSession: true });
-    else renderWorkspaces();
+    else { renderWorkspaces(); renderTree(); loadBoards(); }
   } else if (m.t === 'focus') {
     // `pmos` was run in another repo while this tab was open — go there, which is the whole
     // point: the browser refocusing this tab must not strand the PM on the previous repo.
@@ -206,6 +221,7 @@ async function selectWorkspace(id, opts = {}) {
   if (changed) closeDoc();
   renderWorkspaces();
   renderSessions();
+  loadBoards();
   // focus a session in THIS workspace: the remembered one if it belongs here, else its first live one
   const mine = mySessions();
   const remembered = opts.restoreSession ? store.get('active') : null;
@@ -215,8 +231,255 @@ async function selectWorkspace(id, opts = {}) {
   // the scratchpad follows the ACTIVE TAB, and selectSession/clearActive above have already
   // settled which that is — syncActive() reloaded it, so there is nothing to do here
   if (changed) { state.branch = null; renderBranch(); state.worktrees = []; renderWorktrees(); loadLayouts(); }
+  // R7 — the rail follows the selection. A tree on an initiative branch opens its dossier; anything
+  // else falls back to repo detail rather than showing a dossier for an initiative that is not there.
+  {
+    const w = state.workspaces.find((x) => x.id === id);
+    const init = w ? initiativeOf(w) : null;
+    if (init && init.id) { state.detail = { kind: 'initiative', id: init.id, wsId: id }; if (state.lens === 'dossier') ensureLib(id); }
+    else { state.detail = { kind: 'repo', id: w ? w.repo_key : null, wsId: id }; if (state.lens === 'dossier') state.lens = 'folders'; }
+  }
   await Promise.all([loadLibrary(), loadNeeds(), loadBranch(), loadWorktrees()]);
 }
+/* ── The tree (R1·R2·R3·R4·R5·R6) ────────────────────────────────────────────────────────────────
+ *
+ * One structure where there were two panes: REPOSITORY → its working trees → their sessions.
+ *
+ * A row is a working TREE, labelled by the INITIATIVE on its branch. Those are the same level, not
+ * two: git allows exactly one working tree per branch, and every session in a tree shares that
+ * branch (lib/git-info.js), so nesting them separately would produce a middle row with exactly one
+ * child forever. The DIRECTORY name stays on the row permanently — the shared-tree checkout path
+ * moves every session in a repo, which relabels a row under its running sessions, and without a
+ * stable identity that reads as a row vanishing and another appearing (R2).
+ *
+ * Everything a row asserts about workflow is DERIVED and dated. `board` arrives from the cache
+ * (lib/board-cache.js), never computed here, and a stage is never drawn without the branch it came
+ * from (R5) — on this repo the ladder is scoped to merge-base(origin/main,HEAD)..HEAD, so a shipped
+ * initiative reads `spec` on every branch that did not build it.
+ */
+const TREE_GLYPH = { working: '●', quiet: '◼', blocked: '✗', idle: '—', exited: '○', none: '·' };
+
+// The initiative a branch names, and the record behind it — three cases, all of them stated. A
+// branch with no record is NOT an initiative with a missing file; it is a branch, and the row says
+// so rather than inventing an id (R2).
+function initiativeOf(w) {
+  const br = w.branch;
+  if (!br) return { kind: 'nobranch', label: w.branch_error ? 'branch unreadable' : 'detached HEAD', id: null };
+  const m = /^initiative\/(.+)$/.exec(br);
+  if (!m) return { kind: 'branch', label: br, id: null };
+  const id = m[1];
+  const row = boardRow(w, id);
+  if (!row) return { kind: 'norecord', label: id, id };
+  return { kind: 'initiative', label: id, id, row };
+}
+// The board for a repository, by group key — one cached read serves every tree under it.
+function boardFor(w) { return state.boards[w.repo_key] || null; }
+function boardRow(w, id) {
+  const b = boardFor(w);
+  if (!b || !b.data || !Array.isArray(b.data.live)) return null;
+  return b.data.live.find((r) => r.id === id) || null;
+}
+// A tree has something to say when it is working, has gone quiet past the threshold, is blocked, or
+// something needs the PM. Rows without a signal collapse to a count (R6). The PM's own toggle always
+// wins — `state.openTrees` holds it, and it is re-applied after every render for the same reason
+// `state.openHarness` is: this pane is rebuilt by innerHTML on every push.
+function treeHasSignal(w) {
+  const mine = state.sessions.filter((s) => s.ws === w.id);
+  if (state.needsByWs[w.id] && state.needsByWs[w.id].count) return true;
+  if (state.needsByWs[w.id] && state.needsByWs[w.id].error) return true;
+  const init = initiativeOf(w);
+  if (init.row && init.row.blockers && init.row.blockers.length) return true;
+  return mine.some((s) => {
+    const shown = stateLabel(s).shown;
+    return shown === 'working' || shown === 'blocked' || shown === 'exited';
+  });
+}
+function treeOpen(w) {
+  if (state.openTrees.has(w.id)) return true;
+  if (state.closedTrees.has(w.id)) return false;
+  return w.id === state.wsId || treeHasSignal(w);
+}
+// The worst thing true of a collapsed tree, so the glyph never reads calmer than the tree is.
+function treeGlyph(w) {
+  const mine = state.sessions.filter((s) => s.ws === w.id);
+  const n = state.needsByWs[w.id];
+  const init = initiativeOf(w);
+  if ((n && n.error) || (init.row && init.row.blockers && init.row.blockers.length)) return 'blocked';
+  if (mine.some((s) => stateLabel(s).shown === 'blocked')) return 'blocked';
+  if (mine.some((s) => stateLabel(s).shown === 'working')) return 'working';
+  if (mine.some((s) => stateLabel(s).shown === 'quiet')) return 'quiet';
+  if (mine.length) return 'exited';
+  return 'idle';
+}
+function renderTree() {
+  const host = $('tree');
+  if (!host) return;
+  // group by repository (R3): `pmos` and `pmos ⑂ initiative/foo` are a parent and its child, not
+  // two peers. The key comes from the server — `git worktree list` names the main worktree first.
+  const groups = new Map();
+  for (const w of state.workspaces) {
+    const key = w.repo_key || w.root;
+    if (!groups.has(key)) groups.set(key, { key, name: w.repo_name || w.name, trees: [] });
+    groups.get(key).trees.push(w);
+  }
+  const totalNeeds = Object.values(state.needsByWs).reduce((a, v) => a + (v && v.count ? v.count : 0), 0);
+  const badRead = Object.values(state.needsByWs).some((v) => v && v.error);
+  const nc = $('needCount');
+  if (nc) {
+    nc.textContent = badRead ? 'needs unreadable' : (totalNeeds ? `${totalNeeds} need you` : '');
+    nc.dataset.bad = badRead ? '1' : '0';
+  }
+
+  const html = [...groups.values()].map((g) => {
+    const trees = g.trees.map((w) => treeRow(w, g)).join('');
+    return `<div class="repo-group" data-repo="${esc(g.key)}">
+      <button class="repo-head" data-repo-pick="${esc(g.key)}" title="${esc(g.key)}">
+        <span class="cue" aria-hidden="true">▾</span><span class="nm">${esc(g.name)}</span>
+        <small>${g.trees.length} tree${g.trees.length === 1 ? '' : 's'}</small>
+      </button>${trees}</div>`;
+  }).join('');
+  host.innerHTML = html || `<div class="empty">No repositories — run <b>pmos</b> inside one.</div>`;
+  host.querySelectorAll('[data-pick]').forEach((b) => b.onclick = () => selectWorkspace(b.dataset.pick));
+  host.querySelectorAll('[data-repo-pick]').forEach((b) => b.onclick = () => openRepoDetail(b.dataset.repoPick));
+  host.querySelectorAll('[data-forget]').forEach((b) => b.onclick = (e) => { e.stopPropagation(); forgetWorkspace(b.dataset.forget); });
+  host.querySelectorAll('[data-toggle]').forEach((b) => b.onclick = (e) => {
+    e.stopPropagation();
+    const id = b.dataset.toggle;
+    // an explicit choice is remembered against the derived default, either way
+    if (treeOpen(state.workspaces.find((x) => x.id === id) || { id })) { state.openTrees.delete(id); state.closedTrees.add(id); }
+    else { state.closedTrees.delete(id); state.openTrees.add(id); }
+    renderTree();
+  });
+  host.querySelectorAll('.sess').forEach((b) => {
+    b.onclick = () => selectSession(b.dataset.id);
+    b.ondblclick = () => startRename(b.dataset.id);
+    b.onkeydown = (e) => { if (e.key === 'F2') { e.preventDefault(); startRename(b.dataset.id); } };
+  });
+  host.querySelectorAll('[data-rename]').forEach((b) => b.onclick = (e) => { e.stopPropagation(); startRename(b.dataset.rename); });
+  host.querySelectorAll('details.hz').forEach((d) => {
+    d.open = state.openHarness.has(d.dataset.id);
+    d.addEventListener('toggle', () => {
+      if (d.open) state.openHarness.add(d.dataset.id); else state.openHarness.delete(d.dataset.id);
+    });
+  });
+  paintRename();
+}
+function treeRow(w, g) {
+  const cur = w.id === state.wsId;
+  const open = treeOpen(w);
+  const init = initiativeOf(w);
+  const mine = state.sessions.filter((s) => s.ws === w.id);
+  const live = mine.filter((s) => s.state !== 'exited').length;
+  const n = state.needsByWs[w.id];
+  const gl = treeGlyph(w);
+  const board = boardFor(w);
+
+  // R5 — a stage is never shown without the branch it was derived from, and never without saying
+  // how old the derivation is. A board still deriving says so instead of showing nothing.
+  let wf = '';
+  if (init.row) {
+    const r = init.row;
+    const blocked = r.blockers && r.blockers.length;
+    const nextTxt = blocked ? `✗ ${r.blockers.length} blocked`
+      : (r.next && r.next.step ? `→ ${esc(r.next.step)}` : '');
+    wf = `<span class="wf"><span class="lane">${esc(r.lane || '')}</span>
+      <span class="stg">${esc(r.stage || '')}</span>
+      <span class="${blocked ? 'bl' : 'nx'}">${nextTxt}</span></span>`;
+  } else if (board && board.pending) {
+    wf = `<span class="wf"><span class="drv">deriving the ladder…</span></span>`;
+  } else if (board && board.ok === false) {
+    wf = `<span class="wf"><span class="bl">ladder unreadable</span></span>`;
+  } else if (init.kind === 'norecord') {
+    wf = `<span class="wf"><span class="drv">no initiative record</span></span>`;
+  } else if (init.kind === 'branch') {
+    wf = `<span class="wf"><span class="drv">no initiative</span></span>`;
+  }
+  // the attribution line: which branch this ladder came from, and as of when
+  const stamp = board && board.as_of ? new Date(board.as_of).toLocaleTimeString() : null;
+  const attrib = init.row
+    ? `<span class="attrib">derived on <b>${esc(w.branch || '?')}</b>${stamp ? ` · as of ${esc(stamp)}` : ''}${board && board.stale ? ' · refreshing' : ''}</span>`
+    : '';
+
+  const sessHtml = open ? mine.map((s) => sessionRow(s)).join('')
+    + `<button class="tree-new" data-pick="${esc(w.id)}" title="select this tree, then start a session">＋ session here</button>`
+    : '';
+  const collapsed = !open && mine.length
+    ? `<span class="rollup">${mine.length} session${mine.length === 1 ? '' : 's'}${live ? '' : ' · all exited'}</span>` : '';
+
+  return `<div class="treerow" data-id="${esc(w.id)}" data-open="${open}" data-st="${gl}">
+    <div class="tr-head">
+      <button class="tr-toggle" data-toggle="${esc(w.id)}" aria-expanded="${open}"
+        aria-label="${open ? 'Collapse' : 'Expand'} ${esc(init.label)}"><span class="cue" aria-hidden="true">${open ? '▾' : '▸'}</span></button>
+      <button class="tr" data-pick="${esc(w.id)}" aria-current="${cur}" title="${esc(w.root)}">
+        <span class="r1"><span class="g" aria-hidden="true">${TREE_GLYPH[gl] || '·'}</span>
+          <span class="nm">${esc(init.label)}</span>
+          ${w.home ? '<span class="tag">home</span>' : ''}
+          <span class="dir">${esc(w.name === g.name ? 'main tree' : w.name)}</span></span>
+        <span class="r2">${wf}${n && n.count ? `<span class="needs-n">${n.count} need you</span>` : ''}${n && n.error ? '<span class="bl">needs unreadable</span>' : ''}${collapsed}</span>
+        ${attrib}
+      </button>
+      ${w.home ? '' : `<button class="forget" data-forget="${esc(w.id)}" aria-label="Stop hosting ${esc(w.name)}" title="${live ? 'end its sessions first' : 'stop hosting this repo (the repo is untouched)'}">✕</button>`}
+    </div>
+    <div class="tr-sessions">${sessHtml}</div>
+  </div>`;
+}
+// One session, with everything the old pane carried — nothing about a row's CONTENT changes here,
+// only where it sits (R1). Glyph, state word, quiet duration, open-call age, opening focus, the
+// agent's last words, the harness drill-in and rename all come through unchanged.
+function sessionRow(s) {
+  const st = stateLabel(s);
+  return `<div class="sessrow" data-id="${s.id}">
+    <button class="sess" data-id="${s.id}" data-state="${st.shown}" aria-current="${s.id === state.active}"
+      aria-label="${esc(s.name)} — ${esc(st.text)}">
+      <span class="r1"><span class="st" aria-hidden="true">${GLYPH[st.shown] || '•'}</span>
+        <span class="nm">${esc(s.name)}${s.origin && s.origin.startsWith('schedule:') ? '<span class="schtag">scheduled</span>' : ''}</span>
+        <span class="chip">${esc(st.text)}</span></span>
+      ${subLine(s)}
+      ${saysLine(s)}
+    </button>
+    <button class="ren" data-rename="${s.id}" aria-label="Rename ${esc(s.name)}" title="rename (F2)">✎</button>
+  </div>${harnessDrawer(s)}`;
+}
+
+/* The board arrives from the server's cache, one read per REPOSITORY (not per tree, not per row).
+ * A cold read answers `pending` in milliseconds and the derivation runs in a child process — it
+ * costs ~30s on this repo and is fully synchronous, so it must never sit on a request path. While
+ * it is pending the rows say "deriving the ladder…" rather than showing nothing: a blank stage is
+ * indistinguishable from "this tree has no initiative", and those are different facts. */
+window.addEventListener('pagehide', () => { state.boardsStopped = true; });
+async function loadBoards() {
+  if (state.boardsStopped) return;
+  const wanted = new Map();
+  for (const w of state.workspaces) if (w.repo_key && !wanted.has(w.repo_key)) wanted.set(w.repo_key, w.id);
+  for (const [key, wsId] of wanted) {
+    if (state.boardWanted.has(key)) continue;
+    state.boardWanted.add(key);
+    (async () => {
+      try {
+        const r = await fetch('/api/console?name=workflow&ws=' + encodeURIComponent(wsId));
+        const payload = await r.json();
+        state.boards[key] = payload;
+        renderTree();
+        // pending is not failed — come back for it, rather than leaving a row saying "deriving"
+        // forever if the child never lands
+        if (payload && payload.pending && !state.boardsStopped) {
+          const tries = (state.boardTries[key] || 0) + 1;
+          state.boardTries[key] = tries;
+          // bounded: a derivation that never lands leaves the row saying so, rather than a request
+          // every 3s forever — which in the browser suite showed up as failed requests after teardown
+          if (tries <= 40) setTimeout(() => { state.boardWanted.delete(key); loadBoards(); }, 3000);
+          else state.boardWanted.delete(key);
+        }
+        else state.boardWanted.delete(key);
+      } catch {
+        state.boards[key] = { ok: false, error: 'could not reach the workspace server for the ladder' };
+        state.boardWanted.delete(key);
+        renderTree();
+      }
+    })();
+  }
+}
+
 function renderWorkspaces() {
   const html = state.workspaces.map((w) => {
     const n = state.sessions.filter((s) => s.ws === w.id && s.state !== 'exited').length;
@@ -318,41 +581,9 @@ function stateLabel(s) {
   return { shown, text: SS.label(shown, { quietMs, call: openCallOf(s), fmtDur: shortDur }) };
 }
 function renderSessions() {
-  const mine = mySessions();
-  $('sessCount').textContent = String(mine.length);
-  const needN = state.needs.length;
-  $('needCount').textContent = needN ? `${needN} need you` : '';
-  $('sessions').innerHTML = mine.length ? mine.map((s) => {
-    const st = stateLabel(s);
-    return `
-    <div class="sessrow" data-id="${s.id}">
-      <button class="sess" data-id="${s.id}" data-state="${st.shown}" aria-current="${s.id === state.active}"
-        aria-label="${esc(s.name)} — ${esc(st.text)}">
-        <span class="r1"><span class="st" aria-hidden="true">${GLYPH[st.shown] || '•'}</span>
-          <span class="nm">${esc(s.name)}${s.origin && s.origin.startsWith('schedule:') ? '<span class="schtag">scheduled</span>' : ''}</span>
-          <span class="chip">${esc(st.text)}</span></span>
-        ${subLine(s)}
-        ${saysLine(s)}
-      </button>
-      <button class="ren" data-rename="${s.id}" aria-label="Rename ${esc(s.name)}" title="rename (F2)">✎</button>
-    </div>${harnessDrawer(s)}`;
-  }).join('')
-    : `<div class="empty">None running here — <b>＋ new session</b> to run an agent in this repo.</div>`;
-  $('sessions').querySelectorAll('.sess').forEach((b) => {
-    b.onclick = () => selectSession(b.dataset.id);
-    b.ondblclick = () => startRename(b.dataset.id);
-    b.onkeydown = (e) => { if (e.key === 'F2') { e.preventDefault(); startRename(b.dataset.id); } };
-  });
-  $('sessions').querySelectorAll('[data-rename]').forEach((b) => b.onclick = () => startRename(b.dataset.rename));
-  // Restore each drill-in's openness AFTER render. renderSessions() replaces the pane's
-  // innerHTML on every server push, so a bare <details open> closes itself; openness is held
-  // in state and re-applied here — the same shape as paintRename() below.
-  $('sessions').querySelectorAll('details.hz').forEach((d) => {
-    d.open = state.openHarness.has(d.dataset.id);
-    d.addEventListener('toggle', () => {
-      if (d.open) state.openHarness.add(d.dataset.id); else state.openHarness.delete(d.dataset.id);
-    });
-  });
+  // The rows themselves live in the tree now (R1). This stays as the single entry point every
+  // session push already calls, so the tree, the tab strips and the overlay all repaint together.
+  renderTree();
   renderTabs();
   updateEmptyOverlay();
   paintRename();
@@ -464,7 +695,7 @@ function structSig(list) {
 function paintVolatile() {
   tickQuiet();                       // chip, glyph, data-state, accessible name (both surfaces)
   for (const s of mySessions()) {
-    const row = $('sessions').querySelector(`.sessrow[data-id="${s.id}"]`);
+    const row = document.querySelector(`#tree .sessrow[data-id="${s.id}"]`);
     if (!row) continue;
     // the sub-line ("opening focus …" or the agent · cwd fallback) and the agent's last words —
     // both come from the server and both were frozen at the last lifecycle event. Assign only on a
@@ -480,7 +711,7 @@ function paintVolatile() {
     } else if (says) { says.remove(); }
     // the drill-in's rows — model, tokens, tools, skills. Only the <dl> is replaced, so the
     // <details> element itself (and therefore its open/closed state) is untouched.
-    const dl = $('sessions').querySelector(`details.hz[data-id="${s.id}"] .kv`);
+    const dl = document.querySelector(`#tree details.hz[data-id="${s.id}"] .kv`);
     if (dl) { const next = harnessRows(s); if (dl.innerHTML !== next) dl.innerHTML = next; }
   }
 }
@@ -488,7 +719,7 @@ function paintVolatile() {
 // accessible name only — never innerHTML — so an open drill-in and an in-flight rename survive.
 function tickQuiet() {
   for (const s of mySessions()) {
-    const btn = $('sessions').querySelector(`.sess[data-id="${s.id}"]`);
+    const btn = document.querySelector(`.sess[data-id="${s.id}"]`);
     if (!btn) continue;
     const st = stateLabel(s);
     if (btn.dataset.state !== st.shown) {
@@ -581,7 +812,7 @@ function commitRename() {
 function paintRename() {
   const id = state.renaming;
   if (!id) return;
-  const row = $('sessions').querySelector(`.sessrow[data-id="${id}"]`);
+  const row = document.querySelector(`#tree .sessrow[data-id="${id}"]`);
   // rename in place wherever the PM double-clicked: the sidebar row, or either group's tab
   const tab = $(GROUP_TABS[state.focusG]).querySelector(`.stab-wrap[data-id="${id}"]`)
     || document.querySelector(`.stabs .stab-wrap[data-id="${id}"]`);
@@ -792,16 +1023,217 @@ function refreshLibrary() { loadLibrary(); }
 function maybeAutoRefreshLibrary() { if (state.wsId && Date.now() - lastLibLoad > 4000) loadLibrary(); }
 window.addEventListener('focus', maybeAutoRefreshLibrary);
 document.addEventListener('visibilitychange', () => { if (!document.hidden) maybeAutoRefreshLibrary(); });
+
+/* ── The rail's detail (R7·R8·R9) ────────────────────────────────────────────────────────────────
+ *
+ * The four standing lenses are replaced by ONE context-driven detail: a repository group gives repo
+ * detail (the complete folder map, its schedules, its history — the three views that were never
+ * initiative-scoped), a tree row gives that initiative's DOSSIER.
+ *
+ * The dossier is the promoted leg-A specimen (prototype/workspace-initiative-nav, Option B r2). Its
+ * one non-obvious rule: THE LANE OWNS THE DENOMINATOR. A chore owes an intent, not a PRD; a
+ * discovery spike owes a brief and nothing else. Measuring every initiative against one universal
+ * slate — r1 of the specimen did exactly that — makes a complete discovery read as nine failures.
+ * `n/a` here is never inferred: it comes from the engine's own step status.
+ */
+const DOSSIER_GROUPS = [
+  { key: 'strategy', label: 'strategy', roles: ['record', 'brief', 'research', 'scoping', 'intake', 'OKR'] },
+  { key: 'spec',     label: 'spec',     roles: ['PRD', 'rubric', 'user stories', 'explainer'] },
+  { key: 'design',   label: 'design',   roles: ['design brief', 'design', 'copy brief', 'copy', 'specimen', 'grilling'] },
+  { key: 'build',    label: 'build',    roles: ['reconcile', 'harness', 'fixture'] },
+  { key: 'learning', label: 'learning', roles: ['eval', 'findings', 'dogfood', 'rejected'] },
+];
+// Which ladder steps speak for which group, so a group can say "n/a for this lane" in the engine's
+// own words instead of a guess of our own.
+const GROUP_STEPS = {
+  strategy: ['route', 'anchor'],
+  spec: ['understand', 'spec', 'prototype'],
+  design: ['prototype'],
+  build: ['priors', 'contract', 'build', 'quality'],
+  learning: ['review', 'explain', 'accept'],
+};
+
+function detailWs() {
+  const id = state.detail.wsId || state.wsId;
+  return state.workspaces.find((w) => w.id === id) || null;
+}
+// The library for whichever tree the detail is about — NOT necessarily the selected one. Fetched on
+// demand and cached, because a dossier must be openable for a tree the PM is not standing in.
+async function ensureLib(wsId) {
+  if (!wsId) return null;
+  if (wsId === state.wsId && state.lib) { state.libByWs[wsId] = state.lib; return state.lib; }
+  if (state.libByWs[wsId]) return state.libByWs[wsId];
+  try {
+    const r = await fetch('/api/library?ws=' + encodeURIComponent(wsId));
+    const j = await r.json();
+    state.libByWs[wsId] = j;
+    return j;
+  } catch { return null; }
+}
+/* Open an initiative's dossier. THIS IS A READ: it never switches working tree, never changes
+ * state.wsId, and never touches the branch. Only clicking a tree row does that (R9). */
+async function openInitiative(id, wsId) {
+  state.detail = { kind: 'initiative', id, wsId: wsId || state.wsId };
+  state.lens = 'dossier';
+  showRail();
+  renderLibrary();
+  await ensureLib(state.detail.wsId);
+  renderLibrary();
+}
+function openRepoDetail(repoKey) {
+  state.detail = { kind: 'repo', id: repoKey, wsId: state.wsId };
+  if (state.lens === 'dossier') state.lens = 'folders';
+  renderLibrary();
+}
+// The sub-views available for what is currently selected. `dossier` only exists when an initiative
+// is in view — a dead tab that cannot be filled is worse than an absent one.
+function renderLensTabs() {
+  const host = $('lensTabs');
+  if (!host) return;
+  const views = state.detail.kind === 'initiative'
+    ? [['dossier', 'dossier'], ['folders', 'folders'], ['scheduled', 'scheduled'], ['history', 'history']]
+    : [['folders', 'folders'], ['scheduled', 'scheduled'], ['history', 'history']];
+  host.innerHTML = views.map(([k, label]) =>
+    `<button role="tab" data-lens="${k}" aria-selected="${state.lens === k}">${esc(label)}</button>`).join('');
+  host.querySelectorAll('button').forEach((b) => b.onclick = () => {
+    state.lens = b.dataset.lens; store.set('lens', state.lens);
+    $('libFind').placeholder = FIND_PLACEHOLDER[state.lens] || 'filter the library…';
+    renderLibrary();
+  });
+}
+// R9 — name the repository these documents come from. getWs() silently falls back to the home
+// workspace on an id it cannot resolve, so a rail that does not say what it is reading can show
+// another repository's files with no visual difference at all.
+function renderReading() {
+  const el = $('libWho');
+  if (!el) return;
+  const w = detailWs();
+  if (!w) { el.textContent = ''; return; }
+  const away = w.id !== state.wsId;
+  el.textContent = w.name + (away ? ' · not the selected tree' : '');
+  el.dataset.away = away ? '1' : '0';
+  el.title = w.root;
+}
+
+function dossierRow(a) {
+  return `<button class="dz-art" data-doc="${esc(a.path)}">
+    <span class="role">${esc(a.role || 'doc')}</span>
+    <span class="pth">${esc(a.path)}</span></button>`;
+}
+function renderDossier() {
+  const host = $('library');
+  const id = state.detail.id;
+  const w = detailWs();
+  const board = w ? boardFor(w) : null;
+  const row = board && board.data && Array.isArray(board.data.live)
+    ? board.data.live.find((r) => r.id === id) : null;
+  const lib = (w && state.libByWs[w.id]) || (w && w.id === state.wsId ? state.lib : null);
+  const group = lib && Array.isArray(lib.initiatives) ? lib.initiatives.find((g) => g.id === id) : null;
+
+  if (board && board.ok === false) {
+    host.innerHTML = csError('the initiative ladder', board.error || 'the board could not be derived');
+    return;
+  }
+  const head = `<div class="dz-head">
+    <div class="dz-id">${esc(id)}</div>
+    ${group && group.title ? `<div class="dz-t">${esc(group.title)}</div>` : ''}
+    <div class="dz-meta">
+      ${row ? `<span class="pill lane">${esc(row.lane || '')}</span>` : ''}
+      ${row ? `<span class="pill">${row.stage === 'accepted' ? 'accepted' : 'stage ' + esc(row.stage || '')}</span>` : ''}
+      ${row && row.anchor ? `<span class="pill">${esc(String(row.anchor).split(/[(—]/)[0].trim())}</span>` : ''}
+      ${row && row.legacy ? '<span class="pill">legacy</span>' : ''}
+    </div>
+    ${row ? dossierAttrib(w, board) : ''}
+  </div>`;
+
+  if (board && board.pending) {
+    host.innerHTML = head + `<div class="dz-wait">Deriving this initiative's ladder…
+      <span class="sub">the derivation shells git once per initiative and runs in a child process,
+      so the workspace stays responsive while it does.</span></div>` + dossierArtifacts(group, null);
+    wireDossier();
+    return;
+  }
+  if (!row) {
+    host.innerHTML = head + `<div class="dz-none">No ladder for <b>${esc(id)}</b> in this repository's board —
+      it has no initiative record, or the record is not readable. The artifacts below are what the
+      library can see; nothing about its position in the loop is being claimed.</div>`
+      + dossierArtifacts(group, null);
+    wireDossier();
+    return;
+  }
+  host.innerHTML = head + dossierNext(row) + dossierArtifacts(group, row);
+  wireDossier();
+}
+// R5 in the rail: the same attribution the tree rows carry. A stage without its branch is a claim
+// the data does not support.
+function dossierAttrib(w, board) {
+  const stamp = board && board.as_of ? new Date(board.as_of).toLocaleTimeString() : null;
+  return `<div class="dz-attrib">derived on <b>${esc((w && w.branch) || '?')}</b>${stamp ? ` · as of ${esc(stamp)}` : ''}${board && board.stale ? ' · refreshing' : ''}
+    <span class="sub">build and quality are scoped to this branch's commits, not to all of history</span></div>`;
+}
+// Accepted and owing render TOGETHER — an initiative can be accepted with steps still open, and a
+// green badge alone would be the watermelon.
+function dossierNext(row) {
+  const open = (row.steps || []).filter((s) => s.status === 'pending' || s.status === 'blocked');
+  const accepted = row.stage === 'accepted';
+  if (accepted && open.length) {
+    return `<div class="dz-next owed"><b>still owed · ${open.length} step${open.length === 1 ? '' : 's'}</b>
+      Accepted, and these never closed: ${open.map((s) => esc(s.key)).join(' · ')}.</div>`;
+  }
+  if (row.next && row.next.action) {
+    return `<div class="dz-next"><b>next · ${esc(row.next.step || '')}</b>${esc(row.next.action)}</div>`;
+  }
+  return `<div class="dz-next done"><b>nothing owed</b>Every step this lane asks for is closed.</div>`;
+}
+function dossierArtifacts(group, row) {
+  const arts = (group && group.artifacts) || [];
+  const used = new Set();
+  const stepBy = {};
+  for (const st of (row && row.steps) || []) stepBy[st.key] = st;
+
+  const sections = DOSSIER_GROUPS.map((g) => {
+    const mine = arts.filter((a) => g.roles.includes(a.role));
+    mine.forEach((a) => used.add(a.path));
+    // the lane's own verdict on this group, in the engine's words — never our inference
+    const naStep = (GROUP_STEPS[g.key] || []).map((k) => stepBy[k]).filter(Boolean);
+    const allNa = naStep.length && naStep.every((st) => st.status === 'na');
+    if (!mine.length && allNa) {
+      return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">n/a</span></h5>
+        <div class="dz-na">${esc(naStep[0].evidence || 'not required in this lane')}</div></div>`;
+    }
+    if (!mine.length) {
+      return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">nothing yet</span></h5>
+        <div class="dz-na">No ${esc(g.label)} artifact is filed for this initiative.</div></div>`;
+    }
+    return `<div class="dz-sec"><h5>${esc(g.label)} <span class="c">${mine.length}</span></h5>
+      ${mine.map(dossierRow).join('')}</div>`;
+  }).join('');
+
+  const rest = arts.filter((a) => !used.has(a.path));
+  const other = rest.length
+    ? `<div class="dz-sec"><h5>other <span class="c">${rest.length}</span></h5>${rest.map(dossierRow).join('')}</div>`
+    : '';
+  const none = !arts.length
+    ? `<div class="dz-na">The library sees no artifacts for this initiative yet. This is a verified
+       empty — the read succeeded.</div>` : '';
+  return `<div class="dz-arts">${sections}${other}${none}</div>`;
+}
+function wireDossier() {
+  $('library').querySelectorAll('[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
+}
+
 function renderLibrary() {
+  renderLensTabs();
+  renderReading();
+  if (state.lens === 'dossier' && state.detail.kind === 'initiative') { renderDossier(); return; }
+  if (state.lens === 'dossier') { state.lens = 'folders'; }
   // a third, persistent lens beside initiatives + folders: the scheduled tasks for this workspace
   if (state.lens === 'scheduled') {
-    document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.lens === 'scheduled')));
     renderScheduled();
     return;
   }
   // a fourth: what past sessions in THIS repo actually printed. The filter box becomes the query.
   if (state.lens === 'history') {
-    document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.lens === 'history')));
     renderHistory();
     return;
   }
@@ -810,8 +1242,7 @@ function renderLibrary() {
   // BOTH lenses are always available: initiatives (the PMOS projection — works whenever the repo
   // has PRDs, even in a nested bundle) and folders (the complete repo map). A repo with no
   // initiatives shows an empty-but-honest initiative view — the toggle is never dead, never hidden.
-  const effLens = state.lens === 'folders' ? 'folders' : 'initiatives';
-  document.querySelectorAll('.lens button').forEach((b) => b.setAttribute('aria-selected', String(b.dataset.lens === effLens)));
+  const effLens = 'folders';
   if (!lib) { host.innerHTML = `<div class="empty">Library unavailable.</div>`; return; }
   const f = state.filter.trim().toLowerCase();
   const hit = (s) => !f || String(s).toLowerCase().includes(f);
@@ -1005,13 +1436,19 @@ function applyLayout() {
 
   // folds
   paintFold('paneWs', 'wsFold', l.folds.ws);
-  paintFold('paneSess', 'sessFold', l.folds.sess);
+  // `sess` retired with the pane it folded (R1/R13); a stored value is ignored, not migrated.
   paintFold('paneLib', 'libFold', l.folds.lib);
   paintFold('paneDoc', 'docFold', l.folds.doc);
 
   // split is a desktop arrangement; below 1100px two groups are two unusable terminals (R9)
   applySplit(l.split === 'on' && !NARROW.matches);
 
+  // The library/document divider is part of the ARRANGEMENT (R8), driven from the tuple. It used
+  // to be "a client preference like the theme" in a global localStorage key — which R8 and rubric
+  // dimension 1 both contradict: they require it carried per workspace and the old key not re-read
+  // on later loads. `libsplit` is now read exactly once, by migrateLegacy.
+  document.documentElement.style.setProperty('--libsplit', l.libSplit + '%');
+
   $('layName').textContent = l.name;
   renderLayoutMenu();
   refit();
@@ -1059,7 +1496,13 @@ async function loadLayouts() {
     const r = await fetch('/api/layouts?ws=' + encodeURIComponent(state.wsId || ''));
     doc = await r.json();
   } catch { doc = null; }
-  if (!doc || !doc.ok || !Array.isArray(doc.layouts) || !doc.layouts.length) {
+  // A read failure must never author a write. loadAction() is the one place that decides, and it
+  // only says 'migrate' when the SERVER affirmatively reports nothing stored — never because the
+  // answer was unreadable. Anything unusable is 'keep': show the boot defaults, persist nothing,
+  // and leave whatever is on disk exactly as it is until a load succeeds.
+  const act = LAY.loadAction(doc);
+  if (act === 'keep') return;
+  if (act === 'migrate') {
     // R8 — a workspace with nothing stored inherits whatever the PM had already tuned by hand
     // in the pre-feature client, so the upgrade never costs them their rail width.
     const legacy = {};
@@ -1153,9 +1596,34 @@ function renderLayoutMenu() {
     if (!l) return;
     openLayNew(l.name, l.id);
   });
+  renderLayoutPositions();
   const w = state.workspaces.find((x) => x.id === state.wsId);
   if ($('layScope')) $('layScope').textContent = w ? w.name : 'this repo';
 }
+
+/* R12 — keyboard parity with the drag. Every value `side` and `reader` can hold is a real button
+   here, so no position is pointer-only. This is what makes the "no dead ends" property true rather
+   than merely argued: from ANY arrangement, including side:off + reader:off, the header control is
+   in the bar (never inside the grid it rearranges), and these buttons bring a pane back. */
+const POS_GROUPS = [
+  { key: 'side', label: 'sidebar', values: [['left', '◧'], ['right', '◨'], ['off', '∅']] },
+  { key: 'reader', label: 'reader', values: [['left', '◧'], ['right', '◨'], ['bottom', '⬓'], ['off', '∅']] },
+];
+function renderLayoutPositions() {
+  const host = $('layPos');
+  if (!host) return;
+  const l = curLayout();
+  host.innerHTML = POS_GROUPS.map((g) => `
+    <div class="pos-row" role="group" aria-label="${g.label} position">
+      <span class="pos-lbl">${g.label}</span>
+      ${g.values.map(([v, glyph]) => `<button class="pos-btn" data-pos="${g.key}" data-val="${v}"
+        aria-pressed="${l[g.key] === v}" title="${g.label} ${v}"
+        aria-label="${g.label} ${v}"><i aria-hidden="true">${glyph}</i><span>${v}</span></button>`).join('')}
+    </div>`).join('');
+  host.querySelectorAll('[data-pos]').forEach((b) => b.onclick = () => {
+    tweak({ [b.dataset.pos]: b.dataset.val });   // menu stays open: adjusting is not choosing
+  });
+}
 function openLayMenu() { $('layMenu').hidden = false; $('layBtn').setAttribute('aria-expanded', 'true'); renderLayoutMenu(); }
 function closeLayMenu() { $('layMenu').hidden = true; $('layBtn').setAttribute('aria-expanded', 'false'); closeLayNew(); }
 function openLayNew(value, renameId) {
@@ -1193,7 +1661,7 @@ function newLayoutName() {
 
 // ── folds: both columns, same behaviour (R11) ──
 function foldPane(which, open) {
-  const map = { doc: 'paneDoc', lib: 'paneLib', ws: 'paneWs', sess: 'paneSess' };
+  const map = { doc: 'paneDoc', lib: 'paneLib', ws: 'paneWs' };
   if (!map[which]) return;
   const l = curLayout();
   const folds = Object.assign({}, l.folds);
@@ -1205,7 +1673,6 @@ function showRail() { if (curLayout().reader === 'off') tweak({ reader: 'right'
 $('libFold').onclick = () => foldPane('lib', $('paneLib').dataset.fold === 'off');
 $('docFold').onclick = () => foldPane('doc', $('paneDoc').dataset.fold === 'off');
 $('wsFold').onclick = () => foldPane('ws', $('paneWs').dataset.fold === 'off');
-$('sessFold').onclick = () => foldPane('sess', $('paneSess').dataset.fold === 'off');
 
 // ── the edges: drag a column's outer edge to resize it. Keeps to the layout, like everything
 // else — a width the PM chose is part of the arrangement, not a separate preference. ──
@@ -1290,9 +1757,15 @@ wireEdge($('sideEdge'));
     });
     g.addEventListener('pointermove', move);
     g.addEventListener('pointerup', end);
-    // keyboard: the grip is a button that opens the same menu the drag reaches (R12)
+    // keyboard: the grip opens the layout menu and lands focus on the position controls, which can
+    // reach every value the drag can (R12). It previously focused #layBtn — a menu whose only
+    // contents were layout rows, so Enter here could not actually move anything.
     g.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLayMenu(); $('layBtn').focus(); }
+      if (e.key !== 'Enter' && e.key !== ' ') return;
+      e.preventDefault();
+      openLayMenu();
+      const first = $('layPos') && $('layPos').querySelector(`[data-pos="${g.dataset.pane === 'side' ? 'side' : 'reader'}"]`);
+      (first || $('layBtn')).focus();
     });
   });
 })();
@@ -1321,38 +1794,37 @@ document.addEventListener('pointerdown', (e) => {
 
 applyLayout();     // paint the default arrangement before the server's layouts arrive
 
-// the library/document divider is INSIDE the reader, not part of the arrangement — it stays a
-// client preference like the theme, and keeps its original storage
-{ const s = store.get('libsplit'); if (s) document.documentElement.style.setProperty('--libsplit', s); }
-
-// drag the divider between the library and the document
+// drag the divider between the library and the document. It is part of the arrangement (R8), so
+// it is kept against the current layout like every other adjustment — not in a global client key.
 (() => {
   const split = $('railSplit');
   let dragging = false;
   const apply = (clientY) => {
     const r = $('rail').getBoundingClientRect();
-    const pct = Math.min(80, Math.max(15, ((clientY - r.top) / r.height) * 100));
-    const v = pct.toFixed(1) + '%';
-    document.documentElement.style.setProperty('--libsplit', v);
-    store.set('libsplit', v);
+    const pct = Math.min(LAY.LIB_MAX, Math.max(LAY.LIB_MIN, ((clientY - r.top) / r.height) * 100));
+    tweak({ libSplit: Math.round(pct * 10) / 10 });
   };
   split.addEventListener('pointerdown', (e) => { dragging = true; split.setPointerCapture(e.pointerId); e.preventDefault(); });
   split.addEventListener('pointermove', (e) => { if (dragging) apply(e.clientY); });
   split.addEventListener('pointerup', (e) => { dragging = false; try { split.releasePointerCapture(e.pointerId); } catch {} refit(); });
   split.addEventListener('keydown', (e) => {
-    const cur = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--libsplit')) || 46;
-    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
-      e.preventDefault();
-      const v = Math.min(80, Math.max(15, cur + (e.key === 'ArrowUp' ? -4 : 4))).toFixed(1) + '%';
-      document.documentElement.style.setProperty('--libsplit', v); store.set('libsplit', v); refit();
-    }
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+    e.preventDefault();
+    const cur = curLayout().libSplit;
+    tweak({ libSplit: Math.round(Math.min(LAY.LIB_MAX, Math.max(LAY.LIB_MIN, cur + (e.key === 'ArrowUp' ? -4 : 4))) * 10) / 10 });
   });
 })();
 
 // ── needs-you + gates (the PMOS workflow: Review/Acceptance in file mode, never automatic) ──
 async function loadNeeds() {
-  try { const r = await fetch('/api/needs?ws=' + encodeURIComponent(state.wsId || '')); state.needs = (await r.json()).needs || []; }
-  catch { state.needs = []; }
+  try {
+    const r = await fetch('/api/needs?ws=' + encodeURIComponent(state.wsId || ''));
+    const j = await r.json();
+    state.needs = j.needs || [];
+    // R12 — what a COLLAPSED tree row shows. R10 — the count comes from the strict reader, so a
+    // corrupt queue arrives as {count:null,error}, never as a calm zero.
+    state.needsByWs = j.by_ws || {};
+  } catch { state.needs = []; state.needsByWs = {}; }
   renderNeeds(); renderSessions();
 }
 function renderNeeds() {
@@ -1986,11 +2458,6 @@ $('fsPicker').addEventListener('click', (e) => { if (e.target === $('fsPicker'))
 
 // ── library lens + filter ──
 const FIND_PLACEHOLDER = { history: 'search past sessions…', scheduled: 'filter the library…' };
-document.querySelectorAll('.lens button').forEach((b) => b.onclick = () => {
-  state.lens = b.dataset.lens; store.set('lens', state.lens);
-  $('libFind').placeholder = FIND_PLACEHOLDER[state.lens] || 'filter the library…';
-  renderLibrary();
-});
 $('libFind').addEventListener('input', (e) => { state.filter = e.target.value; renderLibrary(); });
 $('libRefresh').onclick = () => {
   const b = $('libRefresh'); b.classList.add('spin');
@@ -2301,6 +2768,10 @@ function sfHead(active, ok) {
     ${chip}</div>`;
 }
 function wireSurface() {
+  // the workflow surface's initiative ids open the DOSSIER (R9, route 2) — a read, not a checkout
+  document.querySelectorAll('#docBody .wf-id[data-init]').forEach((b) => b.onclick = (e) => {
+    e.preventDefault(); openInitiative(b.dataset.init, state.wsId);
+  });
   document.querySelectorAll('[data-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.surface));
   document.querySelectorAll('[data-open-surface]').forEach((b) => b.onclick = () => openSurface(b.dataset.openSurface));
   $('docBody').querySelectorAll('.sf-art[data-doc],.wf-id[data-doc]').forEach((b) => b.onclick = () => openDoc(b.dataset.doc));
@@ -2370,10 +2841,31 @@ function sfRoadmap(s) {
   </div>`).join('') + (s.note ? `<div class="sf-note">${esc(s.note)}</div>` : '');
 }
 function sfOkr(s) {
-  return (s.objectives || []).map((o) => `<div class="sf-kr"><div class="obj">${esc(o.id)} · ${esc(o.name)}</div>
+  // A FAILED read renders RED and nothing else — never a list that silently omits what could not be
+  // parsed. Reusing .cs-error deliberately: the workspace has exactly one way to say "broken read",
+  // and a second visual vocabulary for the same meaning is how one of them ends up looking calm.
+  if (s.unreadable) return csError('okr', s.unreadable);
+
+  const h = s.anchor_health;
+  // Unresolvable ANCHORS are the defect this surface exists to expose: an anchor naming a KR no
+  // document declares sat unseen for two days precisely because nothing rendered it. It is RED, and
+  // it is placed ABOVE the objectives so it cannot be scrolled past.
+  const bad = (h && h.unresolvable) || [];
+  const anchorBand = bad.length
+    ? `<div class="cs-error" role="alert">
+        <div class="cs-err-head"><span class="mk" aria-hidden="true">▲</span>
+          <b>${bad.length} anchor${bad.length > 1 ? 's' : ''} name${bad.length > 1 ? '' : 's'} something these documents don’t declare</b></div>
+        ${bad.map((u) => `<p class="cs-err-why"><b>${esc(u.initiative)}</b> — <code>${esc(u.raw)}</code><br>${esc(u.reason)}</p>`).join('')}
+        <p class="cs-err-note">An anchor that resolves to nothing is not an anchor. Either write one the
+          OKR documents declare, or add the KR — adding a KR is the PM’s act, never an agent’s.</p></div>`
+    : (h ? `<div class="sf-pulse"><span class="n"><b>${h.checked}</b> anchors resolve</span>
+        <span class="sf-legend"><span>every non-empty parent_kr names an objective or KR written in these documents${h.empty ? ` · ${h.empty} unanchored` : ''}</span></span></div>` : '');
+
+  const body = (s.objectives || []).map((o) => `<div class="sf-kr"><div class="obj">${esc(o.id)} · ${esc(o.name)}</div>
     ${(o.krs || []).map((k) => `<div class="krrow"><div class="krh"><span class="lab">${esc(k.id)}</span><span>${esc(k.name)}</span></div>
       <div class="lev"><span class="untr">current · target · levers — not tracked</span></div></div>`).join('') || '<span class="untr">no KRs parsed</span>'}
-  </div>`).join('') + (s.note ? `<div class="sf-note">${esc(s.note)}</div>` : '');
+  </div>`).join('');
+  return anchorBand + body + (s.note ? `<div class="sf-note">${esc(s.note)}</div>` : '');
 }
 function sfReport(s) {
   return `<div class="sf-rep"><p class="lead">${esc(s.cadence)} report · derived on demand</p>
@@ -2457,7 +2949,7 @@ function csWorkflow(d) {
       `<span class="wf-st ${i < at ? 'past' : i === at ? 'at' : ''}">${esc(s)}</span>`).join('<i class="wf-sep" aria-hidden="true"></i>');
     return `<div class="wf-card" data-blocked="${r.blockers.length ? '1' : '0'}">
       <div class="wf-top">
-        <button class="wf-id" data-doc="${esc(r.record)}" title="open the initiative record">${esc(r.id)}</button>
+        <button class="wf-id" data-init="${esc(r.id)}" data-doc="${esc(r.record)}" title="open the initiative record">${esc(r.id)}</button>
         <span class="wf-lane">${esc(r.lane)}</span>
         ${r.in_change ? '<span class="wf-here">this change</span>' : ''}
         <span class="wf-anchor" title="${esc(r.anchor || '')}">${esc((r.anchor || 'unanchored').split(/[(—]/)[0].trim())}</span>
@@ -2748,9 +3240,7 @@ function choosePalette(n) {
   else if (it.kind === 'workspace') selectWorkspace(it.wsid);
   else if (it.kind === 'initiative') {
     // jump to the initiative's primary artifact (PRD first — its own ordering guarantees it)
-    const first = it.init.artifacts[0];
-    state.lens = 'initiatives'; state.filter = it.init.id; $('libFind').value = it.init.id; renderLibrary();
-    if (first) openDoc(first.path);
+    openInitiative(it.init.id, state.wsId);
   } else openDoc(it.path);
 }
 $('palInput')?.addEventListener('input', (e) => renderPalette(e.target.value));