@zq-silk/yui 2.2.0 → 2.4.0

package/dist/web/assets/client/views/task/observation.js

@@ -0,0 +1,153 @@
+export const TASK_OBSERVATION_SCRIPT = String.raw `
+// Runtime observation slots. The observation arrives separately from the
+// Context snapshot, so updateObservation() redraws only the [data-slot]
+// elements the panels left for it: the execution badge, the Now banner and
+// next owner, Role statuses and Sessions, and the Diagnostics facts.
+import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { fill, formatClock, formatDateTime, relativeTime } from "/assets/js/lib/format.js";
+import { badge, dot, kv, mono, note } from "/assets/js/ui/primitives.js";
+import { label, sessionBadges, statusBadge, tone } from "/assets/js/domain/vocab.js";
+
+export function updateObservation(container, data, t, locale) {
+  const available = data.runtimeStatus === "available" && data.runtime;
+  const execution = available ? data.runtime.execution : null;
+  const execBadge = container.querySelector('[data-slot="exec-badge"]');
+  if (execBadge) {
+    clear(execBadge);
+    if (execution && execution.status !== data.task.status) execBadge.append(statusBadge(t, "exec", "exec.status", execution.status));
+  }
+  const now = container.querySelector('[data-slot="now"]');
+  if (now && !now.contains(document.activeElement)) drawNow(now, data, execution, t, locale);
+  const next = container.querySelector('[data-slot="next"]');
+  if (next) drawNext(next, execution, t);
+  drawSessions(container, available ? data.runtime.sessions : null, t, locale);
+  const raw = container.querySelector('[data-slot="runtime-raw"]');
+  if (raw) raw.textContent = available ? JSON.stringify({ roles: data.runtime.roles, runtimeHealth: data.runtime.runtimeHealth }, null, 2) : "";
+  const rawStatus = container.querySelector('[data-slot="runtime-status"]');
+  if (rawStatus) rawStatus.textContent = t("observation." + data.runtimeStatus) + " · " + formatDateTime(data.runtimeObservedAt, locale);
+  container.querySelectorAll("[data-role-status]").forEach(function (slot) {
+    const role = available ? (data.runtime.roles || []).find(function (item) { return item.name === slot.dataset.roleStatus; }) : null;
+    clear(slot);
+    if (role) slot.append(statusBadge(t, "role", "role", role.status));
+  });
+}
+
+function drawNext(slot, execution, t) {
+  clear(slot);
+  if (!execution || (execution.next.owner === "none" && execution.next.action === "none")) return;
+  slot.append(icon("flag", "icon-sm"), h("span", null, t("now.nextOwner") + " "),
+    h("strong", null, label(t, "exec.owner", execution.next.owner)), h("span", null, " · " + label(t, "exec.action", execution.next.action)));
+}
+
+// --- Now banner --------------------------------------------------------------
+const BANNER_TONES = ["tone-info", "tone-ok", "tone-warn", "tone-bad", "tone-idle", "tone-accent"];
+
+function drawNow(slot, data, execution, t, locale) {
+  clear(slot);
+  const inputCount = data.core.attention.openInputs.count;
+  const waiting = inputCount ? fill(t("now.inputs"), { count: inputCount }) : null;
+  const banner = slot.closest(".now-card");
+  if (banner) {
+    banner.classList.remove.apply(banner.classList, BANNER_TONES);
+    banner.classList.add("tone-" + (execution ? tone("exec", execution.status) : data.runtimeStatus === "unavailable" ? "bad" : "idle"));
+  }
+  if (!execution) {
+    slot.append(h("div.now-head", null,
+      badge(t("observation." + data.runtimeStatus), data.runtimeStatus === "unavailable" ? "bad" : "idle", { dot: true }),
+      h("span.now-owner", null, waiting || t("now.noInputs"))));
+    slot.append(h("p.now-note", null, data.runtimeStatus === "waiting" ? t("now.reading") : t("now.unavailable")));
+    return;
+  }
+  slot.append(nowHead(data, execution, t, locale));
+  if (execution.summary) slot.append(h("p.now-summary", null, execution.summary));
+  if (execution.reason) slot.append(h("p.now-reason", null, execution.reason));
+  const signals = nowSignals(data, execution, t);
+  if (signals.length) slot.append(h("ul.signal-list", null, signals));
+  else slot.append(h("p.now-note", null, waiting || t("now.clear")));
+}
+
+function nowHead(data, execution, t, locale) {
+  const head = h("div.now-head", null,
+    statusBadge(t, "exec", "exec.status", execution.status),
+    execution.owner === "none" && execution.action === "none" ? null
+      : h("span.now-owner", null, label(t, "exec.owner", execution.owner) + " · " + label(t, "exec.action", execution.action)));
+  const activeCount = execution.activeRunCount === undefined ? (execution.activeRuns || []).length : execution.activeRunCount;
+  if (activeCount) head.append(badge(activeCount + " " + t("now.activeRuns"), "info"));
+  if (execution.monitoring === "stopped") head.append(badge(t("now.monitoringStopped"), "warn"));
+  if (execution.failClosed) head.append(badge(t("now.failClosed"), "bad"));
+  head.append(h("span.spacer"), h("span.faint.small", { title: formatDateTime(data.runtimeObservedAt, locale) },
+    t("now.observed") + " " + formatClock(data.runtimeObservedAt, locale)));
+  return head;
+}
+
+// Attention, blockers and native Sessions waiting on the user, in that order.
+function nowSignals(data, execution, t) {
+  const signals = [];
+  (execution.attention || []).forEach(function (item) {
+    signals.push(signalRow("warn", "alert", label(t, "exec.attention", item.kind), item.summary,
+      item.owner ? label(t, "exec.owner", item.owner) : null));
+  });
+  (execution.blockers || []).forEach(function (item) {
+    signals.push(signalRow("bad", "alert", label(t, "exec.blocker", item.kind), item.summary, label(t, "exec.owner", item.owner)));
+  });
+  const sessions = (data.runtime.sessions && data.runtime.sessions.sessions) || [];
+  sessions.filter(function (session) { return session.group === "waiting" && ["user", "permission"].includes(session.waitingReason); })
+    .forEach(function (session) { signals.push(signalRow("warn", "user", session.roleName, t("now.nativeWait"), null)); });
+  return signals;
+}
+
+function signalRow(toneName, iconName, kind, text, owner) {
+  return h("li.signal-row.tone-" + toneName, null, icon(iconName, "icon-sm"),
+    h("span.signal-kind", null, kind), h("span", null, text), owner ? h("span.faint.small", null, owner) : null);
+}
+
+// --- Sessions ----------------------------------------------------------------
+// Native Session observation, drawn into the Runtime tab: one line per Role,
+// the group counts beside the Roles heading, and the timestamps under
+// Diagnostics. Activity is never delivery progress.
+function drawSessions(container, observation, t, locale) {
+  const sessions = observation ? observation.sessions : [];
+  container.querySelectorAll("[data-role-session]").forEach(function (slot) {
+    const session = sessions.find(function (item) { return item.roleName === slot.dataset.roleSession; });
+    drawRoleSession(slot, session, observation, t, locale);
+  });
+  const counts = container.querySelector('[data-slot="session-counts"]');
+  if (counts) {
+    clear(counts);
+    if (observation) counts.append(...sessionBadges(observation.counts, t));
+  }
+  const facts = container.querySelector('[data-slot="session-facts"]');
+  if (facts) drawSessionFacts(facts, observation, sessions, t, locale);
+}
+
+function drawRoleSession(slot, session, observation, t, locale) {
+  clear(slot);
+  if (!session) {
+    slot.append(h("span.faint.small", null, observation ? t("session.noneRecorded") : t("sessions.unavailable")));
+    return;
+  }
+  slot.append(h("div.role-session-head", null, dot(tone("session", session.group)),
+    h("strong", null, t("session." + session.group)),
+    h("span.faint.small", null, session.lastActivityAt ? relativeTime(session.lastActivityAt, locale, t) : t("sessions.unobserved"))));
+  if (session.reason) slot.append(h("p.small", null, session.reason));
+  if (session.waitingReason) slot.append(h("p.small", null, t("sessions.waitingFor") + " " + session.waitingReason));
+}
+
+function drawSessionFacts(facts, observation, sessions, t, locale) {
+  clear(facts);
+  if (!observation) return;
+  facts.append(h("h4.sub-head", null, t("sessions.facts")));
+  if (!sessions.length) facts.append(note(t("sessions.none")));
+  sessions.forEach(function (session) {
+    facts.append(kv([
+      [t("sessions.role"), session.roleName],
+      [t("sessions.lastActivity"), session.lastActivityAt ? formatDateTime(session.lastActivityAt, locale) : t("sessions.unobserved")],
+      [t("sessions.inputUpdated"), formatDateTime(session.sourceUpdatedAt, locale)],
+      [t("sessions.operations"), session.operations.length ? session.operations.join(", ") : null],
+      [t("sessions.background"), session.background.length ? session.background.map(function (item) { return item.id + " · " + item.execution; }).join(", ") : null],
+      [t("sessions.identity"), mono([session.nativeSessionId, session.nativeTurnId, session.attemptId].filter(Boolean).join(" / "))]
+    ]));
+  });
+  facts.append(h("p.faint.small", null, t("sessions.scope") + " " + formatDateTime(observation.readAt, locale)));
+}
+`;

package/dist/web/assets/client/views/task/overview.js

@@ -0,0 +1,161 @@
+export const TASK_OVERVIEW_SCRIPT = String.raw `
+// Task › Overview: one reading column, top to bottom — where the Task stands
+// now, what needs the user, what it has reported, its goal and its current
+// decisions. A Draft also reports its planning Turn.
+import { h } from "/assets/js/lib/dom.js";
+import { formatDateTime } from "/assets/js/lib/format.js";
+import { bulletList, button, codeBlock, dot, emptyState, note, timeTag } from "/assets/js/ui/primitives.js";
+import { card, disclosure } from "/assets/js/ui/containers.js";
+import { richText } from "/assets/js/ui/text.js";
+import { entriesOf, exactCache, totalOf, valuesOf } from "/assets/js/domain/context.js";
+import { lazyRow, recordCard } from "/assets/js/domain/records.js";
+import { inputCard } from "/assets/js/domain/work.js";
+import { taskActions } from "/assets/js/views/task/actions.js";
+
+export function renderOverviewPanel(panel, data, t, locale, ctx) {
+  // Now: the derived execution status (observation), the open questions and
+  // who acts next. drawNow() tints the banner with the status tone.
+  const now = card({ className: "now-card" });
+  now.body.append(h("p.faint.small", null, t("workbench.observation")),
+    h("div", { dataset: { slot: "now" } }), h("p.next-line", { dataset: { slot: "next" } }));
+  panel.append(now);
+  panel.append(taskActions(data.task, t, ctx));
+  if (data.core.attention.openInputs.count) panel.append(needsCard(data, t, locale, ctx));
+  const progress = progressCard(data, t, locale, ctx);
+  const goal = goalCard(data, t, ctx);
+  panel.append(progress);
+  panel.append(goal, workAndEvidence(data, t, ctx), decisionsCard(data, t, locale, ctx));
+}
+
+// Needs you: open InputRequests with their answer controls. Open questions
+// the bounded read did not carry are listed by reference.
+function needsCard(data, t, locale, ctx) {
+  const task = data.task;
+  const openInputs = data.core.attention.openInputs;
+  const inputs = entriesOf(data.core, "input-request").filter(function (entry) { return !entry.omitted && entry.value.status === "open"; });
+  const missing = openInputs.refs.filter(function (ref) {
+    return !inputs.some(function (entry) { return entry.ref.refId === ref.refId; });
+  });
+  const needs = card({ title: t("overview.needsYou"), icon: "inbox", count: openInputs.count, className: "needs-card" });
+  needs.id = "detail-attention";
+  inputs.forEach(function (entry) { needs.body.append(inputCard(entry.value, t, locale, ctx.answerInput)); });
+  const seen = new Set(inputs.map(function (entry) { return entry.ref.refId; }));
+  function deferredInput(item) {
+    seen.add(item.ref.refId);
+    return lazyRow(item, task.id, t, ctx, {
+      head: h("span", null, item.summary || item.ref.refId),
+      cache: exactCache(data.viewState),
+      render: function (value) {
+        return value.status === "open" ? inputCard(value, t, locale, ctx.answerInput)
+          : note(value.id + " · " + value.status);
+      }
+    });
+  }
+  missing.forEach(function (ref) {
+    const entry = entriesOf(data.core, "input-request").find(function (entry) { return entry.ref.refId === ref.refId; });
+    needs.body.append(deferredInput({ ref: ref, summary: entry && entry.summary }));
+  });
+  if (openInputs.count > inputs.length + missing.length) {
+    let cursor;
+    const more = button(t("overview.moreInputs"), { onClick: async function () {
+      more.disabled = true;
+      try {
+        const page = await ctx.list(task.id, "input-request", { status: "open", limit: 20, cursor: cursor });
+        page.items.forEach(function (item) { if (!seen.has(item.ref.refId)) needs.body.insertBefore(deferredInput(item), more); });
+        cursor = page.nextCursor;
+        more.disabled = !cursor;
+      } catch (error) { needs.body.append(note(error.message, "bad")); more.disabled = false; }
+    } });
+    needs.body.append(more);
+  }
+  return needs;
+}
+
+function briefOf(data) {
+  return data.briefValue || valuesOf(data.core, "task-brief")[0];
+}
+
+function progressCard(data, t, locale, ctx) {
+  const task = data.task;
+  const element = card({ title: t("progress.title"), icon: "flag" });
+  const working = task.status === "draft" || task.status === "active";
+  if (task.completionSummary) element.body.append(richText(t("progress.completion"), task.completionSummary, t, { className: "callout.tone-ok" }));
+  if (task.retirementSummary) element.body.append(richText(t("progress.retirement"), task.retirementSummary, t, { className: "callout" }));
+  if (task.archiveSummary || task.archiveReason) element.body.append(richText(t("progress.archive"), [task.archiveSummary, task.archiveReason].filter(Boolean).join("\n\n"), t, { className: "callout" }));
+  const briefEntry = entriesOf(data.core, "task-brief")[0];
+  const brief = briefOf(data);
+  if (brief) {
+    element.body.append(richText(t(working ? "progress.focus" : "progress.lastFocus"), brief.currentFocus, t));
+    element.body.append(richText(t(working ? "progress.report" : "progress.lastReport"), brief.leaderSummary, t, { muted: true }));
+    element.body.append(h("p.faint.small", null, t("progress.briefUpdated") + " " + formatDateTime(brief.updatedAt, locale)));
+  } else if (briefEntry) element.body.append(recordCard(briefEntry, task.id, t, ctx, { compact: true }));
+  else element.body.append(emptyState(t("progress.none")));
+  return element;
+}
+
+function goalCard(data, t, ctx) {
+  const task = data.task;
+  const brief = briefOf(data);
+  const element = card({ title: t("goal.title"), icon: "target" });
+  if (brief && brief.objective) element.body.append(richText(null, brief.objective, t));
+  if (brief && brief.boundaries && brief.boundaries.length) {
+    element.body.append(h("div.prose-block", null, h("h4.prose-label", null, t("goal.boundaries")), bulletList(brief.boundaries)));
+  }
+  if (brief && brief.technicalApproach) element.body.append(proseDisclosure(t("goal.approach"), "approach", brief.technicalApproach, t));
+  if (task.description) element.body.append(proseDisclosure(t("goal.requirements"), "requirements", task.description, t));
+  element.body.append(note(t("workbench.summary")));
+  ["task", "task-brief"].forEach(function (store) {
+    const entry = entriesOf(data.core, store)[0];
+    if (entry) element.body.append(recordCard({ ref: entry.ref, omitted: true }, task.id, t, ctx));
+  });
+  if (!element.body.childNodes.length) element.body.append(emptyState(t("goal.none")));
+  return element;
+}
+
+function workAndEvidence(data, t, ctx) {
+  const element = card({ title: t("workbench.evidence"), icon: "layers" });
+  entriesOf(data.core, "work-item").slice(0, 3).forEach(function (entry) {
+    element.body.append(recordCard(entry, data.task.id, t, ctx, { compact: true }));
+  });
+  const evidence = data.evidenceSummary || { reviews: [], integrations: [] };
+  evidence.reviews.forEach(function (review) {
+    element.body.append(h("p.small", null, review.id + " · " + t("workbench.reviewExecution") + " " + review.status),
+      review.excerpt ? richText(review.runId, review.excerpt, t) : null);
+  });
+  evidence.integrations.forEach(function (integration) {
+    element.body.append(h("p.small", null, integration.id + " · " + integration.status),
+      integration.summary ? richText(null, integration.summary, t) : null);
+    (integration.checks || []).forEach(function (check) {
+      element.body.append(h("p.faint.small", null, check.name + " · " + check.outcome));
+    });
+  });
+  if (!evidence.reviews.length && !evidence.integrations.length) element.body.append(note(t("workbench.noEvidence")));
+  element.body.append(button(t("workbench.openEvidence"), { variant: "link", onClick: function () { ctx.onTab("delivery"); } }));
+  return element;
+}
+
+function proseDisclosure(title, viewKey, text, t) {
+  const element = disclosure(title, viewKey);
+  element.body.append(richText(null, text, t));
+  return element;
+}
+
+function decisionsCard(data, t, locale, ctx) {
+  const active = entriesOf(data.core, "task-decision").filter(function (entry) { return !entry.omitted && entry.value.status === "active"; });
+  const total = totalOf(data.core, "task-decision");
+  const element = card({ id: "detail-decisions", title: t("decisions.title"), icon: "check", count: total || null, hint: t("decisions.hint") });
+  active.slice(0, 3).forEach(function (entry) {
+    const value = entry.value;
+    element.body.append(h("article.decision", null,
+      h("header.decision-head", null, dot("ok"), h("strong", null, value.title), timeTag(value.createdAt, locale, t)),
+      value.rationale ? richText(null, value.rationale, t, { muted: true, threshold: 260 }) : null));
+  });
+  if (!active.length) element.body.append(emptyState(t("decisions.none")));
+  element.body.append(button(t("decisions.more"), { variant: "link", icon: "chevron", onClick: function () {
+    data.viewState.recordsFilter = "decision";
+    ctx.onTab("records");
+  } }));
+  return element;
+}
+
+`;

package/dist/web/assets/client/views/task/page.js

@@ -0,0 +1,131 @@
+import { TASK_TABS, TASK_TAB_ALIASES, TASK_TAB_ICONS } from "../../../shared/taskTabs.js";
+export const TASK_PAGE_SCRIPT = String.raw `
+// Task page: header, meta line, section tabs and the four panels. The runtime
+// observation arrives separately from the Context snapshot, so every fact it
+// feeds lives in a [data-slot] that updateObservation() redraws in place.
+import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { badge, chip, timeTag } from "/assets/js/ui/primitives.js";
+import { label, statusBadge } from "/assets/js/domain/vocab.js";
+import { totalOf } from "/assets/js/domain/context.js";
+import { renderOverviewPanel } from "/assets/js/views/task/overview.js";
+import { updateObservation } from "/assets/js/views/task/observation.js";
+import { renderDelivery } from "/assets/js/views/task/delivery.js";
+import { renderRuntime } from "/assets/js/views/task/runtime.js";
+import { renderRecords } from "/assets/js/views/task/records.js";
+
+// Overview: where it stands. Delivery: what it produced. Runtime: what is
+// live now. Records: what happened. Retired section names stay addressable.
+export const TABS = ${JSON.stringify(TASK_TABS)};
+export const TAB_ALIASES = ${JSON.stringify(TASK_TAB_ALIASES)};
+const TAB_ICONS = ${JSON.stringify(TASK_TAB_ICONS)};
+
+export function renderTaskDetail(container, data, t, locale, ctx) {
+  clear(container);
+  const task = data.task;
+  container.dataset.taskId = task.id;
+  data.viewState.coreKey = data.core.coreCursor;
+  const page = h("div.page.task-page");
+  page.append(h("header.task-header", null, taskBar(task, t, ctx)),
+    h("div.task-hero", null, h("h1.task-title", null, task.title), taskMeta(task, t, locale)),
+    h("div.tabs-wrap", null, taskTabs(data.core, t, ctx)));
+  const panels = {};
+  TABS.forEach(function (tab) {
+    panels[tab] = h("section.tab-panel", { id: "panel-" + tab, role: "tabpanel", "aria-labelledby": "tab-" + tab, hidden: ctx.activeTab !== tab });
+    page.append(panels[tab]);
+  });
+  renderOverviewPanel(panels.overview, data, t, locale, ctx);
+  [["delivery", renderDelivery], ["runtime", renderRuntime], ["records", renderRecords]].forEach(function (entry) {
+    const panel = panels[entry[0]];
+    panel.onShow = function () {
+      panel.onShow = null;
+      entry[1](panel, data, t, locale, ctx);
+      updateObservation(container, data, t, locale, ctx);
+      if (panel.onShow) panel.onShow();
+    };
+  });
+  container.append(page);
+  updateObservation(container, data, t, locale, ctx);
+  const active = panels[ctx.activeTab];
+  if (active && active.onShow) active.onShow();
+}
+
+// A panel may read on first show (evidence, record pages); it keeps those
+// reads in view state, so showing it again does not repeat them.
+export function selectTab(container, tab) {
+  container.querySelectorAll(".tab").forEach(function (button) {
+    const active = button.dataset.tab === tab;
+    button.setAttribute("aria-selected", String(active));
+    button.tabIndex = active ? 0 : -1;
+  });
+  container.querySelectorAll(".tab-panel").forEach(function (panel) {
+    panel.hidden = panel.id !== "panel-" + tab;
+    if (!panel.hidden && panel.onShow) panel.onShow();
+  });
+}
+
+function taskBar(task, t, ctx) {
+  return h("div.task-bar", null,
+    h("button.icon-btn.back-btn", { type: "button", "aria-label": t("actions.back"), title: t("actions.back"), onclick: ctx.onBack }, icon("back")),
+    h("nav.crumbs", { "aria-label": t("crumbs.label") },
+      h("button.crumb", { type: "button", onclick: ctx.onBack }, t("crumbs.tasks")),
+      h("span.crumb-sep", { "aria-hidden": "true" }, "/"),
+      h("code.crumb-current", null, task.id)),
+    h("span.spacer"),
+    dockToggle("discussion", "chat", t("dock.discussion") + " · D", t, ctx),
+    dockToggle("session", "terminal", t("dock.session"), t, ctx));
+}
+
+function dockToggle(mode, iconName, title, t, ctx) {
+  return h("button.btn.btn-ghost.dock-toggle", {
+    type: "button", dataset: { dockToggle: mode }, title: title,
+    onclick: function () { ctx.showDock(mode); }
+  }, icon(iconName), h("span", null, t("dock." + mode)));
+}
+
+function taskMeta(task, t, locale) {
+  return h("div.task-meta", null,
+    statusBadge(t, "task", "status", task.status),
+    h("span", { dataset: { slot: "exec-badge" } }),
+    task.priority ? badge(label(t, "priority", task.priority), task.priority === "urgent" || task.priority === "high" ? "accent" : "idle") : null,
+    (task.tags || []).map(function (tag) { return chip("#" + tag); }),
+    h("span.meta-item", null, icon("clock", "icon-sm"), t("task.updated") + " ", timeTag(task.updatedAt, locale, t)),
+    (task.projectBindings || []).length ? h("span.meta-item", null, icon("layers", "icon-sm"),
+      task.projectBindings.map(function (binding) { return binding.projectId; }).join(", ")) : null);
+}
+
+function taskTabs(core, t, ctx) {
+  // Tab counts are current totals from the same bounded read, not samples:
+  // open questions, open work items and open execution records.
+  const counts = {
+    overview: core.attention.openInputs.count,
+    delivery: totalOf(core, "work-item"),
+    runtime: totalOf(core, "run")
+  };
+  const tabs = h("nav.tabs", { role: "tablist", "aria-label": t("tabs.label") }, TABS.map(function (tab, index) {
+    return h("button.tab", {
+      type: "button", role: "tab", id: "tab-" + tab,
+      "aria-controls": "panel-" + tab,
+      "aria-selected": String(ctx.activeTab === tab),
+      tabIndex: ctx.activeTab === tab ? 0 : -1,
+      title: t("tabs." + tab) + " · " + (index + 1),
+      dataset: { tab: tab },
+      onclick: function () { ctx.onTab(tab); }
+    }, icon(TAB_ICONS[tab], "icon-sm"), h("span", null, t("tabs." + tab)),
+    counts[tab] ? h("span.count" + (tab === "overview" ? ".tone-warn" : ""), null, String(counts[tab])) : null);
+  }));
+  tabs.addEventListener("keydown", function (event) { moveTab(tabs, event, ctx); });
+  return tabs;
+}
+
+// Left/Right arrows move the selection and the focus to the adjacent tab.
+function moveTab(tabs, event, ctx) {
+  if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
+  event.preventDefault();
+  const selected = tabs.querySelector('[aria-selected="true"]');
+  const index = TABS.indexOf(selected.dataset.tab);
+  const next = TABS[(index + (event.key === "ArrowRight" ? 1 : TABS.length - 1)) % TABS.length];
+  ctx.onTab(next);
+  const button = tabs.querySelector('[data-tab="' + next + '"]');
+  if (button) button.focus();
+}
+`;

package/dist/web/assets/client/views/task/records.js

@@ -0,0 +1,163 @@
+export const TASK_RECORDS_SCRIPT = String.raw `
+// Task › Records: what happened — the History timeline, the Task facts with
+// the title form, and the Advanced disclosure (Context cursors and provider
+// panels, read when it is first opened). Every #detail-* anchor stays
+// addressable via ?section=.
+import { h, clear } from "/assets/js/lib/dom.js";
+import { formatDateTime } from "/assets/js/lib/format.js";
+import { button, chip, emptyState, externalLink, jsonBlock, kv, mono, note, safeUrl } from "/assets/js/ui/primitives.js";
+import { card, cardDisclosure, disclosure, loadedNote, moreButton } from "/assets/js/ui/containers.js";
+import { richText } from "/assets/js/ui/text.js";
+import { exactCache, familyState, loadFamily, summaryFields, totalOf } from "/assets/js/domain/context.js";
+import { lazyRow } from "/assets/js/domain/records.js";
+import { label, statusBadge } from "/assets/js/domain/vocab.js";
+import { titleForm } from "/assets/js/domain/taskForms.js";
+import { historyCard } from "/assets/js/views/task/timeline.js";
+
+export function renderRecords(panel, data, t, locale, ctx) {
+  panel.append(historyCard(panel, data, t, locale, ctx));
+  panel.append(factsCard(data.task, t, locale, ctx));
+  panel.append(knowledgeCard(data, t, ctx));
+  panel.append(advancedCard(data.core, data.task, t, locale, ctx));
+}
+
+// Current, bound-project Knowledge only. Read summaries in pages and fetch an
+// exact full version (including source and prior versions) on first row open.
+function knowledgeCard(data, t, ctx) {
+  const view = data.viewState;
+  exactCache(view);
+  view.openRows = view.openRows || {};
+  const element = cardDisclosure("detail-knowledge", t("knowledge.title"), "info",
+    String(totalOf(data.core, "project-knowledge")));
+  function draw() {
+    clear(element.body);
+    element.body.append(note(t("knowledge.help")));
+    const state = familyState(view, "project-knowledge");
+    if (state.error) {
+      element.body.append(note(state.error, "bad"));
+      const retry = button(t("panels.read"), { variant: "ghost" });
+      retry.addEventListener("click", function () { load(false); });
+      element.body.append(retry);
+    }
+    if (!state.items.length) element.body.append(note(t(state.pending ? "record.reading" : "records.none")));
+    state.items.forEach(function (item) {
+      const fields = summaryFields(item.summary);
+      element.body.append(lazyRow(item, data.task.id, t, ctx, {
+        cache: view.exact, openRows: view.openRows,
+        head: [h("span.lazy-title", null, fields.title || item.ref.refId), mono(item.ref.refId)],
+        render: function (value) {
+          return h("div.stack", null, kv([
+            [t("knowledge.version"), String(value.version)],
+            [t("details.status"), value.status],
+            [t("knowledge.scope"), value.scope || t("knowledge.unspecified")],
+            [t("knowledge.expires"), value.expiresWhen || t("knowledge.unspecified")],
+            [t("knowledge.source"), value.provenance ? value.provenance.taskId + (value.provenance.proposalId ? " / " + value.provenance.proposalId : "") : t("knowledge.direct")]
+          ]), richText(null, value.body, t), note(t("knowledge.history")));
+        }
+      }));
+    });
+    if (state.pages) element.body.append(loadedNote(t, state.items.length, state.total));
+    if (state.nextCursor) element.body.append(moreButton(t, function () { load(true); }));
+  }
+  function load(more) {
+    const promise = loadFamily(view, data.task.id, "project-knowledge", data.core.coreCursor, ctx, { more: more, limit: 40 });
+    draw();
+    promise.then(draw);
+  }
+  element.addEventListener("toggle", function () {
+    if (element.open) load(false);
+  });
+  draw();
+  return element;
+}
+
+// --- Task information --------------------------------------------------------
+function factsCard(task, t, locale, ctx) {
+  const facts = card({ id: "detail-facts", title: t("details.facts"), icon: "info" });
+  facts.body.append(kv([
+    [t("details.id"), mono(task.id)],
+    [t("details.status"), statusBadge(t, "task", "status", task.status)],
+    [t("details.priority"), task.priority ? label(t, "priority", task.priority) : null],
+    [t("details.tags"), (task.tags || []).length ? h("span.chip-row", null, task.tags.map(function (tag) { return chip(tag); })) : null],
+    [t("details.projects"), (task.projectBindings || []).length ? h("span.chip-row", null, task.projectBindings.map(function (b) { return chip(b.projectId); })) : null],
+    [t("details.created"), formatDateTime(task.createdAt, locale)],
+    [t("details.updated"), formatDateTime(task.updatedAt, locale)],
+    [t("details.workspace"), task.cwd ? mono(task.cwd) : null]
+  ]));
+  facts.body.append(h("div.prose-block", null, h("h4.prose-label", null, t("details.title")), titleForm(task, t, ctx)));
+  return facts;
+}
+
+// --- Advanced ------------------------------------------------------------------
+function advancedCard(core, task, t, locale, ctx) {
+  const advanced = cardDisclosure("detail-advanced", t("advanced.title"), "advanced", t("advanced.meta"));
+  advanced.body.append(h("h4.sub-head", null, t("details.context")), jsonBlock({
+    coreCursor: core.coreCursor, throughCursor: core.throughCursor, count: core.count, collections: core.collections, omitted: core.omitted
+  }), note(t("details.contextHelp")));
+  const panels = h("div.stack");
+  advanced.body.append(h("h4.sub-head", null, t("panels.title")), panels);
+  let loading = false;
+  let loaded = false;
+  advanced.addEventListener("toggle", async function () {
+    if (!advanced.open || loading || loaded) return;
+    loading = true;
+    try { loaded = await readPanels(panels, task, t, locale, ctx); } finally { loading = false; }
+  });
+  return advanced;
+}
+
+// Provider panels are read once, on the first open; a failure may retry.
+async function readPanels(holder, task, t, locale, ctx) {
+  clear(holder);
+  holder.append(h("p.faint", null, t("panels.reading")));
+  try {
+    const current = await ctx.panels(task.id);
+    clear(holder);
+    holder.append(h("p.faint.small", null, t("panels.observed") + " " + formatDateTime(current.observedAt, locale)));
+    if (!current.panels.length) holder.append(emptyState(t("panels.none")));
+    current.panels.forEach(function (item) { holder.append(panelCard(item, task, t, ctx)); });
+    return true;
+  } catch (error) {
+    clear(holder);
+    holder.append(note(t("panels.unavailable") + " " + error.message, "bad"));
+    return false;
+  }
+}
+
+function panelCard(item, task, t, ctx) {
+  const panel = item.panel;
+  const element = h("article.record", null,
+    h("header.record-head", null, h("strong", null, panel.title), h("span.spacer"), h("span.faint.small", null, item.capability + " · " + item.provider.id)));
+  if (item.unavailable) { element.append(note(item.unavailable, "warn")); return element; }
+  if (panel.kind === "text") element.append(h("p.small", null, panel.text));
+  else if (panel.kind === "link") {
+    const href = safeUrl(panel.href);
+    if (href) element.append(externalLink(href, panel.title));
+  } else if (panel.kind === "data" && panel.renderer === "json") element.append(...dataPanel(item, task, t, ctx));
+  return element;
+}
+
+// A data panel is read on request with the user's JSON input.
+function dataPanel(item, task, t, ctx) {
+  const input = h("textarea.mono", { rows: 3 });
+  input.value = JSON.stringify({ taskId: task.id });
+  const schema = disclosure(t("panels.schema"), null);
+  schema.body.append(jsonBlock(item.inputSchema));
+  const output = h("pre.code-block");
+  output.hidden = true;
+  const read = button(t("panels.read"), { icon: "eye", variant: "ghost" });
+  read.addEventListener("click", async function () {
+    if (read.disabled) return;
+    read.disabled = true;
+    output.hidden = false;
+    try {
+      const result = await ctx.readPanel(task.id, {
+        capability: item.capability, contractVersion: item.contractVersion, provider: item.provider
+      }, JSON.parse(input.value));
+      output.textContent = JSON.stringify(result, null, 2);
+    } catch (error) { output.textContent = t("panels.unavailable") + " " + error.message; }
+    finally { read.disabled = false; }
+  });
+  return [h("label.field", null, h("span", null, t("panels.input")), input), schema, h("div.form-actions", null, read), output];
+}
+`;