@zq-silk/yui 2.2.0 → 2.3.0

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

@@ -9,7 +9,7 @@ import { formatClock } from "/assets/js/format.js";
 import { h } from "/assets/js/dom.js";
 import { renderAttentionBar, renderFilters, renderTasks, STATUS_FILTERS, ATTENTION_KINDS } from "/assets/js/sidebar.js";
 import { renderOverview } from "/assets/js/overview.js";
-import { renderTaskDetail, selectTab, updateObservation, TABS } from "/assets/js/detail.js";
+import { renderTaskDetail, selectTab, updateObservation, TABS, TAB_ALIASES } from "/assets/js/detail.js";
 import { renderDiscussion, discussionHasUnsent, createTerminalController, sameTarget } from "/assets/js/dock.js";
 import { entriesOf } from "/assets/js/records.js";
 
@@ -118,6 +118,7 @@ function detailContext() {
     openSession: function (roleName) { openSession({ scope: "task", taskId: state.selected, roleName: roleName }); },
     answerInput: answerInput,
     inspect: api.inspect,
+    list: api.list,
     artifacts: api.artifacts,
     readArtifact: api.artifact,
     evidence: api.evidence,
@@ -132,6 +133,7 @@ function dockActions() {
   return {
     sendMessage: api.sendMessage,
     inspect: api.inspect,
+    list: api.list,
     afterWrite: function () { refreshDashboard({ quiet: true }); }
   };
 }
@@ -230,15 +232,17 @@ function switchTab(tab, options) {
   if (!(options && options.keepScroll)) el.center.scrollTop = 0;
   setSectionParam(tab);
 }
-// A section may name a tab or any anchored block inside one (for example
-// "reviews" → the Work tab, scrolled to #detail-reviews).
+// 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(section) {
-  if (!section || TABS.includes(section)) { switchTab(section || "overview"); return; }
-  const anchor = el.detail.querySelector("#detail-" + CSS.escape(section));
+  const tab = (section && TAB_ALIASES[section]) || section;
+  if (!tab || TABS.includes(tab)) { switchTab(tab || "overview"); return; }
+  const anchor = el.detail.querySelector("#detail-" + CSS.escape(tab));
   const panel = anchor && anchor.closest(".tab-panel");
   if (!panel) { switchTab("overview"); return; }
   state.activeTab = panel.id.replace(/^panel-/, "");
   selectTab(el.detail, state.activeTab);
+  if (anchor.tagName === "DETAILS") anchor.open = true;
   anchor.scrollIntoView({ block: "start" });
 }
 
@@ -757,7 +761,7 @@ document.addEventListener("keydown", function (event) {
   else if (key === "r") refreshDashboard();
   else if (key === "o") openOperator();
   else if (key === "d") toggleDock();
-  else if (/^[1-5]$/.test(key) && state.detail) switchTab(TABS[Number(key) - 1]);
+  else if (/^[1-9]$/.test(key) && Number(key) <= TABS.length && state.detail) switchTab(TABS[Number(key) - 1]);
 });
 
 // --- Boot -------------------------------------------------------------------------

package/dist/web/assets/client/components.js

@@ -39,7 +39,9 @@ const TONES = {
     stopped: "bad", idle: "idle", background: "warn" },
   role: { running: "ok", waiting: "warn", idle: "idle", unknown: "idle", failed: "bad", exited: "idle", detached: "idle" },
   decision: { active: "ok", superseded: "idle" },
-  input: { open: "warn", answered: "ok", cancelled: "idle", "auto-resolved": "ok" }
+  input: { open: "warn", answered: "ok", cancelled: "idle", "auto-resolved": "ok" },
+  integration: { running: "info", validating: "info", committed: "ok", conflicted: "warn", blocked: "bad",
+    failed: "bad", superseded: "idle" }
 };
 export function tone(kind, value) {
   return (TONES[kind] && TONES[kind][value]) || "idle";
@@ -81,17 +83,19 @@ export function timeTag(iso, locale, t, options) {
 }
 
 // --- Containers -------------------------------------------------------------------
+// One panel of the single reading column: a heading (icon tile, title, count
+// and hint) with optional actions, then the body. A "list-card" body holds a
+// .row-stack whose rows are divided by hairlines instead of nested boxes.
 export function card(options) {
   const opts = options || {};
   const element = h("section.card" + (opts.className ? "." + opts.className.split(" ").join(".") : ""));
   if (opts.id) element.id = opts.id;
   if (opts.title || opts.actions) {
-    const head = h("header.card-head", null,
-      h("h3.card-title", null, opts.icon ? icon(opts.icon) : null, h("span", null, opts.title),
+    const heading = h("div.card-heading", null,
+      h("h3.card-title", null, opts.icon ? h("span.card-icon", null, icon(opts.icon)) : null, h("span", null, opts.title),
         opts.count !== undefined && opts.count !== null ? h("span.count", null, String(opts.count)) : null),
-      opts.actions ? h("div.card-actions", null, opts.actions) : null);
-    if (opts.hint) head.append(h("p.card-hint", null, opts.hint));
-    element.append(head);
+      opts.hint ? h("p.card-hint", null, opts.hint) : null);
+    element.append(h("header.card-head", null, heading, opts.actions ? h("div.card-actions", null, opts.actions) : null));
   }
   const body = h("div.card-body");
   element.append(body);
@@ -99,6 +103,39 @@ export function card(options) {
   return element;
 }
 
+// A panel whose body is a divided list of rows.
+export function listCard(options) {
+  const element = card({ ...options, className: "list-card" + (options.className ? " " + options.className : "") });
+  element.list = h("div.row-stack");
+  element.body.append(element.list);
+  return element;
+}
+
+// Update a card heading count after a later read; null removes it.
+export function setCardCount(element, value) {
+  const title = element.querySelector(".card-title");
+  let count = title && title.querySelector(".count");
+  if (value === undefined || value === null) { if (count) count.remove(); return; }
+  if (!title) return;
+  if (!count) { count = h("span.count"); title.append(count); }
+  count.textContent = String(value);
+}
+
+// Local filter chips; selecting one redraws the list in place.
+export function filterChips(ariaLabel, options, selected, onSelect) {
+  const row = h("div.chip-tabs", { role: "group", "aria-label": ariaLabel });
+  options.forEach(function (option) {
+    row.append(h("button.chip-tab", {
+      type: "button", "aria-pressed": String(option.value === selected), dataset: { filter: option.value },
+      onclick: function () {
+        row.querySelectorAll(".chip-tab").forEach(function (b) { b.setAttribute("aria-pressed", String(b.dataset.filter === option.value)); });
+        onSelect(option.value);
+      }
+    }, option.label, option.count === undefined || option.count === null ? null : h("span.count", null, String(option.count))));
+  });
+  return row;
+}
+
 export function disclosure(title, viewKey, options) {
   const opts = options || {};
   const element = h("details.disclosure" + (opts.className ? "." + opts.className : ""));
@@ -112,12 +149,6 @@ export function disclosure(title, viewKey, options) {
   return element;
 }
 
-export function sectionTitle(text, count, actions) {
-  return h("div.section-title", null, h("h2", null, text,
-    count !== undefined && count !== null ? h("span.count", null, String(count)) : null),
-  actions ? h("div.section-actions", null, actions) : null);
-}
-
 export function kv(rows) {
   const list = h("dl.kv");
   rows.forEach(function (row) {
@@ -206,9 +237,24 @@ export function metricTile(labelText, value, options) {
   return tile;
 }
 
+function pageLocale() { return typeof document === "undefined" ? undefined : document.documentElement.lang || undefined; }
+
+// Seconds as the largest whole unit plus the next one ("2d 22h", "2小时48分钟").
+const DURATION_UNITS = [["day", 86400], ["hour", 3600], ["minute", 60], ["second", 1]];
+function durationText(seconds) {
+  const total = Math.max(0, Math.round(seconds));
+  const found = DURATION_UNITS.findIndex(function (unit) { return total >= unit[1]; });
+  const first = found < 0 ? DURATION_UNITS.length - 1 : found;
+  return DURATION_UNITS.slice(first, first + 2).map(function (unit, index) {
+    const count = index ? Math.floor((total % DURATION_UNITS[first][1]) / unit[1]) : Math.floor(total / unit[1]);
+    return index && !count ? "" : new Intl.NumberFormat(pageLocale(), { style: "unit", unit: unit[0], unitDisplay: "narrow" }).format(count);
+  }).filter(Boolean).join(" ");
+}
+
 export function usageMetricText(metric, t, suffix) {
   if (!metric || metric.value == null) return t("detail.unobserved");
-  return metric.value + (suffix || "") + (metric.status === "partial" ? " · " + t("detail.partial") : "");
+  const value = suffix === "s" ? durationText(metric.value) : metric.value + (suffix || "");
+  return value + (metric.status === "partial" ? " · " + t("detail.partial") : "");
 }
 
 function usageTile(labelText, metric, t, suffix) {
@@ -237,7 +283,7 @@ export function observabilityMetricCard(observability, t) {
   const meta = node("p", "usage-meta");
   meta.append(node("span", "", t("usage.scope")));
   meta.append(node("span", "", t("usage.observedThrough") + " "
-    + (cost.observedThrough ? formatDateTime(cost.observedThrough) : t("detail.unobserved"))));
+    + (cost.observedThrough ? formatDateTime(cost.observedThrough, pageLocale()) : t("detail.unobserved"))));
   meta.append(node("span", "", t("usage.contextBytes") + " "
     + (context.totalBytes == null ? t("detail.partial") : context.totalBytes + " B")));
   wrap.append(meta);
@@ -300,30 +346,35 @@ export function workItemCard(item, t, locale, titles) {
   const settled = item.status !== "open";
   const element = h(settled ? "details.work-card.is-settled" : "article.work-card");
   element.dataset.viewKey = "work:" + item.id;
-  const head = h(settled ? "summary.work-head" : "header.work-head", null,
+  element.append(h(settled ? "summary.work-head" : "header.work-head", null,
     settled ? icon("chevron", "disclosure-chevron") : null,
     dot(tone("work", item.status)),
     h("span.work-title", null, item.title),
-    statusBadge(t, "work", "work", item.status));
-  element.append(head);
-  const body = h("div.work-body");
-  body.append(h("div.meta-line", null,
+    statusBadge(t, "work", "work", item.status)));
+  element.append(h("div.work-body", null, workItemBody(item, t, locale, titles)));
+  return element;
+}
+
+// The body of one work item, shared by the open card and a lazily read row.
+export function workItemBody(item, t, locale, titles) {
+  const parts = [];
+  parts.push(h("div.meta-line", null,
     item.assignee ? h("span.meta-strong", null, icon("user", "icon-sm"), item.assignee) : null,
     mono(item.id), timeTag(item.updatedAt, locale, t)));
-  if (item.objective && item.objective !== item.title) body.append(richText(t("work.objective"), item.objective, t));
+  if (item.objective && item.objective !== item.title) parts.push(richText(t("work.objective"), item.objective, t));
   if (item.acceptance && item.acceptance.length) {
-    body.append(h("div.prose-block", null, h("h4.prose-label", null, t("work.acceptance")),
+    parts.push(h("div.prose-block", null, h("h4.prose-label", null, t("work.acceptance")),
       h("ul.checklist", null, item.acceptance.map(function (entry) {
         return h("li" + (item.status === "accepted" ? ".is-done" : ""), null, icon(item.status === "accepted" ? "check" : "target", "icon-sm"), h("span", null, entry));
       }))));
   }
   const deps = (item.dependsOn || []).map(function (id) { return (titles && titles[id]) || id; });
-  if (deps.length) body.append(h("div.meta-line", null, h("span.meta-label", null, t("work.dependsOn")), deps.map(function (d) { return chip(d); })));
+  if (deps.length) parts.push(h("div.meta-line", null, h("span.meta-label", null, t("work.dependsOn")), deps.map(function (d) { return chip(d); })));
   if (item.writeProjectIds && item.writeProjectIds.length) {
-    body.append(h("div.meta-line", null, h("span.meta-label", null, t("work.writeProjects")), item.writeProjectIds.map(function (d) { return chip(d); })));
+    parts.push(h("div.meta-line", null, h("span.meta-label", null, t("work.writeProjects")), item.writeProjectIds.map(function (d) { return chip(d); })));
   }
   if (item.candidates && item.candidates.length) {
-    body.append(h("div.prose-block", null, h("h4.prose-label", null, t("work.candidates")),
+    parts.push(h("div.prose-block", null, h("h4.prose-label", null, t("work.candidates")),
       h("ol.candidates", null, item.candidates.slice().sort(function (a, b) { return b.sequence - a.sequence; }).map(function (candidate) {
         return h("li", null, h("span.candidate-seq", null, "#" + candidate.sequence), h("span", null, candidate.summary),
           h("span.faint", null, candidate.source && candidate.source.type === "run" ? candidate.source.runId : t("work.direct")),
@@ -331,18 +382,16 @@ export function workItemCard(item, t, locale, titles) {
       }))));
   }
   if (item.disposition) {
-    body.append(note(t("work.disposition") + ": " + item.disposition.summary
+    parts.push(note(t("work.disposition") + ": " + item.disposition.summary
       + (item.disposition.replacementWorkItemId ? " → " + item.disposition.replacementWorkItemId : "")));
   }
-  if (item.outcome) body.append(richText(t("work.outcome"), item.outcome, t, { className: "callout" }));
-  element.append(body);
-  return element;
+  if (item.outcome) parts.push(richText(t("work.outcome"), item.outcome, t, { className: "callout" }));
+  return parts.filter(Boolean);
 }
 
 export function runCard(run, t, locale) {
   const element = h("article.run-card");
   element.dataset.status = run.status;
-  const input = run.inputs && run.inputs.length ? run.inputs[0].input : null;
   element.append(h("header.run-head", null,
     dot(tone("run", run.status)),
     h("span.run-role", null, run.roleName),
@@ -350,20 +399,27 @@ export function runCard(run, t, locale) {
     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)));
-  element.append(h("div.meta-line", null,
+    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) element.append(richText(t("run.instruction"), directive, t, { threshold: 320 }));
-  if (run.result && run.result.output) element.append(richText(t("run.output"), run.result.output, t, { threshold: 320, className: "callout" }));
-  if (run.result && run.result.diagnostic) element.append(richText(t("run.failure"), run.result.diagnostic, t, { threshold: 320, className: "callout.tone-bad" }));
+  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) {
-    element.append(h("p.faint.mono-line", null, t("run.lineage") + " " + run.executionGroupId + (run.executionLaneId ? "/" + run.executionLaneId : "")));
+    parts.push(h("p.faint.mono-line", null, t("run.lineage") + " " + run.executionGroupId + (run.executionLaneId ? "/" + run.executionLaneId : "")));
   }
-  return element;
+  return parts.filter(Boolean);
 }
 
 export function reviewCard(round, t, locale) {
@@ -377,6 +433,9 @@ export function reviewCard(round, t, locale) {
     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)));

package/dist/web/assets/client/detail.js

@@ -8,11 +8,15 @@ import {
   badge, statusBadge, label, tone, card, disclosure, richText, bulletList, emptyState,
   note, button, chip, mono, inputCard, kv, dot, timeTag
 } from "/assets/js/components.js";
-import { entriesOf, valuesOf, recordCard } from "/assets/js/records.js";
-import { renderWork, renderExecution, renderHistory, renderDetails } from "/assets/js/sections.js";
+import { entriesOf, valuesOf, totalOf, recordCard, readExact } from "/assets/js/records.js";
+import { renderRuntime, renderRecords } from "/assets/js/sections.js";
+import { renderDelivery } from "/assets/js/evidence.js";
 
-export const TABS = ["overview", "work", "execution", "history", "details"];
-const TAB_ICONS = { overview: "target", work: "layers", execution: "pulse", history: "history", details: "dots" };
+// Overview: where it stands. Delivery: what it produced. Runtime: what is
+// live now. Records: what happened. Retired section names stay addressable.
+export const TABS = ["overview", "delivery", "runtime", "records"];
+export const TAB_ALIASES = { work: "delivery", execution: "runtime", history: "records", details: "records" };
+const TAB_ICONS = { overview: "target", delivery: "package", runtime: "pulse", records: "history" };
 const SESSION_GROUPS = ["active", "waiting", "background", "quiet", "diagnostic", "stopped", "unknown", "idle"];
 
 export function renderTaskDetail(container, data, t, locale, ctx) {
@@ -20,6 +24,7 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
   const task = data.task;
   const core = data.core;
   container.dataset.taskId = task.id;
+  data.viewState.coreKey = core.coreCursor;
   const page = h("div.page.task-page");
 
   // --- Header ----------------------------------------------------------------
@@ -48,10 +53,12 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
     (task.projectBindings || []).length ? h("span.meta-item", null, icon("layers", "icon-sm"),
       task.projectBindings.map(function (binding) { return binding.projectId; }).join(", ")) : null);
 
+  // Tab counts are current totals from the same bounded read, not samples:
+  // open questions, open work items and open execution records.
   const counts = {
-    work: entriesOf(core, "work-item").length,
-    execution: entriesOf(core, "run").length,
-    history: entriesOf(core, "task-decision").length + entriesOf(core, "task-milestone").length + entriesOf(core, "task-message").length
+    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", {
@@ -63,7 +70,7 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
       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", null, String(counts[tab])) : null);
+    counts[tab] ? h("span.count" + (tab === "overview" ? ".tone-warn" : ""), null, String(counts[tab])) : null);
   }));
   tabs.addEventListener("keydown", function (event) {
     if (event.key !== "ArrowRight" && event.key !== "ArrowLeft") return;
@@ -87,29 +94,38 @@ export function renderTaskDetail(container, data, t, locale, ctx) {
     page.append(panels[tab]);
   });
   renderOverviewPanel(panels.overview, data, t, locale, ctx);
-  renderWork(panels.work, data, t, locale, ctx);
-  renderExecution(panels.execution, data, t, locale, ctx);
-  renderHistory(panels.history, data, t, locale, ctx);
-  renderDetails(panels.details, data, t, locale, ctx);
+  renderDelivery(panels.delivery, data, t, locale, ctx);
+  renderRuntime(panels.runtime, data, t, locale, ctx);
+  renderRecords(panels.records, data, t, locale, ctx);
   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; });
+  container.querySelectorAll(".tab-panel").forEach(function (panel) {
+    panel.hidden = panel.id !== "panel-" + tab;
+    if (!panel.hidden && panel.onShow) panel.onShow();
+  });
 }
 
+// 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.
 function renderOverviewPanel(panel, data, t, locale, ctx) {
   const task = data.task;
   const core = data.core;
-  // Now: the derived execution status (observation) plus the open questions.
+  // 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("div", { dataset: { slot: "now" } }));
+  now.body.append(h("div", { dataset: { slot: "now" } }), h("p.next-line", { dataset: { slot: "next" } }));
   panel.append(now);
 
   // Needs you: open InputRequests with their answer controls.
@@ -129,15 +145,28 @@ function renderOverviewPanel(panel, data, t, locale, ctx) {
     panel.append(needs);
   }
 
-  // Independent column stacks, not paired rows: a long progress card must not
-  // push the next row down and leave a gap under the shorter Session card.
-  // Main column: what the Task is and where it stands. Rail: live and decided facts.
-  const sessions = card({ title: t("sessions.title"), icon: "terminal", hint: t("sessions.hint") });
-  sessions.body.append(h("div", { dataset: { slot: "sessions" } }));
-  panel.append(h("div.card-columns", null,
-    h("div.card-column", null, progressCard(data, t, locale, ctx), goalCard(data, t, ctx)),
-    h("div.card-column", null, sessions, decisionsCard(data, t, locale, ctx))));
+  const progress = progressCard(data, t, locale, ctx);
+  const goal = goalCard(data, t, ctx);
+  panel.append(progress);
   if (task.status === "draft") panel.append(planningCard(data, t, locale));
+  panel.append(goal, decisionsCard(data, t, locale, ctx));
+  // The Brief is the Overview's main source; when the bounded read withheld
+  // its value, read it exactly once per digest and redraw both cards.
+  const briefEntry = entriesOf(core, "task-brief")[0];
+  if (briefEntry && briefEntry.omitted) {
+    const view = data.viewState;
+    view.exact = view.exact || {};
+    readExact(briefEntry, task.id, ctx, view.exact).then(function (result) {
+      if (!progress.isConnected) return;
+      const exact = { ...data, briefValue: result.value };
+      progress.replaceWith(progressCard(exact, t, locale, ctx));
+      goal.replaceWith(goalCard(exact, t, ctx));
+    }, function () {});
+  }
+}
+
+function briefOf(data) {
+  return data.briefValue || valuesOf(data.core, "task-brief")[0];
 }
 
 function progressCard(data, t, locale, ctx) {
@@ -148,20 +177,19 @@ function progressCard(data, t, locale, ctx) {
   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 = valuesOf(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")));
-  element.body.append(h("p.next-line", { dataset: { slot: "next" } }));
   return element;
 }
 
 function goalCard(data, t, ctx) {
   const task = data.task;
-  const brief = valuesOf(data.core, "task-brief")[0];
+  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) {
@@ -184,7 +212,8 @@ function goalCard(data, t, ctx) {
 function decisionsCard(data, t, locale, ctx) {
   const entries = entriesOf(data.core, "task-decision");
   const active = entries.filter(function (entry) { return !entry.omitted && entry.value.status === "active"; });
-  const element = card({ title: t("decisions.title"), icon: "check", count: active.length || null, hint: t("decisions.hint") });
+  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,
@@ -192,9 +221,10 @@ function decisionsCard(data, t, locale, ctx) {
       value.rationale ? richText(null, value.rationale, t, { muted: true, threshold: 260 }) : null));
   });
   if (!active.length) element.body.append(emptyState(t("decisions.none")));
-  if (active.length > 3 || data.core.omitted.records || entries.some(function (entry) { return entry.omitted; })) {
-    element.body.append(button(t("decisions.more"), { variant: "link", icon: "chevron", onClick: function () { ctx.onTab("history"); } }));
-  }
+  element.body.append(button(t("decisions.more"), { variant: "link", icon: "chevron", onClick: function () {
+    data.viewState.recordsFilter = "decision";
+    ctx.onTab("records");
+  } }));
   return element;
 }
 
@@ -240,12 +270,7 @@ export function updateObservation(container, data, t, locale, ctx) {
     if (execution && !(execution.next.owner === "none" && execution.next.action === "none")) next.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)));
   }
-  const sessions = container.querySelector('[data-slot="sessions"]');
-  if (sessions && !sessions.contains(document.activeElement)) {
-    const open = sessions.querySelector("details") && sessions.querySelector("details").open;
-    drawSessions(sessions, available ? data.runtime.sessions : null, t, locale);
-    if (open && sessions.querySelector("details")) sessions.querySelector("details").open = true;
-  }
+  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"]');
@@ -257,9 +282,16 @@ export function updateObservation(container, data, t, locale, ctx) {
   });
 }
 
+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 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 }),
@@ -300,34 +332,48 @@ function drawNow(slot, data, execution, t, locale) {
   else slot.append(h("p.now-note", null, inputCount ? t("now.inputs").replace("{count}", String(inputCount)) : t("now.clear")));
 }
 
-function drawSessions(slot, observation, t, locale) {
-  clear(slot);
-  if (!observation) { slot.append(emptyState(t("sessions.unavailable"))); return; }
-  const chips = SESSION_GROUPS.filter(function (group) { return observation.counts[group]; }).map(function (group) {
-    return badge(observation.counts[group] + " " + t("session." + group), tone("session", group), { dot: true });
-  });
-  if (chips.length) slot.append(h("div.chip-row", null, chips));
-  if (!observation.sessions.length) { slot.append(note(t("sessions.none"))); return; }
-  slot.append(h("ul.session-list", null, observation.sessions.map(function (session) {
-    return h("li.session-row", null,
-      h("div.session-row-head", null, dot(tone("session", session.group)), h("strong", null, session.roleName),
-        h("span.faint", null, t("session." + session.group)), h("span.spacer"),
-        h("span.faint.small", null, session.lastActivityAt ? relativeTime(session.lastActivityAt, locale, t) : t("sessions.unobserved"))),
-      h("p.small", null, session.reason),
-      session.waitingReason ? h("p.small", null, t("sessions.waitingFor") + " " + session.waitingReason) : null);
-  })));
-  const facts = disclosure(t("sessions.facts"), "sessions");
-  observation.sessions.forEach(function (session) {
-    facts.body.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(" / "))]
-    ]));
+// 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) {
+    clear(slot);
+    const session = sessions.find(function (item) { return item.roleName === slot.dataset.roleSession; });
+    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));
   });
-  facts.body.append(h("p.faint.small", null, t("sessions.scope") + " " + formatDateTime(observation.readAt, locale)));
-  slot.append(facts);
+  const counts = container.querySelector('[data-slot="session-counts"]');
+  if (counts) {
+    clear(counts);
+    if (observation) SESSION_GROUPS.forEach(function (group) {
+      if (observation.counts[group]) counts.append(badge(observation.counts[group] + " " + t("session." + group), tone("session", group), { dot: true }));
+    });
+  }
+  const facts = container.querySelector('[data-slot="session-facts"]');
+  if (facts) {
+    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)));
+  }
 }
 `;