create-pmos 0.510.0 → 0.512.0

package/workspace/public/pm/cozy-live-pill.js

@@ -15,6 +15,9 @@
  *   mountLivePill(doc = document, opts)   once per page, after mountNav: the pill lives inside #czNav, so it hides whenever the menu hides
  *     opts.go(item) → true    the page opens the item itself (Home: the session's chat, the meeting); else the row's link is followed
  *     opts.open() → id        the session open on this page now: its row is tinted
+ * Docking (batch 26 item 4): on a desktop the list has a grab bar on top. Drag it to the left or the right half of the window and the
+ * list docks on that side (above the pill, or at the window's right edge at the same height); a press or Enter on the bar moves it to the
+ * other side. The side is kept (localStorage 'cz-live-side'). A phone's sheet has none.
  * Reads GET /api/live every 10 s while the page is shown, and on the cz:live event (Home sends it after the PM opens or answers a
  * session); the recording comes from pm/rec-state.js. The recording's row has one icon-only Stop beside it (Wawan, 2026-11-03: finish
  * from anywhere): the first press asks "Press again", the second ends the meeting (rec-state.js stopPress). Nothing else is written.
@@ -32,13 +35,16 @@ const STOP = '<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="7" y="7" widt
 const CHECK = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>';
 const PHONE = '(max-width: 760px)';
 const mac = () => { try { return /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent || ''); } catch { return false; } };
+const SIDE = 'cz-live-side';
+const sideGet = () => { try { return localStorage.getItem(SIDE) === 'right' ? 'right' : 'left'; } catch { return 'left'; } };
+const sideSet = (v) => { try { if (v === 'right') localStorage.setItem(SIDE, 'right'); else localStorage.removeItem(SIDE); } catch { /* a private window */ } };
 const markHtml = (m, once) => (m === 'done' ? `<i class="lv-m done${once ? ' once' : ''}">${CHECK}</i>` : `<i class="lv-m ${m}${once ? ' once' : ''}"></i>`);
 
 export function mountLivePill(doc = document, opts = {}) {
   if (doc.getElementById('czLive')) return;
   if (!doc.querySelector(`link[href="${SHEET}"]`)) { const l = doc.createElement('link'); l.rel = 'stylesheet'; l.href = SHEET; doc.head.appendChild(l); }
   const L = { sessions: [], titles: {}, rec: null, open: false, shown: [], marks: new Map(), tick: null, tries: 0 };
-  let pill = null, tray = null, scrim = null;
+  let pill = null, tray = null, scrim = null, rowsEl = null, grabB = null;
   const phone = () => typeof matchMedia === 'function' && matchMedia(PHONE).matches;
   const place = () => {
     const nav = doc.getElementById('czNav');
@@ -48,6 +54,9 @@ export function mountLivePill(doc = document, opts = {}) {
     scrim = doc.createElement('div'); scrim.className = 'lv-scrim'; scrim.hidden = true;
     tray = doc.createElement('div'); tray.id = 'czLiveList'; tray.className = 'lv-tray'; tray.hidden = true;
     tray.setAttribute('role', 'dialog'); tray.setAttribute('aria-label', 'What you work on now');
+    tray.innerHTML = '<button type="button" class="lv-side"><i></i></button><div class="lv-rows"></div>';
+    grabB = tray.querySelector('.lv-side'); rowsEl = tray.querySelector('.lv-rows');
+    sideWire();
     nav.append(scrim, tray, pill);
     pill.addEventListener('click', () => set(!L.open));
     scrim.addEventListener('click', () => set(false));
@@ -113,7 +122,7 @@ export function mountLivePill(doc = document, opts = {}) {
     const h = pillHtml(now); if (pill.__h !== h) { pill.__h = h; pill.innerHTML = h; }
     if (L.open && !tray.querySelector('.lv-stop.armed, .lv-stop:disabled')) {   // a Stop waiting for its second press keeps the list as it is
       const f = doc.activeElement && tray.contains(doc.activeElement) ? doc.activeElement.dataset.lv : null;
-      tray.innerHTML = rowsHtml(list);
+      rowsEl.innerHTML = rowsHtml(list);
       if (f) { const a = [...tray.querySelectorAll('a[data-lv]')].find((n) => n.dataset.lv === f); if (a) a.focus(); }
       L.shown = list;
     }
@@ -127,7 +136,7 @@ export function mountLivePill(doc = document, opts = {}) {
     pill.setAttribute('aria-expanded', String(open)); pill.classList.toggle('open', open);
     tray.classList.toggle('sheet', open && phone());
     tray.hidden = !open; scrim.hidden = !(open && phone());
-    if (open) { L.shown = items(); L.marks = new Map(L.shown.map((x) => [x.id, x.mark])); tray.innerHTML = rowsHtml(L.shown); const a = tray.querySelector('a'); if (a) a.focus(); read(); }
+    if (open) { L.shown = items(); L.marks = new Map(L.shown.map((x) => [x.id, x.mark])); rowsEl.innerHTML = rowsHtml(L.shown); dockTray(); const a = tray.querySelector('a'); if (a) a.focus(); read(); }
     else { L.shown = []; if (tray.contains(doc.activeElement)) pill.focus(); }
     draw();
   }
@@ -137,6 +146,44 @@ export function mountLivePill(doc = document, opts = {}) {
     if ((down || e.key === 'ArrowUp') && n) { e.preventDefault(); rows[i < 0 ? (down ? 0 : n - 1) : (i + (down ? 1 : n - 1)) % n].focus(); }
     else if (/^[1-5]$/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) { const a = rows[Number(e.key) - 1]; if (a) { e.preventDefault(); a.click(); } }
   }
+  /* the side the list docks on (a desktop): left, above the pill (today), or right, at the window's right edge at the same height */
+  function dockTray(side = sideGet()) {
+    const right = side === 'right' && !phone();
+    tray.classList.toggle('lv-r', right);
+    tray.style.bottom = right ? Math.round(innerHeight - pill.getBoundingClientRect().top + 8) + 'px' : '';
+    grabB.setAttribute('aria-label', right ? 'Move this list to the left side' : 'Move this list to the right side');
+    grabB.title = 'Drag to the left or the right side';
+  }
+  function sideWire() {
+    let g = null;
+    grabB.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0 || phone()) return;
+      e.preventDefault(); grabB.setPointerCapture(e.pointerId);
+      g = { x0: e.clientX, on: false, r: tray.getBoundingClientRect() };
+    });
+    grabB.addEventListener('pointermove', (e) => {
+      if (!g) return;
+      const dx = e.clientX - g.x0;
+      if (!g.on && Math.abs(dx) < 8) return;
+      g.on = true; tray.classList.add('lv-moving');
+      tray.style.transform = `translateX(${Math.round(Math.max(-g.r.left + 8, Math.min(innerWidth - g.r.right - 8, dx)))}px)`;
+    });
+    const up = (e, ok) => {
+      if (!g) return;
+      const was = g; g = null;
+      tray.classList.remove('lv-moving'); tray.style.transform = '';
+      if (!was.on) return;
+      grabB.__drag = Date.now();   // the release is not also a press
+      if (ok) { const side = e.clientX > innerWidth / 2 ? 'right' : 'left'; sideSet(side); dockTray(side); }
+    };
+    grabB.addEventListener('pointerup', (e) => up(e, true));
+    grabB.addEventListener('pointercancel', (e) => up(e, false));
+    // a press (a mouse with no drag, Enter, Space): the other side
+    grabB.addEventListener('click', (e) => {
+      if (e.detail && grabB.__drag && Date.now() - grabB.__drag < 400) return;   // a key press (detail 0) always moves it
+      const side = sideGet() === 'right' ? 'left' : 'right'; sideSet(side); dockTray(side); grabB.focus();
+    });
+  }
   // the meeting clock ticks once a second while a recording runs; nothing else moves
   function tickRec(list) {
     const run = list.some((x) => x.kind === 'rec' && !x.paused);

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

@@ -47,6 +47,7 @@ body.cz-pn-ctl .hm-chat > .hm-reopen { display: none; }
 .cz-pn-menu button:hover { background: var(--cz-well); }
 .cz-pn-menu button[aria-checked="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .cz-pn-menu button:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
+.cz-pn-menu .cz-pn-sep { align-self: stretch; width: 1px; margin: 6px 2px; background: var(--cz-hair); }
 
 /* open beside (TbT5DragRow): the row follows the pointer, and the half it will take turns blue */
 .cz-pn-ghost { position: fixed; z-index: 92; pointer-events: none; max-width: 260px; padding: 10px 14px; border-radius: 14px; background: var(--cz-card); color: var(--cz-ink); box-shadow: var(--cz-sheet); font: 600 var(--fs-3, 14px)/1.25 var(--cz-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -73,7 +74,15 @@ body.cz-pn-dragrow, body.cz-pn-dragrow * { user-select: none !important; cursor:
   body.cz-pn-page .cz-pn-div { margin: 0 -11px 0 11px; position: sticky; top: 16px; height: calc(100vh - 32px); align-self: flex-start; }
   body.cz-pn-page .cz-vw.cz-pn-over { position: fixed !important; top: 16px; right: 16px; bottom: 16px; height: auto; z-index: 70; }
   body.cz-pn-page > main.cz-pn-away { display: none !important; }
+  /* docked on the left (dock side): it slides over on the left too */
+  body.cz-pn-page .cz-vw.cz-pn-over.cz-pn-left { right: auto; left: 16px; animation-name: cz-pn-inl; }
+  /* a Viewer's header is its handle for docking: the header shows it can move */
+  body.cz-pn-page .cz-vw .cz-vw-hd { cursor: grab; }
+  body.cz-pn-page .cz-vw .cz-vw-hd :is(button, input, a):not([data-cz-vw-rn]) { cursor: pointer; }
+  body.cz-pn-page .cz-vw .cz-vw-hd [data-cz-vw-rn] { cursor: text; }
+  .cz-vw.cz-pn-docking { opacity: .6; }
 }
+@keyframes cz-pn-inl { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }
 
 @media (prefers-reduced-motion: reduce) { .cz-pn-over { animation: none; } .cz-pn-shut { transition: none; } }
 /* a phone keeps today's one panel: nothing here applies */

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

@@ -3,6 +3,8 @@
  *               (this device), Product (which products Home reads: the Products card), Your day (when the end-of-day card shows:
  *               time.workEnd, POST /api/settings), Your impact (impact.on, POST /api/settings; canvas GmP1Switch, batch 16 item 7: the one switch
  *               for Adler's leaf, the impact log and the weekly check; the page hears `pmos:impact`), Agents write to Jira (fixed: only after Commit)
+ *   Claude      the Claude profile, the API key, and Sharpen prompts: suggestions after a reply, Sharpen as I type, the style and Your own rules
+ *               (GET/POST /api/next-prompt/prefs; batch 26 item 2)
  *   Claude’s checks  Grill by itself (Full, Only at stage exits, Off) and the monthly credit for checks with what this month used (grill.mode,
  *               grill.cap, POST /api/settings; GET /api/grill; canvas GrillEntry). At the cap Claude pauses and says so once here.
  *   Jev and Laya  the TypeSafe key, Laya on this computer and the per-repository switches (pm/cozy-jl.js; canvas JlA1Empty–JlA4Phone)
@@ -17,8 +19,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 +36,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 +47,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 +214,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. */
@@ -244,7 +264,35 @@ function claudeSec() {
   const keyRight = `<span class="ev-dr-pl"><label class="ev-vh" for="evKey">Anthropic API key</label><input id="evKey" class="ev-inp" type="password" autocomplete="off" spellcheck="false" placeholder="${k.present ? 'Replace the key' : 'sk-ant-\u2026'}" data-ev-key><button type="button" class="ev-btn sm pri" data-ev-keysave>Save</button>${k.source === 'settings' ? '<button type="button" class="ev-btn sm" data-ev-keyclear>Remove</button>' : ''}</span>`;
   return '<h4>Claude login and profile</h4><div data-claude-setup></div>'
     + trow('API key', keySub, keyRight)
-    + (k.present && C.off ? trow('Runs on the API', 'Off: PMOS_GRILL_API is off in the environment.', '<span class="ev-pill">Off</span>') : '');
+    + (k.present && C.off ? trow('Runs on the API', 'Off: PMOS_GRILL_API is off in the environment.', '<span class="ev-pill">Off</span>') : '')
+    + sharpenRows(k.present);
+}
+/* Settings › Claude › Sharpen prompts (batch 26 item 2; pm/next-prompt-ui.js, lib/routes-next-prompt.js): the suggestions after a reply, Sharpen as I
+ * type ('auto' is on when Claude runs on the API key, where a sharpen takes about 2 s), the style, and the PM's own rules for Your own.
+ * The same style and switch are in the chat's Sharper card menu; a save here tells the chat (the event pmos:prompt-prefs). */
+const NPK = { 'prompt.next': ['nextSet', 'next'], 'prompt.sharpen': ['sharpenSet', 'sharpen'], 'prompt.style': ['style', 'style'], 'prompt.rules': ['rulesText', 'rules'] };   // row key → [GET field, POST key]
+const setVal = (k, d) => { const v = T.np ? T.np[NPK[k][0]] : undefined; return v !== undefined && v !== null ? v : d; };
+function sharpenRows(api) {
+  const next = setVal('prompt.next', true) !== false, sh = setVal('prompt.sharpen', 'auto'), style = setVal('prompt.style', 'engineer'), rules = String(setVal('prompt.rules', '') || '');
+  const on = sh === 'on' || (sh === 'auto' && api);
+  const shSub = sh === 'auto' ? (api ? 'On, because Claude runs on your API key: the sharper version shows in about 2 seconds.' : 'Off for now: without an API key each one takes 10 seconds or more. Turn it on to use it anyway.')
+    : on ? 'When you pause on a rough prompt, a sharper version shows above the box.' : 'Off. No spinner and no Sharper card.';
+  const styleSub = style === 'polish' ? 'Clearer and shorter, your meaning kept.' : style === 'own' ? (rules.trim() ? 'Your rules below.' : 'Write your rules below first.') : 'Builds the best prompt for the job.';
+  return '<h4>Sharpen prompts</h4>'
+    + trow('Suggest the next prompt', 'After a reply, up to two prompts above the box. A tap puts one in the box. Nothing sends.', sw(next, 'data-ev-np="prompt.next"', 'Suggest the next prompt'))
+    + trow('Sharpen as I type', shSub, sw(on, 'data-ev-np="prompt.sharpen"', 'Sharpen as I type'))
+    + trow('Sharpen as', styleSub, seg('Sharpen as', 'prompt.style', style, [['polish', 'Polish'], ['engineer', 'Prompt engineer'], ['own', 'Your own']]))
+    + `<div class="ev-trow"><div class="ev-tx"><label for="evRules"><b>Your own rules</b></label><p class="ev-small ev-mut">For Your own. For example: short, always name the initiative, ask for sources.</p>`
+    + `<textarea id="evRules" class="ev-inp ev-rules" rows="3" maxlength="1000" spellcheck="true">${esc(rules)}</textarea></div><button type="button" class="ev-btn sm pri" data-ev-rulesave>Save</button></div>`;
+}
+async function savePrompt(key, value, said) {
+  const r = await pmPost('/api/next-prompt/prefs', { key: NPK[key][1], value });
+  if (r && r.ok) {
+    T.np = { ...(T.np || {}), [NPK[key][0]]: value };
+    document.dispatchEvent(new CustomEvent('pmos:prompt-prefs', { detail: { key, value } }));
+  }
+  T.msg = r && r.ok ? said : (r && r.error) || 'Not saved.';
+  draw();
 }
 /* Settings > Claude's checks (GrillEntry): Claude grills by itself, so this is the only control: when, and how much it may spend a month */
 const CAPS = [5, 10, 20, 50];
@@ -315,6 +363,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.')) {
@@ -324,6 +373,10 @@ async function press(e) {
     T.msg = r && r.ok ? (key === 'grill.mode' ? (value === 'off' ? 'Saved. Claude no longer grills by itself.' : value === 'exits' ? 'Saved. Claude grills only before a stage ends.' : 'Saved. Claude grills by itself when it matters.') : 'Saved. Claude’s checks spend at most ' + usd(value) + ' a month.') : (r && r.error) || 'Not saved.';
     draw(); return;
   }
+  if (t.dataset.evSeg === 'prompt.style') { await savePrompt('prompt.style', t.dataset.v, 'Saved. Sharper prompts follow this style.'); return; }
+  if (t.dataset.evNp === 'prompt.next') { const on = setVal('prompt.next', true) === false; await savePrompt('prompt.next', on, on ? 'Saved. Claude suggests the next prompt after a reply.' : 'Saved. No suggestions after a reply.'); return; }
+  if (t.dataset.evNp === 'prompt.sharpen') { const api = !!(T.cl && T.cl.key && T.cl.key.present), sh = setVal('prompt.sharpen', 'auto'), was = sh === 'on' || (sh === 'auto' && api); await savePrompt('prompt.sharpen', was ? 'off' : 'on', was ? 'Saved. Sharpen as I type is off.' : 'Saved. Sharpen as I type is on.'); return; }
+  if ('evRulesave' in t.dataset) { const ta = T.el.querySelector('#evRules'); await savePrompt('prompt.rules', ta ? ta.value.slice(0, 1000) : '', 'Saved. Your own rules are used when Sharpen as is Your own.'); return; }
   if (t.dataset.evSeg && t.dataset.evSeg.startsWith('adler.')) { const r = await AD.savePref(pmPost, t.dataset.evSeg, t.dataset.v); T.msg = r && r.ok ? 'Saved.' : (r && r.error) || 'Not saved.'; draw(); return; }
   if (t.dataset.evDress) {
     const a = t.dataset.evDress;
@@ -440,6 +493,7 @@ async function readAgain(id) {
 async function load() {
   readFresh();
   pmGet('/api/grill').then((g) => { T.gr = g && g.ok ? g : { ok: false, error: (g && g.error) || '' }; draw(); }).catch(() => { T.gr = { ok: false }; draw(); });
+  pmGet('/api/next-prompt/prefs').then((n) => { T.np = n && n.ok ? n : null; draw(); }).catch(() => { T.np = null; });
   pmGet('/api/profiles').then(async (pr) => { const k = await pmGet('/api/anthropic'); T.cl = { profiles: pr && Array.isArray(pr.profiles) ? pr.profiles : [], prefs: (pr && pr.prefs) || {}, perr: pr && pr.ok === false ? (pr.error || 'the server did not answer') : '', key: k && k.ok ? k.key : { present: false, source: null }, off: !!(k && k.off) }; draw(); }).catch(() => { T.cl = { profiles: [], prefs: {}, perr: 'the server did not answer', key: { present: false, source: null } }; draw(); });
   const [w, p, s, b] = await Promise.all([pmGet('/api/workspaces'), pmGet('/api/proactive/settings'), pmGet('/api/settings'), pmGet('/api/briefing-premium')]);
   T.ws = w && Array.isArray(w.workspaces) ? w.workspaces : [];
@@ -458,7 +512,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; T.np = 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;