create-pmos 0.47.0 → 0.48.0

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

@@ -0,0 +1,636 @@
+/* pm/panel-cockpit.js — the cockpit spine: the repository rail, the work list, the menu and the view tabs.
+ *
+ * This is PRD workspace-cockpit-nav, Run 1, from the PM's mockup (planning/design/cockpit-mockup/, option A). On a desktop the shell
+ * is four hosts in a row: a 64px rail of repositories, a list of the selected repository's initiatives, the detail, and the
+ * tabs. This module draws the first two, the menu that hangs off the rail, and the `view` tab kind. Nothing here owns the
+ * detail or the tabs, and nothing here touches a terminal.
+ *
+ * ── The one rule ────────────────────────────────────────────────────────────────────────────────
+ * A tool never replaces the list. Knowledge, memory, skills, scheduled tasks, validate, the guide, today and all repos
+ * open as a `view` tab beside the sessions and are opened once, never twice. The list and the detail stay where they are.
+ * `VIEWS` is the table of those tools, and a list mode that is neither in it nor in `NOT_A_VIEW` fails a test, so a new
+ * mode has to say where it opens.
+ *
+ * ── What is not here yet ─────────────────────────────────────────────────────────────────────────
+ * The palette and Focus (Run 2), the redrawn views and the in-context items (Run 3), and the phone (Run 4). On a phone the
+ * four hosts are still drawn by the older modules, and `state.mode` still drives the phone's lists; only a desktop is
+ * handled here. Grants and Jira status are drawn in the mockup and hidden here until each has a backing (assumption 3).
+ */
+
+import { el, setChildren } from './dom.js';
+import { state, setState, FIXTURE } from './state.js';
+import { currentProduct } from './board-read.js';
+import { repoRow, targetStepIndex } from './fixture.js';
+import {
+  repoTuples, activeProduct, selectRepo, onAddProduct, manageParts, repoInitial, treesOf, UNBACKED_MODES, stateHealthBanner, renameRepo,
+} from './panel-repos.js';
+import {
+  openTab, groupsFor, selectedSlug, attribution, workingSet, leadOf, orphanRows, searchHits, hitNode, fileHitsBlock,
+} from './panel-initiatives.js';
+import { records } from './board-read.js';
+import { filesToggle, renderFiles } from './view-files.js';
+import { openAddRepo } from './view-addrepo.js';
+
+/* ── the views: every tool that is a tab ──────────────────────────────────────────────────────── */
+
+/** The label is what the tab says after `view ·`. `scoped` views show one repository's data and are one tab per
+ * repository; the others are the same everywhere. `menu` is the group a view is offered in, or null when the menu does not
+ * list it (today and all repos are the switch above the list; the focus list is part of Today since Run 2). */
+export const VIEWS = {
+  today: { label: 'today', mode: 'today', scoped: false, menu: null },
+  portfolio: { label: 'all repos', mode: 'portfolio', scoped: false, menu: null },
+  knowledge: { label: 'knowledge', mode: 'knowledge', scoped: true, menu: 'Library', hint: 'decisions, graph' },
+  memory: { label: 'memory', mode: 'memory', scoped: true, menu: 'Library', hint: 'learned notes' },
+  validate: { label: 'validate', mode: 'validate', scoped: true, menu: 'Library', hint: 'document health' },
+  skills: { label: 'skills', mode: 'skills', scoped: false, menu: 'Automate', hint: 'approve, create' },
+  scheduled: { label: 'scheduled', mode: 'scheduled', scoped: false, menu: 'Automate', hint: 'cadence tasks' },
+  guide: { label: 'guide', mode: 'guide', scoped: false, menu: 'Help and settings', hint: 'the user guide' },
+  // Run 3: views with no list mode — they draw only through their board module
+  reports: { label: 'reports', mode: null, scoped: true, menu: 'Library', hint: 'run reports' },
+  addrepo: { label: 'add repository', mode: null, scoped: false, menu: null },
+};
+
+/** Modes that exist in the code and are deliberately not views, with the reason. `product` is the list itself. */
+export const NOT_A_VIEW = {
+  focus: 'folded into Today (Run 2): the mode opens the today view',
+  product: 'the work list itself',
+  workflow: 'decided by the agent at runtime, never configured by hand',
+  agent: 'no server behind it yet, so it is not offered',
+  connect: 'no server behind it yet, so it is not offered',
+};
+
+/** The view a list mode opens as, or null when the mode is not a view. */
+export const viewOfMode = (mode) => (mode === 'focus' ? 'today' : Object.prototype.hasOwnProperty.call(VIEWS, mode) ? mode : null);
+
+const viewId = (view, repo) => 'view:' + view + (VIEWS[view] && VIEWS[view].scoped && repo ? ':' + repo : '');
+
+/** Open a view as a tab, or select it when it is already open. A scoped view is one tab per repository. */
+export function openView(view) {
+  const v = VIEWS[view];
+  if (!v) return;
+  const repo = currentProduct();
+  const scoped = v.scoped && repo;
+  openTab({
+    id: viewId(view, repo), kind: 'view', view,
+    title: 'tool · ' + v.label,
+    // a scoped view is one tab per repository: the repository rides in `repo` and shows on the tab's second line as its slug
+    ...(scoped ? { repo, slug: repo } : {}),
+  });
+}
+
+/** Is `view` offered here? In the live app a view whose mode has no server behind it is not. */
+const offered = (view) => FIXTURE || !UNBACKED_MODES.includes(VIEWS[view].mode);
+
+/** A desktop never shows a list mode in the list. Code that still says `setState({ mode: 'skills' })` is read here as
+ * "open the skills view": the mode is put back to `product` and the view opens. Returns true when it did something. */
+export function absorbMode() {
+  const m = state.mode;
+  if (!m || m === 'product') return false;
+  const view = viewOfMode(m);
+  setState({ mode: 'product', settingsOpen: false, menuOpen: false });
+  if (view) openView(view);
+  return true;
+}
+
+/* ── lazy modules ─────────────────────────────────────────────────────────────────────────────── */
+
+let modesMod;       // undefined = not tried · null = loading or unavailable · module = ready
+function modes() {
+  if (modesMod !== undefined) return modesMod;
+  modesMod = null;
+  import('./modes.js').then((m) => { modesMod = m; setState({}); }).catch(() => { modesMod = null; });
+  return null;
+}
+
+/** A view tab's pane. The pane is the existing list renderer for the view's mode, drawn full width in the tab. Run 3
+ * redraws each of these from its board; Run 1 only moves them out of the list column. */
+/* Run 3: a view whose board has been built draws through its own module, `view-<name>.js`, which exports
+ * `renderBoard(inner, ctx)`. `ctx.renderMode(host)` draws the view's existing list into `host`, so a board keeps every live read and
+ * every `data-*` hook the suites use, and only adds the board's frame around it. A view with no board module draws as before. */
+export const BOARD_MODULES = {
+  today: './view-today.js', portfolio: './view-portfolio.js', knowledge: './view-knowledge.js', memory: './view-memory.js',
+  skills: './view-skills.js', scheduled: './view-scheduled.js', validate: './view-validate.js', guide: './view-guide.js',
+  reports: './view-reports.js', addrepo: './view-addrepo.js',
+};
+const boardMods = {};   // view -> undefined (not tried) · null (loading or absent) · module
+function boardOf(view) {
+  if (!BOARD_MODULES[view]) return null;
+  if (boardMods[view] !== undefined) return boardMods[view];
+  boardMods[view] = null;
+  import(BOARD_MODULES[view]).then((m) => { boardMods[view] = m && typeof m.renderBoard === 'function' ? m : false; setState({}); })
+    .catch(() => { boardMods[view] = false; setState({}); });
+  return null;
+}
+
+export function mountView(host, tab) {
+  const v = VIEWS[tab.view];
+  const body = el('div', { 'data-pm-view': tab.view,
+    style: 'flex:1;min-height:0;overflow-y:auto;background:var(--card);padding:18px 22px' });
+  const inner = el('div', { style: (tab.view === 'today' ? 'max-width:980px' : 'max-width:760px') + ';display:flex;flex-direction:column;gap:2px' });
+  body.appendChild(inner);
+  const m = v && v.mode ? modes() : null;
+  const board = v ? boardOf(tab.view) : null;
+  const renderMode = (into) => {
+    if (!v || !v.mode || !m || typeof m.renderMode !== 'function') return;
+    try { m.renderMode(into, null, v.mode); } catch (e) { console.error('[pm] view ' + tab.view + ' failed:', e); }
+  };
+  if (!v) inner.appendChild(el('div', { style: 'color:var(--muted-foreground);font-size:12px' }, 'this view is not known to this version'));
+  else if (board) {
+    inner.style.maxWidth = 'none';
+    try { board.renderBoard(inner, { tab, view: tab.view, renderMode, ready: !v.mode || !!m, el, setChildren, state, setState, FIXTURE, openView, repo: currentProduct() }); }
+    catch (e) { console.error('[pm] board ' + tab.view + ' failed:', e); renderMode(inner); }
+  } else if (boardMods[tab.view] === null) {
+    // the board module is still loading: draw nothing rather than flash the old list
+  } else if (m && typeof m.renderMode === 'function') {
+    if (tab.view === 'today') inner.appendChild(todayBoard());
+    const rest = el('div', { style: 'display:flex;flex-direction:column;gap:2px' });
+    inner.appendChild(rest);
+    renderMode(rest);
+  }
+  setChildren(host, [body]);
+  return host;
+}
+
+/** Run 2's Today board, exported so the Run 3 Today module can reuse its derived parts. */
+export { todayBoard };
+
+/* ── small shared pieces ──────────────────────────────────────────────────────────────────────── */
+
+const BADGE = 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:999px;padding:0 8px;line-height:18px;color:var(--foreground);white-space:nowrap;flex:none';
+const BADGE_TONE = {
+  d: 'border-color:transparent;background:color-mix(in oklab, var(--destructive) 18%, transparent);color:var(--destructive)',
+  w: 'border-color:transparent;background:color-mix(in oklab, var(--warning) 16%, transparent);color:var(--warning)',
+  s: 'border-color:transparent;background:color-mix(in oklab, var(--success) 16%, transparent);color:var(--success)',
+};
+const badge = (text, tone) => el('span', { style: BADGE + (tone ? ';' + BADGE_TONE[tone] : '') }, text);
+const LBL = 'font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)';
+
+const SG = () => (typeof window !== 'undefined' ? window.PMOSStatusGroups : null);
+
+/** The derived status group key of one initiative, or `unknown` when nothing has been derived for it. */
+function statusKey(repo, slug) {
+  const sg = SG();
+  const rows = (state.statuses && state.statuses[repo]) || {};
+  return sg ? sg.keyOf(rows[slug]) : 'unknown';
+}
+
+/** What a PM must close: an initiative that is blocked, or delivered and waiting for acceptance. */
+const NEEDS = ['needs-you', 'awaiting-acceptance'];
+
+/** How many initiatives, across every repository, are waiting on the person. Derived on each read, never stored. */
+export function needsCount() {
+  let n = 0;
+  for (const repo of Object.keys(state.statuses || {})) {
+    for (const slug of Object.keys(state.statuses[repo] || {})) if (NEEDS.includes(statusKey(repo, slug))) n++;
+  }
+  return n;
+}
+
+/** Does anything in `repo` need the person: a blocked or delivered initiative, or a session that asked for them. */
+function repoNeeds(repo) {
+  const rows = (state.statuses && state.statuses[repo]) || {};
+  if (Object.keys(rows).some((slug) => NEEDS.includes(statusKey(repo, slug)))) return true;
+  const sess = Array.isArray(state.sessions) ? state.sessions : [];
+  if (!sess.length) return false;
+  const wss = new Set(treesOf(repo).map((x) => x.ws));
+  return sess.some((x) => x && wss.has(x.ws) && x.shown === 'needs');
+}
+
+/* ── the rail ─────────────────────────────────────────────────────────────────────────────────── */
+
+const TILE = 'box-sizing:content-box;position:relative;flex:none;width:36px;height:36px;border-radius:10px;display:grid;grid-template:36px / 36px;place-items:center;font:600 13px var(--sans)';
+const SVG_MENU = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>';
+
+/** The 64px column of repositories. One tile per repository, a dashed tile to add one, and the menu at the bottom. */
+export function renderRail(host) {
+  const tuples = repoTuples();
+  const product = activeProduct(tuples);
+  const tiles = tuples.map((t) => {
+    const rp = repoRow(t);
+    const on = product === rp.name;
+    // the dot points at ANOTHER repository: the selected one's needs are in the list beside it (the mockup draws no dot on it)
+    const needs = !on && repoNeeds(rp.name);
+    const said = rp.name + ' — ' + rp.kindLabel + ' repository' + (needs ? ' · something in it needs you' : '');
+    return el('button', {
+      onClick: () => selectRepo(rp.name),
+      // right-click renames from the rail, where the abbreviation is shown (overhaul-r15 R2)
+      onContextmenu: (e) => { if (e && e.preventDefault) e.preventDefault(); renameRepo(rp.name); },
+      title: said + ' · right-click to rename', 'aria-label': said, 'aria-pressed': on ? 'true' : 'false',
+      'data-rail': 'repo', 'data-r1': 'rail-glyph', 'data-ini': repoInitial(rp.name), 'data-repo': rp.name, 'data-active': on ? '1' : '0',
+      style: TILE + ';' + (on ? 'background:var(--brand);color:#fff' : 'background:var(--secondary);color:var(--foreground)'),
+    },
+      repoInitial(rp.name),
+      needs ? el('i', { 'data-rail': 'needs-dot', style: 'position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:var(--warning);border:2px solid var(--sidebar)' }) : null,
+    );
+  });
+  const hb = stateHealthBanner();
+  const stateHealth = hb ? el('button', { 'data-rail': 'state-health', title: hb.textContent, 'aria-label': hb.textContent, style: TILE + ';background:var(--destructive);color:#fff' }, '!') : null;
+  const add = el('button', {
+    onClick: () => openAddRepo(), title: 'add a repository', 'aria-label': 'add a repository', 'data-rail': 'add',
+    style: TILE + ';background:transparent;border:1px dashed var(--input);color:var(--muted-foreground)',
+    hover: 'color:var(--foreground);background:var(--accent)',
+  }, '+');
+  const menu = el('button', {
+    onClick: () => setState((s) => ({ menuOpen: !s.menuOpen })),
+    title: 'menu', 'aria-label': 'menu', 'aria-expanded': state.menuOpen ? 'true' : 'false', 'data-rail': 'menu',
+    style: TILE + ';margin-top:auto;background:' + (state.menuOpen ? 'var(--accent)' : 'transparent') + ';color:var(--foreground)',
+    hover: 'background:var(--accent)',
+    html: SVG_MENU,
+  });
+  /* The host is the mockup's rail (app.js gives it the centred column, 12px top and bottom, 10px between tiles), with the menu at the
+   * foot. The tiles and the add tile scroll in their own column when there are more than fit, so the menu stays put; that column
+   * starts 3px higher with 3px of padding, so a needs dot on the first tile is not clipped and the first tile still sits 12px down. */
+  setChildren(host, [el('div', { 'data-rail': 'column', style: 'flex:0 1 auto;min-height:0;align-self:stretch;margin-top:-3px;padding-top:3px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow-y:auto' }, stateHealth, tiles, add), el('div', { style: 'flex:none;margin-top:auto;display:flex;justify-content:center' }, menu)]);
+  return host;
+}
+
+/* ── the menu ─────────────────────────────────────────────────────────────────────────────────── */
+
+const MENU_STYLE = 'position:fixed;left:72px;bottom:40px;width:330px;max-height:calc(100vh - 120px);overflow-y:auto;z-index:50;background:var(--card);border:1px solid var(--input);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:6px';
+const MI = 'display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:0 10px;border-radius:6px;font:500 13px var(--sans);text-align:left';
+
+/** The entries of the menu, in its three groups. A view with nothing behind it is left out, not greyed. */
+export function menuGroups() {
+  const groups = [];
+  for (const g of ['Library', 'Automate', 'Help and settings']) {
+    const items = Object.keys(VIEWS).filter((k) => VIEWS[k].menu === g && offered(k)).map((k) => ({ view: k, label: VIEWS[k].label, hint: VIEWS[k].hint }));
+    if (g === 'Help and settings') { items.push({ action: 'profile', label: 'claude profile', hint: '' }); items.push({ action: 'theme', label: 'theme', hint: state.theme }); }
+    if (items.length) groups.push({ label: g + (g === 'Library' ? ' · ' + currentProduct() : g === 'Automate' ? ' · all repos' : ''), items });
+  }
+  return groups;
+}
+
+/** The menu and its click-away layer, drawn into the shell's own overlay host. Empty when the menu is shut. */
+export function renderMenu(host) {
+  if (!state.menuOpen) { setChildren(host, []); return host; }
+  const close = () => setState({ menuOpen: false });
+  const parts = [];
+  for (const g of menuGroups()) {
+    parts.push(el('div', { style: 'padding:8px 10px 6px;' + LBL }, g.label));
+    for (const it of g.items) {
+      parts.push(el('button', {
+        'data-menu': it.view || it.action,
+        onClick: () => {
+          if (it.view) { setState({ menuOpen: false }); openView(it.view); }
+          else if (it.action === 'theme') setState((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark', menuOpen: false }));
+          else if (it.action === 'profile') setState({ menuOpen: false, detail: { kind: 'prof' }, col2: true });
+        },
+        style: MI + ';color:var(--foreground)', hover: 'background:var(--accent)',
+      }, el('span', null, it.label), it.hint ? el('span', { style: 'margin-left:auto;font:11px var(--mono);color:var(--muted-foreground)' }, it.hint) : null));
+    }
+  }
+  setChildren(host, [
+    el('div', { 'data-menu': 'away', onClick: close, style: 'position:fixed;inset:0;z-index:49' }),
+    el('div', { 'data-menu': 'panel', role: 'menu', style: MENU_STYLE }, parts),
+  ]);
+  return host;
+}
+
+/* ── the list ─────────────────────────────────────────────────────────────────────────────────── */
+
+/* The filter is built once and re-used, for the reason the older search box is: an input rebuilt on every keystroke loses
+ * its caret. ⌘K focuses it through `data-pm-search`. */
+const filterInput = el('input', {
+  onInput: (e) => setState({ q: e.target.value }),
+  'data-pm-search': '', 'aria-label': 'filter initiatives',
+  style: 'position:absolute;inset:0;width:100%;padding:0 10px;box-sizing:border-box;font:13px var(--sans);color:var(--foreground);background:transparent;border:0;outline:0',
+});
+/* One host for Files, kept across repaints so its filter keeps focus. */
+const filesHost = el('div', { 'data-list': 'files', style: 'flex:1;min-height:0;display:flex;flex-direction:column' });
+/* The hint is drawn as text under the transparent input rather than as the input's placeholder, so it is the mockup's text node —
+ * what the PM reads, and what the parity check reads. It hides while the box holds anything. */
+const filterHint = el('span', { 'aria-hidden': 'true', 'data-filter-hint': '', style: 'pointer-events:none;white-space:nowrap' }, 'Filter initiatives…');
+const filterBox = el('div', { style: 'position:relative;box-sizing:content-box;display:flex;align-items:center;gap:8px;border:1px solid var(--input);border-radius:8px;height:32px;padding:0 10px;color:var(--muted-foreground)' }, filterHint, filterInput);
+
+/** Which group an initiative files under in the list, and the word on its badge. The five derived states the board
+ * already knows are folded into the three the PM reads, and nothing is hidden: On hold and Unknown keep their own group. */
+const GROUP_OF = {
+  'needs-you': 'needs', 'awaiting-acceptance': 'needs',
+  'in-progress': 'progress', planning: 'progress',
+  accepted: 'done', closed: 'done', cancelled: 'done',
+  'on-hold': 'hold', unknown: 'unknown',
+};
+const GROUPS = [
+  ['needs', 'Needs you'], ['progress', 'In progress'], ['done', 'Done'], ['hold', 'On hold'], ['unknown', 'Unknown'],
+];
+const WORD = {
+  'needs-you': ['needs you', 'd'], 'awaiting-acceptance': ['accept', 'w'], 'in-progress': ['build', null], planning: ['plan', null],
+  accepted: [null, null], closed: ['closed', null], cancelled: ['cancelled', null], 'on-hold': ['hold', null], unknown: ['unknown', 'd'],
+};
+/* Run 4: the badge names the RUNG the initiative is at, in the PM's word for it — the mockup's "review" on an initiative blocked in
+ * eval, "accept" on one waiting at acceptance, "build" on one building. The rung is the same pointer the breadcrumb and the detail
+ * use (`targetStepIndex`: the first blocked step, else the current one). An initiative whose ladder is not read yet keeps the status
+ * word above, so a badge never names a rung nobody read. */
+const RUNG_WORD = { eval: 'review', accepted: 'accept' };
+function rungWord(slug) {
+  const rec = records()[slug];
+  const steps = rec && Array.isArray(rec.steps) ? rec.steps : null;
+  const ti = steps ? targetStepIndex(steps) : -1;
+  const k = ti >= 0 && steps[ti] ? String(steps[ti].k || '') : '';
+  if (!k) return null;
+  return RUNG_WORD[k] || (/^[a-z]+$/.test(k) ? k : null);
+}
+const DOT = {
+  needs: 'var(--destructive)', progress: 'var(--info)', done: 'var(--success)', hold: 'var(--muted-foreground)', unknown: 'var(--destructive)',
+};
+
+const ITEM = 'display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border-radius:8px;font:500 13px var(--sans);text-align:left';
+
+function row(slug, product, group, live, sel, detKind) {
+  const key = statusKey(product, slug);
+  const [word0, tone] = WORD[key] || WORD.unknown;
+  const word = word0 && (group === 'needs' || group === 'progress') ? (rungWord(slug) || word0) : word0;
+  const on = slug === sel && detKind === 'init';
+  const [glyph, glyphColor, glyphTitle] = leadOf(slug, live);
+  const liveNow = glyph !== '#';
+  return el('button', {
+    onClick: () => setState({ sel: slug, detail: { kind: 'init' }, col2: true }),
+    'data-row': slug, 'data-group': group, 'aria-current': on ? 'true' : null,
+    title: liveNow ? glyphTitle : null,
+    style: ITEM + ';background:' + (on ? 'var(--accent)' : 'transparent') + ';color:' + (group === 'done' ? 'var(--muted-foreground)' : 'var(--foreground)'),
+    hover: 'background:var(--accent)',
+  },
+    liveNow
+      ? el('span', { style: 'flex:none;width:8px;text-align:center;font-size:12px;line-height:1;color:' + glyphColor }, glyph)
+      : el('span', { style: 'flex:none;width:8px;height:8px;border-radius:50%;background:' + DOT[group] }),
+    // the name's box is the mockup's (it grows, it does not clip); a long name is clipped inside it, so a badge is never pushed out
+    el('span', { 'data-row-name': '', style: 'flex:1 1 auto;min-width:0' },
+      el('div', { style: 'overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, slug)),
+    word && group !== 'done' ? badge(word, tone) : null,
+  );
+}
+
+const SEG = 'flex:1 1 0;text-align:center;padding:4px 0;font:13px var(--sans);line-height:1.45;';
+
+/** The list column: the repository, the three-way switch, the filter, the initiatives by state, and the way to add one. */
+export function renderWorkList(host) {
+  const product = currentProduct();
+  const tuples = repoTuples();
+  const tuple = tuples.find((t) => t[0] === product);
+  const rp = tuple ? repoRow(tuple) : null;
+  const DATA = records();
+  const q = (state.q || '').toLowerCase();
+  const attr = attribution();
+  const live = attr.byInitiative;
+  const sel = selectedSlug();
+  const detKind = (state.detail && state.detail.kind) || '';
+
+  // every initiative of the repository once, whatever objective it sits under
+  const seen = new Set(); const all = [];
+  for (const g of groupsFor(product)) for (const s of g.slugs) if (!seen.has(s)) { seen.add(s); all.push(s); }
+  const shown = all.filter((s) => !q || s.includes(q));
+  const byGroup = Object.fromEntries(GROUPS.map(([k]) => [k, []]));
+  for (const s of shown) byGroup[GROUP_OF[statusKey(product, s)] || 'unknown'].push(s);
+
+  const header = el('div', { style: 'display:flex;align-items:center;justify-content:space-between' },
+    el('span', { 'data-list': 'repo', style: 'font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, product || ''),
+    rp ? badge(rp.kindLabel + ' · ' + all.length) : null);
+
+  const act = (state.tabs || []).find((t) => t.id === state.active);
+  const activeView = act && act.kind === 'view' && (act.view === 'today' || act.view === 'portfolio') ? act.view : null;
+  const segBtn = (label, on, onClick, extra, attrName) => el('button', {
+    onClick, 'data-switch': attrName, 'aria-pressed': on ? 'true' : 'false',
+    style: SEG + (on ? 'border-radius:6px;background:var(--background);font-weight:500;color:var(--foreground)' : 'color:var(--muted-foreground)'),
+  }, label, extra);
+  const n = needsCount();
+  const switcher = el('div', { 'data-list': 'switch', style: 'display:flex;gap:2px;background:var(--accent);border-radius:8px;padding:3px' },
+    segBtn('Work', !activeView, () => { if (activeView) setState({ active: lastNonView() }); }, null, 'work'),
+    segBtn(n ? 'Today ' : 'Today', activeView === 'today', () => openView('today'), n ? el('span', { style: 'color:var(--warning)' }, String(n)) : null, 'today'),
+    segBtn('All repos', activeView === 'portfolio', () => openView('portfolio'), null, 'all'));
+
+  const manage = manageParts(product, product);
+  const manageRow = manage.tools.length || manage.below.length
+    ? el('div', { 'data-list': 'manage', style: 'display:flex;flex-direction:column;margin:0 -12px' },
+      manage.tools.length ? el('div', { style: 'display:flex;align-items:center;gap:2px;padding:0 12px;flex-wrap:wrap' }, manage.tools) : null, manage.below)
+    : null;
+
+  const groupsNodes = [];
+  // what is live now, pinned first, as before: rows are duplicated here, never moved
+  const nowRows = FIXTURE ? [] : workingSet(attr, product).filter((e) => !q || e.slug.includes(q));
+  if (nowRows.length) {
+    groupsNodes.push(el('div', { 'data-group-box': 'now', style: 'display:flex;flex-direction:column;gap:2px' },
+      el('div', { style: LBL + ';padding:4px 10px' }, 'Working on · ' + nowRows.length),
+      nowRows.map((e) => row(e.slug, product, GROUP_OF[statusKey(product, e.slug)] || 'unknown', live, sel, detKind))));
+  }
+  for (const [k, label] of GROUPS) {
+    const slugs = byGroup[k];
+    if (!slugs.length) continue;
+    // the mockup's labels: 4px above the first group, 12px above each later one
+    groupsNodes.push(el('div', { 'data-group-box': k, style: 'display:flex;flex-direction:column;gap:2px' },
+      el('div', { style: LBL + ';padding:' + (groupsNodes.length ? '12px' : '4px') + ' 10px 4px' }, label + ' · ' + slugs.length),
+      slugs.map((s) => row(s, product, k, live, sel, detKind))));
+  }
+  const orphans = q ? [] : (attr.unattributed || []);
+  if (orphans.length) groupsNodes.push(orphanRows(orphans));
+
+  const hits = searchHits(q, DATA, live);
+  if (hits.length) groupsNodes.push(el('div', { style: LBL + ';padding:8px 10px 2px' }, 'matches elsewhere'), hits.map(hitNode));
+  const files = fileHitsBlock(state.q || '');
+  if (files) groupsNodes.push(files);
+  if (!shown.length && !hits.length && !(files)) {
+    groupsNodes.push(el('div', { style: 'padding:8px 10px;font-size:12px;color:var(--muted-foreground);font-style:italic' },
+      q ? 'nothing matches — a successful read of nothing' : 'no initiatives in this repository'));
+  }
+
+  const addInit = el('button', {
+    onClick: () => setState({ detail: { kind: 'new' }, col2: true, newType: 'init', newAnchor: null }),
+    'data-list': 'new-initiative',
+    style: ITEM + ';color:var(--brand)', hover: 'background:var(--accent)',
+  }, '+ New initiative');
+
+  if (filterInput.value !== (state.q || '')) filterInput.value = state.q || '';
+  filterHint.style.visibility = state.q ? 'hidden' : '';
+  // Run 3: Files replaces the initiative rows (and their filter, since Files has its own) while it is open. The fixture reads no
+  // repository, so it has no files to list and does not offer the toggle (Files would only say it read nothing).
+  const filesOn = !FIXTURE && !!state.filesOpen;
+  if (filesOn) renderFiles(filesHost);
+  setChildren(host, [
+    el('div', { style: 'flex:none;display:flex;flex-direction:column;gap:12px' }, stateHealthBanner(), header, manageRow, switcher, FIXTURE ? null : filesToggle(), filesOn ? null : filterBox),
+    // the rows take their own height and scroll only when they outgrow the column; "New initiative" sits at the bottom either way
+    filesOn ? filesHost : el('div', { 'data-list': 'rows', style: 'flex:0 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px' }, groupsNodes),
+    el('div', { style: 'flex:none;margin-top:auto;display:flex;flex-direction:column;gap:8px' }, el('div', { style: 'height:1px;background:var(--border)' }), addInit),
+  ]);
+  return host;
+}
+
+/** The tab to show when the PM goes back to Work from a view: the last one that is not a view, else none. */
+function lastNonView() {
+  const t = [...(state.tabs || [])].reverse().find((x) => x.kind !== 'view');
+  return t ? t.id : null;
+}
+
+/* ── the breadcrumb ───────────────────────────────────────────────────────────────────────────── */
+
+/** repository › initiative › the active tab, as the nodes of the top bar. */
+export function breadcrumb() {
+  const parts = [];
+  const repo = currentProduct();
+  if (repo) parts.push(repo);
+  const slug = selectedSlug();
+  if (slug && state.detail && state.detail.kind === 'init') parts.push(slug);
+  // the step the initiative is at: the first blocked one, else the current one — the same pointer the detail's answer line uses
+  const rec = slug && state.detail && state.detail.kind === 'init' ? records()[slug] : null;
+  const ti = rec && Array.isArray(rec.steps) ? targetStepIndex(rec.steps) : -1;
+  if (ti >= 0 && rec.steps[ti] && rec.steps[ti].k) parts.push(rec.steps[ti].k);
+  const act = (state.tabs || []).find((t) => t.id === state.active);
+  if (act && act.title) parts.push(act.title);
+  const nodes = [];
+  parts.forEach((p, i) => {
+    if (i) nodes.push(el('span', { 'aria-hidden': 'true' }, '›'));
+    const last = i === parts.length - 1;
+    nodes.push(el('span', { style: last ? 'color:var(--foreground)' : '', 'data-crumb': last && act && act.title === p ? 'tab' : null }, p));
+  });
+  if (state.layoutFocus) {
+    nodes.push(badge('Focus', 'w'));
+    nodes.push(el('button', { 'data-crumb': 'navigate', onClick: leaveFocus, title: 'back to the rail and the list (Esc)',
+      style: 'font:500 11px var(--sans);border:1px solid var(--border);border-radius:6px;padding:0 8px;line-height:18px;color:var(--foreground)', hover: 'background:var(--accent)' }, 'Navigate'));
+  }
+  return nodes;
+}
+
+
+/* ── Focus (Run 2, R7) ────────────────────────────────────────────────────────────────────────── */
+
+/** Focus is a layout, not a record: it is never stored, and no host is created, moved or re-parented to enter it. */
+export function enterFocus() { if (!state.layoutFocus) setState({ layoutFocus: true, menuOpen: false, paletteOpen: false }); }
+export function leaveFocus() { if (state.layoutFocus) setState({ layoutFocus: false }); }
+export const toggleFocus = () => (state.layoutFocus ? leaveFocus() : enterFocus());
+
+/* ── the palette (Run 2, R6) ──────────────────────────────────────────────────────────────────── */
+
+let palQ = '';
+let palSel = 0;
+
+/** Everything the palette can jump to, in the order it lists them. Derived on each open, never stored. */
+export function paletteItems() {
+  const items = [];
+  const tuples = repoTuples();
+  for (const t of tuples) {
+    const repo = t[0];
+    for (const g of groupsFor(repo)) for (const slug of g.slugs) {
+      if (items.some((x) => x.kind === 'initiative' && x.repo === repo && x.slug === slug)) continue;
+      items.push({ kind: 'initiative', label: slug, hint: repo, repo, slug,
+        run: () => { selectRepo(repo); setState({ sel: slug, detail: { kind: 'init' }, col2: true }); } });
+    }
+  }
+  for (const t of tuples) items.push({ kind: 'repository', label: t[0], hint: t[1] || '', run: () => selectRepo(t[0]) });
+  for (const t of state.tabs || []) {
+    items.push({ kind: t.kind === 'term' ? 'session' : 'tab', label: String(t.title || t.id).replace(/^tool · /, ''), hint: t.kind === 'term' ? 'session' : 'open tab',
+      run: () => setState({ active: t.id }) });
+  }
+  for (const k of Object.keys(VIEWS)) if (offered(k)) items.push({ kind: 'view', label: VIEWS[k].label, hint: VIEWS[k].hint || 'view', run: () => openView(k) });
+  return items;
+}
+
+const palFilter = (items, q) => {
+  const w = q.toLowerCase().split(/\s+/).filter(Boolean);
+  // with nothing typed, every kind shows: a long list of initiatives must not push the views off the list
+  if (!w.length) { const seen = {}; return items.filter((it) => (seen[it.kind] = (seen[it.kind] || 0) + 1) <= 6); }
+  return items.filter((it) => w.every((x) => (it.label + ' ' + it.hint + ' ' + it.kind).toLowerCase().includes(x))).slice(0, 40);
+};
+
+/* The input is made once and kept: a repaint replaces the list under it, never the box being typed in, so focus and the caret survive. */
+let palItems = [];
+const palClose = () => setState({ paletteOpen: false });
+const palChoose = (it) => { if (!it) return; setState({ paletteOpen: false }); it.run(); };
+const palInput = el('input', {
+  type: 'text', 'data-palette': 'input', placeholder: 'Jump to anything…', autocomplete: 'off', spellcheck: 'false',
+  style: 'width:100%;box-sizing:border-box;font:14px var(--sans);padding:12px 14px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--foreground);outline:none',
+  onInput: (e) => { palQ = e.target.value; palSel = 0; setState({}); },
+  onKeydown: (e) => {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); palClose(); }
+    else if (e.key === 'ArrowDown') { e.preventDefault(); palSel = Math.min(palItems.length - 1, palSel + 1); setState({}); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); palSel = Math.max(0, palSel - 1); setState({}); }
+    else if (e.key === 'Enter') { e.preventDefault(); e.stopPropagation(); palChoose(palItems[palSel]); }
+  },
+});
+
+export function renderPalette(host) {
+  if (!state.paletteOpen) { palQ = ''; palSel = 0; palInput.value = ''; setChildren(host, []); return host; }
+  const items = palItems = palFilter(paletteItems(), palQ);
+  if (palSel >= items.length) palSel = Math.max(0, items.length - 1);
+  if (palInput.value !== palQ) palInput.value = palQ;
+  const rows = items.length ? items.map((it, i) => el('button', {
+    'data-palette': 'item', 'data-kind': it.kind, 'aria-selected': i === palSel ? 'true' : 'false', onClick: () => palChoose(it),
+    style: 'display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:7px 14px;font-size:13px;background:' + (i === palSel ? 'var(--accent)' : 'transparent'),
+    hover: 'background:var(--accent)',
+  }, el('span', { style: LBL + ';width:78px;flex:none' }, it.kind), el('span', { style: 'flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, it.label),
+    el('span', { style: 'color:var(--muted-foreground);font-size:11px;white-space:nowrap' }, it.hint)))
+    : [el('div', { 'data-palette': 'empty', style: 'padding:14px;color:var(--muted-foreground);font-size:12px' }, 'Nothing matches "' + palQ + '".')];
+  const fresh = !host.firstChild;
+  setChildren(host, [el('div', { 'data-palette': 'overlay', onClick: (e) => { if (e.target === e.currentTarget) palClose(); },
+    style: 'position:fixed;inset:0;z-index:60;background:oklch(0 0 0 / 45%);display:flex;justify-content:center;align-items:flex-start;padding-top:12vh' },
+  el('div', { role: 'dialog', 'aria-label': 'Jump to anything', style: 'width:560px;max-width:calc(100vw - 32px);background:var(--popover, var(--card));color:var(--foreground);border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 20px 50px oklch(0 0 0 / 50%)' },
+    palInput, el('div', { 'data-palette': 'list', style: 'max-height:50vh;overflow-y:auto;padding:4px 0' }, rows)))]);
+  // the box is in the document now, so focus it at once: a key pressed straight after ⌘K must land in it
+  if (fresh || document.activeElement !== palInput) { try { palInput.focus(); } catch { /* not mounted */ } }
+  return host;
+}
+
+/* ── Today's board (Run 2, R9) ────────────────────────────────────────────────────────────────── */
+
+const DISMISS_REASONS = ['not now', 'wrong priority', 'already handled'];
+
+/** The initiatives waiting on the person, from derived status. `all` widens it from the current repository to every one. */
+export function needsCards(all) {
+  const repos = all ? Object.keys(state.statuses || {}) : [currentProduct()].filter(Boolean);
+  const out = [];
+  for (const repo of repos) {
+    for (const slug of Object.keys((state.statuses && state.statuses[repo]) || {})) {
+      if (!NEEDS.includes(statusKey(repo, slug))) continue;
+      if ((state.todayDismissed || {})[repo + '/' + slug]) continue;
+      out.push({ repo, slug, key: statusKey(repo, slug) });
+    }
+  }
+  return out;
+}
+
+function todayBoard() {
+  const all = state.todayScope === 'all';
+  const cards = needsCards(all);
+  const repos = repoTuples();
+  const hour = new Date().getHours();
+  const greet = hour < 12 ? 'Good morning' : hour < 18 ? 'Good afternoon' : 'Good evening';
+  const prepared = [];
+  for (const t of repos) {
+    if (!all && t[0] !== currentProduct()) continue;
+    for (const slug of Object.keys((state.statuses && state.statuses[t[0]]) || {})) {
+      if (statusKey(t[0], slug) === 'in-progress') prepared.push({ repo: t[0], slug });
+    }
+  }
+  const toggle = el('div', { 'data-today': 'scope', style: 'display:flex;gap:2px;background:var(--accent);border-radius:8px;padding:3px' },
+    ...[['repo', 'Repository'], ['all', 'All']].map(([k, label]) => el('button', {
+      'data-today-scope': k, 'aria-pressed': (k === 'all') === all ? 'true' : 'false',
+      onClick: () => setState({ todayScope: k === 'all' ? 'all' : 'repo' }),
+      style: 'font:12px var(--sans);padding:2px 10px;border-radius:6px;' + ((k === 'all') === all ? 'background:var(--background);font-weight:500;color:var(--foreground)' : 'color:var(--muted-foreground)'),
+    }, label)));
+  const card = (c) => el('div', { 'data-today': 'card', 'data-slug': c.slug, style: 'border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--card)' },
+    el('div', { style: 'display:flex;gap:8px;align-items:baseline' },
+      el('span', { style: 'font-weight:600;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis' }, c.slug),
+      el('span', { style: 'margin-left:auto;color:var(--muted-foreground);font-size:11px' }, c.repo)),
+    badge(c.key === 'needs-you' ? 'needs you' : 'review', c.key === 'needs-you' ? 'd' : 'w'),
+    el('div', { style: 'display:flex;gap:6px;flex-wrap:wrap;align-items:center' },
+      el('button', { 'data-today': 'open', onClick: () => { selectRepo(c.repo); setState({ sel: c.slug, detail: { kind: 'init' }, col2: true }); },
+        style: 'font:500 12px var(--sans);padding:3px 10px;border-radius:6px;background:var(--primary);color:var(--primary-foreground)' }, c.key === 'needs-you' ? 'Unblock' : 'Review'),
+      el('span', { style: 'color:var(--muted-foreground);font-size:11px' }, 'dismiss:'),
+      ...DISMISS_REASONS.map((r) => el('button', { 'data-today': 'dismiss', 'data-reason': r,
+        onClick: () => setState((s) => ({ todayDismissed: { ...(s.todayDismissed || {}), [c.repo + '/' + c.slug]: r } })),
+        style: 'font:11px var(--sans);padding:1px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted-foreground)', hover: 'color:var(--foreground)' }, r))));
+  const col = (title, kids, attr) => el('div', { 'data-today': attr, style: 'flex:1;min-width:260px;display:flex;flex-direction:column;gap:8px' },
+    el('div', { style: LBL }, title), ...kids);
+  const empty = (t) => el('div', { style: 'color:var(--muted-foreground);font-size:12px' }, t);
+  return el('div', { 'data-today': 'board', style: 'display:flex;flex-direction:column;gap:14px;padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'display:flex;align-items:center;gap:12px' },
+      el('div', { 'data-today': 'greeting', style: 'font-size:18px;font-weight:600' }, greet), toggle),
+    el('div', { 'data-today': 'count', style: 'color:var(--muted-foreground);font-size:12px' },
+      cards.length + (cards.length === 1 ? ' thing needs you' : ' things need you') + (all ? ' across ' + repos.length + ' repositories' : ' in ' + (currentProduct() || 'this repository'))
+      + ' · ' + prepared.length + ' in progress'),
+    el('div', { 'data-today': 'sources', style: 'color:var(--muted-foreground);font-size:11px' },
+      'Sources reached: ' + (FIXTURE ? 'the fixture records' : 'derived status of ' + Object.keys(state.statuses || {}).length + ' repositories') + '. No mail or calendar is read here.'),
+    el('div', { style: 'display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start' },
+      col('Needs you', cards.length ? cards.map(card) : [empty('Nothing is waiting on you.')], 'needs'),
+      col('Prepared for you', prepared.length ? prepared.map((c) => el('button', { 'data-today': 'prepared', 'data-slug': c.slug,
+        onClick: () => { selectRepo(c.repo); setState({ sel: c.slug, detail: { kind: 'init' }, col2: true }); },
+        style: 'text-align:left;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;background:var(--card)', hover: 'background:var(--accent)' }, c.slug + ' · ' + c.repo)) : [empty('Nothing is being prepared.')], 'prepared'),
+      col('Today', [empty('Events come from the morning brief; none was read into this view.')], 'events')));
+}