@zq-silk/yui 2.0.0 → 2.2.0

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

@@ -0,0 +1,118 @@
+export const OVERVIEW_SCRIPT = String.raw `
+// Workspace overview, shown in the center while no Task is selected.
+import { h, icon, clear } from "/assets/js/dom.js";
+import { byNewest, formatDateTime, relativeTime } from "/assets/js/format.js";
+import { card, dot, tone, label, metricTile, emptyState, button, badge, note } from "/assets/js/components.js";
+import { ATTENTION_KINDS } from "/assets/js/sidebar.js";
+
+const SESSION_GROUPS = ["active", "waiting", "background", "quiet", "diagnostic", "stopped", "unknown", "idle"];
+
+export function renderOverview(container, state, t, locale, actions) {
+  clear(container);
+  const counts = state.counts;
+  const page = h("div.page.overview");
+  page.append(h("header.page-head", null,
+    h("div.page-head-main", null,
+      h("p.kicker", null, t("overview.kicker")),
+      h("h1.page-title", null, t("overview.title")),
+      h("p.page-sub", null, counts
+        ? t("overview.sub").replace("{total}", String(counts.total)).replace("{active}", String(counts.active || 0))
+        : t("loading.dashboard"))),
+    h("div.page-head-actions", null,
+      button(t("actions.operator"), { icon: "terminal", variant: "ghost", onClick: actions.openOperator }))));
+
+  page.append(h("div.metric-strip", null,
+    metricTile(t("metrics.inputs"), counts ? counts.openInputs : "—", { tone: counts && counts.openInputs ? "warn" : "" }),
+    metricTile(t("metrics.active"), counts ? counts.active : "—", { tone: "info" }),
+    metricTile(t("metrics.draft"), counts ? counts.draft : "—"),
+    metricTile(t("metrics.completed"), counts ? counts.completed : "—", { tone: "ok" }),
+    metricTile(t("metrics.total"), counts ? counts.total : "—")));
+
+  // Two independent column stacks instead of paired rows: each card keeps its
+  // natural height, so a short card never leaves a gap beside a long one.
+  // Main column: the work path (answer, in progress, recent). Rail: catalog-wide
+  // signals and the explicit Session read.
+  const main = h("div.overview-col.overview-main");
+  const rail = h("div.overview-col.overview-rail");
+  // Open questions: the catalog names the affected Tasks, never the questions.
+  const inbox = card({ title: t("overview.inbox"), icon: "inbox", count: counts ? counts.openInputs : null });
+  const items = state.attention || [];
+  if (!items.length) {
+    inbox.body.append(emptyState(counts && counts.openInputs > 0 ? t("overview.inboxElsewhere") : t("overview.inboxEmpty"), "check"));
+  } else {
+    inbox.body.append(h("div.row-list", null, items.slice(0, 8).map(function (item) {
+      return h("button.list-row", { type: "button", onclick: function () { actions.select(item.taskId); } },
+        dot("warn"), h("span.list-row-title", null, item.taskTitle), h("code.id", null, item.taskId),
+        h("span.list-row-go", null, t("overview.answer"), icon("chevron", "icon-sm")));
+    })));
+  }
+  main.append(inbox);
+
+  const catalog = card({ title: t("overview.catalog"), icon: "pulse", hint: t("overview.catalogHint") });
+  if (state.catalogAttention) {
+    catalog.body.append(h("div.row-list", null, ATTENTION_KINDS.map(function (kind) {
+      const value = state.catalogAttention[kind];
+      if (!value) return null;
+      return h("button.list-row", {
+        type: "button", disabled: value.taskCount === 0,
+        "aria-pressed": String(state.attentionFilter === kind),
+        onclick: function () { actions.filterAttention(kind); }
+      },
+      h("span.list-row-title", null, t("catalog." + kind)),
+      h("span.list-row-count", null, String(value.count)),
+      h("span.faint", null, value.taskCount + " " + t("overview.tasks")));
+    })));
+    catalog.body.append(note(t("overview.signalsHelp")));
+  } else catalog.body.append(emptyState(t("loading.dashboard")));
+  rail.append(catalog);
+
+  const active = (state.tasks || []).filter(function (task) { return task.status === "active"; });
+  const recent = (state.tasks || []).filter(function (task) { return task.status !== "archived"; }).slice().sort(byNewest).slice(0, 8);
+  main.append(taskListCard(t("overview.activeNow"), "pulse", active, t("overview.activeEmpty"), t, locale, actions));
+  main.append(taskListCard(t("overview.recent"), "history", recent, t("sidebar.empty"), t, locale, actions));
+  rail.append(sessionCard(state, t, locale, actions));
+  page.append(h("div.overview-layout", null, main, rail));
+  page.append(h("p.page-foot", null, t("overview.pageScope")));
+  container.append(page);
+}
+
+function taskListCard(title, iconName, tasks, empty, t, locale, actions) {
+  const element = card({ title: title, icon: iconName, count: tasks.length, hint: t("overview.thisPage") });
+  if (!tasks.length) { element.body.append(emptyState(empty)); return element; }
+  element.body.append(h("div.row-list", null, tasks.map(function (task) {
+    return h("button.list-row", { type: "button", title: task.summary || task.title, onclick: function () { actions.select(task.id); } },
+      dot(tone("task", task.status), label(t, "status", task.status)),
+      h("span.list-row-title", null, task.title),
+      task.attention && task.attention.openInputs ? badge(String(task.attention.openInputs), "warn") : null,
+      h("time.faint", { dateTime: task.updatedAt }, relativeTime(task.updatedAt, locale, t)));
+  })));
+  return element;
+}
+
+// Native Session observation is an explicit read of exactly this catalog page.
+function sessionCard(state, t, locale, actions) {
+  const element = card({
+    title: t("overview.sessions"), icon: "terminal", hint: t("overview.sessionsHint"),
+    actions: button(state.sessionOverview ? t("overview.sessionsReread") : t("overview.sessionsRead"), {
+      icon: "eye", variant: "ghost", disabled: state.sessionLoading || !(state.tasks || []).length,
+      onClick: actions.readSessions
+    })
+  });
+  if (state.sessionError) element.body.append(note(state.sessionError, "bad"));
+  const overview = state.sessionOverview;
+  if (!overview) {
+    element.body.append(emptyState(state.sessionLoading ? t("overview.sessionsReading") : t("overview.sessionsNotRead")));
+    return element;
+  }
+  element.body.append(h("p.faint.small", null, t("overview.readAt") + " " + formatDateTime(overview.readAt, locale)));
+  element.body.append(h("div.row-list", null, overview.tasks.map(function (task) {
+    const chips = SESSION_GROUPS.filter(function (group) { return task.counts && task.counts[group]; }).map(function (group) {
+      return badge(task.counts[group] + " " + t("session." + group), tone("session", group), { dot: true });
+    });
+    return h("button.list-row.list-row-wrap", { type: "button", onclick: function () { actions.select(task.taskId); } },
+      h("span.list-row-title", null, task.title), h("code.id", null, task.taskId),
+      h("span.chip-row", null, chips.length ? chips : h("span.faint", null, t("session.noneRecorded"))));
+  })));
+  return element;
+}
+`;

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

@@ -0,0 +1,63 @@
+export const RECORDS_SCRIPT = String.raw `
+// Context record access. Every business fact keeps its Context reference; an
+// expanded value is a current read, never a mutation of the snapshot.
+import { h, icon } from "/assets/js/dom.js";
+import { richText, mono, button, note } from "/assets/js/components.js";
+
+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; });
+}
+
+// A generic, honest card for any record: omitted values say so and can be
+// read by reference; reading never acknowledges or accepts anything.
+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))));
+  if (!entry.omitted && entry.value) {
+    const value = entry.value;
+    const text = value.content || value.summary || value.body || value.objective || value.title || value.leaderSummary;
+    if (text) element.append(richText(null, text, t, { threshold: 360 }));
+    if (entry.ref.store === "task-decision" && value.rationale) element.append(richText(t("record.rationale"), value.rationale, t, { muted: true }));
+    const facts = [value.status, value.roleName].filter(Boolean);
+    if (facts.length) element.append(h("p.faint.small", null, facts.join(" · ")));
+    if (entry.ref.store === "job") element.append(note(t("job." + value.status + ".note", t("job.terminal.note")), value.status === "unknown-needs-attention" ? "warn" : ""));
+  } else {
+    element.append(h("p.faint", null, entry.summary || t("record.omitted")));
+  }
+  element.append(recordReader(entry, taskId, t, actions));
+  return element;
+}
+
+// Shared source access for cards, history and discussion, including records
+// whose compact value is present but does not display every durable field.
+export function recordReader(entry, taskId, t, actions) {
+  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);
+      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(h("pre.code-block", null, JSON.stringify(result.value, null, 2)));
+      if (result.execution) element.append(h("pre.code-block", null, JSON.stringify(result.execution, null, 2)));
+      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/sections.js

@@ -0,0 +1,313 @@
+export const SECTIONS_SCRIPT = String.raw `
+// Task sections behind the Work, Execution, History and Details tabs.
+import { h, icon, clear } from "/assets/js/dom.js";
+import { formatDateTime } from "/assets/js/format.js";
+import {
+  sectionTitle, card, disclosure, emptyState, note, button, statusBadge, label, tone, dot, chip, mono,
+  kv, richText, pagedList, workItemCard, runCard, reviewCard, roleCard, timeTag, observabilityMetricCard
+} from "/assets/js/components.js";
+import { entriesOf, valuesOf, recordCard, recordReader } from "/assets/js/records.js";
+import { renderEvidence } from "/assets/js/evidence.js";
+import { controlForm, titleForm } from "/assets/js/forms.js";
+
+function omittedNote(core, t) {
+  return core.omitted.records ? t("records.notIncluded") : t("records.none");
+}
+
+// --- Work -------------------------------------------------------------------------
+export function renderWork(panel, data, t, locale, ctx) {
+  const core = data.core;
+  const items = entriesOf(core, "work-item");
+  const titles = {};
+  valuesOf(core, "work-item").forEach(function (item) { titles[item.id] = item.title; });
+  const rank = function (entry) { return entry.omitted ? 1 : entry.value.status === "open" ? 0 : 2; };
+  const sorted = items.slice().sort(function (a, b) {
+    return rank(a) - rank(b) || Date.parse((b.value && b.value.updatedAt) || 0) - Date.parse((a.value && a.value.updatedAt) || 0);
+  });
+  const work = h("section.section", { id: "detail-work" }, sectionTitle(t("work.title"), items.length));
+  if (!sorted.length) work.append(emptyState(omittedNote(core, t), "layers"));
+  const list = h("div.stack");
+  sorted.forEach(function (entry) {
+    list.append(entry.omitted ? recordCard(entry, data.task.id, t, ctx) : workItemCard(entry.value, t, locale, titles));
+  });
+  work.append(list);
+  panel.append(work);
+
+  const results = h("section.section", { id: "detail-results" }, sectionTitle(t("evidence.title")));
+  const resultsBody = h("div.card-grid.card-grid-1");
+  renderEvidence(resultsBody, data, t, locale, ctx);
+  results.append(resultsBody);
+  panel.append(results);
+
+  const reviews = entriesOf(core, "review-round");
+  const reviewSection = h("section.section", { id: "detail-reviews" }, sectionTitle(t("reviews.title"), reviews.length));
+  if (!reviews.length) reviewSection.append(emptyState(omittedNote(core, t)));
+  else {
+    reviewSection.append(note(t("reviews.hint")));
+    const reviewList = h("div.stack");
+    reviews.forEach(function (entry) {
+      reviewList.append(entry.omitted ? recordCard(entry, data.task.id, t, ctx) : reviewCard(entry.value, t, locale));
+    });
+    reviewSection.append(reviewList);
+  }
+  panel.append(reviewSection);
+}
+
+// --- Execution --------------------------------------------------------------------
+export function renderExecution(panel, data, t, locale, ctx) {
+  const core = data.core;
+  const task = data.task;
+  const runtimeRoles = (data.runtime && data.runtime.roles) || [];
+  const runs = valuesOf(core, "run");
+
+  const roleEntries = entriesOf(core, "role");
+  const roles = h("section.section", { id: "detail-roles" }, sectionTitle(t("roles.title"), roleEntries.length));
+  const roleGrid = h("div.role-grid");
+  roleEntries.forEach(function (entry) {
+    if (entry.omitted) { roleGrid.append(recordCard(entry, task.id, t, ctx)); return; }
+    const role = entry.value;
+    const active = runs.find(function (run) { return run.roleName === role.name && run.status === "active"; });
+    const runtimeRole = runtimeRoles.find(function (item) { return item.name === role.name; });
+    const element = roleCard(role, t, locale, {
+      runtimeRole: runtimeRole,
+      retry: entry.providerRetry,
+      launchDrift: active && active.effective && active.effective.sourceDesiredRevision !== role.launchRevision,
+      onOpen: task.status === "archived" ? null : ctx.openSession
+    });
+    const statusSlot = h("span", { dataset: { roleStatus: role.name } });
+    element.querySelector(".role-head").append(statusSlot);
+    if (!active) element.append(h("p.faint.small", null, t("roles.noActiveRun")));
+    roleGrid.append(element);
+  });
+  if (!roleEntries.length) roleGrid.append(emptyState(omittedNote(core, t)));
+  roles.append(roleGrid);
+  panel.append(roles);
+
+  const redirect = disclosure(t("control.title"), "control", { className: "card-disclosure", meta: t("control.meta") });
+  redirect.body.append(note(t("control.help")), controlForm(task, t, ctx, roleEntries.map(function (entry) { return entry.ref.refId; })));
+  panel.append(h("section.section", { id: "detail-control" }, redirect));
+
+  const runEntries = entriesOf(core, "run");
+  const runSection = h("section.section", { id: "detail-exec" });
+  const filters = ["all", "active", "completed", "failed"];
+  let filter = "all";
+  const filterRow = h("div.chip-tabs", { role: "group", "aria-label": t("runs.filter") });
+  const list = h("div.stack");
+  function draw() {
+    clear(list);
+    const visible = runEntries.filter(function (entry) { return filter === "all" || (!entry.omitted && entry.value.status === filter); });
+    if (!visible.length) { list.append(emptyState(omittedNote(core, t), "pulse")); return; }
+    pagedList(list, visible, 12, function (entry) {
+      return entry.omitted ? recordCard(entry, task.id, t, ctx) : runCard({ ...entry.value, execution: entry.execution }, t, locale);
+    }, t);
+  }
+  filters.forEach(function (status) {
+    const count = status === "all" ? runEntries.length : runs.filter(function (run) { return run.status === status; }).length;
+    if (status !== "all" && !count) return;
+    filterRow.append(h("button.chip-tab", {
+      type: "button", "aria-pressed": String(status === filter), dataset: { status },
+      onclick: function () {
+        filter = status;
+        filterRow.querySelectorAll(".chip-tab").forEach(function (b) { b.setAttribute("aria-pressed", String(b.dataset.status === status)); });
+        draw();
+      }
+    }, status === "all" ? t("filter.all") : label(t, "run", status), h("span.count", null, String(count))));
+  });
+  runSection.append(sectionTitle(t("runs.title"), runEntries.length), note(t("runs.hint")), filterRow, list);
+  draw();
+  panel.append(runSection);
+
+  const jobs = entriesOf(core, "job");
+  const jobSection = h("section.section", { id: "detail-operations" }, sectionTitle(t("jobs.title"), jobs.length));
+  if (!jobs.length) jobSection.append(emptyState(omittedNote(core, t)));
+  else {
+    jobSection.append(note(t("jobs.hint")));
+    const jobList = h("div.stack");
+    jobs.forEach(function (entry) {
+      if (entry.omitted) { jobList.append(recordCard(entry, task.id, t, ctx)); return; }
+      const job = entry.value;
+      jobList.append(h("article.record", null,
+        h("header.record-head", null, dot(tone("job", job.status)), mono(task.id + "/" + job.id), h("span.spacer"),
+          statusBadge(t, "job", "job", job.status)),
+        h("p.small", null, t("job." + job.status + ".note", t("job.terminal.note"))),
+        h("p.faint.small", null, (job.steps || []).map(function (step) { return step.name; }).join(" → ")),
+        timeTag(job.terminalAt || job.startedAt || job.createdAt, locale, t)));
+    });
+    jobSection.append(jobList);
+  }
+  panel.append(jobSection);
+
+  const usage = h("section.section", { id: "detail-usage" }, sectionTitle(t("usage.title")));
+  const usageBody = h("div", { dataset: { slot: "usage" } });
+  const metrics = data.runtime && observabilityMetricCard(data.runtime.observability, t);
+  usageBody.append(metrics || emptyState(t("usage.unavailable")));
+  usage.append(usageBody);
+  panel.append(usage);
+
+  const observations = disclosure(t("observation.title"), "execution", { className: "card-disclosure" });
+  observations.body.append(note(t("observation.help")));
+  (core.observations || []).forEach(function (observation) {
+    observations.body.append(h("p.small.mono-line", null,
+      observation.source + " · " + observation.status + " · " + observation.coverage + " · " + observation.observedAt));
+  });
+  observations.body.append(h("p.faint.small", { dataset: { slot: "runtime-status" } }), h("pre.code-block", { dataset: { slot: "runtime-raw" } }));
+  panel.append(h("section.section", null, observations));
+}
+
+// --- History ----------------------------------------------------------------------
+export function renderHistory(panel, data, t, locale, ctx) {
+  const core = data.core;
+  const task = data.task;
+  const events = [];
+  entriesOf(core, "task-decision").forEach(function (entry) { events.push({ kind: "decision", entry }); });
+  entriesOf(core, "task-milestone").forEach(function (entry) { events.push({ kind: "milestone", entry }); });
+  entriesOf(core, "task-message").forEach(function (entry) { events.push({ kind: "message", entry }); });
+  const at = function (event) {
+    const value = event.entry.value || {};
+    return Date.parse(value.createdAt || value.updatedAt || 0) || 0;
+  };
+  events.sort(function (a, b) { return at(b) - at(a); });
+  const section = h("section.section", { id: "detail-history" }, sectionTitle(t("history.title"), events.length));
+  const kinds = ["all", "decision", "milestone", "message"];
+  let kind = "all";
+  const filterRow = h("div.chip-tabs", { role: "group", "aria-label": t("history.filter") });
+  const list = h("ol.timeline");
+  function draw() {
+    clear(list);
+    const visible = events.filter(function (event) { return kind === "all" || event.kind === kind; });
+    if (!visible.length) { list.append(h("li.timeline-empty", null, emptyState(omittedNote(core, t), "history"))); return; }
+    pagedList(list, visible, 20, function (event) { return timelineItem(event, task.id, t, locale, ctx); }, t);
+  }
+  kinds.forEach(function (value) {
+    const count = value === "all" ? events.length : events.filter(function (event) { return event.kind === value; }).length;
+    filterRow.append(h("button.chip-tab", {
+      type: "button", "aria-pressed": String(value === kind), dataset: { kind: value },
+      onclick: function () {
+        kind = value;
+        filterRow.querySelectorAll(".chip-tab").forEach(function (b) { b.setAttribute("aria-pressed", String(b.dataset.kind === value)); });
+        draw();
+      }
+    }, t("history." + value), h("span.count", null, String(count))));
+  });
+  section.append(filterRow, list);
+  if (core.omitted.records) section.append(note(t("history.omitted")));
+  draw();
+  panel.append(section);
+}
+
+function timelineItem(event, taskId, t, locale, ctx) {
+  const entry = event.entry;
+  const item = h("li.timeline-item.kind-" + event.kind);
+  item.append(h("span.timeline-mark", { "aria-hidden": "true" }, icon(event.kind === "decision" ? "check" : event.kind === "milestone" ? "flag" : "chat", "icon-sm")));
+  if (entry.omitted) { item.append(recordCard(entry, taskId, t, ctx, { compact: true })); return item; }
+  const value = entry.value;
+  const body = h("div.timeline-body");
+  if (event.kind === "message") {
+    const author = (value.author && value.author.roleName) || label(t, "author", (value.author && value.author.type) || "system");
+    body.append(h("header.timeline-head", null, h("strong", null, author),
+      value.kind ? chip(label(t, "messageKind", value.kind)) : null,
+      value.intent ? chip(label(t, "intent", value.intent)) : null,
+      h("span.spacer"), timeTag(value.createdAt, locale, t)));
+    body.append(richText(null, value.body || "", t, { threshold: 480 }));
+    if (value.resultRef) body.append(h("p.faint.small", null, t("history.resultOf") + " ", mono(value.resultRef.runId)));
+  } else if (event.kind === "decision") {
+    body.append(h("header.timeline-head", null, h("strong", null, value.title),
+      value.status ? statusBadge(t, "decision", "decision", value.status) : null, h("span.spacer"), timeTag(value.createdAt, locale, t)));
+    if (value.rationale) body.append(richText(null, value.rationale, t, { muted: true }));
+    if (value.supersededReason) body.append(richText(t("history.superseded"), value.supersededReason, t, { muted: true }));
+  } else {
+    body.append(h("header.timeline-head", null, h("strong", null, value.title), h("span.spacer"), timeTag(value.createdAt, locale, t)));
+    if (value.summary) body.append(richText(null, value.summary, t, { muted: true }));
+  }
+  body.append(h("p.faint.small", null, mono(entry.ref.refId)));
+  body.append(recordReader(entry, taskId, t, ctx));
+  item.append(body);
+  return item;
+}
+
+// --- Details ----------------------------------------------------------------------
+export function renderDetails(panel, data, t, locale, ctx) {
+  const task = data.task;
+  const core = data.core;
+  const facts = card({ title: t("details.facts"), icon: "file" });
+  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]
+  ]));
+  const edit = card({ title: t("details.title"), icon: "sparkle" });
+  edit.body.append(titleForm(task, t, ctx));
+  const grid = h("div.card-grid");
+  grid.append(facts, edit);
+  panel.append(h("section.section", { id: "detail-facts" }, grid));
+
+  const context = disclosure(t("details.context"), "context", { className: "card-disclosure" });
+  context.body.append(h("pre.code-block", null, JSON.stringify({
+    coreCursor: core.coreCursor, throughCursor: core.throughCursor, count: core.count, omitted: core.omitted
+  }, null, 2)), note(t("details.contextHelp")));
+  panel.append(h("section.section", null, context));
+
+  const panels = disclosure(t("panels.title"), "panels", { className: "card-disclosure" });
+  let loading = false;
+  panels.addEventListener("toggle", async function () {
+    if (!panels.open || loading) return;
+    loading = true;
+    clear(panels.body);
+    panels.body.append(h("p.faint", null, t("panels.reading")));
+    try {
+      const current = await ctx.panels(task.id);
+      clear(panels.body);
+      panels.body.append(h("p.faint.small", null, t("panels.observed") + " " + formatDateTime(current.observedAt, locale)));
+      if (!current.panels.length) panels.body.append(emptyState(t("panels.none")));
+      current.panels.forEach(function (item) { panels.body.append(panelCard(item, task, t, ctx)); });
+    } catch (error) {
+      clear(panels.body);
+      panels.body.append(note(t("panels.unavailable") + " " + error.message, "bad"));
+    } finally { loading = false; }
+  });
+  panel.append(h("section.section", null, panels));
+}
+
+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") {
+    try {
+      const url = new URL(panel.href);
+      if (["http:", "https:"].includes(url.protocol) && !url.username && !url.password) {
+        element.append(h("a.link", { href: url.href, rel: "noopener noreferrer", target: "_blank" }, panel.title));
+      }
+    } catch {}
+  } else if (panel.kind === "data" && panel.renderer === "json") {
+    const input = h("textarea.mono", { rows: 3 });
+    input.value = JSON.stringify({ taskId: task.id });
+    const schema = disclosure(t("panels.schema"), null);
+    schema.body.append(h("pre.code-block", null, JSON.stringify(item.inputSchema, null, 2)));
+    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; }
+    });
+    element.append(h("label.field", null, h("span", null, t("panels.input")), input), schema, h("div.form-actions", null, read), output);
+  }
+  return element;
+}
+`;

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

@@ -0,0 +1,146 @@
+export const SIDEBAR_SCRIPT = String.raw `
+// Task index: attention shortcuts, status tabs and the grouped task list.
+import { h, icon, clear } from "/assets/js/dom.js";
+import { relativeTime } from "/assets/js/format.js";
+import { dot, tone, label } from "/assets/js/components.js";
+
+export const STATUS_FILTERS = ["all", "active", "draft", "completed", "cancelled", "archived"];
+export const ATTENTION_KINDS = ["openInputs", "unknownOperations", "pendingOperations", "executionSignals"];
+const ATTENTION_ICON = { openInputs: "inbox", unknownOperations: "alert", pendingOperations: "clock", executionSignals: "pulse" };
+const ATTENTION_TONE = { openInputs: "warn", unknownOperations: "bad", pendingOperations: "info", executionSignals: "idle" };
+
+export function renderAttentionBar(container, state, t, onPick) {
+  clear(container);
+  const attention = state.catalogAttention;
+  if (!attention) return;
+  const kinds = ATTENTION_KINDS.filter(function (kind) { return attention[kind] && attention[kind].taskCount > 0; });
+  if (!kinds.length) {
+    container.append(h("p.attention-clear", null, icon("check", "icon-sm"), t("sidebar.allClear")));
+    return;
+  }
+  container.append(h("div.attention-list", null, kinds.map(function (kind) {
+    const value = attention[kind];
+    return h("button.attention-pill.tone-" + ATTENTION_TONE[kind], {
+      type: "button",
+      "aria-pressed": String(state.attentionFilter === kind),
+      title: t("catalog.help." + kind),
+      onclick: function () { onPick(state.attentionFilter === kind ? null : kind); }
+    }, icon(ATTENTION_ICON[kind], "icon-sm"), h("span", null, t("catalog." + kind)), h("b", null, String(value.count)));
+  })));
+}
+
+// The tab row is created once and updated in place so its horizontal scroll
+// position survives every refresh. When the sidebar is too narrow for every
+// tab, the clipped edge fades out, the wheel scrolls the row sideways and a
+// newly selected tab is scrolled into view.
+function syncTabsOverflow(row) {
+  const max = row.scrollWidth - row.clientWidth;
+  const before = row.scrollLeft > 1;
+  const after = row.scrollLeft < max - 1;
+  row.dataset.fade = before && after ? "both" : after ? "end" : before ? "start" : "none";
+}
+
+function revealTab(row, tab) {
+  const margin = 28;
+  const left = tab.offsetLeft - margin;
+  const right = tab.offsetLeft + tab.offsetWidth + margin;
+  if (left < row.scrollLeft) row.scrollLeft = Math.max(0, left);
+  else if (right > row.scrollLeft + row.clientWidth) row.scrollLeft = right - row.clientWidth;
+}
+
+export function renderFilters(container, state, t, onFilter) {
+  const counts = state.counts || {};
+  let row = container.querySelector(":scope > .tabs-row");
+  if (!row) {
+    row = h("div.tabs-row");
+    STATUS_FILTERS.forEach(function (status) {
+      row.append(h("button.status-tab", { type: "button", dataset: { status }, onclick: function () { onFilter(status); } },
+        h("span.status-tab-label"), h("span.status-tab-count")));
+    });
+    container.append(row);
+    row.addEventListener("scroll", function () { syncTabsOverflow(row); }, { passive: true });
+    row.addEventListener("wheel", function (event) {
+      if (Math.abs(event.deltaY) <= Math.abs(event.deltaX) || row.scrollWidth <= row.clientWidth) return;
+      event.preventDefault();
+      row.scrollLeft += event.deltaY;
+    }, { passive: false });
+    new ResizeObserver(function () { syncTabsOverflow(row); }).observe(row);
+  }
+  STATUS_FILTERS.forEach(function (status) {
+    const tab = row.querySelector('[data-status="' + status + '"]');
+    tab.setAttribute("aria-pressed", String(state.filter === status));
+    tab.querySelector(".status-tab-label").textContent = status === "all"
+      ? t(state.catalogAll ? "filter.everything" : "filter.unarchived") : label(t, "status", status);
+    const count = status === "all"
+      ? (counts.total === undefined ? undefined : counts.total - (state.catalogAll ? 0 : counts.archived || 0))
+      : counts[status];
+    const badge = tab.querySelector(".status-tab-count");
+    const hide = count === undefined || count === null
+      || (status === "archived" && state.catalogScope && state.catalogScope.archived === "excluded");
+    badge.hidden = hide;
+    if (!hide) badge.textContent = String(count);
+  });
+  if (row.dataset.selected !== state.filter) {
+    row.dataset.selected = state.filter;
+    revealTab(row, row.querySelector('[data-status="' + state.filter + '"]'));
+  }
+  syncTabsOverflow(row);
+}
+
+function groupOf(task) {
+  const attention = task.attention || {};
+  if (attention.openInputs > 0 || attention.unknownOperations > 0) return "attention";
+  if (task.status === "completed") return "completed";
+  return task.status;
+}
+
+const GROUP_ORDER = ["attention", "active", "draft", "completed", "cancelled", "archived"];
+
+export function renderTasks(container, state, t, locale, onSelect) {
+  clear(container);
+  const groups = {};
+  (state.tasks || []).forEach(function (task) {
+    if (state.filter === "all" && !state.catalogAll && task.status === "archived") return;
+    if (state.filter !== "all" && task.status !== state.filter) return;
+    const group = groupOf(task);
+    (groups[group] = groups[group] || []).push(task);
+  });
+  const present = GROUP_ORDER.filter(function (group) { return groups[group] && groups[group].length; });
+  if (!present.length) {
+    container.append(h("div.list-empty", null, icon("search"), h("p", null, t(state.query || state.attentionFilter ? "sidebar.noMatch" : "sidebar.empty"))));
+    return;
+  }
+  present.forEach(function (group) {
+    container.append(h("section.task-group", null,
+      h("h3.task-group-head", null, h("span", null, t("group." + group)), h("span.count", null, String(groups[group].length))),
+      groups[group].map(function (task) { return taskRow(task, state, t, locale, onSelect); })));
+  });
+}
+
+function taskRow(task, state, t, locale, onSelect) {
+  const attention = task.attention || {};
+  const counts = task.counts || {};
+  const signals = h("span.task-signals");
+  if (attention.openInputs > 0) signals.append(signal("inbox", attention.openInputs, "warn", t("catalog.openInputs")));
+  if (attention.unknownOperations > 0) signals.append(signal("alert", attention.unknownOperations, "bad", t("catalog.unknownOperations")));
+  if (counts.activeRuns > 0) signals.append(signal("pulse", counts.activeRuns, "info", t("sidebar.activeRuns")));
+  const row = h("button.task-row", {
+    type: "button",
+    dataset: { id: task.id },
+    "aria-current": String(state.selected === task.id),
+    title: task.summary || task.title,
+    onclick: function () { onSelect(task.id); }
+  },
+  dot(tone("task", task.status), label(t, "status", task.status)),
+  h("span.task-body", null,
+    h("span.task-line", null, h("span.task-name", null, task.title), h("time.task-time", { dateTime: task.updatedAt }, relativeTime(task.updatedAt, locale, t))),
+    h("span.task-line.task-sub", null, h("code.task-id", null, task.id),
+      counts.workItems > 0 ? h("span.task-count", { title: t("sidebar.workItems") }, icon("layers", "icon-sm"), String(counts.workItems)) : null,
+      signals)));
+  return row;
+}
+
+function signal(iconName, count, toneName, title) {
+  return h("span.signal.tone-" + toneName, { title: title }, icon(iconName, "icon-sm"), String(count));
+}
+`;