create-pmos 0.501.0 → 0.503.0

package/workspace/public/pm/bd-pin-card.js

@@ -7,7 +7,7 @@
 import { pmPost } from './http.js';
 import { esc } from './premium-shell.js';
 import * as Pop from './bd-pop.js';
-import { isPinned, shownMs, msMode, setMsMode, MS_MODES } from './bd-pins.js';
+import { isPinned, shownMs, msMode, setMsMode, MS_MODES, endStage } from './bd-pins.js';
 
 const PIN = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 17v5M8 3h8l-1 5 3 4H6l3-4z"/></svg>';
 const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -27,9 +27,9 @@ function cardHtml(r, msId) {
   if (!L.length) return `<p class="bd-pc-h">${esc(r.title)}</p><p class="bd-amut bd-pc-sub">No milestone yet. Flag a task as a milestone ◇ in the initiative's Tasks.</p>`;
   const m0 = L.find((m) => m.id === msId) || null, on = shownMs(r).length;
   const head = m0 ? `<p class="bd-pc-h">${esc(m0.name)}</p><p class="bd-amut bd-pc-sub">${esc(when(m0.date))} · ${on} of ${L.length} ${L.length === 1 ? 'milestone' : 'milestones'} on the timeline</p>`
-    : r.end && /^\d{4}-\d{2}-\d{2}/.test(String(r.end))
+    : r.end && /^\d{4}-\d{2}-\d{2}/.test(String(r.end)) && endStage(r)
       // the row's plain end ◇ (no milestone task stands for it): the card says what the row's label says, "Deliver Jun 9 ’27" (batch 14 item 1)
-      ? `<p class="bd-pc-h">${esc(r.track && r.track.k >= 6 ? 'Evaluate' : 'Deliver')} ${esc(when(String(r.end).slice(0, 10)))}</p><p class="bd-amut bd-pc-sub">The end of ${esc(r.title)} · ${on} of ${L.length} ${L.length === 1 ? 'milestone' : 'milestones'} on the timeline</p>`
+      ? `<p class="bd-pc-h">${esc(endStage(r))} ${esc(when(String(r.end).slice(0, 10)))}</p><p class="bd-amut bd-pc-sub">The end of ${esc(r.title)} · ${on} of ${L.length} ${L.length === 1 ? 'milestone' : 'milestones'} on the timeline</p>`
       : `<p class="bd-pc-h">${esc(r.title)}</p><p class="bd-amut bd-pc-sub">${on} of ${L.length} ${L.length === 1 ? 'milestone' : 'milestones'} on the timeline</p>`;
   const row = (m) => {
     const p = isPinned(r, m), late = !m.done && m.date < today;

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

@@ -3,6 +3,7 @@
  * the last one. Filter switches the whole Board: "Milestones on the timeline: Pinned · All · None", remembered per person.
  *   isPinned(r, m)        a milestone's own pin (m.pinned true or false) wins; else only the row's last dated milestone is pinned
  *   shownMs(r, mode)      the row's dated milestones the timeline draws, by date
+ *   endStage(r)           the name of the row's plain end ◇: Deliver or Evaluate on Product feature, the own ◆ stage elsewhere, else ''
  *   msMode() · setMsMode  the Filter choice: 'pinned' (the default), 'all' or 'none'
  * Pure apart from the remembered choice. */
 const MODE_KEY = 'pmos.board.msMode';
@@ -22,6 +23,15 @@ export function shownMs(r, mode = msMode()) {
   const M = datedMs(r);
   return mode === 'all' ? M : M.filter((m) => isPinned(r, m));
 }
+/** What a row's plain end ◇ stands for when no milestone task names it (batch 25 item 13). Product feature: its lifecycle's Deliver, or
+ *  Evaluate past it. Another workflow (D99): its own ◆ stage, the first one not done, else the last. A workflow with no ◆ stage: '' (zero is
+ *  silence: no labelled ◇, never a lifecycle name that the workflow does not have). */
+export function endStage(r) {
+  if (!r || !r.wf || r.wf.id === 'product-feature') return r && r.track && r.track.k >= 6 ? 'Evaluate' : 'Deliver';
+  const S = (Array.isArray(r.wfStages) ? r.wfStages : []).filter((s) => s && s.milestone && s.status !== 'skipped');
+  const x = S.find((s) => s.status !== 'done') || S[S.length - 1];
+  return x ? String(x.name || '') : '';
+}
 let MODE = null;
 export function msMode() {
   if (MODE === null) { let v = null; try { v = localStorage.getItem(MODE_KEY); } catch { v = null; } MODE = MS_MODES.some(([k]) => k === v) ? v : 'pinned'; }

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

@@ -28,7 +28,7 @@
  * the hairline and » only; its row sheet lists them. A gap never changes the row's dot or risk.
  * Calmer timeline (feedback batch 13 item 4, A: XcalmA1Desk, A4Dark, A3Phone, A2Folded, A5Milestones): say it once, few marks, quiet rows.
  *   · One label per bar end: what lands, then when ("Tender award Nov 3"; the year only when it is not this year). The name is the end milestone's,
- *     else a milestone close enough to merge with the end ◇, else the row's latest milestone; only a row with none says Deliver or Evaluate. The date turns amber at risk and orange late; the rest (days over, the forecast, a slip, a clash) is its hover.
+ *     else a milestone close enough to merge with the end ◇, else the row's latest milestone; a row with none says the ◆ stage of its own workflow (Deliver or Evaluate on Product feature), and on a workflow with no ◆ stage draws no labelled ◇ (batch 25 item 13). The date turns amber at risk and orange late; the rest (days over, the forecast, a slip, a clash) is its hover.
  *     With no room at the right edge the label sits before the ◇, on a card chip. No date under a ◇ and no second date.
  *   · Marks: the bar (done dark, to do light), a 2 px hairline for any gap or hold (a hold's hairline opens the hold card), one ◇ (filled done,
  *     orange late), the dashed Jira forecast, Today. The dotted hold, ⏸, the amber tint, the blue ◆ and the hatched out-of-window band are gone.
@@ -46,7 +46,7 @@
 import { esc } from './premium-shell.js';
 import { mergeClose } from './program-model.js';
 import { stagesOfRow } from './bd-wf.js';
-import { shownMs } from './bd-pins.js';
+import { shownMs, endStage } from './bd-pins.js';
 
 const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 const day = (v) => { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(v || '')); return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null; };
@@ -195,8 +195,8 @@ function extentOf(r, now) {
 
 /** A date as the calm timeline says it (batch 13 item 4): "Nov 3", and the year only when it is not this year ("Jun 10 ’27"). */
 export const dy = (d, now) => md(d) + (d.getFullYear() !== now.getFullYear() ? ' ’' + String(d.getFullYear()).slice(2) : '');
-/** What lands at a row's end: its end milestone's name, else the stage the end stands for. */
-const landsOf = (r, et) => (et ? et.name : r.track && r.track.k >= 6 ? 'Evaluate' : 'Deliver');
+/** What lands at a row's end: its end milestone's name, else the ◆ stage of its own workflow the end stands for, else '' (no labelled ◇). */
+const landsOf = (r, et) => (et ? et.name : endStage(r));
 /** The one label at a bar's end (XcalmA1Desk): what lands, then when; tone '' | 'risk' | 'late' | 'q' colours the date. At the right edge, with
  *  no room after the mark, it sits before it on a card chip. hover: the words a pointer reads (days over, the forecast, a slip, a clash). */
 function endLabel(at, name, d, tone, now, pxPct, hover, slip) {
@@ -235,6 +235,8 @@ function qBar(r, X, now, phone, fmt, pxPct, ms = {}) {
     // 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' : '');
+    // nothing lands (batch 25 item 13): a workflow with no ◆ stage and no dated milestone draws no ◇ and no label; the bar's own end says it
+    if (!name) return out + planMarks(r, X, phone, fmt);
     out += `<button type="button" class="tg-end${et && et.done ? ' dn' : ''}${isLate ? ' late' : ''}" data-ms-pick="${esc(r.key)}" data-ms-id="${esc(et ? et.id : '')}" style="left:${P(X(ed))}" aria-haspopup="dialog" aria-label="${esc(eTitle + '. Milestones of ' + r.title)}" title="${esc(eTitle + (clash ? '. ' + clash : ''))}"></button>`;
     // with the Next milestone column on, the column names it and the bar's end has no label (StsA8Board); the ◇ keeps the words as its hover
     if (!ms.noLabel) out += endLabel(Math.max(X(e), X(ed), over ? X(now) : 0, late ? X(fc) : 0, fr ? X(fr.high) : 0), name, ed, isLate ? 'late' : risk, now, pxPct, hover, slipHtml(r));
@@ -244,7 +246,7 @@ function qBar(r, X, now, phone, fmt, pxPct, ms = {}) {
     out += draftBar(r, X, phone, fmt, now, pxPct);
   } else {
     const d = s || e;
-    out += `<button type="button" class="tg-end" data-ms-pick="${esc(r.key)}" data-ms-id="" style="left:${P(X(d))}" aria-haspopup="dialog" aria-label="${esc((s ? 'Starts ' : 'Ends ') + md(d) + '. Milestones of ' + r.title)}" title="${s ? 'Starts' : 'Ends'} ${esc(md(d))}"></button>` + (e && !ms.noLabel ? endLabel(X(d), landsOf(r, et), d, risk, now, pxPct, [], '') : '');
+    out += `<button type="button" class="tg-end" data-ms-pick="${esc(r.key)}" data-ms-id="" style="left:${P(X(d))}" aria-haspopup="dialog" aria-label="${esc((s ? 'Starts ' : 'Ends ') + md(d) + '. Milestones of ' + r.title)}" title="${s ? 'Starts' : 'Ends'} ${esc(md(d))}"></button>` + (e && !ms.noLabel && landsOf(r, et) ? endLabel(X(d), landsOf(r, et), d, risk, now, pxPct, [], '') : '');
   }
   return out + planMarks(r, X, phone, fmt);
 }
@@ -348,7 +350,7 @@ function gapsHtml(r, X, now, phone, fmt, pxPct, s, e, tone, note = '', lands = n
   }
   // the end ◇'s own name and date when a milestone task is it (the timeline-label hotfix: never a stage name for a milestone)
   const ob = H.find((x) => x.kind === 'open' && x.b > (lands ? lands.d : e));
-  const clash = ob ? (lands ? lands.name : r.track && r.track.k >= 6 ? 'Evaluate' : 'Deliver') + ' is before the return, ' + md(ob.b) : null;
+  const clash = ob ? (lands ? lands.name : endStage(r) || 'The end') + ' is before the return, ' + md(ob.b) : null;
   return { html, clash };
 }
 const iso = (d) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
@@ -363,7 +365,7 @@ const msStage = (r, m) => { if (!m.sec) return ''; const st = (r.wfStages || [])
  *  zoom's ~40 px: the timeline-label hotfix, "[Tender] 12.0 Award contract" on Nov 2 sat under the end ◇ labelled "Deliver Nov 4"; one mark says
  *  the milestone's own name and date), else the row's latest milestone task however far from the end (Wawan 2026-10-28, "End always names a
  *  milestone": a plain "Deliver Nov 11" whose card listed only "Tech blueprint approved, Apr 29" read as two answers). It takes that
- *  task's name, date and done, and is not drawn twice. Only a row with no dated milestone says Deliver or Evaluate. M: its dated milestones. */
+ *  task's name, date and done, and is not drawn twice. Only a row with no dated milestone says its workflow's ◆ stage (pm/bd-pins.js endStage). M: its dated milestones. */
 function endTask(r, M, reach = 0) {
   const e = day(r.end); if (!e || !M.length) return null;
   const S = M.slice().sort((a, b) => day(a.date) - day(b.date));
@@ -404,9 +406,9 @@ export function laneMilestones(rows, now, reach = 0) {
   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 });
-    if (!s || !e) continue;
+    if (!s || !e || (!et && !endStage(r))) continue;
     const ob = openBack(r, now), late = (r.over && now > e) || (ob && ob > e) || (et && msLate(et, now));
-    out.push({ id: et ? et.id : '', name: et ? et.name : r.track && r.track.k >= 6 ? 'Evaluate' : 'Deliver', date: et ? String(et.date).slice(0, 10) : iso(e), done: !!(et && et.done), late: !!late, row: 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-vw-mtg.css

@@ -228,6 +228,87 @@
 .vzp-del:hover { color: var(--cz-ink); }
 .vzp-gbtn { min-height: 34px; padding: 0 12px !important; border-radius: 999px; font-size: var(--fs-3); font-weight: 700; }
 
+/* ── the recording view (batch 25 item 11, MvC/MvF/MvN): summary and lean kept rows left, the evidence right, the timeline docked ── */
+/* the shell's wide grid (summary left, 75ch right) does not apply: this view is its own two columns */
+.cz-vw-w2 .cz-vw-body:has(> .vz-rec) { display: block; }
+.cz-vw-body > .vz.vz-rec { max-width: none; }
+.vzr { container-type: inline-size; padding: 0; background: none; gap: 14px; }
+.vzr-mbonly { display: none; }
+.vzr-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
+@container (min-width: 860px) { .vzr-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 20px; } .vzr-ev { position: sticky; top: 0; } }
+.vzr-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.vzr-sum .czs-p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-3); line-height: 1.55; margin: 0; }
+.vzr-sum.all .czs-p { display: block; }
+.vzr-sm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.vzr-sm .czs-meta { margin: 0 0 0 auto; }
+.vzr-more2 { font-size: var(--fs-2); font-weight: 800; color: var(--cz-blueink); padding: 4px 0 !important; }
+.vzr-pts { border: 1px solid var(--cz-hair); border-radius: 20px; background: var(--cz-card); overflow: hidden; }
+.vzr-ph { display: flex; align-items: center; gap: 12px; padding: 12px 14px 8px 18px; flex-wrap: wrap; }
+.vzr-ph h3 { margin: 0; font-size: var(--fs-4); font-weight: 800; }
+.vzr-cnt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2); font-weight: 700; color: var(--cz-ink2); }
+.vzr-cfall { display: inline-flex !important; align-items: center; gap: 6px; }
+.vzr-k { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; color: var(--cz-ink2); }
+.vzr-k[data-k="decision"]::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--cz-ok); }
+.vzr-k[data-k="question"] { color: var(--cz-late); }
+.vzr-k svg, .vzr-bx { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
+.vzp-kr.vzr-row { grid-template-columns: 20px minmax(0, 1fr) auto 32px; gap: 0 12px; align-items: start; padding: 10px 12px 10px 18px; }
+.vzp-kr.vzr-row .vzr-k { margin-top: 1px; }
+.vzp-kr.vzr-row.sel { margin: 2px 6px; padding-left: 12px; padding-right: 6px; }
+.vzr-row .vzp-kt b { font-weight: 800; line-height: 1.35; }
+.vzr-row .vzp-tm { padding-top: 2px !important; min-width: 44px; }
+.vzr-cf { width: 30px; height: 30px; border-radius: 50%; border: 1.6px solid var(--cz-hair) !important; display: inline-grid !important; place-items: center; color: var(--cz-ink3); margin-top: -3px; }
+.vzr-cf:hover { color: var(--cz-ok); border-color: var(--cz-ok) !important; }
+.vzr-cf.on { background: var(--cz-okbg) !important; border-color: transparent !important; color: var(--cz-ok); }
+.vzr-fu { grid-column: 2 / 5; display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzr-fu.vzr-sub { margin-top: 2px; }
+.vzr-bx { color: var(--cz-ink3); flex: none; }
+.vzr-grow { flex: 1; min-width: 0; }
+.vzr-who { color: var(--cz-ink3); }
+.vzr-tk { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--cz-bluebg); color: var(--cz-blueink); font-size: var(--fs-1); font-weight: 800; }
+.vzr-ghost { background: var(--cz-well) !important; }
+.vzr-chk { grid-column: 2 / 5; margin: 4px 0 0; font-size: var(--fs-2); color: var(--cz-late); }
+.vzr-pad { padding: 4px 18px 14px; }
+.vzr-fold { display: flex; gap: 6px; flex-wrap: wrap; }
+.vzr-ch { min-height: 34px; padding: 0 13px !important; border-radius: 999px; background: var(--cz-well) !important; display: inline-flex !important; align-items: center; gap: 7px; font-size: var(--fs-2); color: var(--cz-ink2); }
+.vzr-ch b { font-weight: 800; color: var(--cz-ink); }
+.vzr-ch span { color: var(--cz-ink3); }
+.vzr-ch[aria-expanded="true"] { background: var(--cz-ink) !important; color: var(--cz-card); }
+.vzr-ch[aria-expanded="true"] b, .vzr-ch[aria-expanded="true"] span { color: var(--cz-card); }
+.vzr-panel { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 18px; border: 1px solid var(--cz-hair); background: var(--cz-card); }
+.vzr-ev { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 20px; border: 1px solid var(--cz-hair); background: var(--cz-card); min-width: 0; }
+.vzr-shot { aspect-ratio: 16 / 9; background: var(--cz-well) !important; }
+.vzr-noshot { display: grid; place-items: center; min-height: 120px; border-radius: 12px; background: var(--cz-well); padding: 12px; text-align: center; }
+.vzr-acts { display: flex; align-items: center; gap: 10px; }
+.vzr-pri { width: 40px !important; height: 40px !important; background: var(--cz-blueink) !important; color: var(--cz-card) !important; }
+.vzr-at { font-size: var(--fs-3); font-weight: 800; color: var(--cz-blueink); font-variant-numeric: tabular-nums; }
+.vzr-q { margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--cz-ink2); }
+.vzr-film { display: flex; gap: 6px; align-items: center; overflow: hidden; }
+.vzr-film.all { flex-wrap: wrap; }
+.vzr-film .vzp-th { width: 72px; height: 44px; }
+.vzr-more { height: 44px; min-width: 44px; padding: 0 8px !important; border-radius: 6px; background: var(--cz-well) !important; color: var(--cz-ink2); font-size: var(--fs-2); font-weight: 800; display: inline-grid !important; place-items: center; }
+.vzr-dock { position: sticky; bottom: 0; z-index: 2; flex-direction: row !important; align-items: center; gap: 14px !important; padding: 10px 16px !important; border-radius: 22px; background: var(--cz-card) !important; box-shadow: 0 18px 44px -18px color-mix(in oklab, var(--cz-ink) 40%, transparent), 0 0 0 1px var(--cz-hair); }
+.vzr-dock .vzp-ctl { flex: none; }
+.vzr-dock .vzp-ctl .vzp-mut { flex: none; }
+.vzr-tl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.vzr-tops { align-items: flex-end; }
+.vzr-tops .vzp-top { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.2; font-weight: 700; color: var(--cz-ink2); padding: 0 6px 0 0 !important; text-align: left !important; }
+.vzr-tops .vzp-top[aria-current="true"] { color: var(--cz-ink); font-weight: 800; }
+.vzp-kd[data-k="decision"] { fill: var(--cz-ok); }
+.vzp-kd[data-k="action"] { fill: var(--cz-blue); }
+.vzp-kd[data-k="question"] { fill: var(--cz-late); }
+/* a word fixed in place (MvF): fixed in green, a guess underlined dotted, the field in place */
+.vzr-fx { background: var(--cz-okbg); border-radius: 5px; padding: 0 3px; font-weight: 700; color: var(--cz-ink); }
+.vzr-fl { display: inline !important; padding: 0 !important; font: inherit; color: var(--cz-ink); font-weight: 700; border-bottom: 2px dotted var(--cz-late) !important; border-radius: 0 !important; cursor: pointer; }
+.vzr-fe { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px 0 8px; border-radius: 10px; background: var(--cz-card); box-shadow: 0 0 0 2px var(--cz-blue); vertical-align: middle; }
+.vzr-fe input { width: 12ch; height: 28px; border: 0; outline: 0; background: transparent; font: inherit; font-weight: 800; color: var(--cz-ink); }
+.vzr-ok { width: 26px; height: 26px; border-radius: 50%; display: inline-grid !important; place-items: center; background: var(--cz-blueink) !important; color: var(--cz-card); }
+.vzr-ok svg, .vzr-ev .vzp-ib svg, .vzr-pts svg, .vzr-cfall svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
+.vzr-ev .vzp-fill, .vzr-pri svg { fill: currentColor; stroke: none; }
+@media (max-width: 640px) {
+  .vzr-mbonly { display: block; }
+  .vzr-mbonly > .czs-secs { margin-top: 0; }
+}
+
 /* one Replay at a time: the phone's below 640px, else the desk's */
 .vzp.vzp-mb { display: none; }
 @media (max-width: 640px) {

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

@@ -20,8 +20,8 @@
 .pl-sl { margin-top: 2px; }
 .pl-now { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--cz-hair); font-size: var(--fs-2); min-width: 0; }
 .pl-now b { flex: none; font-weight: 800; }
-.pl-now code { min-width: 0; font-family: var(--cz-mono); font-size: var(--fs-2); color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.hm-pl.open .pl-now code { white-space: normal; word-break: break-all; }
+.pl-nt { min-width: 0; color: var(--cz-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.hm-pl.open .pl-nt { white-space: normal; }
 .pl-acts { display: flex; gap: 8px; margin-top: 10px; }
 .pl-ib { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cz-hair); background: var(--cz-card); color: var(--cz-ink2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
 .pl-ib.pri { background: var(--cz-solid); color: var(--cz-onsolid); border-color: transparent; }

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

@@ -2,9 +2,10 @@
  * and models (the first call in a page adds /pm/home-line.css once): Node tests them (chat-line.test.js).
  *
  * One line at the top of a chat shows the progress of the goal or of the session (one thing: Wawan, 2026-10-25). Folded it shows a spinner,
- * the step it is on, "1 of 4 done" and Stop. A tap opens it in place on a phone (the goal's points, a Now row with the newest tool call,
- * Watch its terminal) and in the Viewer on a desktop (viewHtml). A session that never wrote a step list shows "Working · 3:12", never an
- * invented count. When Claude needs the PM the line turns blue ("Claude asks before it goes on"). When the run ends the line goes away and a
+ * the step it is on, "1 of 4 done" and Stop. A tap opens it in place on a phone (the goal's points, a Now row with what the session does
+ * in plain words, Watch its terminal) and in the Viewer on a desktop (viewHtml). A session that never wrote a step list leads with the turn's
+ * goal, Claude's newest one-line status ("Checking which programs exist · 0:12"), else "Working · 3:12", never an invented count.
+ * Raw tool calls ("Bash · cat …") never show on the line or in its body: they stay behind the terminal icon (batch 25 item 14). When Claude needs the PM the line turns blue ("Claude asks before it goes on"). When the run ends the line goes away and a
  * divider stays where it finished (dividerHtml): "Goal done", or in amber why it stopped.
  *
  *   goalModel(goal, conv, o)    a working goal (state started or waiting) → model, else null
@@ -48,6 +49,28 @@ export function clockOf(conv, now = Date.now()) {
   const s = Math.max(0, Math.round((now - t0) / 1000));
   return Math.floor(s / 60) + ':' + pad(s % 60);
 }
+const MD = (t) => t.replace(/[*_`]+/g, '').replace(/^\s*(?:#+|[-*•>]|\d+[.)])\s*/, '').replace(/\[([^\]]+)\]\([^)]*\)/g, '$1').trim();
+/** The turn's goal in plain words: the last line of Claude's newest message in the turn that runs now (its status before the tool call),
+ *  without Markdown, a trailing colon or code; a long line keeps its last sentence. '' when Claude wrote nothing since the PM's message. */
+export function turnGoal(conv) {
+  const ms = (conv && conv.messages) || [];
+  for (let i = ms.length - 1; i >= 0; i--) {
+    if (ms[i].role === 'user') return '';
+    if (ms[i].role !== 'assistant' || !ms[i].text) continue;
+    let fence = false;
+    const lines = String(ms[i].text).split('\n').filter((l) => { if (/^\s*(```|~~~)/.test(l)) { fence = !fence; return false; } return !fence && !/^\s*\|/.test(l); })
+      .map(MD).filter((l) => /[a-z]/i.test(l));
+    let t = (lines.pop() || '').replace(/[:：]\s*$/, '');
+    if (t.length > 120) t = t.split(/(?<=[.!?])\s+/).filter(Boolean).pop() || t;
+    if (t) return t.length > 120 ? t.slice(0, 119).trimEnd() + '…' : t;
+  }
+  return '';
+}
+/** What the session does now, in plain words: the to-do it marked in progress, else the turn's goal. Never a raw tool call. */
+export function nowText(conv) {
+  const st = conv && Array.isArray(conv.steps) ? conv.steps.find((s) => s && s.state === 'now') : null;
+  return (st && st.text) || turnGoal(conv);
+}
 /** The newest tool call of the turn that runs now ("Edit · planning/prd/x.md"), or '' once the PM wrote after it. */
 export function nowCall(conv) {
   const ms = (conv && conv.messages) || [];
@@ -113,7 +136,7 @@ export function goalModel(goal, conv, o = {}) {
     count: asking ? '' : `${nMet} of ${count} done`, clock: '',
     title: d.goal || 'Goal',
     head: `${nMet} of ${count} points met · round ${Math.max(1, (goal.rounds || 0) + 1)} of ${limit}${d.by ? ' · due ' + d.by : ''} · Claude checks its own points`,
-    items: w.items, more: w.more, now: run ? nowCall(conv) : '', term: !!o.term,
+    items: w.items, more: w.more, now: run && !asking ? nowText(conv) : '', call: run ? nowCall(conv) : '', term: !!o.term,
     open: !!o.open, on: !!o.on, frac: count ? nMet / count : 0,
   };
 }
@@ -124,20 +147,23 @@ export function sessionModel(conv, o = {}) {
   const steps = Array.isArray(conv.steps) && conv.steps.length ? conv.steps : null;
   const asking = !!o.asking;
   const clock = clockOf(conv, o.now);
+  const call = running(conv) ? nowCall(conv) : '';
   if (!steps) {
-    return { kind: 'session', icon: asking ? 'none' : 'spin', tone: asking ? 'you' : '', text: asking ? 'Claude asks before it goes on' : 'Working', clock: asking ? '' : clock, count: '',
-      title: o.title || 'Working', head: '', items: [], more: 0, now: running(conv) ? nowCall(conv) : '', term: !!o.term, open: !!o.open, on: !!o.on, frac: 0, plain: true };
+    // no to-do list: the turn's goal leads (Claude's newest status line), the clock sits at the end; with none, "Working · 3:12"
+    const goal = asking ? '' : turnGoal(conv);
+    return { kind: 'session', icon: asking ? 'none' : 'spin', tone: asking ? 'you' : '', text: asking ? 'Claude asks before it goes on' : goal || 'Working', clock: asking ? '' : clock, count: '',
+      clockEnd: !!goal, title: o.title || 'Working', head: goal && clock ? 'Working · ' + clock : '', items: [], more: 0, now: '', call, term: !!o.term, open: !!o.open, on: !!o.on, frac: 0, plain: true };
   }
   const cur = steps.findIndex((s) => s.state === 'now');
   const done = steps.filter((s) => s.state === 'done').length;
-  const all = steps.map((s) => ({ text: s.text, state: s.state === 'done' ? 'done' : s.state === 'now' && !asking ? 'now' : 'next', sub: s.sub || '', code: s.state === 'now' ? s.call || '' : '' }));
+  const all = steps.map((s) => ({ text: s.text, state: s.state === 'done' ? 'done' : s.state === 'now' && !asking ? 'now' : 'next', sub: s.sub || '' }));
   const w = window5(all, cur, o.all);
   return {
     kind: 'session', icon: asking ? 'none' : 'spin', tone: asking ? 'you' : '',
     text: asking ? 'Claude asks before it goes on' : cur >= 0 ? steps[cur].text : 'Working',
     count: asking ? '' : `${done} of ${steps.length} done`, clock: '',
     title: o.title || 'Steps', head: `${done} of ${steps.length} done${clock ? ' · ' + clock : ''}`,
-    items: w.items, more: w.more, now: cur >= 0 && steps[cur].call ? '' : nowCall(conv), term: !!o.term,
+    items: w.items, more: w.more, now: '', call: (cur >= 0 && steps[cur].call) || call, term: !!o.term,
     open: !!o.open, on: !!o.on, frac: steps.length ? done / steps.length : 0,
   };
 }
@@ -148,7 +174,9 @@ function listHtml(m, label) {
     owner: x.avatar ? { kind: 'person', initials: x.avatar.initial, name: x.avatar.name } : null, act: x.act || null }));
   return stepsHtml(steps, { label, cls: 'pl-sl', more: m.more ? { n: m.more, attr: 'data-pl="all"', label: 'Show all ' + m.more } : null });
 }
-const nowRow = (m) => (m.now ? `<p class="pl-now">${spinHtml(14)}<b>Now</b><code>${esc(m.now)}</code></p>` : '');
+const nowRow = (m) => (m.now ? `<p class="pl-now">${spinHtml(14)}<b>Now</b><span class="pl-nt">${esc(m.now)}</span></p>` : '');
+/** Watch its terminal: the raw tool call is only behind it, as the icon's tooltip. */
+const termBtn = (m) => `<button type="button" class="pl-ib" data-pl="term" aria-label="Watch its terminal" title="${esc('Watch its terminal' + (m.call ? ' · ' + m.call : ''))}">${SVG(P.term, 18, 1.8)}</button>`;
 const leadOf = (m) => (m.icon === 'spin' ? spinHtml(16) : m.icon === 'clock' ? `<span class="pl-clk">${SVG(P.clock, 16, 2)}</span>` : m.tone === 'you' ? '<i class="pl-dot" aria-hidden="true"></i>' : '');
 
 /** The line. Folded: one row; open: the head line, the items, the Now row and Watch its terminal. */
@@ -156,13 +184,14 @@ export function lineHtml(m) {
   if (!m) return '';
   ensureCss();
   const tail = m.count ? `<span class="pl-n">${esc(m.count)}</span>` : m.clock ? `<span class="pl-n">${esc(m.clock)}</span>` : '';
-  const text = m.clock && !m.count && m.icon !== 'none' ? m.text + ' · ' + m.clock : m.text;
+  const inl = m.clock && !m.count && !m.clockEnd;   // "Working · 3:12" reads as one; a goal line keeps its clock at the end
+  const text = inl && m.icon !== 'none' ? m.text + ' · ' + m.clock : m.text;
   const say = [m.open ? m.title : text, m.count].filter(Boolean).join(', ');
   const stop = `<button type="button" class="pl-stop" data-pl="stop" aria-label="${esc(m.stopLabel || 'Stop')}" title="${esc(m.stopLabel || 'Stop')}">${STOP_SQ}</button>`;
   const row = `<div class="pl-row"><button type="button" class="pl-hit" data-pl="toggle" aria-expanded="${!!m.open}" aria-label="${esc(say)}">${leadOf(m)}`
-    + `<span class="pl-t">${esc(m.open && m.kind === 'goal' ? m.title : text)}</span>${m.open ? '' : (m.clock && !m.count ? '' : tail)}<span class="pl-cv">${SVG(m.open ? P.up : P.down, 14, 2.2)}</span></button>${stop}</div>`;
+    + `<span class="pl-t">${esc(m.open && m.kind === 'goal' ? m.title : text)}</span>${m.open ? '' : (inl ? '' : tail)}<span class="pl-cv">${SVG(m.open ? P.up : P.down, 14, 2.2)}</span></button>${stop}</div>`;
   const body = m.open && m.tone !== 'you' ? `<div class="pl-body">${m.head ? `<p class="pl-head">${esc(m.head)}</p>` : ''}${m.items.length ? listHtml(m, m.kind === 'goal' ? 'The goal’s points' : 'Steps') : ''}${nowRow(m)}`
-    + (m.term ? `<div class="pl-acts"><button type="button" class="pl-ib" data-pl="term" aria-label="Watch its terminal" title="Watch its terminal">${SVG(P.term, 18, 1.8)}</button></div>` : '') + '</div>' : '';
+    + (m.term ? `<div class="pl-acts">${termBtn(m)}</div>` : '') + '</div>' : '';
   const cls = ['hm-pl', m.tone === 'you' ? 'you' : '', m.open ? 'open' : '', m.on ? 'on' : '', m.plain ? 'plain' : ''].filter(Boolean).join(' ');
   return `<div class="${cls}" role="status" data-kind="${esc(m.kind || '')}">${row}${body}</div>`;
 }
@@ -174,7 +203,7 @@ export function viewHtml(m) {
   return `<div class="vwdoc pl-vw"><div class="pl-vwh"><b>${esc(m.title)}</b><button type="button" class="pl-stop" data-pl="stop" aria-label="${esc(m.stopLabel || 'Stop')}" title="${esc(m.stopLabel || 'Stop')}">${STOP_SQ}</button></div>`
     + (m.head ? `<p class="pl-head">${esc(m.head)}</p>` : '')
     + (m.items.length ? listHtml({ ...m, more: 0 }, m.kind === 'goal' ? 'The goal’s points' : 'Steps') : '') + nowRow(m)
-    + (m.term || m.change ? `<div class="pl-acts">${m.term ? `<button type="button" class="pl-ib" data-pl="term" aria-label="Watch its terminal" title="Watch its terminal">${SVG(P.term, 18, 1.8)}</button>` : ''}`
+    + (m.term || m.change ? `<div class="pl-acts">${m.term ? termBtn(m) : ''}`
       // m.change: the pencil that opens the plan editor for a working goal (home-goal.js; the change applies after the current step)
       + `${m.change ? `<button type="button" class="pl-ib" data-goal="change" aria-label="Change the plan" title="Change the plan">${SVG('M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4', 18, 1.8)}</button>` : ''}</div>` : '') + '</div>';
 }

package/workspace/public/pm/ini-view.css

@@ -290,6 +290,15 @@ button.iv-bxw.jr:hover .iv-cb { box-shadow: 0 0 0 3px var(--cz-well); }
 .ivt-n { position: sticky; left: 0; z-index: 3; width: var(--nw); flex: none; background: var(--cz-card); display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px; min-width: 0; }
 .ivt-r.k .ivt-n { padding-left: 34px; }
 .ivt-n .iv-tt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; font-size: var(--fs-2); }
+/* batch 25 item 4 (TaskNamesWrap, agreed A): on a desktop a task's name is never cut in the Timeline either. It wraps in the name column;
+ * the row grows and its bar stays in the middle. (A phone keeps each title on one line above its bar.) */
+@container (min-width: 521px) {
+  .ivt-r.k .ivt-n { padding-top: 7px; padding-bottom: 7px; }
+  .ivt-r.k .ivt-n .iv-tt { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.35; flex: 1 1 0; }
+  /* the days of a hidden Start or Due column sit under the name, not beside it (the name keeps the width) */
+  .ivt-r.k .ivt-t { flex-wrap: wrap; row-gap: 2px; }
+  .ivt-r.k .ivt-wn { flex-basis: 100%; padding-left: 28px; flex-wrap: wrap; white-space: nowrap; }
+}
 .ivt-r.x .iv-tt { color: var(--cz-ink3); font-weight: 600; }
 .ivt-n .iv-bxw { align-self: center; }
 .ivt-n .iv-cb { margin-top: 0 !important; }
@@ -826,6 +835,7 @@ button.lk-mt:hover { color: var(--cz-ink) !important; }
 .iva-r.k .iva-n { padding-left: 14px; }
 .iva-r.k .iva-l { padding-left: 14px; }
 .iva-r.k .iva-l .iv-tt { font-size: var(--fs-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
+@container (min-width: 521px) { .iva-r.k .iva-l { padding-top: 7px; padding-bottom: 7px; } .iva-r.k .iva-l .iv-tt { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; line-height: 1.35; } }   /* the full name, as in the Timeline (batch 25 item 4) */
 .iva-r.x .iva-l .iv-tt { color: var(--cz-ink3); font-weight: 600; }
 .iva-nt { font-size: 11px; font-weight: 800; white-space: nowrap; flex: none; }
 .iva-nt.lt { color: var(--cz-late); }