@zq-silk/yui 2.3.0 → 2.5.0

package/dist/web/assets/client/app/taskView.js

@@ -0,0 +1,280 @@
+export const TASK_VIEW_SCRIPT = String.raw `
+// The selected Task on screen: the center page, the dock discussion and its
+// Session targets, and the section (tab) the reader is on. This module draws
+// state.detail; app/selection loads it. A re-render is skipped while the
+// reader has an unsent draft, an in-flight read or focus in the center. The
+// only state field written here is state.activeTab.
+import { h, isEditing } from "/assets/js/lib/dom.js";
+import { releaseMutation } from "/assets/js/lib/api.js";
+import { loadingBlock } from "/assets/js/ui/primitives.js";
+import { entriesOf } from "/assets/js/domain/context.js";
+import { renderOverview } from "/assets/js/views/overview.js";
+import { renderTaskDetail, selectTab, TABS, TAB_ALIASES } from "/assets/js/views/task/page.js";
+import { updateObservation } from "/assets/js/views/task/observation.js";
+import { renderDiscussion, discussionHasUnsent } from "/assets/js/views/dock/discussion.js";
+import { sameTarget } from "/assets/js/views/dock/terminal.js";
+import { setSectionParam } from "/assets/js/layout/router.js";
+
+// Only the observed identity participates: observation timestamps advance on
+// every poll and would otherwise re-render continuously.
+function runtimeSignature(detail) {
+  const runtime = detail.runtime;
+  return detail.runtimeStatus + "|" + JSON.stringify(runtime ? [
+    runtime.sessions && runtime.sessions.sessions, runtime.remoteDelivery,
+    runtime.execution && runtime.execution.attention, runtime.execution && runtime.execution.blockers,
+    runtime.execution && runtime.execution.next, runtime.execution && runtime.execution.status
+  ] : null) + "|" + ((runtime && runtime.roles) || []).map(function (role) {
+    return role.name + ":" + (role.runtimeSession ? role.runtimeSession.nativeSessionId + "/" + role.runtimeSession.status : "-") + ":" + role.status;
+  }).join(",");
+}
+
+// deps: { el, state, t, locale, api, toast, terminal, workspace,
+//         selectTask, clearSelection, pickAttention, readPageSessions, refreshCatalog }
+//   el         #detail, #center and the dock discussion
+//   state      reads selected, detail, detailKey and the catalog fields the
+//              overview shows; writes activeTab
+//   api        Task reads for lazy blocks and the Task page's writes
+//   terminal   the dock's native Session (views/dock/terminal)
+//   workspace  layout/workspace: dock toggles and opening Sessions
+//   selectTask(taskId)  an overview row was chosen (app/selection)
+//   clearSelection()    the Task page's back button (app/selection)
+//   pickAttention(kind), readPageSessions()  overview actions (app/catalog)
+//   refreshCatalog()    quiet catalog refresh after a write; resolves when done
+export function createTaskView(deps) {
+  const view = {
+    deps: deps,
+    // The render keys of what is on screen; an unchanged key skips the redraw.
+    rendered: { detail: null, discussion: null },
+    controller: null
+  };
+  view.controller = {
+    enterTask: function () { enterTask(view); },
+    leaveTask: function () { clearDiscussion(deps.el); },
+    showLoading: function () { showLoading(deps); },
+    showDetailError: function () { showDetailError(deps); },
+    hasUnsent: function () { return hasUnsent(deps.el); },
+    render: function (force) { render(view, force); },
+    observationArrived: function (detail) { observationArrived(view, detail); },
+    relabel: function () { relabel(view); },
+    showOverview: function () { showOverview(deps); },
+    updateSessionTargets: function () { updateSessionTargets(deps); },
+    switchTab: function (tab, options) { switchTab(deps, tab, options); },
+    applySection: function (section) { applySection(deps, section); }
+  };
+  return view.controller;
+}
+
+// A Task was just selected: start on its overview tab with nothing drawn.
+function enterTask(view) {
+  view.deps.state.activeTab = "overview";
+  view.rendered.detail = null;
+  view.rendered.discussion = null;
+  clearDiscussion(view.deps.el);
+}
+
+function clearDiscussion(el) {
+  el.discussion.replaceChildren();
+  delete el.discussion.dataset.taskId;
+}
+
+function showLoading(deps) {
+  const el = deps.el;
+  el.detail.replaceChildren(h("div.page", null, loadingBlock(deps.t("loading.detail"))));
+  delete el.detail.dataset.taskId;
+  el.center.scrollTop = 0;
+}
+
+function showDetailError(deps) {
+  deps.el.detail.replaceChildren(h("div.page", null, h("div.list-empty.is-error", null, h("p", null, deps.t("errors.detail")))));
+}
+
+// An unsent draft in the Task page or the dock discussion.
+function hasUnsent(el) {
+  return !!(el.detail.querySelector('[data-unsent="true"]') || discussionHasUnsent(el.discussion));
+}
+
+// The locale changed: redraw everything that carries text.
+function relabel(view) {
+  view.rendered.discussion = null;
+  if (view.deps.state.detail) render(view, true); else showOverview(view.deps);
+}
+
+function render(view, force) {
+  const deps = view.deps;
+  const state = deps.state;
+  if (!state.detail) {
+    if (!state.selected) { view.rendered.detail = null; showOverview(deps); }
+    return;
+  }
+  renderDock(view);
+  // Polling must not replace an unsent draft or an in-flight form, including
+  // after focus moved. This is view state, never Task state.
+  if (centerIsBusy(deps)) return;
+  const key = deps.locale() + "|" + state.detailKey + "|" + runtimeSignature(state.detail);
+  if (!force && key === view.rendered.detail) return;
+  drawDetail(deps, detailContext(view));
+  view.rendered.detail = key;
+  deps.workspace.syncDockButtons();
+}
+
+function renderDock(view) {
+  const deps = view.deps;
+  const detail = deps.state.detail;
+  const el = deps.el;
+  const key = deps.locale() + "|" + detail.task.id + "|" + deps.state.detailKey + "|" + detail.task.status;
+  if (key !== view.rendered.discussion || el.discussion.dataset.taskId !== detail.task.id) {
+    renderDiscussion(el.discussion, detail, deps.t, deps.locale(), dockActions(deps));
+    view.rendered.discussion = key;
+  }
+  updateSessionTargets(deps);
+}
+
+function observationArrived(view, detail) {
+  const deps = view.deps;
+  if (deps.el.detail.dataset.taskId === detail.task.id) updateObservation(deps.el.detail, detail, deps.t, deps.locale(), detailContext(view));
+  // Patching slots is not enough when the observed identity changed facts the
+  // detail drew earlier; the render key decides whether a re-render is due.
+  if (deps.state.detail === detail) render(view);
+}
+
+// Everything the Task page (views/task/*) may call back into.
+function detailContext(view) {
+  const deps = view.deps;
+  const api = deps.api;
+  return {
+    activeTab: deps.state.activeTab,
+    onTab: view.controller.switchTab,
+    onBack: deps.clearSelection,
+    showDock: deps.workspace.toggleDock,
+    openConversation: function (materials) {
+      deps.workspace.openConversation({ scope: "task", taskId: deps.state.selected, roleName: "leader" }, materials);
+    },
+    openSession: function (roleName) { deps.workspace.openSession({ scope: "task", taskId: deps.state.selected, roleName: roleName }); },
+    answerInput: function (input, answer, control) { return answerInput(deps, input, answer, control); },
+    taskAction: deps.api.taskAction,
+    inspect: api.inspect,
+    list: api.list,
+    artifacts: api.artifacts,
+    readArtifact: api.artifact,
+    evidence: api.evidence,
+    panels: api.panels,
+    readPanel: api.readPanel,
+    control: api.control,
+    updateTask: api.updateTask,
+    afterWrite: function () { deps.refreshCatalog(); }
+  };
+}
+
+// Everything the dock discussion (views/dock/discussion) may call back into.
+function dockActions(deps) {
+  return {
+    sendMessage: deps.api.sendMessage,
+    inspect: deps.api.inspect,
+    list: deps.api.list,
+    afterWrite: function () { deps.refreshCatalog(); }
+  };
+}
+
+async function answerInput(deps, input, answer, control) {
+  if (!deps.state.detail) return;
+  const taskId = deps.state.detail.task.id;
+  const card = control && control.closest(".input-card");
+  const controls = card ? Array.from(card.querySelectorAll("button, input")) : control ? [control] : [];
+  const receipt = card && card.querySelector("[data-input-receipt]");
+  if (card) card.dataset.unsent = "true";
+  controls.forEach(function (item) { item.disabled = true; });
+  if (receipt) receipt.textContent = deps.t("receipt.waiting");
+  try {
+    const result = await deps.api.answerInput(taskId, input.id, answer);
+    releaseMutation(taskId + "/input/" + input.id);
+    const text = result.request.id + " · " + result.request.status + " · "
+      + (result.request.resolution ? result.request.resolution.answer.text : "");
+    if (receipt) receipt.textContent = text;
+    if (card) card.dataset.unsent = "false";
+    deps.toast(text);
+    const form = control && control.closest("form");
+    if (form) form.dataset.unsent = "false";
+    await deps.refreshCatalog();
+  } catch (error) {
+    controls.forEach(function (item) { item.disabled = error.disposition !== "not-submitted"; });
+    if (card && error.disposition === "not-submitted") card.dataset.unsent = "false";
+    const text = error.disposition === "not-submitted" ? error.message : deps.t("input.unknown");
+    if (receipt) receipt.textContent = text;
+    deps.toast(text);
+  }
+}
+
+function centerIsBusy(deps) {
+  const el = deps.el;
+  const active = document.activeElement;
+  return el.detail.dataset.taskId === (deps.state.detail && deps.state.detail.task.id)
+    && (el.detail.querySelector('[data-unsent="true"]') || el.detail.querySelector('[data-reading="true"]')
+      || isEditing(active) && el.center.contains(active));
+}
+
+// Re-render the page, restoring what the reader had open, the focused tab and
+// the scroll position.
+function drawDetail(deps, ctx) {
+  const el = deps.el;
+  const detail = deps.state.detail;
+  const openSections = Array.from(el.detail.querySelectorAll("details[data-view-key][open]")).map(function (d) { return d.dataset.viewKey; });
+  const focusedTab = el.detail.querySelector(".tab:focus");
+  const focusedTabId = focusedTab && focusedTab.id;
+  const scroll = el.detail.dataset.taskId === detail.task.id ? el.center.scrollTop : 0;
+  renderTaskDetail(el.detail, detail, deps.t, deps.locale(), ctx);
+  el.detail.querySelectorAll("details[data-view-key]").forEach(function (d) { d.open = openSections.includes(d.dataset.viewKey); });
+  if (focusedTabId) el.detail.querySelector("#" + CSS.escape(focusedTabId)).focus({ preventScroll: true });
+  el.center.scrollTop = scroll;
+}
+
+// The dock's Session chips: every role of the selected Task plus the global
+// operator, keeping the Session currently open even when it left the list.
+function updateSessionTargets(deps) {
+  const detail = deps.state.detail;
+  const targets = [];
+  if (detail) {
+    const runtimeRoles = (detail.runtime && detail.runtime.roles) || [];
+    entriesOf(detail.core, "role").forEach(function (entry) {
+      const runtimeRole = runtimeRoles.find(function (role) { return role.name === entry.ref.refId; });
+      targets.push({ scope: "task", taskId: detail.task.id, roleName: entry.ref.refId,
+        live: !!(runtimeRole && runtimeRole.runtimeSession && runtimeRole.runtimeSession.nativeSessionId) });
+    });
+  }
+  targets.push({ scope: "global", roleName: "operator" });
+  const current = deps.terminal.current();
+  if (current && !targets.some(function (target) { return sameTarget(target, current); })) targets.unshift(current);
+  deps.terminal.setTargets(targets);
+}
+
+function showOverview(deps) {
+  delete deps.el.detail.dataset.taskId;
+  renderOverview(deps.el.detail, deps.state, deps.t, deps.locale(), {
+    select: deps.selectTask,
+    filterAttention: deps.pickAttention,
+    readSessions: deps.readPageSessions,
+    openOperator: deps.workspace.openOperator
+  });
+}
+
+function switchTab(deps, tab, options) {
+  if (!TABS.includes(tab)) return;
+  deps.state.activeTab = tab;
+  selectTab(deps.el.detail, tab);
+  if (!(options && options.keepScroll)) deps.el.center.scrollTop = 0;
+  setSectionParam(deps.state, tab);
+}
+
+// A section may name a tab, a retired tab name, or any anchored block inside
+// one (for example "reviews" → the Delivery tab, scrolled to #detail-reviews).
+function applySection(deps, section) {
+  const tab = (section && TAB_ALIASES[section]) || section;
+  if (!tab || TABS.includes(tab)) { switchTab(deps, tab || "overview"); return; }
+  const anchor = deps.el.detail.querySelector("#detail-" + CSS.escape(tab));
+  const panel = anchor && anchor.closest(".tab-panel");
+  if (!panel) { switchTab(deps, "overview"); return; }
+  deps.state.activeTab = panel.id.replace(/^panel-/, "");
+  selectTab(deps.el.detail, deps.state.activeTab);
+  if (anchor.tagName === "DETAILS") anchor.open = true;
+  anchor.scrollIntoView({ block: "start" });
+}
+`;

package/dist/web/assets/client/domain/context.js

@@ -0,0 +1,96 @@
+export const CONTEXT_SCRIPT = String.raw `
+// Context access. Every business fact keeps its Context reference; an
+// expanded value is a current read, never a mutation of the snapshot.
+
+export function entriesOf(core, store) {
+  return core.records.filter(function (entry) { return entry.ref.store === store; });
+}
+
+export function valuesOf(core, store) {
+  return entriesOf(core, store).filter(function (entry) { return !entry.omitted; }).map(function (entry) { return entry.value; });
+}
+
+// The family total from the same bounded read as its samples. The current
+// view counts current records only: open work, active runs, open questions.
+export function totalOf(core, store) {
+  const row = (core.collections || []).find(function (item) { return item.store === store; });
+  return row ? row.total : entriesOf(core, store).length;
+}
+
+// List and omitted-value summaries join known fields in a fixed order
+// ("title: …; status: …"). Split them for display only; the exact record
+// stays one read away.
+const SUMMARY_KEYS = ["title", "scope", "expiresWhen", "version", "objective", "question", "summary", "body", "status", "type"];
+export function summaryFields(summary) {
+  const fields = {};
+  if (!summary) return fields;
+  const pattern = new RegExp("(?:^|; )(" + SUMMARY_KEYS.join("|") + "): ", "g");
+  const marks = [];
+  let match;
+  while ((match = pattern.exec(summary))) {
+    const rank = SUMMARY_KEYS.indexOf(match[1]);
+    if (marks.length && rank <= marks[marks.length - 1].rank) continue;
+    marks.push({ key: match[1], rank: rank, start: match.index, from: match.index + match[0].length });
+  }
+  marks.forEach(function (mark, index) {
+    fields[mark.key] = summary.slice(mark.from, index + 1 < marks.length ? marks[index + 1].start : summary.length);
+  });
+  return fields;
+}
+
+// --- Exact reads -------------------------------------------------------------
+// One inspect per reference digest, held in the Task's view state so a
+// refresh with an unchanged reference never reads again. A changed digest is
+// a new read.
+export function exactCache(view) {
+  view.exact = view.exact || {};
+  return view.exact;
+}
+
+export function readExact(entry, taskId, actions, cache) {
+  const key = entry.ref.store + "/" + entry.ref.refId;
+  const hit = cache[key];
+  if (hit && hit.digest === entry.ref.digest) return hit.promise;
+  const promise = actions.inspect(taskId, entry.ref);
+  const slot = { digest: entry.ref.digest, promise: promise, result: null };
+  cache[key] = slot;
+  promise.then(function (result) { slot.result = result; }, function () { if (cache[key] === slot) delete cache[key]; });
+  return promise;
+}
+
+// The settled exact read for this exact reference, or null.
+export function cachedExact(cache, entry) {
+  const hit = cache[entry.ref.store + "/" + entry.ref.refId];
+  return hit && hit.digest === entry.ref.digest && hit.result ? hit.result : null;
+}
+
+// --- Paged family discovery --------------------------------------------------
+// Pages of one Context family for the current Context cursor. A continuation
+// never mixes versions: after the cursor changes, the first page is re-read.
+export function familyState(view, store) {
+  view.families = view.families || {};
+  if (!view.families[store]) view.families[store] = { items: [], total: null, nextCursor: null, pages: 0, key: null, error: null, pending: null };
+  return view.families[store];
+}
+
+export function loadFamily(view, taskId, store, key, actions, options) {
+  const state = familyState(view, store);
+  const more = !!(options && options.more);
+  if (state.pending) return state.pending;
+  if (more ? !state.nextCursor : state.key === key && state.pages && !state.error) return Promise.resolve(state);
+  state.pending = actions.list(taskId, store, { limit: (options && options.limit) || 40, cursor: more ? state.nextCursor : null })
+    .then(function (page) {
+      if (!more) { state.items = []; state.pages = 0; }
+      state.items = state.items.concat(page.items);
+      state.total = page.total;
+      state.nextCursor = page.nextCursor;
+      state.pages += 1;
+      state.key = more ? state.key : key;
+      state.error = null;
+      state.errorKey = null;
+      return state;
+    }, function (error) { state.error = error.message; state.errorKey = more ? state.key : key; return state; })
+    .then(function (result) { state.pending = null; return result; });
+  return state.pending;
+}
+`;

package/dist/web/assets/client/domain/records.js

@@ -0,0 +1,126 @@
+export const RECORDS_SCRIPT = String.raw `
+// Record rows and cards. A row keeps its Context reference: an omitted value
+// is shown as the honest summary until its exact read arrives, and reading
+// never acknowledges or accepts anything.
+import { h, icon } from "/assets/js/lib/dom.js";
+import { button, jsonBlock, mono, note } from "/assets/js/ui/primitives.js";
+import { rawDisclosure } from "/assets/js/ui/containers.js";
+import { richText } from "/assets/js/ui/text.js";
+import { cachedExact, readExact, summaryFields } from "/assets/js/domain/context.js";
+
+// A row drawn from its exact value: synchronously when cached, otherwise the
+// summary card until the read returns and replaces it in place.
+export function exactRow(entry, taskId, t, actions, cache, render) {
+  if (!entry.omitted) return render(entry.value, null);
+  const hit = cachedExact(cache, entry);
+  if (hit) return render(hit.value, hit);
+  const placeholder = recordCard(entry, taskId, t, actions);
+  placeholder.dataset.reading = "true";
+  readExact(entry, taskId, actions, cache).then(function (result) {
+    if (placeholder.isConnected) placeholder.replaceWith(render(result.value, result));
+  }, function () { placeholder.dataset.reading = "false"; });
+  return placeholder;
+}
+
+// A closed row drawn from a list summary; its exact value is read on first
+// open. Open rows are remembered in view state and reopen after a redraw.
+export function lazyRow(item, taskId, t, actions, options) {
+  const opts = options || {};
+  const key = item.ref.store + ":" + item.ref.refId;
+  const element = h("details.lazy-row");
+  if (item.status) element.dataset.status = item.status;
+  const body = h("div.lazy-body");
+  element.append(h("summary.lazy-head", null, icon("chevron", "disclosure-chevron"), opts.head), body);
+  let state = "idle";
+  function load() {
+    if (state !== "idle") return;
+    state = "reading";
+    element.dataset.reading = "true";
+    body.replaceChildren(h("p.faint.small", null, t("record.reading")));
+    readExact({ ref: item.ref }, taskId, actions, opts.cache || {}).then(function (result) {
+      state = "done";
+      body.replaceChildren();
+      body.append(h("div.lazy-content", null, opts.render ? opts.render(result.value, result) : null), rawDisclosure(t, result.value));
+    }, function (error) {
+      state = "idle";
+      body.replaceChildren(note(t("record.changed") + " · " + error.message, "bad"));
+    }).then(function () { element.dataset.reading = "false"; });
+  }
+  element.addEventListener("toggle", function () {
+    if (opts.openRows) { if (element.open) opts.openRows[key] = true; else delete opts.openRows[key]; }
+    if (element.open) load();
+  });
+  if (opts.openRows && opts.openRows[key]) element.open = true;
+  return element;
+}
+
+// A generic card for any record: omitted values say so and can be read by
+// reference.
+export function recordCard(entry, taskId, t, actions, options) {
+  const opts = options || {};
+  const element = h("article.record" + (opts.compact ? ".is-compact" : ""));
+  element.append(h("header.record-head", null,
+    h("span.record-store", null, t("store." + entry.ref.store, entry.ref.store)),
+    mono(entry.ref.refId),
+    h("span.spacer"),
+    h("span.faint.small", { title: t("record.revision") }, String(entry.ref.revision).slice(0, 24))));
+  element.append.apply(element, !entry.omitted && entry.value ? valueLines(entry, t) : summaryLines(entry, t));
+  element.append(recordReader(entry, taskId, t, actions));
+  return element;
+}
+
+function valueLines(entry, t) {
+  const value = entry.value;
+  const lines = [];
+  const text = value.content || value.summary || value.body || value.objective || value.title || value.leaderSummary;
+  if (text) lines.push(richText(null, text, t, { threshold: 360 }));
+  if (entry.ref.store === "task-decision" && value.rationale) lines.push(richText(t("record.rationale"), value.rationale, t, { muted: true }));
+  const facts = [value.status, value.roleName].filter(Boolean);
+  if (facts.length) lines.push(h("p.faint.small", null, facts.join(" · ")));
+  if (entry.ref.store === "job") {
+    lines.push(note(t("job." + value.status + ".note", t("job.terminal.note")), value.status === "unknown-needs-attention" ? "warn" : ""));
+  }
+  return lines;
+}
+
+function summaryLines(entry, t) {
+  const fields = summaryFields(entry.summary);
+  const lead = fields.title || fields.question || fields.objective;
+  const text = fields.summary || fields.body || (lead === fields.objective ? null : fields.objective);
+  const lines = [];
+  if (lead) lines.push(h("p.record-lead", null, lead));
+  if (text) lines.push(h("p.faint", null, text));
+  if (!lead && !text) lines.push(h("p.faint", null, entry.summary || t("record.omitted")));
+  return lines;
+}
+
+// Shared source access for cards, history and discussion, including records
+// whose compact value is present but does not display every durable field.
+// With a renderer, the exact value is drawn richly and the raw record stays
+// available behind a disclosure.
+export function recordReader(entry, taskId, t, actions, render) {
+  const element = h("div.stack");
+  const expand = button(t("record.read"), { icon: "eye", variant: "link" });
+  expand.addEventListener("click", async function () {
+    expand.disabled = true;
+    element.dataset.reading = "true";
+    try {
+      const result = await actions.inspect(taskId, entry.ref);
+      const rich = render ? render(result.value, result) : null;
+      if (rich) element.append(rich, rawDisclosure(t, result.value));
+      else {
+        if (result.result && result.result.output) element.append(richText(t("record.output"), result.result.output, t));
+        if (result.result && result.result.diagnostic) element.append(richText(t("record.diagnostic"), result.result.diagnostic, t));
+        element.append(jsonBlock(result.value));
+        if (result.execution) element.append(jsonBlock(result.execution));
+      }
+      expand.remove();
+    } catch {
+      expand.disabled = false;
+      expand.replaceChildren(icon("refresh"), h("span", null, t("record.changed")));
+    } finally { element.dataset.reading = "false"; }
+  });
+  element.append(h("div.record-actions", null, expand));
+  return element;
+}
+`;

package/dist/web/assets/client/domain/runs.js

@@ -0,0 +1,119 @@
+export const RUNS_SCRIPT = String.raw `
+// Execution records, review rounds and Roles.
+import { h } from "/assets/js/lib/dom.js";
+import { formatDateTime } from "/assets/js/lib/format.js";
+import { button, chip, dot, kv, mono, note, timeTag } from "/assets/js/ui/primitives.js";
+import { richText } from "/assets/js/ui/text.js";
+import { agentChips, label, statusBadge, tone } from "/assets/js/domain/vocab.js";
+
+export function runCard(run, t, locale) {
+  const element = h("article.run-card");
+  element.dataset.status = run.status;
+  element.append(h("header.run-head", null,
+    dot(tone("run", run.status)),
+    h("span.run-role", null, run.roleName),
+    mono(run.id),
+    run.purpose ? chip(label(t, "run.purpose", run.purpose)) : null,
+    run.workItemId ? chip(run.workItemId) : null,
+    h("span.spacer"),
+    statusBadge(t, "run", "run", run.status)), runBody(run, t, locale));
+  return element;
+}
+
+// What one execution record says: delivery, instruction, report, failure.
+export function runBody(run, t, locale) {
+  const parts = [];
+  const input = run.inputs && run.inputs.length ? run.inputs[0].input : null;
+  parts.push(h("div.meta-line", null,
+    h("span", null, t("run.delivery") + ": " + label(t, "run.delivery", (run.execution && run.execution.delivery) || "unobserved")),
+    run.mode ? h("span", null, label(t, "mode", run.mode)) : null,
+    timeTag((run.result && run.result.completedAt) || run.updatedAt, locale, t),
+    agentChips(run.effective || (run.agentId ? run : null))));
+  const directive = input && (input.directive || input.action);
+  if (directive) parts.push(richText(t("run.instruction"), directive, t, { threshold: 320 }));
+  if (run.result && run.result.output) parts.push(richText(t("run.output"), run.result.output, t, { threshold: 320, className: "callout" }));
+  if (run.result && run.result.diagnostic) parts.push(richText(t("run.failure"), run.result.diagnostic, t, { threshold: 320, className: "callout.tone-bad" }));
+  if (run.executionGroupId) {
+    parts.push(h("p.faint.mono-line", null, t("run.lineage") + " " + run.executionGroupId + (run.executionLaneId ? "/" + run.executionLaneId : "")));
+  }
+  parts.push(skillPackageDetails(run.effective && run.effective.skillPackages, t));
+  return parts.filter(Boolean);
+}
+
+function skillPackageDetails(packages, t) {
+  const details = h("details", null, h("summary", null, t("role.skills") + " · " + (packages ? packages.length : t("skills.unrecorded"))));
+  if (!packages) {
+    details.append(note(t("skills.legacyNote")));
+    return details;
+  }
+  packages.forEach(function (skill) {
+    details.append(h("div.record", null, h("strong", null, skill.id),
+      h("p.small.mono-line", null, skill.digest),
+      h("p.small", null, skill.source.kind + " · " + skill.fileCount + " " + t("skills.files") + " · " + skill.byteSize + " B"),
+      h("p.small.mono-line", null, t("skills.source") + ": " + skill.source.path),
+      h("p.small.mono-line", null, t("skills.snapshot") + ": " + skill.path),
+      h("p.small.mono-line", null, t("skills.inventory") + ": " + skill.manifestPath)));
+  });
+  return details;
+}
+
+export function reviewCard(round, t, locale) {
+  const element = h("article.review-card");
+  element.append(h("header.run-head", null,
+    dot(tone("review", round.status)),
+    h("span.run-role", null, round.reviewerRoleName || t("review.reviewer")),
+    mono(round.id),
+    round.scope ? chip(label(t, "review.scope", round.scope)) : null,
+    h("span.spacer"),
+    statusBadge(t, "review", "review", round.status)));
+  element.append(h("div.meta-line", null,
+    round.workItemId ? mono(round.workItemId + (round.candidateId ? " · " + round.candidateId : "")) : null,
+    round.taskCandidate && round.taskCandidate.projects ? round.taskCandidate.projects.map(function (project) {
+      return mono(project.projectId + " @ " + String(project.commit).slice(0, 12));
+    }) : null,
+    round.reviewBaseCommit ? h("span", null, t("review.base") + " ", mono(String(round.reviewBaseCommit).slice(0, 12))) : null,
+    round.reviewerRunId ? h("span", null, t("review.run") + " ", mono(round.reviewerRunId)) : null,
+    timeTag(round.createdAt, locale, t)));
+  if (round.failure) element.append(note(round.failure.kind + ": " + round.failure.message, "bad"));
+  return element;
+}
+
+export function roleCard(role, t, locale, options) {
+  const opts = options || {};
+  const element = h("article.role-card");
+  const binding = role.agentBindings && role.agentBindings[role.activeAgentId];
+  element.append(h("header.role-head", null,
+    h("span.avatar", { "aria-hidden": "true" }, String(role.name || "?").slice(0, 1).toUpperCase()),
+    h("div.role-title", null, h("strong", null, role.name),
+      h("span.faint", null, role.activeAgentId || "")),
+    opts.status ? statusBadge(t, "role", "role", opts.status) : null));
+  if (binding) element.append(agentChips({
+    adapterId: binding.adapterId, component: binding.component,
+    model: binding.config && binding.config.model, effort: binding.config && binding.config.effort
+  }));
+  if (role.description) element.append(richText(null, role.description, t, { muted: true, threshold: 280 }));
+  element.append(kv(roleFacts(role, t, locale, opts)));
+  if (opts.runtimeRole && opts.runtimeRole.runtimeSession) {
+    element.append(skillPackageDetails(opts.runtimeRole.runtimeSession.skillPackages, t));
+  }
+  if (opts.onOpen) {
+    element.append(h("div.role-actions", null, button(t("role.openSession"), {
+      icon: "terminal", variant: "ghost", onClick: function () { opts.onOpen(role.name); }
+    })));
+  }
+  return element;
+}
+
+function roleFacts(role, t, locale, opts) {
+  const session = opts.runtimeRole && opts.runtimeRole.runtimeSession;
+  const rows = [];
+  rows.push([t("role.session"), session && session.nativeSessionId ? mono(session.nativeSessionId) : t("role.noSession")]);
+  if (role.launchRevision !== undefined) rows.push([t("role.desired"), "r" + role.launchRevision + (opts.launchDrift ? " · " + t("role.drift") : "")]);
+  if (role.defaultAccess !== undefined) rows.push([t("role.access"), role.defaultAccess]);
+  if (opts.retry) rows.push([t("role.providerRetry"), label(t, "retry", opts.retry.status) + " · "
+    + opts.retry.attempts + "/" + opts.retry.limit
+    + (opts.retry.status === "waiting" && opts.retry.nextEligibleAt ? " · " + formatDateTime(opts.retry.nextEligibleAt, locale) : "")]);
+  if (role.skills && role.skills.length) rows.push([t("role.skills"), h("span.chip-row", null, role.skills.map(function (s) { return chip(s); }))]);
+  return rows;
+}
+`;