@worca/app 1.2.0 → 1.3.0

package/ui/public/memory-view.mjs

@@ -0,0 +1,192 @@
+// ui/public/memory-view.mjs
+// Pure DOM renderers for the Memory view (agent-memory-design.md §10). Every function takes the
+// target `document` via opts (defaults to the browser global) and returns DETACHED elements — no
+// fetch, no listeners outside the returned tree (guardrails-view.mjs posture). app.js owns the
+// endpoint calls and the mounting; node:test drives these via jsdom. Interactive elements carry a
+// routing class (mem-new, mem-save, mem-cancel, mem-delete, mem-restore, mem-defrag) plus
+// data-name / data-id, so the controller wires ONE delegated listener per host. The namespace is
+// `mem-*`: `mv-*` belongs to Settings → Models (models-view.mjs). Every string that came from disk
+// (names, hooks, bodies, reasons) is a textContent / value — never innerHTML.
+
+function h(doc, tag, cls, text) {
+  const n = doc.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+
+/** The ONE name rule, shared by the editor's pre-check and the server's 400 text, so a user never
+ *  sees two spellings of the same rule. The server (isValidMemoryName) stays the authority — this
+ *  check is instant feedback, not a complete gate (it knows nothing about Win32 reserved stems). */
+export const MEMORY_NAME_HELP = 'letters, digits, ".", "_" and "-" only, no extension, no leading or trailing dot';
+
+/** The hash for a scope (and optionally one file): global lives under Settings, a project under its project page's Memory tab. */
+export function memoryRoute(scopeKey, name = '') {
+  const base = scopeKey === 'global' ? 'settings/memory' : `${scopeKey}/memory`;
+  return name ? `${base}/${encodeURIComponent(name)}` : base;
+}
+
+const BADGES = { fresh: ['No memory yet', ''], ok: ['Healthy', 'green'], due: ['Defragment due', 'amber'], overdue: ['Defragment overdue', 'red'] };
+export function healthBadge(level) {
+  const [text, cls] = BADGES[level] || BADGES.fresh;
+  return { text, cls };
+}
+
+/** `YYYY-MM-DD HH:MM` in LOCAL time (like fmtDate everywhere else in the app), or '' for anything
+ *  unparsable — these dates are display-only. */
+export function formatWhen(iso) {
+  const t = Date.parse(iso || '');
+  if (!Number.isFinite(t)) return '';
+  const d = new Date(t);
+  const p = (n) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+const NO_HOST_HINT = 'Register a project on the Projects page to host the global defragment run.';
+
+/** The defragment glyph: three rows of blocks, the lower ones fragmented. Pure SVG elements (no
+ *  text node), so the button's textContent stays its label alone. */
+function defragIcon(doc) {
+  const NS = 'http://www.w3.org/2000/svg';
+  const svg = doc.createElementNS(NS, 'svg');
+  svg.setAttribute('width', '13'); svg.setAttribute('height', '13'); svg.setAttribute('viewBox', '0 0 24 24');
+  svg.setAttribute('fill', 'currentColor'); svg.setAttribute('aria-hidden', 'true');
+  for (const [x, y, w] of [[3, 4, 18], [3, 10, 8], [13, 10, 8], [3, 16, 5], [10, 16, 11]]) {
+    const r = doc.createElementNS(NS, 'rect');
+    r.setAttribute('x', String(x)); r.setAttribute('y', String(y)); r.setAttribute('width', String(w)); r.setAttribute('height', '4'); r.setAttribute('rx', '1');
+    svg.appendChild(r);
+  }
+  return svg;
+}
+
+/**
+ * The health card: badge + reasons + counters + the ONE Defragment control (spec §10). `host` is
+ * `{ key, name } | null` — the project that would host a GLOBAL defragment run (a project scope
+ * hosts its own, so `host` is ignored there); with no registered project the button is disabled
+ * and the hint says so, in visible text as well as the title. While a run is live the button stays
+ * ENABLED, reads "Defragmenting… open the run" and carries `data-run-id`: the controller routes to
+ * `#running/<id>`.
+ */
+export function renderHealthCard(report, { doc = globalThis.document, host = null } = {}) {
+  const health = report?.health || {};
+  const isGlobal = String(report?.scope || 'global') === 'global';
+  const card = h(doc, 'div', 'card mem-health');
+  const head = h(doc, 'div', 'mem-health-head');
+  const { text, cls } = healthBadge(health.level);
+  head.appendChild(h(doc, 'span', `badge${cls ? ` ${cls}` : ''}`, text));
+  head.appendChild(h(doc, 'span', 'mem-counters',
+    `${plural(health.files || 0, 'file')} · ${health.bytes || 0} bytes · ${health.alwaysOnBytes || 0} bytes always loaded · ${plural(health.writesSinceDefrag || 0, 'write')} since the last defragment` +
+    (health.lastDefragAt ? ` · last defragmented ${formatWhen(health.lastDefragAt)}` : '')));
+  // The ONE control sits at the head's right edge (margin-left:auto), styled like every other
+  // secondary pill (btn-ghost) with the defragment glyph before its label.
+  const runId = report?.defragRunId ? String(report.defragRunId) : '';
+  const btn = h(doc, 'button', 'btn btn-ghost btn-mini mem-defrag');
+  btn.type = 'button';
+  btn.appendChild(defragIcon(doc));
+  btn.appendChild(doc.createTextNode(runId ? 'Defragmenting… open the run' : 'Defragment'));
+  if (runId) btn.dataset.runId = runId;
+  else if (isGlobal && !host) { btn.disabled = true; btn.title = NO_HOST_HINT; }
+  head.appendChild(btn);
+  card.appendChild(head);
+  if (Array.isArray(health.reasons) && health.reasons.length) {
+    const ul = h(doc, 'ul', 'mem-reasons');
+    for (const r of health.reasons) ul.appendChild(h(doc, 'li', '', String(r)));
+    card.appendChild(ul);
+  }
+  if (isGlobal && !runId) {
+    card.appendChild(h(doc, 'small', 'hint mem-host-hint',
+      host ? `Runs on ${host.name || host.key} — pick another project on the New pipeline page.` : NO_HOST_HINT));
+  }
+  card.appendChild(h(doc, 'small', 'hint', 'A defragment run merges duplicate topics, splits overgrown files, drops stale rules and tightens hooks. It is an ordinary pipeline run; the previous files stay in History.'));
+  return card;
+}
+
+/** The file list: a head with the New button, one row per file. The ROW is the control (click,
+ *  Enter, Space) — no nested button, so `role="button"` holds no interactive descendant. */
+export function renderFileList(files, { doc = globalThis.document, selected = '' } = {}) {
+  const wrap = h(doc, 'div', 'mem-list');
+  const head = h(doc, 'div', 'mem-list-head');
+  head.appendChild(h(doc, 'span', 'mem-list-title', 'Files'));
+  const add = h(doc, 'button', 'btn btn-ghost btn-mini mem-new', 'New file');
+  add.type = 'button';
+  head.appendChild(add);
+  wrap.appendChild(head);
+  const list = Array.isArray(files) ? files : [];
+  if (!list.length) { wrap.appendChild(h(doc, 'div', 'hist-empty', 'No memory files yet — agents and Ask Worca add them, or click New file.')); return wrap; }
+  for (const f of list) {
+    const row = h(doc, 'div', `mem-row${f.name === selected ? ' on' : ''}`);
+    row.dataset.name = f.name;
+    row.setAttribute('role', 'button'); row.tabIndex = 0;
+    const main = h(doc, 'div', 'mem-row-main');
+    main.appendChild(h(doc, 'div', 'mem-row-name mono', `${f.name}.md`));
+    main.appendChild(h(doc, 'div', 'mem-row-hook', f.description || '(no description)'));
+    const meta = [formatWhen(f.updated), f.source || ''].filter(Boolean).join(' · ') + (f.hasFrontmatter === false ? ' · no frontmatter' : '');
+    main.appendChild(h(doc, 'div', 'mem-row-meta', meta));
+    row.appendChild(main);
+    wrap.appendChild(row);
+  }
+  return wrap;
+}
+
+/** The editor: the whole file (frontmatter included) as text. A NEW file has an editable name and
+ *  no Delete; `locked` (a live defragment run on this scope) disables Save and Delete — Cancel
+ *  always closes. */
+export function renderEditor(file, { doc = globalThis.document, isNew = false, msg = '', msgErr = false, locked = false } = {}) {
+  const wrap = h(doc, 'div', 'mem-editor');
+  const nameField = h(doc, 'div', 'field field-compact');
+  nameField.appendChild(h(doc, 'label', '', 'Name'));
+  const name = h(doc, 'input', 'input mono mem-name');
+  name.type = 'text'; name.spellcheck = false; name.value = file?.name || '';
+  name.readOnly = !isNew;
+  name.placeholder = 'topic-name';
+  nameField.appendChild(name);
+  if (isNew) nameField.appendChild(h(doc, 'small', 'hint mem-name-help', MEMORY_NAME_HELP));
+  wrap.appendChild(nameField);
+  const textField = h(doc, 'div', 'field');
+  textField.appendChild(h(doc, 'label', '', 'Markdown (frontmatter + body)'));
+  const ta = h(doc, 'textarea', 'textarea mono mem-text');
+  ta.rows = 16; ta.spellcheck = false;
+  ta.value = file?.text || (isNew ? '---\nname: \ndescription: \n---\n' : '');
+  textField.appendChild(ta);
+  textField.appendChild(h(doc, 'small', 'hint', 'Keep name, description (one line: when the file matters — shown here and to Ask Worca) and optional paths (the file loads only when a matching file is read) in the frontmatter; worca stamps source and updated.'));
+  wrap.appendChild(textField);
+  const text = msg || (locked ? 'A defragment run is live on this scope — Save and Delete resume when it finishes.' : '');
+  const status = h(doc, 'div', `hint mem-msg${msgErr ? ' err' : ''}`, text);
+  status.setAttribute('role', 'status');
+  wrap.appendChild(status);
+  const actions = h(doc, 'div', 'actions mem-actions');
+  if (!isNew) {
+    const d = h(doc, 'button', 'btn btn-danger btn-mini mem-delete', 'Delete');
+    d.type = 'button'; d.disabled = !!locked;
+    actions.appendChild(d);
+  }
+  const cancel = h(doc, 'button', 'btn btn-ghost btn-mini mem-cancel', 'Cancel'); cancel.type = 'button';
+  const save = h(doc, 'button', 'btn btn-primary btn-mini mem-save', 'Save'); save.type = 'button'; save.disabled = !!locked;
+  actions.append(cancel, save);
+  wrap.appendChild(actions);
+  return wrap;
+}
+
+export function collectEditor(rootEl) {
+  return { name: String(rootEl.querySelector('.mem-name')?.value || '').trim(), text: String(rootEl.querySelector('.mem-text')?.value ?? '') };
+}
+
+/** The snapshot ring, newest first, one Restore per row (disabled while a defragment run is live). */
+export function renderMemoryHistory(snapshots, { doc = globalThis.document, locked = false } = {}) {
+  const wrap = h(doc, 'div', 'mem-history');
+  wrap.appendChild(h(doc, 'div', 'mem-list-title', 'History'));
+  const list = Array.isArray(snapshots) ? [...snapshots].reverse() : [];
+  if (!list.length) { wrap.appendChild(h(doc, 'div', 'hist-empty', 'No snapshots yet — every write takes one.')); return wrap; }
+  for (const s of list) {
+    const row = h(doc, 'div', 'mem-snap');
+    row.dataset.id = s.id;
+    row.appendChild(h(doc, 'span', 'mem-snap-id mono', s.id));
+    row.appendChild(h(doc, 'span', 'mem-snap-count', plural((s.files || []).length, 'file')));
+    const btn = h(doc, 'button', 'btn btn-ghost btn-mini mem-restore', 'Restore');
+    btn.type = 'button'; btn.dataset.id = s.id; btn.disabled = !!locked;
+    row.appendChild(btn);
+    wrap.appendChild(row);
+  }
+  return wrap;
+}

package/ui/public/node-tunables.mjs

@@ -0,0 +1,201 @@
+// ui/public/node-tunables.mjs — PURE tunables resolution (no DOM, no fetch),
+// shared by the New Pipeline agents accordion (app.js) and the Ask Worca run card
+// (ask-panel.mjs). The two panels must never drift: this is the one definition.
+// Moved verbatim out of app.js (2026-09-06); app.js keeps thin wrappers that add
+// its own ports source (panelPortsFn, which can fall back to the Composer index).
+import { classifyLoops } from '../../src/shared/graph/loops.mjs';
+import { portsFnFor } from '../../src/shared/graph/ports.mjs';
+
+// Flatten workflow.steps[][] into an ordered list of node rows, joining each
+// node's role `key` to its registry metadata (label/color) and resolving every
+// setting through the four layers (newpipeline-ux-design.md §4.3):
+//   1. the per-project override — run-config nodes[nodeId], or, for the built-in
+//      Default workflow, the legacy per-role opts.legacySteps[key];
+//   2. the workflow's own node.defaults;
+//   3. the agent-registry sidecar (fanOut / questionsDefault);
+//   4. nothing configured — the CLI default.
+// Order = outer (sequential) then inner (parallel) — exactly the dispatch order.
+//
+// model/effort/fanOut/askQuestions on the returned row are the EFFECTIVE values
+// (what the run will use). `def` carries the same four resolved WITHOUT layer 1,
+// so the renderer can mark deviation and the writer can prune a redundant save
+// back to "inherit". `override` is layer 1 verbatim.
+export function buildNodeConfigRows(workflow, registry, runConfig, opts = {}) {
+  if (workflow && workflow.version === 2) return buildGraphNodeRows(workflow, registry, runConfig, opts);
+  const steps = Array.isArray(workflow && workflow.steps) ? workflow.steps : [];
+  const reg = registry || {};
+  const nodes = (runConfig && runConfig.nodes) || {};
+  const legacySteps = opts.legacySteps || null; // wf_default only: per-ROLE storage
+  const rows = [];
+  steps.forEach((group, stepIndex) => {
+    const members = Array.isArray(group) ? group : [];
+    members.forEach((node) => {
+      if (!node || !node.id) return;
+      const meta = reg[node.key] || null;
+      // The Default workflow's overrides live under the role key; a saved
+      // workflow's under the node-instance id. Both can exist for wf_default
+      // (a node write wins, mirroring resolveWorkflow's firstDefined order).
+      const role = legacySteps ? node.key : null;
+      const saved = { ...(role ? legacySteps[role] : null), ...nodes[node.id] };
+      const wfDef = (node.defaults && typeof node.defaults === 'object') ? node.defaults : {};
+      const metaFan = meta && typeof meta.fanOut === 'boolean' ? meta.fanOut : false;
+      const metaAsks = !!(meta && meta.asksQuestions);
+      const metaLocked = !!(meta && meta.questionsLocked);
+      const metaQDefault = !!(meta && meta.questionsDefault);
+
+      const t = resolveNodeTunables(saved, wfDef, { fanOut: metaFan, questionsDefault: metaQDefault });
+
+      rows.push({
+        nodeId: node.id,
+        key: node.key,
+        role, // non-null => persist via the legacy per-role path (saveStep)
+        label: (meta && meta.displayName) || node.key || node.id,
+        color: (meta && meta.color) || '',
+        description: (meta && meta.description) || '',
+        stepIndex,
+        parallel: members.length > 1,
+        model: t.model,
+        effort: t.effort,
+        fanOut: t.fanOut,
+        subagentModel: t.subagentModel,
+        // null => the agent has no questions capability (no checkbox rendered).
+        askQuestions: !metaAsks ? null : (metaLocked ? metaQDefault : t.askQuestions),
+        questionsLocked: metaAsks && metaLocked,
+        def: t.def,
+        override: t.override,
+        // A locked questions toggle is never the user's doing, so it never counts
+        // as a modification (it cannot be reset either).
+        modified: modifiedFieldsOf(t, t.def,
+          { asksQuestions: metaAsks, questionsLocked: metaLocked }).length > 0,
+      });
+    });
+  });
+  return rows;
+}
+
+// ONE resolution rule for a node's five tunables, shared verbatim by the v1
+// (buildNodeConfigRows) and v2 (buildGraphNodeRows) row builders — the two
+// panels must never drift (the v2 path is the one every live workflow uses).
+// `saved` = the per-project override entry (role + node merged), `wfDef` = the
+// workflow's own defaults block (node.defaults in v1, node.config in v2),
+// `caps` = the registry meta's capability booleans.
+export function resolveNodeTunables(saved, wfDef, caps = {}) {
+  const override = {};
+  if (typeof saved.model === 'string' && saved.model) override.model = saved.model;
+  if (typeof saved.effort === 'string' && saved.effort) override.effort = saved.effort;
+  if (typeof saved.fanOut === 'boolean') override.fanOut = saved.fanOut;
+  if (typeof saved.askQuestions === 'boolean') override.askQuestions = saved.askQuestions;
+  if (typeof saved.subagentModel === 'string' && saved.subagentModel) override.subagentModel = saved.subagentModel;
+
+  // Layers 2-4 alone: what this row falls back to once its override is gone.
+  const def = {
+    model: typeof wfDef.model === 'string' ? wfDef.model : '',
+    effort: typeof wfDef.model === 'string' && typeof wfDef.effort === 'string' ? wfDef.effort : '',
+    fanOut: typeof wfDef.fanOut === 'boolean' ? wfDef.fanOut : !!caps.fanOut,
+    askQuestions: typeof wfDef.askQuestions === 'boolean' ? wfDef.askQuestions : !!caps.questionsDefault,
+    // No sidecar layer: an agent manifest declares whether a node CAN fan out,
+    // never what its children run on. '' = unset (the run resolves auto).
+    subagentModel: typeof wfDef.subagentModel === 'string' ? wfDef.subagentModel : '',
+  };
+
+  // An effort is only meaningful for the model that advertises it, so an
+  // override naming its own model does not inherit the default's effort.
+  const model = override.model !== undefined ? override.model : def.model;
+  const effort = override.effort !== undefined
+    ? override.effort
+    : (override.model !== undefined ? '' : def.effort);
+  const fanOut = override.fanOut !== undefined ? override.fanOut : def.fanOut;
+  const askQuestions = override.askQuestions !== undefined ? override.askQuestions : def.askQuestions;
+  const subagentModel = override.subagentModel !== undefined ? override.subagentModel : def.subagentModel;
+  return { override, def, model, effort, fanOut, askQuestions, subagentModel };
+}
+
+// Which of the five settings deviate from the row's resolved default. Pure; the
+// single definition of "modified" for both the row dot and the header count.
+export function modifiedFieldsOf(effective, def, caps = {}) {
+  const out = [];
+  if ((effective.model || '') !== (def.model || '')) out.push('model');
+  if ((effective.effort || '') !== (def.effort || '')) out.push('effort');
+  if (!!effective.fanOut !== !!def.fanOut) out.push('fanOut');
+  if ((effective.subagentModel || '') !== (def.subagentModel || '')) out.push('subagentModel');
+  if (caps.asksQuestions && !caps.questionsLocked && !!effective.askQuestions !== !!def.askQuestions) {
+    out.push('askQuestions');
+  }
+  return out;
+}
+
+// Prune a row's would-be selection against its resolved default (§4.5): a value
+// equal to the default is stored as "inherit" instead — '' clears a model/effort,
+// null clears a boolean toggle (config.mjs#inheritOr). Returns the patch to send.
+// `next` carries only the fields the caller is changing; the rest ride along at
+// their current effective value so the setters' replace semantics cannot wipe them.
+export function pruneNodeSelection(row, next = {}) {
+  const eff = {
+    model: next.model !== undefined ? next.model : row.model,
+    effort: next.effort !== undefined ? next.effort : row.effort,
+    fanOut: next.fanOut !== undefined ? next.fanOut : row.fanOut,
+    askQuestions: next.askQuestions !== undefined ? next.askQuestions : row.askQuestions,
+    subagentModel: next.subagentModel !== undefined ? next.subagentModel : row.subagentModel,
+  };
+  // model+effort prune as a PAIR: an effort is only interpretable against the
+  // model that advertises it, so storing one without the other is rejected by
+  // the setters ("select a model before choosing an effort").
+  const inheritPair = (eff.model || '') === (row.def.model || '')
+    && (eff.effort || '') === (row.def.effort || '');
+  return {
+    model: inheritPair ? '' : (eff.model || ''),
+    effort: inheritPair || !eff.model ? '' : eff.effort,
+    fanOut: !!eff.fanOut === !!row.def.fanOut ? null : !!eff.fanOut,
+    askQuestions: row.askQuestions === null || row.questionsLocked
+      ? undefined // no capability / locked: never persist a value for it
+      : (!!eff.askQuestions === !!row.def.askQuestions ? null : !!eff.askQuestions),
+    // '' IS the clear for a string tunable (config.mjs#inheritOrSubagentModel), so
+    // a value equal to the default prunes to inherit exactly like model/effort.
+    subagentModel: (eff.subagentModel || '') === (row.def.subagentModel || '') ? '' : (eff.subagentModel || ''),
+  };
+}
+
+// v2: agent nodes only, in condensation-topo launch order (loop wires excluded
+// from the ranking, exactly as the scheduler orders launches). The four config
+// layers are the same as v1: run-config nodes[nodeId] -> template node.config ->
+// sidecar -> hard default.
+export function buildGraphNodeRows(tpl, registry, runConfig, opts = {}) {
+  const reg = registry || {};
+  const nodes = (runConfig && runConfig.nodes) || {};
+  // wf_default only: the legacy per-ROLE storage, layered under the per-node one
+  // exactly as resolveGraph does (sel -> legacy -> node config).
+  const legacySteps = opts.legacySteps || null;
+  // app.js hands its own panelPortsFn (falls back to the Composer's index for
+  // agents the palette omits); the card and the tests use the registry alone.
+  const portsFn = typeof opts.portsFn === 'function' ? opts.portsFn : portsFnFor(reg);
+  const order = classifyLoops(tpl, portsFn).launchOrder;
+  const byId = new Map(tpl.nodes.map((n) => [n.id, n]));
+  const rank = new Map(order.map((id, i) => [id, i]));
+  const agentNodes = order.map((id) => byId.get(id)).filter((n) => n && n.kind === 'agent');
+  const rows = [];
+  for (const node of agentNodes) {
+    const meta = reg[node.key] || null;
+    const role = legacySteps ? node.key : null;
+    const saved = { ...(role ? legacySteps[role] : null), ...nodes[node.id] };
+    const wfDef = (node.config && typeof node.config === 'object') ? node.config : {};
+    const metaFan = meta && typeof meta.fanOut === 'boolean' ? meta.fanOut : false;
+    const metaAsks = !!(meta && meta.asksQuestions);
+    const metaLocked = !!(meta && meta.questionsLocked);
+    const metaQDefault = !!(meta && meta.questionsDefault);
+    const t = resolveNodeTunables(saved, wfDef, { fanOut: metaFan, questionsDefault: metaQDefault });
+    rows.push({
+      nodeId: node.id, key: node.key, role, // non-null => persist via saveStep (wf_default)
+      label: (meta && meta.displayName) || node.key || node.id,
+      color: (meta && meta.color) || '', description: (meta && meta.description) || '',
+      stepIndex: rank.get(node.id) || 0,
+      parallel: false,
+      model: t.model, effort: t.effort, fanOut: t.fanOut, subagentModel: t.subagentModel,
+      askQuestions: !metaAsks ? null : (metaLocked ? metaQDefault : t.askQuestions),
+      questionsLocked: metaAsks && metaLocked,
+      def: t.def, override: t.override,
+      modified: modifiedFieldsOf(t, t.def,
+        { asksQuestions: metaAsks, questionsLocked: metaLocked }).length > 0,
+    });
+  }
+  return rows;
+}

package/ui/public/report-run.mjs

@@ -0,0 +1,75 @@
+// ui/public/report-run.mjs
+// Pure renderers for the "Report this run" preview modal. No fetch, no listeners,
+// no document lookups: every function takes { doc } and returns DETACHED nodes, the
+// way plugins-view.mjs / guardrails-view.mjs do. app.js owns the modal, the network
+// call, the clipboard and the download.
+//
+// The reason and opt-in vocabulary comes from src/shared/report-reasons.mjs — the
+// SAME module the core builder imports, so a label and a payload cannot drift. Two
+// `..` because this file sits two levels below the repo root; the browser clamps the
+// URL at '/' and the server serves src/shared there. Absolute specifiers are
+// FORBIDDEN — they break the Node ESM resolver the UI tests use; app.js already uses
+// this exact prefix.
+import { REPORT_REASONS, OPT_IN_CLASSES } from '../../src/shared/report-reasons.mjs';
+
+/** <option> elements for the reason <select>, in menu order. */
+export function renderReasonOptions({ doc = globalThis.document } = {}) {
+  return REPORT_REASONS.map((reason) => {
+    const opt = doc.createElement('option');
+    opt.value = reason.id;
+    opt.textContent = reason.label;
+    return opt;
+  });
+}
+
+/**
+ * The three opt-in checkboxes, as .confirm-checkbox rows (the #export-modal shape).
+ * Each input carries data-optin="<key>" so app.js can delegate one change listener
+ * over the wrapper.
+ *
+ * The sub-label class is .report-optin-hint, NOT .hint: ui-settings-about.test.mjs
+ * asserts every `.hint` in the settings view is empty-texted, and keeping a
+ * non-empty .hint out of the codebase's shared vocabulary avoids ever tripping that
+ * view-wide rule if this markup is later reused inside Settings.
+ */
+export function renderOptIns({ doc = globalThis.document, include = {} } = {}) {
+  const wrap = doc.createElement('div');
+  wrap.className = 'report-optins';
+  for (const cls of OPT_IN_CLASSES) {
+    const label = doc.createElement('label');
+    label.className = 'confirm-checkbox';
+
+    const input = doc.createElement('input');
+    input.type = 'checkbox';
+    input.dataset.optin = cls.key;
+    input.checked = include[cls.key] === true;
+
+    const span = doc.createElement('span');
+    span.textContent = cls.label;
+    const hint = doc.createElement('span');
+    hint.className = 'report-optin-hint';
+    hint.textContent = cls.hint;
+    span.appendChild(doc.createElement('br'));
+    span.appendChild(hint);
+
+    label.appendChild(input);
+    label.appendChild(span);
+    wrap.appendChild(label);
+  }
+  return wrap;
+}
+
+/**
+ * The preview text. This is the contract of the whole feature: what the reporter
+ * reads here is byte-identical to what Copy JSON puts on the clipboard and what
+ * Download JSON writes.
+ */
+export function previewText(payload) {
+  if (!payload) return 'Building the report…';
+  return JSON.stringify(payload, null, 2);
+}
+
+/** Blob parts for Download JSON — pretty JSON with a trailing newline. */
+export function reportBlobParts(payload) {
+  return [`${JSON.stringify(payload, null, 2)}\n`];
+}

package/ui/public/results-view.mjs

@@ -119,3 +119,28 @@ export function workflowPickerLabel(wf, enabledPluginNames = []) {
   const disabled = Array.isArray(enabledPluginNames) && !enabledPluginNames.includes(plugin);
   return `${wf.name} [plugin: ${plugin}${disabled ? ' — disabled' : ''}]`;
 }
+
+/**
+ * Rows for the History Overview "Memory changes" block (agent-memory-design.md §6).
+ * Pure: `memory` is results.json.memory / the detail's `memory` ({ changes }).
+ * One row per change entry that carries at least one file; chips in the order
+ * added, modified, deleted, rejected; a rejected chip's `title` is the reason.
+ * Each chip also carries the ref it was built from — `scope` (mount-relative:
+ * `global` | `project` | `projects/<key>`) and `name` — so History can link to
+ * the file in its Memory view (B6).
+ */
+export function memoryChangesRows(memory) {
+  const changes = Array.isArray(memory?.changes) ? memory.changes : [];
+  const file = (r) => `${r.scope}/${r.name}.md`;
+  const rows = [];
+  for (const c of changes) {
+    const chips = [
+      ...(c.added || []).map((r) => ({ kind: 'add', text: `+ ${file(r)}`, scope: r.scope, name: r.name })),
+      ...(c.modified || []).map((r) => ({ kind: 'mod', text: `~ ${file(r)}`, scope: r.scope, name: r.name })),
+      ...(c.deleted || []).map((r) => ({ kind: 'del', text: `− ${file(r)}`, scope: r.scope, name: r.name })),
+      ...(c.rejected || []).map((r) => ({ kind: 'rej', text: `✕ ${file(r)}`, title: String(r.reason || ''), scope: r.scope, name: r.name })),
+    ];
+    if (chips.length) rows.push({ node: c.agentKey || c.nodeId || 'run', chips });
+  }
+  return rows;
+}

package/ui/public/source-pane.mjs

@@ -23,6 +23,20 @@ export function debounce(fn, ms, timers = {}) {
   };
 }
 
+// A task body is markdown (sources.mjs writes it under `# title` into the prompt).
+// `renderMarkdown(text)` — injected by app.js, the page's sanitized pipeline — returns
+// { kind: 'md', frag } or { kind: 'plain' }; without it, or before it is ready, the
+// body is a verbatim <pre>.
+function taskBody(doc, text, renderMarkdown) {
+  const out = text && typeof renderMarkdown === 'function' ? renderMarkdown(text) : null;
+  if (out && out.kind === 'md' && out.frag) {
+    const box = h(doc, 'div', 'sp-prev-body artifact-markdown');
+    box.appendChild(out.frag);
+    return box;
+  }
+  return h(doc, 'pre', 'sp-prev-body', text);
+}
+
 // Values of every non-task-browser input in the pane, keyed by input key —
 // these travel as `inputs` to connector ops and into body.source at submit.
 function collectInputs(pane) {
@@ -100,7 +114,7 @@ function taskRow(doc, t, now) {
 // dropdown populated ONCE on first focus via call(optionsFrom) (promise kept on
 // ._load for deterministic tests); task-browser -> debounced (300ms) search +
 // result list + preview (call getTask on pick) + hidden selected taskId.
-export function renderSourcePane(source, { call, doc = globalThis.document, timers, now } = {}) {
+export function renderSourcePane(source, { call, doc = globalThis.document, timers, now, renderMarkdown } = {}) {
   const clock = typeof now === 'function' ? now : () => Date.now();
   const pane = h(doc, 'div', 'sp-pane');
   pane.dataset.plugin = source.plugin;
@@ -207,7 +221,7 @@ export function renderSourcePane(source, { call, doc = globalThis.document, time
           const task = await call('getTask', { id: row.dataset.taskId });
           preview.replaceChildren(
             h(doc, 'b', 'sp-prev-title', (task && task.title) || row.dataset.taskId),
-            h(doc, 'pre', 'sp-prev-body', (task && task.body) || ''),
+            taskBody(doc, (task && task.body) || '', renderMarkdown),
           );
         })().catch((e) => { preview.textContent = `preview failed: ${e.message}`; });
       });

package/ui/public/stats-view.mjs

@@ -373,7 +373,7 @@ const PW = CW - L - R, PH = CH - T - B;
  *  integer=true (runs chart) keeps ticks on whole numbers — a sub-1 or ×2.5
  *  step on tiny count maxima would render duplicate rounded labels ("0, 1, 1"
  *  for a 1-run day) or off-grid labels ("3" at the 2.5 line). */
-function niceScale(maxVal, integer = false) {
+export function niceScale(maxVal, integer = false) {
   const m = maxVal > 0 ? maxVal : 1;
   const raw = m / 3;                                   // aim for ~3-4 ticks
   const pow = 10 ** Math.floor(Math.log10(raw));
@@ -384,7 +384,7 @@ function niceScale(maxVal, integer = false) {
 }
 
 /** Column path with a rounded TOP only (square baseline). r clamps to h/2. */
-function roundedTopBar(x, y, w, hgt, r = 4) {
+export function roundedTopBar(x, y, w, hgt, r = 4) {
   const rr = Math.max(0, Math.min(r, hgt / 2, w / 2));
   return `M${x},${y + hgt} L${x},${y + rr} Q${x},${y} ${x + rr},${y} L${x + w - rr},${y} ` +
     `Q${x + w},${y} ${x + w},${y + rr} L${x + w},${y + hgt} Z`;