create-pmos 0.18.0 → 0.19.0

package/workspace/public/pm/app.js

@@ -83,9 +83,35 @@ function runningCount() {
 
 /* ── the shell, built once ─────────────────────────────────────────────────────────────────── */
 
+/* ── Why every track and every column here is `minmax(0, …)` / `min-height:0` ─────────────────
+ *
+ * The shell is 100vh and nothing in it is supposed to scroll the PAGE — a panel scrolls, the app
+ * never does. That held right up until a long document was opened in panel 4, and then the whole
+ * user interface scrolled: the top bar slid away, the status bar came up from below, and the doc
+ * pane's own `overflow-y:auto` never engaged.
+ *
+ * The cause is one CSS default, in two guises, and it is worth naming precisely because it is
+ * invisible in a style string that looks correct:
+ *
+ *   • `grid-template-rows: 44px 1fr 26px` — `1fr` is shorthand for `minmax(auto, 1fr)`, and that
+ *     `auto` MINIMUM is the item's min-content height. A tall document therefore does not overflow
+ *     the middle row; it ENLARGES it, past the 100vh the row was supposed to be trapped inside.
+ *   • a grid item / flex item with `min-height: auto` cannot shrink below its content either, so
+ *     even a correctly-sized track hands the overflow straight through to the next box down.
+ *
+ * Overflow that is `visible` still contributes to the SCROLLABLE overflow region of every ancestor
+ * that does not clip it, all the way up to the viewport — which is exactly the reported symptom:
+ * the page scrolls, not the pane. So the fix is the whole chain, not one box. Each ancestor between
+ * the viewport and a scrolling pane declares a zero minimum, and the root clips as the backstop so
+ * a future panel that forgets cannot reach the page again.
+ *
+ * The design prototype had this right (`grid-template-rows:44px minmax(0,1fr) 28px`, see
+ * prototype/workspace-layout-variants/*.html); the port dropped the `minmax(0, …)` and read
+ * identically until something tall was rendered into it.
+ */
 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',
+  style: 'display:grid;grid-template-rows:44px minmax(0,1fr) 26px;height:100vh;overflow:hidden;background:var(--background);color:var(--foreground);font-family:var(--sans);font-size:13px;line-height:1.5',
 });
 
 const themeBtn = el('button', {
@@ -113,7 +139,14 @@ const statusBar = el('div', {
   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 body grid's own geometry, in one place so the initial build and every repaint below cannot
+ * disagree. The implicit ROW is stated explicitly as `minmax(0,1fr)` for the same reason the root's
+ * middle track is: an auto row is floored at its items' min-content height, and one tall panel
+ * would push the grid taller than the box it was given. */
+const BODY_GRID_STYLE = () =>
+  'display:grid;grid-template-columns:' + gridCols() + ';grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden';
+
+const bodyGrid = el('div', { style: BODY_GRID_STYLE() });
 
 /** The collapsed 36px strip: a full-height button with a rotated vertical-rl label. */
 function makeRail(flag) {
@@ -131,10 +164,14 @@ 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' });
+/* `min-height:0` on all four: a grid item's automatic minimum is its content, so a panel taller
+ * than the viewport would otherwise stretch the row it sits in rather than scroll inside it. The
+ * two that already carry `overflow-y:auto` get it for free under the spec — stated anyway, because
+ * "this one is safe because of a rule elsewhere in the same line" is how the next edit breaks it. */
+const hostRepos = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto' });
+const hostInits = el('div', { style: 'background:var(--sidebar);border-right:1px solid var(--border);overflow-y:auto;min-width:0;min-height:0' });
+const hostDetail = el('div', { 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', { style: 'background:var(--term-bg);display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden' });
 
 setChildren(root, [topBar, bodyGrid, statusBar]);
 
@@ -172,7 +209,7 @@ function render() {
   rail1.label.textContent = modeTitle() + ' ⟩';
   rail2.label.textContent = detailTitle() + ' ⟩';
 
-  bodyGrid.setAttribute('style', 'display:grid;grid-template-columns:' + gridCols() + ';min-height:0');
+  bodyGrid.setAttribute('style', BODY_GRID_STYLE());
 
   // 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

package/workspace/public/pm/data.js

@@ -277,9 +277,13 @@ function evalFor(ladderSteps) {
 
 /** A live session, in the shape panel 2 and panel 4 read. `shown` is the server's own derived state. */
 function sessionRow(s) {
-  const label = s.shown === 'quiet' && Number.isFinite(s.quietMs)
+  // `s.label` is the SERVER's rendering of the presented state — one join (lib/session-state's
+  // `label`), one clock, one sentence. This used to be re-derived here from `shown` + `quietMs`,
+  // which is how the sidebar and the pane could describe one session with two different words. The
+  // local derivation survives only as a fallback for a server that predates the field.
+  const label = s.label || (s.shown === 'quiet' && Number.isFinite(s.quietMs)
     ? 'quiet ' + Math.max(1, Math.round(s.quietMs / 60000)) + 'm'
-    : (s.shown === 'needs' ? 'needs you' : s.shown);
+    : (s.shown === 'needs' ? 'needs you' : s.shown));
   return { name: s.name, st: s.shown, label, profile: s.profile_id || null, id: s.id };
 }
 
@@ -441,10 +445,34 @@ function groupsFromSpine(spine) {
 const products = new Map();   // product name → {name, ws, root, count, board, records}
 let productOrder = [];
 
+/* workspace id → the working-tree top it sits in (null for a folder with no git).
+ *
+ * This exists so panel 4 can answer "who else is already in the tree I am about to start a session
+ * in?" BEFORE it starts one. The session rows carry `tree` too, but only for trees that already
+ * have a session — which is one session too late for a chooser that runs on the FIRST click. The
+ * server derives this (`git rev-parse --show-toplevel`, via `repoIdentity`) and publishes it on
+ * /api/workspaces; it is read here and never re-derived. */
+const wsTree = new Map();
+
+/** The working tree a workspace id sits in, or null — for a folder with no git, or an unknown id. */
+export function treeOfWorkspace(id) {
+  return (id && wsTree.get(id)) || null;
+}
+
+/** The branch that tree is on, or null. Shown beside the tree so a chooser names what is shared. */
+const wsBranch = new Map();
+export function branchOfWorkspace(id) {
+  return (id && wsBranch.get(id)) || null;
+}
+
 /** Group registered working trees into products: several worktrees of one repo share a `repo_key`. */
 function foldWorkspaces(rows) {
   const byRepo = new Map();
   for (const w of rows || []) {
+    // Recorded per REGISTERED id, before the fold — folding is by repository, and the whole point
+    // of the tree key is that two registered ids can share one tree while a repo's two worktrees do
+    // not. Reading it off the folded row would lose exactly that distinction.
+    if (w && w.id) { wsTree.set(w.id, w.tree || null); wsBranch.set(w.id, w.branch || null); }
     const key = w.repo_key || w.root;
     if (!byRepo.has(key)) {
       byRepo.set(key, {
@@ -552,14 +580,22 @@ async function loadBoard(prod) {
 /** Publish every loaded product's board and records into state, in one patch. */
 function publishBoards() {
   const board = {};
+  /* Product NAME → workspace id, for every registered repository — not only the selected one.
+   * panel 4 keeps every open terminal live, including those belonging to a repository the PM is not
+   * currently looking at, and a parked tab's session must be resolved inside ITS OWN repository.
+   * Scoping it by the selected workspace is how a tab in one repo attached to a shell in another
+   * (tab-term.js `wsForTab`). */
+  const productWs = {};
   let records = {};
   for (const name of productOrder) {
     const p = products.get(name);
-    if (!p || !p.board) continue;
+    if (!p) continue;
+    if (p.ws) productWs[name] = p.ws;
+    if (!p.board) continue;
     board[name] = p.board;
     records = { ...records, ...p.records };
   }
-  setState({ board, records: { ...records, ...(hydrated) } });
+  setState({ board, productWs, records: { ...records, ...(hydrated) } });
 }
 
 /* Hydrated (fully derived) records live apart from the light ones so that a board reload cannot
@@ -617,12 +653,48 @@ function currentProductName() {
  */
 
 let pollTimer = null;
+let sessionDigest = null;
+
+/**
+ * WHAT THE SURFACE ACTUALLY RENDERS from a session row, as one string.
+ *
+ * Every `setState` repaints all four panels, and panel 2 rebuilds a board that is 138 initiatives
+ * deep on this repository. Publishing the poll unconditionally therefore tore down and rebuilt the
+ * whole window every four seconds, forever, whether or not anything had changed — which is a
+ * hundreds-of-milliseconds stall on the main thread, on a cadence, next to a terminal the PM is
+ * typing into. That is the jitter: input queued behind a repaint nobody asked for.
+ *
+ * The rows themselves change constantly (`lastOutputAt` moves with every byte an agent writes), so
+ * comparing the payload is useless. What is compared is the PROJECTION the panels read — id, name,
+ * workspace, derived state, the quiet reading ROUNDED THE WAY THE LABEL ROUNDS IT (minutes), and
+ * the fields the sidebar prints. A working agent produces an identical projection minute after
+ * minute, so the window stays still while it works, and repaints the moment something it shows
+ * actually moves.
+ */
+function sessionProjection(rows) {
+  return (rows || []).map((s) => [
+    s.id, s.ws, s.name, s.agent, s.state, s.shown, s.note || '', s.cwd || '',
+    s.profile_id || '', s.profile_line || '',
+    // the label's own resolution, not the millisecond behind it
+    s.shown === 'quiet' && Number.isFinite(s.quietMs) ? Math.max(1, Math.round(s.quietMs / 60000)) : '',
+    // Joined on U+0000, fields and rows both. A separator that cannot occur in any of these
+    // values is what stops two different lists folding into one identical string and
+    // suppressing a repaint that was real.
+  ].join('\u0000')).join('\u0000\u0000');
+}
 
 async function pollSessions() {
   if (FIXTURE) return;
   const out = await getJson('/api/sessions');
   if (out && Array.isArray(out.sessions)) {
-    setState({ sessions: out.sessions, runningCount: liveCount(out.sessions) });
+    const digest = sessionProjection(out.sessions);
+    const count = liveCount(out.sessions);
+    // A poll that found nothing new is not a render. `runningCount` is compared too: it folds in
+    // `extraSess`, so a session started in this window still publishes on the very next poll.
+    if (digest !== sessionDigest || count !== state.runningCount) {
+      sessionDigest = digest;
+      setState({ sessions: out.sessions, runningCount: count });
+    }
   }
   schedulePoll();
 }
@@ -817,6 +889,46 @@ export function startSession(slug, sess) {
   setTimeout(pollSessions, 800);
 }
 
+/* ── the scratchpad ─────────────────────────────────────────────────────────────────────────────
+ * The pad is PER SESSION, and the server has always stored it that way: `/api/scratchpad` is keyed
+ * by the server-issued session id (workspace-scoped, one file per session, deleted with it). What
+ * was lost in the four-panel port was the CLIENT half — the pad became one in-memory string for the
+ * whole page, so every tab in every repository showed, and overwrote, the same text.
+ *
+ * These two functions are the whole restoration. The key is `sess:<id>` or `ws:<id>`; the panel
+ * derives it, this file only speaks the two shapes the endpoint accepts.
+ */
+
+function padParams(key) {
+  const k = String(key || '');
+  if (k.startsWith('sess:')) return { session: k.slice(5) };
+  if (k.startsWith('ws:')) return { ws: k.slice(3) };
+  return null;
+}
+
+/** panel-tabs.js — the stored text for one pad, or '' when there is none (and on any failure). */
+export async function loadScratchpad(key) {
+  if (FIXTURE) return '';
+  const params = padParams(key);
+  if (!params) return '';
+  const out = await getJson('/api/scratchpad', params);
+  return out && out.ok !== false && typeof out.text === 'string' ? out.text : '';
+}
+
+/**
+ * panel-tabs.js — write one pad. A failure is reported to the console and NOT surfaced as a lost
+ * buffer: the text stays in `state.scratchPads`, so the PM keeps what they typed for this page even
+ * when the disk write refused.
+ */
+export async function saveScratchpad(key, text) {
+  if (FIXTURE) return { ok: true };
+  const params = padParams(key);
+  if (!params) return { ok: false, error: 'no session or workspace to file this pad under' };
+  const out = await postJson('/api/scratchpad', { ...params, text });
+  if (out && out.ok === false) console.warn('[pm] the scratchpad was NOT saved: ' + out.error);
+  return out;
+}
+
 /** tab-doc.js — `readDoc(path)`. The raw document body, or a rejected promise carrying the reason. */
 export async function readDoc(path) {
   if (FIXTURE) return '';

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

@@ -131,6 +131,13 @@ export function openTerm(slug, sess) {
   openTab({
     id: 'term:' + slug + ':' + sess.name, kind: 'term', title: sess.name, slug,
     repo: slugProduct()[slug], sess: sess.name, state: sess.st, profile: sess.profile || 'claude-work',
+    /* The SERVER's session id, when the row that was clicked carries one. This is the exact join:
+     * with it, the terminal attaches to precisely the PTY the PM pointed at, and a reload attaches
+     * to the same one again. Without it the tab falls back to matching by NAME, and names repeat
+     * across repositories — which is how a click in one repo opened another repo's shell.
+     * `spawn` is the opposite instruction, set only by `＋ session`: start one, never adopt one. */
+    sessionId: (sess && sess.id) || null,
+    spawn: !!(sess && sess.spawn),
   });
 }