create-pmos 0.510.0 → 0.511.0

package/workspace/ev-everywhere-test.js

@@ -150,20 +150,20 @@ const put = (root, rel, text) => { fs.mkdirSync(path.dirname(path.join(root, rel
     const hits = { check: 0, update: 0, upgrade: 0 };
     const day = (n) => new Date(Date.now() - n * 864e5).toISOString();
     await pg.route('**/api/kit/status*', (r) => r.fulfill({ contentType: 'application/json', body: JSON.stringify({ ok: true, app: { version: '0.442.0' }, kit: { present: true, version: '0.442.0' }, latest: '0.451.0', appBehind: true, kitBehind: true, checkDaily: true,
-      changes: [{ v: '0.451.0', at: day(0), prs: [{ n: 1098, t: 'Claude settings', s: 'Settings has a Claude section.', k: 'new' }, { n: 1100, t: 'Hide linked worktrees', s: 'They no longer show as repositories.', k: 'fix' }] }, { v: '0.441.0', at: day(8), prs: [{ n: 1078, t: 'Ready-made dashboards', s: 'Every program has one.', k: 'new' }] }] }) }));
+      changes: [{ v: '0.451.0', at: day(0), prs: [{ n: 1098, t: 'Claude settings', s: 'Settings has a Claude section.', k: 'imp', h: 'Claude in Settings', d: 'Claude had no settings of its own. Now Settings has a Claude section.', top: 'Claude has its own place in Settings.' }, { n: 1100, t: 'Hide linked worktrees', s: 'They no longer show as repositories.', k: 'fix' }] }, { v: '0.441.0', at: day(8), prs: [{ n: 1078, t: 'Ready-made dashboards', s: 'Every program has one.', k: 'new' }] }] }) }));
     await pg.route('**/api/kit/check', (r) => { hits.check++; r.fulfill({ contentType: 'application/json', body: JSON.stringify({ ok: true, latest: '0.451.0', appBehind: true, kitBehind: true, latestChanges: [] }) }); });
     await pg.route('**/api/kit/update', (r) => { hits.update++; r.fulfill({ contentType: 'application/json', body: JSON.stringify({ ok: true }) }); });
     await pg.route('**/api/kit/upgrade-app', (r) => { hits.upgrade++; r.fulfill({ contentType: 'application/json', body: JSON.stringify({ ok: false, error: 'stubbed: not installing' }) }); });
     await pg.keyboard.press('Escape'); await until(() => pg.evaluate(() => !document.querySelector('#evSettings:not([hidden])')));
     await menu(pg); await pg.click('#czMenu [data-cz-settings]'); await pg.waitForSelector('#evSettings:not([hidden])');   // reopen: the routes above answer the status read
     await pg.click('#evSettings [data-ev-sec="updates"]');
-    const wk = await until(() => pg.evaluate(() => { const d = document.querySelector('#evSettings'); const h = d.querySelector('.ev-wkh'); return h ? { head: h.textContent, groups: [...d.querySelectorAll('.ev-wk > .ev-wkm .ev-wgl')].map((x) => x.textContent), t: d.querySelector('.ev-wk > .ev-wkm').textContent, arc: !!d.querySelector('[data-ev-arc][aria-expanded="false"]'), rows: d.querySelectorAll('[data-ev-wk]').length } : null; }), 20000);
+    const wk = await until(() => pg.evaluate(() => { const d = document.querySelector('#evSettings'); const h = d.querySelector('.ev-wkh'); return h ? { head: h.textContent, sum: [...d.querySelectorAll('.ev-wk > .ev-sum p')].map((x) => x.textContent), kit: (d.querySelector('.ev-wk .ev-rv') || {}).textContent || '', dots: [...d.querySelectorAll('.ev-wk > .ev-rel .ev-dot')].map((x) => x.title), t: d.querySelector('.ev-wk').textContent, arc: !!d.querySelector('[data-ev-arc][aria-expanded="false"]'), rows: d.querySelectorAll('[data-ev-wk]').length } : null; }), 20000);
     const first = await (async () => { await sleep(800); return hits.check; })();
     await pg.click('#evSettings [data-ev-sec="general"]'); await pg.click('#evSettings [data-ev-sec="updates"]'); await sleep(500);
     ok('W2 opening Updates asks for the latest kit by itself (one read for each workspace), and only once while Settings stays open', first >= 1 && hits.check === first, JSON.stringify(hits));
-    ok('W2 what\'s new shows this week open: New and Fixed groups, no empty Improved group, the earlier week folded in a closed Archive', !!wk && /^This week/.test(wk.head) && wk.groups.join() === 'New,Fixed' && /Claude settings\./.test(wk.t) && /#1100/.test(wk.t) && wk.arc && wk.rows === 0, JSON.stringify(wk));
+    ok('W2 design E: this week opens with its summary line, the newest kit at version level, each change a story with a New or Fixed dot, no PR numbers, the earlier week folded in a closed Archive', !!wk && /^This week/.test(wk.head) && /2 changes/.test(wk.head) && wk.sum.join() === 'Claude has its own place in Settings.' && /^0\.451\.0latest/.test(wk.kit) && wk.dots.join() === 'New,Fixed' && /Claude in Settings/.test(wk.t) && /Now Settings has a Claude section/.test(wk.t) && !/#1100|#1098/.test(wk.t) && wk.arc && wk.rows === 0, JSON.stringify(wk));
     await pg.click('#evSettings [data-ev-arc]'); await pg.click('#evSettings [data-ev-wk]');
-    ok('W2 the Archive opens to the earlier weeks, and a week opens on press', !!(await until(() => pg.evaluate(() => /Ready-made dashboards\./.test(document.querySelector('#evSettings').textContent)))));
+    ok('W2 the Archive opens to the earlier weeks, and a week opens on press', !!(await until(() => pg.evaluate(() => /Ready-made dashboards/.test(document.querySelector('#evSettings').textContent)))));
     await snap(pg, 'updates-1440-light');
     await pg.click('#evSettings [data-ev-upd="update"]');
     await until(() => hits.upgrade > 0, 8000);

package/workspace/guide/home.md

@@ -160,7 +160,8 @@ Some features are still not designed. Home keeps each one usable as a plain card
 
 ## The other pages
 
-- **Board.** New initiative takes links and files, starts in Triage and asks only the questions that the material does not answer. **Later** keeps the questions as the next step. The Board also has List, By stage and a span picker. Documents are in each initiative's Documents fold and in Search. On a phone, **Metrics** and **Cancelled and archived** are in every view.
+- **Board.** New initiative takes links and files, starts in Triage and asks only the questions that the material does not answer. **Later** keeps the questions as the next step. The Board also has List, By stage and a span picker. Documents are in each initiative's Documents fold and in Search. On a phone, **Metrics** and **Cancelled and archived** are in every view. On a computer, press **Discuss in chat** on an initiative's or a program's panel to open the chat about it in a panel on the Board. It is the same conversation as on Home. At 1600 px and wider the chat opens beside the panel; on a laptop it slides over it.
+- **Dock a panel left or right (Board and Intelligence).** Drag a panel's header to the left or the right half of the window, and drop it when that half turns blue. With the keyboard, press **Arrange** in the panel's header, then **Dock on the left** or **Dock on the right**. Each kind of panel stays on its side after a reload. The divider resizes the panel on either side. The Live pill's list has a grab bar on top: drag it to the left or the right side, or press it to move the list to the other side.
 - **Meetings.** Replay with screen captures and kept points, Focus, a presenter view, Add material, the After view, a Day, Week and Month calendar, and Notes.
 - **Reports.** The Brief, the report states, a document reader and a live page reader.
 - **Insights.** A goal's detail with its chart and readings, targets on each tile, Library flows and a Portfolio view.

package/workspace/guide/initiative-boards.md

@@ -2,7 +2,7 @@
 type: Guide
 title: "Initiatives on the console: Portfolio, boards and workflows"
 description: "How to use the Initiatives tab of the console page (/): the Portfolio of boards, a board and its nine tabs, an initiative with its own workflow and stage records, and the Build and deliver setting."
-timestamp: 2026-11-02
+timestamp: 2026-11-03
 ---
 
 # Initiatives on the console: Portfolio, boards and workflows
@@ -58,6 +58,8 @@ Each initiative has a **stage** and a **status**. The stage is the step in its o
 | Done | It reached the end of its workflow, or it was accepted or closed. |
 | Cancelled | You stopped it. It is counted as cancelled, not done. |
 
+An initiative in the last stage of its workflow (for example **Closed**, or a stage in the Done category) is never Late or At risk. On the Timeline its bar ends at its own end date. It has no line to Today, no late dot and no late milestone.
+
 A cancelled initiative is hidden from every view. The list footer says how many are hidden, for example "1 cancelled hidden". Press it to see them, or pick Cancelled in the Status filter.
 
 Press **…** on a row to open its menu. It is the initiative's short menu: Split, Merge into, Program, Copy, The record and **Delete** (see [Home](home.md#an-initiative)). Press the stage name on the initiative's stage card for the stage picker:

package/workspace/guide/settings.md

@@ -67,12 +67,16 @@ Open **Updates**. PMOS asks the npm registry for the latest version at once, and
 
 ### What's new
 
-Under the update card, **Updates** shows what changed in the published kits. **This week** is open: it is the one you need. A week runs Monday to Sunday. Every earlier week, last week included, is folded into **Archive**. Press **Archive** to list the earlier weeks (**Week of** a date), each with its counts, and press a week to read it. When there is nothing for this week yet, the newest week with changes is the open one.
-
-- Each week has up to three groups: **New** (a feature), **Improved** (a faster or better thing that already existed) and **Fixed** (a problem that is gone). A group with nothing in it is not shown, and a week with nothing to show is not listed.
-- Each line is a bold name and one sentence, copied from the pull request that made the change, with its number at the end. When the name and the sentence say the same thing, the line shows it once. Work that you cannot see in PMOS (notes, tests, run logs) is left out, and so are notes for the people who build PMOS, such as "[skip publish]" or "(batch 25 item 11)".
+Under the update card, **Updates** shows what changed in the published kits. **This week** is open: it is the one you need. A week runs Monday to Sunday. The heading gives the dates and the number of changes. When there is nothing for this week yet, the newest week with changes is the open one.
+
+- **Summary.** Up to three lines on top say the most important changes of the week. Claude writes them when it makes the change.
+- **The newest kit** comes next, with its version and **latest** when it is the newest published kit.
+- **Earlier this week** lists the other changes of the week as one list, the most important ones first. The list shows seven changes; press **N more** to show the rest.
+- Each change is a short story: a plain name, then what was missing and what is different now. Claude writes it for you. A blue dot marks **New** and an amber dot marks **Fixed**. A change with no dot is **Improved**. The most important changes always show as **New**.
+- There are no pull request numbers and no kit ranges. Work that you cannot see in PMOS (notes, tests, run logs) is left out.
+- **Archive** holds every earlier week, last week included. Press **Archive** to list them, then press a week to read it.
 - A week shows **Ready to install** when one of its kits is newer than the version you run.
-- A kit published before PMOS kept the kind of each change has no kind. Its title decides: a word such as "fix" or "no longer" puts it under **Fixed**, and anything else under **Improved**.
+- A change published before Claude wrote stories shows the pull request's title and its sentence instead.
 - **What's new** is not a section of its own any more. The button on the update card in **General** opens **Updates**.
 
 ## Claude: the profile and the API key

package/workspace/lib/board-premium.js

@@ -275,10 +275,11 @@ function rowOf(r, wf, today) {
     ['Progress', pctOf(r.progress) != null ? pctOf(r.progress) + '%' : ''], ['Starts', r.start ? shortDate(r.start) : ''], ['Ends', r.end ? shortDate(r.end) : ''],
     ['Last changed', r.updated ? shortDate(String(r.updated).slice(0, 10)) : ''], ['Possible duplicate of', r.dupOf], ['Warnings', (r.warnings || []).map((w) => (typeof w === 'string' ? w : w && (w.text || w.message || w.id)) || '').filter(Boolean).join('; ')],
   ].filter((x) => x[1]);
-  const over = r.end && today && days(r.end, today) > 0 && r.status !== 'done';
+  // a closed initiative (its workflow's terminal stage, lib/routes-boards.js closedOf) is never over: no line to Today, no days over (batch 26 item 5)
+  const over = r.end && today && days(r.end, today) > 0 && r.status !== 'done' && !r.closed;
   return {
     key: 'board:' + r.id, id: r.id, title: clip(r.title, 140), sub: [r.owner || 'No owner', r.lane].filter(Boolean).join(' · '),
-    status: r.status || null, statusLabel: r.status && r.status !== 'on track' ? (STATUS_LABEL[r.status] || r.status) : null, bad, late: r.status === 'late',
+    status: r.status || null, statusLabel: r.status && r.status !== 'on track' ? (STATUS_LABEL[r.status] || r.status) : null, bad, late: r.status === 'late', closed: !!r.closed,
     stage: r.stage || null, cat: r.cat || null, stageNote: r.stageSource === 'derived' ? 'derived' : null,
     seg: names.map((n, j) => (j < cur ? 'p' : j === cur ? 'n' : '')), progress: pctOf(r.progress),
     finish: r.end ? shortDate(r.end) : 'Not planned', over: !!over, start: r.start || null, end: r.end || null,

package/workspace/lib/kit-update.js

@@ -125,7 +125,8 @@ const npxArgs = (src, version, rest) => (src && src.kind === 'local'
 /** One changelog entry as the page may show it, or null: a version, a time, and PRs with a number, a summary, from
  *  kit-changelog format 2 a title, and from format 3 a kind (k: new, imp, fix or x), which decides New, Improved or Fixed.
  *  Kits published before kit-changelog dropped "[skip publish]" kept it in the text and lost the PR number to an inline
- *  "(#123)"; both are repaired here, so every line ends in one muted number. */
+ *  "(#123)"; both are repaired here, so every line ends in one muted number. From format 4 a PR may carry Claude's story for the
+ *  PM (h: a plain title, d: what was missing and what is different now, top: a summary line that marks a highlight). */
 const KINDS = new Set(['new', 'imp', 'fix', 'x']);
 const SKIP_TAG = /\s*\[(?:skip|no)[ -][a-z]+\]/gi;
 const PR_REF = /\s*\(#(\d+)\)/;
@@ -135,7 +136,9 @@ function cleanPr(p) {
   const t = typeof p.t === 'string' ? p.t : '', ref = PR_REF.exec(t) || PR_REF.exec(p.s);
   const n = Number.isInteger(p.n) ? p.n : ref ? Number(ref[1]) : null;
   const tt = tidy(t).slice(0, 200), s = tidy(p.s).slice(0, 400);
-  return { n, ...(tt ? { t: tt } : {}), s: s || tt, ...(KINDS.has(p.k) ? { k: p.k } : {}) };
+  const str = (x, max) => (typeof x === 'string' ? x.replace(/\s+/g, ' ').trim().slice(0, max) : '');
+  const h = str(p.h, 120), d = h ? str(p.d, 400) : '', top = h ? str(p.top, 200) : '';
+  return { n, ...(tt ? { t: tt } : {}), s: s || tt, ...(KINDS.has(p.k) ? { k: p.k } : {}), ...(h ? { h } : {}), ...(d ? { d } : {}), ...(top ? { top } : {}) };
 }
 function cleanEntry(e) {
   if (!e || !validVersion(e.v)) return null;

package/workspace/lib/routes-boards.js

@@ -477,6 +477,16 @@ const gapFields = (spans) => ({ gaps: holdSpans.planGaps(spans, 14), stageSpans:
 const minDay = (a, b) => (!a ? b || null : !b ? a : a < b ? a : b);
 const maxDay = (a, b) => (!a ? b || null : !b ? a : a > b ? a : b);
 
+/** batch 26 item 5: whether an initiative stands in its workflow's terminal stage, read from the workflow, never from a list of names. On a
+ *  D99 workflow: the stage is in the Done category, or it is the workflow's last stage. On a board's own column workflow: its last column. */
+function closedOf(row, wx) {
+  if (wx.own) {
+    const st = wx.stages.find((x) => x.key === wx.stage);
+    return !!st && (st.cat === 'done' || (st.of > 1 && st.n === st.of));
+  }
+  const wf = Array.isArray(row.workflow) ? row.workflow : [];
+  return wf.length > 1 && wf.findIndex((x) => x.name === row.stage) === wf.length - 1;
+}
 function boardRow(board, base, folded, lib) {
   const s = B.stageOf(board, base.id, base.reading, folded);
   const ts = taskSpanOf(folded, base.id);   // the bar covers the breakdown items and the tasks
@@ -496,6 +506,10 @@ function boardRow(board, base, folded, lib) {
   const wx = workflowRowOf(board, base, folded, lib || libOf(folded), s.stage);
   Object.assign(row, wfRowFields(wx));
   if (wx.own) { row.stage = (wx.stages.find((x) => x.key === wx.stage) || {}).name || row.stage; row.cat = null; row.stageSource = 'move'; }
+  // batch 26 item 5: an initiative in its workflow's terminal stage is finished, so it is never late or at risk. Every surface (the Board's
+  // tone, dot, late line and edge tabs, Home, Kanban, the program rollups) reads the status this leaves and row.closed.
+  row.closed = closedOf(row, wx);
+  if (row.closed && (row.status === 'late' || row.status === 'at risk')) row.status = 'on track';
   const w = [];
   if (s.source === 'move') {
     const last = [...folded.moves].reverse().find((m) => m.board === board.id && m.id === base.id);
@@ -1822,4 +1836,4 @@ function meetingBoards(ctx) {
   return { list, detail };
 }
 
-module.exports = { prefixes: ['/api/boards'], handle, tasksOfIni, postFrame, needRows, itemsOf, readLedger, foldOf, epicsOf, rowsOfBoard, invalidateRows: (w) => { rowsLib.invalidate(w.root); rowCache.delete(w.root); }, move, switchWorkflow, taskState, taskAdd, taskEdit, writeAs, taskDelete, taskRestore, initiativeWorkflow, seedInitiative, stageTasks, boardIndex, appendScanAsk, scanDeclineSignal, createAndPlace, startOnDefault, ledgerFile, append, frameFor, boardIdOf, meetingBoards, boardsOf, baseRows, boardRow, taskSpanOf, workflowRowOf, foldOf, portfolio, SELF_REFUSAL, NO_STATE };
+module.exports = { prefixes: ['/api/boards'], handle, tasksOfIni, postFrame, needRows, itemsOf, readLedger, foldOf, epicsOf, rowsOfBoard, invalidateRows: (w) => { rowsLib.invalidate(w.root); rowCache.delete(w.root); }, move, switchWorkflow, taskState, taskAdd, taskEdit, writeAs, taskDelete, taskRestore, initiativeWorkflow, seedInitiative, stageTasks, boardIndex, appendScanAsk, scanDeclineSignal, createAndPlace, startOnDefault, ledgerFile, append, frameFor, boardIdOf, meetingBoards, boardsOf, baseRows, boardRow, taskSpanOf, workflowRowOf, closedOf, foldOf, portfolio, SELF_REFUSAL, NO_STATE };

package/workspace/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pmos-workspace",
-  "version": "0.510.0",
+  "version": "0.511.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pmos-workspace",
-      "version": "0.510.0",
+      "version": "0.511.0",
       "license": "MIT",
       "dependencies": {
         "@anthropic-ai/sdk": "^1.3.0",

package/workspace/package.json

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

package/workspace/panels-test.js

@@ -20,6 +20,9 @@
  *   over at 1440), the active edge, a plain click replaces the Viewer used last   P5 a drop on a Viewer replaces it   P6 the divider to the
  *   left edge: full screen; Split brings the page back; to the right edge: the Viewer closes   P7 a reload reopens nothing; the share holds;
  *   Home resets it   P8 1920: a drop at the far edge opens beside, three panels   P9 Intelligence: split, ⌘-click   P10 a phone as today
+ *   P11 dock a Viewer on the left by its header, the divider on that side, kept after a reload, ⧉'s Dock on the right by the keyboard
+ *   P12 Discuss in chat opens Home's chat in a panel on the Board (slides over at 1440, beside at 1920), with the same conversation key
+ *   P13 the Live pill's list docks on the right by its grab bar, and a press moves it back (batch 26 item 4)
  * Screenshots go to PMOS_SHOTS when it is set. Every wait polls the page. */
 const fs = require('fs');
 const path = require('path');
@@ -278,7 +281,7 @@ process.on('unhandledRejection', (e) => { console.error(e); finish(1); });
   await Bd.page.click('#czViewer [data-cz-vw="place"]');
   await until(() => Bd.page.$('.cz-pn-menu'));
   const m3 = await Bd.page.evaluate(() => [...document.querySelectorAll('.cz-pn-menu button')].map((b) => b.getAttribute('aria-label') + (b.getAttribute('aria-checked') === 'true' ? '*' : '')).join('|'));
-  ok('P3 ⧉ opens Full screen, Split, Slide over; Split is checked', m3 === 'Full screen|Split*|Slide over', m3);
+  ok('P3 ⧉ opens Full screen, Split, Slide over, then Dock on the left and Dock on the right (right checked); Split is checked', m3 === 'Full screen|Split*|Slide over|Dock on the left|Dock on the right*', m3);
   await Bd.page.click('.cz-pn-menu [data-cz-pn-place="over"]');
   const b3 = await until(() => pl(Bd.page).then((l) => (P(l, 'v0').mode === 'over' ? l : null)), 3000);
   ok('P3 Slide over: the Viewer floats 560 px at the right with a grab bar; the page is whole again, with no divider', !!b3 && P(b3, 'v0').box.w === 560 && P(b3, 'page').box.w > 1300 && b3.divs.length === 0 && !b3.narrow
@@ -347,6 +350,70 @@ process.on('unhandledRejection', (e) => { console.error(e); finish(1); });
   await shot(Bw.page, 'p8-board-three-1920');
   ok('0 no page error on the Board at 1920', Bw.errors.length === 0, Bw.errors.join(' | '));
   await Bw.close();
+  /* ── batch 26 item 4: dock a panel on the left or the right; the chat as a panel on the Board ── */
+  const ctxD = await browser.newContext({ viewport: { width: 1440, height: 900 } });
+  const threads = [];
+  await ctxD.route(/\/api\/briefing-premium\/thread\?/, (r) => { threads.push(new URL(r.request().url()).searchParams.get('key')); return r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, session: null, history: { messages: [] } }) }); });
+  const Dd = await open({ ctx: ctxD, at: '/premium-board.html', ready: boardReady });
+  const KD = await keys(Dd.page);
+  await Dd.page.click(nm(KD[0]));
+  await until(() => pl(Dd.page).then((l) => (P(l, 'v0') && P(l, 'v0').box.shown && l.divs.length === 1 ? l : null)));
+  let z11 = null;
+  await drag(Dd.page, '#czViewer .cz-vw-tile', 200, 400, { hold: async () => { z11 = await Dd.page.evaluate(() => { const z = document.querySelector('.cz-pn-drop:not([hidden])'); if (!z) return null; const r = z.getBoundingClientRect(); return { side: z.dataset.side, l: Math.round(r.left), w: Math.round(r.width) }; }); await shot(Dd.page, 'p11-dock-drag-1440'); } });
+  const d11 = await until(() => pl(Dd.page).then((l) => (P(l, 'v0').box.r < P(l, 'page').box.l ? l : null)), 3000);
+  const side11 = await Dd.page.evaluate(() => { try { return JSON.parse(localStorage.getItem('cz-pn-side')); } catch { return null; } });
+  ok('P11 a drag of the Viewer\'s header over the left half turns that half blue', !!z11 && z11.side === 'left' && z11.l <= 20 && z11.w > 600, JSON.stringify(z11));
+  ok('P11 the drop docks it on the left: the Viewer, the divider, then the page; the title is not renamed', !!d11 && d11.divs.length === 1 && P(d11, 'v0').box.r <= d11.divs[0].l + 12 && d11.divs[0].r <= P(d11, 'page').box.l + 12 && !(await Dd.page.$('#czViewer [data-cz-vw-ren]')), JSON.stringify(d11 || await pl(Dd.page)));
+  ok('P11 the side is kept for its kind (cz-pn-side)', !!side11 && Object.values(side11).includes('left'), JSON.stringify(side11));
+  await shot(Dd.page, 'p11-docked-left-1440');
+  { const d = await divAt(Dd.page); const w0 = P(await pl(Dd.page), 'v0').box.w; await drag(Dd.page, d, d.x + 80, d.y); const w1 = await until(() => pl(Dd.page).then((l) => (P(l, 'v0').box.w > w0 + 40 ? P(l, 'v0').box.w : null)), 3000); ok('P11 the divider resizes it on the left: a drag to the right widens the Viewer', !!w1, JSON.stringify([w0, w1])); }
+  await Dd.page.reload();
+  await until(() => Dd.page.evaluate(boardReady), 20000);
+  await Dd.page.click(nm(KD[1]));
+  const d11b = await until(() => pl(Dd.page).then((l) => (P(l, 'v0') && P(l, 'v0').box.shown && l.divs.length === 1 ? l : null)), 4000);
+  ok('P11 after a reload an initiative opens on the left again', !!d11b && P(d11b, 'v0').box.r < P(d11b, 'page').box.l, JSON.stringify(d11b));
+  await Dd.page.click('#czViewer [data-cz-vw="place"]');
+  await until(() => Dd.page.$('.cz-pn-menu'));
+  await Dd.page.focus('.cz-pn-menu [data-cz-pn-dock="right"]'); await Dd.page.keyboard.press('Enter');
+  const d11c = await until(() => pl(Dd.page).then((l) => (P(l, 'v0').box.l > P(l, 'page').box.r ? l : null)), 3000);
+  ok('P11 ⧉ › Dock on the right (an icon with its aria-label, by the keyboard) docks it back on the right', !!d11c && !(await Dd.page.evaluate(() => localStorage.getItem('cz-pn-side'))), JSON.stringify(d11c));
+  // the chat
+  const dh = await Dd.page.evaluate(() => [...document.querySelectorAll('#czViewer .cz-vw-hd [data-cz-vw]')].map((b) => b.dataset.czVw));
+  ok('P12 the initiative panel has Discuss in chat', dh.includes('discuss'), JSON.stringify(dh));
+  const url0 = Dd.page.url();
+  await Dd.page.click('#czViewer [data-cz-vw="discuss"]');
+  const c12 = await until(() => Dd.page.evaluate(() => { const v = [...document.querySelectorAll('.cz-vw')].find((x) => !x.hidden && x.querySelector('.pc-chat')); if (!v) return null; const r = v.getBoundingClientRect(); return { id: v.dataset.czPanel, w: Math.round(r.width), log: !!v.querySelector('.hm-log'), box: !!v.querySelector('.hm-foot textarea'), title: v.querySelector('.cz-vw-title').textContent }; }), 6000);
+  const l12 = await pl(Dd.page);
+  ok('P12 Discuss in chat opens the chat in a panel on the Board (no page change): the log and the box', !!c12 && c12.log && c12.box && Dd.page.url() === url0, JSON.stringify([c12, Dd.page.url()]));
+  ok('P12 at 1440 the chat slides over; the initiative split under it stays', !!c12 && P(l12, c12.id).mode === 'over' && P(l12, 'v0').mode === 'split', JSON.stringify(l12));
+  const iniId = await Dd.page.evaluate(() => window.czViewer.current() && window.czViewer.current().id);
+  ok('P12 it is Home\'s conversation about the initiative (key init:<id>)', threads.some((k) => /^init:/.test(k || '')), JSON.stringify([threads, iniId]));
+  await shot(Dd.page, 'p12-chat-over-1440');
+  ok('0 no page error while docking and with the chat on the Board', Dd.errors.length === 0, Dd.errors.join(' | '));
+  // the Live pill's list: its grab bar docks it on the right; a press moves it back
+  await Dd.page.evaluate(() => window.czPanels.putAway());
+  await Dd.page.click('#czLive');
+  await until(() => Dd.page.$('#czLiveList:not([hidden]) .lv-side'), 3000);
+  const g13 = await Dd.page.evaluate(() => { const r = document.querySelector('#czLiveList .lv-side').getBoundingClientRect(); return { x: r.left + r.width / 2, y: r.top + r.height / 2, lab: document.querySelector('#czLiveList .lv-side').getAttribute('aria-label') }; });
+  await drag(Dd.page, g13, 1300, g13.y);
+  const t13 = await until(() => Dd.page.evaluate(() => { const t = document.getElementById('czLiveList'); const r = t.getBoundingClientRect(); return t.classList.contains('lv-r') ? { r: Math.round(r.right), lab: t.querySelector('.lv-side').getAttribute('aria-label'), kept: localStorage.getItem('cz-live-side') } : null; }), 3000);
+  ok('P13 the Live pill\'s list docks on the right by its grab bar (an icon with an aria-label), and the side is kept', !!t13 && Math.abs(t13.r - (1440 - 16)) <= 2 && t13.kept === 'right' && g13.lab === 'Move this list to the right side', JSON.stringify([g13, t13]));
+  await shot(Dd.page, 'p13-live-right-1440');
+  await Dd.page.focus('#czLiveList .lv-side'); await Dd.page.keyboard.press('Enter');
+  ok('P13 Enter on the grab bar moves it back to the left', !!(await until(() => Dd.page.evaluate(() => !document.getElementById('czLiveList').classList.contains('lv-r') && !localStorage.getItem('cz-live-side')), 2000)));
+  await Dd.close();
+  // 1920: the chat opens beside the initiative panel
+  const ctxW = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
+  await ctxW.route(/\/api\/briefing-premium\/thread\?/, (r) => r.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, session: null, history: { messages: [] } }) }));
+  const Dw = await open({ ctx: ctxW, at: '/premium-board.html', ready: boardReady });
+  await Dw.page.click(nm(KD[0]));
+  await until(() => pl(Dw.page).then((l) => (P(l, 'v0') && P(l, 'v0').box.shown ? l : null)));
+  await Dw.page.click('#czViewer [data-cz-vw="discuss"]');
+  const c12w = await until(() => pl(Dw.page).then((l) => (P(l, 'v1') && P(l, 'v1').box.shown && l.divs.length === 2 ? l : null)), 6000);
+  ok('P12 at 1920 the chat opens beside the initiative panel: the page, the panel, the chat, two dividers', !!c12w && P(c12w, 'page').box.r < P(c12w, 'v0').box.l && P(c12w, 'v0').box.r < P(c12w, 'v1').box.l && P(c12w, 'v1').mode === 'split', JSON.stringify(c12w || await pl(Dw.page)));
+  await shot(Dw.page, 'p12-chat-beside-1920');
+  ok('0 no page error with the chat at 1920', Dw.errors.length === 0, Dw.errors.join(' | '));
+  await Dw.close();
   // Intelligence: a goal row opens a split; ⌘-click opens beside
   const In = await open({ at: '/premium-intelligence.html', ready: () => !!window.czPanels && document.querySelectorAll('#goalTbl .ins-row[data-goal]').length > 1 });
   ok('P9 Intelligence draws its goal rows and window.czPanels', !!In.up);

package/workspace/public/pm/bd-cols.js

@@ -70,7 +70,8 @@ export function nextMs(r, now = new Date()) {
   if (!x && es && !(r.milestones || []).some((m) => day(m.date)) && day(r.end) && k < 8 && !(r.track && r.track.prog && r.track.prog.total > 0 && r.track.prog.done >= r.track.prog.total)) x = { name: es, d: day(r.end) };
   if (!x) return null;
   const over = Math.round((t - x.d) / 864e5);
-  return { ...x, late: over > 0, over: Math.max(0, over) };
+  // a closed initiative (batch 26 item 5) is never late: its next milestone keeps its date and drops the days late
+  return r.closed ? { ...x, late: false, over: 0 } : { ...x, late: over > 0, over: Math.max(0, over) };
 }
 const STATUS = { late: 'Late', risk: 'At risk', q: 'On hold' };
 const nextText = (r) => { const t = r.track || {}; if (typeof t.next === 'string') return t.next; if (t.next && t.next.text) return t.next.text; const l = (t.line || [])[0]; return l ? l.text || '' : ''; };

package/workspace/public/pm/bd-deliveries.js

@@ -76,7 +76,7 @@ export function entriesOf(o) {
     const slip = r.plan && r.plan.slip > 0 ? r.plan.slip : 0;
     const atEnd = (d) => !!(e && +d === +e);
     const one = (id, name, d, done, isEnd) => {
-      const late = !done && !h && (d < now || (isEnd && r.over && now > e));
+      const late = !done && !h && !r.closed && (d < now || (isEnd && r.over && now > e));   // never on a closed initiative (batch 26 item 5)
       const risk = !done && !late && !h && isEnd && (r.status === 'at risk' || slip > 0);
       const planned = isEnd && slip ? new Date(d.getFullYear(), d.getMonth(), d.getDate() - slip) : null;
       out.push({ ...base, id, name, date: d, done: !!done, late, risk, fc: false, planned, slip: isEnd ? slip : 0 });

package/workspace/public/pm/bd-span.js

@@ -103,9 +103,10 @@ export function windowOf(span, now, phone, sprint, dates) {
 const pctOf = (W) => (d) => Math.max(0, Math.min(100, ((d - W.from) / (W.to - W.from)) * 100));
 const P = (x) => x.toFixed(2) + '%';
 const doneOf = (r) => { const p = r.track && r.track.prog; return p ? Math.max(0, Math.min(100, (p.done / Math.max(1, p.total)) * 100)) : 0; };
-/** A milestone task past its due date and not done (feedback batch 11 item 3): its ◇ turns orange, and so does the row's dot. */
-const msLate = (m, now) => !m.done && day(m.date) && day(m.date) < new Date(now.getFullYear(), now.getMonth(), now.getDate());
-export const anyMsLate = (r, now) => !!(now && (r.milestones || []).some((m) => msLate(m, now)));
+/** A milestone task past its due date and not done (feedback batch 11 item 3): its ◇ turns orange, and so does the row's dot. Never on a closed
+ *  initiative (its workflow's terminal stage, r.closed from lib/routes-boards.js closedOf; batch 26 item 5): a closed initiative is not late. */
+const msLate = (m, now, r) => !(r && r.closed) && !m.done && day(m.date) && day(m.date) < new Date(now.getFullYear(), now.getMonth(), now.getDate());
+export const anyMsLate = (r, now) => !!(now && (r.milestones || []).some((m) => msLate(m, now, r)));
 /** The forecast range a row draws (FcBoard): { tone: 'risk' | 'miss' | 'held', low, high } past its promised date, else null. */
 export function fcRange(r) {
   const F = r && r.forecast, e = r && day(r.end);
@@ -119,8 +120,9 @@ const toneOf = (r, now) => (r.late || anyMsLate(r, now) ? 'late' : r.status ===
 export const offTone = (r, now) => { const t = toneOf(r, now); return t === 'late' || t === 'risk' ? t : r.status === 'on hold' ? 'q' : null; };
 const dotHtml = (r, now) => { const t = offTone(r, now); return t ? `<i class="cz-dot ${t}${t === 'q' ? '' : ' m-warn'}" aria-hidden="true"></i>` : ''; };
 const dated = (r) => day(r.start) || day(r.end) || (r.track && day(r.track.forecast)) || (r.draft && day(r.draft.start));
-/** Done work leaves no edge tab (TsCGrill 5): the initiative is past Deliver, or every part it counts is done. */
-const isDone = (r) => !!(r.track && (r.track.k >= 6 || (r.track.prog && r.track.prog.total > 0 && r.track.prog.done >= r.track.prog.total)));
+/** Done work leaves no edge tab (TsCGrill 5): the initiative is closed (its workflow's terminal stage, batch 26 item 5), past Deliver, or every
+ *  part it counts is done. */
+const isDone = (r) => !!r.closed || !!(r.track && (r.track.k >= 6 || (r.track.prog && r.track.prog.total > 0 && r.track.prog.done >= r.track.prog.total)));
 /** A row's holds as spans on the bar: [{ a, b, kind, h, i }]. kind: past (resumed), open (the return date ahead), over (the return date passed:
  *  dotted on to today), none (no return date: dotted to today). Only the ones that touch the plan (XtiAHard). */
 export function holdSpans(r, now) {
@@ -231,7 +233,7 @@ function qBar(r, X, now, phone, fmt, pxPct, ms = {}) {
     if (clash) hover.push(clash);
     const sw = slipWords(r, e); if (sw) hover.push(sw);
     // the committed end is the ◇ (PgTimeline); a milestone task in the stage it stands for IS that ◇ (say it once, batch 11 item 3): its name and its done
-    const isLate = !!(over || clash || r.late || (et && msLate(et, now)));
+    const isLate = !!(over || clash || r.late || (et && msLate(et, now, r)));
     // the ◇ and its label carry the milestone's own date; the initiative's end, when it differs, is the hover (batch 14 item 1)
     const ed = et ? day(et.date) : e; if (+ed !== +e) hover.push('Initiative ends ' + dy(e, now));
     const name = landsOf(r, et), eTitle = name + ' · ' + md(ed) + (et && et.stage ? ' · ◆ ' + et.stage : '') + (et && et.done ? ' · done' : isLate ? ' · late' : '');
@@ -316,6 +318,9 @@ function gapsHtml(r, X, now, phone, fmt, pxPct, s, e, tone, note = '', lands = n
     if (x && x.kind === 'none') faded = true;
   }
   if (at < e) pieces.push([at, e, faded]);
+  // a plan of one day (its only dated work starts and ends the same day) still draws its bar: before, it drew no piece, and a late one showed
+  // only its line to Today (batch 26 item 5, CRA to Vite)
+  if (!pieces.length && +s === +e) pieces.push([s, e, false]);
   const days = (p) => Math.max(0, (p[1] - p[0]) / 86400000), total = pieces.reduce((n, p) => n + days(p), 0);
   let left = (doneOf(r) / 100) * total;
   // now is blue (batch 19 item 5, StsA8Board): from where the done part ends to the end of this week, while the work is under way
@@ -327,7 +332,7 @@ function gapsHtml(r, X, now, phone, fmt, pxPct, s, e, tone, note = '', lands = n
   let html = pieces.map((p, i) => {
     const d = days(p), f = d ? Math.max(0, Math.min(1, left / d)) : 0; left -= d;
     const xl = i > 0 || p[0] > s ? ' xl' : '', xr = i < pieces.length - 1 || p[1] < e ? ' xr' : '';
-    return `<span class="tg-bar${xl}${xr}${p[2] ? ' fd' : ''}" data-key="${esc(r.key)}" style="left:${P(X(p[0]))};width:${P(Math.max(0.15, X(p[1]) - X(p[0])))}" title="${esc('PMOS plan ' + md(s) + ' to ' + md(e) + hold)}"><b style="width:${(f * 100).toFixed(1)}%"></b>${nowIn(p)}</span>`;
+    return `<span class="tg-bar${xl}${xr}${p[2] ? ' fd' : ''}" data-key="${esc(r.key)}" style="left:${P(X(p[0]))};width:${P(Math.max(+p[1] === +p[0] && pxPct ? 20 / pxPct : 0.15, X(p[1]) - X(p[0])))}" title="${esc('PMOS plan ' + md(s) + ' to ' + md(e) + hold)}"><b style="width:${(f * 100).toFixed(1)}%"></b>${nowIn(p)}</span>`;
   }).join('');
   // each plain gap: the hairline, one press (a 24 px area) with its words; a phone draws the line alone and its row sheet says it
   plain.forEach(([a, b], gi) => {
@@ -382,7 +387,7 @@ function taskMarks(r, X, now, phone, pxPct, ms) {
   const M = (r.milestones || []).filter((m) => day(m.date));
   if (!M.length) return { html: '', end: null };
   const end = endTask(r, M, ms.reach || 0), show = new Set(shownMs(r, ms.mode || 'pinned').map((m) => m.id));
-  const L = M.filter((m) => (!end || m.id !== end.id) && show.has(m.id)).map((m) => ({ ...m, late: msLate(m, now), stage: msStage(r, m) }))
+  const L = M.filter((m) => (!end || m.id !== end.id) && show.has(m.id)).map((m) => ({ ...m, late: msLate(m, now, r), stage: msStage(r, m) }))
     .filter((m) => { const x = X(day(m.date)); return x > 0 && x < 100; });
   const C = mergeClose(L, Math.max(1, ms.reach || 7));
   const html = C.map((c) => {
@@ -405,9 +410,9 @@ export function laneMilestones(rows, now, reach = 0) {
   const out = [];
   for (const r of rows || []) {
     const M = (r.milestones || []).filter((m) => day(m.date)), s = day(r.start), e = day(r.end), et = endTask(r, M, reach);
-    for (const m of M) if (!et || m.id !== et.id) out.push({ id: m.id, name: m.name, date: m.date, done: !!m.done, late: msLate(m, now), row: r });
+    for (const m of M) if (!et || m.id !== et.id) out.push({ id: m.id, name: m.name, date: m.date, done: !!m.done, late: msLate(m, now, r), row: r });
     if (!s || !e || (!et && !endStage(r))) continue;
-    const ob = openBack(r, now), late = (r.over && now > e) || (ob && ob > e) || (et && msLate(et, now));
+    const ob = openBack(r, now), late = (r.over && now > e) || (ob && ob > e) || (et && msLate(et, now, r));
     out.push({ id: et ? et.id : '', name: et ? et.name : endStage(r), date: et ? String(et.date).slice(0, 10) : iso(e), done: !!(et && et.done), late: !!late, row: r });
   }
   return out.sort((a, b) => day(a.date) - day(b.date));

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

@@ -222,23 +222,37 @@
 .ev-st .ev-sw[aria-checked="true"] { background: var(--cz-bluebg); color: var(--cz-blueink); }
 .ev-st .ev-add { display: flex; gap: 8px; margin-top: 8px; }
 .ev-st [role="status"] { min-height: 1.2em; margin: 0; font-size: var(--fs-2); color: var(--cz-ink3); }
-/* Updates › what's new: this week open, the earlier weeks folded into an Archive */
+/* Updates › what's new (design E, UpE): summary lines, the newest kit at version level, "Earlier this week" as one flat list of
+   stories, the earlier weeks folded into an Archive. A blue dot is New, an amber dot is Fixed, no dot is Improved. */
 .ev-st .ev-wk { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--cz-hair); }
 .ev-st .ev-wkh { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
-.ev-st .ev-wkh b { font-size: var(--fs-4); font-weight: 800; }
-.ev-st .ev-wkm { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
-.ev-st .ev-wg { display: flex; flex-direction: column; gap: 6px; }
-.ev-st .ev-wgl { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cz-ink2); }
-.ev-st .ev-wi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
-.ev-st .ev-wi li { font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink2); max-width: 68ch; overflow-wrap: anywhere; }
-.ev-st .ev-wi li b { color: var(--cz-ink); font-weight: 700; }
-.ev-st .ev-pr { font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
+.ev-st .ev-wkh b { font-size: var(--fs-5); font-weight: 800; }
+.ev-st .ev-sum { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--cz-bluebg); }
+.ev-st .ev-sum p { display: flex; gap: 10px; margin: 0; font-size: var(--fs-4); line-height: 1.5; color: var(--cz-ink); max-width: 72ch; }
+.ev-st .ev-sum svg { flex: none; margin-top: 5px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; color: var(--cz-blueink); }
+.ev-st .ev-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-2); color: var(--cz-ink3); }
+.ev-st .ev-leg span { display: inline-flex; align-items: center; gap: 6px; }
+.ev-st .ev-rel { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0 14px; }
+.ev-st .ev-rv { display: flex; flex-direction: column; padding-top: 6px; color: var(--cz-blueink); font-variant-numeric: tabular-nums; }
+.ev-st .ev-rv b { font-size: var(--fs-4); font-weight: 800; }
+.ev-st .ev-rv span { font-weight: 600; }
+.ev-st .ev-sl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.ev-st .ev-sy { display: flex; gap: 10px; padding: 6px 0; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink2); max-width: 72ch; overflow-wrap: anywhere; }
+.ev-st .ev-sy b { color: var(--cz-ink); font-weight: 700; }
+.ev-st .ev-sx { flex: 1; min-width: 0; }
+.ev-st .ev-dc { width: 7px; flex: none; display: inline-flex; justify-content: center; padding-top: 8px; }
+.ev-st .ev-grp { display: flex; flex-direction: column; border-top: 1px solid var(--cz-hair); }
+.ev-st .ev-gh { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-top: 6px; font-size: var(--fs-4); }
+.ev-st .ev-gh b { font-weight: 800; }
+.ev-st .ev-more { align-self: flex-start; min-height: 44px; padding: 0 0 0 17px; border: 0; background: none; font: inherit; font-size: var(--fs-2); color: var(--cz-ink3); cursor: pointer; }
+.ev-st .ev-more:hover { color: var(--cz-ink); }
+.ev-st .ev-wkr > .ev-sum { margin-bottom: 4px; }
+@media (max-width: 560px) { .ev-st .ev-rel { grid-template-columns: minmax(0, 1fr); } .ev-st .ev-rv { flex-direction: row; gap: 8px; align-items: baseline; padding-top: 0; } }
 .ev-st .ev-arc { display: flex; flex-direction: column; border-top: 1px solid var(--cz-hair); }
 .ev-st .ev-arcb, .ev-st .ev-wkt { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 10px 0; border: 0; background: none; font: inherit; color: var(--cz-ink); text-align: left; cursor: pointer; }
 .ev-st .ev-arcb svg, .ev-st .ev-wkt svg { margin-left: auto; align-self: center; fill: none; stroke: currentColor; stroke-width: 2; color: var(--cz-ink3); transition: transform .15s; }
 .ev-st .ev-arcb[aria-expanded="true"] svg, .ev-st .ev-wkt[aria-expanded="true"] svg { transform: rotate(180deg); }
 .ev-st .ev-wkr { display: flex; flex-direction: column; gap: 12px; padding-bottom: 12px; border-top: 1px solid var(--cz-hair); }
-.ev-st .ev-wkr .ev-wkm { padding: 0 0 4px; }
 .ev-st .ev-wkt .ev-tl { margin-right: 8px; }
 @media (prefers-reduced-motion: reduce) { .ev-st .ev-arcb svg, .ev-st .ev-wkt svg { transition: none; } }
 @media (max-width: 760px) {

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

@@ -56,11 +56,20 @@
 
 /* the list opens above the pill */
 @media (min-width: 761px) { .lv-tray { bottom: 120px; } }
+/* its grab bar (batch 26 item 4): drag it to the left or the right side; a press moves it to the other side. A phone's sheet has none. */
+.lv-rows { display: flex; flex-direction: column; }
+.lv-side { align-self: center; width: 64px; height: 16px; margin: -2px 0 0; padding: 0; border: 0; border-radius: 8px; background: none; display: grid; place-items: center; cursor: grab; touch-action: none; }
+.lv-side i { display: block; width: 36px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--cz-ink3) 40%, transparent); }
+.lv-side:hover i { background: var(--cz-ink3); }
+.lv-side:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 1px; }
+.lv-tray.lv-moving { transition: none; cursor: grabbing; opacity: .92; }
+@media (min-width: 761px) { .lv-tray.lv-r { position: fixed; left: auto; right: 16px; } }
 /* a phone: the menu button is bottom right, so the pill stacks above it there, and the list is a short sheet */
 @media (max-width: 760px) {
   .cz-live { left: auto; right: 6px; }
   .lv-scrim { position: fixed; inset: 0; background: rgba(42,46,53,.18); z-index: 0; }
   .lv-tray.sheet { position: fixed; left: 0; right: 0; bottom: 0; width: auto; padding: 18px 8px 28px; border-radius: 26px 26px 0 0; border: 0; }
+  .lv-side { display: none; }
   .lv-tray.sheet::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--cz-well2); }
 }
 /* the phone keyboard is up: no pill and no menu button over the chat box */

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 */