@zq-silk/yui 2.3.0 → 2.4.0

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

@@ -0,0 +1,326 @@
+export const SETTINGS_SCRIPT = String.raw `
+import { h } from "/assets/js/lib/dom.js";
+import { requestJson, submitMutation } from "/assets/js/lib/api.js";
+import { createI18n } from "/assets/js/lib/i18n.js";
+import { createThemeController } from "/assets/js/lib/theme.js";
+import { clearPreference, readSessionAccessMode, writeSessionAccessMode } from "/assets/js/lib/prefs.js";
+import { mountSkills } from "/assets/js/views/skills.js";
+
+const $ = selector => document.querySelector(selector);
+const i18n = createI18n($("#locale-select"));
+const t = i18n.t;
+mountSkills($("#skill-browser"), t);
+const theme = createThemeController($("#theme-options"), t);
+i18n.subscribe(() => theme.render());
+const access = $("#access-mode");
+access.value = readSessionAccessMode();
+access.addEventListener("change", () => {
+  $("#browser-receipt").textContent = writeSessionAccessMode(access.value) ? t("settings.browserSaved") : t("settings.storageFailed");
+});
+$("#reset-layout").addEventListener("click", () => {
+  const keys = ["yui.sidebar.width", "yui.dock.width", "yui.dock.side", "yui.dock.open"];
+  const results = keys.map(clearPreference);
+  $("#browser-receipt").textContent = results.every(Boolean) ? t("settings.layoutReset") : t("settings.storageFailed");
+});
+
+const container = $("#settings-groups");
+const status = $("#settings-status");
+const search = $("#settings-search");
+const groups = [];
+let searchGeneration = 0;
+let searchTimer;
+const more = h("button.btn", { type: "button", hidden: true }, t("settings.more"));
+container.after(more);
+window.addEventListener("beforeunload", event => {
+  if (!groups.some(g => g.dirty)) return;
+  event.preventDefault(); event.returnValue = "";
+});
+
+function format(value) { return typeof value === "string" ? value : JSON.stringify(value, null, 2); }
+function inputValue(field, control) {
+  if (field.kind === "json") return JSON.parse(control.value);
+  if (field.kind === "number") {
+    if (!control.value.trim() || !Number.isFinite(Number(control.value))) throw new Error(t("settings.invalidNumber"));
+    return Number(control.value);
+  }
+  if (field.kind === "boolean") return control.value === "true";
+  return control.value;
+}
+
+function editor(field, group, state) {
+  const labelText = t("settings.field." + field.key, field.label);
+  const label = h("label.field", null, h("span", null, labelText));
+  let control;
+  if (field.kind === "boolean" || field.choices && field.choices.length) {
+    const values = field.kind === "boolean" ? ["true", "false"] : field.choices;
+    control = h("select", null, values.map(v => h("option", { value: v }, v || t("settings.inherit"))));
+    if (!values.includes(String(field.value ?? ""))) control.append(h("option", { value: String(field.value ?? "") }, String(field.value ?? "")));
+  } else control = h(field.kind === "json" || field.kind === "multiline" ? "textarea" : "input", {
+    ...(field.kind === "number" ? { type: "number", step: "any" } : {}),
+    ...(field.kind === "json" || field.kind === "multiline" ? { rows: 4 } : {})
+  });
+  const initial = field.kind === "json" ? JSON.stringify(field.value, null, 2) : String(field.value ?? "");
+  control.value = initial;
+  label.append(control);
+  const reset = h("input", { type: "checkbox" });
+  const row = h("div.settings-field", { dataset: { field: field.key } }, label,
+    field.summary ? h("p", null, field.summary) : null,
+    h("small", null, t("settings.current") + ": " + (field.value === "" ? t("settings.inherit") : format(field.value)) +
+      (field.source ? " · " + t("settings.source." + field.source, field.source) : "") +
+      (Object.hasOwn(field, "defaultValue") ? " · " + t("settings.default") + ": " + format(field.defaultValue) : "")),
+    field.takesEffect ? h("small", null, field.takesEffect) : null,
+    field.reset ? h("label.settings-reset", null, reset, t("settings.reset")) : null);
+  let unavailable = false;
+  function mark() {
+    control.disabled = reset.checked || unavailable;
+    state.dirty = state.editors.some(e => e.changed());
+    state.save.disabled = !state.dirty || state.pending || state.capabilityPending || state.unknown;
+    if (!state.unknown && !state.pending) state.receipt.textContent = state.dirty ? t("settings.unsaved") : "";
+  }
+  function listen() {
+    control.addEventListener("input", mark);
+    control.addEventListener("change", () => { mark(); item.onChange?.(); });
+  }
+  reset.addEventListener("change", mark);
+  const hint = h("small");
+  const choiceActions = h("div.settings-actions");
+  row.append(choiceActions, hint);
+  const item = { row, get control() { return control; }, field,
+    get value() { return reset.checked ? "" : control.value; },
+    get blocked() { return unavailable && !reset.checked && control.value !== "" && control.value !== initial; },
+    changed: () => reset.checked || control.value !== initial,
+    change: () => reset.checked || (["model", "effort"].includes(field.key) && field.reset && control.value === "")
+      ? { key: field.key, reset: true } : { key: field.key, value: inputValue(field, control) },
+    setChoices(choices, options = {}) {
+      const value = control.value;
+      unavailable = options.available === false || (!choices.length && options.allowCustom === false);
+      const values = choices.map(c => c.value);
+      const selected = h("select", null, h("option", { value: "" }, t("settings.inherit")),
+        choices.map(c => h("option", { value: c.value }, c.label)));
+      if (value && !values.includes(value)) selected.append(h("option", { value }, value + " · " + t("settings.notListed")));
+      control = choices.length ? selected : h("input");
+      control.value = value;
+      control.disabled = reset.checked || unavailable;
+      listen();
+      label.replaceChildren(h("span", null, labelText), control);
+      choiceActions.replaceChildren();
+      if (choices.length && options.allowCustom && !unavailable) {
+        const custom = h("button.btn", { type: "button" }, t("settings.custom"));
+        custom.addEventListener("click", () => {
+          const value = control.value;
+          control = h("input", { value });
+          control.disabled = reset.checked;
+          listen(); label.replaceChildren(h("span", null, labelText), control); choiceActions.replaceChildren();
+          control.focus();
+        });
+        choiceActions.append(custom);
+      }
+      hint.textContent = (options.reason || "") +
+        (value && !values.includes(value) ? " " + t("settings.notListedHelp") : "");
+    }
+  };
+  reset.addEventListener("change", () => item.onChange?.());
+  listen();
+  return item;
+}
+
+function applyCapabilities(state, result) {
+  const catalog = result.catalog;
+  const model = state.editors.find(e => e.field.key === "model");
+  const effort = state.editors.find(e => e.field.key === "effort");
+  if (!model) return;
+  const modelField = catalog.fields.find(f => f.key === "model");
+  model.setChoices(catalog.models, modelField || { allowCustom: true });
+  function updateEffort() {
+    if (!effort) return;
+    const selected = !model.value ? catalog.models.find(m => m.isDefault)
+      : catalog.models.find(m => m.value === model.value)
+        || catalog.models.find(m => m.resolvedModel === model.value && !m.isDefault)
+        || catalog.models.find(m => m.resolvedModel === model.value);
+    const field = catalog.fields.find(f => f.key === "effort");
+    const choices = selected?.efforts.length ? selected.efforts : field?.choices || [];
+    effort.setChoices(choices, {
+      allowCustom: !choices.length && field?.allowCustom !== false,
+      available: choices.length ? true : field?.available,
+      reason: selected?.defaultEffort ? t("settings.nativeEffort") + ": " + selected.defaultEffort : field?.reason
+    });
+  }
+  model.onChange = updateEffort;
+  updateEffort();
+}
+
+function renderGroup(state, group) {
+  const generation = state.renderGeneration = (state.renderGeneration || 0) + 1;
+  state.group = group; state.editors = []; state.dirty = false; state.unknown = false;
+  state.capabilityPending = false;
+  const form = h("form.settings-stack");
+  const receipt = h("p.settings-receipt", { role: "status", "aria-live": "polite" });
+  const save = h("button.btn.btn-primary", { type: "submit", disabled: true }, t("settings.save"));
+  state.save = save; state.receipt = receipt;
+  form.append(h("p", null, group.notice));
+  const isRole = group.id.startsWith("role/");
+  if (isRole) form.append(h("p", null, "Agent: " + group.agentId + " · " + t("settings.roleScope")));
+  const advanced = h("details", { open: !!search.value.trim() }, h("summary", null, t("settings.advancedFields")));
+  const common = h("div.settings-grid");
+  group.fields.forEach(field => {
+    const item = editor(field, group, state);
+    state.editors.push(item);
+    if (isRole) (["model", "effort"].includes(field.key) ? common : advanced).append(item.row);
+    else form.append(item.row);
+  });
+  if (isRole) form.append(common, advanced);
+  const acknowledge = h("input", { type: "checkbox" });
+  if (group.id.startsWith("role/") || group.id.startsWith("agent/")) form.append(h("label.settings-reset", null,
+    acknowledge, t("settings.acknowledge")));
+  const compare = h("button.btn", { type: "button" }, t("settings.compare"));
+  compare.addEventListener("click", async () => {
+    compare.disabled = true;
+    try {
+      const current = await requestJson("/api/settings/group?" + new URLSearchParams({ id: group.id }));
+      const values = h("div.settings-observation", null,
+        h("p", null, current.notice),
+        current.fields.map(field => h("p", null,
+          t("settings.field." + field.key, field.label) + ": " +
+          (field.value === "" ? t("settings.inherit") : format(field.value)) +
+          (field.source ? " · " + t("settings.source." + field.source, field.source) : ""))));
+      const agentChanged = current.agentId !== group.agentId;
+      if (agentChanged) values.append(h("p.settings-error", null, t("settings.agentChanged")));
+      const adopt = h("button.btn", { type: "button", disabled: state.unknown || agentChanged }, t("settings.useBaseline"));
+      adopt.addEventListener("click", () => {
+        state.group = current;
+        receipt.textContent = t("settings.baselineChanged");
+        values.remove(); adopt.remove();
+      });
+      state.content.append(values, adopt);
+    } catch (error) { receipt.textContent = error.message; }
+    finally { compare.disabled = false; }
+  });
+  form.append(h("div.settings-actions", null, save, compare), receipt);
+  form.addEventListener("submit", async event => {
+    event.preventDefault();
+    if (state.pending || state.capabilityPending || state.unknown) return;
+    let changes;
+    if (state.editors.some(e => e.blocked)) {
+      receipt.textContent = t("settings.unsupportedDraft"); return;
+    }
+    try { changes = state.editors.filter(e => e.changed()).map(e => e.change()); }
+    catch (error) { receipt.textContent = error.message; receipt.classList.add("settings-error"); return; }
+    if (!changes.length) return;
+    state.pending = true; save.disabled = true;
+    // Keep controls frozen during one submission. Failed saves keep all drafts.
+    const controls = [...form.querySelectorAll("input,select,textarea,button")];
+    const disabled = controls.map(c => c.disabled);
+    controls.forEach(c => { c.disabled = true; });
+    try {
+      const result = await submitMutation("settings/" + group.id, "/api/settings/group", {
+        id: group.id, revision: state.group.revision, changes, acknowledgeLive: acknowledge.checked
+      });
+      renderGroup(state, result.group);
+      state.receipt.textContent = t("settings.saved") + "\n" + result.output + "\n" + result.adoption + "\n" + result.refresh;
+    } catch (error) {
+      state.unknown = error.disposition !== "not-submitted";
+      receipt.textContent = error.message + "\n" + (state.unknown ? t("settings.unknown") : t("settings.draftKept"));
+      receipt.classList.add("settings-error");
+      controls.forEach((c, i) => { c.disabled = disabled[i]; });
+    } finally {
+      state.pending = false;
+      state.save.disabled = !state.dirty || state.unknown;
+    }
+  });
+  if (group.observation) form.append(h("details", null, h("summary", null, t("settings.observation")),
+    h("pre.settings-observation", null, JSON.stringify(group.observation, null, 2))));
+  if (group.agentId) {
+    const info = h("p", { role: "status" }, t("settings.notQueried"));
+    const query = h("button.btn", { type: "button" }, t("settings.queryCapabilities"));
+    const refresh = h("button.btn", { type: "button" }, t("settings.refreshCapabilities"));
+    const output = h("div");
+    async function load(force) {
+      if (state.pending || state.capabilityPending) return;
+      if (state.editors.some(e => e.field.key === "activeAgentId" && e.changed())) {
+        info.textContent = t("settings.saveAgentFirst"); return;
+      }
+      state.capabilityPending = true; save.disabled = true;
+      query.disabled = refresh.disabled = true; info.textContent = t("settings.querying");
+      try {
+        const result = await requestJson("/api/settings/capabilities?" + new URLSearchParams({ id: group.id, refresh: String(force) }));
+        if (state.renderGeneration !== generation) return;
+        if (state.pending) { info.textContent = t("settings.notQueried"); return; }
+        if (result.catalog.agentId !== group.agentId) {
+          info.textContent = t("settings.agentChanged"); return;
+        }
+        if (state.editors.some(e => e.field.key === "activeAgentId" && e.changed())) {
+          info.textContent = t("settings.saveAgentFirst"); return;
+        }
+        info.textContent = t("settings.capability." + result.source, result.source) + " · " + (result.fetchedAt || result.attemptedAt) +
+          (result.failure ? " · " + result.failure.code + ": " + result.failure.message : "");
+        applyCapabilities(state, result);
+        output.replaceChildren(
+          ...result.catalog.warnings.map(w => h("p", null, w)),
+          h("details", null, h("summary", null, t("settings.capabilityDetails")),
+            h("pre.settings-observation", null, JSON.stringify(result.catalog, null, 2))));
+      } catch (error) { info.textContent = t("settings.queryFailed") + ": " + error.message; }
+      finally {
+        query.disabled = refresh.disabled = false;
+        if (state.renderGeneration === generation) {
+          state.capabilityPending = false;
+          state.save.disabled = !state.dirty || state.pending || state.unknown;
+        }
+      }
+    }
+    query.addEventListener("click", () => load(false)); refresh.addEventListener("click", () => load(true));
+    const capabilities = h("div", null, h("div.settings-actions", null, query, refresh), info, output);
+    if (isRole) common.before(capabilities);
+    else form.append(capabilities);
+  }
+  state.content.replaceChildren(form);
+}
+
+async function loadGroup(state) {
+  if (state.loaded || state.loading) return;
+  state.loading = true;
+  state.content.textContent = t("settings.loading");
+  try {
+    renderGroup(state, await requestJson("/api/settings/group?" + new URLSearchParams({ id: state.meta.id })));
+    state.loaded = true;
+  } catch (error) {
+    state.content.replaceChildren(h("p.settings-error", null, error.message),
+      h("button.btn", { type: "button", onclick: () => loadGroup(state) }, t("settings.retry")));
+  } finally { state.loading = false; }
+}
+search.addEventListener("input", () => {
+  searchGeneration++;
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(() => start(), 200);
+});
+async function start(cursor) {
+  const generation = ++searchGeneration;
+  const query = search.value.trim();
+  status.textContent = t("settings.loading");
+  more.disabled = true;
+  try {
+    const data = await requestJson("/api/settings?" + new URLSearchParams({ q: query, cursor: cursor || "0" }));
+    if (generation !== searchGeneration) return;
+    if (!cursor) groups.forEach(state => { state.root.hidden = true; });
+    data.groups.forEach(meta => {
+      const existing = groups.find(g => g.meta.id === meta.id);
+      if (existing) {
+        existing.root.hidden = false;
+        if (query) { existing.root.open = true; void loadGroup(existing); }
+        return;
+      }
+      const content = h("div");
+      const root = h("details.settings-card", { open: meta.id === "system" || !!query },
+        h("summary", null, t("settings.section." + meta.section, meta.section) + " · " + meta.title), content);
+      const state = { meta, root, content, dirty: false, loaded: false, loading: false };
+      groups.push(state); container.append(root);
+      root.addEventListener("toggle", () => { if (root.open) void loadGroup(state); });
+      if (root.open) void loadGroup(state);
+    });
+    status.textContent = data.total ? String(data.total) + " " + t("settings.groups") : t("settings.noMatches");
+    more.hidden = !data.nextCursor;
+    more.onclick = () => start(data.nextCursor);
+  } catch (error) { status.textContent = error.message; }
+  finally { if (generation === searchGeneration) more.disabled = false; }
+}
+void start();
+`;

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

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