create-pmos 0.67.0 → 0.68.0

package/workspace/public/pm/doc-remote.js

@@ -0,0 +1,180 @@
+/* pm/doc-remote.js — the document's Confluence (or Google Docs) copy, in the document tab's bar (workspace-tabs-declutter).
+ *
+ * The PM asked for Confluence sync where the document is open, not only on the Docs page. Nothing new is decided here:
+ * the state comes from the same store the Docs page reads (`/api/docs`, lib/doc-sync-store.js), and every act is the
+ * Docs page's act on the same route: Use … version (held five seconds behind Undo, then one doc-sync session that
+ * writes one side with the PM's own connector), Compare (one doc-check session that only reads), and Add copy. Nothing
+ * syncs by itself.
+ */
+
+import { el } from './dom.js';
+import { button, field, sheet, toast } from './primitives.js';
+import { pmGet, pmPost } from './http.js';
+import { setState } from './state.js';
+
+const LABEL = { google: 'Google Docs', confluence: 'Confluence' };
+const UNDO_MS = 5000;
+const FRESH_MS = 30000;
+
+const views = new Map();      // ws -> { at, state: 'loading' | 'ok' | 'error', data }
+const pending = new Map();    // ws|path|kind -> { use, timer }
+
+function read(ws, force) {
+  const cur = views.get(ws);
+  if (cur && !force && (cur.state === 'loading' || Date.now() - cur.at < FRESH_MS)) return cur;
+  const next = { at: Date.now(), state: cur && cur.data ? 'ok' : 'loading', data: cur ? cur.data : null };
+  views.set(ws, next);
+  pmGet('/api/docs?ws=' + encodeURIComponent(ws)).then((r) => {
+    views.set(ws, r && r.ok ? { at: Date.now(), state: 'ok', data: r } : { at: Date.now(), state: 'error', data: null, error: (r && r.error) || 'refused' });
+    setState({});
+  }, () => { views.set(ws, { at: Date.now(), state: 'error', data: null }); setState({}); });
+  return next;
+}
+
+/** Read the store again after something may have moved it (a save, a sync, a compare). */
+export function refreshCopies(ws) { read(ws, true); }
+
+const docOf = (ws, rel) => {
+  const v = views.get(ws);
+  return v && v.data && Array.isArray(v.data.docs) ? v.data.docs.find((d) => d.path === rel) || null : null;
+};
+
+/** The copies of one file, Confluence first. Exported for the Connections rail. */
+export function copiesOf(ws, rel) {
+  read(ws, false);
+  const d = docOf(ws, rel);
+  return d ? [...d.links].sort((a, b) => (a.kind === 'confluence' ? -1 : 0) - (b.kind === 'confluence' ? -1 : 0)) : [];
+}
+
+/** One sentence for a copy's state, in the Docs page's words. */
+export function wordsOf(link, ws, rel) {
+  const L = link.label || LABEL[link.kind] || link.kind;
+  const p = pending.get(ws + '|' + rel + '|' + link.kind);
+  const sy = link.syncing || (p ? { use: p.use } : null);
+  if (sy) return { tone: 'busy', text: sy.use === 'pmos' ? 'Updating ' + L + '…' : 'Updating PMOS from ' + L + '…' };
+  if (link.sync_failed) return { tone: 'bad', text: 'Sync failed' };
+  switch (link.signal) {
+    case 'same': return { tone: 'same', text: 'Same as ' + L };
+    case 'ahead': return { tone: 'warn', text: 'PMOS is newer' };
+    case 'behind': return { tone: 'warn', text: L + ' is newer' };
+    case 'diverged': return { tone: 'bad', text: 'Edited on both sides' };
+    case 'unchecked': return { tone: 'none', text: L + ': not compared yet' };
+    case 'unreadable': return { tone: 'bad', text: "Can't open in " + L };
+    case 'missing-remote': return { tone: 'bad', text: 'Not found in ' + L };
+    case 'missing-repo': return { tone: 'bad', text: 'Not in PMOS any more' };
+    default: return { tone: 'none', text: L };
+  }
+}
+
+function when(iso) {
+  const t = new Date(iso || '');
+  if (Number.isNaN(t.getTime())) return '';
+  const days = Math.round((new Date().setHours(0, 0, 0, 0) - new Date(t).setHours(0, 0, 0, 0)) / 86400000);
+  const hm = t.toTimeString().slice(0, 5);
+  if (days === 0) return 'today ' + hm;
+  if (days === 1) return 'yesterday ' + hm;
+  return t.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+const edit = (by, at) => [by, at ? when(at) : null].filter(Boolean).join(', ');
+
+/**
+ * The bar's control for one file: its first copy's state, or "add a copy". Null when the store cannot be read (the
+ * bar then shows nothing rather than a guess) or the file is not one the store can track.
+ */
+export function copyChip(ws, rel) {
+  if (!ws || !rel) return null;
+  const v = read(ws, false);
+  if (v.state === 'error' || (v.state === 'loading' && !v.data)) return null;
+  const links = copiesOf(ws, rel);
+  if (!links.length) {
+    return button({ label: 'add a copy', variant: 'ghost', size: 'sm', icon: 'cloud',
+      attrs: { class: 'fr-doc-bar__copy', 'data-doc': 'copy', 'data-tone': 'none', title: 'Track this file in Confluence or Google Docs' },
+      onClick: () => openCopy(ws, rel) });
+  }
+  const w = wordsOf(links[0], ws, rel);
+  return button({ label: w.text + (links.length > 1 ? ' +' + (links.length - 1) : ''), variant: 'outline', size: 'sm', icon: 'cloud',
+    attrs: { class: 'fr-doc-bar__copy', 'data-doc': 'copy', 'data-tone': w.tone, title: 'The copy of this file: which side is newer, and use either version' },
+    onClick: () => openCopy(ws, rel) });
+}
+
+/** The details and the acts, in a sheet. */
+export function openCopy(ws, rel) {
+  read(ws, true);
+  const links = copiesOf(ws, rel);
+  const d = docOf(ws, rel);
+  let close = null;
+  const body = [];
+  if (!links.length) {
+    let target = '';
+    body.push(el('p', { class: 'fr-copy__p' }, 'This file has no copy yet. Paste the address of a Confluence page or a Google Doc. Nothing syncs by itself: a copy changes only when you press a button.'));
+    body.push(field({ label: 'Address of the copy', placeholder: 'https://…atlassian.net/wiki/…', attrs: { 'data-copy': 'target' },
+      onCommit: (val) => { target = val; } }));
+    const s = sheet({ title: 'Add a copy', sub: rel, body,
+      actions: [button({ label: 'add copy', variant: 'primary', attrs: { 'data-copy': 'add' }, onClick: async () => {
+        const input = document.querySelector('[data-copy="target"] input, input[data-copy="target"]');
+        const t = String((input && input.value) || target).trim();
+        const kind = /atlassian|confluence|\/wiki\/|pageId=/i.test(t) ? 'confluence' : (/google|docs\.|drive\./i.test(t) ? 'google' : null);
+        if (!kind) { toast({ text: 'Paste the address of a Confluence page or a Google Doc.', tone: 'error' }); return; }
+        const r = await pmPost('/api/docs/link', { ws, path: rel, kind, target: t });
+        if (!r || !r.ok) { toast({ text: (r && r.error) || 'The copy was not added.', tone: 'error' }); return; }
+        toast({ text: 'Copy added. Compare to see which side is newer.', timeout: 4000 });
+        refreshCopies(ws);
+        if (close) close();
+      } })] });
+    close = s && s.close;
+    return;
+  }
+  for (const link of links) {
+    const L = link.label || LABEL[link.kind] || link.kind;
+    const w = wordsOf(link, ws, rel);
+    const busy = w.tone === 'busy';
+    const use = (u) => () => { useVersion(ws, rel, link, u); if (close) close(); };
+    body.push(el('section', { class: 'fr-copy', 'data-copy-kind': link.kind },
+      el('div', { class: 'fr-copy__state', 'data-tone': w.tone }, el('span', { class: 'fr-copy__dot' }), w.text,
+        link.basis === 'date' ? el('span', { class: 'fr-copy__by' }, ' (by date)') : null),
+      el('dl', { class: 'fr-copy__sides' },
+        el('dt', null, 'PMOS'), el('dd', null, el('span', { class: 'fr-copy__where' }, rel),
+          el('span', { class: 'fr-copy__edit' }, edit(d && d.repo && d.repo.modified_by, d && d.repo && d.repo.modified_at) || 'Last edit unknown')),
+        el('dt', null, L), el('dd', null,
+          link.url ? el('a', { class: 'fr-copy__where', href: link.url, target: '_blank', rel: 'noopener noreferrer' }, link.title || link.target) : el('span', { class: 'fr-copy__where' }, link.target),
+          el('span', { class: 'fr-copy__edit' }, edit(link.remote_modified_by, link.remote_modified_at) || 'Last edit: read at the next compare'))),
+      link.note && link.signal !== 'same' && link.signal !== 'unchecked' ? el('p', { class: 'fr-copy__diff', 'data-copy': 'diff' }, 'First difference: ' + link.note) : null,
+      link.sync_failed ? el('p', { class: 'fr-copy__diff' }, 'The last sync wrote nothing: ' + (link.sync_failed.reason || 'no reason given')) : null,
+      el('div', { class: 'fr-copy__acts' },
+        !busy && (link.signal === 'ahead' || link.signal === 'diverged')
+          ? button({ label: 'use PMOS version', variant: link.signal === 'ahead' ? 'primary' : 'outline', size: 'sm', attrs: { 'data-copy': 'use-pmos' }, onClick: use('pmos') }) : null,
+        !busy && (link.signal === 'behind' || link.signal === 'diverged')
+          ? button({ label: 'use ' + L + ' version', variant: link.signal === 'behind' ? 'primary' : 'outline', size: 'sm', attrs: { 'data-copy': 'use-copy' }, onClick: use('copy') }) : null)));
+  }
+  const v = views.get(ws);
+  const open = v && v.data && (v.data.open || v.data.session);
+  body.push(el('p', { class: 'fr-copy__p' }, 'A sync writes one side only, through your own connector, and never creates, moves or deletes a page. Unsaved edits here are not part of it: save first.'));
+  const s = sheet({ title: 'Copies of this file', sub: rel, body,
+    actions: [
+      button({ label: open ? 'comparing…' : 'compare again', variant: 'outline', icon: 'refresh-cw', disabled: !!open, attrs: { 'data-copy': 'compare' }, onClick: async () => {
+        const r = await pmPost('/api/docs/check', { ws });
+        toast(r && r.ok ? { text: 'Compare started. It reads every copy and changes nothing.', timeout: 4000 } : { text: (r && r.error) || 'The compare could not start.', tone: 'error' });
+        refreshCopies(ws);
+        if (close) close();
+      } }),
+      button({ label: 'open Docs', variant: 'ghost', attrs: { 'data-copy': 'docs' }, onClick: () => { import('./registry.js').then((m) => m.openDestination('docs')); if (close) close(); } }),
+    ] });
+  close = s && s.close;
+}
+
+function useVersion(ws, rel, link, use) {
+  const key = ws + '|' + rel + '|' + link.kind;
+  if (pending.has(key)) return;
+  const L = link.label || LABEL[link.kind] || link.kind;
+  const p = { use, timer: null };
+  p.timer = setTimeout(async () => {
+    pending.delete(key);
+    const r = await pmPost('/api/docs/sync', { ws, path: rel, kind: link.kind, use });
+    if (!r || !r.ok) toast({ text: (r && r.error) || 'The sync could not start.', tone: 'error' });
+    refreshCopies(ws);
+  }, UNDO_MS);
+  pending.set(key, p);
+  toast({ text: use === 'pmos' ? 'Updating ' + L + ' with the PMOS version.' : 'Updating PMOS with the ' + L + ' version.', actionLabel: 'Undo', timeout: UNDO_MS,
+    onAction: () => { clearTimeout(p.timer); pending.delete(key); setState({}); toast({ text: 'Nothing was changed.', timeout: 3000 }); } });
+  setState({});
+}

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

@@ -100,9 +100,15 @@ export function openSession(s) {
   if (iniMod) iniMod.openTerm(null, { id: s.id, name: s.name, st: isEnded(s) ? 'exited' : 'working', profile: s.profile_id || null });
 }
 
-function metaOf(s, trees) {
-  const parts = [typeLabel(s.work_type) || C().types.general];
+/* The row's second line says only what tells two sessions apart: its state when it is not plainly working, its type of
+ * work when one was named (General is every unnamed session, so it said nothing), and a branch off main. The strip's
+ * tooltip keeps the full line. */
+function metaOf(s, trees, { brief = false } = {}) {
+  const parts = [];
   if (isEnded(s)) parts.push(C().ended);
+  else if (brief && s.shown && s.shown !== 'working') parts.push(stateWord(s.shown));
+  const ty = typeLabel(s.work_type);
+  if (!brief || (s.work_type && s.work_type !== 'general')) parts.push(ty || C().types.general);
   const t = trees.find((x) => x.ws === s.ws);
   // the branch is named when the session is not on main, unless it is the initiative's own (the group already says that)
   const own = t && t.initiative && t.initiative === initiativeOf(s, trees);
@@ -110,6 +116,18 @@ function metaOf(s, trees) {
   return parts.join(' · ');
 }
 
+/* The state glyph and its word come from the one table the server also reads (lib/session-state.js). The shape carries
+ * the state; the colour is the token for its tone (components.css, by data-state), and the word is in the row's
+ * accessible name. An ended session is the hollow circle. */
+const SS = () => (typeof window !== 'undefined' && window.PMOSSessionState) || null;
+const stateOf = (s) => (isEnded(s) ? 'exited' : (s.shown || 'working'));
+function stateWord(st) { const t = SS(); return (t && t.WORD && t.WORD[st]) || st; }
+function stateGlyph(s) {
+  const st = stateOf(s);
+  const t = SS();
+  return el('span', { class: 'fr-ds-glyph', 'data-state': st, 'aria-hidden': 'true' }, (t && t.GLYPH && t.GLYPH[st]) || '');
+}
+
 /* ── ending a session ─────────────────────────────────────────────────────────────────────────────────────────────── */
 
 async function endSession(repo, s) {
@@ -300,21 +318,42 @@ export function openNewSessionSheet(repo, preset) {
 
 function sessionRow(repo, s, trees, front) {
   if (state.dsEnding === s.id) return confirmNode(repo, s, 'fr-ds-confirm');
+  const meta = metaOf(s, trees, { brief: true });
   return row({
-    title: s.name, meta: [metaOf(s, trees)], onOpen: () => openSession(s), openLabel: C().open(s.name),
+    title: s.name, meta: meta ? [meta] : [], lead: [stateGlyph(s)], compact: true, onOpen: () => openSession(s),
+    openLabel: C().open(s.name) + ' · ' + stateWord(stateOf(s)),
     trail: [
-      iconButton({ icon: 'ellipsis', ariaLabel: C().more(s.name), onClick: () => openMetaSheet(repo, s), attrs: { 'data-ds': 'more' } }),
-      iconButton({ icon: 'x', ariaLabel: C().end(s.name), onClick: () => setState({ dsEnding: s.id }), attrs: { 'data-ds': 'end' } }),
+      iconButton({ icon: 'ellipsis', ariaLabel: C().more(s.name), size: 'sm', onClick: () => openMetaSheet(repo, s), attrs: { 'data-ds': 'more', class: 'fr-ds-act' } }),
+      iconButton({ icon: 'x', ariaLabel: C().end(s.name), size: 'sm', onClick: () => setState({ dsEnding: s.id }), attrs: { 'data-ds': 'end', class: 'fr-ds-act' } }),
     ],
-    attrs: { class: 'fr-ds-row', 'data-ds-session': s.id, 'data-front': front ? 'true' : 'false' },
+    attrs: { class: 'fr-ds-row' + (isEnded(s) ? ' fr-ds-row--ended' : ''), 'data-ds-session': s.id, 'data-front': front ? 'true' : 'false' },
   });
 }
 
-function groupHead(repo, g) {
+/* ── folding a group ──────────────────────────────────────────────────────────────────────────────────────────────────
+ * A group's head is a disclosure: its name and how many sessions it holds. The PM's choice is kept per group key (with
+ * the layout, so it survives a reload). With no choice made, a group is open, except Scheduled while none of its runs is
+ * live: a schedule leaves one ended session per run, and those rows filled the list above the sessions in use. */
+export function groupFolded(g) {
+  const m = state.dsFolded || {};
+  if (Object.prototype.hasOwnProperty.call(m, g.key)) return !!m[g.key];
+  return !!g.scheduled && g.sessions.every(isEnded);
+}
+
+function groupHead(repo, g, folded) {
+  const live = g.sessions.filter((s) => !isEnded(s)).length;
+  const count = live && live !== g.sessions.length ? live + ' of ' + g.sessions.length : String(g.sessions.length);
+  const toggle = button({
+    label: g.title, variant: 'ghost', size: 'sm', icon: folded ? 'chevron-right' : 'chevron-down',
+    onClick: () => setState((st) => ({ dsFolded: { ...(st.dsFolded || {}), [g.key]: !folded } })),
+    attrs: { class: 'fr-ds-head__toggle', 'data-ds': 'fold', 'aria-expanded': folded ? 'false' : 'true',
+      'aria-label': C().foldLabel(g.title, g.sessions.length, folded), title: g.initiative || g.title },
+  });
   return el('div', { class: 'fr-ds-head', 'data-ds-group': g.key },
-    el('h3', { class: 'fr-ds-head__title', title: g.initiative || g.title }, g.title),
-    g.scheduled ? '' : iconButton({ icon: 'plus', ariaLabel: g.initiative ? C().newFor(g.title) : C().newTitle,
-      onClick: () => openNewSessionSheet(repo, { initiative: g.initiative }), attrs: { 'data-ds': 'group-new' } }));
+    toggle,
+    el('span', { class: 'fr-ds-head__count', 'aria-hidden': 'true' }, count),
+    g.scheduled ? '' : iconButton({ icon: 'plus', ariaLabel: g.initiative ? C().newFor(g.title) : C().newTitle, size: 'sm',
+      onClick: () => openNewSessionSheet(repo, { initiative: g.initiative }), attrs: { 'data-ds': 'group-new', class: 'fr-ds-head__new' } }));
 }
 
 /** The side list's nodes: the session groups, then "Open" with the caller's rows for the tabs that are not sessions. */
@@ -324,12 +363,17 @@ export function railNodes(repo, otherRows) {
   const out = [];
   const groups = groupsOf(repo);
   for (const g of groups) {
-    out.push(el('section', { class: 'fr-ds-group', 'data-ds-section': g.key }, groupHead(repo, g),
-      ...g.sessions.map((s) => sessionRow(repo, s, trees, s.id === front))));
+    // the session in front is never folded away: its group opens to show it
+    const folded = groupFolded(g) && !g.sessions.some((s) => s.id === front);
+    // live sessions first, ended ones after them, each in the server's order
+    const ordered = [...g.sessions.filter((s) => !isEnded(s)), ...g.sessions.filter(isEnded)];
+    out.push(el('section', { class: 'fr-ds-group', 'data-ds-section': g.key, 'data-folded': folded ? 'true' : 'false' }, groupHead(repo, g, folded),
+      ...(folded ? [] : ordered.map((s) => sessionRow(repo, s, trees, s.id === front)))));
   }
   if (otherRows && otherRows.length) {
     out.push(el('section', { class: 'fr-ds-group', 'data-ds-section': 'open' },
-      el('div', { class: 'fr-ds-head' }, el('h3', { class: 'fr-ds-head__title' }, C().openTabs)), ...otherRows));
+      el('div', { class: 'fr-ds-head fr-ds-head--plain' }, el('h3', { class: 'fr-ds-head__title' }, C().openTabs),
+        el('span', { class: 'fr-ds-head__count', 'aria-hidden': 'true' }, String(otherRows.length))), ...otherRows));
   }
   if (!groups.length && !(otherRows && otherRows.length)) out.push(el('p', { class: 'fr-ds-note' }, C().none));
   return out;

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

@@ -61,6 +61,7 @@ export const COPY = {
     sideTabs: 'Show the sessions as a list at the side',
     topTabs: 'Show the sessions as a strip on top',
     // 0.55.1 — the dock's session list (dock-sessions.js)
+    openTab: (title, what) => 'Open ' + title + ' · ' + what,
     ds: {
       notLinked: 'Not linked',
       scheduled: 'Scheduled',
@@ -68,6 +69,7 @@ export const COPY = {
       none: 'No sessions yet. Press Session to start one.',
       group: 'Show the sessions of',
       ended: 'ended',
+      foldLabel: (t, n, folded) => (folded ? 'Show ' : 'Hide ') + t + ', ' + n + ' session' + (n === 1 ? '' : 's'),
       open: (n) => 'Open ' + n,
       more: (n) => 'Name, initiative and type of work of ' + n,
       end: (n) => 'End ' + n,

package/workspace/public/pm/icons.js

@@ -1,6 +1,6 @@
 /* pm/icons.js — the lucide icons the Breakdown uses (D86 point 6).
  *
- * The 35 symbols live in one vendored sprite, /vendor/lucide-sprite.js, generated from lucide-static 1.52.0 (see
+ * The 48 symbols live in one vendored sprite, /vendor/lucide-sprite.js, generated from lucide-static 1.52.0 (see
  * workspace/third-party/README.md). `ensureSprite()` loads it once and puts it in the overlay layer; `icon(name)` returns
  * an <svg> that points at one symbol. Icons are decoration only: every one is aria-hidden, and a control that shows only
  * an icon carries its own aria-label (primitives.js `iconButton` refuses to build one without).

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

@@ -35,7 +35,7 @@ import { mountDoc, disposeDoc, docText } from './tab-doc.js';
 import { mountWeb, promptWeb } from './tab-web.js';
 import { newSessionBlock, openNewSession } from './panel-newsess.js';
 import { boardOf, currentProduct } from './board-read.js';
-import { field, button, iconButton, toast, ensureComponentsCss } from './primitives.js';
+import { field, button, iconButton, row, toast, ensureComponentsCss, SEL } from './primitives.js';
 import { COPY } from './frame-copy.js';
 import { COPY as PAL } from './palette-copy.js';
 import { askChoice } from './dialogs.js';
@@ -673,6 +673,36 @@ const scratchBlock = el('div', {
     scratchSendBtn, scratchCopyBtn, scratchClearBtn, scratchNote),
 );
 
+/* ── the scratchpad in the frame (workspace-tabs-declutter) ─────────────────────────────────────────────────────────
+ * One header: the bottom bar's toggle names the pad and opens and closes it, so the drawer draws no label row and no ▾
+ * of its own. Its three actions are primitives; Send is the one primary while a terminal is in front, and the note says
+ * once what keeps the pad. The textarea stays a direct child of the drawer (the height clamp measures through it). */
+const padSendF = button({ label: 'send to terminal', variant: 'primary', size: 'sm', onClick: () => sendScratchToTerminal(), attrs: { 'data-scratch': 'send' } });
+const padCopyF = button({ label: 'copy', variant: 'ghost', size: 'sm', attrs: { 'data-scratch': 'copy' }, onClick: () => {
+  copyToClipboard(state.scratchText);
+  setState({ scratchCopied: true });
+  setTimeout(() => setState({ scratchCopied: false }), 1200);
+} });
+const padClearF = button({ label: 'clear', variant: 'ghost', size: 'sm', onClick: () => { if (state.scratchText) onScratchInput(''); }, attrs: { 'data-scratch': 'clear' } });
+const padNoteF = el('span', { class: 'fr-pad__note', 'data-scratch': 'note' });
+const padRowF = el('div', { class: 'fr-pad__row' }, padSendF, padCopyF, padClearF, padNoteF);
+const padToggleF = button({ label: 'scratchpad', variant: 'ghost', size: 'sm', icon: 'chevron-down',
+  onClick: () => setState((s) => ({ scratchOpen: !s.scratchOpen })), attrs: { 'data-scratch': 'toggle', class: 'fr-pad__toggle' } });
+const bottomCopyF = button({ label: 'copy', variant: 'ghost', size: 'sm', onClick: () => copyActive(), attrs: { 'data-tabs': 'copy' } });
+
+function paintFramePad(act) {
+  const canSend = !!(act && act.kind === 'term');
+  const text = state.scratchText || '';
+  padSendF.disabled = !canSend || !text.trim();
+  padSendF.title = canSend ? 'Type the pad into this session and press Enter' : 'Open a terminal to send the pad to it';
+  padClearF.disabled = !text;
+  padCopyF.disabled = !text;
+  padCopyF.querySelector(SEL.btnLabel).textContent = state.scratchCopied ? 'copied' : 'copy';
+  padNoteF.textContent = canSend ? 'Kept for this session.' : 'Kept for this repository.';
+  setChildren(scratchBlock, [scratchGrip, scratchTa, padRowF]);
+  scratchBlock.setAttribute('data-frame', '');
+}
+
 /**
  * Paint the scratchpad drawer and the bottom bar's scratchpad toggle for the active tab `act`.
  * renderTabs calls it on one line, so the scratchpad (3C) and the tab strip (3A) are separate hunks.
@@ -705,6 +735,7 @@ function renderScratch(act) {
   scratchNote.textContent = FIXTURE ? 'Kept until the page closes.'
     : (canSend ? 'Kept for this session. Send also presses Enter.' : 'Kept for this repository. Open a terminal to send.');
   scratchToggleLabel.textContent = state.scratchOpen ? '▼ scratchpad' : '▲ scratchpad';
+  if (!FIXTURE && inFrame() && !isMobile()) paintFramePad(act);
   if (!FIXTURE) paintBottom(act);
 }
 
@@ -760,6 +791,21 @@ function paintBottom(act) {
     if (composeInput.control.value !== text) composeInput.control.value = text;
     composeSend.disabled = !text.trim();
   }
+  if (!compose && inFrame() && !isMobile()) {
+    /* The frame's bar: the scratchpad toggle (its chevron points the way the drawer will move), the tab in front, and a
+     * copy that says what it copies. */
+    const open = !!state.scratchOpen;
+    padToggleF.setAttribute('aria-expanded', open ? 'true' : 'false');
+    const ic = padToggleF.querySelector('[data-icon]');
+    const want = open ? 'chevron-down' : 'chevron-right';
+    if (ic && ic.getAttribute('data-icon') !== want) ic.replaceWith(icon(want));
+    const what = act && act.kind === 'doc' ? 'copy document' : (act && act.kind === 'term' ? 'copy attach command' : null);
+    if (what) bottomCopyF.querySelector(SEL.btnLabel).textContent = state.copied ? 'copied' : what;
+    bottomTitle.textContent = act ? act.title : '';
+    setChildren(bottomBar, [padToggleF, bottomTitle, what ? bottomCopyF : null]);
+    bottomBar.hidden = false;
+    return;
+  }
   setChildren(bottomBar, compose ? [composeLine] : (act ? [bottomToggle, bottomTitle, bottomCopy] : [bottomToggle, bottomTitle]));
   // A phone draws no scratchpad drawer: its pad is the compose line of a terminal. With no terminal in front the bar would
   // offer a toggle that opens nothing, so on a phone it is shown for the compose line only.
@@ -1221,6 +1267,42 @@ function cockpitTabRow(t, front) {
   );
 }
 
+/* ── a tab in the dock's side list (the frame, live mode) ─────────────────────────────────────────────────────────────
+ * The tabs that are not sessions (documents, views, web pages) sit under "Open" in the same row as a session: the
+ * design system's row, its title in the body face, a second line that says what it is (the document's role, or the kind
+ * of tab) and its line of work when that is not main, and one close control. The server's session id and the initiative
+ * slug stay in the tooltip; on screen they told two rows apart no better than the title did. */
+const KIND_WORD = { term: 'Terminal', view: 'View', web: 'Web page', skill: 'Skill', transcript: 'Conversation', breakdown: 'Breakdown', dest: 'Page' };
+function dockTabRow(t, front) {
+  const br = tabBranch(t);
+  const what = t.kind === 'doc' ? (t.role || 'Document') : (KIND_WORD[t.kind] || t.kind);
+  const r = row({
+    title: t.title, meta: [what, br ? '⑂ ' + br : null], compact: true, onOpen: () => setState({ active: t.id }),
+    openLabel: COPY.dock.openTab(t.title, what),
+    trail: [iconButton({ icon: 'x', ariaLabel: 'close ' + t.title, size: 'sm', onClick: () => closeTab(t.id), attrs: { 'data-tab-close': '', class: 'fr-ds-act' } })],
+    attrs: { class: 'fr-ds-row fr-ds-tab', 'data-tab': t.id, 'data-tab-active': front ? '1' : '0', 'data-tab-row': '', 'data-front': front ? 'true' : 'false',
+      'data-kind': t.kind, title: t.title + (t.slug ? '\n' + t.slug : '') },
+  });
+  const meta = r.querySelector(SEL.rowMeta);
+  if (meta) {
+    meta.setAttribute('data-tab-sub', '');
+    // the branch keeps its hook for the suites (R2.2): it is the meta line's last part
+    if (br && meta.lastElementChild) meta.lastElementChild.setAttribute('data-r1', 'tab-branch');
+  }
+  return r;
+}
+
+/* …and the same tab in the strip on top: a chip like a session's, with its own close control. The second line moves to the
+ * tooltip; the chip keeps the strip's floor and the 96px floor a crowded strip shrinks to. */
+function dockTabChip(t, front) {
+  const br = tabBranch(t);
+  const what = t.kind === 'doc' ? (t.role || 'Document') : (KIND_WORD[t.kind] || t.kind);
+  return el('div', { class: 'fr-ds-tabchip', 'data-tab': t.id, 'data-tab-active': front ? '1' : '0', 'data-kind': t.kind },
+    button({ label: t.title, variant: front ? 'outline' : 'ghost', size: 'sm', onClick: () => setState({ active: t.id }),
+      attrs: { class: 'fr-ds-chip', 'aria-pressed': front ? 'true' : 'false', title: t.title + ' · ' + what + (br ? ' · ⑂ ' + br : '') } }),
+    iconButton({ icon: 'x', ariaLabel: 'close ' + t.title, size: 'sm', onClick: () => closeTab(t.id), attrs: { 'data-tab-close': '' } }));
+}
+
 function tabNode(t, act, splitTab) {
   const selected = (act && act.id === t.id) || (splitTab && splitTab.id === t.id);
   const bg = selected ? FX.TAB_COLORS.activeBg : 'transparent';
@@ -1349,10 +1431,10 @@ export function renderTabs(host) {
     const others = notListed(dsMod.listedSessionIds(ds));
     setChildren(tabBar, vertical ? [
       fr.session,
-      ...dsMod.railNodes(ds, others.map((t) => cockpitTabNode(t, act, splitTab, true))),
+      ...dsMod.railNodes(ds, others.map((t) => dockTabRow(t, (act && act.id === t.id) || (splitTab && splitTab.id === t.id)))),
       el('div', { 'data-tabs': 'vcontrols', class: 'fr-ds-foot' }, state.splitId ? splitBtn : null, fr.orient, fr.focus, fr.fold),
     ] : [
-      ...dsMod.stripNodes(ds, others.map((t) => cockpitTabNode(t, act, splitTab))),
+      ...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,
     ]);
   }

package/workspace/public/pm/primitives.js

@@ -25,6 +25,7 @@ export const SEL = Object.freeze({
   sprite: '.pmc-sprite',
   icon: 'svg.pmc-icon',
   btn: '.pmc-btn',
+  btnLabel: '.pmc-btn__label',
   primary: '.pmc-btn--primary',
   row: '.pmc-row',
   owed: '.pmc-row--owed',
@@ -256,16 +257,17 @@ function metaLine(cls, meta, signals) {
 
 /**
  * row({ title, titleIcon?, meta?: string[], signals?: Node[] (2 at most), lead?: Node[], trail?: Node[], onOpen?, openLabel?,
- *       owed?: boolean, done?: boolean, attrs? })
+ *       owed?: boolean, done?: boolean, compact?: boolean, attrs? })
+ * `compact` keeps the title and the meta line on one line each, cut with an ellipsis: for a narrow list such as the dock's.
  * One title, one meta line holding at most two signals. With `onOpen` the title and meta are one button (the row's
  * focus target); without it they are plain text.
  */
-export function row({ title, titleIcon, meta, signals, lead, trail, onOpen, openLabel, owed, done, proposed, attrs, openAttrs } = {}) {
+export function row({ title, titleIcon, meta, signals, lead, trail, onOpen, openLabel, owed, done, proposed, compact, attrs, openAttrs } = {}) {
   const body = [titleLine('pmc-row__title', title, titleIcon), metaLine('pmc-row__meta', meta, signals)];
   const main = onOpen
     ? el('button', { type: 'button', class: 'pmc-row__open', 'aria-label': openLabel || null, onClick: onOpen, ...(openAttrs || {}) }, body)
     : el('span', { class: 'pmc-row__main' }, body);
-  return el('div', withClass(cx('pmc-row', owed && 'pmc-row--owed', done && 'pmc-row--done', proposed && 'pmc-row--proposed'), attrs),
+  return el('div', withClass(cx('pmc-row', owed && 'pmc-row--owed', done && 'pmc-row--done', proposed && 'pmc-row--proposed', compact && 'pmc-row--compact'), attrs),
   lead && lead.length ? el('span', { class: 'pmc-row__lead' }, lead) : null,
   main,
   trail && trail.length ? el('span', { class: 'pmc-row__trail' }, trail) : null);
@@ -325,7 +327,8 @@ let openMenu = null;
 let lastMenuClose = { anchor: null, at: 0 };
 
 /**
- * menu({ anchor, items: [{ label, onSelect, danger?, sep? }], ariaLabel }): opens a popover menu under `anchor`.
+ * menu({ anchor, items: [{ label, onSelect, danger?, sep?, icon?, attrs? }], ariaLabel }): opens a popover menu under `anchor`.
+ * An item's `attrs` are data hooks for the suites (a class or a role is the menu's own).
  * Arrow keys move, Enter or Space chooses, Escape closes and returns focus to the anchor. Pressing the anchor again
  * closes it.
  */
@@ -349,6 +352,7 @@ export function menu({ anchor, items, ariaLabel } = {}) {
   for (const it of items || []) {
     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'),
       onClick: (e) => { e.stopPropagation(); close(false); if (it.onSelect) it.onSelect(); },
     }, it.icon ? icon(it.icon) : null, el('span', null, it.label));

package/workspace/public/pm/state.js

@@ -129,6 +129,7 @@ function initialBase() {
     newSessIsolate: null, newSessError: null, newSessBusy: false,
     newSessBranches: null, preflightProfile: null, profiles: null, branchInfo: null,
     col0: true, col1: true, col2: true, scratchOpen: false, scratchText: '', copied: false,
+    dsFolded: {},               // the dock's session groups the PM folded (true) or opened (false), by group key — persisted
     tabsVertical: false,        // the cockpit's tabs as a vertical list instead of a strip — persisted, per browser
     /* The scratchpad drawer's height in px (panel-tabs.js). 96 is the prototype's literal and stays
      * the default; the PM can drag it, and the drag is clamped there rather than here — this store
@@ -238,6 +239,8 @@ const PERSIST = {
   scratchOpen: isBool,
   // the cockpit's tabs as a vertical list (true) or the horizontal strip (false, the default)
   tabsVertical: isBool,
+  // the dock's session groups, folded (true) or open (false) by the PM; a group with no entry takes its default
+  dsFolded: isFlagMap,
   /* A restored height is re-validated on the way IN, not merely on the way out: a corrupted or
    * hand-edited record must not be able to render a drawer with no textarea in it, or one taller
    * than any window it could be restored into. The upper bound here is deliberately generous (the