create-pmos 0.52.0 → 0.53.0

package/workspace/public/pm/app.js

@@ -1,4 +1,13 @@
-/* pm/app.js — the shell of the four-panel workspace, and its render loop.
+/* pm/app.js — the shell of the workspace, and its render loop.
+ *
+ * ── Two shells (pm-os-absorb Run 3, slice 3A) ───────────────────────────────────────────────
+ * THE FRAME is the default (PRD R9, R10, R15): one top bar (topbar.js: Repository ▾ · Today Initiatives Board Reports ·
+ * ⌘K · Sync when unsynced · Settings), the destination on screen (each one mounted by registry.js mountDestTab into a
+ * persistent host that carries data-dest="<id>"), the detail as a closable column when something opens one, and the
+ * agent dock (dock.js; it is panel 4, #pm-tabs) open on Today and a 44px rail everywhere else. The phone shows the same
+ * hosts one at a time under five tabs (pm/mobile.js). There is no left sidebar.
+ * THE FOUR-PANEL COCKPIT below stays for fixture mode (the parity boards, until slice 3D lifts the lock) and for
+ * `?layout=legacy`. Everything from here to "the frame" describes it.
  *
  * Owns: the root grid, the 44px top bar, the 26px status bar, the body grid's four tracks, the
  * three collapsed rails, and the keyboard (⌘K / Esc). Everything inside a panel belongs to that
@@ -27,6 +36,12 @@ import { state, setState, subscribe, flush, FIXTURE, LEGACY_LAYOUT_FLAG } from '
  * the shell's only part in it is to keep all four hosts mounted below the breakpoint and to hand
  * the module a repaint. See pm/mobile.js. */
 import { isMobile, mountMobile, applyMobile } from './mobile.js';
+/* The frame's parts (Run 3, slice 3A). Small modules with no effect at import: a fixture page loads them and calls none. */
+import { createTopbar, unsyncedOf } from './topbar.js';
+import { createDockRail } from './dock.js';
+import { SEL, ensureComponentsCss, iconButton, button, menu, toast } from './primitives.js';
+import { ensureSprite } from './icons.js';
+import { COPY as FC } from './frame-copy.js';
 
 /* The LEGACY layout is the three-column shell of column-layout: repositories with the list under them, the detail, the tabs, and
  * a list that a mode (skills, memory …) replaces. A phone still draws it until Run 4 of workspace-cockpit-nav, and `?layout=legacy`
@@ -35,16 +50,10 @@ const legacyLayout = () => LEGACY_LAYOUT_FLAG || isMobile();
 
 /* ── derived labels (the prototype's two title maps, lines 1409 / 1699) ─────────────────────── */
 
-const MODE_TITLE = {
-  product: 'initiatives', scheduled: 'scheduled tasks', workflow: 'workflows', skills: 'skills',
-  knowledge: 'knowledge', agent: 'agents', memory: 'memory', connect: 'connections', focus: 'focus',
-  portfolio: 'portfolio', guide: 'guide', validate: 'validate', today: 'today',
-};
+const MODE_TITLE = { product: 'initiatives', workflow: 'workflows', validate: 'validate', today: 'today' };
 const modeTitle = () => MODE_TITLE[state.mode] || 'initiatives';
 const DETAIL_TITLE = {
-  init: 'initiative', flow: 'workflow', sched: 'scheduled task', skill: 'skill', know: 'decision',
-  agent: 'agent', mem: 'memory', prof: 'claude profile', intg: 'connection',
-  addprod: 'add product', new: 'file new',
+  init: 'initiative', flow: 'workflow', skill: 'skill', prof: 'claude profile', addprod: 'add product', new: 'file new',
 };
 
 const detailTitle = () => DETAIL_TITLE[(state.detail && state.detail.kind) || ''] || 'detail';
@@ -69,7 +78,7 @@ const col0w = () => clampW(state.col0W, W0);
  * tabs fill the rest. The DOM still holds four hosts in the same order — repos, list, detail, tabs — and the grid
  * puts the list host under the repositories host (see placeHosts). Folded away, the navigation column is a 36px
  * rail; the list alone folds to a one-line bar under the repositories. */
-const gridCols = (legacy, focus) => focus ? 'minmax(0,1fr) 360px' : legacy
+const gridCols = (legacy) => legacy
   ? (state.col0 ? col0w() + 'px' : '36px') + ' ' + (state.col2 ? 'minmax(420px,560px)' : '36px') + ' minmax(0,1fr)'
   : '65px ' + (state.col1 ? col0w() + 'px' : '36px') + ' ' + (state.col2 ? 'minmax(420px,470px)' : '36px') + ' minmax(0,1fr)';
 
@@ -193,8 +202,6 @@ const statusBar = el('div', {
   statusLeft,
   el('span', null, '⌘K jump · Esc closes tab'),
 );
-/* The rail's menu is drawn into this host, a sibling of the body so it can float over all four columns. */
-const menuHost = el('div', { 'data-shell': 'menu', style: 'display:contents' });
 const paletteHost = el('div', { id: 'pm-palette', 'data-shell': 'palette', style: 'display:contents' });
 
 /* The body grid's own geometry, in one place so the initial build and every repaint below cannot
@@ -203,8 +210,8 @@ const paletteHost = el('div', { id: 'pm-palette', 'data-shell': 'palette', style
  * would push the grid taller than the box it was given. */
 // A cockpit desktop is one row of four columns; the legacy layout is two rows (repositories, then the list under them) on a desktop
 // and one on a phone, where the hosts are shown one at a time.
-const BODY_GRID_STYLE = (legacy, phone, focus) =>
-  'display:grid;grid-template-columns:' + gridCols(legacy, focus) + ';grid-template-rows:' + (legacy && !phone ? 'auto minmax(0,1fr)' : 'minmax(0,1fr)') + ';min-height:0;overflow:hidden';
+const BODY_GRID_STYLE = (legacy, phone) =>
+  'display:grid;grid-template-columns:' + gridCols(legacy) + ';grid-template-rows:' + (legacy && !phone ? 'auto minmax(0,1fr)' : 'minmax(0,1fr)') + ';min-height:0;overflow:hidden';
 
 const bodyGrid = el('div', { 'data-shell': 'body', style: BODY_GRID_STYLE(false, false) });
 
@@ -251,9 +258,9 @@ const hostRepos = el('div', { id: 'pm-rail', style: HOST_STYLE.repos });
 const hostInits = el('div', { id: 'pm-list', style: HOST_STYLE.initsDesk });
 makeEdgeDrag(hostInits, 'col0W', W0, col0w);
 const hostDetail = el('div', { id: 'pm-detail', style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0;display:flex;flex-direction:column' });
-const hostTabs = el('div', { id: 'pm-tabs', style: 'background:var(--term-bg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden' });
+const hostTabs = el('div', { id: 'pm-tabs', class: 'lg-dock' });
 
-setChildren(root, [topBar, bodyGrid, statusBar, menuHost, paletteHost]);
+setChildren(root, [topBar, bodyGrid, statusBar, paletteHost]);
 
 /* ── panel modules, loaded at boot and tolerated when absent ────────────────────────────────── */
 
@@ -315,7 +322,9 @@ function placeHosts(legacy, phone, kids) {
 
 let lastLegacy = null;
 function render() {
+  if (FRAME) return renderFrame();
   root.setAttribute('data-pm-theme', state.theme);
+  document.documentElement.setAttribute('data-pm-page-theme', state.theme);
   const phone = isMobile();
   const legacy = legacyLayout();
   // the mockup's body line-height is 1.45; the legacy shell's panels are drawn for 1.5
@@ -352,7 +361,7 @@ function render() {
     hostRepos.style.gap = legacy ? '' : '10px';
     hostRepos.style.padding = legacy ? '' : '12px 0';
   }
-  const focus = !legacy && !phone && !!state.layoutFocus;
+  const focus = false;   // the Focus arrangement is cut (R29); BODY_GRID_STYLE keeps its third parameter so this line does not change
   bodyGrid.setAttribute('style', BODY_GRID_STYLE(legacy, phone, focus));
 
   // On a phone there are no rails to collapse into and no second column to fold away: the four hosts all stay mounted, one is
@@ -363,29 +372,275 @@ function render() {
   else if (legacy) {
     const listHost = state.col1 ? hostInits : listBar;
     kids = [state.col0 ? hostRepos : railRepos(), state.col0 ? listHost : null, state.col2 ? hostDetail : rail2.btn, hostTabs].filter(Boolean);
-  } else if (focus) kids = [hostDetail, hostTabs];   // Focus: the tabs and a 360px detail; hostTabs is never moved, only the others come and go
-  else kids = [hostRepos, state.col1 ? hostInits : rail1.btn, state.col2 ? hostDetail : rail2.btn, hostTabs];
+  } else kids = [hostRepos, state.col1 ? hostInits : rail1.btn, state.col2 ? hostDetail : rail2.btn, hostTabs];
   setChildren(bodyGrid, kids);
   placeHosts(legacy, phone, kids);
-  if (focus) { hostTabs.style.gridColumn = '1'; hostTabs.style.gridRow = '1'; hostDetail.style.gridColumn = '2'; hostDetail.style.gridRow = '1'; }
 
   if (legacy) {
     if (phone || state.col0) paint(mods.repos, 'renderRepos', hostRepos);
     if (phone || (state.col0 && state.col1)) paint(mods.inits, 'renderInitiatives', hostInits);
     if (phone || state.col2) paint(mods.detail, 'renderDetail', hostDetail);
-  } else if (focus) {
-    paint(mods.detail, 'renderDetail', hostDetail);
   } else {
     paint(mods.cockpit, 'renderRail', hostRepos);
     if (state.col1) paint(mods.cockpit, 'renderWorkList', hostInits);
     if (state.col2) paint(mods.detail, 'renderDetail', hostDetail);
   }
   paint(mods.tabs, 'renderTabs', hostTabs);
-  paint(mods.cockpit, 'renderMenu', menuHost);
   paint(mods.cockpit, 'renderPalette', paletteHost);
   applyMobile();
 }
 
+/* ── the frame (pm-os-absorb Run 3, slice 3A; PRD R9, R10, R15) ──────────────────────────────
+ * The default shell outside fixture mode and `?layout=legacy`. It REUSES the persistent hosts above: hostDetail moves
+ * into the detail column, hostTabs (panel 4, the live terminals) is the dock and is never re-parented once the frame is
+ * up, and hostRepos/hostInits are not mounted at all (there is no left sidebar). What is new:
+ *   hostMain       the place on screen: one persistent host per destination ([data-fr-host]); registry.js
+ *                  mountDestTab gives each its data-dest and draws the destination, or "<Label> arrives in Run N."
+ *   the top bar    topbar.js
+ *   the dock rail  dock.js; the dock is OPEN on Today and a 44px rail elsewhere. It never opens by itself: a tab
+ *                  opened while it is a rail waits in it. ⌘J and the rail's control toggle it.
+ * Destination, repository scope and Repository ▾ live here; what the PM picks is kept in this browser (FRAME_KEY).
+ * The detail column is `state.col2`: anything that sets `col2: true` (the palette, an initiative opener, Settings ›
+ * Profiles) opens it, and its close control or Esc sets it back to false. */
+
+const FRAME = !FIXTURE && !LEGACY_LAYOUT_FLAG;
+const FRAME_KEY = 'pmos.workspace.pm.frame';
+const FRAME_DESTS = Object.freeze(['today', 'initiatives', 'board', 'reports', 'settings']);
+
+function readFrame() {
+  if (!FRAME) return {};
+  try { const j = JSON.parse(localStorage.getItem(FRAME_KEY) || 'null'); return j && typeof j === 'object' ? j : {}; } catch { return {}; }
+}
+const fr = (() => {
+  const s = readFrame();
+  return { dest: FRAME_DESTS.includes(s.dest) ? s.dest : 'today', scope: s.scope === 'all' ? 'all' : 'repo', params: {}, dock: {}, syncing: false, reg: null, gAt: 0, needs: 0 };
+})();
+function writeFrame() {
+  try { localStorage.setItem(FRAME_KEY, JSON.stringify({ dest: fr.dest, scope: fr.scope })); } catch { /* private mode: the default stands */ }
+}
+
+const activeRepo = () => (mods.repos && typeof mods.repos.activeProduct === 'function' ? mods.repos.activeProduct() : state.product || null);
+/** The dock on the current destination: what the PM chose here with ⌘J or the rail, else open on Today only. */
+const dockOpen = () => (Object.prototype.hasOwnProperty.call(fr.dock, fr.dest) ? fr.dock[fr.dest] : fr.dest === 'today');
+
+function go(id, params) {
+  if (!FRAME_DESTS.includes(id)) return false;
+  const p = params || {};
+  if (p.repo) chooseRepo(p.repo);
+  fr.dest = id;
+  fr.params = { repo: p.repo || null, slug: p.slug || null };
+  writeFrame();
+  setState({ menuOpen: false, paletteOpen: false });
+  return true;
+}
+function setDock(open) { fr.dock[fr.dest] = !!open; setState({}); }
+const toggleDock = () => setDock(!dockOpen());
+const foldDock = () => setDock(false);
+const openDock = () => setDock(true);
+function chooseRepo(name) {
+  fr.scope = 'repo';
+  writeFrame();
+  if (name && name !== state.product && mods.repos && typeof mods.repos.selectRepo === 'function') mods.repos.selectRepo(name);
+  setState({ todayScope: 'repo' });
+}
+function chooseAll() { fr.scope = 'all'; writeFrame(); setState({ todayScope: 'all' }); }
+const openPalette = () => setState({ paletteOpen: true, menuOpen: false });
+const closeDetail = () => setState({ col2: false });
+
+function repoMenu(anchor) {
+  const tuples = mods.repos && typeof mods.repos.repoTuples === 'function' ? mods.repos.repoTuples() : [];
+  const cur = fr.scope === 'all' ? null : activeRepo();
+  const items = tuples.map((t) => ({ label: t[0], icon: t[0] === cur ? 'check' : null, onSelect: () => chooseRepo(t[0]) }));
+  if (items.length) items.push({ sep: true });
+  items.push({ label: FC.repo.all, icon: fr.scope === 'all' ? 'check' : null, onSelect: chooseAll });
+  menu({ anchor, items, ariaLabel: FC.repo.menu });
+}
+
+/* Sync: the bar shows it only while the current repository is not in sync. The reading is local git (GET
+ * /api/sync/status), re-read a minute after the last one and at once after a Sync. */
+const syncSeen = new Map();   // repo -> { at, st, pending }
+function syncReading(repo) {
+  const d = mods.data;
+  if (!repo || !d || typeof d.syncStatusOf !== 'function' || (typeof d.wsOf === 'function' && !d.wsOf(repo))) return null;
+  const have = syncSeen.get(repo);
+  if (!have || (!have.pending && Date.now() - have.at > 60000)) {
+    const e = { at: Date.now(), st: have ? have.st : null, pending: true };
+    syncSeen.set(repo, e);
+    Promise.resolve(d.syncStatusOf(repo)).then((st) => { e.st = st; e.at = Date.now(); e.pending = false; setState({}); })
+      .catch(() => { e.pending = false; e.at = Date.now(); });
+  }
+  return syncSeen.get(repo).st;
+}
+async function runSync() {
+  const repo = fr.scope === 'all' ? null : activeRepo();
+  if (!repo || fr.syncing || !mods.data || typeof mods.data.syncRepository !== 'function') return;
+  fr.syncing = true;
+  setState({});
+  let res;
+  try { res = await mods.data.syncRepository(repo); } catch (e) { res = { ok: false, message: String((e && e.message) || e) }; }
+  fr.syncing = false;
+  syncSeen.delete(repo);
+  toast({ text: res && res.ok ? FC.sync.done : FC.sync.stopped((res && res.step) || FC.sync.label, (res && (res.message || res.error)) || '') });
+  setState({});
+}
+
+let bar = null;
+let dockRail = null;
+let frDetail = null;
+let pin = null;
+const hostMain = el('div', { class: 'fr-main', 'data-fr': 'main' });
+const destHosts = {};
+for (const id of FRAME_DESTS) destHosts[id] = el('div', { class: 'fr-dest', 'data-fr-host': id, hidden: true });
+const frEnd = el('span', { class: 'fr-end', 'aria-hidden': 'true' });
+
+function setupFrame() {
+  ensureComponentsCss();
+  ensureSprite();
+  bar = createTopbar({ go, openPalette, repoMenu, sync: runSync });
+  document.addEventListener('pointerdown', (e) => { fr.downAt = e.target; }, true);
+  dockRail = createDockRail({ open: openDock });
+  frDetail = el('div', { class: 'fr-detail', 'data-fr': 'detail' },
+    el('div', { class: 'fr-detail__bar' }, iconButton({ icon: 'x', ariaLabel: FC.detail.close, onClick: closeDetail, attrs: { 'data-fr': 'detail-close' } })),
+    hostDetail);
+  pin = button({ label: FC.phone.pin, variant: 'outline', block: true, attrs: { class: 'fr-pin', 'data-fr': 'pin', 'aria-keyshortcuts': 'Meta+K Control+K' }, onClick: openPalette });
+  root.removeAttribute('style');
+  root.classList.add('fr-root');
+  bodyGrid.removeAttribute('style');
+  bodyGrid.classList.add('fr-body');
+  hostTabs.classList.add('fr-dock');
+  setChildren(root, [bar.node, bodyGrid, paletteHost, frEnd]);
+  // the frame opens with no detail: the column comes when something opens one
+  setState({ col2: false, todayScope: fr.scope });
+}
+
+function paintMain(phone) {
+  // the state-health banner (panel-repos.js) heads every place while the runtime state is not settled: it is not
+  // dismissible, and the frame has no repository panel for it to sit in
+  let banner = null;
+  try { banner = mods.repos && typeof mods.repos.stateHealthBanner === 'function' ? mods.repos.stateHealthBanner() : null; } catch { banner = null; }
+  const kids = [banner, phone && fr.dest === 'today' ? pin : null, ...FRAME_DESTS.map((id) => destHosts[id])];
+  setChildren(hostMain, kids);
+  for (const id of FRAME_DESTS) destHosts[id].hidden = id !== fr.dest;
+  const reg = fr.reg;
+  if (!reg) return;
+  const host = destHosts[fr.dest];
+  const scope = fr.scope;
+  try {
+    reg.mountDestTab(host, {
+      id: 'frame:' + fr.dest, kind: 'dest', view: fr.dest, title: FC.nav[fr.dest], role: fr.dest,
+      repo: scope === 'all' ? null : (fr.params.repo || activeRepo()), slug: fr.params.slug || null, scope,
+    });
+  } catch (e) { console.error('[pm] destination ' + fr.dest + ' failed:', e); }
+}
+
+function renderFrame() {
+  root.setAttribute('data-pm-theme', state.theme);
+  document.documentElement.setAttribute('data-pm-page-theme', state.theme);
+  if (mods.cockpit && typeof mods.cockpit.absorbMode === 'function' && mods.cockpit.absorbMode()) return;
+  const phone = isMobile();
+  const repo = fr.scope === 'all' ? null : activeRepo();
+  const st = repo ? syncReading(repo) : null;
+  let needs = 0;
+  try { needs = mods.cockpit && typeof mods.cockpit.needsCount === 'function' ? mods.cockpit.needsCount() : 0; } catch { needs = 0; }
+  fr.needs = needs;
+  fr.unsynced = unsyncedOf(st);   // the phone bar (mobile.js) shows Sync on the same reading
+  bar.update({ dest: fr.dest, repoLabel: fr.scope === 'all' ? FC.repo.all : repo, needs, unsynced: fr.unsynced, syncing: fr.syncing });
+  const open = dockOpen();
+  bodyGrid.setAttribute('data-fr-dock', phone ? 'phone' : open ? 'open' : 'rail');
+  const detail = !!state.col2;
+  // Four children in every arrangement, hostTabs the fourth and last, so setChildren never moves it (a moved xterm loses
+  // its grid) and a reader of the body's fourth child still finds panel 4. A closed detail stays mounted, hidden.
+  frDetail.hidden = !phone && !detail;
+  setChildren(bodyGrid, phone ? [hostMain, dockRail, frDetail, hostTabs] : [hostMain, frDetail, dockRail, hostTabs]);
+  paintMain(phone);
+  if (detail || phone) paint(mods.detail, 'renderDetail', hostDetail);
+  paint(mods.tabs, 'renderTabs', hostTabs);
+  paint(mods.cockpit, 'renderPalette', paletteHost);
+  applyMobile();
+}
+
+/* The frame's keys. A key typed into a field, a terminal or an open sheet or palette is the field's. */
+const ROW_SEL = [SEL.row, SEL.card, '[data-fr-row]'].join(', ');
+function typingIn(t) {
+  if (!t || t.nodeType !== 1) return false;
+  return /^(INPUT|TEXTAREA|SELECT)$/.test(t.tagName) || t.isContentEditable || !!(t.closest && t.closest('.xterm'));
+}
+function shown(n) { return !!n && n.getClientRects().length > 0 && !n.closest('[hidden]'); }
+function rowsHere() {
+  const scope = [destHosts[fr.dest], state.col2 ? frDetail : null].filter(Boolean);
+  const out = [];
+  for (const s of scope) for (const r of s.querySelectorAll(ROW_SEL)) if (shown(r) && !out.some((x) => x.contains(r))) out.push(r);
+  return out;
+}
+const OPEN_SEL = [SEL.rowOpen, SEL.cardOpen].join(', ');
+const openTarget = (r) => r.querySelector(OPEN_SEL) || r.querySelector('button') || r;
+function pressIn(r, key) {
+  const b = r && r.querySelector('[data-key~="' + key + '"]');
+  if (b && !b.disabled) { b.click(); return true; }
+  return false;
+}
+const G_KEYS = { t: 'today', i: 'initiatives', b: 'board', r: 'reports' };
+
+function frameKey(e) {
+  const mod = e.metaKey || e.ctrlKey;
+  if (mod && (e.key === 'k' || e.key === 'K')) { e.preventDefault(); setState({ paletteOpen: !state.paletteOpen, menuOpen: false }); return; }
+  if (mod && (e.key === 'j' || e.key === 'J')) { e.preventDefault(); if (!isMobile()) toggleDock(); return; }
+  if (e.key === 'Escape') {
+    if (state.paletteOpen) { setState({ paletteOpen: false }); return; }
+    if (state.menuOpen) { setState({ menuOpen: false }); return; }
+    if (modalOpen() || typingIn(e.target)) return;
+    if (state.col2 && !hostTabs.contains(e.target)) { closeDetail(); return; }
+    // Esc closes the active tab only while the dock is open, and only from the dock or from nowhere in particular (the
+    // page itself): an Esc pressed in the place or the detail never closes a tab, and a folded dock keeps its tabs. A
+    // click on blank space leaves the focus on the page, so the last pointer press says where the PM was.
+    const down = fr.downAt && fr.downAt.isConnected ? fr.downAt : null;
+    const inPlace = !!down && (hostMain.contains(down) || (!!frDetail && frDetail.contains(down)));
+    const fromPage = (!e.target || e.target === document.body || e.target === document.documentElement) && !inPlace;
+    if (dockOpen() && !isMobile() && (hostTabs.contains(e.target) || fromPage)) {
+      setState((s) => {
+        if (!s.active) return null;
+        const rest = s.tabs.filter((t) => t.id !== s.active);
+        return { tabs: rest, active: rest.length ? rest[rest.length - 1].id : null, splitId: s.splitId === s.active ? null : s.splitId };
+      });
+    }
+    return;
+  }
+  if (mod || state.paletteOpen || modalOpen() || typingIn(e.target) || hostTabs.contains(e.target)) return;
+  const k = e.key;
+  if (!e.altKey && fr.gAt && Date.now() - fr.gAt < 1200 && G_KEYS[k]) { fr.gAt = 0; e.preventDefault(); go(G_KEYS[k]); return; }
+  fr.gAt = !e.altKey && k === 'g' ? Date.now() : 0;
+  if (k === 'g') return;
+  const a = document.activeElement;
+  const cur = a && a !== document.body ? a.closest(ROW_SEL) : null;
+  if (k === 'j' || k === 'k') {
+    const rows = rowsHere();
+    if (!rows.length) return;
+    e.preventDefault();
+    const at = cur ? rows.findIndex((r) => r === cur || r.contains(cur) || cur.contains(r)) : -1;
+    const next = at < 0 ? (k === 'j' ? 0 : rows.length - 1) : Math.min(rows.length - 1, Math.max(0, at + (k === 'j' ? 1 : -1)));
+    openTarget(rows[next]).focus();
+    return;
+  }
+  if (!cur) return;
+  if (k === 'Enter' && a === cur) { e.preventDefault(); openTarget(cur).click(); return; }
+  // Space ticks and never opens: on a row, or on the row's open target, it presses the row's tick control, or nothing.
+  // On any other button of the row (⋯, a card's own button) Space is the browser's: it presses that button.
+  if (k === ' ') {
+    if (a !== cur && !(a.matches(OPEN_SEL) && a.closest(ROW_SEL) === cur)) return;
+    e.preventDefault(); pressIn(cur, 'space'); return;
+  }
+  if (e.altKey && (k === 'ArrowUp' || k === 'ArrowDown')) { if (pressIn(cur, k === 'ArrowUp' ? 'alt-up' : 'alt-down')) e.preventDefault(); return; }
+  if (!e.altKey && (k === 'a' || k === 'x')) { if (pressIn(cur, k)) e.preventDefault(); }
+}
+
+/* What the suites and the phone chrome reach the frame by. */
+const frameApi = {
+  on: true, go, toggleDock, foldDock, openDock, chooseRepo, chooseAll, openPalette, repoMenu, closeDetail, sync: runSync,
+  get unsynced() { return !!fr.unsynced; },
+  get dest() { return fr.dest; }, get scope() { return fr.scope; }, get dockOpen() { return dockOpen(); },
+  get detailOpen() { return !!state.col2; }, get syncing() { return fr.syncing; }, get needs() { return fr.needs || 0; },
+};
+
 /* ── keyboard ──────────────────────────────────────────────────────────────────────────────── */
 
 function focusSearch() {
@@ -394,7 +649,13 @@ function focusSearch() {
   if (input) input.focus();
 }
 
+/** Is a modal <dialog> open? (`:modal` where the browser knows it, else any open dialog.) */
+function modalOpen() {
+  try { return !!document.querySelector('dialog:modal'); } catch { return !!document.querySelector('dialog[open]'); }
+}
+
 function onKeyDown(e) {
+  if (FRAME) { frameKey(e); return; }
   if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
     e.preventDefault();
     // the cockpit's ⌘K is the palette; the legacy layout (and a phone) keep focusing the list's filter
@@ -402,14 +663,10 @@ function onKeyDown(e) {
     else setState({ paletteOpen: !state.paletteOpen, menuOpen: false });
     return;
   }
-  if ((e.metaKey || e.ctrlKey) && e.key === 'Enter' && !legacyLayout()) {
-    e.preventDefault();
-    if (mods.cockpit && typeof mods.cockpit.toggleFocus === 'function') mods.cockpit.toggleFocus();
-    return;
-  }
   if (e.key === 'Escape' && state.paletteOpen) { setState({ paletteOpen: false }); return; }
   if (e.key === 'Escape' && state.menuOpen) { setState({ menuOpen: false }); return; }
-  if (e.key === 'Escape' && state.layoutFocus) { setState({ layoutFocus: false }); return; }
+  // A modal sheet (the Breakdown's item sheet) handles its own Escape; one Escape never closes the sheet AND the tab.
+  if (e.key === 'Escape' && modalOpen()) return;
   if (e.key === 'Escape' && !/INPUT|TEXTAREA/.test(e.target && e.target.tagName)) {
     // Verbatim from the prototype: Esc closes the ACTIVE tab, the last remaining tab takes over,
     // and a split pointing at the closed tab is dropped rather than left dangling.
@@ -431,13 +688,25 @@ async function boot() {
   document.body.appendChild(root);
   subscribe(render);
   window.addEventListener('keydown', onKeyDown);
-  mountMobile({ bodyGrid, render });   // wires the phone chrome; inert above 760px
+  if (FRAME) setupFrame();
+  mountMobile({ bodyGrid, render, frame: FRAME ? frameApi : null });   // wires the phone chrome; inert above 760px
   render();                       // the shell is on screen before any panel module has resolved
   await loadModules();
   render();
+  /* pm-os-absorb Runs 2–5: the destinations and extensions each run adds (pm/registry.js), loaded after the panels and
+   * never in fixture mode. A module that is not on disk is not an error. `pmApp.open(id)` opens a destination. */
+  if (!FIXTURE) {
+    try {
+      const reg = await import('./registry.js'); window.pmApp.open = reg.openDestination; await reg.loadExtensions(); window.pmApp.registry = reg;
+      if (FRAME) { reg.setFrameHome((id, p) => go(id, p)); fr.reg = reg; }   // the frame: pmApp.open(id) is the place on screen
+    }
+    catch (e) { console.error('[pm] the registry failed to load:', e); }
+    render();
+  }
 }
 
 /* A tiny surface for the browser suite and for a panel module that needs to force a paint. */
 window.pmApp = { root, render, state, setState, flush, fixture: FIXTURE, mods, hosts: { hostRepos, hostInits, hostDetail, hostTabs } };
+if (FRAME) { window.pmApp.frame = frameApi; window.pmApp.hosts.hostMain = hostMain; }
 
 boot();

package/workspace/public/pm/bd-board.js

@@ -0,0 +1,113 @@
+/* pm/bd-board.js — the Breakdown's Board (pm-os-absorb Run 1, PRD R19).
+ *
+ * Four columns, Todo · Doing · Review · Done, read from the same items map as the Tree, so a card's column is always its
+ * row's state. Done shows the last 14 days; older done items are counted ("3 older in the Tree") and stay in the Tree.
+ *
+ * When the pane is narrower than 600px — a phone, or the tabs column beside an open list and detail — the Board shows one
+ * column at a time behind a segmented switch (Todo 4 · Doing 2 · Review 1 · Done 3), and a card moves through the item
+ * sheet's state buttons: tap the card, tap the state. When it is wider, the four columns sit side by side and a card is
+ * dragged between them; a drop on Done is held for Undo, like any other Done.
+ */
+
+import { el } from './dom.js';
+import { card, tabs, dragHandle, iconButton, empty } from './primitives.js';
+import { COPY, STATES, shortDate, ownerLabel } from './breakdown-copy.js';
+import { stageLabel } from './bd-model.js';
+import { signalsFor, byPart } from './bd-tree.js';
+
+/** The width below which the Board shows one column at a time. Mirrors components.css's container query. */
+export const WIDE_BOARD = 600;
+
+function boardCard(ctx, id, wide) {
+  const { L, A } = ctx;
+  const it = L.items[id];
+  const meta = [stageLabel(L, it.stage), ownerLabel(it.owner), it.due ? COPY.due(shortDate(it.due)) : null, byPart(it)];
+  const trail = ctx.cardMenus
+    ? [iconButton({
+      icon: 'ellipsis', size: 'sm', ariaLabel: COPY.aria.more(it.title),
+      onClick: (e) => { e.stopPropagation(); A.menu(e.currentTarget, id, 'board'); },
+      attrs: { 'aria-haspopup': 'menu', 'data-fk': 'more:' + id, 'data-bd-more': '' },
+    })]
+    : null;
+  // Without the ⋯ button the card's menu is a right-click away, and Shift+F10 (or the ContextMenu key) for the keyboard.
+  const menuKeys = ctx.cardMenus ? {} : {
+    'aria-keyshortcuts': 'Shift+F10',
+    onContextmenu: (e) => {
+      e.preventDefault();
+      const t = e.currentTarget;
+      // the key that raised this event (Shift+F10, ContextMenu) has already opened the menu below: a second call closes it
+      if (t.getAttribute('aria-expanded') === 'true') return;
+      // On Linux and macOS the event comes on the PRESS. A popover opened then is light-dismissed by the release, which
+      // lands outside it, so the menu opens after the release.
+      if (e.buttons) window.addEventListener('pointerup', () => setTimeout(() => A.menu(t, id, 'board'), 0), { once: true, capture: true });
+      else A.menu(t, id, 'board');
+    },
+    onKeydown: (e) => {
+      if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) { e.preventDefault(); e.stopPropagation(); A.menu(e.currentTarget, id, 'board'); }
+    },
+  };
+  return card({
+    title: it.title, titleIcon: it.milestone ? 'diamond' : null, meta, signals: signalsFor(it, 'board'),
+    lead: wide ? [dragHandle({ label: COPY.aria.reorder(it.title) })] : null, trail,
+    muted: it.proposed, onOpen: () => A.openSheet(id),
+    attrs: { class: 'bd-card', 'data-item': id, 'data-state': it.state },
+    openAttrs: { 'data-fk': 'card:' + id, ...menuKeys },
+  });
+}
+
+/** The Board's nodes: the column switch (shown only when narrow) and the four columns. */
+export function renderBoard(ctx) {
+  const { P, L, A } = ctx;
+  const wide = ctx.wide;
+  const shown = P.boardCol || 'todo';
+  const counts = Object.fromEntries(STATES.map((s) => [s, (L.board[s] || []).length]));
+  const sw = tabs({
+    variant: 'segmented', full: true, ariaLabel: COPY.columns, value: shown,
+    items: STATES.map((s) => ({ id: s, label: COPY.states[s], count: counts[s] })),
+    onChange: (c) => A.setBoardCol(c),
+    attrs: { class: 'bd-switch', 'data-bd-switch': '' },
+  });
+  for (const b of sw.querySelectorAll('[data-tab]')) b.setAttribute('data-fk', 'col:' + b.getAttribute('data-tab'));
+  const cols = STATES.map((s) => el('div', { class: 'bd-col' + (s === shown ? ' bd-col--shown' : ''), 'data-col-wrap': s },
+    el('div', { class: 'bd-col__head' }, el('span', null, COPY.states[s]), el('span', { class: 'bd-col__n' }, '· ' + counts[s])),
+    s === 'done' && L.board.doneOlder > 0 ? el('div', { class: 'bd-col__older', 'data-bd-older': String(L.board.doneOlder) }, COPY.olderInTree(L.board.doneOlder)) : null,
+    // an empty column says so, so a blank area never reads as a failed load
+    !counts[s] && !(s === 'done' && L.board.doneOlder > 0) ? empty({ text: COPY.emptyColumn(COPY.states[s]), attrs: { 'data-bd-empty-col': s } }) : null,
+    // the list fills its column, so the whole column height takes a drop
+    el('div', { class: 'bd-col__list', 'data-col': s, 'aria-label': COPY.states[s] }, (L.board[s] || []).map((id) => boardCard(ctx, id, wide)))));
+  return [sw, el('div', { class: 'bd-board', 'data-bd-board': wide ? 'wide' : 'narrow' }, cols)];
+}
+
+/**
+ * The column under the pointer when the card is dropped. Sortable moves the card only when the pointer is over another
+ * card or past the end of a list, so a drop in the gap between two cards would otherwise land in the last column the
+ * card passed through. The column under the pointer is the one the person chose.
+ */
+function columnUnder(P, e) {
+  const pt = e && e.changedTouches && e.changedTouches.length ? e.changedTouches[0] : e;
+  if (!pt || !Number.isFinite(pt.clientX) || !Number.isFinite(pt.clientY) || (pt.clientX === 0 && pt.clientY === 0)) return null;
+  const under = document.elementFromPoint(pt.clientX, pt.clientY);
+  const col = under && under.closest('[data-col-wrap]');
+  return col && P.root.contains(col) ? col.getAttribute('data-col-wrap') : null;
+}
+
+/** Attach Sortable to the four columns. Only when they are side by side: one column at a time has nowhere to drop. */
+export function bindBoardDrag(ctx, Sortable, drags, baseOptions) {
+  const { P, A } = ctx;
+  if (!ctx.wide) return;
+  const group = 'bd-board:' + P.slug;
+  for (const list of P.bodyEl.querySelectorAll('[data-col]')) {
+    drags.add(new Sortable(list, baseOptions({
+      group, sort: false, draggable: '.bd-card',
+      onStart: () => { P.dragging = true; },
+      onEnd: (evt) => {
+        P.dragging = false;
+        const id = evt.item.getAttribute('data-item');
+        const from = evt.from && evt.from.getAttribute('data-col');
+        const to = columnUnder(P, evt.originalEvent) || (evt.to && evt.to.getAttribute('data-col'));
+        if (id && to && to !== from) A.moveTo(id, to);
+        else A.rerender();
+      },
+    })));
+  }
+}

package/workspace/public/pm/bd-drag.js

@@ -0,0 +1,59 @@
+/* pm/bd-drag.js — drag for the Breakdown, on the vendored SortableJS 1.15.7 (D86 point 1).
+ *
+ * Sortable is loaded on first use as a classic script from /vendor/Sortable.min.js (its UMD build sets window.Sortable).
+ * Drag is never the only way: every move it can make is also on the keyboard (Alt+ArrowUp/Down in the Tree) and in a
+ * menu or the item sheet's state buttons. If the script does not load, those paths still work and one warning is logged.
+ *
+ * Touch: a 150 ms hold starts a drag and a plain swipe scrolls (`delay` + `delayOnTouchOnly` + `touchStartThreshold`,
+ * and `touch-action: pan-y` on the grip in components.css, so a swipe that starts on a grip scrolls too).
+ * iOS Safari gets Sortable's own pointer fallback, because its native drag-and-drop does not start from a touch hold.
+ * The fallback clone stays inside its list (`fallbackOnBody: false`): appended to <body> it would sit outside
+ * [data-pm-theme] and the pane's font, and the PM would drag a dark slab of serif text in the light theme.
+ */
+
+export const IOS = typeof navigator !== 'undefined'
+  && (/iP(hone|ad|od)/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1));
+
+export const baseOptions = (extra) => ({
+  animation: 120, delay: 150, delayOnTouchOnly: true, touchStartThreshold: 5,
+  forceFallback: IOS, fallbackTolerance: 3, fallbackOnBody: false,
+  ghostClass: 'bd-ghost', chosenClass: 'bd-chosen', dragClass: 'bd-dragging', fallbackClass: 'bd-fallback',
+  ...extra,
+});
+
+let loading = null;
+let warned = false;
+
+/** Resolve to the Sortable constructor, loading the vendored script once. Resolves to null when it cannot load. */
+export function loadSortable() {
+  if (typeof window === 'undefined') return Promise.resolve(null);
+  if (window.Sortable) return Promise.resolve(window.Sortable);
+  if (!loading) {
+    loading = new Promise((resolve) => {
+      const s = document.createElement('script');
+      s.src = '/vendor/Sortable.min.js';
+      s.async = true;
+      s.onload = () => resolve(window.Sortable || null);
+      s.onerror = () => {
+        if (!warned) { warned = true; console.warn('[breakdown] drag is unavailable: /vendor/Sortable.min.js did not load. The keyboard and the menus still move items.'); }
+        loading = null;
+        resolve(null);
+      };
+      document.head.appendChild(s);
+    });
+  }
+  return loading;
+}
+
+/**
+ * Sortable instances for one pane, destroyed together before every rebuild. The DOM is always rebuilt from the model
+ * after a drop, so the list Sortable rearranged is never the one that stays on screen.
+ */
+export function dragSet() {
+  const all = [];
+  return {
+    add(inst) { if (inst) all.push(inst); return inst; },
+    destroy() { while (all.length) { const s = all.pop(); try { s.destroy(); } catch { /* already gone */ } } },
+    get size() { return all.length; },
+  };
+}