create-pmos 0.53.0 → 0.53.1

package/workspace/lib/qr.js

@@ -0,0 +1,293 @@
+'use strict';
+/*
+ * qr — a QR code encoder small enough to read, for one job: the remote-mode startup banner prints
+ * the phone URL as a code the phone camera can scan (workspace-phone-app). Typing
+ * http://100.x.y.z:7433/?token=<43 characters> on a phone keyboard is the step that made the
+ * tailnet flow impractical.
+ *
+ * Why it is written here and not installed: the workspace ships offline (D62) and `create-pmos
+ * workspace` installs it with `npm install -g`, so every dependency is weight on every adopter.
+ * The encoder needs about 200 lines. test.js (QR-*) checks it against published vectors: the
+ * Reed-Solomon worked example for "HELLO WORLD" 1-M, a format string, the alignment positions and
+ * the data capacities. When it was written, every version 1 to 10 at both levels and with each of
+ * the eight masks (193 codes) was also decoded by an independent reader, zxing-cpp; that reader is
+ * not a dependency, so the suite does not repeat the check.
+ *
+ * Scope, on purpose: byte mode only, error-correction level M (or L), versions 1 to 10 (up to 213
+ * bytes at M). A URL with a token is about 80 bytes. Anything longer throws rather than producing
+ * a code that cannot scan. The structure follows ISO/IEC 18004 and Project Nayuki's reference
+ * implementation (MIT), cut down to that scope.
+ */
+
+// Per version 1..10 (index 0 unused): error-correction codewords per block, and number of blocks.
+const ECC = {
+  L: { bits: 1, perBlock: [0, 7, 10, 15, 20, 26, 18, 20, 24, 30, 18], blocks: [0, 1, 1, 1, 1, 1, 2, 2, 2, 2, 4] },
+  M: { bits: 0, perBlock: [0, 10, 16, 26, 18, 24, 16, 18, 22, 22, 26], blocks: [0, 1, 1, 1, 2, 2, 4, 4, 4, 5, 5] },
+};
+const MAX_VERSION = 10;
+
+// ── GF(256) arithmetic and Reed-Solomon, over the QR polynomial x^8+x^4+x^3+x^2+1 (0x11D) ────────
+function gfMul(x, y) {
+  let z = 0;
+  for (let i = 7; i >= 0; i--) {
+    z = (z << 1) ^ ((z >>> 7) * 0x11d);
+    z ^= ((y >>> i) & 1) * x;
+  }
+  return z & 0xff;
+}
+function rsDivisor(degree) {
+  const out = new Array(degree).fill(0);
+  out[degree - 1] = 1;
+  let root = 1;
+  for (let i = 0; i < degree; i++) {
+    for (let j = 0; j < out.length; j++) {
+      out[j] = gfMul(out[j], root);
+      if (j + 1 < out.length) out[j] ^= out[j + 1];
+    }
+    root = gfMul(root, 0x02);
+  }
+  return out;
+}
+function rsRemainder(data, divisor) {
+  const out = new Array(divisor.length).fill(0);
+  for (const b of data) {
+    const factor = b ^ out.shift();
+    out.push(0);
+    divisor.forEach((coef, i) => { out[i] ^= gfMul(coef, factor); });
+  }
+  return out;
+}
+
+// ── sizes ────────────────────────────────────────────────────────────────────────────────────
+function rawDataModules(ver) {
+  let n = (16 * ver + 128) * ver + 64;
+  if (ver >= 2) {
+    const align = Math.floor(ver / 7) + 2;
+    n -= (25 * align - 10) * align - 55;
+    if (ver >= 7) n -= 36;
+  }
+  return n;
+}
+function dataCodewords(ver, ecl) {
+  return Math.floor(rawDataModules(ver) / 8) - ECC[ecl].perBlock[ver] * ECC[ecl].blocks[ver];
+}
+function alignmentPositions(ver) {
+  if (ver === 1) return [];
+  const count = Math.floor(ver / 7) + 2;
+  const step = Math.ceil((ver * 4 + 4) / (count * 2 - 2)) * 2;
+  const out = [6];
+  for (let pos = ver * 4 + 17 - 7; out.length < count; pos -= step) out.splice(1, 0, pos);
+  return out;
+}
+
+// ── data codewords: byte-mode segment, terminator, padding ───────────────────────────────────
+function dataBits(bytes, ver, ecl) {
+  const bits = [];
+  const put = (val, len) => { for (let i = len - 1; i >= 0; i--) bits.push((val >>> i) & 1); };
+  put(0x4, 4);                              // byte mode
+  put(bytes.length, ver <= 9 ? 8 : 16);     // character count
+  for (const b of bytes) put(b, 8);
+  const capacity = dataCodewords(ver, ecl) * 8;
+  put(0, Math.min(4, capacity - bits.length));
+  put(0, (8 - (bits.length % 8)) % 8);
+  for (let pad = 0xec; bits.length < capacity; pad ^= 0xec ^ 0x11) put(pad, 8);
+  const out = [];
+  for (let i = 0; i < bits.length; i += 8) out.push(parseInt(bits.slice(i, i + 8).join(''), 2));
+  return out;
+}
+
+function withEccInterleaved(data, ver, ecl) {
+  const numBlocks = ECC[ecl].blocks[ver];
+  const eccLen = ECC[ecl].perBlock[ver];
+  const raw = Math.floor(rawDataModules(ver) / 8);
+  const numShort = numBlocks - (raw % numBlocks);
+  const shortLen = Math.floor(raw / numBlocks);
+  const div = rsDivisor(eccLen);
+  const blocks = [];
+  for (let i = 0, k = 0; i < numBlocks; i++) {
+    const dat = data.slice(k, k + shortLen - eccLen + (i < numShort ? 0 : 1));
+    k += dat.length;
+    const ecc = rsRemainder(dat, div);
+    if (i < numShort) dat.push(0);          // placeholder so every block has the same length
+    blocks.push(dat.concat(ecc));
+  }
+  const out = [];
+  for (let i = 0; i < blocks[0].length; i++) {
+    blocks.forEach((blk, j) => { if (i !== shortLen - eccLen || j >= numShort) out.push(blk[i]); });
+  }
+  return out;
+}
+
+// ── the module grid ──────────────────────────────────────────────────────────────────────────
+function formatBits(ecl, mask) {
+  const data = (ECC[ecl].bits << 3) | mask;
+  let rem = data;
+  for (let i = 0; i < 10; i++) rem = (rem << 1) ^ ((rem >>> 9) * 0x537);
+  return ((data << 10) | rem) ^ 0x5412;
+}
+function versionBits(ver) {
+  let rem = ver;
+  for (let i = 0; i < 12; i++) rem = (rem << 1) ^ ((rem >>> 11) * 0x1f25);
+  return (ver << 12) | rem;
+}
+const MASKS = [
+  (x, y) => (x + y) % 2 === 0,
+  (x, y) => y % 2 === 0,
+  (x) => x % 3 === 0,
+  (x, y) => (x + y) % 3 === 0,
+  (x, y) => (Math.floor(x / 3) + Math.floor(y / 2)) % 2 === 0,
+  (x, y) => ((x * y) % 2) + ((x * y) % 3) === 0,
+  (x, y) => (((x * y) % 2) + ((x * y) % 3)) % 2 === 0,
+  (x, y) => (((x + y) % 2) + ((x * y) % 3)) % 2 === 0,
+];
+
+function build(codewords, ver, ecl, mask) {
+  const size = ver * 4 + 17;
+  const mod = Array.from({ length: size }, () => new Array(size).fill(false));
+  const fn = Array.from({ length: size }, () => new Array(size).fill(false));
+  const set = (x, y, dark) => { mod[y][x] = dark; fn[y][x] = true; };
+  const bit = (v, i) => ((v >>> i) & 1) !== 0;
+
+  for (let i = 0; i < size; i++) { set(6, i, i % 2 === 0); set(i, 6, i % 2 === 0); }
+  for (const [cx, cy] of [[3, 3], [size - 4, 3], [3, size - 4]]) {
+    for (let dy = -4; dy <= 4; dy++) for (let dx = -4; dx <= 4; dx++) {
+      const d = Math.max(Math.abs(dx), Math.abs(dy));
+      const x = cx + dx; const y = cy + dy;
+      if (x >= 0 && x < size && y >= 0 && y < size) set(x, y, d !== 2 && d !== 4);
+    }
+  }
+  const al = alignmentPositions(ver);
+  for (let i = 0; i < al.length; i++) for (let j = 0; j < al.length; j++) {
+    if ((i === 0 && j === 0) || (i === 0 && j === al.length - 1) || (i === al.length - 1 && j === 0)) continue;
+    for (let dy = -2; dy <= 2; dy++) for (let dx = -2; dx <= 2; dx++) {
+      set(al[i] + dx, al[j] + dy, Math.max(Math.abs(dx), Math.abs(dy)) !== 1);
+    }
+  }
+  const drawFormat = (m) => {
+    const f = formatBits(ecl, m);
+    for (let i = 0; i <= 5; i++) set(8, i, bit(f, i));
+    set(8, 7, bit(f, 6)); set(8, 8, bit(f, 7)); set(7, 8, bit(f, 8));
+    for (let i = 9; i < 15; i++) set(14 - i, 8, bit(f, i));
+    for (let i = 0; i < 8; i++) set(size - 1 - i, 8, bit(f, i));
+    for (let i = 8; i < 15; i++) set(8, size - 15 + i, bit(f, i));
+    set(8, size - 8, true);                 // the always-dark module
+  };
+  drawFormat(0);                            // reserve the area; redrawn with the real mask below
+  if (ver >= 7) {
+    const v = versionBits(ver);
+    for (let i = 0; i < 18; i++) {
+      const a = size - 11 + (i % 3); const b = Math.floor(i / 3);
+      set(a, b, bit(v, i)); set(b, a, bit(v, i));
+    }
+  }
+
+  // Codewords in the two-column zigzag, right to left, skipping the vertical timing column.
+  let i = 0;
+  for (let right = size - 1; right >= 1; right -= 2) {
+    if (right === 6) right = 5;
+    for (let vert = 0; vert < size; vert++) for (let j = 0; j < 2; j++) {
+      const x = right - j;
+      const y = ((right + 1) & 2) === 0 ? size - 1 - vert : vert;
+      if (!fn[y][x] && i < codewords.length * 8) {
+        mod[y][x] = bit(codewords[i >>> 3], 7 - (i & 7));
+        i++;
+      }
+    }
+  }
+  for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+    if (!fn[y][x] && MASKS[mask](x, y)) mod[y][x] = !mod[y][x];
+  }
+  drawFormat(mask);
+  return mod;
+}
+
+// The standard's four penalty rules, so the mask chosen is the one a camera reads most easily.
+function penalty(mod) {
+  const size = mod.length;
+  let score = 0;
+  const lines = [];
+  for (let y = 0; y < size; y++) lines.push(mod[y]);
+  for (let x = 0; x < size; x++) lines.push(mod.map((row) => row[x]));
+  const finderLike = [true, false, true, true, true, false, true];
+  for (const line of lines) {
+    let run = 1;
+    for (let k = 1; k <= line.length; k++) {
+      if (k < line.length && line[k] === line[k - 1]) { run++; continue; }
+      if (run >= 5) score += 3 + (run - 5);
+      run = 1;
+    }
+    for (let k = 0; k + 7 <= line.length; k++) {
+      if (!finderLike.every((v, n) => line[k + n] === v)) continue;
+      const lightBefore = k >= 4 && [1, 2, 3, 4].every((n) => !line[k - n]);
+      const lightAfter = k + 11 <= line.length && [7, 8, 9, 10].every((n) => !line[k + n]);
+      if (lightBefore || lightAfter) score += 40;
+    }
+  }
+  let dark = 0;
+  for (let y = 0; y < size; y++) for (let x = 0; x < size; x++) {
+    if (mod[y][x]) dark++;
+    if (x + 1 < size && y + 1 < size) {
+      const c = mod[y][x];
+      if (mod[y][x + 1] === c && mod[y + 1][x] === c && mod[y + 1][x + 1] === c) score += 3;
+    }
+  }
+  score += 10 * Math.floor(Math.abs((dark * 100) / (size * size) - 50) / 5);
+  return score;
+}
+
+/**
+ * Encode a string as a QR code. Returns the module grid: rows of booleans, true = dark, with no
+ * quiet zone (the renderer adds it).
+ *   encode('http://100.64.0.1:7433/?token=abc')            → level M, smallest version that fits
+ *   encode(text, { ecl: 'L' })                              → more capacity, less damage tolerance
+ *   encode(text, { mask: 3 })                               → force a mask (tests only)
+ * Throws on text longer than version 10 holds at the chosen level.
+ */
+function encode(text, { ecl = 'M', mask = null, minVersion = 1 } = {}) {
+  if (!ECC[ecl]) throw new Error(`qr: unsupported error-correction level ${ecl} (use M or L)`);
+  const bytes = [...Buffer.from(String(text), 'utf8')];
+  let ver = minVersion;
+  for (; ver <= MAX_VERSION; ver++) {
+    const need = 4 + (ver <= 9 ? 8 : 16) + bytes.length * 8;
+    if (need <= dataCodewords(ver, ecl) * 8) break;
+  }
+  if (ver > MAX_VERSION) throw new Error(`qr: ${bytes.length} bytes do not fit in a version-${MAX_VERSION} code at level ${ecl}`);
+  const codewords = withEccInterleaved(dataBits(bytes, ver, ecl), ver, ecl);
+  if (mask != null) return build(codewords, ver, ecl, mask);
+  let best = null; let bestScore = Infinity;
+  for (let m = 0; m < 8; m++) {
+    const grid = build(codewords, ver, ecl, m);
+    const s = penalty(grid);
+    if (s < bestScore) { best = grid; bestScore = s; }
+  }
+  return best;
+}
+
+/**
+ * Draw a module grid as terminal lines, two module rows per text line (half blocks), with the
+ * 4-module quiet zone a scanner needs.
+ *   ansi: true   explicit black-on-white colours, correct on any terminal theme (the default for a TTY)
+ *   ansi: false  no escape codes; light modules are drawn as blocks, so it reads correctly on the
+ *                usual dark terminal and inverted on a light one (most phone cameras read both)
+ */
+function toTerminal(grid, { ansi = true } = {}) {
+  const q = 4;
+  const size = grid.length + q * 2;
+  const dark = (x, y) => {
+    const gx = x - q; const gy = y - q;
+    return gx >= 0 && gy >= 0 && gx < grid.length && gy < grid.length && grid[gy][gx];
+  };
+  const lines = [];
+  for (let y = 0; y < size; y += 2) {
+    let s = '';
+    for (let x = 0; x < size; x++) {
+      const top = dark(x, y); const bottom = y + 1 < size ? dark(x, y + 1) : false;
+      if (ansi) s += top && bottom ? '█' : top ? '▀' : bottom ? '▄' : ' ';
+      else s += !top && !bottom ? '█' : !top ? '▀' : !bottom ? '▄' : ' ';
+    }
+    lines.push(ansi ? `\x1b[30;47m${s}\x1b[0m` : s);
+  }
+  return lines;
+}
+
+module.exports = { encode, toTerminal, _internal: { rsDivisor, rsRemainder, formatBits, dataCodewords, alignmentPositions } };

package/workspace/lib/remote-access.js

@@ -21,6 +21,7 @@
 const crypto = require('crypto');
 const os = require('os');
 const { spawnSync } = require('child_process');
+const qr = require('./qr');
 
 const LOOPBACK = '127.0.0.1';
 
@@ -232,7 +233,16 @@ function authorize({ remoteAddress, presentedToken, expectedToken }) {
 // The startup banner lines. This is the ONE place a token may be printed, and ONLY a freshly
 // GENERATED token — a token supplied via PMOS_TOKEN is the PM's own secret and is never echoed.
 // Nothing here (or anywhere in this module) logs request headers (D08).
-function startupLines(bind, port) {
+//
+// workspace-phone-app: for a generated token the banner also prints the phone URL
+// (http://<tailnet>:<port>/?token=<t>) as a QR code, because typing 43 random characters on a phone
+// keyboard is the step that made the tailnet flow impractical. The QR is the same secret in another
+// form, so it follows the same rule: generated token only, startup only. `ansi` picks the
+// renderer (lib/qr.js toTerminal); the server passes stdout.isTTY && !NO_COLOR.
+function phoneUrl(bind, port) {
+  return `http://${bind.tailnetIp}:${port}/?token=${encodeURIComponent(bind.token)}`;
+}
+function startupLines(bind, port, { ansi = false } = {}) {
   if (!bind || !bind.remote) {
     return [`pmos workspace server — http://${LOOPBACK}:${port}  (loopback only, D62)`];
   }
@@ -244,16 +254,98 @@ function startupLines(bind, port) {
   if (bind.generated) {
     lines.push(`  token (generated — shown ONCE, copy it now): ${bind.token}`);
     lines.push('  attach with header  Authorization: Bearer <token>   or query  ?token=<token>');
+    lines.push('', '  phone: scan this with the camera of a phone on the same tailnet. It opens the workspace signed in.');
+    try {
+      for (const l of qr.toTerminal(qr.encode(phoneUrl(bind, port)), { ansi })) lines.push('  ' + l);
+    } catch { lines.push('  (the phone URL is too long for a QR code here; type it instead)'); }
+    lines.push(`  or open: ${phoneUrl(bind, port)}`, '');
   } else {
     lines.push('  token: using PMOS_TOKEN from the environment (not shown)');
+    lines.push(`  phone: open http://${bind.tailnetIp}:${port}/ and paste your PMOS_TOKEN into the sign-in field`);
   }
   lines.push('  loopback requests are token-free; every tailnet request must present the token.');
   return lines;
 }
 
+// ── Sign-in for a phone (workspace-phone-app) ────────────────────────────────────────────
+// Three small pieces the HTTP guard uses so that a browser on a phone never meets a JSON 401 and
+// never keeps the token in its address bar. None of them changes WHO is let in: the decision is
+// still authorize() above, and the Origin/Host allowlist still runs first.
+
+// A top-level page load, as opposed to an API call, a script, or a WebSocket upgrade. Only these
+// get the HTML sign-in page or the token-stripping redirect; everything else keeps its JSON answer.
+function isPageNavigation({ method, accept } = {}) {
+  return (method === 'GET' || method === 'HEAD') && /\btext\/html\b/i.test(String(accept || ''));
+}
+
+// The URL with its `token` parameter removed, or null when it had none. A valid ?token= navigation
+// seeds the cookie and is then redirected here, so the secret leaves the address bar, the history,
+// and the start_url a phone records on Add to Home Screen.
+function stripTokenParam(url) {
+  let u;
+  try { u = new URL(url || '/', 'http://localhost'); } catch { return null; }
+  if (!u.searchParams.has('token')) return null;
+  u.searchParams.delete('token');
+  const q = u.searchParams.toString();
+  // A path that normalises to '//host/…' would be a scheme-relative Location, which a browser reads
+  // as another site. Collapse leading slashes so the redirect can only ever stay on this origin.
+  return u.pathname.replace(/^\/+/, '/') + (q ? '?' + q : '') + u.hash;
+}
+
+// The cookie a valid token seeds. HttpOnly (no script needs it) + SameSite=Strict + the Origin/Host
+// allowlist keep a foreign site from riding it. No Secure flag: the tailnet speaks plain HTTP inside
+// WireGuard. 7 days, unchanged from workspace-mobile-remote-access.
+function sessionCookie(token) {
+  return `${COOKIE_NAME}=${encodeURIComponent(token)}; HttpOnly; SameSite=Strict; Path=/; Max-Age=604800`;
+}
+
+// The sign-in form posts application/x-www-form-urlencoded `token=<t>` to /auth.
+const AUTH_PATH = '/auth';
+function parseAuthForm(body) {
+  try { return (new URLSearchParams(String(body || '')).get('token') || '').trim() || null; } catch { return null; }
+}
+
+// The page an unauthorized phone sees. Self-contained (no script, no sub-resource, so it renders
+// without the cookie it is there to set) and phone-shaped. The password field lets the phone's
+// password manager remember the token. The colours are the dark theme's --background/--foreground.
+function signInPage({ failed = false } = {}) {
+  return `<!doctype html>
+<html lang="en"><head><meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+<meta name="theme-color" content="#090b0c">
+<title>Sign in · PMOS workspace</title>
+<style>
+  :root { color-scheme: dark; }
+  body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #090b0c; color: #f9fbfb;
+    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; padding: 24px; box-sizing: border-box; }
+  main { width: 100%; max-width: 360px; }
+  h1 { font-size: 22px; margin: 0 0 8px; }
+  p { margin: 0 0 16px; color: #a3abae; }
+  label { display: block; font-size: 14px; margin-bottom: 6px; }
+  input, button { width: 100%; box-sizing: border-box; min-height: 48px; font: inherit; border-radius: 6px; }
+  input { padding: 0 12px; background: #15191b; color: inherit; border: 1px solid #3a4245; }
+  button { margin-top: 12px; border: 0; background: #f9fbfb; color: #090b0c; font-weight: 600; }
+  .err { color: #ff8a80; }
+  code { font-size: 13px; }
+</style></head>
+<body><main>
+  <h1>Sign in to the PMOS workspace</h1>
+  ${failed ? '<p class="err" role="alert">That token does not match. Check it and try again.</p>' : ''}
+  <p>Paste the token that <code>PMOS_REMOTE=tailnet npm start</code> printed, or scan its QR code again.</p>
+  <form method="post" action="${AUTH_PATH}">
+    <input type="text" name="username" value="pmos" autocomplete="username" hidden>
+    <label for="token">Token</label>
+    <input id="token" name="token" type="password" autocomplete="current-password" autocapitalize="off" spellcheck="false" required autofocus>
+    <button type="submit">Sign in</button>
+  </form>
+</main></body></html>
+`;
+}
+
 module.exports = {
   LOOPBACK, isLoopbackAddr, isTailnetIp, detectTailnetIp, remoteRequested,
   resolveBinds, extractHttpToken, extractWsToken, tokenMatches, authorize, startupLines,
   checkHostOrigin, isAllowedOrigin, hostnameAllowed,
   COOKIE_NAME, extractCookieToken, presentedToken,
+  phoneUrl, isPageNavigation, stripTokenParam, sessionCookie, AUTH_PATH, parseAuthForm, signInPage,
 };

package/workspace/lib/report-draft.js

@@ -248,10 +248,9 @@ function draftOf(root, { cadence, slot, now, health } = {}) {
   const issuedHere = iss.issues.find((r) => r.cadence === cadence && r.slot === theSlot) || null;
 
   // The work-lane records (D86 point 4: the lanes scripts/lane-defs.js groups as work; never a hard-coded list).
-  const defs = E.lanesFor(abs).defs || {};
   const range = E.historyRange(abs);
   const workRows = E.listInitiatives(abs).map((id) => { try { return E.computeWorkflow(id, { root: abs, range }); } catch { return null; } })
-    .filter((r) => r && r.ok && has(defs, r.lane) && defs[r.lane].group === 'work');
+    .filter((r) => r && r.ok && planTree.profileAndLane(abs, r.id).group === 'work');
   // A block's note marker carries its id, and readNotes reads back only NOTE_ID_RE ids: a record named outside that
   // class would lose its note on the next Redraft, so it gets no block and Sources names it instead.
   const rows = workRows.filter((r) => NOTE_ID_RE.test(r.id));

package/workspace/lib/routes-timeline.js

@@ -105,7 +105,7 @@ function workInitiatives(root, engine) {
     try { fm = engine.parseLeadingFrontmatter(fs.readFileSync(file, 'utf8')) || {}; } catch { fm = {}; }
     const declared = String(fm.lane || '').trim();
     const lane = declared && defs[declared] ? declared : fallback;
-    if (!defs[lane] || defs[lane].group !== 'work') continue;
+    if (planTree.viewGroup(defs, declared) !== 'work') continue;
     const lc = stopped.get(id);
     if (lc && lc.state !== 'active') continue;
     out.push({ id, title: String(fm.title || id), lane });

package/workspace/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.53.0",
+  "version": "0.53.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {

package/workspace/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pmos-workspace",
-  "version": "0.53.0",
+  "version": "0.53.1",
   "private": true,
   "description": "PMOS Terminal Workspace — local companion hosting real PTYs beside the library and gates (D62)",
   "license": "MIT",

package/workspace/public/index.html

@@ -5,6 +5,17 @@
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
 <meta name="pmos-nonce" content="" />
 <title>PMOS workspace</title>
+<!-- workspace-phone-app: Add to Home Screen. The manifest is fetched WITH credentials because over the
+     tailnet every request needs the session cookie, and a manifest fetch sends none by default. The
+     apple-* tags are what iOS reads instead of the manifest. "black" keeps the page below the status
+     bar; the top bar does not pad for a translucent one. -->
+<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials" />
+<meta name="theme-color" content="#090b0c" />
+<meta name="mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="apple-mobile-web-app-title" content="PMOS" />
+<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
 <!-- The terminal's face is preloaded, not left to be discovered. An @font-face is only fetched when
      something first RENDERS in it, which for Plex Mono is about the same moment a tab constructs
      the first xterm — and xterm measures its cell from whatever face is resolved at construction.

package/workspace/public/pm/app.js

@@ -413,7 +413,7 @@ function readFrame() {
 }
 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 };
+  return { dest: FRAME_DESTS.includes(s.dest) ? s.dest : 'today', scope: s.scope === 'all' ? 'all' : 'repo', params: {}, dock: {}, dockMax: false, dockW: null, 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 */ }
@@ -421,7 +421,7 @@ function writeFrame() {
 
 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');
+const dockOpen = () => !!fr.dockMax || (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;
@@ -433,10 +433,39 @@ function go(id, params) {
   setState({ menuOpen: false, paletteOpen: false });
   return true;
 }
-function setDock(open) { fr.dock[fr.dest] = !!open; setState({}); }
+function setDock(open) { fr.dock[fr.dest] = !!open; if (!open) fr.dockMax = false; setState({}); }
 const toggleDock = () => setDock(!dockOpen());
 const foldDock = () => setDock(false);
 const openDock = () => setDock(true);
+/* Focus (0.53.1): the dock takes the whole window, on every destination, until the PM leaves it. It opens the dock. */
+function toggleFocus() {
+  fr.dockMax = !fr.dockMax;
+  if (fr.dockMax) fr.dock[fr.dest] = true;
+  setState({});
+}
+/* The dock's width, chosen with the grip (0.53.1). Kept in this browser like the dock's other per-window choices;
+ * null is the default width. */
+const DOCK_W_KEY = 'pmos.workspace.pm.dock-width';
+function readDockW() {
+  if (!FRAME) return null;
+  let v = null;
+  try { v = Number(localStorage.getItem(DOCK_W_KEY)); } catch { v = null; }
+  return Number.isFinite(v) && v > 0 ? v : null;
+}
+const dockWidth = {
+  get: () => fr.dockW,
+  set: (px) => {
+    fr.dockW = Number.isFinite(px) && px > 0 ? Math.round(px) : null;
+    try { if (fr.dockW) localStorage.setItem(DOCK_W_KEY, String(fr.dockW)); else localStorage.removeItem(DOCK_W_KEY); } catch { /* private mode */ }
+    paintDockWidth();
+  },
+};
+function paintDockWidth() {
+  const v = fr.dockW ? fr.dockW + 'px' : '';
+  if (bodyGrid.style.getPropertyValue('--fr-dock-w') !== v) {
+    if (v) bodyGrid.style.setProperty('--fr-dock-w', v); else bodyGrid.style.removeProperty('--fr-dock-w');
+  }
+}
 function chooseRepo(name) {
   fr.scope = 'repo';
   writeFrame();
@@ -498,7 +527,8 @@ function setupFrame() {
   ensureSprite();
   bar = createTopbar({ go, openPalette, repoMenu, sync: runSync });
   document.addEventListener('pointerdown', (e) => { fr.downAt = e.target; }, true);
-  dockRail = createDockRail({ open: openDock });
+  dockRail = createDockRail({ open: openDock, resize: dockWidth });
+  fr.dockW = readDockW();
   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);
@@ -546,7 +576,8 @@ function renderFrame() {
   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');
+  bodyGrid.setAttribute('data-fr-dock', phone ? 'phone' : open ? (fr.dockMax ? 'max' : 'open') : 'rail');
+  paintDockWidth();
   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.
@@ -584,7 +615,7 @@ 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 (mod && (e.key === 'j' || e.key === 'J')) { e.preventDefault(); if (!isMobile()) { if (e.shiftKey) toggleFocus(); else toggleDock(); } return; }
   if (e.key === 'Escape') {
     if (state.paletteOpen) { setState({ paletteOpen: false }); return; }
     if (state.menuOpen) { setState({ menuOpen: false }); return; }
@@ -635,9 +666,9 @@ function frameKey(e) {
 
 /* 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,
+  on: true, go, toggleDock, foldDock, openDock, toggleFocus, dockWidth, 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 dest() { return fr.dest; }, get scope() { return fr.scope; }, get dockOpen() { return dockOpen(); }, get dockMax() { return !!fr.dockMax; },
   get detailOpen() { return !!state.col2; }, get syncing() { return fr.syncing; }, get needs() { return fr.needs || 0; },
 };