create-pmos 0.495.0 → 0.496.0

package/workspace/premium-core-doc-issue-test.js

@@ -87,28 +87,14 @@ const BODY = '## Purpose\n\nWhy this board exists.\n\n## Scope\n\nWhat it covers
   const H = await T.pressHeaders(BASE);
   const nonce = H['x-pmos-nonce'];
 
-  /* B the Board reader (premium-uncovered-features, BdDocs: the Documents tab is a table; a row's title opens the document in the side panel,
-     with its health, edit log, the file's text and the Issue it bar) */
-  const bToast = (p, re) => until(() => p.evaluate((s) => { const t = document.querySelector('#bdToast'); return t && !t.hidden && new RegExp(s).test(t.textContent) ? t.textContent : null; }, re.source));
-  const P = await open('/premium-board.html'), p = P.page;
-  await until(() => p.evaluate(() => document.querySelectorAll('#ibBody .ini2').length > 0), 60000);
-  await p.click('#tabDocs');
-  ok('B1 a board document is a row whose title opens the reader', await until(() => p.evaluate((k) => !!document.querySelector(`#docBody [data-opendoc="core:${k}"]`), bkey), 60000));
-  ok('B1 every document row has a title that opens it', await p.evaluate(() => [...document.querySelectorAll('#docBody .bd-dt[data-docrow]')].every((r) => !!r.querySelector('[data-opendoc]'))));
-  await p.click(`#docBody [data-opendoc="core:${bkey}"]`);
-  ok('B2 the reader shows the file\'s text and path, and the bar says nothing is sent', await until(() => p.evaluate((pt) => { const o = document.querySelector('#czViewer'); return !o.hidden && /Why this board exists/.test(o.textContent) && o.textContent.includes(pt) && !!o.querySelector('[data-issue-bar="draft"]') && /Nothing is sent/.test(o.querySelector('[data-issue-bar]').textContent) && !!o.querySelector('[data-act="issue"]'); }, d1.path)), await p.evaluate(() => document.querySelector('#czViewer').textContent));
-  ok('B2 no old dialog opens', await p.evaluate(() => !!!document.querySelector('#dlg.on')));
+  /* B a board's own core document. Batch 24 item 7 took the Documents tab off the Board (Search's Documents filter reaches the file), so no Board press
+     issues it; the issue route still takes a board scope */
   const n0 = ledger().filter((l) => l.ev === 'issue').length;
-  await p.click('#czViewer [data-act="issue"]');
-  ok('B3 Issue it says it sent nothing', !!(await bToast(p, /Issued\. Nothing was sent to anyone/)));
-  const sent = P.posts.filter((x) => x.path === '/api/core-docs/issue');
-  ok('B4 it posted the workspace, the scope, the key and the slot, and nothing else, with the launch nonce', sent.length === 1 && Object.keys(sent[0].body).sort().join() === 'key,scope,slot,ws' && sent[0].body.scope === bscope && sent[0].body.key === bkey && sent[0].body.slot === d1.slot && sent[0].body.ws === B.ws && sent[0].headers['x-pmos-nonce'] === nonce && !!nonce, JSON.stringify(sent));
+  const bres = await fetch(BASE + '/api/core-docs/issue', { method: 'POST', headers: H, body: JSON.stringify({ ws: B.ws, scope: bscope, key: bkey, slot: d1.slot }) });
+  ok('B4 the issue route takes a board scope with the launch nonce', bres.status === 200, String(bres.status));
   const il = ledger().filter((l) => l.ev === 'issue');
-  ok('B5 the ledger has one new issue line for that draft, written by the PM', il.length === n0 + 1 && il[il.length - 1].slot === d1.slot && il[il.length - 1].scope === bscope && /pm/.test(String(il[il.length - 1].by)), JSON.stringify(il));
+  ok('B5 the ledger has one new issue line for that draft', il.length === n0 + 1 && il[il.length - 1].slot === d1.slot && il[il.length - 1].scope === bscope, JSON.stringify(il));
   ok('B5 the file now says state: issued', /^state: issued$/m.test(fs.readFileSync(path.join(team, d1.path), 'utf8')));
-  ok('B6 the reader says it is issued, the Issue it press is gone, and the row reads Up to date', await until(() => p.evaluate(() => { const o = document.querySelector('#czViewer'); return !o.hidden && !!o.querySelector('[data-issue-bar="done"]') && !o.querySelector('[data-act="issue"]'); }), 30000) && await until(() => p.evaluate((k) => { const r = document.querySelector(`#docBody [data-docrow="core:${k}"]`); return r && /Up to date/.test(r.textContent); }, bkey), 30000), await p.evaluate(() => document.querySelector('#czViewer').textContent + ' // ' + document.querySelector('#docBody').textContent));
-  await p.screenshot({ path: path.join(R.base, 'board-issued.png') });
-  await P.ctx.close();
 
   /* I the initiative: a layout inside Home (premium-agreed-design). The Board's expand link lands there; the card's Overview lists the core documents (its Documents view),
      and a draft opens a minimal reader in the Viewer (Waiting for design) with the Issue it bar, Read and Edit */
@@ -163,33 +149,18 @@ const BODY = '## Purpose\n\nWhy this board exists.\n\n## Scope\n\nWhat it covers
   await jp.screenshot({ path: path.join(R.base, 'ini-issued.png') });
 
   /* P the POST allow-list and the refusals */
-  const all = P.posts.concat(I.posts, J.posts);
+  const all = I.posts.concat(J.posts);
   const other = all.filter((x) => !ALLOWED.test(x.path) && x.path !== '/api/loose-props/rows');   // what Home shows loose, sent when it changed so Claude can propose a clean-up (batch 13 item 3); it changes no work
-  ok('P1 the pages post only to the issue route (and the conversation note)', all.length >= 3 && !other.length, JSON.stringify(other));
+  ok('P1 the pages post only to the issue route (and the conversation note)', all.length >= 2 && !other.length, JSON.stringify(other));
   const sentAll = all.filter((x) => x.path === '/api/core-docs/issue');
-  ok('P2 every issue press carried the nonce and no writer field', sentAll.length >= 3 && sentAll.every((x) => x.headers['x-pmos-nonce'] === nonce && !['by', 'via', 'at', 'actor', 'pm', 'nonce'].some((k) => k in x.body)));
+  ok('P2 every issue press carried the nonce and no writer field', sentAll.length >= 2 && sentAll.every((x) => x.headers['x-pmos-nonce'] === nonce && !['by', 'via', 'at', 'actor', 'pm', 'nonce'].some((k) => k in x.body)));
   const bare = await fetch(BASE + '/api/core-docs/issue', { method: 'POST', headers: { 'Content-Type': 'application/json', Origin: BASE }, body: JSON.stringify({ ws: B.ws, scope: bscope, key: bkey, slot: d1.slot }) });
   ok('P3 a press without the launch nonce is refused', bare.status === 403);
   const agent = await fetch(BASE + '/api/core-docs/issue', { method: 'POST', headers: { ...H, 'x-pmos-session': 's1' }, body: JSON.stringify({ ws: B.ws, scope: bscope, key: bkey, slot: d1.slot }) });
   ok('P4 D98: an agent session is not refused as an agent (the press is checked like the PM\'s)', agent.status !== 403, String(agent.status));
-  ok('P5 no script error on any page', !P.errors.length && !I.errors.length && !J.errors.length, P.errors.concat(I.errors, J.errors).join(' | '));
+  ok('P5 no script error on any page', !I.errors.length && !J.errors.length, I.errors.concat(J.errors).join(' | '));
   await J.ctx.close();
 
-  /* F floors and fidelity: a fresh draft, at 390 and 1280, light and dark */
-  const d4 = CD.writeDraft(team, { scope: bscope, key: (board2.model.docs.rows.filter((d) => d.act && d.act.kind === 'draft' && d.st === 'missing' && d.key !== bkey)[0] || {}).key, markdown: BODY, by: 'agent:test', now: Date.now() });
-  const k4 = d4.path.split('/').slice(-2)[0];
-  for (const [w, h, theme] of [[390, 844, 'light'], [390, 844, 'dark'], [1280, 900, 'dark']]) {
-    const S = await open('/premium-board.html', { w, h, theme });
-    await until(() => S.page.evaluate(() => document.querySelectorAll('#ibBody .ini2').length > 0), 60000);
-    await S.page.click(w <= 720 ? '#chDocs' : '#tabDocs');
-    await until(() => S.page.evaluate((k) => !!document.querySelector(`#docBody [data-opendoc="core:${k}"]`), k4), 60000);
-    await S.page.click(`#docBody [data-opendoc="core:${k4}"]`);
-    await until(() => S.page.evaluate(() => !!document.querySelector('#czViewer [data-act="issue"]')));
-    const f = await S.page.evaluate(() => ({ wide: document.documentElement.scrollWidth > innerWidth + 1, small: [...document.querySelectorAll('#czViewer [data-act="issue"]')].filter((b) => b.getBoundingClientRect().height < (innerWidth <= 720 ? 44 : 34)).map((b) => b.textContent) }));
-    ok(`F1 ${w} px ${theme}: no sideways scroll and the bar's button is 44 px on a phone`, !f.wide && !f.small.length, JSON.stringify(f));
-    await S.page.screenshot({ path: path.join(R.base, `bar-${w}-${theme}.png`) });
-    await S.ctx.close();
-  }
   if (process.env.KEEP_SHOTS) { for (const f of fs.readdirSync(R.base).filter((x) => /\.png$/.test(x))) fs.copyFileSync(path.join(R.base, f), path.join(process.env.KEEP_SHOTS, f)); }
   finish();
 })();

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/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,
   });
 }
@@ -1312,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;
@@ -1991,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-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/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);
+}