create-pmos 0.494.0 → 0.496.0

package/workspace/program-panel-test.js

@@ -15,6 +15,7 @@
 const path = require('path');
 const { spawn } = require('child_process');
 const { findBrowser } = require('./lib/find-browser');
+const { openMission } = require('./lib/open-mission');
 const T = require('./test-run').configure({ name: 'program-panel' });
 const BP = require('./lib/board-premium.js');
 const F = require('./fixtures/board-premium-facts.js');
@@ -46,7 +47,7 @@ process.on('unhandledRejection', (e) => { console.error(e); finish(1); });
   browser = await chromium.launch({ executablePath: exe });
 
   const open = async ({ w = 1440, h = 900, qs = '?ws=idpf&program=project-ascent', ctx = null, programs = F.programs() } = {}) => {
-    const c = ctx || await browser.newContext({ viewport: { width: w, height: h } });
+    const c = ctx || await openMission(await browser.newContext({ viewport: { width: w, height: h } }));
     const page = await c.newPage();
     const errors = [], posts = [];
     page.on('pageerror', (e) => errors.push(String((e && e.stack) || e)));

package/workspace/public/pm/cozy-board.css

@@ -115,9 +115,22 @@ body.bd-page main.bd-main { position: relative; max-width: none; margin: 16px; p
 .bd-chip em { font-style: normal; font-weight: 600; color: var(--cz-ink3); margin-left: 2px; }
 .bd-chip:disabled { opacity: .6; }
 .bd-sp { margin-left: auto; }
-.bd-spans button { height: 28px; padding: 0 11px; border-radius: 999px; border: 0; background: none; font: 600 var(--fs-2) var(--cz-sans); color: var(--cz-ink2); cursor: pointer; }
-.bd-spans button[aria-pressed="true"] { background: var(--cz-card); color: var(--cz-ink); font-weight: 800; box-shadow: 0 1px 3px rgba(42,46,53,.12); }
-.bd-spans[hidden] { display: none; }
+/* the calmer top bar (batch 24 item 7, canvas BbB): one pill for what needs a look, the legend behind (i), Jira as Adler's face */
+.bd-chip.bd-need { background: var(--cz-well); border-color: transparent; gap: 10px; padding: 0 10px 0 12px; font-weight: 800; color: var(--cz-ink); }
+.bd-chip.bd-need > span { display: inline-flex; align-items: center; gap: 5px; }
+.bd-chip.bd-need.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
+.bd-needm { min-width: 220px; }
+.bd-needm .bd-mlbl, .bd-lgdm .bd-mlbl { font: 800 var(--fs-1) var(--cz-sans); color: var(--cz-ink3); padding: 6px 10px 4px; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
+.bd-needm .bd-nr { display: flex; align-items: center; gap: 10px; }
+.bd-needm .bd-nr .k { margin-left: auto; color: var(--cz-ink3); font-weight: 700; }
+.bd-needm .bd-nr.on { background: var(--cz-bluebg); color: var(--cz-blueink); }
+.bd-needm .cz-dot { width: 7px; height: 7px; }
+.bd-lgdm { min-width: 220px; padding: 6px 12px 10px; }
+.bd-lgdm .tg-lgd { position: static; flex-direction: column; gap: 9px; padding: 4px 0 0; background: none; font-weight: 600; color: var(--cz-ink2); white-space: nowrap; }
+.bd-chip.bd-jf { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: transparent; position: relative; }
+.bd-chip.bd-jf:hover { background: var(--cz-well); }
+.bd-chip.bd-jf svg.ad-svg { width: 24px; height: 24px; }
+.bd-pip { position: absolute; right: 3px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cz-risk); border: 2px solid var(--cz-card); }
 
 /* ── the "Waiting for design" card, where the shell has none yet; messages ── */
 .bd-wait { border: 1px dashed var(--cz-hair); border-radius: 18px; padding: 22px; color: var(--cz-ink3); font-size: var(--fs-2); }
@@ -1195,7 +1208,6 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
 .sc .cur .eta { top: 19px; }
 .sc .eta.late { color: var(--cz-late); }
 .bd-kb.lanes .bd-kstrip span { margin-top: 58px; }
-.bd-chipset .tg-lgd { position: static; padding: 0; background: none; font-weight: 600; white-space: nowrap; }
 /* the phone (BdPhone): a program is a head card with its next milestone; its initiatives and the product heads follow as cards */
 @media (max-width: 720px) {
   .bt-pg { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 14px; padding: 8px 6px 10px 4px; min-height: 0; }
@@ -1218,7 +1230,7 @@ html[data-theme="dark"] body.bd-page { --bd-prog: rgb(180,170,240); --bd-progbg:
 .bd-spw .bd-spk svg { width: 14px; height: 14px; }
 body.bd-spick .bd-hd .bd-title { display: none; }
 body.bd-spick .bd-hd .bd-tools { margin-left: auto; }
-@media (max-width: 720px) { .bd-spw .bd-spk, .bd-spw .bd-grpm button { min-height: 44px; } }
+@media (max-width: 720px) { .bd-spw .bd-spk, .bd-spw .bd-grpm button, .bd-needm .bd-nr { min-height: 44px; } .bd-chip.bd-jf { width: 44px; } .bd-chip.bd-jf::before { display: none; } }
 /* programs first on every span (PgTimeline's rule): the program row brackets its initiatives' bars and carries its milestones */
 .sp-pg { background: var(--bd-progbg); min-height: 56px; }
 .sp-pg .sp-n { flex-direction: row; align-items: center; justify-content: flex-start; }

package/workspace/public/pm/cozy-home.css

@@ -232,6 +232,7 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
 .hm-u { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
 .hm-bub { max-width: 80%; padding: 10px 16px; border-radius: 18px 18px 8px 18px; background: var(--cz-bubble); font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink); }
 .hm-you { font-size: var(--fs-1); color: var(--cz-ink3); }
+.hm-pend.sending .hm-bub { opacity: .72; }   /* batch 24 item 2: the bubble shows at once, a touch lighter until PMOS takes it */
 .hm-worked { padding-left: 38px; }
 .hm-wk { display: flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 4px; border: 0; border-radius: 8px; background: none; color: var(--cz-ink3); font-size: var(--fs-2); cursor: pointer; text-align: left; }   /* a plain grey line (AgChatAsk) */
 .hm-wk:hover { color: var(--cz-ink2); }

package/workspace/public/pm/home-app.js

@@ -48,7 +48,8 @@ import * as AD from './cozy-adler.js';   // Adler, Claude's face (batch 16 item
 import * as OKL from './okr-list.js';   // the product page's Goals line (batch 16 item 6, GsProduct)
 import { canDictate, dictate } from './home-dictate.js';
 import { mountIni, iniList, iniOverview, iniPage, iniAddTask } from './home-ini.js';   // the initiative's page, its stage move, Tasks and Core documents (premium-uncovered-features, HbC)
-import * as MEN from './home-mentions.js';   // @Mentions, the permanent row at the top of Home and its Viewer (Viewer kit, XvANew)
+import * as MEN from './home-mentions.js';
+import * as LS from './load-shapes.js';   // the last view, the grey shapes and the held Viewer column while Home reads (page-open-speed)   // @Mentions, the permanent row at the top of Home and its Viewer (Viewer kit, XvANew)
 import { mountRecRow, clockOf as recClock } from './home-rec-row.js';
 import { mountSesName } from './home-ses-name.js';   // session names A: tap the session's name to rename it (canvas XmsNames)
 import * as SM from './split-merge.js';   // split one initiative in two, or merge two: Claude suggests, the PM approves (batch 11 item 14)
@@ -173,13 +174,14 @@ async function getRetry(path, tries = 20) {
   }
   return { ok: false, error: 'still reading' };
 }
+const LAST_KEY = (WS || '') + '|' + (BOARD || '');   // the last view Home drew, by its product and board (SpA)
 let pickGen = 0;   // bumped by every saved pick, so a read that started before the save does not put the old pick back
 async function load() {
   const gen = pickGen;
   const [brief, board, ses, desk, today, sch, work, day, rev, progs, , pick] = await Promise.all([
     getRetry('/api/briefing-premium' + wsQ()), getRetry('/api/board-premium' + wsQ() + boardQ(WS ? '&' : '?')), pmGet('/api/sessions'), pmGet('/api/home-desk' + wsQ()),
     pmGet('/api/brief-page' + wsQ()), pmGet('/api/schedules' + wsQ()), pmGet('/api/my-work-premium' + wsQ()), pmGet('/api/phone-day'), pmGet('/api/home-review' + wsQ()),
-    pmGet('/api/programs'), MEN.load(menCtx()), PP.readPick(), SO.load(),
+    pmGet('/api/programs'), MEN.load(menCtx()).then((x) => { S.menIn = true; if (!S.ready) drawList(); return x; }), PP.readPick(), SO.load(),
   ]);
   const D = S.D;
   D.brief = brief && brief.ok && brief.model ? brief.model : null;
@@ -345,7 +347,8 @@ function homeListHtml() {
   S.lo = { sel, ses: S.ses, restOpen: (k) => S.rest.has(k), pin: S.pin, phone: false };   // the folded rail's card draws Home's rows with these
   return TD.listHtml(M, todayModel(), {
     sel, selHead: S.head, ses: S.ses, pOpen, here: isPhone() ? null : TD.groupOfOpen(M, sel) || S.head, restOpen: (k) => S.rest.has(k), cap: S.cap, pin: S.pin, avHtml, ready: S.ready, err: S.D.err.length ? S.D.err[0] : '',
-    pick: S.D.pick, tones: pickTones(), review: R, mic: canDictate(), phone: isPhone(), day: S.day, news: S.news && S.news.ok ? S.news.count : 0, top: S.ready ? RECROW.html() + MEN.rowHtml(S.D, { sel: S.sel }) + (S.impact ? IMP.rowHtml(S.impact.c, { esc, sel: S.sel === 'impact' }) : '') : '',
+    pick: S.D.pick, tones: pickTones(), review: R, mic: canDictate(), phone: isPhone(), day: S.day, news: S.news && S.news.ok ? S.news.count : 0, top: S.ready ? RECROW.html() + MEN.rowHtml(S.D, { sel: S.sel }) + (S.impact ? IMP.rowHtml(S.impact.c, { esc, sel: S.sel === 'impact' }) : '') : S.menIn ? '<div class="ls-stale" inert>' + LS.inert(MEN.rowHtml(S.D, {})) + '</div>' : LS.menShape(),   // Mentions on its own clock, seen but not pressed until Home is fresh (SpG)
+    last: S.ready ? '' : LS.last(LAST_KEY), keep: S.ready && S.filter === 'today' && !S.ini ? (b) => LS.keepLast(LAST_KEY, b) : null,
     imFace: IM.faceHtml(S.im, { joy: S.imJoy }), grill: S.ready ? grillNews() : null,
   });
 }
@@ -843,7 +846,9 @@ function sessionTarget(s) {
   // a program's or a product's own chat says so in its scope, never "Loose" (batch 22 item 17)
   const pm = /^chat:program:([^:]+)/.exec(key || ''), pr = pm ? (S.D.programs || []).find((p) => p && p.id === pm[1]) : null;
   const prod = !ini && !pr && /^product(:|$)/.test(key || '') ? H.productName(S.D) : '';
-  const home = pr ? { text: pr.title, icon: TD.P.layers } : prod ? { text: prod, icon: I.home } : null;
+  // a New workflow chat (Settings › Workflows) says so, never "Loose" (batch 24 item 4); its draft stays on the Workflows list
+  const wfNew = !ini && !pr && !prod && /^pop:workflow:/.test(key || '');
+  const home = pr ? { text: pr.title, icon: TD.P.layers } : prod ? { text: prod, icon: I.home } : wfNew ? { text: 'New workflow', icon: I.chat } : null;
   const t = { title: H.nameOf(s), ses: s.id, sub: [role.name, ini ? iniTitle(ini) : home ? home.text : 'Loose'].join(' · '), ini, role, scope: ini ? scopeOf(ini) : home || { text: 'Loose', icon: I.chat, loose: true }, rich: rich(), to: rich() ? role : null, also: alsoOf(ini) };
   if (key && /^(decision|blocked|waited|src|ev|work|board|init|doc|ins|chat|pop):/.test(key)) { t.key = key; t.sid = undefined; } else t.sid = s.id;
   if (!t.key) t.sid = s.id;
@@ -1310,7 +1315,10 @@ addEventListener('pp:changed', (e) => { if (WS) { location.assign('/premium.html
 
 /* ── the Viewer: needs rows, the weekly update, the overview, files, people, routines ── */
 let lastViewer = null;
-VW.onChange((d) => { if (d.open) lastViewer = d.id; chat.refresh(); document.body.classList.toggle('hm-vw-open', d.open); });
+VW.onChange((d) => { if (d.open) { lastViewer = d.id; LS.holdViewer($('.hm-vw'), false); } chat.refresh(); document.body.classList.toggle('hm-vw-open', d.open); });
+// the Viewer's column held from the first frame when Home opened it last time (SpJ): the chat has its final width at once
+const VW_HELD = 'pmos.home.vwheld';
+if (!isPhone() && store.get(VW_HELD) === '1' && !VW.isOpen()) LS.holdViewer($('.hm-vw'), true);
 function reopenViewer() {
   if (/^vw:/.test(lastViewer || '')) { import('./premium-viewer.js').then((M) => { if (!M.vwReopen()) { lastViewer = null; reopenViewer(); } }); return; }   // the last file, chart or report shown
   const r = S.sel ? rowById(S.sel) : null;
@@ -1989,6 +1997,8 @@ load().then(() => {
   if (say) setTimeout(() => { const ta = $('#hmIn'); if (ta) { ta.value = say; ta.dispatchEvent(new Event('input', { bubbles: true })); ta.focus(); ta.setSelectionRange(say.length, say.length); } }, 0);
   if (mt) openMeeting({ note: mt });
   if (/^(prop|men|pulse|scan|rep|src)$/.test(P.get('around') || '')) MORE.openAround(P.get('around'));   // ?around=<row>: that Around you view (home-around.js)
+  // the Viewer opens now or not at all: the held column goes either way, and the next open holds it only if it opened (SpJ)
+  setTimeout(() => { if (!isPhone()) store.set(VW_HELD, VW.isOpen() ? '1' : null); LS.holdViewer($('.hm-vw'), false); }, 0);
   poll();
 });
 addEventListener('resize', () => { if (!isPhone() && S.sheet) sheet(false); drawList(); });

package/workspace/public/pm/home-chat.js

@@ -58,7 +58,7 @@ export const adlerAvHtml = (mood) => `<span class="hm-av hm-adler" aria-hidden="
 
 export function mountChat(el, host) {
   const esc = host.esc;
-  const C = { t: null, th: null, conv: null, timer: null, show: 12, plOpen: false, plAll: false, open: new Set(), seq: 0, sending: false, files: [], seenAt: null, lastKey: null, picked: {}, auto: { key: null, ctx: new Set(), rep: null, goal: null }, slashAt: 0 };
+  const C = { t: null, th: null, conv: null, timer: null, show: 12, plOpen: false, plAll: false, open: new Set(), seq: 0, sending: false, files: [], seenAt: null, lastKey: null, picked: {}, pend: [], auto: { key: null, ctx: new Set(), rep: null, goal: null }, slashAt: 0 };
   el.innerHTML = `<button type="button" class="hm-reopen" id="hmReopen" aria-label="Open the Viewer" title="Open the Viewer" hidden>${PANE}</button>`
     + '<div class="hm-chd" id="hmCh" hidden></div><div class="hm-sug" id="hmSug" hidden></div><div class="hm-plw" id="hmPl" hidden></div><div class="hm-log" id="hmLog" role="log" aria-live="polite"></div><div class="hm-foot" id="hmFoot"></div>';
   const log = el.querySelector('#hmLog'), foot = el.querySelector('#hmFoot'), reopen = el.querySelector('#hmReopen'), head = el.querySelector('#hmCh'), sug = el.querySelector('#hmSug'), pl = el.querySelector('#hmPl');
@@ -175,6 +175,32 @@ export function mountChat(el, host) {
     return q.filter((x) => !read(x)).map((x) => `<div class="hm-q"><div class="hm-qb">${userHtml(x.text)}</div><span class="hm-qn">${esc(role().name)} reads it after this tool call, in seconds<button type="button" class="hm-qx" data-hm-qdel="${esc(x.at)}" aria-label="Take it back" title="Take it back">${SVG(XX, 13)}</button></span></div>`).join('');
   }
   const sid = () => (C.t && C.t.sid) || (C.th && C.th.session) || null;
+  /* A sent message shows at once (batch 24 item 2: "enter the prompt is so long to appear on the chat"). Its bubble draws the moment the PM
+   * presses Enter, says "Sending…" until PMOS takes it, then "You · HH:MM". It leaves when the transcript holds the PM's turn (the same words,
+   * or any PM turn from that moment on), and after 3 minutes at most, so a bubble never stays as a ghost. A message that was not sent leaves at
+   * once and its words go back in the box. */
+  const PEND_MAX = 180000;
+  function settlePend() {
+    if (!C.pend.length) return;
+    const key = (t) => splitFiles(shownUser(t)).text.replace(/\s+/g, ' ').trim();
+    const users = ((C.conv && C.conv.messages) || []).filter((m) => m.role === 'user');
+    const lastUser = users.reduce((n, m) => Math.max(n, Date.parse(m.at) || 0), 0), now = Date.now();
+    // a message for a working session is queued by the host and drawn as "reads it after this tool call": the bubble gives way to it
+    const queued = new Set((host.queued ? host.queued(sid()) : []).map((x) => x.text));
+    C.pend = C.pend.filter((p) => {
+      if (!p.sent) return true;
+      if (queued.has(p.text)) return false;
+      const t0 = Date.parse(p.at);
+      if (now - t0 > PEND_MAX) return false;
+      if (lastUser && lastUser >= t0 - 2000) return false;
+      return !users.slice(p.n).some((m) => key(m.text) === key(p.text));
+    });
+  }
+  function pendHtml() {
+    settlePend();
+    return C.pend.map((p) => `<div class="hm-u hm-pend${p.sent ? '' : ' sending'}"><div class="hm-bub">${filesHtml(p.files)}${p.text ? userHtml(p.text) : ''}</div>`
+      + `<span class="hm-you" role="status">${p.sent ? 'You · ' + esc(hm(p.at)) : 'Sending…'}</span></div>`).join('');
+  }
   // A loose chat that reads like one initiative gets one quiet chip at its top: "Looks like <initiative> · Link it ×" (XvALinkSuggest).
   function drawSug() {
     const t = C.t, g = t && t.scope && t.scope.loose && t.sid && host.suggestLink ? host.suggestLink(t, firstUser()) : null;
@@ -205,7 +231,7 @@ export function mountChat(el, host) {
     const goal = C.th && C.th.goal;
     const parts = items.map((it, i) => msgHtml(it, i, R));
     placeDivider(parts, items, goal);
-    let html = (t.intro && !(t.intro.onlyEmpty && items.length) ? introHtml(t.intro, !items.length) : '') + parts.join('') + askHtml(R) + (R.stop && R.lastAgent < 0 ? dividerHtml(R.stop) : '') + queuedHtml();
+    let html = (t.intro && !(t.intro.onlyEmpty && items.length) ? introHtml(t.intro, !items.length) : '') + parts.join('') + askHtml(R) + (R.stop && R.lastAgent < 0 ? dividerHtml(R.stop) : '') + pendHtml() + queuedHtml();
     html += GU.choiceHtml();   // /goal while a goal works here: In a new chat, or Here instead
     if (C.th && C.th.working) html += `<p class="hm-note" role="status">The agent is answering. You can write again when it has.</p>`;
     if (C.conv && C.conv.state === 'ended') html += '<p class="hm-note">This session has ended. Your conversation is kept here, and your next message picks it up.</p>';
@@ -418,20 +444,31 @@ export function mountChat(el, host) {
   async function send(text) {
     const t = C.t; text = String(text || '').trim();
     if (!t || (!text && !C.files.length) || C.sending) return false;
+    if (t.key && C.files.some((f) => f.state === 'saving')) { host.toast('A file is still being saved. Send again in a moment.'); return false; }
     C.sending = true;
     let r;
     const was = running();
+    // the bubble first, then the server (batch 24 item 2): the files leave the box with the words, and come back if the send fails
+    const sentFiles = C.files;
+    const p = { text, files: sentFiles.map((f) => f.path || f.saved).filter(Boolean), at: new Date().toISOString(), sent: false, n: ((C.conv && C.conv.messages) || []).filter((m) => m.role === 'user').length };
+    C.pend.push(p); C.files = []; C.jump = true; draw();
     if (t.key) {
-      if (C.files.some((f) => f.state === 'saving')) { C.sending = false; host.toast('A file is still being saved. Send again in a moment.'); return false; }
-      const files = C.files.map((f) => f.saved);
+      const files = sentFiles.map((f) => f.saved);
       r = await host.pmPost('/api/briefing-premium/ask' + (t.ws ? '?ws=' + encodeURIComponent(t.ws) : ''), files.length ? { key: t.key, text, files, ...(t.context ? { context: t.context } : {}) } : { key: t.key, text, ...(t.context ? { context: t.context } : {}) }).catch(() => null);
     } else r = await host.pmPost('/api/session/say', { id: t.sid, text }).catch(() => null);
     C.sending = false;
-    if (!r || r.ok !== true) { host.toast((r && r.error) || 'The message was not sent.'); return false; }
+    if (!r || r.ok !== true) {
+      C.pend = C.pend.filter((x) => x !== p);
+      if (C.t === t && !C.files.length) C.files = sentFiles;
+      if (C.t === t) draw();
+      host.toast((r && r.error) || 'The message was not sent.'); return false;
+    }
     const s = sid() || r.session;
     if (host.touch) host.touch(s);
     if (was && s && host.queue) host.queue(s, text);
-    C.files.forEach((f) => { if (f.url) URL.revokeObjectURL(f.url); }); C.files = []; C.jump = true;
+    p.sent = true;
+    sentFiles.forEach((f) => { if (f.url) URL.revokeObjectURL(f.url); }); C.jump = true;
+    if (C.t === t) draw();
     if (t.onSent) t.onSent(r);
     read();
     return true;
@@ -527,7 +564,11 @@ export function mountChat(el, host) {
       drawFoot({ role: role() });
     }
   };
-  el.addEventListener('submit', (e) => { e.preventDefault(); const ta = foot.querySelector('textarea'); const v = ta.value; if (GU.submit(v)) { ta.value = ''; grow(ta); return; } send(v).then((ok) => { if (ok) { ta.value = ''; grow(ta); } }); });
+  el.addEventListener('submit', (e) => { e.preventDefault(); const ta = foot.querySelector('textarea'); const v = ta.value; if (GU.submit(v)) { ta.value = ''; grow(ta); return; }
+    // the box empties at once and the bubble shows (batch 24 item 2); a send that fails puts the words back, unless the PM typed again
+    if (!v.trim() && !C.files.length) return;
+    ta.value = ''; grow(ta);
+    send(v).then((ok) => { const box = foot.querySelector('textarea'); if (!ok && box && !box.value) { box.value = v; grow(box); } }); });
   const shutAdd = (focus) => { if (!C.addOpen) return; C.addOpen = false; drawFoot({ role: role() }); if (focus) { const a = foot.querySelector('#hmAdd'); if (a) a.focus(); } };
   document.addEventListener('click', (e) => { if (C.addOpen && e.target.isConnected && !e.target.closest('.hm-addw')) shutAdd(false); }, true);
   el.addEventListener('keydown', (e) => {
@@ -623,7 +664,7 @@ export function mountChat(el, host) {
       if (notesM) notesM.then((M) => setTimeout(() => M.syncNotes(), 0));   // the Notes open in the Viewer belonged to the conversation before
       const same = C.t && t && C.t.key === t.key && C.t.sid === t.sid;
       C.t = t;
-      if (!same) { C.addOpen = false; C.th = null; C.conv = null; C.show = 12; C.open = new Set(); C.files = []; C.marked = null; C.touched = null; C.picked = {}; C.plOpen = false; C.plAll = false; C.seenAt = t.key ? host.seen(t.key) : null; put(log, introHtml(t.intro)); put(pl, ''); pl.hidden = true; C.jump = true; peek(null); }
+      if (!same) { C.addOpen = false; C.th = null; C.conv = null; C.show = 12; C.open = new Set(); C.files = []; C.marked = null; C.touched = null; C.picked = {}; C.pend = []; C.plOpen = false; C.plAll = false; C.seenAt = t.key ? host.seen(t.key) : null; put(log, introHtml(t.intro)); put(pl, ''); pl.hidden = true; C.jump = true; peek(null); }
       draw(); read();
     },
     refresh() { if (C.t) draw(); },

package/workspace/public/pm/home-today.js

@@ -18,7 +18,8 @@ import { gripHtml, sugHtml } from './prog-order.js';   // a program's order: the
 import * as SO from './sort-order.js';   // the sort button and ONE order with the Board (batch 14 item 8, canvas SoAHomePhone)
 import { prodKey } from './order-model.js';
 import * as CW from './ctx-wedge.js';   // how full a session's context is: the pie, and Claude's ✦ Compact (batch 13 item 8, XctxA1Desk)
-import * as AD from './cozy-adler.js';   // Adler greets on Home (batch 16 item 2, canvas AdH1): the M face, honest when the read failed
+import * as AD from './cozy-adler.js';
+import * as LS from './load-shapes.js';   // the ring, the grey shapes and the last view while Home reads (page-open-speed, SpA SpG SpM)   // Adler greets on Home (batch 16 item 2, canvas AdH1): the M face, honest when the read failed
 
 export const esc = (s) => String(s == null ? '' : s).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
 export const P = {
@@ -321,8 +322,11 @@ export function listHtml(M, T, o) {
   // the blue dot after "Good morning": something is new for you, in Your day's New for you fold (feedback batch 16 item 5b, FmA4Desk)
   const nw = o.news > 0 ? '. ' + o.news + ' new for you' : '';
   // Your impact (batch 16 item 7, GmA1Home): with it on, the greeting's face is its own press, Adler with the week's leaves (pm/impact.js faceHtml)
-  const face = o.imFace && !o.err ? '' : AD.adler(o.err ? 'honest' : 'handled', 36, { label: false, cls: 'hv-ad' });
-  const head = `<div class="hm-hd hv-bar">${o.imFace && !o.err ? o.imFace : ''}<button type="button" class="hv-hi" data-hm-day aria-expanded="${!!o.day}" aria-label="${esc(M.word || 'Today')}${nw}. Open your day">${face}<b>${esc(M.word || 'Today')}</b>${o.news > 0 ? '<i class="hv-nd" aria-hidden="true"></i>' : ''}${svg(P.chevD, 18)}</button><span class="hv-acts">`
+  // Adler beside the greeting from the first frame (SpM): thinking while Home reads, handled when it is in, honest if the read failed.
+  // While Home reads, a hollow ring follows the greeting (SpA); a fresh page shows no sign of having been checked
+  const own = o.imFace && !o.err && o.ready;
+  const face = own ? '' : AD.adler(o.err ? 'honest' : o.ready ? 'handled' : 'thinking', 36, { label: false, cls: 'hv-ad' });
+  const head = `<div class="hm-hd hv-bar">${own ? o.imFace : ''}<button type="button" class="hv-hi" ${o.ready ? 'data-hm-day' : 'aria-disabled="true"'} aria-expanded="${!!o.day}" aria-label="${esc(M.word || 'Today')}${nw}. Open your day">${face}<b>${esc(M.word || 'Today')}</b>${o.ready ? '' : LS.ringHtml()}${o.news > 0 ? '<i class="hv-nd" aria-hidden="true"></i>' : ''}${svg(P.chevD, 18)}</button><span class="hv-acts">`
     // the product chip, always (it is also the way to add one): the ticked products' tiles, or All (canvas XhpA2States)
     + (o.pick ? chipHtml(o.pick, { id: 'hmPick', attrs: 'data-hm-pick', label: 'Products on Home', tones: o.tones }) : '')
     + (o.phone ? '' : `<button type="button" class="ut-ib hv-ib${flt ? ' on' : ''}" data-hm-flt aria-haspopup="menu" aria-label="Show: Today, Kept or Done${flt ? '. Now ' + esc(flt.label) : ''}" title="Show: Today, Kept or Done">${svg(P.filter, 18)}</button>`)
@@ -336,7 +340,9 @@ export function listHtml(M, T, o) {
   // the Today card only while the day has a moment; the plain day (its meetings and load) is in Your day
   const card = MOMENT.has(T.mode) ? todayHtml(T, { greet: M.greet, sub: '', phone: o.phone }) : '';
   // start-up and errors (canvas AdU9, AdU6): Adler wears his glasses while Home reads, and says a failure plainly; the greeting's face hides
-  if (!o.ready) return head + card + `<div class="hm-none hm-ad" role="status">${AD.adler('thinking', 'l', { label: false })}<p>Reading your work.</p></div>`;
+  // start-up (SpA, SpG): the list Home drew last, drawn at once and inert until the fresh read is in; with none kept, grey rows that claim
+  // nothing. o.top is Mentions (or its grey shape) on its own clock. Errors (canvas AdU6): Adler says a failure plainly
+  if (!o.ready) return head + card + `<p class="vh" role="status">Reading your work.</p><div class="hv-body">${o.top || ''}${o.last ? `<div class="ls-stale" inert>${o.last}</div>` : LS.listShapes()}</div>`;
   const errLine = `<div class="hm-none hm-ad" role="status">${AD.adler('honest', 48, { label: false })}<p>Home could not read the repository: ${esc(o.err)}.</p></div>`;
   if (o.err && !M.groups.some((g) => (g.kind === 'product' && g.count) || (g.rows && g.rows.length))) return head + card + errLine;
   // the repository's read failed but sessions or notes still answered: say so above what did come back, never an empty product as if calm
@@ -353,6 +359,7 @@ export function listHtml(M, T, o) {
     if (o.cap) body += `<form class="hm-cap" id="hmCapF"><label class="vh" for="hmCap">Add a task to your own list</label><input id="hmCap" autocomplete="off" maxlength="250" placeholder="A task for your own list. Esc to cancel">`
       + (o.mic ? `<button type="button" class="ut-ib" data-hm-capmic aria-label="Say it instead" title="Say it instead">${svg(P.mic, 16)}</button>` : '') + '</form>';
   }
+  if (o.keep && !o.err && !M.list && !o.cap) o.keep(body);   // the last view, for the next open (SpA)
   return head + card + `<div class="hv-body">${o.top || ''}${body}</div>` + (o.phone && o.ses && !M.list ? sesSheetHtml(M, o) : '');   // o.top: the pinned recording row and Mentions (home-rec-row.js, home-mentions.js)
 }
 /** Your day (HvAOpen): a sheet over the list from "Good morning". The date, the day's meetings and their load (a press opens the calendar,

package/workspace/public/pm/ini-view.js

@@ -75,11 +75,11 @@ const SHOWN = new Map();  // id → the view last drawn, for the Kanban's stage
 const MCS = new Map();    // id → the PM's own changes to { mc, gx, ab } (true = open), kept in the browser
 const MCK = 'pmos.iv.mc.';
 const store = () => { try { return typeof localStorage !== 'undefined' ? localStorage : null; } catch { return null; } };
-/** The three folds of one initiative: the PM's own, else the defaults (the way to finish is open on a wide screen, About is folded; on a phone both are folded; About opens by itself while a success measure waits on a ✓). */
+/** The three folds of one initiative: the PM's own, else the defaults (the telemetry card starts hidden in its banner; the way to finish is open on a wide screen, About is folded; on a phone both are folded; About opens by itself while a success measure waits on a ✓). */
 export function mcState(id, o = {}) {
   let mine = MCS.get(id);
   if (!mine) { mine = {}; try { const s = store(), j = s && JSON.parse(s.getItem(MCK + id) || 'null'); if (j && typeof j === 'object') for (const k of ['mc', 'gx', 'ab']) if (typeof j[k] === 'boolean') mine[k] = j[k]; } catch { mine = {}; } MCS.set(id, mine); }
-  const dflt = { mc: true, gx: !phone(), ab: !!o.proposal };
+  const dflt = { mc: false, gx: !phone(), ab: !!o.proposal };   // the telemetry starts hidden in its banner (Wawan, batch 24 item 1)
   return { mc: 'mc' in mine ? mine.mc : dflt.mc, gx: 'gx' in mine ? mine.gx : dflt.gx, ab: 'ab' in mine ? mine.ab : dflt.ab };
 }
 export function mcToggle(id, key, o) {

package/workspace/public/pm/load-shapes.css

@@ -0,0 +1,57 @@
+/* Loading shapes (initiative page-open-speed; canvas boards SpA, SpD, SpG, SpJ, SpM, agreed A 2026-11-02).
+ * Honest state: grey shapes say only "something goes here" (no names, no counts); a hollow ring says Home is checking; nothing moves;
+ * no bar and no percent. Every shape is static (principle 12: no motion on data). */
+
+/* the hollow ring beside "Good morning" while Home checks (SpA) */
+.ls-ringdot { display: inline-block; flex: none; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; border: 1.6px solid var(--cz-blue); box-sizing: border-box; }
+
+/* grey shapes */
+.ls-sk { display: block; height: 9px; border-radius: 6px; background: var(--cz-well2); }
+.ls-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cz-well2); }
+.ls-box { flex: none; width: 12px; height: 12px; border-radius: 6px; background: var(--cz-well2); }
+.ls-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; box-sizing: border-box; }
+.ls-row + .ls-row { border-top: 1px solid var(--cz-hair); }
+.ls-head { display: flex; align-items: center; min-height: 32px; padding: 0 12px; }
+.ls-group + .ls-group { margin-top: 14px; }
+.ls-men { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; margin-bottom: 12px; border-radius: 8px; background: var(--cz-card); box-sizing: border-box; }
+
+/* the last view, drawn at once while the fresh read runs (SpA): it can be read, not acted on; a press that acts is dashed */
+.ls-stale { pointer-events: none; }
+.ls-stale .hm-cta, .ls-stale .hv-cta, .ls-stale .solid, .ls-stale [data-ls-was].solid { background: transparent !important; color: var(--cz-ink3) !important; border: 1px dashed var(--cz-ink3) !important; box-shadow: none !important; }
+.ls-stale .hr-bd { visibility: hidden; }
+
+/* the Viewer's column held from frame one (SpJ): a dashed empty panel, the same width the Viewer opens at, no text, no icon */
+.ls-vw { flex: none; border: 1.5px dashed var(--cz-hair); border-radius: 8px; box-sizing: border-box; width: min(500px, max(380px, calc(100vw - 808px))); }
+@media (max-width: 760px) { .ls-vw { display: none; } }
+
+/* the Board's skeleton (SpD): the real toolbar and tabs are the page's own; the body is grey rows shaped like programs and initiatives */
+.ls-bd { display: flex; flex-direction: column; }
+.ls-bd .ls-bh { display: grid; grid-template-columns: minmax(160px, 260px) 1fr minmax(120px, 220px); gap: 16px; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 8px; background: var(--cz-well); }
+.ls-bd .ls-stg { display: flex; justify-content: space-between; gap: 6px; }
+.ls-bd .ls-stg .ls-sk { width: 28px; height: 7px; }
+.ls-bd .ls-br { display: grid; grid-template-columns: minmax(160px, 260px) 1fr minmax(120px, 220px); gap: 16px; align-items: center; min-height: 46px; padding: 0 14px; }
+.ls-bd .ls-br.pg { min-height: 40px; margin-top: 8px; border-radius: 8px; background: var(--cz-well); }
+.ls-bd .ls-trk { position: relative; display: flex; align-items: center; justify-content: space-between; height: 12px; }
+.ls-bd .ls-trk::before { content: ""; position: absolute; left: 4px; right: 4px; top: 5px; height: 2px; background: var(--cz-well2); }
+.ls-bd .ls-trk i { position: relative; width: 7px; height: 7px; background: var(--cz-well2); }
+.ls-bd .ls-trk i.ls-tdot { border-radius: 50%; }
+.ls-bd .ls-trk i.on { width: 12px; height: 12px; }
+.ls-slow { margin: 10px 14px 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink3); }
+@media (max-width: 760px) {
+  .ls-bd .ls-bh, .ls-bd .ls-br { grid-template-columns: 1fr; gap: 6px; }
+  .ls-bd .ls-bh .ls-stg, .ls-bd .ls-br .ls-trk, .ls-bd .ls-br > .ls-sk:last-child { display: none; }
+}
+.ls-stale > .hm-pg + .hm-pg { margin-top: 12px; }
+.ls-stale > .hm-pg.loose { margin-top: 0; }
+.ls-w30 { width: 30%; }
+.ls-w34 { width: 34%; }
+.ls-w38 { width: 38%; }
+.ls-w40 { width: 40%; }
+.ls-w55 { width: 55%; }
+.ls-w60 { width: 60%; }
+.ls-w70 { width: 70%; }
+.ls-w75 { width: 75%; }
+.ls-w48 { width: 48%; }
+.ls-w54 { width: 54%; }
+.ls-w62 { width: 62%; }
+.ls-w78 { width: 78%; }

package/workspace/public/pm/load-shapes.js

@@ -0,0 +1,57 @@
+/* Loading shapes (initiative page-open-speed; canvas SpA, SpD, SpG, SpJ, SpM, agreed A 2026-11-02).
+ *
+ *   ringHtml()              the hollow ring beside "Good morning" while Home checks
+ *   listShapes()            Home's list as grey rows, before the first read and with no last view kept
+ *   menShape()              the Mentions row's grey shape, until Mentions is read
+ *   keepLast(key, html)     keep the list Home drew last in this browser (not over 300 KB), for the next open
+ *   last(key)               that list, or ''
+ *   holdViewer(host, on)    the Viewer's column as a dashed empty panel, so the chat never narrows when the Viewer opens
+ *   slowLine(host, M, ms)   'Still reading the board.' once the wait runs past ms, while there is still no model
+ *
+ * Grey shapes carry no names and no counts, and nothing moves. The last view is drawn inert: it can be read, not acted on, until the
+ * fresh read is in. */
+
+const store = {
+  get(k) { try { return localStorage.getItem(k); } catch { return null; } },
+  set(k, v) { try { if (v == null) localStorage.removeItem(k); else localStorage.setItem(k, v); } catch { /* a private window, or full */ } },
+};
+const LAST = 'pmos.home.last:';
+const MAX = 300000;
+
+export const ringHtml = () => '<span class="ls-ringdot" role="img" aria-label="Checking"></span>';
+
+const W = [62, 78, 54, 70, 48];
+const row = (w, box) => `<div class="ls-row">${box ? '<i class="ls-box"></i>' : '<i class="ls-dot"></i>'}<i class="ls-sk ls-w${w}"></i></div>`;
+export function listShapes() {
+  return '<div class="ls-list" aria-hidden="true">'
+    + `<div class="ls-group"><div class="ls-head"><i class="ls-sk ls-w38"></i></div><div class="hv-card">${W.map((w, i) => row(w, i > 0)).join('')}</div></div>`
+    + `<div class="ls-group"><div class="ls-head"><i class="ls-sk ls-w30"></i></div><div class="hv-card">${W.slice(0, 3).map((w) => row(w, true)).join('')}</div></div>`
+    + '</div>';
+}
+export const menShape = () => '<div class="ls-men" aria-hidden="true"><i class="ls-dot"></i><i class="ls-sk ls-w34"></i></div>';
+
+const kept = new Map();   // what this page wrote last, so a redraw that changed nothing writes nothing
+export function keepLast(key, html) { if (kept.get(key) === html) return; kept.set(key, html); store.set(LAST + key, html && html.length <= MAX ? html : null); }
+/** The last view, drawn as a picture of itself: no button, link or field in it, so nothing in it can be pressed or found as a control
+ *  until the fresh read is in (SpA: it can be read, not acted on). */
+export function last(key) { return inert(store.get(LAST + key) || ''); }
+/** html with its buttons, links and fields drawn as spans, and its press marks renamed: seen, not pressed, until the fresh read is in. */
+export function inert(html) {
+  return String(html || '').replace(/<(\/?)(button|a|input|select|textarea)\b/gi, (m, end, tag) => '<' + end + 'span' + (end ? '' : ' data-ls-was="' + tag.toLowerCase() + '"'))
+    .replace(/\sdata-(hm|hr)-/g, ' data-ls-');   // and without the presses' own marks, so nothing reads it as the live list
+}
+
+/** on: a dashed empty panel in the host (once); off: the panel goes. */
+export function holdViewer(host, on) {
+  if (!host) return;
+  const was = host.querySelector(':scope > .ls-vw');
+  if (on && !was) { const p = document.createElement('div'); p.className = 'ls-vw'; p.setAttribute('aria-hidden', 'true'); host.prepend(p); }
+  if (!on && was) was.remove();
+}
+
+/** The Board's quiet line past ms of waiting (SpD): it says only what is true, and never shows once the board is in (M() is set). */
+export function slowLine(host, M, ms = 2000) {
+  const show = () => { if (M() || !host || !host.querySelector('.ls-bd') || host.querySelector('.ls-slow')) return; host.insertAdjacentHTML('afterbegin', '<p class="ls-slow" role="status">Still reading the board.</p>'); };
+  const left = ms - (typeof performance !== 'undefined' ? performance.now() : 0);
+  if (left <= 0) show(); else setTimeout(show, left);
+}