create-pmos 0.510.0 → 0.512.0

package/workspace/lib/routes-next-prompt.js

@@ -0,0 +1,248 @@
+'use strict';
+/* routes-next-prompt.js — the chat's suggested next prompt and its Sharper card over HTTP (batch 26 item 2, design B; lib/next-prompt.js).
+ *
+ *   GET  /api/next-prompt/prefs                    → { ok, next, sharpen, sharpenSet, style, rules, api }
+ *        next: suggestions after a reply are on. sharpen: Sharpen as I type is on now ('auto' is on when Claude's runs go to the API, where a
+ *        call takes about 2 s; a background `claude -p` run takes 10 s or more, too slow to follow typing). sharpenSet: 'auto'|'on'|'off'.
+ *        style: 'polish'|'engineer'|'own'. rules: whether Your own rules are written. api: a key for the Claude API is set.
+ *   POST /api/next-prompt/prefs   { key: 'next'|'sharpen'|'style'|'rules', value }          → { ok } (saved in <runtime>/next-prompt/prefs.json)
+ *   POST /api/next-prompt/next    { key, asked, reply, initiative?, stage?, product?, title? }  → { ok, on, cards: [{ text, move, rec }] }
+ *   POST /api/next-prompt/sharpen { key, text, reply?, initiative?, title? }                  → { ok, on, text | null }
+ *
+ * Both POSTs are page presses (lib/pm-guard.js requirePagePress; an agent session header is refused) and run ONE short Claude call:
+ * on the API with the PM's key when one is set (lib/anthropic-key.js, model PMOS_NEXT_PROMPT_MODEL or claude-sonnet-5-5), else a headless
+ * read-only run (lib/headless.js kind 'ask', origin briefing-ask:next-prompt:…). The answer goes through the shared door, lib/ai-guard.js file():
+ * the kill switch (`pmos ai off next-prompt`, `pmos ai off sharpen-prompt`, PMOS_AI=off), the replay gate (fixtures/next-prompt-replay.json,
+ * recorded answers, never a model), the citation check and the audit (<runtime>/ai-audit.jsonl). A card with no verified source is never
+ * shown. The reply and the typed text a card cites are kept in <runtime>/next-prompt/ (the newest 30 files), outside every repository.
+ * Nothing here writes to a session, a record or a repository: a card is text the PM may put in the box.
+ *
+ * Tests inject ctx.askClaude(prompt, { job, key }) → Promise<string|null> instead of a real call. */
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const guard = require('./pm-guard.js');
+const AG = require('./ai-guard.js');
+const NP = require('./next-prompt.js');
+
+const VERSION = '1';
+const ROOT = path.join(__dirname, '..');   // the workspace package: the files that prove a move works today
+const FIXTURE = path.join(ROOT, 'fixtures/next-prompt-replay.json');
+const KEEP = 30;
+const TIMEOUT_MS = 90000;
+const DEFAULT_MODEL = 'claude-sonnet-5-5';
+
+const text = (v, n) => (typeof v === 'string' ? v.slice(0, n) : '');
+const bad = (status, error) => ({ status, body: { ok: false, error } });
+const dirOf = (runtimeDir) => path.join(runtimeDir, 'next-prompt');
+
+/* The PM's choices live in <runtime>/next-prompt/prefs.json, owned by this route (Settings › Claude and the sliders menu write them here). */
+const PREFS = {
+  next: (v) => typeof v === 'boolean',
+  sharpen: (v) => v === 'auto' || v === 'on' || v === 'off',
+  style: (v) => Object.prototype.hasOwnProperty.call(NP.STYLES, v),
+  rules: (v) => typeof v === 'string' && v.length <= 1000,
+};
+const prefsFile = (runtimeDir) => path.join(dirOf(runtimeDir), 'prefs.json');
+function readPrefs(runtimeDir) {
+  try { const o = JSON.parse(fs.readFileSync(prefsFile(runtimeDir), 'utf8')); return o && typeof o === 'object' ? o : {}; } catch { return {}; }
+}
+/** Save one choice → { ok } or { ok:false, error }. */
+function setPref(runtimeDir, key, value) {
+  if (!Object.prototype.hasOwnProperty.call(PREFS, key)) return { ok: false, error: 'no such choice: ' + String(key).slice(0, 40) };
+  if (!PREFS[key](value)) return { ok: false, error: 'that value does not fit ' + key };
+  const o = readPrefs(runtimeDir); o[key] = value;
+  fs.mkdirSync(dirOf(runtimeDir), { recursive: true, mode: 0o700 });
+  const f = prefsFile(runtimeDir), tmp = f + '.' + process.pid + '.tmp';
+  fs.writeFileSync(tmp, JSON.stringify(o, null, 2) + '\n', { mode: 0o600 });
+  fs.renameSync(tmp, f);
+  return { ok: true };
+}
+const get = (ctx, k) => { const v = readPrefs(ctx.runtimeDir)[k]; return PREFS[k](v) ? v : undefined; };
+const envOf = (ctx) => ctx.env || process.env;
+
+function apiKey(ctx) {
+  const env = envOf(ctx);
+  if (/^(off|0|false|no)$/i.test(String(env.PMOS_NEXT_PROMPT_API || ''))) return null;
+  try { return require('./anthropic-key.js').getKey(ctx.runtimeDir, env); } catch { return null; }
+}
+function prefs(ctx) {
+  const set = get(ctx, 'sharpen') || 'auto', api = !!apiKey(ctx), style = get(ctx, 'style') || 'engineer', rules = String(get(ctx, 'rules') || '');
+  return { next: get(ctx, 'next') !== false, sharpen: set === 'on' || (set === 'auto' && api), sharpenSet: set, style, rules: !!rules.trim(), rulesText: rules, api };
+}
+function offWhy(ctx, job) {
+  const why = AG.off(job, { env: envOf(ctx), settingsDir: ctx.runtimeDir });
+  if (why) return why;
+  const P = prefs(ctx);
+  if (job === NP.JOB_NEXT && !P.next) return 'Suggestions after a reply are off (Settings › Claude)';
+  if (job === NP.JOB_SHARPEN && !P.sharpen) return 'Sharpen as I type is off (Settings › Claude)';
+  return null;
+}
+
+/* ── the call ────────────────────────────────────────────────────────────────────────────── */
+
+async function viaApi(key, prompt, env) {
+  const Anthropic = require('@anthropic-ai/sdk');
+  const api = new Anthropic({ apiKey: key });
+  const res = await api.messages.create({ model: String(env.PMOS_NEXT_PROMPT_MODEL || '').trim() || DEFAULT_MODEL, max_tokens: 800, messages: [{ role: 'user', content: prompt }] });
+  return (res.content || []).filter((b) => b.type === 'text').map((b) => b.text).join('\n');
+}
+function viaHeadless(ctx, prompt, origin) {
+  const headless = require('./headless.js');
+  if (typeof ctx.spawnSession !== 'function' || headless.kindFor({ agent: 'claude', origin }) !== 'ask') return Promise.resolve(null);
+  return new Promise((resolve) => {
+    let settled = false; const done = (v) => { if (!settled) { settled = true; clearTimeout(t); resolve(v); } };
+    const t = setTimeout(() => done(null), TIMEOUT_MS);
+    let s = null;
+    try {
+      s = ctx.spawnSession({ name: 'chat: next prompt', agent: 'claude', origin, initialInput: prompt,
+        onDone: (d) => { const r = d && d.result; done(r && r.ok && !r.isError ? String(r.text || '') : null); } });
+    } catch { s = null; }
+    if (!s || s.state === 'exited') done(null);
+  });
+}
+async function ask(ctx, prompt, { job, key }) {
+  if (typeof ctx.askClaude === 'function') return ctx.askClaude(prompt, { job, key });
+  const k = apiKey(ctx);
+  if (k) { try { return await viaApi(k, prompt, envOf(ctx)); } catch { return null; } }
+  return viaHeadless(ctx, prompt, `briefing-ask:next-prompt:${job}:${crypto.createHash('sha1').update(String(key)).digest('hex').slice(0, 10)}`);
+}
+
+/* ── what a card cites ───────────────────────────────────────────────────────────────────── */
+
+function prune(dir) {
+  let fsx = []; try { fsx = fs.readdirSync(dir).filter((f) => f.endsWith('.txt')).map((f) => ({ f, t: fs.statSync(path.join(dir, f)).mtimeMs })); } catch { return; }
+  fsx.sort((a, b) => b.t - a.t);
+  for (const x of fsx.slice(KEEP)) { try { fs.unlinkSync(path.join(dir, x.f)); } catch { /* gone already */ } }
+}
+/** Keep a text where the guard can read it at its lines; → its name under the state folder. */
+function keep(runtimeDir, prefix, body) {
+  const dir = dirOf(runtimeDir);
+  fs.mkdirSync(dir, { recursive: true, mode: 0o700 });
+  const name = prefix + '-' + crypto.createHash('sha1').update(body).digest('hex').slice(0, 16) + '.txt';
+  fs.writeFileSync(path.join(dir, name), body, { mode: 0o600 });
+  prune(dir);
+  return 'next-prompt/' + name;
+}
+const flat = (s) => String(s == null ? '' : s).toLowerCase().replace(/\s+/g, ' ').trim();
+/** The line of the kept reply that holds `from` (spacing and case ignored) → { ref, quote } for the guard, or null. */
+function lineRef(rel, body, from) {
+  const want = flat(from); if (want.length < AG.QUOTE_MIN) return null;
+  const L = body.split('\n');
+  for (let i = 0; i < L.length; i++) if (flat(L.slice(Math.max(0, i - 2), i + 3).join(' ')).includes(want)) return { ref: `state:${rel}:${i + 1}`, quote: from };
+  return null;
+}
+
+/* ── the guard ───────────────────────────────────────────────────────────────────────────── */
+
+const MOVES = () => NP.movesOf(ROOT);
+function replayCases(runtimeDir, job = null) {
+  let F; try { F = JSON.parse(fs.readFileSync(FIXTURE, 'utf8')); } catch { return []; }
+  const moves = MOVES();
+  const N = job === NP.JOB_SHARPEN ? [] : F.next || [], H = job === NP.JOB_NEXT ? [] : F.sharpen || [];
+  return N.map((c) => ({ name: 'next: ' + c.name, expect: c.expect, run: async () => {
+    const reply = String(c.reply || ''), rel = keep(runtimeDir, 'replay', reply);
+    return NP.proposalsOfNext(NP.parseNext(JSON.stringify(c.answer), { moves, place: c.place || null }), { moves, replyRef: (from) => lineRef(rel, reply, from) });
+  } })).concat(H.map((c) => ({ name: 'sharpen: ' + c.name, expect: c.expect, run: async () => {
+    const out = NP.parseSharpen(JSON.stringify(c.answer), c.text);
+    if (!out) return [];
+    const rel = keep(runtimeDir, 'replay-typed', String(c.text));
+    return [NP.proposalOfSharpen(out, c.cite === false ? null : { ref: `state:${rel}:1`, quote: String(c.text).split('\n')[0] })];
+  } })));
+}
+async function gate(ctx, job) {
+  if (AG.ready(ctx.runtimeDir, job, VERSION)) return true;
+  const rp = await AG.replay(job, VERSION, replayCases(ctx.runtimeDir, job), { root: ROOT, stateDir: ctx.runtimeDir, max: NP.MAX_CARDS });
+  return rp.ok;
+}
+async function through(ctx, job, run, proposals) {
+  let shown = [];
+  const got = await AG.file({ job, version: VERSION, run, root: ROOT, stateDir: ctx.runtimeDir, settingsDir: ctx.runtimeDir, env: envOf(ctx), max: NP.MAX_CARDS }, proposals, async (filed) => { shown = filed; });
+  return got.off || got.held ? [] : shown;
+}
+
+/* ── the two calls ───────────────────────────────────────────────────────────────────────── */
+
+const placeOf = (b) => ({ initiative: text(b.initiative, 160) || null, stage: text(b.stage, 60) || null, product: text(b.product, 120) || null, title: text(b.title, 160) || null });
+const inflight = new Map();   // the same reply asked twice (two tabs, a re-read) shares one call
+function once(k, fn) {
+  if (inflight.has(k)) return inflight.get(k);
+  const p = fn().finally(() => setTimeout(() => inflight.delete(k), 60000));
+  inflight.set(k, p);
+  if (inflight.size > 100) inflight.delete(inflight.keys().next().value);
+  return p;
+}
+
+async function next(ctx, b) {
+  const reply = text(b.reply, 6000).trim(), key = text(b.key, 200);
+  if (!reply) return { ok: true, on: true, cards: [] };
+  const job = NP.JOB_NEXT, run = 'np-' + crypto.randomBytes(4).toString('hex');
+  const P = prefs(ctx), place = placeOf(b), moves = MOVES();
+  if (!(await gate(ctx, job))) return { ok: true, on: true, held: true, cards: [] };
+  const k = 'n:' + key + ':' + crypto.createHash('sha1').update(reply + '\n' + P.style + '\n' + P.rulesText).digest('hex');
+  return once(k, async () => {
+    AG.audit(ctx.runtimeDir, { job, version: VERSION, run, event: 'start' });
+    const answer = await ask(ctx, NP.nextPrompt({ pm: text(b.asked, 2000), reply, place, style: P.style, rules: P.rulesText, moves }), { job, key });
+    const cards = NP.parseNext(answer, { moves, place });
+    if (!cards.length) { AG.audit(ctx.runtimeDir, { job, version: VERSION, run, event: 'end', filed: 0, dropped: 0, ...(answer == null ? { error: 'no answer' } : {}) }); return { ok: true, on: true, cards: [] }; }
+    const rel = keep(ctx.runtimeDir, 'reply', reply);
+    const shown = await through(ctx, job, run, NP.proposalsOfNext(cards, { moves, replyRef: (from) => lineRef(rel, reply, from) }));
+    return { ok: true, on: true, cards: shown.map((p, i) => ({ text: p.say, move: p.data.move, rec: i === 0 })) };
+  });
+}
+
+async function sharpen(ctx, b) {
+  const typed = text(b.text, 2000).trim(), key = text(b.key, 200);
+  if (!NP.rough(typed)) return { ok: true, on: true, text: null };
+  const job = NP.JOB_SHARPEN, run = 'sh-' + crypto.randomBytes(4).toString('hex');
+  const P = prefs(ctx);
+  if (!(await gate(ctx, job))) return { ok: true, on: true, held: true, text: null };
+  const k = 's:' + key + ':' + crypto.createHash('sha1').update(typed + '\n' + P.style + '\n' + P.rulesText).digest('hex');
+  return once(k, async () => {
+    AG.audit(ctx.runtimeDir, { job, version: VERSION, run, event: 'start' });
+    const answer = await ask(ctx, NP.sharpenPrompt({ text: typed, reply: text(b.reply, 3000), place: placeOf(b), style: P.style, rules: P.rulesText }), { job, key });
+    const out = NP.parseSharpen(answer, typed);
+    if (!out) { AG.audit(ctx.runtimeDir, { job, version: VERSION, run, event: 'end', filed: 0, dropped: 0, ...(answer == null ? { error: 'no answer' } : { same: true }) }); return { ok: true, on: true, text: null }; }
+    const first = typed.split('\n')[0], rel = keep(ctx.runtimeDir, 'typed', typed);
+    const shown = await through(ctx, job, run, [NP.proposalOfSharpen(out, { ref: `state:${rel}:1`, quote: first })]);
+    return { ok: true, on: true, text: shown.length ? shown[0].say : null };
+  });
+}
+
+async function handle(req, res, url, ctx) {
+  const send = (r) => { ctx.json(res, r.body, r.status); return true; };
+  const what = url.pathname.replace(/^\/api\/next-prompt\/?/, '');
+  if (what === 'prefs' && req.method === 'POST') {
+    if (req.headers && req.headers['x-pmos-session']) return send(bad(403, 'Only the page changes these choices.'));
+    const rd = await ctx.readJson(req);
+    if (!rd.ok) return send(bad(400, 'the body is not JSON'));
+    const body = rd.body || {};
+    const g = guard.requirePagePress(req, body);
+    if (!g.ok) return send(bad(g.status, g.error));
+    if (!ctx.runtimeDir) return send(bad(409, 'There is no runtime folder.'));
+    const r = setPref(ctx.runtimeDir, body.key, body.value);
+    return send(r.ok ? { status: 200, body: { ok: true } } : bad(400, r.error));
+  }
+  if (what === 'prefs') {
+    if (req.method !== 'GET') return send(bad(405, 'GET or POST only'));
+    const P = prefs(ctx), env = envOf(ctx);
+    const next = P.next && !AG.off(NP.JOB_NEXT, { env, settingsDir: ctx.runtimeDir }), sh = P.sharpen && !AG.off(NP.JOB_SHARPEN, { env, settingsDir: ctx.runtimeDir });
+    return send({ status: 200, body: { ok: true, next, nextSet: P.next, sharpen: sh, sharpenSet: P.sharpenSet, style: P.style, rules: P.rules, rulesText: P.rulesText, api: P.api } });
+  }
+  if (what !== 'next' && what !== 'sharpen') return send(bad(404, 'no such next-prompt route'));
+  if (req.method !== 'POST') return send(bad(405, 'POST only'));
+  if (req.headers && req.headers['x-pmos-session']) return send(bad(403, 'Only the page asks for a suggestion.'));
+  const rd = await ctx.readJson(req);
+  if (!rd.ok) return send(bad(400, 'the body is not JSON'));
+  const body = rd.body || {};
+  const g = guard.requirePagePress(req, body);
+  if (!g.ok) return send(bad(g.status, g.error));
+  if (!ctx.runtimeDir) return send(bad(409, 'There is no runtime folder.'));
+  const job = what === 'next' ? NP.JOB_NEXT : NP.JOB_SHARPEN;
+  const why = offWhy(ctx, job);
+  if (why) return send({ status: 200, body: { ok: true, on: false, why, ...(what === 'next' ? { cards: [] } : { text: null }) } });
+  try { return send({ status: 200, body: what === 'next' ? await next(ctx, body) : await sharpen(ctx, body) }); }
+  catch (e) { return send(bad(500, 'The suggestion failed: ' + String((e && e.message) || e).slice(0, 200))); }
+}
+
+module.exports = { prefixes: ['/api/next-prompt'], handle, VERSION, FIXTURE, prefs, setPref, lineRef, replayCases, next, sharpen };

package/workspace/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "pmos-workspace",
-  "version": "0.510.0",
+  "version": "0.512.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pmos-workspace",
-      "version": "0.510.0",
+      "version": "0.512.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.512.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) {
@@ -365,3 +379,5 @@
 .ev-st [data-claude-setup] .cs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
 .ev-st [data-claude-setup] .cs-term { width: 100%; min-height: 280px; border-radius: 14px; overflow: hidden; }
 @media (max-width: 760px) { .ev-st [data-claude-setup] .wl-btn, .ev-st [data-claude-setup] select { min-height: 44px; } .ev-st [data-claude-setup] .cs-label { flex-wrap: wrap; } }
+/* Settings › Claude › Your own rules (batch 26 item 2) */
+.ev-st textarea.ev-rules { display: block; width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 72px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); line-height: 1.45; resize: vertical; }

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

@@ -20,7 +20,8 @@ body.cz-home { min-height: 100vh; overflow: hidden; }
  * ground, 16px apart, the list 360px wide (cozy-today.css) */
 @media (min-width: 761px) {
   body.cz-home .hm-desk { inset: 0; padding: 16px; gap: 16px; background: none; box-shadow: none; border-radius: 0; }
-  body.cz-home .hm-chat { background: var(--cz-card); border-radius: 24px; padding: 16px 24px 20px; box-shadow: 0 10px 30px -24px var(--cz-c-9da3ac); }
+  /* batch 26 item 2 (NpBw): the chat sits on the same soft gradient as on a phone */
+  body.cz-home .hm-chat { background: var(--cz-ground); border-radius: 24px; padding: 16px 24px 20px; box-shadow: 0 10px 30px -24px var(--cz-c-9da3ac); }
   body.cz-home .hm-vw .cz-vw { flex-basis: min(500px, max(380px, calc(100vw - 852px))); width: min(500px, max(380px, calc(100vw - 852px))); }
   body.cz-home.hm-folded:not(.cz-vw-rail) .hm-desk { padding-left: 56px; }
   body.cz-home .hm-reopen { top: 12px; right: 12px; }
@@ -791,3 +792,46 @@ form.hm-box textarea { min-height: 48px; border: 0; background: none; resize: no
 .hm-chat .ctxmore[open] > summary { display: none; }
 .hm-chat .ctxmore > .ctxc { display: contents; }
 .hm-chat .ctxmore:not([open]) > .ctxc { display: none; }
+
+/* ── the suggested next prompt and the Sharper card (batch 26 item 2, canvas NpB, NpBw; pm/next-prompt-ui.js) ──
+ * Above the box: up to two cards, the recommended one lit (card white, blue ring, blue ✦), the other grey. A tap fills the box. */
+.np { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
+.np[hidden] { display: none; }
+.np-list { display: flex; flex-direction: column; gap: 8px; }
+.np-card { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 11px 14px; border-radius: 16px;
+  border: 1px solid transparent; background: var(--cz-well); color: var(--cz-ink); font: inherit; font-size: var(--fs-3); line-height: 1.5; text-align: left; cursor: pointer; }
+.np-card .np-star { flex: none; margin-top: 3px; fill: currentColor; stroke: currentColor; color: var(--cz-ink3); }
+.np-card.rec { background: var(--cz-card); border-color: var(--cz-blue); box-shadow: 0 0 0 3px var(--cz-bluebg); }
+.np-card.rec .np-star { color: var(--cz-blue); }
+.np-card:hover { border-color: var(--cz-blue); }
+.np-card:focus-visible, .np-use:focus-visible, .np-ib:focus-visible, .np-mi:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
+.np-t { flex: 1; min-width: 0; }
+.np-sh { padding: 0 6px 0 0; cursor: default; align-items: center; }
+.np-use { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; padding: 11px 0 11px 14px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.np-ib { flex: none; width: 36px; height: 36px; display: inline-grid; place-items: center; border: 0; border-radius: 999px; background: none; color: var(--cz-ink2); cursor: pointer; }
+.np-ib:hover, .np-ib[aria-expanded="true"] { background: var(--cz-well); }
+.np-spin { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--cz-bluebg); color: var(--cz-blue); }
+.np-sp { display: inline-flex; animation: np-rot 1.1s linear infinite; }
+@keyframes np-rot { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) { .np-sp { animation: none; } }
+.np-sk { flex: 1; display: flex; flex-direction: column; gap: 8px; }
+.np-sk i { display: block; height: 12px; border-radius: 6px; background: var(--cz-bluebg); }
+.np-sk i:first-child { width: 88%; } .np-sk i:last-child { width: 60%; }
+.np-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20; width: 310px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px; border-radius: 20px;
+  background: var(--cz-card); box-shadow: 0 24px 60px -24px rgba(42,46,53,.45), 0 0 0 1px var(--cz-hair); display: flex; flex-direction: column; gap: 2px; }
+.np-mh { margin: 0; padding: 8px 12px 4px; font-size: var(--fs-1); font-weight: 800; color: var(--cz-ink2); }
+.np-mi { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px; background: none; color: var(--cz-ink); font: inherit; text-align: left; cursor: pointer; }
+.np-mi:hover, .np-mi[aria-checked="true"]:not(.np-swr) { background: var(--cz-well); }
+.np-mi b { display: block; font-size: var(--fs-3); font-weight: 600; }
+.np-mi[aria-checked="true"] b { font-weight: 700; }
+.np-mi em { display: block; font-style: normal; font-size: var(--fs-1); color: var(--cz-ink2); }
+.np-ck { flex: none; width: 18px; margin-top: 2px; color: var(--cz-blue); display: inline-flex; }
+.np-sep { height: 1px; margin: 6px 8px; background: var(--cz-hair); }
+.np-swr { align-items: center; }
+.np-swr b { flex: 1; }
+.np-sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--cz-well2); display: inline-flex; align-items: center; padding: 0 3px; box-sizing: border-box; }
+.np-sw i { width: 18px; height: 18px; border-radius: 50%; background: var(--cz-card); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
+.np-sw.on { background: var(--cz-solid); justify-content: flex-end; }
+@media (max-width: 760px) {
+  .np-t { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* a phone shows 3 lines; a tap still fills the whole text */
+}

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