create-pmos 0.15.0 → 0.16.0

package/workspace/public/pm/app.js

@@ -0,0 +1,242 @@
+/* pm/app.js — the shell of the four-panel workspace, and its render loop.
+ *
+ * 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
+ * panel's module.
+ *
+ * ── The host contract, for the panel modules ────────────────────────────────────────────────
+ * app.js creates ONE persistent host element per panel and hands the SAME element to that panel's
+ * renderer on every render:
+ *
+ *     renderRepos(host)  renderInitiatives(host)  renderDetail(host)  renderTabs(host)
+ *
+ * The host IS the prototype's open-panel container — app.js has already set its verbatim `style`
+ * and it is the direct grid child. A renderer therefore clears the host and appends the panel's
+ * CONTENTS; it must not wrap them in another div, because an extra layer between the grid and the
+ * panel body changes the geometry the comparator measures. The host is persistent on purpose:
+ * panel 4 holds a live xterm, and re-parenting a terminal on every unrelated state change is the
+ * quiet PTY regression the PRD warns about.
+ *
+ * A panel module that does not exist yet is not an error — its host renders empty and the rest of
+ * the shell still comes up.
+ */
+
+import { el, clear, setChildren } from './dom.js';
+import { state, setState, subscribe, flush, FIXTURE } from './state.js';
+/* The phone surface (≤760px). It owns its own chrome and decides which single panel is visible;
+ * 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';
+
+/* ── 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',
+};
+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',
+};
+
+const modeTitle = () => MODE_TITLE[state.mode] || 'initiatives';
+const detailTitle = () => DETAIL_TITLE[(state.detail && state.detail.kind) || ''] || 'detail';
+
+const gridCols = () =>
+  (state.col0 ? '210px' : '36px') + ' ' +
+  (state.col1 ? '280px' : '36px') + ' ' +
+  (state.col2 ? 'minmax(420px,560px)' : '36px') + ' minmax(0,1fr)';
+
+/* ── running-session count for the status bar ───────────────────────────────────────────────
+ * The count is over every session of every initiative in every repository, seeded plus started
+ * (`extraSess`), whose state is `working` or `needs`, skipping records that failed to read. That
+ * rule lives with the data — an agent's `sessions` list and an initiative's `sessions` list have
+ * the same shape, so anything that counts by shape rather than by record counts the wrong things.
+ * Order of preference:
+ *   1. `state.runningCount`, if the data layer has published one;
+ *   2. `data.js`'s `runningCount(state)`;
+ *   3. `fixture.js`'s `countRunning(state)` — fixture mode's own derivation;
+ *   4. otherwise only the sessions started in this window.
+ */
+function runningCount() {
+  if (typeof state.runningCount === 'number') return state.runningCount;
+  if (mods.data && typeof mods.data.runningCount === 'function') {
+    // Only a NUMBER counts as an answer. A source that declines returns null, and the chain
+    // continues — taking `null` as an answer is how the data layer's fixture-mode decline used to
+    // render as "null sessions running", and taking a 0 it did not mean is how it rendered "0".
+    try {
+      const n = mods.data.runningCount(state);
+      if (typeof n === 'number') return n;
+    } catch { /* fall through */ }
+  }
+  if (FIXTURE && mods.fixture && typeof mods.fixture.countRunning === 'function') {
+    try { return mods.fixture.countRunning(state); } catch { /* fall through */ }
+  }
+  let n = 0;
+  for (const k in state.extraSess) {
+    const list = state.extraSess[k];
+    if (Array.isArray(list)) for (const s of list) if (s && (s.st === 'working' || s.st === 'needs')) n++;
+  }
+  return n;
+}
+
+/* ── the shell, built once ─────────────────────────────────────────────────────────────────── */
+
+const root = el('div', {
+  'data-pm-theme': state.theme,
+  style: 'display:grid;grid-template-rows:44px 1fr 26px;height:100vh;background:var(--background);color:var(--foreground);font-family:var(--sans);font-size:13px;line-height:1.5',
+});
+
+const themeBtn = el('button', {
+  onClick: () => setState((s) => ({ theme: s.theme === 'dark' ? 'light' : 'dark' })),
+  style: 'margin-left:auto;font-size:12px;color:oklch(0.85 0.01 214);padding:5px 12px;background:oklch(1 0 0 / 6%);border:1px solid oklch(1 0 0 / 12%);min-height:30px',
+  hover: 'border-color:oklch(0.56 0.021 213.5)',
+}, 'theme · dark');
+
+const topBar = el('div', {
+  style: 'display:flex;align-items:center;gap:12px;padding:0 12px;background:oklch(0.1 0.004 228.8);color:oklch(0.987 0.002 197.1);border-bottom:1px solid oklch(1 0 0 / 10%)',
+},
+  el('span', { style: 'display:grid;place-items:center;width:24px;height:24px;background:oklch(0.488 0.243 264.376);font-size:14px;line-height:1' }, '◎'),
+  el('span', { style: 'font-weight:600;letter-spacing:.02em' }, 'PMOS'),
+  el('span', { style: 'color:oklch(0.723 0.014 214.4);font-size:12px' }, 'PM Operating System · workspace'),
+  el('span', { style: 'display:flex;gap:6px;align-items:baseline;font-family:var(--mono);font-size:11px;color:oklch(0.76 0.17 152)' },
+    el('span', { style: 'font-size:9px' }, '●'), 'LIVE · local'),
+  themeBtn,
+);
+
+const statusLeft = el('span', null, 'local · persistent server · 0 sessions running');
+const statusBar = el('div', {
+  style: 'display:flex;align-items:center;padding:0 12px;background:oklch(0.1 0.004 228.8);color:oklch(0.6 0.02 213);font-size:11px;border-top:1px solid oklch(1 0 0 / 10%)',
+},
+  statusLeft,
+  el('span', { style: 'margin-left:auto' }, 'sessions survive detach · ⌘K search · Esc closes tab'),
+);
+
+const bodyGrid = el('div', { style: 'display:grid;grid-template-columns:' + gridCols() + ';min-height:0' });
+
+/** The collapsed 36px strip: a full-height button with a rotated vertical-rl label. */
+function makeRail(flag) {
+  const label = el('span', { style: 'writing-mode:vertical-rl;font-size:11px;letter-spacing:.1em;color:var(--muted-foreground);font-family:var(--mono)' });
+  const btn = el('button', {
+    onClick: () => setState((s) => ({ [flag]: !s[flag] })),
+    style: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;justify-content:center;padding-top:14px',
+    hover: 'background:var(--accent)',
+  }, label);
+  return { btn, label };
+}
+
+const rail0 = makeRail('col0');
+const rail1 = makeRail('col1');
+const rail2 = makeRail('col2');
+rail0.label.textContent = 'repositories ⟩';
+
+const hostRepos = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0' });
+const hostInits = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0' });
+const hostDetail = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;display:flex;flex-direction:column' });
+const hostTabs = el('div', { style: 'background:var(--term-bg);display:flex;flex-direction:column;min-width:0' });
+
+setChildren(root, [topBar, bodyGrid, statusBar]);
+
+/* ── panel modules, loaded at boot and tolerated when absent ────────────────────────────────── */
+
+const mods = { repos: null, inits: null, detail: null, tabs: null, data: null, fixture: null };
+
+async function loadModules() {
+  const want = [
+    ['repos', './panel-repos.js'], ['inits', './panel-initiatives.js'],
+    ['detail', './panel-detail.js'], ['tabs', './panel-tabs.js'],
+    ['data', './data.js'], ['fixture', './fixture.js'],
+  ];
+  await Promise.all(want.map(async ([key, path]) => {
+    try { mods[key] = await import(path); } catch { mods[key] = null; }
+  }));
+}
+
+/** Call a panel renderer, if it exists, without letting one panel take down the shell. */
+function paint(mod, name, host) {
+  const fn = mod && mod[name];
+  if (typeof fn !== 'function') { clear(host); return; }
+  try { fn(host); } catch (e) { console.error('[pm] ' + name + ' failed:', e); }
+}
+
+/* ── render ────────────────────────────────────────────────────────────────────────────────── */
+
+function render() {
+  root.setAttribute('data-pm-theme', state.theme);
+  themeBtn.textContent = state.theme === 'dark' ? 'theme · dark' : 'theme · light';
+  statusLeft.textContent = 'local · persistent server · ' + runningCount() + ' sessions running';
+
+  // Panel 1's rail is a constant; panels 2 and 3 name whatever is behind them, so a PM who folded
+  // a panel away can still see what they folded.
+  rail1.label.textContent = modeTitle() + ' ⟩';
+  rail2.label.textContent = detailTitle() + ' ⟩';
+
+  bodyGrid.setAttribute('style', 'display:grid;grid-template-columns:' + gridCols() + ';min-height:0');
+
+  // 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 DISPLAYED (pm/mobile.css picks it from `data-mpanel`), and the
+  // PM's desktop arrangement — col0/col1/col2 — is left exactly as they set it. Mounting all four
+  // is also what keeps a live terminal alive: a host dropped from this list would be removed from
+  // the document, and panel 4's xterm does not survive that.
+  const phone = isMobile();
+  setChildren(bodyGrid, phone ? [hostRepos, hostInits, hostDetail, hostTabs] : [
+    state.col0 ? hostRepos : rail0.btn,
+    state.col1 ? hostInits : rail1.btn,
+    state.col2 ? hostDetail : rail2.btn,
+    hostTabs,
+  ]);
+
+  if (phone || state.col0) paint(mods.repos, 'renderRepos', hostRepos);
+  if (phone || state.col1) paint(mods.inits, 'renderInitiatives', hostInits);
+  if (phone || state.col2) paint(mods.detail, 'renderDetail', hostDetail);
+  paint(mods.tabs, 'renderTabs', hostTabs);
+
+  applyMobile();
+}
+
+/* ── keyboard ──────────────────────────────────────────────────────────────────────────────── */
+
+function focusSearch() {
+  const input = document.querySelector('[data-pm-search]')
+    || document.querySelector('input[placeholder="search everything…"]');
+  if (input) input.focus();
+}
+
+function onKeyDown(e) {
+  if ((e.metaKey || e.ctrlKey) && (e.key === 'k' || e.key === 'K')) {
+    e.preventDefault();
+    setState({ col1: true }, focusSearch);
+    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.
+    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,
+      };
+    });
+  }
+}
+
+/* ── boot ──────────────────────────────────────────────────────────────────────────────────── */
+
+async function boot() {
+  document.body.appendChild(root);
+  subscribe(render);
+  window.addEventListener('keydown', onKeyDown);
+  mountMobile({ bodyGrid, render });   // wires the phone chrome; inert above 760px
+  render();                       // the shell is on screen before any panel module has resolved
+  await loadModules();
+  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 } };
+
+boot();