create-pmos 0.87.0 → 0.89.0

package/workspace/public/pm/dest-people.js

@@ -2,24 +2,22 @@
  * tone, notes and shared work (initiative people-directory, PRD R5 to R11, proposed D90).
  *
  * A DESTINATION MODULE (registry.js): mountDestination(host, ctx) on every render with the same host, disposeDestination(host).
- * It keeps ONE persistent root per host; the header (title and search) is built once, so typing never loses focus, and
- * only the body is rebuilt when its own data changed.
+ * It keeps ONE persistent root per host; the header is built once (h2 title on left, group switch on right), so typing never
+ * loses focus. The search field lives in the left card and is built once. Only the body is rebuilt when its own data changed.
  *
- * What it shows, for the repository the tab names (or the open one):
- *   - Waiting for you: possible duplicates (Merge · Keep separate) and how many tones wait for a confirm. A new person
- *     is added, not listed here (the PM, 2026-10-06): Remove from People on their page keeps them out;
- *   - the list: search over names, handles and initiatives, All · Team · External, sort by latest, most or name;
- *   - the person's page: who, interactions with where each came from, tone (Confirm · Set another · Change), shared
- *     work (initiatives, items they own with Blocked shown, coming meetings), notes (Add · Remove), and identity and
- *     sources (handles, how many interactions each source gave, the file the person lives in).
- * Every press is a page press to POST /api/people/decide. Nothing here reads a source: GET /api/people records the names
- * the workspace's own records hold, and agent sessions record what they saw through `pmos people record`. A link from another place opens a person through the tab's slug (people-link.js).
- * In fixture mode it reads nothing.
+ * Layout (desktop): header row, "Waiting for you" merge candidates as bordered rows, then two cards side-by-side (minmax(300px,2fr) 3fr,
+ * gap 16px, fixed height calc(100vh - 220px) min-height 420px, internal scrolling). Left card: "PEOPLE" label + count, search field,
+ * full-width sort tabs, list of people. Right card: person detail with avatar, name, meta, Confirm / ⋯ menu, 3 tiles (Interactions,
+ * Tone, Shared work), scrollable sections (Interactions, Shared work, Notes, Identity and sources).
+ *
+ * What it shows: waiting for you (possible merge candidates), the people list (search, filter, sort), and person's page
+ * (who, interactions, tone, shared work, notes, identity). Every press is a page press to POST /api/people/decide.
+ * A link from another place opens a person through the tab's slug (people-link.js). In fixture mode it reads nothing.
  */
 
 import { el } from './dom.js';
-import { button, row, field, toast, empty, tabs, badge, menu, ensureComponentsCss } from './primitives.js';
-import { ensureSprite } from './icons.js';
+import { button, iconButton, row, field, toast, empty, tabs, badge, menu, ensureComponentsCss } from './primitives.js';
+import { ensureSprite, icon } from './icons.js';
 import { pmGet, pmPost } from './http.js';
 import { wsOf } from './data.js';
 import { registerCommand, openDestination } from './registry.js';
@@ -174,22 +172,18 @@ function review(inst) {
   const rows = [];
   for (const m of r.merges) {
     const key = m.handle.kind + ':' + m.handle.value;
-    rows.push(el('div', { class: 'rp-people-row', role: 'listitem', 'data-people-merge': key },
-      row({
-        title: COPY.same(m.handle.value, m.personName),
-        meta: [m.why],
-        trail: [
-          button({ label: COPY.merge, variant: 'outline', size: 'sm', attrs: { 'data-people-act': 'merge', 'data-people-key': key },
-            onClick: () => decide(inst, { act: 'merge', person: m.person, handle: m.handle }, COPY.merged) }),
-          button({ label: COPY.keep, variant: 'ghost', size: 'sm', attrs: { 'data-people-act': 'keep-separate', 'data-people-key': key },
-            onClick: () => decide(inst, { act: 'keep-separate', a: m.a, b: m.b }, COPY.kept) }),
-        ],
-      })));
+    rows.push(el('div', { class: 'rp-people-merge', role: 'listitem', 'data-people-merge': key },
+      el('div', { class: 'rp-people-merge__dot' }),
+      el('div', { class: 'rp-people-merge__text' },
+        el('div', { class: 'rp-people-merge__title' }, COPY.same(m.handle.value, m.personName)),
+        el('div', { class: 'rp-people-merge__why' }, m.why)),
+      button({ label: COPY.merge, icon: 'git-merge', variant: 'outline', size: 'sm', attrs: { 'data-people-act': 'merge', 'data-people-key': key },
+        onClick: () => decide(inst, { act: 'merge', person: m.person, handle: m.handle }, COPY.merged) }),
+      button({ label: COPY.keep, variant: 'ghost', size: 'sm', attrs: { 'data-people-act': 'keep-separate', 'data-people-key': key },
+        onClick: () => decide(inst, { act: 'keep-separate', a: m.a, b: m.b }, COPY.kept) })));
   }
   if (r.tones.length) rows.push(el('p', { class: 'rp-people-hint', 'data-people-tones': String(r.tones.length) }, COPY.tonesWait(r.tones.length)));
-  return el('section', { class: 'rp-people-review', 'data-people-review': '' },
-    el('h3', { class: 'rp-people-sec__title' }, `${COPY.waiting} · ${r.count}`),
-    el('div', { role: 'list' }, rows));
+  return el('div', { class: 'rp-people-review', 'data-people-review': '' }, ...rows);
 }
 
 /* ── the list ────────────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -212,11 +206,15 @@ function shownPeople(inst) {
 function personLine(inst, p) {
   const open = inst.open === p.id;
   const t = toneOf(p);
-  return el('div', { class: 'rp-people-row' + (open ? ' rp-people-row--open' : ''), role: 'listitem', 'data-people-person': p.id },
+  const toneClass = t === 'tense' || t === 'cautious' || t === 'warm' ? t : '';
+  const initials = p.name.split(/\s+/).map((w) => w[0]).join('').toUpperCase();
+  return el('div', { class: 'rp-people-item', role: 'listitem', 'data-people-person': p.id },
     row({
       title: p.name,
-      meta: [who(p), p.last ? `${p.count} · ${day(p.last)}` : String(p.count)],
-      trail: t ? [badge({ text: p.tone.confirmed ? t : t + '?', tone: t === 'tense' ? 'destructive' : t === 'cautious' ? 'warning' : 'outline', attrs: { 'data-people-tone': t } })] : [],
+      meta: [[who(p), p.external ? COPY.external : null].filter(Boolean).join(' · ')],
+      lead: [el('span', { class: 'rp-people-row__avatar' }, initials)],
+      trail: t ? [el('span', { class: 'rp-people-row__tone' + (p.tone.confirmed ? '' : ' rp-people-row__tone--proposed'), 'data-people-tone': t },
+        el('i', { class: 'rp-people-row__tone-dot ' + toneClass }), p.tone.confirmed ? t : t + '?')] : [],
       onOpen: () => { inst.open = p.id; draw(inst); },
       openLabel: `${p.name}, ${who(p)}`,
       openAttrs: { 'aria-current': open ? 'true' : null, 'data-people-open': p.id },
@@ -226,20 +224,19 @@ function personLine(inst, p) {
 function listPane(inst) {
   const v = inst.view;
   const all = v.people.filter((p) => matches(p, inst.q.trim().toLowerCase()));
-  const controls = el('div', { class: 'rp-people-views' },
-    tabs({ variant: 'line', value: inst.group, ariaLabel: 'Group', attrs: { 'data-people-group': '' },
-      items: [{ id: 'all', label: COPY.all, count: all.length }, { id: 'team', label: COPY.team, count: all.filter((p) => !p.external).length },
-        { id: 'external', label: COPY.external, count: all.filter((p) => p.external).length }],
-      onChange: (val) => { inst.group = val; draw(inst); } }),
-    tabs({ variant: 'segmented', value: inst.sort, ariaLabel: 'Sort', attrs: { 'data-people-sort': '' },
-      items: [{ id: 'latest', label: COPY.latest }, { id: 'most', label: COPY.most }, { id: 'name', label: COPY.name }],
-      onChange: (val) => { inst.sort = val; draw(inst); } }));
   const list = shownPeople(inst);
   let rows;
   if (!v.people.length) rows = [el('p', { class: 'rp-section__empty' }, COPY.none)];
   else if (!list.length) rows = [el('p', { class: 'rp-section__empty' }, COPY.noMatch(inst.q.trim()))];
   else rows = [el('div', { role: 'list', 'data-people-list': '' }, list.map((p) => personLine(inst, p)))];
-  return el('div', { class: 'rp-people-list' }, controls, ...rows);
+  return el('div', { class: 'rp-people-card' },
+    el('div', { class: 'rp-people-card__header' },
+      el('p', { class: 'rp-people-card__label' }, COPY.title, el('span', { class: 'rp-people-card__count' }, all.length))),
+    inst.head.find,
+    tabs({ variant: 'segmented', full: true, value: inst.sort, ariaLabel: 'Sort', attrs: { 'data-people-sort': '' },
+      items: [{ id: 'latest', label: COPY.latest }, { id: 'most', label: COPY.most }, { id: 'name', label: COPY.name }],
+      onChange: (val) => { inst.sort = val; draw(inst); } }),
+    el('div', { class: 'rp-people-card__list' }, ...rows));
 }
 
 /* ── the person's page ───────────────────────────────────────────────────────────────────────────────────────────── */
@@ -250,11 +247,16 @@ function section(title, kids, attrs) {
 
 function interactionsSec(p) {
   if (!p.interactions.length) return section(COPY.interactions, [el('p', { class: 'rp-people-hint' }, COPY.noInteractions)], { 'data-people-sec': 'interactions' });
-  return section(`${COPY.interactions} · ${p.count}`, [el('ol', { class: 'rp-people-ints' }, p.interactions.slice(0, 50).map((i) =>
-    el('li', { class: 'rp-people-int', 'data-people-int': i.date },
-      el('span', { class: 'rp-people-int__when' }, `${day(i.date)} · ${i.kind}`),
-      el('span', { class: 'rp-people-int__text' }, i.text),
-      el('span', { class: 'rp-people-int__src' }, [SOURCE[i.source] || i.source, i.pointer, i.tone].filter(Boolean).join(' · ')))))],
+  const icons = { mail: 'mail', live: 'message-square', calendar: 'calendar', jira: 'ticket', gather: 'file-text', plan: 'file-text', notes: 'file-text' };
+  return section(`${COPY.interactions} · ${p.count}`, [el('div', { class: 'rp-people-ints' }, p.interactions.slice(0, 50).map((i) => {
+    const iconName = icons[i.source] || 'file-text';
+    return el('div', { class: 'rp-people-int', 'data-people-int': i.date },
+      el('span', { class: 'rp-people-int__icon' }, icon(iconName)),
+      el('div', {},
+        el('div', { class: 'rp-people-int__text' }, i.text),
+        el('small', {}, `${day(i.date)} · ${i.kind}`),
+        el('small', { class: 'rp-people-int__src' }, [SOURCE[i.source] || i.source, i.pointer, i.tone].filter(Boolean).join(' · '))));
+  }))],
   { 'data-people-sec': 'interactions' });
 }
 
@@ -267,8 +269,6 @@ function toneSec(inst, p) {
   else if (t.proposed) kids.push(el('p', { class: 'rp-people-tone', 'data-people-proposed': t.proposed }, COPY.proposed(t.proposed)));
   if (mix) kids.push(el('p', { class: 'rp-people-hint', 'data-people-mix': '' }, mix));
   const acts = [];
-  if (!t.confirmed && t.proposed) acts.push(button({ label: COPY.confirm, variant: 'primary', size: 'sm', attrs: { 'data-people-act': 'tone-confirm' },
-    onClick: () => decide(inst, { act: 'tone', person: p.id, tone: t.proposed }, COPY.toneSaved) }));
   const another = button({ label: COPY.setAnother, variant: 'outline', size: 'sm', iconEnd: 'chevron-down', attrs: { 'data-people-act': 'tone-set', 'aria-haspopup': 'menu' },
     onClick: () => menu({ anchor: another, ariaLabel: COPY.setAnother,
       items: TONES.map((x) => ({ label: x, onSelect: () => decide(inst, { act: 'tone', person: p.id, tone: x }, COPY.toneSaved) })) }) });
@@ -281,25 +281,24 @@ function toneSec(inst, p) {
 
 function sharedSec(p) {
   const s = p.shared;
-  const lines = [];
-  for (const g of s.initiatives) lines.push(el('li', { class: 'rp-people-shared', 'data-people-shared': 'initiative' }, `${g.id} · ${g.count} interaction${g.count === 1 ? '' : 's'}`));
+  const chips = [];
+  for (const g of s.initiatives) chips.push(el('span', { class: 'rp-people-chip', 'data-people-shared': 'initiative' }, icon('target'), `${g.id} · ${g.count} interaction${g.count === 1 ? '' : 's'}`));
   for (const it of s.items) {
-    lines.push(el('li', { class: 'rp-people-shared', 'data-people-shared': 'item', 'data-people-item': it.id },
-      `${COPY.owns} ${it.title || it.id}${it.initiative ? ' · ' + it.initiative : ''} · ${it.state}`,
-      it.blocked ? badge({ text: COPY.blocked, tone: 'warning', attrs: { title: it.reason || COPY.blocked } }) : null));
+    const chip = el('span', { class: 'rp-people-chip', 'data-people-shared': 'item', 'data-people-item': it.id }, icon(it.blocked ? 'ban' : 'target'), `${COPY.owns} ${it.title || it.id}${it.blocked ? ' · ' + COPY.blocked : ''}`);
+    if (it.blocked) chip.classList.add('warn');
+    chips.push(chip);
   }
   for (const m of s.meetings) {
     const when = new Date(m.start);
-    lines.push(el('li', { class: 'rp-people-shared', 'data-people-shared': 'meeting' },
-      `${COPY.meeting} · ${when.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })} ${when.toTimeString().slice(0, 5)} · ${m.title}`));
+    chips.push(el('span', { class: 'rp-people-chip', 'data-people-shared': 'meeting' }, icon('calendar'), `${when.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })} · ${m.title}`));
   }
-  return section(COPY.shared, lines.length ? [el('ul', { class: 'rp-people-list-plain' }, lines)] : [el('p', { class: 'rp-people-hint' }, COPY.noShared)], { 'data-people-sec': 'shared' });
+  return section(COPY.shared, chips.length ? [el('div', { class: 'rp-people-chips' }, chips)] : [el('p', { class: 'rp-people-hint' }, COPY.noShared)], { 'data-people-sec': 'shared' });
 }
 
 function notesSec(inst, p) {
-  const list = p.notes.map((n) => el('li', { class: 'rp-people-note', 'data-people-note': n.id },
+  const list = p.notes.map((n) => el('div', { class: 'rp-people-note', 'data-people-note': n.id },
     el('span', { class: 'rp-people-note__text' }, n.text),
-    button({ label: COPY.remove, variant: 'ghost', size: 'sm', attrs: { 'data-people-act': 'note-remove', 'data-people-key': n.id },
+    iconButton({ icon: 'x', ariaLabel: COPY.remove, size: 'sm', attrs: { 'data-people-act': 'note-remove', 'data-people-key': n.id },
       onClick: () => decide(inst, { act: 'note-remove', person: p.id, id: n.id }, COPY.noteRemoved) })));
   const f = field({ label: COPY.addNote, kind: 'textarea', hideLabel: true, placeholder: COPY.notePlaceholder, attrs: { 'data-people-field': 'note' } });
   const save = async () => {
@@ -310,8 +309,8 @@ function notesSec(inst, p) {
     if (r) f.control.value = '';
   };
   return section(COPY.notes, [
-    list.length ? el('ul', { class: 'rp-people-list-plain' }, list) : el('p', { class: 'rp-people-hint' }, COPY.noNotes),
-    el('div', { class: 'rp-people-noteadd' }, f, el('div', { class: 'rp-people-acts' }, button({ label: COPY.addNote, variant: 'outline', size: 'sm', attrs: { 'data-people-act': 'note-add' }, onClick: save }))),
+    list.length ? el('div', { class: 'rp-people-list-plain' }, list) : el('p', { class: 'rp-people-hint' }, COPY.noNotes),
+    el('div', { class: 'rp-people-noteadd' }, f, iconButton({ icon: 'plus', ariaLabel: COPY.addNote, size: 'sm', attrs: { 'data-people-act': 'note-add' }, onClick: save })),
   ], { 'data-people-sec': 'notes' });
 }
 
@@ -319,25 +318,52 @@ function identitySec(inst, p) {
   const by = {};
   for (const i of p.interactions) by[i.source] = (by[i.source] || 0) + 1;
   const file = inst.view.file ? String(inst.view.file).split('/').slice(-3).join('/') : 'people.jsonl';
-  return section(COPY.identity, [
-    el('ul', { class: 'rp-people-list-plain' },
-      p.handles.map((h) => el('li', { class: 'rp-people-handle', 'data-people-handle': h.kind + ':' + h.value }, handleText(h))),
-      Object.entries(by).map(([s, n]) => el('li', { class: 'rp-people-hint' }, `${SOURCE[s] || s}: ${n} interaction${n === 1 ? '' : 's'}`))),
-    (p.sources || []).length ? el('p', { class: 'rp-people-hint', 'data-people-sources': p.sources.join(',') }, COPY.foundIn(p.sources.map((s) => SOURCE[s] || s).join(', '))) : null,
-    el('p', { class: 'rp-people-hint rp-people-file' }, COPY.lives(file)),
-  ], { 'data-people-sec': 'identity' });
+  const details = el('details', { class: 'rp-people-sec', 'data-people-sec': 'identity' },
+    el('summary', {},
+      icon('chevron-down'),
+      COPY.identity),
+    el('div', { class: 'rp-people-list-plain' },
+      p.handles.map((h) => el('div', { class: 'rp-people-handle', 'data-people-handle': h.kind + ':' + h.value }, handleText(h))),
+      Object.entries(by).map(([s, n]) => el('div', { class: 'rp-people-hint' }, `${SOURCE[s] || s}: ${n} interaction${n === 1 ? '' : 's'}`)),
+      (p.sources || []).length ? el('div', { class: 'rp-people-hint', 'data-people-sources': p.sources.join(',') }, COPY.foundIn(p.sources.map((s) => SOURCE[s] || s).join(', '))) : null,
+      el('div', { class: 'rp-people-hint rp-people-file' }, COPY.lives(file))));
+  return details;
 }
 
 function personPane(inst) {
   const p = inst.view.people.find((x) => x.id === inst.open);
-  if (!p) return el('div', { class: 'rp-people-page' }, el('p', { class: 'rp-section__empty' }, COPY.pick));
-  return el('article', { class: 'rp-people-page', 'data-people-page': p.id },
-    el('header', { class: 'rp-people-who' },
-      el('h3', { class: 'rp-people-who__name' }, p.name),
-      el('p', { class: 'rp-people-hint' }, [who(p), p.external && (p.role || p.org) ? COPY.external : null].filter(Boolean).join(' · ')),
-      el('div', { class: 'rp-people-acts' }, button({ label: COPY.removeFromPeople, variant: 'ghost', size: 'sm', attrs: { 'data-people-act': 'remove' },
-        onClick: async () => { const r = await decide(inst, { act: 'remove', person: p.id }, COPY.removed(p.name)); if (r) { inst.open = null; draw(inst); } } }))),
-    interactionsSec(p), toneSec(inst, p), sharedSec(p), notesSec(inst, p), identitySec(inst, p));
+  if (!p) return el('div', { class: 'rp-people-card' }, el('p', { class: 'rp-section__empty' }, COPY.pick));
+  const t = p.tone;
+  const confirmBtn = !t.confirmed && t.proposed ? button({ label: COPY.confirm + ' ' + t.proposed, icon: 'check', variant: 'primary', size: 'sm',
+    attrs: { 'data-people-act': 'tone-confirm' },
+    onClick: () => decide(inst, { act: 'tone', person: p.id, tone: t.proposed }, COPY.toneSaved) }) : null;
+  const moreBtn = iconButton({ icon: 'ellipsis', ariaLabel: 'More', attrs: { 'data-people-act': 'more' },
+    onClick: () => menu({ anchor: moreBtn, ariaLabel: 'Actions', items: [
+      { label: COPY.removeFromPeople, icon: 'x', attrs: { 'data-people-act': 'remove' }, onSelect: async () => { const r = await decide(inst, { act: 'remove', person: p.id }, COPY.removed(p.name)); if (r) { inst.open = null; draw(inst); } } }
+    ] }) });
+  return el('article', { class: 'rp-people-card', 'data-people-page': p.id },
+    el('div', { class: 'rp-people-page__header' },
+      el('div', { class: 'rp-people-page__info' },
+        el('span', { class: 'rp-people-page__avatar' }, p.name.split(/\s+/).map((w) => w[0]).join('').toUpperCase()),
+        el('div', { class: 'rp-people-page__text' },
+          el('h3', { class: 'rp-people-page__name' }, p.name),
+          el('p', { class: 'rp-people-hint' }, [who(p), p.external && (p.role || p.org) ? COPY.external : null].filter(Boolean).join(' · ')))),
+      el('div', { class: 'rp-people-page__actions' }, confirmBtn, moreBtn)),
+    el('div', { class: 'rp-people-page__tiles' },
+      el('div', { class: 'rp-people-tile' },
+        el('p', { class: 'rp-people-tile__label' }, COPY.interactions),
+        el('b', {}, p.count && p.last ? `${p.count} · ${day(p.last)}` : String(p.count || 0))),
+      el('div', { class: 'rp-people-tile' },
+        el('p', { class: 'rp-people-tile__label' }, COPY.tone),
+        el('b', {}, t.confirmed || t.proposed ? [
+          el('i', { class: 'rp-people-tile__dot ' + (t.confirmed ? 'rp-people-tile__dot--confirmed' : 'rp-people-tile__dot--proposed') }),
+          ' ', t.confirmed ? t.confirmed : (t.proposed + '?')
+        ] : 'None')),
+      el('div', { class: 'rp-people-tile' },
+        el('p', { class: 'rp-people-tile__label' }, COPY.shared),
+        el('b', {}, p.shared.initiatives.length ? `${p.shared.initiatives.length} ${p.shared.initiatives.length === 1 ? 'initiative' : 'initiatives'}` : 'None'))),
+    el('div', { class: 'rp-people-page__scroll' },
+      interactionsSec(p), toneSec(inst, p), sharedSec(p), notesSec(inst, p), identitySec(inst, p)));
 }
 
 /* ── the page ────────────────────────────────────────────────────────────────────────────────────────────────────── */
@@ -348,7 +374,15 @@ function header(inst) {
   const q = find.control;
   q.addEventListener('input', () => { inst.q = q.value; draw(inst); });
   q.addEventListener('keydown', (e) => { if (e.key === 'Escape') { q.resetCommitted(''); inst.q = ''; draw(inst); } });
-  inst.head = el('div', { class: 'rp-people-top' }, el('h2', { class: 'rp-head__title' }, COPY.title), el('div', { class: 'rp-people-find' }, find));
+  const v = inst.view || { people: [] };
+  const all = v.people ? v.people.filter((p) => matches(p, inst.q.trim().toLowerCase())) : [];
+  const titleText = v.people && v.people.length ? `${v.people.length} ${v.people.length === 1 ? 'person' : 'people'}` : COPY.title;
+  inst.titleEl = el('h2', { class: 'rp-head__title' }, titleText);
+  inst.head = el('div', { class: 'rp-people-top' },
+    inst.titleEl,
+    tabs({ variant: 'segmented', value: inst.group, ariaLabel: 'Group', attrs: { 'data-people-group': '' },
+      items: [{ id: 'all', label: COPY.all }, { id: 'team', label: COPY.team }, { id: 'external', label: COPY.external }],
+      onChange: (val) => { inst.group = val; draw(inst); } }));
   inst.head.find = find;
   return inst.head;
 }
@@ -367,5 +401,9 @@ function draw(inst) {
   // Focus stays in a note being typed: a redraw of the page would drop it, so it waits until the field is left.
   const typing = document.activeElement && inst.body.contains(document.activeElement) && document.activeElement.matches('textarea');
   if (typing) { inst.last = ''; return; }
-  inst.body.replaceChildren(...[review(inst), el('div', { class: 'rp-people-grid' }, listPane(inst), personPane(inst))].filter(Boolean));
+  const n = inst.view.people.length;
+  inst.titleEl.textContent = n ? `${n} ${n === 1 ? 'person' : 'people'}` : COPY.title;
+  const rev = review(inst);
+  const grid = el('div', { class: 'rp-people-grid' }, listPane(inst), personPane(inst));
+  inst.body.replaceChildren(...[rev, grid].filter(Boolean));
 }

package/workspace/public/pm/dock-sessions.js

@@ -89,9 +89,10 @@ export function groupsOf(repo, { all = false } = {}) {
   const out = [...by.keys()].sort((a, b) => rank(a) - rank(b) || a.localeCompare(b))
     .map((i) => ({ key: 'i:' + i, title: titleOf(i), initiative: i, automatic: false, sessions: by.get(i) }));
   if (none.length) out.push({ key: 'none', title: C().notLinked, initiative: null, automatic: false, sessions: none });
-  // hidden by default; the session in front is never hidden, and neither is one that is waiting on the PM
+  // hidden by default; the session in front is never hidden, and neither is one held on a permission call (a finished agent reads
+  // 'needs you' too, so that state alone does not show it)
   const front = frontSessionId();
-  const show = all || state.dsShowAuto || sched.some((s) => s.id === front || s.shown === 'needs' || s.shown === 'blocked');
+  const show = all || state.dsShowAuto || sched.some((s) => s.id === front || s.shown === 'blocked');
   if (sched.length && show) out.push({ key: 'auto', title: C().automatic, initiative: null, automatic: true, sessions: sched });
   return out;
 }

package/workspace/public/pm/dock.js

@@ -9,8 +9,8 @@
  *   createDockRail({ open, resize })     the 44px rail: one control that opens the dock. While the dock is open the rail
  *                                         is a thin grip on the dock's left edge that resizes it (0.53.1)
  *   foldButton({ fold })                  the control in the open dock's strip that folds it back to the rail
- *   focusButton({ toggle }) / paintFocus(b, on)
- *                                         Focus: the dock takes the whole window, and Exit focus gives the page back (0.53.1)
+ *   dockSizeButton({ setSize, getState }) / paintDockSize(b, size, inFocus)
+ *                                         Dock size menu: Normal, Half, Two-thirds, Whole window (focus; 0.53.1, folded into the menu later)
  *   sessionMenuButton({ open, ws })      "＋ Session": opens the new-session sheet (dock-sessions.js): a blank
  *                                         session or a skill to start from (R10; one list since 0.55.1)
  *   sessionDefaults() / setSessionDefaults(patch)
@@ -23,7 +23,7 @@
 import { el } from './dom.js';
 import { FIXTURE } from './state.js';
 import { pmGet } from './http.js';
-import { button, iconButton } from './primitives.js';
+import { button, iconButton, menu } from './primitives.js';
 import { icon } from './icons.js';
 import { COPY } from './frame-copy.js';
 
@@ -103,19 +103,59 @@ const endDrag = () => { if (drag) { drag.g.removeAttribute('data-dragging'); dra
 window.addEventListener('pointerup', endDrag);
 window.addEventListener('pointercancel', endDrag);
 
-/* 0.55.1: icon only (the PM asked for no label): maximize-2 to focus, minimize-2 to leave; the name is the aria-label. */
-export function focusButton({ toggle } = {}) {
-  return iconButton({ icon: 'maximize-2', ariaLabel: COPY.dock.focusTitle, onClick: () => toggle && toggle(),
-    attrs: { class: 'fr-dock-focus', 'data-fr': 'dock-focus', 'aria-pressed': 'false', 'aria-keyshortcuts': 'Meta+Shift+J Control+Shift+J' } });
+/* Dock size menu: Normal, Half, Two-thirds, or Whole window (focus). It replaces the old Focus button; focus is its last row
+ * and keeps ⌘⇧J. The button shows the current size; the menu is built on each press, so it always shows the current choice. */
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const SIZE_SHARE = { normal: 7, half: 9, 'two-thirds': 12 };   // width of the filled part of the glyph, out of 18
+/** A small window glyph with the dock's share filled on the right. Own SVG: the vendored sprite has no such symbol. */
+function sizeGlyph(size) {
+  const svg = icon('square');   // the primitive's own <svg> (class, size, aria-hidden); its symbol is replaced below
+  svg.replaceChildren();
+  svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'none');
+  svg.setAttribute('stroke', 'currentColor');
+  svg.setAttribute('stroke-width', '2');
+  svg.setAttribute('data-icon', 'dock-' + size);
+  const frame = document.createElementNS(SVG_NS, 'rect');
+  for (const [k, v] of Object.entries({ x: 3, y: 5, width: 18, height: 14, rx: 2 })) frame.setAttribute(k, String(v));
+  const fill = document.createElementNS(SVG_NS, 'rect');
+  const w = SIZE_SHARE[size] || SIZE_SHARE.normal;
+  for (const [k, v] of Object.entries({ x: 21 - w, y: 5, width: w, height: 14 })) fill.setAttribute(k, String(v));
+  fill.setAttribute('fill', 'currentColor');
+  fill.setAttribute('stroke', 'none');
+  svg.append(frame, fill);
+  return svg;
 }
-/** Show the Focus control's state: pressed while the dock has the whole window. */
-export function paintFocus(b, on) {
+const sizeNode = (size, inFocus) => (inFocus ? icon('minimize-2') : sizeGlyph(size || 'normal'));
+
+export function dockSizeButton({ setSize, getState } = {}) {
+  return iconButton({ icon: 'maximize-2', ariaLabel: COPY.dock.dockSize,
+    attrs: { class: 'fr-dock-size', 'data-fr': 'dock-size', 'aria-haspopup': 'menu', 'aria-expanded': 'false', 'aria-keyshortcuts': 'Meta+Shift+J Control+Shift+J' },
+    onClick: (e) => {
+      const b = e.currentTarget;
+      const st = (getState && getState()) || {};
+      const cur = st.inFocus ? 'whole' : (st.size || 'normal');
+      const row = (id, label, hint, node) => ({
+        label, iconNode: node, hint, role: 'menuitemradio',
+        attrs: { 'data-size': id, 'aria-checked': cur === id ? 'true' : 'false' },
+        onSelect: () => setSize && setSize(id),
+      });
+      menu({ anchor: b, ariaLabel: COPY.dock.dockSizeMenu, items: [
+        row('normal', COPY.dock.sizeNormal, '', sizeGlyph('normal')),
+        row('half', COPY.dock.sizeHalf, '', sizeGlyph('half')),
+        row('two-thirds', COPY.dock.sizeTwoThirds, '', sizeGlyph('two-thirds')),
+        row('whole', COPY.dock.sizeWhole, '⌘⇧J', icon('maximize-2')),
+      ] });
+    } });
+}
+
+/** Show the button's glyph and name for the current size. */
+export function paintDockSize(b, size, inFocus) {
   if (!b) return;
-  const name = on ? 'minimize-2' : 'maximize-2';
+  const want = inFocus ? 'minimize-2' : 'dock-' + (size || 'normal');
   const cur = b.querySelector('[data-icon]');
-  if (!cur || cur.getAttribute('data-icon') !== name) b.replaceChildren(icon(name));
-  b.setAttribute('aria-pressed', on ? 'true' : 'false');
-  const label = on ? COPY.dock.unfocusTitle : COPY.dock.focusTitle;
+  if (!cur || cur.getAttribute('data-icon') !== want) b.replaceChildren(sizeNode(size, inFocus));
+  const label = inFocus ? COPY.dock.unfocusTitle : COPY.dock.dockSize;
   b.setAttribute('aria-label', label);
   b.title = label;
 }

package/workspace/public/pm/frame-copy.js

@@ -62,6 +62,12 @@ export const COPY = {
     unfocus: 'Exit focus',
     focusTitle: 'Give the dock the whole window (⌘⇧J)',
     unfocusTitle: 'Show the page beside the dock again (⌘⇧J)',
+    dockSize: 'Dock size',
+    dockSizeMenu: 'Choose dock size',
+    sizeNormal: 'Normal',
+    sizeHalf: 'Half the window',
+    sizeTwoThirds: 'Two-thirds',
+    sizeWhole: 'Whole window (focus)',
     resize: 'Resize the agent dock. Drag, or use the left and right arrow keys. Double-click resets the width.',
     session: 'Session',
     sessionMenu: 'Start a session',

package/workspace/public/pm/panel-tabs.js

@@ -1152,11 +1152,14 @@ function frameDock() {
         open: () => (dsMod ? dsMod.openNewSessionSheet(currentProduct(), { initiative: null }) : newSession()),
       }),
       fold: dockParts ? dockParts.fold : dockMod.foldButton({ fold: () => window.pmApp.frame.foldDock() }),
-      focus: dockParts ? dockParts.focus : dockMod.focusButton({ toggle: () => window.pmApp.frame.toggleFocus() }),
+      size: dockParts ? dockParts.size : dockMod.dockSizeButton({
+        setSize: (sz) => window.pmApp.frame.setDockSize(sz),
+        getState: () => ({ size: window.pmApp.frame.dockSize, inFocus: !!window.pmApp.frame.dockMax }),
+      }),
     };
   }
-  if (isMobile()) return { session: dockParts.session, fold: null, focus: null, orient: null };
-  dockMod.paintFocus(dockParts.focus, !!window.pmApp.frame.dockMax);
+  if (isMobile()) return { session: dockParts.session, fold: null, size: null, orient: null };
+  dockMod.paintDockSize(dockParts.size, window.pmApp.frame.dockSize, !!window.pmApp.frame.dockMax);
   // the tabs-on-top / tabs-at-side switch, icon only in the frame (0.55.1); drawn per paint because its icon follows the mode
   // one element across paints, so the keyboard focus stays on it; only its icon and name follow the mode
   const v = !!state.tabsVertical;
@@ -1170,7 +1173,7 @@ function frameDock() {
   const olabel = v ? COPY.dock.topTabs : COPY.dock.sideTabs;
   dockOrient.setAttribute('aria-label', olabel);
   dockOrient.title = olabel;
-  return { session: dockParts.session, fold: dockParts.fold, focus: dockParts.focus, orient: dockOrient };
+  return { session: dockParts.session, fold: dockParts.fold, size: dockParts.size, orient: dockOrient };
 }
 
 /**
@@ -1395,7 +1398,7 @@ export function renderTabs(host) {
         newSessionOptsBtn,
         canSplit ? splitBtn : null,
         orientBtn,
-        fr ? fr.focus : null,
+        fr ? fr.size : null,
         fr ? fr.fold : null),
     ]);
   } else if (ck) {
@@ -1410,7 +1413,7 @@ export function renderTabs(host) {
     ].filter(Boolean);
     extras[0].style.marginLeft = 'auto';
     // The switch sits after `+ session`, so the strip still ends the mockup's way in the fixture, which does not draw it.
-    setChildren(tabBar, [...visTabs.map((t) => cockpitTabNode(t, act, splitTab)), ...extras, fr ? fr.session : newSessionBtn, FIXTURE ? null : orientBtn, fr ? fr.focus : null, fr ? fr.fold : null]);
+    setChildren(tabBar, [...visTabs.map((t) => cockpitTabNode(t, act, splitTab)), ...extras, fr ? fr.session : newSessionBtn, FIXTURE ? null : orientBtn, fr ? fr.size : null, fr ? fr.fold : null]);
   } else {
     tabBar.setAttribute('style', BAR_STYLE);
     newSessionBtn.setAttribute('style', CHIP_STYLE);
@@ -1437,11 +1440,11 @@ export function renderTabs(host) {
       ...dsMod.railNodes(ds, others.map((t) => dockTabRow(t, (act && act.id === t.id) || (splitTab && splitTab.id === t.id)))),
     ] : [
       ...dsMod.stripNodes(ds, others.map((t) => dockTabChip(t, (act && act.id === t.id) || (splitTab && splitTab.id === t.id)))),
-      state.splitId ? splitBtn : null, fr.orient, fr.focus, fr.fold,
+      state.splitId ? splitBtn : null, fr.orient, fr.size, fr.fold,
     ]);
   }
 
-  if (ck && ds && vertical) setChildren(dockHead, [fr.session, state.splitId ? splitBtn : null, fr.orient, fr.focus, fr.fold]);
+  if (ck && ds && vertical) setChildren(dockHead, [fr.session, state.splitId ? splitBtn : null, fr.orient, fr.size, fr.fold]);
   if (tabBar.scrollLeft !== keepX) tabBar.scrollLeft = keepX;
   if (tabBar.scrollTop !== keepY) tabBar.scrollTop = keepY;
   // When the tab in front changes, the bar scrolls just enough to show it, so a tab opened at the far end of a crowded strip or a

package/workspace/public/pm/primitives.js

@@ -354,9 +354,9 @@ export function menu({ anchor, items, ariaLabel } = {}) {
     if (it.sep) { node.appendChild(el('div', { class: 'pmc-menu__sep', role: 'separator' })); continue; }
     const b = el('button', {
       ...(it.attrs || {}),
-      type: 'button', role: 'menuitem', tabindex: '-1', class: cx('pmc-menu__item', it.danger && 'pmc-menu__item--danger'),
+      type: 'button', role: it.role || 'menuitem', tabindex: '-1', class: cx('pmc-menu__item', it.danger && 'pmc-menu__item--danger'),
       onClick: (e) => { e.stopPropagation(); close(false); if (it.onSelect) it.onSelect(); },
-    }, it.icon ? icon(it.icon) : null, el('span', null, it.label));
+    }, it.iconNode || (it.icon ? icon(it.icon) : null), el('span', null, it.label), it.hint ? el('kbd', { class: 'pmc-menu__hint' }, it.hint) : null);
     btns.push(b); node.appendChild(b);
   }
   node.addEventListener('toggle', (e) => { if (e.newState === 'closed') close(false); });

package/workspace/public/pm/today-copy.js

@@ -104,13 +104,15 @@ export const COPY = {
     toggle: (need) => (need ? `Your day · ${need} ${need === 1 ? 'needs' : 'need'} you` : 'Your day: calendar, jobs, goals and mentions'),
     fold: 'Fold your day',
     hello: { morning: 'Good morning.', afternoon: 'Good afternoon.', evening: 'Good evening.' },
+    unfinished: (open, all) => (!all ? 'No goals yet' : open ? `${open} unfinished ${open === 1 ? 'goal' : 'goals'}` : 'All goals done'),
     free: (min) => `${Math.floor(min / 60)} h ${min % 60} min free`,
     steps: ['Read', 'Sort', 'Agents work', 'You approve'],
     stepTitle: ['Read your sources', 'Make the jobs', 'Agents do the work', 'You approve'],
     stepHint: ['The session reads your calendar and your mentions.', 'Each job is tied to a goal or a meeting.', 'One session per job, at most 5 at once.', 'Only what sends or decides waits for you.'],
     stepOf: (n) => `Prepare my day · step ${n} of 4`,
     status: {
-      idle: 'One press: the agent reads, makes the jobs and does them. You approve only what sends or decides.',
+      idle: 'Not prepared yet',
+      last: (at, n) => (at ? `Last prepared ${at}` : 'Prepared today') + (n ? ` · ${n} ${n === 1 ? 'needs' : 'need'} you` : ''),
       reading: 'Reading your calendar and mentions…',
       readFailed: (why) => `The read stopped: ${why}`,
       working: (w, n) => `${w} ${w === 1 ? 'agent' : 'agents'} working · ${n} ${n === 1 ? 'needs' : 'need'} you`,

package/workspace/public/pm/today-day.js

@@ -389,34 +389,38 @@ function select(type, id) {
 function topBar(ctx) {
   const { m, ws } = ctx;
   const si = stepIndex(m.stage);
-  const steps = el('ol', { class: 'td-day__steps', 'aria-label': D.prepare }, ...D.steps.map((t, i) => {
+  const press = runs.get(ws);
+  const busy = !!press && press.state === 'busy';
+  const bs = m.run && m.run.brief_session;
+  const reading = !!bs && !bs.ended_at && m.stage === 'reading' && !m.readFailed;
+  // the four steps show as a small progress bar only while Prepare my day is running; otherwise the bar says when it last ran
+  const inProgress = busy || reading || (!!m.run && m.stage === 'working');
+  const steps = inProgress ? el('ol', { class: 'td-day__steps', 'aria-label': D.prepare }, ...D.steps.map((t, i) => {
     const st = si < 0 ? 'todo' : i < si || si === 4 ? 'done' : i === si ? 'now' : 'todo';
-    return el('li', null, button({ label: [el('span', { class: 'td-day__tsdot', 'aria-hidden': 'true' }), t], variant: 'ghost', size: 'sm', onClick: () => select('step', i),
-      attrs: { class: 'td-day__ts', 'data-step-state': st, 'data-day-step': String(i), 'data-day-sel': 'step:' + i, 'aria-current': ctx.cur('step', String(i)), title: D.stepHint[i] } }));
-  }));
+    return el('li', null, button({ label: [el('span', { class: 'td-day__seg', 'aria-hidden': 'true' })], variant: 'ghost', size: 'sm', onClick: () => select('step', i),
+      attrs: { class: 'td-day__ts', 'data-step-state': st, 'data-day-step': String(i), 'data-day-sel': 'step:' + i, 'aria-current': ctx.cur('step', String(i)), 'aria-label': t + ': ' + D.stepHint[i], title: t + ': ' + D.stepHint[i] } }));
+  })) : null;
   const working = m.tasks.filter((t) => t.status === 'working' || t.status === 'sending').length;
-  const status = !m.run ? D.status.idle : m.readFailed ? D.status.readFailed(m.readFailed.why) : m.stage === 'reading' ? D.status.reading : m.stage === 'working' ? D.status.working(working, m.needs)
-    : m.stage === 'review' ? D.status.review(m.needs, m.done) : D.status.done(m.done);
+  const started = m.run && m.run.started_at ? hhmm(m.run.started_at) : '';
+  const status = !m.run ? (busy ? D.starting : D.status.idle) : m.readFailed ? D.status.readFailed(m.readFailed.why) : m.stage === 'reading' ? D.status.reading : m.stage === 'working' ? D.status.working(working, m.needs)
+    : D.status.last(started, m.needs);
   let check = null;
   if (m.run && m.check) {
     const every = m.settings && m.settings.dayCheck && typeof m.settings.dayCheck.every === 'number' ? m.settings.dayCheck.every : m.check.every;
     const running = !!m.check.running || ui.busy.has('check');
-    check = every === 0 ? el('span', { class: 'td-day__check', 'data-day': 'check' }, D.checkOff)
-      : el('span', { class: 'td-day__check', 'data-day': 'check' }, el('span', null, running ? D.checking : D.checked(hhmm(m.check.last), hhmm(m.check.next))),
-        button({ label: D.checkNow, size: 'sm', disabled: running, attrs: { 'data-day': 'check-now' }, onClick: () => checkNow(ws) }));
+    check = every === 0 ? el('span', { class: 'td-day__check', 'data-day': 'check', title: D.checkOff }, D.checkOff)
+      : el('span', { class: 'td-day__check', 'data-day': 'check', title: running ? D.checking : D.checked(hhmm(m.check.last), hhmm(m.check.next)) },
+        iconButton({ icon: 'refresh-cw', ariaLabel: D.checkNow, size: 'sm', attrs: { 'data-day': 'check-now', disabled: running ? 'true' : null }, onClick: () => checkNow(ws) }));
   }
-  const press = runs.get(ws);
-  const busy = !!press && press.state === 'busy';
-  const bs = m.run && m.run.brief_session;
-  const reading = !!bs && !bs.ended_at && m.stage === 'reading' && !m.readFailed;
   const label = busy ? D.starting : reading ? D.stillReading : m.run ? D.again : D.prepare;
+  const open = m.allGoals.filter((g) => g.status === 'open').length;
   return el('header', { class: 'td-day__bar' },
-    (() => { const when = [dateLabel(m.now), m.free !== null && m.free !== undefined ? D.free(m.free) : null].filter(Boolean).join(' · ');
+    (() => { const when = [dateLabel(m.now), D.unfinished(open, m.allGoals.length)].filter(Boolean).join(' · ');
       return el('div', { class: 'td-day__hello', title: greet(m.now) + ' ' + when }, el('b', null, greet(m.now)), ' ', el('span', { class: 'td-day__dim' }, when)); })(),
     steps,
     el('span', { class: 'td-day__status', role: 'status', 'data-day': 'status', title: status }, status),
     check,
-    button({ label: D.sources, size: 'sm', attrs: { 'data-day': 'sources', 'data-day-sel': 'sources:all', 'aria-current': ctx.cur('sources', 'all') }, onClick: () => select('sources', 'all') }),
+    iconButton({ icon: 'settings', ariaLabel: D.sources, size: 'sm', attrs: { 'data-day': 'sources', 'data-day-sel': 'sources:all', 'aria-current': ctx.cur('sources', 'all') }, onClick: () => select('sources', 'all') }),
     button({ label, variant: 'primary', size: 'sm', disabled: busy || reading, attrs: { 'data-day': 'prepare', 'data-goals': 'prepare-day', title: D.prepareHint, 'aria-busy': busy ? 'true' : 'false' }, onClick: () => prepareDay(ws) }),
     iconButton({ icon: 'chevron-down', ariaLabel: D.fold, size: 'sm', expanded: true, attrs: { 'data-day': 'toggle' }, onClick: () => fold(false) }));
 }

package/workspace/public/pm/topbar.js

@@ -37,7 +37,7 @@ export function unsyncedOf(st) {
 }
 
 /** The lucide symbol each place wears in the bar (UI comfort, 2026-10-07: a word alone is slow to find; the phone's tab bar already wears these). */
-const NAV_ICON = Object.freeze({ today: 'house', mywork: 'list-checks', initiatives: 'target', board: 'square-kanban', reports: 'chart-column', docs: 'file-text', people: 'share-2', settings: 'settings' });
+const NAV_ICON = Object.freeze({ today: 'house', mywork: 'list-checks', initiatives: 'target', board: 'square-kanban', reports: 'chart-column', docs: 'file-text', people: 'users', settings: 'settings' });
 
 export function createTopbar({ go, openPalette, repoMenu, sync } = {}) {
   const node = el('header', { class: 'fr-bar', 'data-shell': 'top', 'data-fr': 'bar' });