create-pmos 0.52.0 → 0.53.0

package/workspace/public/pm/mobile.js

@@ -1,8 +1,11 @@
 /* pm/mobile.js — the phone surface of the four-panel workspace (≤760px).
  *
- * Owns three things and nothing else: the top bar (back · the screen's name · the ⌘K jump palette ·
- * theme), the five-destination bottom nav, and the terminal control-key accessory bar that writes
- * real PTY sequences. Its markup ships in public/index.html; its styling in pm/mobile.css.
+ * Owns three things and nothing else: the top bar (back · Repository · the screen's name · the ⌘K
+ * palette · Settings; the old shell shows theme in place of Repository and Settings), the five-tab
+ * bottom nav (Today · Initiatives · Board · Reports · Agent, pm-os-absorb Run 3, slice 3A), and the
+ * terminal control-key accessory bar that writes real PTY sequences. Its markup ships in
+ * public/index.html; its styling in pm/mobile.css. In the frame, a tab is the frame's place (Agent is
+ * the dock) and Settings is pushed over the current tab.
  *
  * ── ONE renderer, two shells ──────────────────────────────────────────────────────────────────
  * Nothing here draws a phone-shaped copy of a panel. The four panel modules render exactly what
@@ -33,6 +36,9 @@
  */
 
 import { state, setState, writeCount, FIXTURE } from './state.js';
+import { COPY as FC } from './frame-copy.js';
+import { ensureComponentsCss } from './primitives.js';
+import { ensureSprite, icon } from './icons.js';
 
 /* ── the breakpoint ─────────────────────────────────────────────────────────────────────────── */
 
@@ -50,19 +56,17 @@ if (!NAV) {
 }
 
 /** kind → which of the four panels draws it. The reducer owns the map; this is only its fallback. */
-const PANEL = { more: 0, list: 1, detail: 2, terminal: 3, doc: 3 };
+const PANEL = { dest: 0, more: 0, list: 1, detail: 2, terminal: 3, doc: 3, agent: 3 };
 const panelOf = (kind) =>
   (NAV && typeof NAV.panelOf === 'function') ? NAV.panelOf(kind)
-    : (Object.prototype.hasOwnProperty.call(PANEL, kind) ? PANEL[kind] : 1);
+    : (Object.prototype.hasOwnProperty.call(PANEL, kind) ? PANEL[kind] : 0);
 
-/* A destination's root list is a MODE. `more` has none: its root is the structure panel itself,
- * which is where the repositories, the workflows, the skills, the knowledge and the connections
- * are reached from — the phone's "more" and the desktop's panel 1 are the same surface. */
-const DEST_MODE = { board: 'product', scheduled: 'scheduled', agents: 'agent', memory: 'memory' };
-/* Two modes postdate the reducer's map (`connect` and `focus` arrived with the four-panel design).
- * They are named here rather than added to `DEST_FOR_MODE`, because MOBNAV-P7 pins that map to the
- * retired app.js's MODES exactly and a mode invented for a different surface would read as drift. */
-const EXTRA_DEST = { connect: 'more', focus: 'board', portfolio: 'more', guide: 'more' };
+/* The old shell (fixture mode, ?layout=legacy) on a phone: a tab's root is the list panel in the mode it shows. Agent
+ * has no mode: it is the tabs panel. In the frame a tab is the frame's place and no mode is set. */
+const DEST_MODE = { today: 'product', initiatives: 'product', board: 'product', reports: 'product' };
+/* Modes that postdate the reducer's map. They are named here rather than added to `DEST_FOR_MODE`, because MOBNAV-P2
+ * iterates that map and a mode invented for a different surface would read as drift. */
+const EXTRA_DEST = {};  // no mode outside the nav's own table reaches a phone destination since the R29 cuts
 
 const destForMode = (m) => (NAV && NAV.destForMode(m)) || EXTRA_DEST[m] || null;
 
@@ -70,9 +74,11 @@ const destForMode = (m) => (NAV && NAV.destForMode(m)) || EXTRA_DEST[m] || null;
 
 const $ = (id) => document.getElementById(id);
 
-const DEST_STORE_KEY = 'pmos.workspace.pm.mdest';
+const DEST_STORE_KEY = 'pmos.workspace.pm.mtab';
+/* The retired five-tab nav's key: read once, through the reducer's migration, never written. */
+const OLD_DEST_KEY = 'pmos.workspace.pm.mdest';
 
-let ctx = null;          // { bodyGrid, render } — handed over by app.js at boot
+let ctx = null;          // { bodyGrid, render, frame } — handed over by app.js at boot (frame: pmApp.frame, or null)
 let nav = null;          // the reducer's state
 let seen = null;         // the app-state fingerprint the last screen was derived from
 let selfDriven = false;  // the next state change is one this module caused — do not read it as navigation
@@ -86,6 +92,17 @@ function readDest() {
   if (FIXTURE) return null;
   try { return localStorage.getItem(DEST_STORE_KEY); } catch { return null; }
 }
+/** The tab a phone opens on: the frame's place when it is a tab, else the stored tab, else the old key migrated. */
+function firstDest() {
+  const f = ctx && ctx.frame;
+  if (f && NAV.ROOTS[f.dest]) return f.dest;
+  const d = readDest();
+  if (d && NAV.ROOTS[d]) return d;
+  if (FIXTURE) return NAV.migrateView(null);
+  let old = null;
+  try { old = localStorage.getItem(OLD_DEST_KEY); } catch { old = null; }
+  return NAV.migrateView(old);
+}
 function writeDest(d) {
   if (FIXTURE) return;
   try { localStorage.setItem(DEST_STORE_KEY, d); } catch { /* quota / private mode */ }
@@ -199,6 +216,7 @@ function onCaptureKeyDown(e) {
 
 function fingerprint() {
   const d = state.detail || {};
+  const f = ctx && ctx.frame;
   return {
     mode: state.mode,
     sel: state.sel,
@@ -209,6 +227,9 @@ function fingerprint() {
      * screen even though the value does not move. The counter is state.js's write log; watching
      * the value alone is what left the terminal screen unreachable once you had navigated off it. */
     activeAsk: writeCount('active'),
+    // the frame: the place on screen and whether the detail is open (state.col2 is the frame's detail column)
+    fdest: f ? f.dest : null,
+    col2: !!state.col2,
   };
 }
 
@@ -219,6 +240,32 @@ function go(screen) {
   nav = NAV.push(base, screen);
 }
 
+const frameOn = () => !!(ctx && ctx.frame);
+const tabScreen = (tab, id) => ({ kind: (tab && (tab.kind === 'doc' || tab.kind === 'breakdown' || tab.kind === 'dest')) ? 'doc' : 'terminal', id, title: (tab && (tab.title || tab.name)) || String(id) });
+
+/* The frame on a phone: the PM's own moves through the panels, the palette or Settings, read back as screens. A place
+ * opened from elsewhere (⌘K, Settings › Show its initiatives) is a tab switch; Settings is pushed on top; an open
+ * detail is pushed and a closed one popped; a session or document opened is pushed. */
+function syncFromFrame(cur) {
+  const f = ctx.frame;
+  if (cur.active && (cur.active !== seen.active || cur.activeAsk !== seen.activeAsk)) {
+    go(tabScreen((state.tabs || []).find((t) => t && t.id === cur.active), cur.active));
+  } else if (cur.col2 && !seen.col2) {
+    const dk = (state.detail && state.detail.kind) || 'detail';
+    go({ kind: 'detail', dk, id: (state.detail && state.detail.id) || cur.sel });
+  } else if (!cur.col2 && seen.col2 && NAV.current(nav).kind === 'detail') {
+    nav = NAV.pop(nav);
+  } else if (cur.fdest !== seen.fdest) {
+    if (cur.fdest === 'settings') { if (NAV.current(nav).id !== 'settings') go({ kind: 'dest', id: 'settings' }); }
+    else if (NAV.ROOTS[cur.fdest]) { nav = NAV.switchDest(nav, cur.fdest); writeDest(nav.dest); }
+  }
+  if (f && NAV.current(nav).kind === 'dest' && NAV.current(nav).id !== f.dest) {
+    // the screen names a place the frame is not showing (a pop, say): put the frame on it
+    selfDriven = true;
+    f.go(NAV.current(nav).id);
+  }
+}
+
 /**
  * Read the app's state for a navigation the PM made through a panel, and push the screen it means.
  * Exactly one transition is taken per render, most specific first: opening a session is a terminal
@@ -227,10 +274,10 @@ function go(screen) {
 function syncFromState() {
   const cur = fingerprint();
   if (!seen || selfDriven) { selfDriven = false; seen = cur; return; }
+  if (frameOn()) { syncFromFrame(cur); seen = cur; return; }
 
   if (cur.active && (cur.active !== seen.active || cur.activeAsk !== seen.activeAsk)) {
-    const tab = (state.tabs || []).find((t) => t && t.id === cur.active);
-    go({ kind: (tab && tab.kind === 'doc') ? 'doc' : 'terminal', id: cur.active, title: (tab && (tab.title || tab.name)) || String(cur.active) });
+    go(tabScreen((state.tabs || []).find((t) => t && t.id === cur.active), cur.active));
   } else if (cur.detail !== seen.detail || (cur.sel && cur.sel !== seen.sel)) {
     const dk = (state.detail && state.detail.kind) || '';
     if (dk && dk !== 'none') go({ kind: 'detail', dk, id: (state.detail && state.detail.id) || cur.sel });
@@ -249,6 +296,12 @@ function syncFromState() {
 
 /* ── applying it ────────────────────────────────────────────────────────────────────────────── */
 
+/** The panel a screen shows. The frame's grid is the reducer's; the old shell draws a tab's root in its list panel. */
+function panelFor(kind) {
+  if (!frameOn() && kind === 'dest') return 1;
+  return panelOf(kind);
+}
+
 /**
  * Bring the chrome and the visible panel in line with the current screen. Called at the end of
  * every shell render, and on every breakpoint change.
@@ -268,15 +321,17 @@ export function applyMobile() {
     return;
   }
 
-  if (!nav) nav = NAV.init(NAV.migrateView(readDest()));
+  if (!nav) nav = NAV.init(firstDest());
   syncFromState();
 
   const s = NAV.current(nav);
+  const f = ctx.frame;
 
   // The host is chosen FIRST, so a renderer that measures itself (the terminal's fit) sees the box
   // it is actually going to occupy rather than the one it is leaving.
-  ctx.bodyGrid.dataset.mpanel = String(panelOf(s.kind));
-  if (menu) menu.dataset.view = s.kind;
+  ctx.bodyGrid.dataset.mpanel = String(panelFor(s.kind));
+  const act = (state.tabs || []).find((t) => t && t.id === state.active);
+  if (menu) menu.dataset.view = s.kind === 'agent' ? (act && act.kind === 'term' ? 'terminal' : 'agent') : s.kind;
 
   const title = $('mobTitle');
   if (title) title.textContent = NAV.titleOf(s) || '';
@@ -285,15 +340,50 @@ export function applyMobile() {
   const back = $('mobBack');
   if (back) back.hidden = !deep;          // absent at a destination root, never present-and-inert
   const brand = $('mobBrand');
-  if (brand) brand.hidden = deep;         // the lockup yields to the back control, as the design has it
+  if (brand) brand.hidden = deep || !!f;  // the lockup yields to the back control, and to Repository in the frame
 
   const theme = $('mobTheme');
-  if (theme) theme.textContent = state.theme === 'dark' ? '◐' : '◑';
+  if (theme) {
+    const want = state.theme === 'dark' ? 'moon' : 'sun';
+    if (theme.getAttribute('data-icon') !== want) { theme.setAttribute('data-icon', want); theme.replaceChildren(icon(want)); }
+    theme.hidden = !!f;
+  }
+  // the frame's own controls: Repository and Settings (the theme is in Settings)
+  const repo = $('mobRepo');
+  if (repo) {
+    repo.hidden = !f || deep;
+    if (f) {
+      const label = f.scope === 'all' ? FC.repo.all : (state.product || FC.repo.none);
+      if (repo.textContent !== label) repo.textContent = label;
+      repo.setAttribute('aria-label', FC.repo.open(label));
+    }
+  }
+  // Sync, as the desktop bar has it: only while the current repository is not in sync (never in All repositories)
+  const sync = $('mobSync');
+  if (sync) {
+    const want = !!f && !deep && f.scope !== 'all' && (f.unsynced || f.syncing);
+    sync.hidden = !want;
+    if (want) {
+      const label = f.syncing ? FC.sync.busy : FC.sync.label;
+      if (sync.textContent !== label) sync.textContent = label;
+      sync.disabled = !!f.syncing;
+      sync.title = FC.sync.title;
+    }
+  }
+  const set = $('mobSettings');
+  if (set) { set.hidden = !f; set.setAttribute('aria-current', f && f.dest === 'settings' ? 'page' : 'false'); }
+  const count = $('mobTodayCount');
+  if (count) {
+    const n = f ? Math.max(0, Number(f.needs) || 0) : 0;
+    count.hidden = n === 0;
+    count.textContent = String(n);
+    count.setAttribute('aria-label', FC.needs(n));
+  }
 
   const buttons = menu ? menu.querySelectorAll('#mobNav [data-dest]') : [];
   for (const b of buttons) b.setAttribute('aria-current', b.dataset.dest === nav.dest ? 'page' : 'false');
 
-  if (s.kind !== 'terminal' && ctrlArmed) setCtrlArmed(false);
+  if (s.kind !== 'terminal' && s.kind !== 'agent' && ctrlArmed) setCtrlArmed(false);
 }
 
 /* ── the chrome's own controls ──────────────────────────────────────────────────────────────── */
@@ -302,16 +392,30 @@ export function applyMobile() {
 function setDest(dest) {
   nav = NAV.switchDest(nav, dest);
   writeDest(nav.dest);
-  const mode = DEST_MODE[dest];
   selfDriven = true;
-  setState(mode ? { mode, settingsOpen: false } : { settingsOpen: false });
+  const f = ctx && ctx.frame;
+  if (f) {
+    // a tab shows its place (Agent shows the dock over the current one); a detail left open does not follow
+    if (dest !== 'agent') f.go(dest);
+    setState({ col2: false });
+    return;
+  }
+  const mode = DEST_MODE[dest];
+  if (mode) setState({ mode });
 }
 
 /** Back: pop exactly one screen and put the app back in the state that screen describes. */
 function goBack() {
+  const was = NAV.current(nav);
   nav = NAV.pop(nav);
   const s = NAV.current(nav);
   selfDriven = true;
+  const f = ctx && ctx.frame;
+  if (f) {
+    if (s.kind === 'dest' && s.id !== f.dest) f.go(s.id);
+    setState(was.kind === 'detail' ? { col2: false } : {});
+    return;
+  }
   setState(s.kind === 'list' && s.mode ? { mode: s.mode } : {});
 }
 
@@ -325,10 +429,11 @@ function focusSearch() {
 /**
  * The jump palette. It is a jump control for EVERY destination, so it lives in the always-visible
  * top bar; the control bar below scrolls, and a control that scrolls out of view at 390px is the
- * hover-only trap in another costume. Search lives in panel 2, so the palette makes sure a list
- * screen is the one on screen before it hands focus over.
+ * hover-only trap in another costume. In the frame it opens ⌘K; in the old shell search lives in
+ * panel 2, so the palette makes sure a list screen is the one on screen before it hands focus over.
  */
 function openPalette() {
+  if (ctx && ctx.frame) { ctx.frame.openPalette(); return; }
   if (NAV.current(nav).kind !== 'list') go({ kind: 'list', mode: state.mode });
   selfDriven = true;
   setState({ col1: true }, focusSearch);
@@ -340,6 +445,25 @@ function toggleTheme() {
   setState((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' }));
 }
 
+/** The frame's Settings, pushed over the current tab so Back returns to it. */
+function openSettings() {
+  const f = ctx && ctx.frame;
+  if (!f) return;
+  if (NAV.current(nav).id !== 'settings') go({ kind: 'dest', id: 'settings' });
+  selfDriven = true;
+  f.go('settings');
+}
+
+/* The frame's bar controls (Repository, Sync, Settings) are reached through one listener on the document: the bar is
+ * static markup. */
+function onChromeClick(e) {
+  const t = e.target && e.target.closest ? e.target.closest('#mobRepo, #mobSync, #mobSettings') : null;
+  if (!t || !ctx || !ctx.frame) return;
+  if (t.id === 'mobSettings') openSettings();
+  else if (t.id === 'mobSync') ctx.frame.sync();
+  else ctx.frame.repoMenu(t);
+}
+
 /* The terminal has to re-measure when the soft keyboard shows or hides and after a rotation, or
  * xterm keeps the row count it had and the bottom of the session is clipped. The fit itself belongs
  * to the terminal panel; this only tells it that the box changed. */
@@ -353,12 +477,15 @@ function refit() {
 
 /**
  * Wire the phone chrome up, once, at boot.
- * `context` is `{ bodyGrid, render }` — the body grid whose children are the four panel hosts, and
+ * `context` is `{ bodyGrid, render, frame }` — the body grid whose children are the hosts, the frame's surface
+ * (window.pmApp.frame; null in the old shell), and
  * the shell's render function, so a breakpoint change can repaint the panels the phone needs.
  */
 export function mountMobile(context) {
   ctx = context || null;
   if (!ctx || !ctx.bodyGrid || !NAV) return;
+  ensureComponentsCss();   // the phone chrome's icons are the lucide sprite's, in every shell
+  ensureSprite();
 
   for (const b of document.querySelectorAll('#ctrlBar [data-seq]')) {
     b.addEventListener('click', () => sendSeq(b.dataset.seq));
@@ -376,6 +503,7 @@ export function mountMobile(context) {
   if (pal) pal.addEventListener('click', openPalette);
   const theme = $('mobTheme');
   if (theme) theme.addEventListener('click', toggleTheme);
+  document.addEventListener('click', onChromeClick);
 
   if (window.visualViewport) {
     window.visualViewport.addEventListener('resize', refit);
@@ -387,7 +515,7 @@ export function mountMobile(context) {
   // phone shell exists at all AND repaint the panels — a shell left mounted above 760px is a second
   // navigation system on the desktop, and panels left unpainted below it are three empty screens.
   const onMQ = () => {
-    if (isMobile()) nav = nav || NAV.init(NAV.migrateView(readDest()));
+    if (isMobile()) nav = nav || NAV.init(firstDest());
     if (ctx && typeof ctx.render === 'function') ctx.render();
     else applyMobile();
     refit();