create-pmos 0.24.0 → 0.26.0

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

@@ -35,17 +35,24 @@
  * rendering in the real app is "the beautiful shell" the PRD names as a failure mode.
  *
  * ── The one place the design's fiction is refused ────────────────────────────────────────────
- * The artifact sync panel renders exactly as designed — the repo-is-source statement, the
- * difference summary, the two approvals. In FIXTURE mode the summary is the prototype's copy
- * verbatim. In real mode with no connector configured it says so, and the two approval buttons are
- * inert, because a panel that reported "2 sections differ" without having read anything would be
- * precisely the watermelon this repo has a word for (PRD, "External sync").
+ * The artifact sync panel keeps the design's SHAPE — the statement, then the two approvals — and
+ * replaces its claims. In FIXTURE mode the prototype's copy renders verbatim, because the parity
+ * comparator measures this surface against the design file and a re-worded label is a defect there.
+ * In real mode the panel says only what a row in the store says: nothing chosen yet, a direction
+ * proposed and unreported, or a named session's write at a named time. The design's
+ * `2 sections differ` and `in sync 12:41` are unreachable from the real path — a difference summary
+ * over a destination nobody contacted is precisely the watermelon this repo has a word for.
+ *
+ * The two approvals ACT. They record the direction the PM chose and show the task a session will
+ * run; they do not sync, because PMOS holds no credential and makes no outbound request (D53). The
+ * property that has to survive every future change to this file: there is no path from a click to a
+ * rendered claim about a destination without a profile in between.
  */
 
 import { el, setChildren } from './dom.js';
 import { state, setState, FIXTURE } from './state.js';
 import * as FX from './fixture.js';
-import { openDoc, openTab, fileNewModel } from './panel-initiatives.js';
+import { openDoc, openTab, openTerm, fileNewModel } from './panel-initiatives.js';
 import { addProductBody } from './panel-repos.js';
 
 /* ── the prototype's small helpers ─────────────────────────────────────────────────────────── */
@@ -162,21 +169,27 @@ function hasConnector(kind) {
 const NO_CONNECTOR = 'no connector configured — nothing was read, and nothing will be written.';
 
 /**
- * Why the two sync approvals are inert in real mode even when a destination IS resolvable.
+ * What the two sync approvals now do, and why they stopped being inert.
+ *
+ * They used to be dead in every real session — `const inert = FIXTURE ? !live : true` — because
+ * publishing and read-back were out of scope by name and an inert control that states its reason
+ * beats a control that lies. That was right on the day it shipped and it stopped being right when
+ * the PM asked for the capability, because the reason it gave was *waiting on a decision the PM had
+ * not made*, and they made it.
  *
- * They are publishing and read-back, and both are out of scope by name (PRD non-goals 1–2).
- * Publishing puts PMOS content in two places and needs a fork/drift ruling the PM has not made;
- * read-back has no surviving architecture at all, because D53's inbound half was a hosted-Supabase
- * webhook and D64 deprecated that path. The buttons' old results — `pushed · repo → jira · in sync
- * 12:41` — were a hardcoded clock time presented as a sync confirmation, which is the same defect
- * as the fabricated identifier one level up.
+ * What a click does now is the whole design in one sentence: it records the DIRECTION the PM chose
+ * and shows the TASK a session will run to carry it out. It does not sync. PMOS holds no credential
+ * and makes no outbound request (D53) — the session holds the credential, performs the write, and
+ * reports back through a store that refuses any claim of success that cannot name the profile that
+ * made it.
  *
- * Deleting the buttons was the other option and is worse: the PM would be left wondering whether
- * PMOS forgot how to sync. An inert control that states the reason is a surface telling the truth
- * about its own limits.
+ * So the surface can now say three different true things where it previously said one: nothing has
+ * been chosen; a direction was chosen and nobody has reported; a named session wrote at a named
+ * time. The word it still cannot say is `in sync`, because that is a claim about two documents PMOS
+ * has never compared.
  */
-const SYNC_OUT_OF_SCOPE = 'publishing and read-back are not built. PMOS records which record this '
-  + 'corresponds to; it does not write to that record, and it has read nothing from it.';
+const SYNC_NOT_A_SYNC = 'PMOS does not perform this itself — it records which way you chose and '
+  + 'composes the task. The session you run it in holds the credential; PMOS holds none.';
 
 /* ── the sticky detail header (lines 332–335) ───────────────────────────────────────────────
  * Built once and re-used, so panel 3's chrome keeps its identity across renders the way panel 2's
@@ -199,6 +212,78 @@ const stickyHeader = el('div', {
   }, '⟨'),
 );
 
+/* ── 1b · SESSIONS — the agents running on THIS initiative ──────────────────────────────────────
+ *
+ * The PM's report: *"when I click the initiative on the initiative panel (which is column number 3),
+ * I can see the active sessions list, then when i click, either go to the tab (if tab is open), or
+ * open new tab and directly resume to the session."*
+ *
+ * Their first sentence was not that the list is unclickable — there was no list. `data.js` has been
+ * building `rec.sessions` (each row carrying the server's own id and rendered label) and `rec.noSess`
+ * since the four-panel port, and `initBody()` rendered header → phases → links → artifacts → footer.
+ * Neither field appeared anywhere in this file. The join ran on the server, survived the wire, was
+ * normalised by the data layer, and was dropped by the renderer.
+ *
+ * ── WHY THIS DOES NOT RENDER `rec.sessions` ──────────────────────────────────────────────────
+ * Because `FX.DATA` carries seed `sessions` arrays, and drawing them would light up seven fixture
+ * rows and break the design comparator's text axis on the first render. The board solved this the
+ * same way and for the same reason: read the LIVE join, which fixture mode structurally cannot fill
+ * (`pollSessions` returns early on FIXTURE). There is no server in fixture mode, so there are no
+ * live sessions to claim.
+ *
+ * ── THE CLICK ────────────────────────────────────────────────────────────────────────────────
+ * `openTerm` with the session's SERVER id and no `spawn`. Those two facts are the whole behaviour:
+ * `openTab` focuses a tab whose id already exists rather than duplicating it, and the absent `spawn`
+ * is what withholds authorisation to create a PTY — so a click either lands on the open tab or opens
+ * one attached to the running process. It cannot start a second agent.
+ */
+
+/** The live sessions on one initiative, from the shared join — never from the record's seed rows. */
+function liveSessionsFor(slug) {
+  if (FIXTURE || !slug) return [];
+  const ws = typeof window !== 'undefined' ? window.PMOSWorkingSet : null;
+  const map = state.wsBranches && typeof state.wsBranches === 'object' ? state.wsBranches : {};
+  if (!ws || typeof ws.attributeSessions !== 'function') return [];
+  const attr = ws.attributeSessions(state.sessions, (id) => map[id] || null);
+  return attr.byInitiative[slug] || [];
+}
+
+function sessionsBlock(slug) {
+  const rows = liveSessionsFor(slug);
+  if (!rows.length) return null;                    // nothing running: no heading over nothing
+  const ss = typeof window !== 'undefined' ? window.PMOSSessionState : null;
+  const openIds = new Set((state.tabs || []).filter((t) => t && t.kind === 'term' && t.sessionId).map((t) => t.sessionId));
+
+  return el('div', { style: 'padding:9px 14px 10px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-foreground);margin-bottom:6px' },
+      'sessions'),
+    rows.map((s) => {
+      const st = ss && ss.GLYPH[s.shown] ? s.shown : null;
+      const here = openIds.has(s.id);
+      return el('button', {
+        onClick: () => openTerm(slug, { name: s.name, st: s.shown, label: s.label, id: s.id, profile: s.profile_id }),
+        style: 'display:flex;align-items:center;gap:8px;width:100%;padding:5px 6px;min-height:30px',
+        hover: 'background:var(--accent)',
+        // What the click will do, said BEFORE it — the difference between landing on a tab already
+        // open and opening one that attaches. Neither ever starts an agent, and that is worth saying
+        // on the control rather than only in a comment nobody reading the surface can see.
+        title: (s.name || s.id) + ' — ' + (s.label || s.shown || '')
+          + (s.profile_id ? '\nprofile ' + s.profile_id : '')
+          + (here ? '\nits tab is open — this goes to it' : '\nopens a tab attached to this running session; nothing is started'),
+      },
+        el('span', { style: 'flex:none;font-size:11px;color:' + (st && ss ? ss.COLOR[st] : 'var(--muted-foreground)') },
+          st && ss ? ss.GLYPH[st] : '·'),
+        el('span', { style: 'font-family:var(--mono);font-size:11.5px;color:var(--foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' },
+          iv(s.name || s.id)),
+        el('span', { style: 'margin-left:auto;flex:none;font-size:10px;color:var(--muted-foreground)' },
+          iv(s.label || s.shown || '')),
+        el('span', { style: 'flex:none;font-family:var(--mono);font-size:9.5px;color:var(--muted-foreground)' },
+          iv(here ? 'open' : 'resume')),
+      );
+    }),
+  );
+}
+
 /* ── 1 · HEADER — slug, tag, pills (lines 338–346) ──────────────────────────────────────────── */
 
 function headerBlock(name, tag, pills) {
@@ -344,6 +429,22 @@ function linkStateStyle(st) {
   return { color: 'var(--muted-foreground)', label: 'declared' };
 }
 
+/* ── the small controls a recorded link needs to be the PM's ────────────────────────────────
+ * `edit` and `unlink`. Neither existed, and their absence made a paste error permanent: the store
+ * is append-only and supersedes on read, so CHANGING a link was always one row away — there was
+ * simply nothing in the UI that could write that row. Removing one had no representation at all.
+ *
+ * They are rendered only in real mode. Fixture mode is a transcription of the prototype, pinned
+ * line-for-line by the parity comparator, and the prototype has no such controls; adding them there
+ * would be a parity failure dressed as a feature.
+ */
+const MINI_BTN = 'font-family:var(--mono);font-size:10px;padding:3px 8px;min-height:24px;'
+  + 'background:transparent;border:1px solid var(--border);color:var(--muted-foreground)';
+
+function miniBtn(label, onClick, extra) {
+  return el('button', { onClick, style: MINI_BTN + (extra || ''), hover: 'border-color:var(--ring);color:var(--foreground)' }, label);
+}
+
 /**
  * The one sentence a link row is allowed to say about itself, built from what was actually observed.
  * Every branch names its evidence or admits it has none — there is deliberately no branch that
@@ -363,7 +464,13 @@ function linkStateText(lk) {
 function linksRow(slug) {
   const rec = records()[slug] || {};
   const manual = (state.initLinks || {})[slug] || [];
-  const links = [...(rec.links || []), ...manual];
+  // A reference the PM withdrew in this window is dropped here as well as on disk. The server
+  // already omits retracted pairs from what it publishes, so this only covers the moment between
+  // the click and the next hydration — without it the row would linger until a reload and the PM
+  // would reasonably conclude the control had failed.
+  const dropped = (state.linkGone || {})[slug] || [];
+  const gone = (lk) => dropped.some((d) => d.kind === lk.kind && d.target === (lk.target || lk.path));
+  const links = [...(rec.links || []), ...manual].filter((lk) => !gone(lk));
   const openSrc = (state.linkForm || {})[slug] || null;
 
   /**
@@ -378,31 +485,62 @@ function linksRow(slug) {
       (s) => ({
         initLinks: { ...s.initLinks, [slug]: [...((s.initLinks || {})[slug] || []), link] },
         linkForm: { ...s.linkForm, [slug]: null },
+        // A pair the PM re-declares is no longer withdrawn. Clearing this is what makes R-B3's
+        // "a later declaration brings it back" true on the screen as well as in the store.
+        linkGone: { ...s.linkGone, [slug]: ((s.linkGone || {})[slug] || []).filter((d) => !(d.kind === src && d.target === target)) },
       }),
       () => declare('recordInitiativeLink', { slug, ...link }),
     );
   };
 
-  const rows = links.map((lk) => el('button', {
-    onClick: () => openDoc(slug, lk.path, String(lk.kind).toUpperCase()),
-    style: 'display:flex;gap:8px;align-items:center;padding:5px 6px;margin:0 -6px;min-height:34px',
-    hover: 'background:var(--accent)',
-  },
-    el('span', { style: 'flex:none;width:76px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--info)' }, iv(lk.kind)),
-    el('span', { style: 'font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(lk.label)),
-    // A row that CARRIES provenance states what was observed; a row that does not keeps whatever
-    // status copy it came with. The branch is on the row, not on the mode, which is the point: the
-    // prototype's seeded rows (`auto · session`) render unchanged so the parity comparator still
-    // sees a like-for-like surface, while every row this surface actually records — in either mode —
-    // is held to the three-word vocabulary. Branching on FIXTURE instead would have left a real row
-    // in a fixture-mode session rendering `undefined`.
-    (lk.state || lk.origin)
-      ? el('span', {
-        style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:'
-          + linkStateStyle(lk.state || 'declared').color,
-      }, iv(linkStateText(lk)))
-      : el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(lk.st)),
-  ));
+  /**
+   * Withdraw a reference. This appends a `retracted` row — it does not delete anything, because the
+   * store is a history of what the PM declared and a deleted row is a declaration that never
+   * happened. The server refuses a retraction that does not come from the PM.
+   */
+  const retract = (lk) => {
+    const target = lk.target || lk.path;
+    setState(
+      (s) => ({
+        linkGone: { ...s.linkGone, [slug]: [...((s.linkGone || {})[slug] || []), { kind: lk.kind, target }] },
+        initLinks: { ...s.initLinks, [slug]: ((s.initLinks || {})[slug] || []).filter((x) => !(x.kind === lk.kind && (x.target || x.path) === target)) },
+      }),
+      () => declare('recordInitiativeLink', {
+        slug, kind: lk.kind, label: lk.label, path: target, origin: 'typed', state: 'retracted',
+      }),
+    );
+  };
+
+  const rows = links.map((lk) => {
+    const body = el('button', {
+      onClick: () => openDoc(slug, lk.path, String(lk.kind).toUpperCase()),
+      // In fixture mode this button IS the row and carries the prototype's own negative margin. In
+      // real mode it sits inside a wrapper that carries it instead, and the button flexes to fill.
+      style: 'display:flex;gap:8px;align-items:center;padding:5px 6px;min-height:34px;'
+        + (FIXTURE ? 'margin:0 -6px' : 'flex:1;min-width:0'),
+      hover: 'background:var(--accent)',
+    },
+      el('span', { style: 'flex:none;width:76px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--info)' }, iv(lk.kind)),
+      el('span', { style: 'font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(lk.label)),
+      // A row that CARRIES provenance states what was observed; a row that does not keeps whatever
+      // status copy it came with. The branch is on the row, not on the mode, which is the point: the
+      // prototype's seeded rows (`auto · session`) render unchanged so the parity comparator still
+      // sees a like-for-like surface, while every row this surface actually records — in either mode —
+      // is held to the closed vocabulary. Branching on FIXTURE instead would have left a real row
+      // in a fixture-mode session rendering `undefined`.
+      (lk.state || lk.origin)
+        ? el('span', {
+          style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:'
+            + linkStateStyle(lk.state || 'declared').color,
+        }, iv(linkStateText(lk)))
+        : el('span', { style: 'margin-left:auto;flex:none;font-family:var(--mono);font-size:10px;color:var(--muted-foreground)' }, iv(lk.st)),
+    );
+    // The prototype's row is a single button and the comparator measures it as one. Only real mode
+    // grows the wrapper and the withdraw control.
+    if (FIXTURE) return body;
+    return el('div', { style: 'display:flex;gap:6px;align-items:center;margin:0 -6px;min-width:0' },
+      body, miniBtn('unlink', () => retract(lk)));
+  });
 
   // Which destinations a session could actually look up, and under which profile. Derived by the
   // server from the PM's agent profiles — never a constant, and never a claim that PMOS is connected.
@@ -484,16 +622,69 @@ function linksRow(slug) {
 /* ── 5b · ARTIFACTS (lines 399–437, derivation 1779–1795) ───────────────────────────────────
  * Repo files, each with its role and path; clicking one opens the document. An artifact may carry
  * an external DESTINATION — recorded as a declaration, never as an outbound call — and once linked
- * it grows the ⇄ pill, a `sync` button, and the inline sync panel behind it.
+ * it grows the ⇄ pill, a `sync` button, `edit`/`unlink`, and the inline sync panel behind it.
  *
- * The sync panel is where this surface is at its most careful. The repo is the source of truth,
- * stated first; then the difference summary; then the two approvals, whose chosen result persists
- * as the status line beside the pill. With no connector, the summary says nothing was read and
- * both approvals are inert.
+ * The sync panel is where this surface is at its most careful, and the care moved rather than
+ * relaxed. It used to be careful by refusing to act; it is now careful about WHAT A CLICK MEANS. A
+ * direction is a decision the PM makes and PMOS records; the write is performed by a session
+ * holding the PM's own MCP; and the status line reports the latest recorded row and nothing else.
+ * There is no path from a click to a claim about the destination without a profile in between —
+ * that sentence is the acceptance criterion for this whole region.
  */
+
+/**
+ * The status line beside the pill, derived from the latest recorded sync row.
+ *
+ * Everything it can say is something a row on disk says. It cannot say `in sync`, because that
+ * compares two documents PMOS has never read; it cannot invent a time, because the only times here
+ * are the ones the store stamped. `proposed` says the quiet true thing that the old panel had no
+ * way to express: you chose a direction, and nobody has reported doing it.
+ */
+function syncStatus(sy) {
+  if (!sy) return null;
+  const hm = (t) => String(t || '').slice(11, 16);
+  const arrow = sy.direction === 'push' ? 'repo → ' + sy.kind : sy.kind + ' → repo';
+  if (sy.state === 'applied') {
+    return {
+      color: 'var(--success)',
+      text: arrow + ' · applied by ' + (sy.profile || 'a session') + (hm(sy.applied_at) ? ' · ' + hm(sy.applied_at) : ''),
+    };
+  }
+  if (sy.state === 'failed') {
+    return { color: 'var(--warning)', text: arrow + ' · failed · ' + (sy.reason || 'no reason recorded') };
+  }
+  return {
+    color: 'var(--muted-foreground)',
+    text: arrow + ' · proposed' + (hm(sy.at) ? ' ' + hm(sy.at) : '') + ' · no session has reported',
+  };
+}
+
+/** What the open sync panel says about where things stand. One sentence per recorded state. */
+function syncSummary(sy, dest) {
+  const hm = (t) => String(t || '').slice(11, 16);
+  if (!sy) {
+    return 'no direction has been chosen for this document yet. nothing has been written either way,'
+      + ' and PMOS has read nothing from ' + dest.kind + '.';
+  }
+  const way = sy.direction === 'push' ? 'push to ' + sy.kind : 'adoption from ' + sy.kind;
+  if (sy.state === 'applied') {
+    return sy.profile + ' reported applying this ' + way + (hm(sy.applied_at) ? ' at ' + hm(sy.applied_at) : '')
+      + '.' + (sy.detail ? ' it reported: ' + sy.detail : '');
+  }
+  if (sy.state === 'failed') {
+    return 'the last attempt at this ' + way + ' failed — ' + (sy.reason || 'no reason was recorded')
+      + '. nothing was written.';
+  }
+  return 'a ' + way + ' was proposed' + (hm(sy.at) ? ' at ' + hm(sy.at) : '')
+    + '. the task below is what performs it, and no session has reported back.';
+}
+
 function artifactRow(slug, a) {
   const key = FX.artKey(slug, a.path);
-  const dest = (state.artLinks || {})[key] || a.dest || null;
+  // `hasOwnProperty`, not `||`. An unlinked artifact records `null` under its key, and a falsy check
+  // would fall straight through to the server's `a.dest` and re-draw the link the PM just withdrew.
+  const over = state.artLinks || {};
+  const dest = Object.prototype.hasOwnProperty.call(over, key) ? over[key] : (a.dest || null);
   const syncState = (state.artSyncState || {})[key] || null;
   const syncOpen = !!(state.artSyncOpen || {})[key];
 
@@ -506,28 +697,76 @@ function artifactRow(slug, a) {
     el('span', { style: 'font-family:var(--mono);font-size:10px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap' }, iv(a.path)),
   );
 
+  const openHere = (state.artLinkForm || {})[key] || null;
+  const inputId = 'artref-' + key.replace(/[^A-Za-z0-9]/g, '-');
+  const conn = (state.connectors && state.connectors.configured) || [];
+
+  /**
+   * Record a destination for this artifact. Used by BOTH the first link and an edit of one already
+   * recorded — they are the same act as far as the store is concerned, because it is append-only and
+   * supersedes on read. That is why editing needed no new endpoint and no mutation: the second row
+   * simply wins, and the first stays as the history of what the PM once believed.
+   */
+  const submit = (kind) => {
+    const node = document.getElementById(inputId);
+    const target = String((node && node.value) || '').trim();
+    if (!target) return;
+    const d = { kind, target, origin: 'typed', state: 'declared' };
+    setState((s) => ({
+      artLinks: { ...s.artLinks, [key]: d },
+      artLinkForm: { ...s.artLinkForm, [key]: null },
+      // A re-linked pair discards whatever sync was recorded against the OLD destination in this
+      // window. Carrying it over would attach a status line to a record it was never about.
+      artSyncTask: { ...s.artSyncTask, [key]: null },
+    }));
+    declare('recordArtifactLink', { artifact_path: a.path, slug, kind, target, origin: 'typed', state: 'declared' });
+  };
+
+  /** Withdraw this artifact's destination — an appended `retracted` row, never a deletion. */
+  const retract = () => {
+    if (!dest) return;
+    setState((s) => ({
+      artLinks: { ...s.artLinks, [key]: null },
+      artSyncOpen: { ...s.artSyncOpen, [key]: false },
+      artSyncTask: { ...s.artSyncTask, [key]: null },
+    }));
+    declare('recordArtifactLink', {
+      artifact_path: a.path, slug, kind: dest.kind, target: dest.target, origin: 'typed', state: 'retracted',
+    });
+  };
+
+  /** The paste-a-reference form. `initial` pre-fills it when the PM is editing rather than adding. */
+  const destForm = (kind, initial) => el('div', { style: 'margin-top:6px;padding:8px 10px;border:1px solid var(--border);background:var(--background)' },
+    el('div', { style: 'font-size:11.5px;color:var(--muted-foreground);line-height:1.5;margin-bottom:6px' },
+      iv(conn.some((c) => c.kind === kind)
+        ? 'paste the ' + kind + ' reference this file corresponds to. a session on '
+          + (conn.find((c) => c.kind === kind) || {}).profile + ' can find it for you — PMOS reads nothing.'
+        : 'paste the ' + kind + ' reference this file corresponds to. nothing here can look it up,'
+          + ' so what you type is recorded as your own declaration.')),
+    el('input', {
+      id: inputId,
+      value: initial || '',
+      placeholder: kind === 'jira' ? 'ATL-482 or its URL' : 'the page or document URL',
+      style: 'width:100%;font-family:var(--mono);font-size:11px;padding:5px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
+    }),
+    el('div', { style: 'display:flex;gap:6px;margin-top:7px;flex-wrap:wrap' },
+      el('button', {
+        onClick: () => submit(kind),
+        style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500',
+      }, 'record'),
+      el('button', {
+        onClick: () => setState((s) => ({ artLinkForm: { ...s.artLinkForm, [key]: null } })),
+        style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:transparent;border:1px solid var(--border);color:var(--muted-foreground)',
+      }, 'cancel'),
+    ),
+  );
+
   if (!dest) {
     // Unlinked: the three destinations it could be linked to.
     // In FIXTURE mode the prototype's own destination copy is drawn, so the parity comparator still
     // sees a like-for-like surface. In REAL mode a click opens a FORM: `linkArtDest` built the
     // destination out of the artifact's own FILENAME — `PM / <basename>`, `ATL epic · <basename>` —
     // which is a name for a page nobody created, recorded as though the PM had chosen it.
-    const openHere = (state.artLinkForm || {})[key] || null;
-    const inputId = 'artref-' + key.replace(/[^A-Za-z0-9]/g, '-');
-    const conn = (state.connectors && state.connectors.configured) || [];
-
-    const submit = (kind) => {
-      const node = document.getElementById(inputId);
-      const target = String((node && node.value) || '').trim();
-      if (!target) return;
-      const d = { kind, target, origin: 'typed', state: 'declared' };
-      setState((s) => ({
-        artLinks: { ...s.artLinks, [key]: d },
-        artLinkForm: { ...s.artLinkForm, [key]: null },
-      }));
-      declare('recordArtifactLink', { artifact_path: a.path, slug, kind, target, origin: 'typed', state: 'declared' });
-    };
-
     const linkRow = el('div', { style: 'display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:3px 0 0' },
       el('span', { style: 'font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-foreground)' }, 'link'),
       FX.ART_LINK_SRCS.map((ls) => el('button', {
@@ -546,34 +785,13 @@ function artifactRow(slug, a) {
       }, '＋ ', iv(ls.l))),
     );
 
-    const form = openHere ? el('div', { style: 'margin-top:6px;padding:8px 10px;border:1px solid var(--border);background:var(--background)' },
-      el('div', { style: 'font-size:11.5px;color:var(--muted-foreground);line-height:1.5;margin-bottom:6px' },
-        iv(conn.some((c) => c.kind === openHere)
-          ? 'paste the ' + openHere + ' reference this file corresponds to. a session on '
-            + (conn.find((c) => c.kind === openHere) || {}).profile + ' can find it for you — PMOS reads nothing.'
-          : 'paste the ' + openHere + ' reference this file corresponds to. nothing here can look it up,'
-            + ' so what you type is recorded as your own declaration.')),
-      el('input', {
-        id: inputId,
-        placeholder: openHere === 'jira' ? 'ATL-482 or its URL' : 'the page or document URL',
-        style: 'width:100%;font-family:var(--mono);font-size:11px;padding:5px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
-      }),
-      el('div', { style: 'display:flex;gap:6px;margin-top:7px;flex-wrap:wrap' },
-        el('button', {
-          onClick: () => submit(openHere),
-          style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500',
-        }, 'record'),
-        el('button', {
-          onClick: () => setState((s) => ({ artLinkForm: { ...s.artLinkForm, [key]: null } })),
-          style: 'font-family:var(--mono);font-size:10px;padding:4px 9px;min-height:26px;background:transparent;border:1px solid var(--border);color:var(--muted-foreground)',
-        }, 'cancel'),
-      ),
-    ) : null;
-
-    return el('div', { style: 'min-width:0' }, head, linkRow, form);
+    return el('div', { style: 'min-width:0' }, head, linkRow, openHere ? destForm(openHere, '') : null);
   }
 
-  // Linked: the destination pill, the sync button, and the persisted result of the last approval.
+  // Linked: the destination pill, the sync button, the PM's own controls, and the status line —
+  // which in real mode is what the store recorded, and in fixture mode is the prototype's own.
+  const recorded = FIXTURE ? null : syncStatus(a.sync || null);
+  const shown = FIXTURE ? syncState : (recorded || syncState);
   const pillRow = el('div', { style: 'display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:3px 0 0 0' },
     el('span', { style: 'font-family:var(--mono);font-size:10px;padding:1px 6px;background:var(--brand-wash);color:var(--brand)' },
       '⇄ ', iv(dest.kind), ' · ', iv(dest.target)),
@@ -582,15 +800,22 @@ function artifactRow(slug, a) {
       style: 'font-family:var(--mono);font-size:10.5px;padding:3px 10px;min-height:26px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
       hover: 'border-color:var(--ring)',
     }, 'sync'),
-    syncState && el('span', { style: 'font-family:var(--mono);font-size:10px;color:' + syncState.color }, iv(syncState.text)),
+    // Real mode only: the prototype has no edit or unlink control and the comparator measures the
+    // fixture surface against it.
+    FIXTURE ? null : miniBtn('edit', () => setState((s) => ({
+      artLinkForm: { ...s.artLinkForm, [key]: (s.artLinkForm || {})[key] ? null : dest.kind },
+    }))),
+    FIXTURE ? null : miniBtn('unlink', retract),
+    shown && el('span', { style: 'font-family:var(--mono);font-size:10px;color:' + shown.color }, iv(shown.text)),
   );
 
   let panel = null;
-  if (syncOpen) {
+  if (syncOpen && FIXTURE) {
+    // The prototype's panel, transcribed. Its two approvals write the seed module's own result
+    // strings; nothing here reaches a store, and the parity comparator measures this surface against
+    // the design file character for character.
     const live = hasConnector(dest.kind);
-    // FIXTURE mode draws the prototype's two working approvals so the comparator sees a like-for-like
-    // surface. REAL mode never enables them: they are publishing and read-back, both out of scope.
-    const inert = FIXTURE ? !live : true;
+    const inert = !live;
     const decide = (make) => () => {
       if (inert) return;
       setState((s) => ({
@@ -601,7 +826,7 @@ function artifactRow(slug, a) {
     const off = inert ? ';opacity:.5;cursor:not-allowed' : '';
     panel = el('div', { style: 'margin-top:6px;padding:9px 11px;border:1px solid var(--border);background:var(--background)' },
       el('div', { style: 'font-size:12px;line-height:1.5;color:var(--muted-foreground)' },
-        iv(FIXTURE ? (live ? FX.artDiffText(dest) : NO_CONNECTOR) : SYNC_OUT_OF_SCOPE)),
+        iv(live ? FX.artDiffText(dest) : NO_CONNECTOR)),
       el('div', { style: 'display:flex;gap:6px;margin-top:8px;flex-wrap:wrap' },
         el('button', {
           onClick: decide(FX.artSyncPushed), disabled: inert,
@@ -614,9 +839,90 @@ function artifactRow(slug, a) {
         }, 'adopt ', iv(dest.kind), ' → repo'),
       ),
     );
+  } else if (syncOpen) {
+    panel = realSyncPanel(slug, a, key, dest);
   }
 
-  return el('div', { style: 'min-width:0' }, head, pillRow, panel);
+  return el('div', { style: 'min-width:0' }, head, pillRow, openHere ? destForm(openHere, dest.target) : null, panel);
+}
+
+/**
+ * The real sync panel: what is true now, who could perform the next step, the two directions, and —
+ * once a direction is chosen — the task that carries it out.
+ *
+ * The click handler is worth reading closely, because it is where this initiative could most easily
+ * have reproduced the defect it exists to remove. It records a `proposed` row and asks the server
+ * for the task text. It does NOT set a status line of its own, does not stamp a time, and has no
+ * success branch — because from in here there is no such thing as success to observe. The status
+ * line updates when the panel next reads the store, and it can only say what a row says.
+ */
+function realSyncPanel(slug, a, key, dest) {
+  const task = (state.artSyncTask || {})[key] || null;
+  const resolver = ((state.connectors && state.connectors.configured) || []).find((c) => c.kind === dest.kind) || null;
+
+  const choose = (direction) => () => {
+    const data = sibling('data', './data.js');
+    if (!data || typeof data.recordSync !== 'function') return;
+    setState((s) => ({ artSyncTask: { ...s.artSyncTask, [key]: { pending: true, direction } } }));
+    Promise.resolve(data.recordSync({
+      artifact_path: a.path, slug, kind: dest.kind, target: dest.target,
+      direction, profile: resolver ? resolver.profile : null,
+    }))
+      .then((out) => setState((s) => ({
+        artSyncTask: {
+          ...s.artSyncTask,
+          [key]: (!out || out.ok === false)
+            // A refusal is shown, never absorbed. The store returning 500 rather than a false green
+            // is the server's half of this rule; showing what it said is the client's.
+            ? { error: (out && out.error) || 'the direction could not be recorded', direction }
+            : { text: out.task, error: out.task_error || null, direction, profile: resolver ? resolver.profile : null },
+        },
+      })))
+      .catch((e) => setState((s) => ({
+        artSyncTask: { ...s.artSyncTask, [key]: { error: String((e && e.message) || e), direction } },
+      })));
+  };
+
+  const btn = (label, primary, onClick) => el('button', {
+    onClick,
+    style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;'
+      + (primary
+        ? 'background:var(--brand);color:oklch(0.987 0.002 197.1);font-weight:500'
+        : 'background:var(--secondary);border:1px solid var(--border);color:var(--foreground)'),
+    hover: primary ? null : 'border-color:var(--ring)',
+  }, label);
+
+  return el('div', { style: 'margin-top:6px;padding:9px 11px;border:1px solid var(--border);background:var(--background)' },
+    el('div', { style: 'font-size:12px;line-height:1.5;color:var(--muted-foreground)' },
+      iv(syncSummary(a.sync || null, dest))),
+    el('div', { style: 'font-size:11.5px;line-height:1.5;color:var(--muted-foreground);margin-top:5px' },
+      iv(resolver
+        ? SYNC_NOT_A_SYNC + ' a session on ' + resolver.profile + ' holds your ' + dest.kind + ' MCP.'
+        : SYNC_NOT_A_SYNC + ' no agent profile declares a ' + dest.kind + ' MCP, so the task below is'
+          + ' yours to run wherever you hold that access.')),
+    el('div', { style: 'display:flex;gap:6px;margin-top:8px;flex-wrap:wrap' },
+      btn('repo is source → push', true, choose('push')),
+      el('button', {
+        onClick: choose('adopt'),
+        style: 'font-family:var(--mono);font-size:10.5px;padding:5px 10px;min-height:28px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)',
+        hover: 'border-color:var(--ring)',
+      }, 'adopt ', iv(dest.kind), ' → repo'),
+    ),
+    task && (task.error
+      ? el('div', { style: 'margin-top:8px;font-size:11.5px;color:var(--warning);line-height:1.5' },
+        iv('the direction was not recorded — ' + task.error))
+      : task.pending
+        ? el('div', { style: 'margin-top:8px;font-size:11.5px;color:var(--muted-foreground)' }, iv('recording…'))
+        : el('div', { style: 'margin-top:8px' },
+          el('div', { style: 'font-size:11px;color:var(--muted-foreground);line-height:1.5;margin-bottom:5px' },
+            iv('recorded as proposed. run this in a session on ' + (task.profile || 'a profile holding that MCP')
+              + '. it records the outcome itself, and PMOS will refuse a success that does not name'
+              + ' the profile that performed it.')),
+          el('pre', {
+            style: 'font-family:var(--mono);font-size:10.5px;line-height:1.5;white-space:pre-wrap;'
+              + 'padding:8px 9px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground);margin:0',
+          }, iv(task.text)))),
+  );
 }
 
 function artifactsRow(slug, rec) {
@@ -674,6 +980,11 @@ function initBody(slug) {
     out.push(...noLadderBlock(FX.wash(ansC), ansC, (rec.answer && rec.answer.text) || '', rec.noLadder));
   }
 
+  // What is RUNNING on this initiative, above the ladder: the loop position is the slower fact, and
+  // an agent waiting on the PM is the one they came to the panel for.
+  const sess = sessionsBlock(slug);
+  if (sess) out.push(sess);
+
   const phases = phaseBlock(slug, rec);
   if (phases) out.push(phases);
 
@@ -727,6 +1038,97 @@ function anchorButton(an) {
   );
 }
 
+/* ── BIND — the PM's own word about a session already running ──────────────────────────────────
+ *
+ * Every session that existed before a session could record its initiative has no attribution, and so
+ * does every session started outside PMOS. This is the only way one of them ever joins an initiative,
+ * which is why "show them read-only" was not enough.
+ *
+ * The whole surface turns on one distinction, stated in the copy rather than left to a code comment:
+ * what is recorded here is a DECLARATION. PMOS was not told at spawn and did not read it off
+ * anything — the PM is saying so. `initiative-links.jsonl` already draws that line with
+ * `origin`/`state`, and a binding that presented itself as a reading would be the same watermelon
+ * this repo keeps finding.
+ */
+function bindBody() {
+  const out = [];
+  const rows = (state.sessions || []).filter((s) => s && s.shown !== 'exited');
+  const picked = state.bindSess && rows.find((s) => s.id === state.bindSess);
+  const board = state.board && state.board[state.product] ? state.board[state.product] : [];
+  const slugs = [];
+  for (const g of board) for (const sl of g.slugs || []) if (!slugs.includes(sl)) slugs.push(sl);
+  const typed = String(state.bindTo || '');
+  const matches = typed ? slugs.filter((sl) => sl.includes(typed.toLowerCase())).slice(0, 8) : [];
+
+  out.push(el('div', { style: 'padding:13px 14px 11px;border-bottom:1px solid var(--border)' },
+    el('div', { style: 'font-size:14px;font-weight:600;margin-bottom:4px' }, 'bind a session'),
+    el('div', { style: 'font-size:11.5px;line-height:1.5;color:var(--muted-foreground)' },
+      'PMOS was never told what these sessions are for, and nothing here can read it. '
+      + 'What you pick is recorded as YOUR declaration — not as something PMOS observed.')));
+
+  out.push(el('div', { style: 'padding:10px 14px 2px;' + NEW_LABEL }, 'session'));
+  if (!rows.length) {
+    out.push(el('div', { style: 'padding:2px 14px 10px;font-size:11.5px;color:var(--muted-foreground);font-style:italic' },
+      'no live sessions — a successful read of nothing'));
+    return out;
+  }
+  out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:2px 14px 6px' },
+    rows.map((s) => el('button', {
+      onClick: () => setState({ bindSess: s.id }),
+      style: 'display:flex;gap:8px;align-items:center;min-height:32px;padding:0 9px;background:'
+        + (picked && picked.id === s.id ? 'var(--secondary)' : 'transparent')
+        + ';border:1px solid ' + (picked && picked.id === s.id ? 'var(--input)' : 'var(--border)'),
+      hover: 'border-color:var(--ring)',
+    },
+      el('span', { style: 'font-family:var(--mono);font-size:11px;color:var(--foreground)' }, iv(s.name || s.id)),
+      el('span', { style: 'font-size:11px;color:var(--muted-foreground)' }, iv(s.label || s.shown || '')),
+      // What it is bound to NOW, and by what. A session already attributed can be re-bound, and the
+      // PM is entitled to see what they would be replacing before they replace it (R8).
+      s.initiative
+        ? el('span', { style: 'margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--muted-foreground)' },
+          iv('→ ' + s.initiative + (s.attributed_by === 'declared' ? ' · declared' : ' · recorded')))
+        : null,
+    ))));
+
+  out.push(el('div', { style: 'padding:6px 14px 2px;' + NEW_LABEL }, 'initiative'));
+  out.push(el('div', { style: 'padding:2px 14px 4px' },
+    newField('bindTo', typed, () => setState({}), 'type part of an initiative id',
+      'width:100%;font-family:var(--mono);font-size:11px;padding:5px 7px;background:var(--secondary);border:1px solid var(--border);color:var(--foreground)')));
+  if (matches.length) {
+    out.push(el('div', { style: 'display:flex;flex-direction:column;gap:2px;padding:2px 14px 6px' },
+      matches.map((sl) => el('button', {
+        onClick: () => {
+          if (!picked) return;
+          const data = sibling('data', './data.js');
+          if (!data || typeof data.bindSessionInitiative !== 'function') return;
+          data.bindSessionInitiative(picked.id, sl).then((r) => {
+            setState({
+              bindResult: r && r.ok
+                ? '“' + (picked.name || picked.id) + '” is now on ' + sl
+                  + (r.previous ? ' — replacing ' + r.previous : '')
+                : 'could not bind — ' + ((r && r.error) || 'the server did not answer'),
+            });
+          });
+        },
+        style: 'display:flex;gap:8px;align-items:center;min-height:30px;padding:0 9px;background:transparent;border:1px solid var(--border)',
+        hover: 'border-color:var(--ring)',
+      }, el('span', { style: 'font-family:var(--mono);font-size:11px' }, iv(sl))))));
+  } else if (typed) {
+    out.push(el('div', { style: 'padding:2px 14px 8px;font-size:11.5px;color:var(--muted-foreground);font-style:italic' },
+      'nothing on this board matches — a successful read of nothing'));
+  }
+
+  if (!picked) {
+    out.push(el('div', { style: 'padding:4px 14px 10px;font-size:11.5px;color:var(--muted-foreground)' },
+      'pick a session first.'));
+  }
+  if (state.bindResult) {
+    out.push(el('div', { style: 'margin:4px 14px 10px;padding:8px 11px;border:1px solid var(--border);font-size:11.5px;line-height:1.5' },
+      iv(state.bindResult)));
+  }
+  return out;
+}
+
 function fileNewBody() {
   const nw = fileNewModel();
   const out = [];
@@ -839,11 +1241,15 @@ function modeDetailBody(kind) {
 
 export function renderDetail(host) {
   const kind = (state.detail && state.detail.kind) || 'init';
-  headerTitleText.textContent = FX.detailTitle(kind);
+  // `bind` is not one of the prototype's detail kinds, and `fixture.js` is its seed data — adding a
+  // key there to title one screen would be drift into a file the parity suite exists to keep
+  // transcribed. The override lives here instead, where the screen does.
+  headerTitleText.textContent = kind === 'bind' ? 'bind a session' : FX.detailTitle(kind);
 
   let body;
   if (kind === 'init') body = initBody(selectedSlug());
   else if (kind === 'addprod') body = addProductBody();
+  else if (kind === 'bind') body = bindBody();
   else if (kind === 'new') body = fileNewBody();
   else if (kind === 'none') body = [noneBody()];
   else body = modeDetailBody(kind);