create-pmos 0.510.0 → 0.511.0

package/workspace/public/pm/cozy-panels.js

@@ -27,6 +27,12 @@
  *   Remembered     Home: each initiative reopens with its panels and shares (localStorage 'cz-pn:<initiative id>', like Android app pairs).
  *                  A page: only the divider share (localStorage 'cz-pn:<key>'); the open Viewers are not restored. A private window
  *                  forgets it, and the page falls back to today's split.
+ *   Dock side      a page (Board, Intelligence): each Viewer docks on the right of the page (as today) or on its left. Drag the Viewer's
+ *                  header (not a press on it) over the left or the right half: that half turns blue, and the drop docks it there. The ⧉
+ *                  menu has the same two places as icons (Dock on the left, Dock on the right), so a keyboard reaches it. A Viewer that
+ *                  slides over slides over on its side. The side is kept per kind of item (localStorage 'cz-pn-side': { kind: 'left' }),
+ *                  so the initiative panel or the chat comes back on the side it was left on after a reload. The divider resizes it on
+ *                  either side (its drag, its keys, a drag to the edge).
  *   Present        Home: while a recording presents (BroadcastChannel 'pmos-present': present or show), the chat slides away by itself; on
  *                  Stop (off, or the recording ends) it comes back.
  *
@@ -40,7 +46,7 @@
  *            (560 px at first) but never so wide that the page goes under fit(). key: the name the share is kept under ('board', 'intel').
  *            desk defaults to the page's parent; a Viewer host (data-cz-viewer-host) is added to it when it has none.
  *   window.czPanels = { list(), place(id, 'full'|'split'|'over'), slideOver(item?), openBeside(row|item), putAway(), away(), onChange(fn),
- *                       scope(id) }
+ *                       scope(id), dock(id, 'left'|'right') → true when it docked (a page only), side(id) → 'left'|'right' }
  *     panel ids: 'chat' or 'page' (the first panel), 'v0', 'v1', 'v2' (v0 is #czViewer). list() → [{ id, kind: 'chat'|'page'|'viewer',
  *     mode: 'split'|'over'|'away', full, active, title }]. slideOver(item): a Live pill row (item.sid, a session) opens in the chat, and the
  *     chat floats over when it is not in the row; a Viewer item ({ kind, title, render | html }) opens in a Viewer that floats over; no
@@ -59,8 +65,9 @@ const HOME_SRC = '#hmList button[data-hm-sel], #czLiveList a[data-lv], #hmChat [
 const IC = {
   full: 'M3.5 5h17v14h-17z', split: 'M3.5 5h17v14h-17zM12 5v14', over: 'M3.5 5h17v14h-17zM14 8h4v8h-4z',
   place: 'M3.5 5h17v14h-17zM12 5v14', close: 'M6 6l12 12M18 6L6 18',
+  left: 'M3.5 5h17v14h-17zM10 5v14M5.5 9h2M5.5 12h2', right: 'M3.5 5h17v14h-17zM14 5v14M16.5 9h2M16.5 12h2',
 };
-const NAME = { full: 'Full screen', split: 'Split', over: 'Slide over' };
+const NAME = { full: 'Full screen', split: 'Split', over: 'Slide over', left: 'Dock on the left', right: 'Dock on the right' };
 const svg = (d, w = 18) => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="${d}"/></svg>`;
 const store = {
   get(k) { try { return JSON.parse(localStorage.getItem(k) || 'null'); } catch { return null; } },
@@ -72,6 +79,27 @@ const maxRow = () => (innerWidth >= WIDE ? 3 : 2);
 let C = 'chat';
 const S = { on: false, page: false, desk: null, chat: null, src: HOME_SRC, clicks: '', fitFn: null, key: '', row: ['chat'], over: null, away: [], fr: [], used: {}, subs: [], go: null, reopen: null, pend: null, scope: null, auto: false, restoring: false, keepList: false, noClick: 0, divs: [] };
 
+/* ── the side a Viewer docks on (a page): kept per kind of item ── */
+const SIDES = 'cz-pn-side';
+const kindOf = (id) => { const v = P.list().find((p) => p.id === id); return String((v && v.item && v.item.kind) || '').trim().toLowerCase(); };
+/** 'left' or 'right' (today's place). Only a page docks: Home keeps the chat first. */
+function sideOf(id) {
+  if (!S.page || !isV(id)) return 'right';
+  const m = store.get(SIDES) || {}, k = kindOf(id);
+  return k && m[k] === 'left' ? 'left' : 'right';
+}
+/** Dock the Viewer id on a side, keep it for its kind, and lay the panels out again. */
+function dock(id, side) {
+  if (!S.on || !S.page || isPhone() || !isV(id) || !known(id) || !['left', 'right'].includes(side)) return false;
+  const k = kindOf(id), m = { ...(store.get(SIDES) || {}) };
+  if (k) { if (side === 'left') m[k] = 'left'; else delete m[k]; store.set(SIDES, Object.keys(m).length ? m : null); }
+  mark(id); S.fr = [];
+  layout();
+  return true;
+}
+
+/** The page's own sheet sets its margin with !important (cozy-panels.css), so the gap after a Viewer docked left is set the same way. */
+const gapLeft = (el, on) => { if (on) el.style.setProperty('margin-left', GAP + 'px', 'important'); else el.style.removeProperty('margin-left'); };
 /* ── the panels and their elements ── */
 const isV = (id) => /^v\d$/.test(id || '');
 const vs = () => P.list().filter((p) => p.open);
@@ -83,7 +111,9 @@ const drop = (id) => { S.row = S.row.filter((x) => x !== id); if (S.over === id)
 const mark = (id) => { if (id) S.used[id] = performance.now(); };
 const lru = (ids) => ids.slice().sort((a, b) => (S.used[a] || 0) - (S.used[b] || 0))[0];
 /** Today's split, laid out by cozy-viewer.js: the first panel alone, or it then one Viewer, nothing over and nothing put away. */
-const simple = () => (S.page || (!S.over && !S.away.length)) && S.row[0] === C && S.row.length <= 2;   // a page: a Viewer over leaves the split as it is
+const simple = () => (S.page ? S.row.includes(C) : !S.over && !S.away.length && S.row[0] === C) && S.row.length <= 2;
+/** Today's split on a page with its one Viewer docked on the left. */
+const leftSplit = () => S.page && !managed() && S.row.length === 2 && S.row[1] === C;   // a page: a Viewer over leaves the split as it is
 const managed = () => S.on && !isPhone() && !simple();
 const pageW = () => (S.fitFn ? Math.max(0, +S.fitFn() || 0) : 0);
 
@@ -97,7 +127,10 @@ function sync() {
     else { const v = [...S.away].reverse().find(isV); if (v) { drop(v); S.row = [v]; } else { drop(C); S.row = [C]; } }
   }
   if (!open.length && !S.row.includes(C)) { drop(C); S.row.unshift(C); }   // no Viewer: the chat (or the page) is the page, as today
-  if (S.page && S.row.includes(C) && S.row[0] !== C) { S.row = [C, ...S.row.filter((x) => x !== C)]; S.fr = []; }   // the page is first
+  if (S.page && S.row.includes(C)) {   // the Viewers docked left, the page, then the ones docked right
+    const want = [...S.row.filter((x) => x !== C && sideOf(x) === 'left'), C, ...S.row.filter((x) => x !== C && sideOf(x) !== 'left')];
+    if (want.join() !== S.row.join()) { S.row = want; S.fr = []; }
+  }
   fit();
 }
 /** Over the limit (a new panel, a narrower window): the panel used least recently gives way. The chat slides over (or away when a panel
@@ -138,11 +171,14 @@ function layout() {
     el.style.order = !phone && man && at >= 0 ? String(at * 2) : '';
     el.style.flex = !phone && man && at >= 0 ? `${fr[at]} 1 0px` : '';
     if (S.page && id !== C) el.style.marginLeft = !phone && man && at > 0 ? GAP + 'px' : '';   // a page's row has no flex gap (stray body children)
+    if (S.page && id === C) gapLeft(el, !phone && (man ? at > 0 : leftSplit()));   // the page after a Viewer docked left
+    if (S.page && isV(id)) el.classList.toggle('cz-pn-left', !phone && sideOf(id) === 'left');
     grab(el, !phone && S.over === id);
   });
   const host = S.desk.querySelector('[data-cz-viewer-host]');
-  if (host) host.style.order = !phone && !man ? '2' : '';
-  if (host && S.page) host.style.marginLeft = !phone && !man ? GAP + 'px' : '';
+  const lft = !phone && leftSplit();
+  if (host) host.style.order = !phone && !man ? (lft ? '-2' : '2') : '';
+  if (host && S.page) host.style.marginLeft = !phone && !man && !lft ? GAP + 'px' : '';
   if (S.chat) S.chat.style.order = !phone && !man ? '0' : S.chat.style.order;
   divs(phone ? 0 : S.row.length - 1, man);
   if (man && !phone && !S.page) {
@@ -219,7 +255,7 @@ function divs(n, man) {
   while (S.divs.length < n) S.divs.push(divider());
   S.divs.forEach((d, k) => {
     d.dataset.k = String(k);
-    d.style.order = man ? String(k * 2 + 1) : '1';
+    d.style.order = man ? String(k * 2 + 1) : leftSplit() ? '-1' : '1';
     if (d.__first !== (k === 0)) { d.__first = k === 0; d.querySelector('.cz-pn-in').innerHTML = dividerHtml({ first: k === 0 }); }
     if (d.parentNode !== S.desk) S.desk.appendChild(d);
   });
@@ -257,8 +293,8 @@ function snap(x, g) {
  *  the share is what is kept (rule 7), not the kind's width. */
 function setAt(k, x, g, keep) {
   if (!managed()) {
-    const w = g.R - x - g.gap / 2;
-    if (S.page) { if (keep) store.set('cz-pn:' + S.key, { v: 2, share: Math.min(0.95, Math.max(0.05, w / (g.R - g.L - g.gap))) }); P.size(g.b, w, false); if (keep) layout(); return; }
+    const v = isV(g.b) ? g.b : g.a, w = v === g.b ? g.R - x - g.gap / 2 : x - g.L - g.gap / 2;   // a Viewer docked left grows to the right
+    if (S.page) { if (keep) store.set('cz-pn:' + S.key, { v: 2, share: Math.min(0.95, Math.max(0.05, w / (g.R - g.L - g.gap))) }); P.size(v, w, false); if (keep) layout(); return; }
     P.size(g.b, w, keep); return;
   }
   const wa = Math.max(60, x - g.ra.left - g.gap / 2), wb = Math.max(60, g.rb.right - x - g.gap / 2), fr = shares(), s = fr[k] + fr[k + 1];
@@ -286,7 +322,7 @@ function dragDiv(d, e) {
     d.classList.remove('drag', 'snap'); document.body.classList.remove('cz-pn-drag', 'cz-vw-drag');
     [g.a, g.b].forEach((id) => { const el = elOf(id); if (el) el.classList.remove('cz-pn-shut'); });
     if (!last) return;
-    if (last.shut && pinned(last.shut)) place(g.b, 'full');   // the page never closes: the Viewer takes the screen
+    if (last.shut && pinned(last.shut)) place(last.shut === g.a ? g.b : g.a, 'full');   // the page never closes: the Viewer takes the screen
     else if (last.shut) shut(last.shut); else setAt(k, last.x, g, true);
   };
   d.addEventListener('pointermove', mv); d.addEventListener('pointerup', up); d.addEventListener('pointercancel', up);
@@ -326,8 +362,14 @@ function openMenu(id, anchor) {
   const now = modeOf(id);
   const m = document.createElement('div');
   m.className = 'cz-pn-menu'; m.setAttribute('role', 'menu'); m.setAttribute('aria-label', 'Arrange'); m.dataset.escLayer = '1';
-  m.innerHTML = ['full', 'split', 'over'].map((k) => `<button type="button" role="menuitemradio" aria-checked="${now === k}" data-cz-pn-place="${k}" aria-label="${NAME[k]}" title="${NAME[k]}">${svg(IC[k], 20)}</button>`).join('');
-  m.addEventListener('click', (e) => { const b = e.target.closest('[data-cz-pn-place]'); if (!b) return; closeMenu(false); place(id, b.dataset.czPnPlace); });
+  const btn = (k, on, at) => `<button type="button" role="menuitemradio" aria-checked="${on}" ${at}="${k}" aria-label="${NAME[k]}" title="${NAME[k]}">${svg(IC[k], 20)}</button>`;
+  // a page's Viewer also docks on the left or the right of the page: the keyboard's way to what a drag of its header does
+  const sides = S.page && isV(id) ? '<i class="cz-pn-sep" aria-hidden="true"></i>' + ['left', 'right'].map((k) => btn(k, sideOf(id) === k, 'data-cz-pn-dock')).join('') : '';
+  m.innerHTML = ['full', 'split', 'over'].map((k) => btn(k, now === k, 'data-cz-pn-place')).join('') + sides;
+  m.addEventListener('click', (e) => {
+    const d = e.target.closest('[data-cz-pn-dock]'); if (d) { closeMenu(false); dock(id, d.dataset.czPnDock); return; }
+    const b = e.target.closest('[data-cz-pn-place]'); if (!b) return; closeMenu(false); place(id, b.dataset.czPnPlace);
+  });
   m.addEventListener('keydown', (e) => {
     const bs = [...m.querySelectorAll('button')], at = bs.indexOf(document.activeElement);
     if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeMenu(true); }
@@ -464,14 +506,14 @@ function grab(el, want) {
   let g = el.querySelector(':scope > .cz-pn-grab');
   if (!want) { if (g) g.remove(); el.style.transform = ''; return; }
   if (g) return;
-  g = document.createElement('div'); g.className = 'cz-pn-grab'; g.setAttribute('aria-hidden', 'true'); g.title = 'Drag to the right to put it away';
+  g = document.createElement('div'); g.className = 'cz-pn-grab'; g.setAttribute('aria-hidden', 'true'); g.title = 'Drag off the edge to put it away';
   g.innerHTML = '<i></i>';
   g.addEventListener('pointerdown', (e) => {
     if (e.button !== 0) return;
     e.preventDefault(); g.setPointerCapture(e.pointerId);
-    const x0 = e.clientX; let dx = 0;
+    const x0 = e.clientX, f = el.classList.contains('cz-pn-left') ? -1 : 1; let dx = 0;   // docked left: off the left edge
     el.classList.add('cz-pn-moving');
-    const mv = (ev) => { dx = Math.max(0, ev.clientX - x0); el.style.transform = `translateX(${dx}px)`; };
+    const mv = (ev) => { dx = Math.max(0, (ev.clientX - x0) * f); el.style.transform = `translateX(${dx * f}px)`; };
     const up = () => {
       g.removeEventListener('pointermove', mv); g.removeEventListener('pointerup', up); g.removeEventListener('pointercancel', up);
       el.classList.remove('cz-pn-moving'); el.style.transform = '';
@@ -590,6 +632,46 @@ function dragWire() {
 }
 const besideSel = () => [S.src, S.clicks].filter(Boolean).join(', ');
 
+/* ── dock a Viewer on the left or the right (a page): drag its header; the half it will dock on turns blue ── */
+const NODRAG = 'button.cz-vw-ib, .cz-vw-pri, .cz-vw-chip, .cz-vw-chk, input, textarea, select, a[href], .cz-vw-menu, .cz-vw-trail, .cz-pn-grab';
+let K = null;
+function dockBox(side) {
+  const a = area(); if (!a) return null;
+  const top = Math.max(a.top, 0), h = Math.min(a.bottom, innerHeight) - top, w = (a.right - a.left) / 2;
+  return { left: side === 'left' ? a.left : a.left + w, top, width: w, height: h };
+}
+function dockWire() {
+  document.addEventListener('pointerdown', (e) => {
+    if (!S.on || !S.page || isPhone() || e.button !== 0 || e.pointerType === 'touch') return;
+    const hd = e.target.closest && e.target.closest('.cz-vw-hd'); if (!hd || e.target.closest(NODRAG)) return;
+    const p = hd.closest('[data-cz-panel]'); if (!p || !isV(p.dataset.czPanel) || !known(p.dataset.czPanel)) return;
+    K = { id: p.dataset.czPanel, el: p, x0: e.clientX, y0: e.clientY, pid: e.pointerId, on: false, side: null };
+  }, true);
+  document.addEventListener('pointermove', (e) => {
+    if (!K || e.pointerId !== K.pid) return;
+    if (!K.on) {
+      if (Math.hypot(e.clientX - K.x0, e.clientY - K.y0) < 8) return;
+      K.on = true; K.zone = document.createElement('div'); K.zone.className = 'cz-pn-drop'; K.zone.hidden = true;
+      document.body.appendChild(K.zone); document.body.classList.add('cz-pn-dragrow'); K.el.classList.add('cz-pn-docking');
+    }
+    e.preventDefault();
+    const a = area(); if (!a) return;
+    K.side = e.clientX < (a.left + a.right) / 2 ? 'left' : 'right';
+    const b = dockBox(K.side); K.zone.hidden = !b;
+    if (b) { Object.assign(K.zone.style, { left: b.left + 'px', top: b.top + 'px', width: b.width + 'px', height: b.height + 'px' }); K.zone.dataset.side = K.side; }
+  }, true);
+  const end = (e, ok) => {
+    if (!K || (e && e.pointerId !== K.pid)) return;
+    const k = K; K = null;
+    if (!k.on) return;
+    k.zone.remove(); document.body.classList.remove('cz-pn-dragrow'); k.el.classList.remove('cz-pn-docking');
+    S.noClick = Date.now();   // the release over the title is not also its rename press
+    if (ok && k.side && k.side !== sideOf(k.id)) dock(k.id, k.side);
+  };
+  document.addEventListener('pointerup', (e) => end(e, true), true);
+  document.addEventListener('pointercancel', (e) => end(e, false), true);
+}
+
 /* ── remembered per initiative on Home (rule 7) ── */
 function snapshot() {
   return {
@@ -675,6 +757,7 @@ export function mountPanels(o = {}) {
     if (p) { mark(p.dataset.czPanel); used(p.dataset.czPanel); } else if (S.chat.contains(t)) mark(C);
   }, { capture: true, passive: true }));
   dragWire();
+  if (S.page) dockWire();
   let rz = 0;
   addEventListener('resize', () => { cancelAnimationFrame(rz); rz = requestAnimationFrame(() => { fit(null, true); S.keepList = false; layout(); }); });
   if (S.page && typeof ResizeObserver !== 'undefined') new ResizeObserver(() => narrow()).observe(S.chat);
@@ -686,7 +769,7 @@ export function mountPanels(o = {}) {
     onRecording((s) => { if (!s || !s.on) presentOff(); });
   }
   window.czPanels = {
-    list, place, slideOver, putAway, scope, openBeside,
+    list, place, slideOver, putAway, scope, openBeside, dock, side: sideOf,
     away: lastAway,
     onChange(fn) { if (typeof fn === 'function') S.subs.push(fn); },
   };

package/workspace/public/pm/cozy-settings.js

@@ -17,8 +17,9 @@
  *   Workspaces  the repositories PMOS works in (GET and POST /api/workspaces, POST /api/workspaces/forget; the folder is never touched)
  *   Workflows   a link to its own page, /premium-workflows.html (pm/wf-page.js, D99): the stages each kind of initiative goes through
  *   Updates     the versions and Check now, Update, Restart to update (GET /api/kit/status, POST /api/kit/check | update | upgrade-app); opening it
- *               asks for the latest kit. Under it, what's new: the published kits grouped by week as New, Improved and Fixed, this week open and every earlier
- *               week folded into an Archive (pm/upd-weeks.js). It was a section of its own, What's new.
+ *               asks for the latest kit. Under it, what's new (design E, UpE): this week's summary lines, the newest kit at version level,
+ *               then "Earlier this week" as one flat list of Claude's plain-language stories (a blue dot New, an amber dot Fixed, no dot
+ *               Improved), and every earlier week folded into an Archive (pm/upd-weeks.js). No PR numbers and no kit ranges.
  * Adler's moments (batch 17 item 4-B, AdM4): one face per section, where Claude speaks. Updates: glasses while it checks or installs,
  * holding the card when a version is ready, calm when up to date. General: holding the update card, else the Jira promise (only after
  * Commit). A failure in the status line takes the honest face, and then the section's face steps back (one Adler per screen).
@@ -33,7 +34,7 @@ import { esc, svg, ICON, toast, wsParam, wsQ } from './cozy-evui.js';
 import { sourceRows, staleOf, partsOf } from './cozy-evmodel.js';
 import * as AD from './cozy-adler.js';
 import * as SE from './cozy-seasons.js';
-import { weeksOf, lineOf, KINDS } from './upd-weeks.js';
+import { weeksOf, lineOf, storiesOf } from './upd-weeks.js';
 
 /** PUT or DELETE with the page's launch nonce (pressFetch). Only the key row needs them. */
 async function pmSend(method, path, body) {
@@ -44,7 +45,7 @@ const SECTIONS = [['general', 'General'], ['claude', 'Claude'], ['checks', 'Clau
 const PAGE_LINKS = { workflows: '/premium-workflows.html' };   // a section that is a page of its own: the row goes there
 const SRC = { calendar: 'Calendar', wispr: 'Wispr Flow', mail: 'Mail', slack: 'Slack', jira: 'Jira', confluence: 'Confluence', github: 'GitHub', drive: 'Google Drive', figma: 'Figma', website: 'Your websites' };
 const VIEWER_KEY = 'pmos.cz.viewer';
-const T = { el: null, sec: 'general', ws: null, st: {}, src: null, con: {}, conn: [], set: null, prods: null, msg: '', busy: false, phase: '', say: '', back: null, fresh: null, reading: '', note: {}, lines: null, dress: false, more: false, bday: false, dset: {}, wkOpen: new Set(), arc: false };
+const T = { el: null, sec: 'general', ws: null, st: {}, src: null, con: {}, conn: [], set: null, prods: null, msg: '', busy: false, phase: '', say: '', back: null, fresh: null, reading: '', note: {}, lines: null, dress: false, more: false, bday: false, dset: {}, wkOpen: new Set(), wkMore: new Set(), arc: false };
 const cmpVer = (a, b) => { const x = String(a || '0').split('-')[0].split('.').map(Number), y = String(b || '0').split('-')[0].split('.').map(Number); for (let i = 0; i < 3; i++) if ((x[i] || 0) !== (y[i] || 0)) return (x[i] || 0) < (y[i] || 0) ? -1 : 1; return 0; };
 const home = () => (T.ws && T.ws[0] ? T.st[T.ws[0].id] : null);
 const latest = () => { const s = home(); return (s && (s.latest || (s.lastCheck && s.lastCheck.latest))) || null; };
@@ -211,24 +212,41 @@ function updates() {
   const last = s.lastCheck ? 'Last checked ' + new Date(s.lastCheck.at).toLocaleString() + '. ' : '';
   return `<div class="ev-card ev-upd first">${mood ? adFace(mood) : ''}<div class="ev-tx ev-grow">${head}</div>${acts}</div>${kits}<p class="ev-small ev-mut">${esc(last)}${s.checkDaily ? 'PMOS checks when you open Updates and once a day while a page is open; Check now asks again.' : 'PMOS checks only when you press Check now.'}</p>${weeks()}`;
 }
-/** One week: its name and dates, then New, Improved and Fixed with a line for each published PR. */
-function weekBody(w) {
-  const dot = { new: 'you', imp: 'ok', fix: 'risk' };
-  const grp = KINDS.filter(([k]) => w.groups[k].length).map(([k, label]) => `<div class="ev-wg"><div class="ev-wgl"><i class="ev-dot ${dot[k]}"></i>${label}</div><ul class="ev-wi">${w.groups[k].map((p) => { const x = lineOf(p); return `<li>${x.b ? `<b>${esc(x.b)}${/[.!?]$/.test(x.b) ? '' : '.'}</b> ` : ''}${esc(x.s)}${p.n ? ` <span class="ev-mut ev-pr">#${esc(p.n)}</span>` : ''}</li>`; }).join('')}</ul></div>`).join('');
-  return `<div class="ev-wkm">${grp}</div>`;
+/** Design E (UpE). A story line: a blue dot for New, an amber dot for Fixed, no dot for Improved; Claude's plain title, then the sentence. */
+const SPARK = 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z';
+const DOT = { new: ['you', 'New'], fix: ['risk', 'Fixed'] };
+function story(p) {
+  const x = lineOf(p), d = DOT[p.k];
+  return `<li class="ev-sy"><span class="ev-dc">${d ? `<i class="ev-dot ${d[0]}" title="${d[1]}"></i><span class="ev-vh">${d[1]}: </span>` : ''}</span><span class="ev-sx">${x.b ? `<b>${esc(x.b)}</b>` : ''}${x.b && x.s ? '<br>' : ''}${esc(x.s)}</span></li>`;
 }
-const kitsOf = (w) => (w.kits[0] === w.kits[1] ? w.kits[0] : w.kits[0] + ' – ' + w.kits[1]);
+/** A flat list of stories, the first SHOWN of them, then a "N more" row that opens the rest. */
+const SHOWN = 7;
+function storyList(list, key) {
+  const all = T.wkMore.has(key), vis = all ? list : list.slice(0, SHOWN), rest = list.length - vis.length;
+  return `<ul class="ev-sl">${vis.map(story).join('')}</ul>${rest > 0 ? `<button type="button" class="ev-more" data-ev-more="${esc(key)}">${rest} more</button>` : ''}`;
+}
+const sumCard = (w) => (w.sum.length ? `<div class="ev-sum">${w.sum.map((l) => `<p>${svg(SPARK, 14)}<span>${esc(l)}</span></p>`).join('')}</div>` : '');
+const changesOf = (w) => w.count + (w.count === 1 ? ' change' : ' changes');
+/** The newest week: summary lines, the newest kit at version level, then "Earlier this week" as one flat list. */
+function weekTop(w) {
+  const { kit, latest: top, earlier } = storiesOf(w), dots = w.groups.new.length || w.groups.fix.length;
+  const legend = dots ? '<div class="ev-leg" aria-hidden="true"><span><i class="ev-dot you"></i>New</span><span><i class="ev-dot risk"></i>Fixed</span><span>no dot: improved</span></div>' : '';
+  const kitRow = top.length ? `<div class="ev-rel"><div class="ev-rv"><b>${esc(kit)}</b>${kit === latest() ? '<span class="ev-small">latest</span>' : ''}</div><ul class="ev-sl">${top.map(story).join('')}</ul></div>` : '';
+  const more = earlier.length ? `<div class="ev-grp"><div class="ev-gh"><b>Earlier ${w.name === 'This week' ? 'this' : 'that'} week</b><span class="ev-small ev-mut">${earlier.length}</span></div>${storyList(earlier, w.key)}</div>` : '';
+  return sumCard(w) + legend + kitRow + more;
+}
+/** An archived week: its newest kit's stories, then the rest with the highlights first. */
+const archList = (x) => { const o = storiesOf(x); return [...o.latest, ...o.earlier]; };
 /** What's new, under the update card: this week (the newest week) open, and every earlier week folded into the Archive. */
 function weeks() {
   const s = home(), mine = s && s.app && !fromGit() ? s.app.version : null;
   const W = weeksOf(changes(), Date.now(), mine);
   if (!W.length) return '<p class="ev-small ev-mut">No kit summaries yet. Each kit published from now on carries one, and Check now reads the newest ones.</p>';
   const [w, ...old] = W.slice(0, 13);
-  const head = (x) => `<div class="ev-wkh"><b>${esc(x.name)}</b><span class="ev-small ev-mut">${esc(x.range)} · kits ${esc(kitsOf(x))}</span>${x.newer ? '<span class="ev-pill y">Ready to install</span>' : ''}</div>`;
-  const tally = (x) => [['new', 'new'], ['imp', 'improved'], ['fix', 'fixed']].filter(([k]) => x.groups[k].length).map(([k, l]) => x.groups[k].length + ' ' + l).join(' · ');
-  const rows = old.map((x) => { const on = T.wkOpen.has(x.key); return `<div class="ev-wkr"><button type="button" class="ev-wkt" data-ev-wk="${esc(x.key)}" aria-expanded="${on}"><b>${esc(x.name)}</b><span class="ev-small ev-mut">${esc(x.range)}</span><span class="ev-small ev-mut ev-tl">${esc(tally(x))}</span>${svg(ICON.down, 14)}</button>${on ? weekBody(x) : ''}</div>`; }).join('');
+  const head = `<div class="ev-wkh"><b>${esc(w.name)}</b><span class="ev-small ev-mut">${esc([w.range, changesOf(w)].filter(Boolean).join(' · '))}</span>${w.newer ? '<span class="ev-pill y">Ready to install</span>' : ''}</div>`;
+  const rows = old.map((x) => { const on = T.wkOpen.has(x.key); return `<div class="ev-wkr"><button type="button" class="ev-wkt" data-ev-wk="${esc(x.key)}" aria-expanded="${on}"><b>${esc(x.name)}</b><span class="ev-small ev-mut">${esc(x.range)}</span><span class="ev-small ev-mut ev-tl">${esc(changesOf(x))}</span>${svg(ICON.down, 14)}</button>${on ? sumCard(x) + storyList(archList(x), x.key) : ''}</div>`; }).join('');
   const arc = old.length ? `<div class="ev-arc"><button type="button" class="ev-arcb" data-ev-arc aria-expanded="${T.arc}"><b>Archive</b><span class="ev-small ev-mut">${old.length} earlier ${old.length === 1 ? 'week' : 'weeks'}</span>${svg(ICON.down, 14)}</button>${T.arc ? rows : ''}</div>` : '';
-  return `<div class="ev-wk">${head(w)}${weekBody(w)}${arc}</div>`;
+  return `<div class="ev-wk">${head}${weekTop(w)}${arc}</div>`;
 }
 /* Settings > Claude: which Claude profile PMOS starts Claude sessions with, and the API key for Claude's own runs (D101).
  * The key is typed here and goes to this computer only; the page never gets it back, only whether one is set and where from. */
@@ -315,6 +333,7 @@ async function press(e) {
   if ('evClose' in t.dataset) { closeSettings(); return; }
   if (t.dataset.evWk) { const k = t.dataset.evWk; if (T.wkOpen.has(k)) T.wkOpen.delete(k); else T.wkOpen.add(k); draw(); return; }
   if ('evArc' in t.dataset) { T.arc = !T.arc; draw(); return; }
+  if (t.dataset.evMore) { T.wkMore.add(t.dataset.evMore); draw(); return; }
   if (t.dataset.evGo) { T.sec = t.dataset.evGo; draw(); return; }
   if (t.dataset.evSeg === 'theme') { const M = await import('./cozy-nav.js'); M.setTheme(t.dataset.v); draw(); return; }
   if (t.dataset.evSeg && t.dataset.evSeg.startsWith('grill.')) {
@@ -458,7 +477,7 @@ async function load() {
 export function openSettings(section) {
   const el = mount();
   if (section === 'dress') { T.sec = 'adler'; T.dress = true; } else if (section && BODY[section]) { T.sec = section; T.dress = false; }
-  if (el.hidden) { const ae = document.activeElement; T.back = ae && ae !== document.body ? ae : null; T.ws = null; T.src = null; T.msg = ''; T.phase = ''; T.auto = false; T.wkOpen = new Set(); T.arc = false; T.fresh = null; T.note = {}; T.dset = {}; T.cl = null; T.gr = null; JL.reset(); }
+  if (el.hidden) { const ae = document.activeElement; T.back = ae && ae !== document.body ? ae : null; T.ws = null; T.src = null; T.msg = ''; T.phase = ''; T.auto = false; T.wkOpen = new Set(); T.wkMore = new Set(); T.arc = false; T.fresh = null; T.note = {}; T.dset = {}; T.cl = null; T.gr = null; JL.reset(); }
   el.hidden = false; document.getElementById('evStScrim').hidden = false; el.setAttribute('data-esc-layer', '');
   draw();
   const f = el.querySelector('[aria-current="page"]'); if (f) f.focus();

package/workspace/public/pm/cozy-viewer.js

@@ -44,6 +44,9 @@
  *             nothing leaves until the caller runs go() (canvas MsB5Leave: Save or Discard). false or none: it leaves at once.
  *     render  called with the body element to draw into; html is the same as a string. Neither: the body is left empty for the caller.
  *     id      optional; current() returns it, so a caller can tell whether its item is the one shown
+ *     outward true: a press inside this Viewer opens what it names in the other Viewer used last, not here (a chat panel, as Home's chat
+ *             column opens into the Viewer); with no other Viewer it drills in here
+ *     into    a panel id ('v0'..'v2'): the item goes in that Viewer (the Board's one chat panel changes its conversation in place)
  *     onClose called once when this item leaves the card (Close, Escape, close(), or another open())
  *   close() · back() · forward() · isOpen() · current() → { id, kind, title, url } | null · body() → the body element or null
  *   drill() the next open() keeps the item shown now behind it, as back: true does (a page opens a task or a document from its own
@@ -117,7 +120,7 @@ const kindKey = (k) => String(k || 'item').trim().toLowerCase().replace(/^file
  * key or the last open() went to, so the exported API always speaks of the Viewer used last. G is what the page has once: its list's rail,
  * the listeners, the rail's card. Only the first instance (#czViewer) writes the browser history; another keeps its own ← → trail.
  * Without cozy-panels.js (Board, Intelligence) the limit stays 1 and there is one Viewer, as before. */
-const G = { subs: [], card: null, railKey: null, rail: false, lw: 0, hold: 0, tick: 0, limit: 1, beside: null, place: null, managed: null, own: null };
+const G = { chat: null, subs: [], card: null, railKey: null, rail: false, lw: 0, hold: 0, tick: 0, limit: 1, beside: null, place: null, managed: null, own: null };
 /** The list's fold, when the page owns it (Home, batch 20 item 6): { folded() → bool, show() }. Then only the list's own icon folds or unfolds it:
  *  a Viewer's width, its reset, open wide and its close never do. null: the Viewer folds the list to a rail as it needs (a page without one). */
 export function listFold(o) { G.own = o && typeof o.folded === 'function' ? o : null; }
@@ -145,7 +148,12 @@ function pick(o) {
     return ALL.filter(shown).sort((a, c) => a.used - c.used)[0];
   }
   const p = H.press && Date.now() - H.press.t < 10000 ? H.press : null;
-  if (p && p.inst && shown(p.inst) && !o.fresh) return p.inst;
+  if (p && p.inst && shown(p.inst) && !o.fresh) {
+    // a Viewer that holds a chat (outward: the Board's chat panel) opens what it names in the other Viewer, as Home's chat column does;
+    // with no other Viewer it drills in, and ← comes back to the chat
+    const other = p.inst.cur && p.inst.cur.args && p.inst.cur.args.outward ? ALL.filter((x) => shown(x) && x !== p.inst).sort((a, c) => c.used - a.used)[0] : null;
+    return other || p.inst;
+  }
   return mru() || ALL[0];
 }
 
@@ -431,10 +439,14 @@ function moreMenu(b) {
 export const aboutPrefix = (k) => /initiative/.test(k) ? 'init' : /(^|-)(doc|document|prd|brd|spec|file|page)(-|$)/.test(k) ? 'doc'
   : /(task|work|epic|ticket|item)/.test(k) ? 'work' : /(insight|goal|metric|measure|report|chart|dashboard)/.test(k) ? 'ins'
   : /(program|board|stage|lane|release)/.test(k) ? 'board' : 'chat';
+/** A page that opens the chat itself (the Board, batch 26 item 4): fn({ id, kind, title }) → true when it opened the chat about the item
+ *  on the page, false to go to Home as before. Only for discuss: true, and not on a phone. */
+export function chatHere(fn) { G.chat = typeof fn === 'function' ? fn : null; }
 function discuss() {
   const d = V.cur && V.cur.discuss; if (!d) return;
   if (typeof d === 'function') { d(); return; }
   if (d && d.href) { location.href = d.href; return; }
+  if (G.chat && !isPhone() && G.chat({ id: V.cur.id, kind: V.cur.kind, title: V.cur.title }) !== false) return;
   // Home opens the chat about it, with the item in the Viewer beside it (XvABoardChat): ?about=<prefix>:<id> is the chat's key, and ?vk/?vid
   // carry the item's own kind and id, so Home can reopen it (an initiative, a document by its path, a work-item)
   const k = kindKey(V.cur.kind), raw = String(V.cur.id || V.cur.title);
@@ -572,7 +584,7 @@ function retitle0(id, title) { if (V.cur && V.cur.id === String(id) && title) {
 /** Show one item in the Viewer, in place of the one shown. Returns the body element the content is in. */
 export function open(it) {
   const o = it || {};
-  use(o._inst || pick(o));
+  use(o._inst || (o.into && byP(o.into)) || pick(o));   // into: a panel id ('v1'), the Viewer that shows it (the Board's chat panel)
   // an item with unsaved changes asks first; the open goes on when it says so (and keeps a drill-in asked for before it)
   if (!o._asked && V.cur && typeof V.cur.guard === 'function') {
     const dr = V.drill; let now = true, ran = false;

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

@@ -576,6 +576,8 @@ export function mountChat(el, host) {
     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);
+  // Escape closes the goal choice or method menu wherever the focus is: the redraw that opens the choice can drop the focus to the page
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !e.defaultPrevented && el.isConnected && !el.contains(e.target) && !document.querySelector('[data-esc-layer]') && GU.escape()) e.preventDefault(); });
   el.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && C.addOpen) { e.preventDefault(); e.stopPropagation(); shutAdd(true); return; }
     if (e.key === 'Escape' && GU.escape()) { e.preventDefault(); e.stopPropagation(); return; }
@@ -673,6 +675,8 @@ export function mountChat(el, host) {
       draw(); read();
     },
     refresh() { if (C.t) draw(); },
+    /** Stop reading: the chat left the screen (the Board's chat panel closed). open() starts again. */
+    stop() { clearTimeout(C.timer); C.seq += 1; },
     reread() { read(); },
     focus() { const ta = foot.querySelector('textarea'); if (ta) ta.focus(); },
     send,

package/workspace/public/pm/page-chat.css

@@ -0,0 +1,9 @@
+/* pm/page-chat.css — Home's chat in a Viewer of its own on a page with no chat column (page-chat.js, batch 26 item 4). The chat's own
+ * look is cozy-home.css; here only its place: the Viewer's body does not scroll, the conversation does, and the box stays at the foot. */
+.cz-vw .cz-vw-body.pc-body { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
+.pc-body > .pc-chat { flex: 1 1 auto; min-height: 0; padding: 4px 20px 16px; }
+.pc-body > .pc-chat > .hm-reopen { display: none; }
+/* the box shows focus as Home's does (its own well), not with the page's focus ring */
+.pc-chat form.hm-box textarea:focus-visible { outline: none; }
+/* "In:" names the item the chat is about; on the Board it cannot change, so it is not a press */
+.pc-chat [data-hm-scope] { pointer-events: none; }

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

@@ -0,0 +1,90 @@
+/* pm/page-chat.js — the chat as a panel on a page that has no chat column (the Board; batch 26 item 4, Wawan 2026-11-03: "User should be
+ * able to open chat panel on board page").
+ *
+ * "Discuss in chat" on the Board's initiative or program panel opens the chat about that item in a Viewer of its own, beside the panel
+ * (1600 px and wider) or sliding over it (a laptop), through the panels engine (cozy-panels.js openBeside). The page stays where it is.
+ * It is Home's chat (home-chat.js mountChat), not a second one: the same conversation key Home opens for that item (cozy-viewer.js
+ * aboutPrefix: init:<id> for an initiative, board:<id> for a program), so the words are the same on both pages. One chat panel at a time:
+ * Discuss on another item changes the conversation in it. A file or a link the chat opens goes in the other Viewer (outward), as on Home.
+ * ⋯ keeps "Open in a new tab": the same conversation on Home. A phone goes to Home as before (cozy-viewer.js chatHere is desktop only).
+ *
+ *   openChat({ id, kind, title }, { ws? }) → true when it opened (false: no item to talk about; the caller goes to Home)
+ * The chat's styles are Home's (cozy-home.css, home-line.css); they load once, the first time the chat opens. */
+import * as VW from './cozy-viewer.js';
+import { pmGet, pmPost, pmHeaders } from './http.js';
+
+export const CHAT_ID = 'page-chat';
+const CLAUDE = { key: 'claude', name: 'Claude', initial: 'C' };
+const CHAT_ICON = 'M5 6.5A2.5 2.5 0 0 1 7.5 4h9A2.5 2.5 0 0 1 19 6.5v7a2.5 2.5 0 0 1-2.5 2.5H11l-4 3.5V16h.5A2.5 2.5 0 0 1 5 13.5z';
+const FLAG = 'M5 21V4h11l-2 4 2 4H5';
+const SHEETS = ['./cozy-home.css', './home-line.css', './page-chat.css'];
+const esc = (v) => String(v == null ? '' : v).replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c]);
+const Q = { el: null, chat: null, t: null, mod: null };
+
+/** The conversation key Home opens for the item (cozy-viewer.js discuss: ?about=). */
+export function keyOf(it) {
+  const raw = String((it && (it.id || it.title)) || '');
+  const k = String((it && it.kind) || 'item').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-');
+  const id = raw.replace(/[^A-Za-z0-9._:-]+/g, '-').replace(/^[^A-Za-z0-9]+/, '').slice(0, 100);
+  return id ? VW.aboutPrefix(k) + ':' + id : '';
+}
+/** The chat's target (home-chat.js mountChat open): the item's name is its scope; Claude answers. */
+export function targetOf(it, ws) {
+  const title = String((it && it.title) || 'this').slice(0, 80);
+  return { key: keyOf(it), ws: ws || undefined, title, about: title, scope: { text: title, icon: FLAG }, role: CLAUDE, rich: false,
+    placeholder: 'Message Claude about ' + title, empty: 'Ask about ' + title + '. Claude reads its records and works in a real Claude Code session.' };
+}
+/** Home's own address for the same conversation (⋯ › Open in a new tab). */
+const homeHref = (it, key) => '/premium.html?' + new URLSearchParams({ about: key, label: String(it.title || '').slice(0, 80) }).toString();
+
+function sheets() {
+  for (const s of SHEETS) {
+    const href = new URL(s, import.meta.url).href;
+    if (![...document.querySelectorAll('link[rel="stylesheet"]')].some((l) => l.href === href)) { const l = document.createElement('link'); l.rel = 'stylesheet'; l.href = href; document.head.appendChild(l); }
+  }
+}
+const toast = (m) => { const t = document.getElementById('toast'); if (!t) return; t.textContent = m; t.classList.add('on'); setTimeout(() => t.classList.remove('on'), 4200); };
+function host() {
+  return {
+    esc, toast, pmGet, pmPost, pressHeaders: () => { const h = pmHeaders(); delete h['Content-Type']; return h; },
+    roles: () => [], seen: () => null, markSeen: () => {}, session: () => null, queued: () => [],
+    touch: (sid) => { if (sid) pmPost('/api/session/touch', { id: sid }).then(() => document.dispatchEvent(new CustomEvent('cz:live'))).catch(() => {}); },
+    onScope: () => {}, onTo: () => {}, onLink: () => {},
+    workItem: () => toast('Make a work-item from Home, in the initiative’s own chat.'),
+    viewerClosed: () => false, reopenViewer: () => {}, desk: () => true, head: () => '',
+    // a finished turn: the page reads its records again, so what Claude changed shows with no refresh (as Home, batch 25 item 3)
+    turnEnded: () => document.dispatchEvent(new CustomEvent('cz:chat-turn')),
+  };
+}
+async function mod() {
+  if (!Q.mod) Q.mod = import('./home-chat.js');
+  return Q.mod;
+}
+const shownAt = () => VW.panels.list().find((p) => p.open && p.item && p.item.id === CHAT_ID) || null;
+
+export async function openChat(it, o = {}) {
+  const key = keyOf(it); if (!key) return false;
+  sheets();
+  const M = await mod();
+  if (!Q.el) {
+    Q.el = document.createElement('section'); Q.el.className = 'hm-chat pc-chat'; Q.el.setAttribute('aria-label', 'Conversation');
+    Q.chat = M.mountChat(Q.el, host());
+  }
+  Q.t = targetOf(it, o.ws);
+  const item = {
+    id: CHAT_ID, kind: 'Chat', title: Q.t.title, icon: CHAT_ICON, url: homeHref(it, key), outward: true, fresh: true,
+    render: (body) => { body.classList.add('pc-body'); body.appendChild(Q.el); Q.chat.open(Q.t); },
+    onClose: () => { if (Q.chat) Q.chat.stop(); },
+  };
+  const at = shownAt();
+  if (at) {   // one chat panel: it changes to this item's conversation in place (its title and its Home address with it)
+    VW.open({ ...item, into: at.id });
+    if (window.czPanels && (window.czPanels.list().find((p) => p.id === at.id) || {}).mode === 'away') window.czPanels.slideOver();
+    setTimeout(() => Q.chat && Q.chat.focus(), 60);
+    return true;
+  }
+  const P = window.czPanels;
+  if (!(P && P.openBeside && P.openBeside(item))) VW.open(item);
+  setTimeout(() => Q.chat && Q.chat.focus(), 60);
+  return true;
+}

package/workspace/public/pm/premium-board.js

@@ -95,6 +95,11 @@ mountLivePill();
  * name drags beside, or ⌘/Ctrl-click opens it beside (a By stage card's drag moves the stage, so it is no source). fit(): the width the
  * view needs whole, so the Viewer opens no wider than that leaves. */
 mountPanels({ page: document.getElementById('stage'), key: 'board', sources: BP2.SOURCES, fit: BP2.fit });
+/* Discuss in chat on an initiative's or a program's panel opens Home's chat about it in a panel of its own, beside the panel or sliding over
+ * it (batch 26 item 4, page-chat.js); the Board stays. A finished turn reads the board again. A phone goes to Home as before. */
+VW.chatHere((it) => { const r = M && (M.rows || []).find((x) => x.id === it.id); import('./page-chat.js').then((C) => C.openChat(it, { ws: (r && r.ws) || (M && M.board.ws) || undefined })); return true; });
+document.addEventListener('cz:chat-turn', () => { clearTimeout(chatT); chatT = setTimeout(() => load(), 400); });
+let chatT = null;
 // a product head's goal dots (PgBoard .gd) count that product's open initiatives, the way Home's product header does
 PG.goalsFrom((name) => (M ? M.initiatives.list.rows.filter((r) => !M.board.all || r.product === name) : null));
 const SV = (d) => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${d}"/></svg>`;

package/workspace/public/pm/upd-weeks.js

@@ -1,8 +1,11 @@
 /* pm/upd-weeks.js — the published kits' change log, grouped by calendar week (Settings › Updates; initiative premium-updates, the weekly log).
  * Pure: no DOM, no network. The two Settings screens (cozy-settings.js, premium-shell.js) draw what it returns.
- *   weeksOf(entries, now, mine) → [{ key, name, range, kits: [oldest, newest], newer, groups: { new, imp, fix }, count }]   newest week first
- *   lineOf(item) → { b, s }   a bold name and the sentence under it (the PR's title and its summary), or just the sentence
- * An entry is { v, at, prs: [{ n, t, s, k }] } as scripts/kit-changelog.js writes it. A week runs Monday to Sunday in this computer's time zone.
+ *   weeksOf(entries, now, mine) → [{ key, name, range, kits: [oldest, newest], newer, groups: { new, imp, fix }, count, items, sum }]   newest week first
+ *     items: every line of the week as one flat list, the newest kit first; sum: up to three summary lines, from the highlights (top)
+ *   storiesOf(w) → { kit, latest: [items of the newest kit], earlier: [the rest, highlights first] }   design E: the newest kit at version level
+ *   lineOf(item) → { b, s }   a bold name and the sentence under it: Claude's story (h, d) when the kit has one, else the PR's title and
+ *                             its summary, or just the sentence
+ * An entry is { v, at, prs: [{ n, t, s, k, h, d, top }] } as scripts/kit-changelog.js writes it. A week runs Monday to Sunday in this computer's time zone.
  * Each PR becomes one line in New, Improved or Fixed by its kind k; chore, docs, test and CI PRs (k = x) are left out, and a week with no line
  * is not listed (zero is silence). A kit published before kinds were kept has no k, so its title decides: a fix word means Fixed, else Improved. */
 export const KINDS = [['new', 'New'], ['imp', 'Improved'], ['fix', 'Fixed']];
@@ -19,6 +22,7 @@ export function kindOf(p) {
  *  ("`pmos x` names y" and "Pmos x names y."): the line is then the title once, without its ticks, so a command keeps its own case. */
 const same = (a, b) => { const f = (x) => x.replace(/`/g, '').replace(/[.!?]+$/, '').replace(/\s+/g, ' ').trim().toLowerCase(); return f(a) === f(b); };
 export function lineOf(p) {
+  if (p && p.h) { const d = String(p.d || ''), ps = String(p.s || ''); return { b: String(p.h), s: d || (same(p.h, ps) || same(String(p.t || ''), ps) ? '' : ps) }; }
   const s = String((p && p.s) || ''), t = String((p && p.t) || '').replace(/`([^`]*)`/g, '$1');
   if (!t) return { b: '', s };
   return same(t, s) ? { b: '', s: t } : { b: t, s };
@@ -37,15 +41,16 @@ export function weeksOf(entries, now = Date.now(), mine = null) {
   for (const e of Array.isArray(entries) ? entries : []) {
     if (!e || !e.v) continue;
     const d = e.at ? new Date(e.at) : null, dated = d && !isNaN(d), mon = dated ? mondayOf(d) : null, key = dated ? keyOf(mon) : 'undated';
-    if (!by.has(key)) by.set(key, { key, mon, kits: [], newer: false, groups: { new: [], imp: [], fix: [] }, seen: new Set() });
+    if (!by.has(key)) by.set(key, { key, mon, kits: [], newer: false, groups: { new: [], imp: [], fix: [] }, items: [], seen: new Set() });
     const w = by.get(key);
     w.kits.push(e.v);
     if (mine && cmpVer(e.v, mine) > 0) w.newer = true;
     for (const p of e.prs || []) {
-      const k = kindOf(p); if (k === 'x') continue;
+      const k = p.h && p.top ? 'new' : kindOf(p); if (k === 'x') continue;   // a highlight is told as a New entry
       if (p.n && w.seen.has(p.n)) continue;
       if (p.n) w.seen.add(p.n);
-      w.groups[k].push({ n: p.n || null, t: p.t || '', s: p.s || '', v: e.v });
+      const it = { n: p.n || null, k, t: p.t || '', s: p.s || '', v: e.v, ...(p.h ? { h: p.h } : {}), ...(p.d ? { d: p.d } : {}), ...(p.h && p.top ? { top: p.top } : {}) };
+      w.groups[k].push(it); w.items.push(it);
     }
   }
   const out = [];
@@ -54,7 +59,16 @@ export function weeksOf(entries, now = Date.now(), mine = null) {
     if (!count) continue;
     const sorted = [...w.kits].sort(cmpVer);
     const name = !w.mon ? 'Date not recorded' : keyOf(w.mon) === keyOf(thisMon) ? 'This week' : keyOf(w.mon) === keyOf(lastMon) ? 'Last week' : 'Week of ' + dm(w.mon);
-    out.push({ key: w.key, name, range: w.mon ? rangeOf(w.mon) : '', kits: [sorted[0], sorted[sorted.length - 1]], newer: w.newer, groups: w.groups, count, mon: w.mon });
+    const items = w.items.map((it, i) => [it, i]).sort((a, b) => cmpVer(b[0].v, a[0].v) || a[1] - b[1]).map(([it]) => it);
+    const sum = items.filter((it) => it.top).slice(0, 3).map((it) => it.top);
+    out.push({ key: w.key, name, range: w.mon ? rangeOf(w.mon) : '', kits: [sorted[0], sorted[sorted.length - 1]], newer: w.newer, groups: w.groups, count, items, sum, mon: w.mon });
   }
   return out.sort((a, b) => (a.mon && b.mon ? b.mon - a.mon : a.mon ? -1 : b.mon ? 1 : 0)).map(({ mon, ...w }) => w);
 }
+
+/** Design E: the week's newest kit on its own, at version level, then the rest of the week as one flat list with the highlights first. */
+export function storiesOf(w) {
+  const kit = w && w.kits ? w.kits[1] : null, items = (w && w.items) || [];
+  const latest = items.filter((it) => it.v === kit), rest = items.filter((it) => it.v !== kit);
+  return { kit, latest, earlier: [...rest.filter((it) => it.top), ...rest.filter((it) => !it.top)] };
+}

package/workspace/public/premium-board.html

@@ -7,8 +7,8 @@
 <title>PMOS · Board</title>
 <!-- The premium Board in the Agreed design (initiative premium-agreed-design, B1 B2 B3 N1 N2). One toolbar and no page header; each initiative is a row
  across the six stages and two milestones, with progress toward its current output from Jira. It reads GET /api/board-premium. The floating place menu
- (pm/cozy-nav.js) replaces the rail on screen; the rail stays in the markup so premium-shell.js keeps its wiring. The Board has no chat: "Ask about this"
- sends the question to Home. -->
+ (pm/cozy-nav.js) replaces the rail on screen; the rail stays in the markup so premium-shell.js keeps its wiring. Discuss in chat on a panel opens Home's chat
+ about it in a panel on the Board (pm/page-chat.js); a phone goes to Home. -->
 <link rel="preload" href="/vendor/nunito-var.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="stylesheet" href="/pm/cozy.css" />
 <link rel="stylesheet" href="/pm/cozy-pick.css" />