create-pmos 0.52.0 → 0.53.1

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

@@ -0,0 +1,182 @@
+/* pm/dest-today.js — the Today destination (pm-os-absorb Run 3, slice 3B, PRD R12, F8).
+ *
+ * Today lists what waits for the PM, as cards of eight kinds, ranked. The cards come from the registry's Today sources,
+ * the same way for every run: todayCards() draws them and todayCount() counts them, so this header and the nav badge add
+ * the same sources and cannot disagree. This module also registers the source for the cards the server makes itself
+ * (kind 1 acceptance and outcome, kind 2 a waiting session, kind 3 a returned step): `today-core`.
+ *
+ * mountDestination(host, ctx) runs on every render with the same host. It keeps one root in the host and replaces the root's
+ * children only when what it shows changed: the cards' own markup, the scope, the count, the notice, the fold. A card the
+ * PM is typing in is rebuilt from the card's own saved state (today-cards.js), and the focus returns to the same control.
+ *
+ * The legacy Today view (view-today.js) calls mountToday on its own host, so both surfaces draw the one list.
+ */
+
+import { el } from './dom.js';
+import { empty, tabs, button, toast, ensureComponentsCss } from './primitives.js';
+import { registerTodaySource, todayCards, todayCount, openInitiative } from './registry.js';
+import { repoTuples } from './panel-repos.js';
+import { currentProduct } from './board-read.js';
+import { wsOf } from './data.js';
+import { state, setState, FIXTURE } from './state.js';
+import { COPY } from './today-copy.js';
+import { todayCard, acceptCard, rankNodes, scopeCtx, ensureFeed, feedOf, feedErrorOf, bannerOf, onFeed } from './today-cards.js';
+import { goalsSection, goalsSig } from './today-goals.js';
+
+const SHOWN = 3;   // cards drawn before "Show more": the first paint holds at most 17 controls (first-paint-today.test.js)
+let expanded = false;
+
+/* ── the source for the cards the server makes itself ─────────────────────────────────────── */
+
+function coreRows(ctx) {
+  const out = [];
+  for (const repo of (ctx && ctx.repos) || []) {
+    const ws = wsOf(repo);
+    if (!ws) continue;
+    ensureFeed(ws);
+    const d = feedOf(ws);
+    for (const c of (d && d.cards) || []) if (c && c.source === 'today') out.push({ repo, c });
+  }
+  return out;
+}
+
+async function openSession(c) {
+  const id = String(c.run_id || '').replace(/^session:/, '');
+  const s = (state.sessions || []).find((x) => x && x.id === id);
+  if (!s) { toast({ text: COPY.sessionGone }); return; }
+  try { const m = await import('./handoff-box.js'); await m.openSessionTab(c.initiative_id || null, s); } catch (e) { console.error('[pm] could not open the session:', e); }
+}
+
+function drawCore({ repo, c }, ctx) {
+  const rerender = () => (ctx && ctx.setState ? ctx.setState({}) : setState({}));
+  if (c.row_kind === 'accept') return acceptCard(c, { repo, rerender });
+  const kind = Number(c.kind);
+  return todayCard({
+    kind, id: c.id, repo, ws: c.ws, initiative: c.initiative_id, cause: c.cause, evidence: c.evidence, act: c.act,
+    attrs: { 'data-today-row': c.row_kind || null },
+    onAct: () => {
+      if (c.row_kind === 'session') { openSession(c); return; }
+      if (c.initiative_id) openInitiative(repo, c.initiative_id); else toast({ text: COPY.noInitiative });
+    },
+  });
+}
+
+if (!FIXTURE) {
+  registerTodaySource({
+    id: 'today-core', kind: null, rank: 10,
+    count: (ctx) => coreRows(ctx).length,
+    cards: (ctx) => coreRows(ctx).map((x) => drawCore(x, ctx)),
+  });
+}
+
+/* ── the board ─────────────────────────────────────────────────────────────────────────────── */
+
+const roots = new WeakMap();   // host -> { root, sig, off }
+
+function scopeToggle(all) {
+  const box = tabs({
+    variant: 'segmented', role: 'radiogroup', ariaLabel: COPY.scope.label, value: all ? 'all' : 'repo',
+    items: [{ id: 'repo', label: COPY.scope.repo }, { id: 'all', label: COPY.scope.all }],
+    onChange: (id) => setState({ todayScope: id === 'all' ? 'all' : 'repo' }),
+    attrs: { 'data-today': 'scope' },
+  });
+  const btns = box.querySelectorAll('button');
+  ['repo', 'all'].forEach((id, i) => { if (btns[i]) btns[i].setAttribute('data-today-scope', id); });
+  return box;
+}
+
+function countText(ctx, n, ready) {
+  if (!ready && n === 0) return COPY.reading;
+  return ctx.all ? COPY.countAcross(n, ctx.repos.length) : COPY.countIn(n, ctx.repo);
+}
+
+function nextLabel(repos) {
+  for (const repo of repos) { const d = feedOf(wsOf(repo)); if (d && d.next && d.next.label) return d.next.label; }
+  return null;
+}
+
+function build(ctx0) {
+  const st = ctx0.state || state;
+  const sc = scopeCtx(st, repoTuples(), currentProduct());
+  const regCtx = { all: sc.all, repos: sc.repos, setState: ctx0.setState || setState, open: (r, slug) => openInitiative(r, slug) };
+  const n = todayCount(regCtx);
+  const nodes = rankNodes(todayCards(regCtx));
+  const ready = sc.repos.length > 0 && sc.repos.every((r) => { const ws = wsOf(r); return !ws || feedOf(ws) !== null || feedErrorOf(ws) !== null; });
+  const banner = bannerOf(sc.repos);
+  nodes.forEach((node, i) => { if (!expanded && i >= SHOWN) node.hidden = true; });
+
+  const head = el('div', { class: 'td-head' },
+    el('h2', { class: 'td-count', 'data-today': 'count', 'aria-live': 'polite' }, countText(sc, n, ready)),
+    scopeToggle(sc.all));
+  const health = banner.length ? el('div', { class: 'td-health', 'data-today': 'health', role: 'status' },
+    el('p', { class: 'td-health__title' }, COPY.health.title(banner.length)),
+    el('ul', { class: 'td-health__list' }, ...banner.map((b) => el('li', null, COPY.health.line(sc.all ? b.repo + ' · ' + b.source : b.source, b.error))))) : null;
+  const list = nodes.length
+    ? el('div', { class: 'td-list', 'data-today': 'needs', role: 'list', 'aria-label': COPY.aria.list }, ...nodes)
+    : el('div', { class: 'td-list', 'data-today': 'needs' }, ready && !banner.some((b) => b.source === COPY.health.todaySource) ? empty({ text: COPY.empty(nextLabel(sc.repos)), attrs: { 'data-today': 'empty' } }) : null);
+  const more = nodes.length > SHOWN
+    ? button({ label: expanded ? COPY.fewer : COPY.more(nodes.length - SHOWN), variant: 'ghost', attrs: { 'data-today': 'more' }, onClick: () => { expanded = !expanded; setState({}); } })
+    : null;
+  nodes.forEach((node) => node.setAttribute('role', 'listitem'));
+  // today-goals (G6): the PM's goals sit above what is owed; they are joined to the cards of the first repository in scope
+  const goalsWs = sc.repos.length ? wsOf(sc.repos[0]) : null;
+  const goals = goalsSection({ ws: goalsWs, setState: ctx0.setState || setState });
+  return { children: [head, goals, health, list, more], sig: JSON.stringify([sc.all, sc.repo, n, ready, expanded, banner]) + goalsSig(goalsWs) + nodes.map((x) => x.outerHTML).join('') };
+}
+
+/** The key of the control that has the focus inside the board, so it can be focused again after a rebuild. */
+function focusKey(root) {
+  const a = document.activeElement;
+  if (!a || !root.contains(a)) return null;
+  const card = a.closest('[data-today-id]');
+  const attr = ['data-today-act', 'data-today-more', 'data-today-add-note', 'data-today-accept', 'data-today-return'].find((k) => a.hasAttribute(k));
+  if (card && attr) return { id: card.getAttribute('data-today-id'), attr };
+  if (a.closest('[data-today-note]')) return { id: card && card.getAttribute('data-today-id'), note: true };
+  if (a.getAttribute('data-goals') === 'input') return { goalsInput: true, caret: a.selectionStart };
+  if (a.hasAttribute('data-today-scope')) return { scope: a.getAttribute('data-today-scope') };
+  if (a.hasAttribute('data-today') && a.getAttribute('data-today') === 'more') return { more: true };
+  return null;
+}
+function refocus(root, k) {
+  if (!k) return;
+  const card = k.id ? [...root.querySelectorAll('[data-today-id]')].find((x) => x.getAttribute('data-today-id') === k.id) : null;
+  let t = null;
+  if (k.note && card) t = card.querySelector('[data-today-note] input, [data-today-note] textarea, input[data-today-note], textarea[data-today-note]');
+  else if (k.attr && card) t = card.querySelector('[' + k.attr + ']');
+  else if (k.goalsInput) t = root.querySelector('[data-goals="input"]');
+  else if (k.scope) t = root.querySelector('[data-today-scope="' + k.scope + '"]');
+  else if (k.more) t = root.querySelector('[data-today="more"]');
+  if (t && !t.hidden) { try { t.focus({ preventScroll: true }); if (k.goalsInput && typeof k.caret === 'number') t.setSelectionRange(k.caret, k.caret); } catch { /* not focusable */ } }
+}
+
+/** Draw Today into `host`. Safe to call on every render: nothing changes unless what Today shows changed. */
+export function mountToday(host, ctx) {
+  if (!host) return;
+  ensureComponentsCss();
+  let r = roots.get(host);
+  if (!r) {
+    const root = el('section', { class: 'td-board', 'data-today': 'board', 'data-board': 'today', 'aria-label': COPY.title });
+    host.replaceChildren(root);
+    r = { root, sig: null, off: null };
+    roots.set(host, r);
+    // a host the old shell threw away stops listening: its next render makes a new one
+    r.off = onFeed(() => {
+      if (host.isConnected) (ctx && ctx.setState ? ctx.setState : setState)({});
+      else { r.off(); roots.delete(host); }
+    });
+  }
+  if (!r.root.isConnected) host.replaceChildren(r.root);
+  const out = build(ctx || {});
+  if (out.sig === r.sig) return;
+  const k = focusKey(r.root);
+  r.sig = out.sig;
+  r.root.replaceChildren(...out.children.filter(Boolean));
+  refocus(r.root, k);
+}
+
+export function mountDestination(host, ctx) { mountToday(host, ctx); }
+export function disposeDestination(host) {
+  const r = roots.get(host);
+  if (r && r.off) r.off();
+  roots.delete(host);
+}

package/workspace/public/pm/dialogs.js

@@ -0,0 +1,88 @@
+/* pm/dialogs.js — the questions the workspace asks, as sheets (pm-os-absorb Run 3, slice 3D; PRD R27, R29).
+ *
+ * `prompt`, `confirm` and `alert` block the page, cannot be styled, cannot be reached by a test without a browser hook, and on
+ * a phone they take the whole screen. Every question the workspace used to ask with one is asked here with the `sheet` primitive
+ * instead: the same words, one answer.
+ *
+ *   askConfirm({ title, body, confirmLabel, danger })  → Promise<boolean>        true on the confirm press, false on anything else
+ *   askText({ title, body, label, value, ... })        → Promise<string | null>  the text, or null when the PM backed out
+ *   askFields({ title, body, fields, confirmLabel })   → Promise<object | null>  { key: text } for each field, or null
+ *   askChoice({ title, body, options, value, ... })    → Promise<string | null>  the chosen option's value, or null
+ *
+ * Escape, the backdrop and the close control all answer "no" (false or null). The sheet carries `data-dialog="<kind>"` so a
+ * suite can find it, and its confirm control carries `data-dialog-confirm`. There is no browser fallback: when the sheet cannot
+ * be drawn (no document) the question is answered "no", so a destructive action never runs unasked.
+ */
+
+import { sheet, button, field, dialogText, ensureComponentsCss } from './primitives.js';
+
+/** The paragraphs of a message: blank lines separate them, single newlines stay line breaks. */
+function paragraphs(text) {
+  return String(text || '').split(/\n\s*\n/).filter((p) => p.trim()).map((p) => dialogText(p.trim()));
+}
+
+/**
+ * The one builder. `kind` names the sheet for suites; `controls` are the fields drawn above the buttons; `read()` returns the
+ * answer when the PM confirms. Resolves once, on the first close.
+ */
+function ask({ kind, title, sub, body, controls, confirmLabel, cancelLabel, danger, read }) {
+  if (typeof document === 'undefined') return Promise.resolve(read ? null : false);
+  ensureComponentsCss();
+  return new Promise((resolve) => {
+    let settled = false;
+    let handle = null;
+    const finish = (answer) => { if (settled) return; settled = true; resolve(answer); };
+    const submit = () => { finish(read ? read() : true); if (handle) handle.close(); };
+    const confirmBtn = button({
+      label: confirmLabel || 'Confirm', variant: danger ? 'danger' : 'primary', onClick: submit,
+      attrs: { 'data-dialog-confirm': '' },
+    });
+    const cancelBtn = button({
+      label: cancelLabel || 'Cancel', variant: 'outline', onClick: () => { finish(read ? null : false); if (handle) handle.close(); },
+      attrs: { 'data-dialog-cancel': '' },
+    });
+    handle = sheet({
+      mode: 'auto', title, sub, body: [...paragraphs(body), ...(controls || [])], actions: [cancelBtn, confirmBtn],
+      attrs: { 'data-dialog': kind },
+      onClose: () => finish(read ? null : false),
+    });
+    const first = handle.dialog.querySelector('input, textarea, select');
+    if (first) { try { first.focus({ preventScroll: true }); if (first.select) first.select(); } catch { /* not focusable yet */ } }
+    else { try { confirmBtn.focus({ preventScroll: true }); } catch { /* not focusable yet */ } }
+    for (const c of handle.dialog.querySelectorAll('input')) {
+      c.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); submit(); } });
+    }
+  });
+}
+
+export function askConfirm({ title, body, confirmLabel, cancelLabel, danger } = {}) {
+  return ask({ kind: 'confirm', title, body, confirmLabel, cancelLabel, danger });
+}
+
+export function askFields({ title, sub, body, fields, confirmLabel, cancelLabel, danger } = {}) {
+  const made = (fields || []).map((f) => ({
+    key: f.key,
+    node: field({ label: f.label, value: f.value || '', placeholder: f.placeholder, attrs: { 'data-dialog-field': f.key } }),
+  }));
+  return ask({
+    kind: 'fields', title, sub, body, confirmLabel, cancelLabel, danger,
+    controls: made.map((m) => m.node),
+    read: () => Object.fromEntries(made.map((m) => [m.key, m.node.control.value])),
+  });
+}
+
+export function askText({ title, sub, body, label, value, placeholder, confirmLabel, cancelLabel, danger } = {}) {
+  return askFields({
+    title, sub, body, confirmLabel, cancelLabel, danger,
+    fields: [{ key: 'text', label: label || title || 'Answer', value, placeholder }],
+  }).then((a) => (a ? a.text : null));
+}
+
+export function askChoice({ title, sub, body, label, options, value, confirmLabel, cancelLabel } = {}) {
+  const node = field({ label: label || title || 'Choice', kind: 'select', value, options: options || [], attrs: { 'data-dialog-field': 'choice' } });
+  return ask({
+    kind: 'choice', title, sub, body, confirmLabel, cancelLabel,
+    controls: [node],
+    read: () => node.control.value,
+  });
+}

package/workspace/public/pm/display-word.js

@@ -0,0 +1,56 @@
+/* pm/display-word.js — the one word an initiative shows in the old shells (pm-os-absorb Run 3, slice 3D; PRD R3).
+ *
+ * Nobody types a status. The cockpit list, the breadcrumb and the status banner used to carry their own table of words (a
+ * `WORD` map in panel-cockpit.js, a `TONE` map in status-banner.js, a rung-to-word map). They now read the one mapping every
+ * surface reads, `displayOf` in lib/initiative-display.js (window.PMOSInitiativeDisplay), so a word cannot differ from one
+ * surface to the next:
+ *
+ *   wordOf(statusRow, rec)  → the word: the stage, or "Accepted" (Run 2 adds the rules: idle, waiting on, held, closed)
+ *   stageOf(rec)            → the stage the initiative is at (the first blocked step, else the current one), or null
+ *   toneOf(statusRow)       → 'd' (destructive), 'w' (warning) or null: how loudly the word is drawn
+ *
+ * `statusRow` is the derived `{ status, lifecycle }` row the server sends for the initiative (state.statuses[repo][slug]);
+ * `rec` is the initiative record the board reads (records()[slug]), whose `steps` are the workflow ladder. Both are read-only
+ * here: this file stores nothing and writes nothing. Pure over its two arguments and the display module.
+ */
+
+import { targetStepIndex } from './fixture.js';
+
+const display = () => (typeof window !== 'undefined' ? window.PMOSInitiativeDisplay : null);
+const groups = () => (typeof window !== 'undefined' ? window.PMOSStatusGroups : null);
+
+/** The lifecycle state `displayOf` reads, for a derived group key that is a PM-set one. */
+const LIFECYCLE = { 'on-hold': 'held', closed: 'closed', cancelled: 'cancelled' };
+
+/** The stage an initiative is at: the first blocked step of its ladder, else the current one. Null when no ladder is read. */
+export function stageOf(rec) {
+  const steps = rec && Array.isArray(rec.steps) ? rec.steps : null;
+  const ti = steps ? targetStepIndex(steps) : -1;
+  const k = ti >= 0 && steps[ti] ? String(steps[ti].k || '') : '';
+  return k || null;
+}
+
+/** The derived group key of one status row (`unknown` when nothing was derived). */
+export function keyOf(statusRow) {
+  const sg = groups();
+  return sg ? sg.keyOf(statusRow) : 'unknown';
+}
+
+/** The word `displayOf` gives this initiative, or null when the display module is not loaded. */
+export function wordOf(statusRow, rec) {
+  const d = display();
+  if (!d || typeof d.displayOf !== 'function') return null;
+  const key = keyOf(statusRow);
+  const row = { stage: stageOf(rec), accepted: key === 'accepted', last_activity: (statusRow && statusRow.last_activity) || null };
+  const lifecycle = LIFECYCLE[key] ? { state: LIFECYCLE[key], reason: (statusRow && statusRow.lifecycle && statusRow.lifecycle.reason) || '', at: null } : null;
+  const out = d.displayOf(row, { lifecycle, now: Date.now() });
+  return out && out.word ? String(out.word) : null;
+}
+
+/** How loudly the word is drawn: what needs the PM is destructive, what waits on their acceptance is a warning. */
+export function toneOf(statusRow) {
+  const key = keyOf(statusRow);
+  if (key === 'needs-you' || key === 'unknown') return 'd';
+  if (key === 'awaiting-acceptance') return 'w';
+  return null;
+}

package/workspace/public/pm/dock.js

@@ -0,0 +1,175 @@
+/* pm/dock.js — the frame's agent dock (pm-os-absorb Run 3, slice 3A; PRD R10).
+ *
+ * The dock IS panel 4: the host app.js has always kept for the tabs (#pm-tabs), with its live terminals, documents and
+ * the Web tab (D69). The frame never re-creates or re-parents it; it only shows it open (on Today) or folds it to a 44px
+ * rail (everywhere else), and the PM toggles it with ⌘J or the rail. It never opens by itself: a tab that opens while
+ * the dock is a rail waits in the dock until the PM opens it.
+ *
+ * This module holds the parts of the dock that are new in the frame:
+ *   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)
+ *   sessionMenuButton({ newSession, withOptions, openSkill, ws })
+ *                                         "＋ Session": New session, Session with options, then the skills to start
+ *                                         from (R10: Skills start from the dock's ＋session menu; the Skills view goes)
+ *   sessionDefaults() / setSessionDefaults(patch)
+ *                                         the default CLI and model that Settings sets and the session menu applies
+ *
+ * The defaults live in this browser (localStorage), like the dock's other per-window choices; a fixture page reads and
+ * writes nothing.
+ */
+
+import { el } from './dom.js';
+import { FIXTURE } from './state.js';
+import { pmGet } from './http.js';
+import { button, iconButton, menu } from './primitives.js';
+import { COPY } from './frame-copy.js';
+
+/* ── the default CLI and model ────────────────────────────────────────────────────────────────────────────────────── */
+
+const DEFAULTS_KEY = 'pmos.workspace.pm.session-defaults';
+export const CLIS = Object.freeze(['shell', 'claude']);
+export const TIERS = Object.freeze(['auto', 'fast', 'balanced', 'deep']);
+
+/** { cli: 'shell'|'claude', tier: 'auto'|'fast'|'balanced'|'deep' }. An unreadable or unknown value is the default. */
+export function sessionDefaults() {
+  let raw = null;
+  if (!FIXTURE) { try { raw = JSON.parse(localStorage.getItem(DEFAULTS_KEY) || 'null'); } catch { raw = null; } }
+  const r = raw && typeof raw === 'object' ? raw : {};
+  return { cli: CLIS.includes(r.cli) ? r.cli : 'shell', tier: TIERS.includes(r.tier) ? r.tier : 'auto' };
+}
+
+export function setSessionDefaults(patch) {
+  const next = { ...sessionDefaults(), ...(patch || {}) };
+  const clean = { cli: CLIS.includes(next.cli) ? next.cli : 'shell', tier: TIERS.includes(next.tier) ? next.tier : 'auto' };
+  if (!FIXTURE) { try { localStorage.setItem(DEFAULTS_KEY, JSON.stringify(clean)); } catch { /* private mode: the default stands */ } }
+  return clean;
+}
+
+/* ── the rail and the fold control ────────────────────────────────────────────────────────────────────────────────── */
+
+export function createDockRail({ open, resize } = {}) {
+  const b = iconButton({ icon: 'bot', ariaLabel: COPY.dock.open, onClick: () => open && open(), attrs: { 'data-fr': 'dock-open', 'aria-keyshortcuts': 'Meta+J Control+J' } });
+  return el('div', { class: 'fr-dock-rail', 'data-fr': 'dock-rail' }, b, resize ? dockGrip(resize) : null);
+}
+
+/* ── the dock's width (0.53.1: the PM found the terminal too small) ───────────────────────────────────────────────────
+ * The grip sits in the rail's place while the dock is open, so the body keeps its four children and the dock stays the
+ * fourth. `resize` = { get() → px | null, set(px | null) }: null is the default width (the CSS clamp). The grip measures
+ * from the body's right edge, so the dock is as wide as the distance from the pointer to the window's edge. */
+export const DOCK_MIN = 320;
+export const DOCK_STEP = 32;
+/** The widest the dock may be in a body `bodyW` wide: the page keeps 280px beside it. */
+export const dockMax = (bodyW) => Math.max(DOCK_MIN, Math.round(bodyW) - 280);
+export const clampDock = (px, bodyW) => Math.min(dockMax(bodyW), Math.max(DOCK_MIN, Math.round(px)));
+
+function dockGrip(resize) {
+  const g = el('div', {
+    class: 'fr-dock-grip', 'data-fr': 'dock-grip', role: 'separator', 'aria-orientation': 'vertical',
+    'aria-label': COPY.dock.resize, title: COPY.dock.resize, tabindex: '0',
+  });
+  grips.set(g, resize);
+  g.addEventListener('dblclick', () => resize.set(null));
+  g.addEventListener('keydown', (e) => {
+    if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    e.preventDefault();
+    const b = g.closest('.fr-body');
+    const d = b && b.querySelector(':scope > .fr-dock');
+    const now = resize.get() || (d ? d.getBoundingClientRect().width : 0);
+    resize.set(clampDock(now + (e.key === 'ArrowLeft' ? DOCK_STEP : -DOCK_STEP), b ? b.getBoundingClientRect().width : window.innerWidth));
+  });
+  return g;
+}
+
+/* The drag is read on the document, once: a press on a grip starts it, and the moves and the release are the window's,
+ * so a drag that leaves the grip (it is 6px wide) keeps going. The grip itself is a separator with keys (above). */
+const grips = new WeakMap();   // grip -> resize
+let drag = null;               // { g, resize, right }
+document.addEventListener('pointerdown', (e) => {
+  const g = e.button === 0 && e.target && e.target.closest ? e.target.closest('[data-fr="dock-grip"]') : null;
+  const resize = g && grips.get(g);
+  const b = g && g.closest('.fr-body');
+  if (!resize || !b) return;
+  e.preventDefault();
+  drag = { g, resize, body: b, right: b.getBoundingClientRect().right };
+  g.setAttribute('data-dragging', '');
+});
+window.addEventListener('pointermove', (e) => {
+  if (drag) drag.resize.set(clampDock(drag.right - e.clientX, drag.body.getBoundingClientRect().width));
+});
+const endDrag = () => { if (drag) { drag.g.removeAttribute('data-dragging'); drag = null; } };
+window.addEventListener('pointerup', endDrag);
+window.addEventListener('pointercancel', endDrag);
+
+const focusLabels = new WeakMap();   // the Focus control -> its label node
+export function focusButton({ toggle } = {}) {
+  const label = el('span', null, COPY.dock.focus);
+  const b = button({ label, variant: 'ghost', size: 'sm',
+    attrs: { class: 'fr-dock-focus', 'data-fr': 'dock-focus', 'aria-pressed': 'false', title: COPY.dock.focusTitle, 'aria-keyshortcuts': 'Meta+Shift+J Control+Shift+J' },
+    onClick: () => toggle && toggle() });
+  focusLabels.set(b, label);
+  return b;
+}
+/** Show the Focus control's state: pressed while the dock has the whole window. */
+export function paintFocus(b, on) {
+  if (!b) return;
+  const label = focusLabels.get(b);
+  const text = on ? COPY.dock.unfocus : COPY.dock.focus;
+  if (label && label.textContent !== text) label.textContent = text;
+  b.setAttribute('aria-pressed', on ? 'true' : 'false');
+  b.title = on ? COPY.dock.unfocusTitle : COPY.dock.focusTitle;
+}
+
+export function foldButton({ fold } = {}) {
+  return iconButton({ icon: 'chevron-right', ariaLabel: COPY.dock.fold, onClick: () => fold && fold(), attrs: { class: 'fr-dock-fold', 'data-fr': 'dock-fold', 'aria-keyshortcuts': 'Meta+J Control+J' } });
+}
+
+/* ── ＋ Session ────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const skillsByWs = new Map();   // ws -> { at, list | null, error }
+const SKILLS_TTL = 60000;
+
+function loadSkills(ws) {
+  const key = ws || '';
+  const have = skillsByWs.get(key);
+  if (have && (have.pending || Date.now() - have.at < SKILLS_TTL)) return have.pending || Promise.resolve(have);
+  const entry = { at: Date.now(), list: have ? have.list : null, error: null };
+  entry.pending = pmGet('/api/skills' + (ws ? '?ws=' + encodeURIComponent(ws) : '')).then((j) => {
+    entry.list = j && Array.isArray(j.skills) ? j.skills : null;
+    entry.error = entry.list ? null : ((j && j.error) || COPY.dock.skillsUnread);
+    entry.at = Date.now();
+    delete entry.pending;
+    return entry;
+  });
+  skillsByWs.set(key, entry);
+  return entry.pending;
+}
+
+/**
+ * The dock's "＋ Session" control. A press opens a menu: New session (the one-click start, or the options form when the
+ * default CLI is not the shell, because only the form can start another CLI), Session with options, and one item per
+ * skill of the repository. A skill opens in its own tab in the dock, where it is read and started.
+ */
+export function sessionMenuButton({ newSession, withOptions, openSkill, ws } = {}) {
+  if (!FIXTURE) loadSkills(ws);
+  const b = button({
+    label: COPY.dock.session, variant: 'outline', size: 'sm', icon: 'plus', iconEnd: 'chevron-down',
+    attrs: { class: 'fr-session', 'data-fr': 'session', 'aria-haspopup': 'menu', 'aria-label': COPY.dock.sessionMenu },
+    onClick: async () => {
+      const got = FIXTURE ? null : await loadSkills(ws);
+      const d = sessionDefaults();
+      const items = [
+        { label: COPY.dock.newSession, onSelect: () => (d.cli === 'shell' ? newSession && newSession() : withOptions && withOptions(d)) },
+        { label: COPY.dock.withOptions, onSelect: () => withOptions && withOptions(d) },
+        { sep: true },
+      ];
+      const list = got && got.list ? got.list : [];
+      if (!list.length) items.push({ label: got && got.error ? COPY.dock.skillsUnread : COPY.dock.noSkills, onSelect: () => {} });
+      for (const sk of list) items.push({ label: COPY.dock.skillsHead + ': ' + (sk.label || sk.skill || sk.id), onSelect: () => openSkill && openSkill(sk) });
+      menu({ anchor: b, items, ariaLabel: COPY.dock.sessionMenu });
+    },
+  });
+  return b;
+}