@zq-silk/yui 2.3.0 → 2.4.0

package/dist/web/assets/client/views/dock/discussion.js

@@ -0,0 +1,173 @@
+export const DISCUSSION_SCRIPT = String.raw `
+// The Task discussion in the dock: recorded Task messages plus the composer.
+// The feed is a read-only projection and redraws on every refresh; the
+// composer is kept per Task so a refresh can never discard an unsent draft or
+// a pending receipt.
+import { h, clear } from "/assets/js/lib/dom.js";
+import { fill, formatShort } from "/assets/js/lib/format.js";
+import { chip, emptyState } from "/assets/js/ui/primitives.js";
+import { richText } from "/assets/js/ui/text.js";
+import { label } from "/assets/js/domain/vocab.js";
+import { cachedExact, entriesOf, exactCache, totalOf } from "/assets/js/domain/context.js";
+import { recordCard } from "/assets/js/domain/records.js";
+import { messageComposer } from "/assets/js/domain/taskForms.js";
+
+export function renderDiscussion(host, data, t, locale, actions) {
+  const task = data.task;
+  const composerKey = task.id + "|" + task.status + "|" + locale;
+  let feed = host.querySelector(".feed");
+  const composerWrap = host.querySelector(".composer-wrap");
+  const composer = composerWrap && composerWrap.firstChild;
+  const keepComposer = host.dataset.taskId === task.id && composer
+    && (composer.dataset.key === composerKey || composer.dataset.unsent === "true" || composer.contains(document.activeElement));
+  const previousScroll = feed ? feed.scrollTop : 0;
+  const atEnd = !feed || host.dataset.taskId !== task.id || feed.scrollHeight - feed.clientHeight - feed.scrollTop < 40;
+  if (host.dataset.taskId !== task.id || !feed) feed = discussionFrame(host, t);
+  host.dataset.taskId = task.id;
+  latest.set(task.id, { data: data, t: t, locale: locale, actions: actions });
+  if (!feed.querySelector('[data-reading="true"]')) drawFeed(feed, data, t, locale, actions);
+  feed.scrollTop = atEnd ? feed.scrollHeight : previousScroll;
+  if (!keepComposer) {
+    const next = messageComposer(task, t, actions);
+    next.dataset.key = composerKey;
+    host.querySelector(".composer-wrap").replaceChildren(next);
+  }
+}
+
+function discussionFrame(host, t) {
+  clear(host);
+  host.append(
+    h("div.dock-sub", null, h("span.dock-sub-title", null, t("discussion.title")), h("span.dock-sub-note", null, t("discussion.source"))),
+    h("div.feed", { "aria-label": t("discussion.feed"), tabIndex: 0 }),
+    h("div.composer-wrap"));
+  return host.querySelector(".feed");
+}
+
+export function discussionHasUnsent(host) {
+  return !!host.querySelector('[data-unsent="true"]');
+}
+
+// The Context read carries bounded summaries. Full bodies are opened by the
+// reader, never downloaded automatically because the dock was rendered.
+const older = new Map();
+const latest = new Map();
+
+function exactValue(entry, cache) {
+  if (!entry.omitted) return entry.value;
+  const hit = cachedExact(cache, entry);
+  return hit ? hit.value : null;
+}
+
+function loadOlder(data, actions, state, shownIds) {
+  state.pending = true;
+  state.error = null;
+  let rounds = 0;
+  function next() {
+    return actions.list(data.task.id, "task-message", { limit: 20, cursor: state.cursor }).then(function (page) {
+      const known = new Set(state.items.map(function (item) { return item.ref.refId; }));
+      const fresh = page.items.filter(function (item) { return !known.has(item.ref.refId) && !shownIds.has(item.ref.refId); });
+      state.items = state.items.concat(fresh);
+      state.cursor = page.nextCursor;
+      state.done = !page.nextCursor;
+      rounds += 1;
+      if (!fresh.length && page.nextCursor && rounds < 10) return next();
+    });
+  }
+  // A listing that moved invalidates its continuation; the next request
+  // starts again from the newest page and skips what is already shown.
+  return next().catch(function (error) { state.error = error.message; state.cursor = null; })
+    .then(function () { state.pending = false; });
+}
+
+function olderState(taskId) {
+  if (!older.has(taskId)) older.set(taskId, { items: [], cursor: null, done: false, pending: false, error: null });
+  return older.get(taskId);
+}
+
+// Feed rows oldest first, reusing an exact value only when already read.
+function feedRows(olderItems, contextEntries, cache) {
+  // Context lists messages newest first; the feed reads oldest first.
+  const rows = olderItems.map(function (item) { return { entry: { ref: item.ref, summary: item.summary, omitted: true }, at: item.createdAt }; })
+    .concat(contextEntries.slice().reverse().map(function (entry) { return { entry: entry, at: null }; }));
+  rows.forEach(function (row) {
+    row.value = exactValue(row.entry, cache);
+    row.at = (row.value && row.value.createdAt) || row.at;
+  });
+  if (rows.every(function (row) { return row.at; })) rows.sort(function (a, b) { return Date.parse(a.at) - Date.parse(b.at); });
+  return rows;
+}
+
+function drawFeed(feed, data, t, locale, actions) {
+  clear(feed);
+  const task = data.task;
+  const cache = exactCache(data.viewState);
+  const contextEntries = entriesOf(data.core, "task-message");
+  const shownIds = new Set(contextEntries.map(function (entry) { return entry.ref.refId; }));
+  const state = olderState(task.id);
+  const olderItems = state.items.filter(function (item) { return !shownIds.has(item.ref.refId); })
+    .sort(function (a, b) { return Date.parse(a.createdAt || 0) - Date.parse(b.createdAt || 0); });
+  const rows = feedRows(olderItems, contextEntries, cache);
+  const remaining = totalOf(data.core, "task-message") - shownIds.size - olderItems.length;
+  if (actions.list && remaining > 0 && !state.done) {
+    feed.append(olderButton(remaining, state, t, function () {
+      return loadOlder(data, actions, state, shownIds).then(function () { redraw(feed, task.id, true); });
+    }));
+  }
+  if (state.error) feed.append(h("p.feed-note", null, t("records.unavailable") + " " + state.error));
+  if (!rows.length) {
+    feed.append(emptyState(t("discussion.empty"), "chat"));
+    return;
+  }
+  let lastDay = "";
+  rows.forEach(function (row) {
+    if (!row.value) { feed.append(placeholderRow(row, task.id, t, actions)); return; }
+    const day = row.value.createdAt ? new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(new Date(row.value.createdAt)) : "";
+    if (day && day !== lastDay) { feed.append(h("div.feed-day", null, h("span", null, day))); lastDay = day; }
+    feed.append(messageRow(row, t, locale));
+  });
+}
+
+function olderButton(remaining, state, t, onLoad) {
+  const more = h("button.show-more.feed-older", { type: "button", disabled: state.pending },
+    state.pending ? t("discussion.olderLoading") : fill(t("discussion.older"), { count: remaining }));
+  more.addEventListener("click", function () {
+    more.disabled = true;
+    more.textContent = t("discussion.olderLoading");
+    onLoad();
+  });
+  return more;
+}
+
+function placeholderRow(row, taskId, t, actions) {
+  const placeholder = recordCard(row.entry, taskId, t, actions, { compact: true });
+  if (row.reading) placeholder.dataset.reading = "true";
+  return placeholder;
+}
+
+function messageRow(row, t, locale) {
+  const value = row.value;
+  const type = (value.author && value.author.type) || "system";
+  const author = (value.author && value.author.roleName) || label(t, "author", type);
+  const message = h("article.msg.from-" + (type === "user" || type === "operator" ? "user" : type === "role" ? "role" : "system"));
+  message.append(h("span.msg-avatar", { "aria-hidden": "true" }, String(author).slice(0, 1).toUpperCase()));
+  message.append(h("div.msg-main", null,
+    h("header.msg-head", null, h("strong", null, author),
+      value.intent ? chip(label(t, "intent", value.intent)) : null,
+      value.kind === "role-result" ? chip(label(t, "messageKind", value.kind)) : null,
+      h("time", { dateTime: value.createdAt || "", title: row.entry.ref.refId }, formatShort(value.createdAt, locale))),
+    h("div.msg-bubble", null, richText(null, value.body || "", t, { threshold: 900 }))));
+  return message;
+}
+
+// Redraw after a read without losing the reader's place: the bottom stays
+// pinned, and prepended older messages keep the current message in view.
+function redraw(feed, taskId, prepend) {
+  const host = feed.closest("[data-task-id]");
+  const current = latest.get(taskId);
+  if (!feed.isConnected || !host || host.dataset.taskId !== taskId || !current) return;
+  const atEnd = feed.scrollHeight - feed.clientHeight - feed.scrollTop < 40;
+  const fromBottom = feed.scrollHeight - feed.scrollTop;
+  drawFeed(feed, current.data, current.t, current.locale, current.actions);
+  feed.scrollTop = atEnd && !prepend ? feed.scrollHeight : feed.scrollHeight - fromBottom;
+}
+`;

package/dist/web/assets/client/views/dock/preview.js

@@ -0,0 +1,129 @@
+export const PREVIEW_SCRIPT = String.raw `
+import { requestJson, submitMutation } from "/assets/js/lib/api.js";
+
+export function createPreviewController(root, t) {
+  let taskId = null, generation = 0, revision = 0, timer = null, selected = null, frame = null, frameUrl = null;
+  let list, status;
+  function close() {
+    generation++;
+    clearTimeout(timer);
+    taskId = null;
+    selected = null;
+    frame = null;
+    frameUrl = null;
+    root.replaceChildren();
+  }
+  function text(tag, value, parent) {
+    const node = document.createElement(tag);
+    node.textContent = value;
+    if (parent) parent.append(node);
+    return node;
+  }
+  function button(label, action, parent) {
+    const node = text("button", label, parent);
+    node.type = "button";
+    node.className = "btn btn-sm";
+    node.addEventListener("click", action);
+    return node;
+  }
+  function clearFrame() {
+    if (frame) frame.remove();
+    frame = null; frameUrl = null;
+  }
+  function open(id) {
+    if (taskId === id) return;
+    close();
+    if (!id) return;
+    taskId = id;
+    const actions = document.createElement("div");
+    actions.className = "dock-sub";
+    root.append(actions);
+    text("strong", t("preview.title"), actions);
+    button(t("preview.refresh"), function () { clearFrame(); refresh(generation); }, actions);
+    text("p", t("preview.limits"), root).className = "feed-note";
+    text("p", t("preview.lifecycle"), root).className = "feed-note";
+    list = document.createElement("div");
+    list.className = "preview-services";
+    root.append(list);
+    status = text("p", t("preview.loading"), root);
+    status.className = "feed-note";
+    refresh(generation);
+  }
+  async function refresh(expected) {
+    clearTimeout(timer);
+    const read = ++revision;
+    const id = taskId;
+    if (!id || expected !== generation) return;
+    try {
+      const data = await requestJson("/api/tasks/" + encodeURIComponent(id) + "/previews", { signal: AbortSignal.timeout(5000) });
+      if (expected !== generation || read !== revision) return;
+      const focusKey = document.activeElement?.getAttribute("data-preview-focus");
+      list.replaceChildren();
+      status.textContent = data.services.length ? (data.complete ? "" : t("preview.more")) : t("preview.empty");
+      if (!data.services.some(function (service) { return service.id === selected; })) {
+        selected = data.services.find(function (service) { return service.state === "ready"; })?.id || null;
+      }
+      let activeUrl = null;
+      data.services.forEach(function (service) {
+        const row = document.createElement("section");
+        row.className = "preview-service";
+        list.append(row);
+        text("strong", service.name + " · " + service.id, row);
+        text("span", t("preview.state." + service.state), row);
+        text("small", service.detail, row).title = service.readAt;
+        if (service.url) {
+          button(t("preview.view"), function () { selected = service.id; clearFrame(); refresh(generation); }, row)
+            .setAttribute("data-preview-focus", service.id + "-view");
+          const link = text("a", t("preview.window"), row);
+          link.href = service.url;
+          link.target = "_blank";
+          link.rel = "noopener noreferrer";
+          link.className = "btn btn-sm";
+          link.setAttribute("data-preview-focus", service.id + "-window");
+          if (service.id === selected) activeUrl = service.url;
+        }
+        if (service.canStop) {
+          const stop = button(t("preview.stop"), async function () {
+            stop.disabled = true;
+            try {
+              const result = await submitMutation(id + "/preview/" + service.id,
+                "/api/tasks/" + encodeURIComponent(id) + "/previews/" + encodeURIComponent(service.id) + "/stop", {});
+              if (expected !== generation) return;
+              status.textContent = result.stopped ? t("preview.state.stopped") : t("preview.stopRequested");
+              if (selected === service.id) clearFrame();
+              refresh(expected);
+            } catch (error) {
+              if (expected === generation) status.textContent = error.message;
+            }
+          }, row);
+          stop.disabled = service.state === "stopping";
+          stop.setAttribute("data-preview-focus", service.id + "-stop");
+        }
+        if (service.receipt) text("small", t("preview.receipt") + ": " + service.receipt.outcome
+          + " · " + service.receipt.artifactsLocator, row);
+      });
+      if (activeUrl !== frameUrl) {
+        clearFrame();
+        if (activeUrl) {
+          frame = document.createElement("iframe");
+          frame.title = t("preview.title");
+          frame.setAttribute("sandbox", "allow-scripts");
+          frame.referrerPolicy = "no-referrer";
+          frame.className = "preview-frame";
+          frame.src = activeUrl;
+          frameUrl = activeUrl;
+          root.append(frame);
+        }
+      }
+      if (focusKey) Array.from(root.querySelectorAll("[data-preview-focus]"))
+        .find(function (node) { return node.getAttribute("data-preview-focus") === focusKey; })?.focus();
+    } catch (error) {
+      if (expected !== generation || read !== revision) return;
+      clearFrame();
+      status.textContent = error.message;
+    }
+    if (expected === generation && read === revision && taskId) timer = setTimeout(function () { refresh(expected); }, 5000);
+  }
+  return { open, close };
+}
+`;

package/dist/web/assets/client/views/dock/terminal.js

@@ -0,0 +1,199 @@
+export const TERMINAL_SCRIPT = String.raw `
+// The live native Session terminal in the dock: target chips, the xterm view
+// and its WebSocket. One session is open at a time; opening another target
+// disposes the previous one first.
+import { Terminal } from "/assets/vendor/xterm.mjs";
+import { FitAddon } from "/assets/vendor/addon-fit.mjs";
+import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { fill } from "/assets/js/lib/format.js";
+import { pageToken, requestJson } from "/assets/js/lib/api.js";
+import { dot } from "/assets/js/ui/primitives.js";
+
+function cssVar(name, fallback) {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  return value || fallback;
+}
+
+function terminalTheme() {
+  return {
+    background: cssVar("--term-bg", "#0b0c0d"),
+    foreground: cssVar("--term-fg", "#e6e6e8"),
+    cursor: cssVar("--term-cursor", "#ff7a52"),
+    selectionBackground: cssVar("--term-sel", "#3a2a24")
+  };
+}
+
+function cliFor(target) {
+  if (target.scope === "task") return "yui task role session inspect " + target.taskId + " " + target.roleName;
+  return target.roleName === "operator" ? "yui operator enter" : "yui session enter " + target.roleName;
+}
+
+export function sameTarget(left, right) {
+  return !!left && !!right && left.scope === right.scope && left.roleName === right.roleName
+    && (left.scope !== "task" || left.taskId === right.taskId);
+}
+
+// elements: { host, empty, state, cli, targets }; locale() reads the current
+// locale; notify(message) shows a toast.
+export function createTerminalController(elements, t, locale, notify) {
+  const ctl = { elements: elements, t: t, locale: locale, notify: notify, session: null, current: null, generation: 0, stateKey: "terminal.idle", targets: [] };
+  drawTargets(ctl);
+  return {
+    open: function (target) { open(ctl, target); },
+    close: function () { close(ctl); },
+    current: function () { return ctl.current; },
+    connected: function () { return !!ctl.session; },
+    setTargets: function (next) { ctl.targets = next; drawTargets(ctl); },
+    relabel: function () { setState(ctl, ctl.stateKey, elements.state.dataset.state); drawTargets(ctl); },
+    retheme: function () { if (ctl.session) ctl.session.terminal.options.theme = terminalTheme(); }
+  };
+}
+
+function setState(ctl, key, state) {
+  ctl.stateKey = key;
+  ctl.elements.state.dataset.state = state;
+  ctl.elements.state.lastChild.textContent = ctl.t(key);
+}
+
+function drawTargets(ctl) {
+  const t = ctl.t;
+  const list = ctl.elements.targets;
+  clear(list);
+  ctl.targets.forEach(function (target) {
+    list.append(h("button.target-chip", {
+      type: "button",
+      "aria-pressed": String(sameTarget(target, ctl.current)),
+      title: target.scope === "task" ? target.taskId + " / " + target.roleName : t("terminal.global") + " / " + target.roleName,
+      onclick: function () { open(ctl, target); }
+    }, target.scope === "task" ? dot(target.live ? "ok" : "idle") : icon("broadcast", "icon-sm"), h("span", null, target.roleName)));
+  });
+  if (!ctl.targets.length) list.append(h("span.faint.small", null, t("terminal.noTargets")));
+}
+
+function dispose(ctl) {
+  ctl.generation++;
+  if (!ctl.session) return;
+  const owned = ctl.session;
+  ctl.session = null;
+  owned.resizeObserver.disconnect();
+  owned.input.dispose();
+  owned.socket.close();
+  owned.terminal.dispose();
+  clear(ctl.elements.host);
+}
+
+function close(ctl) {
+  dispose(ctl);
+  ctl.current = null;
+  ctl.elements.empty.hidden = false;
+  ctl.elements.cli.textContent = "yui operator enter";
+  setState(ctl, "terminal.idle", "idle");
+  drawTargets(ctl);
+}
+
+async function open(ctl, target) {
+  dispose(ctl);
+  const generation = ctl.generation;
+  ctl.current = target;
+  ctl.elements.empty.hidden = true;
+  ctl.elements.cli.textContent = cliFor(target);
+  setState(ctl, "terminal.connecting", "connecting");
+  drawTargets(ctl);
+  try {
+    if (!target.nativeSessionId) {
+      const query = new URLSearchParams({ scope: target.scope, role: target.roleName });
+      if (target.scope === "task") query.set("task", target.taskId);
+      const facts = await requestJson("/api/conversation?" + query);
+      if (generation !== ctl.generation) return;
+      if (!facts.currentSessionId) throw new Error(ctl.t("conversation.noSession"));
+      target = { ...target, nativeSessionId: facts.currentSessionId };
+      ctl.current = target;
+    }
+  } catch (error) {
+    if (generation === ctl.generation) { setState(ctl, "terminal.error", "error"); ctl.notify(error.message); }
+    return;
+  }
+  const view = mountTerminal(ctl.elements.host);
+  const terminal = view.terminal;
+  const socket = connect(target, terminal);
+  const link = { writable: false };
+  const input = terminal.onData(function (data) {
+    if (link.writable && socket.readyState === WebSocket.OPEN) socket.send(JSON.stringify({ type: "input", data: data }));
+  });
+  const resizeObserver = new ResizeObserver(function () {
+    if (!ctl.session || ctl.session.terminal !== terminal || !ctl.elements.host.offsetWidth) return;
+    try { view.fit.fit(); } catch { return; }
+    if (socket.readyState === WebSocket.OPEN) {
+      socket.send(JSON.stringify({ type: "resize", columns: terminal.cols, rows: terminal.rows }));
+    }
+  });
+  resizeObserver.observe(ctl.elements.host);
+  bindSocket(ctl, socket, terminal, link, generation);
+  ctl.session = { terminal, socket, input, resizeObserver };
+}
+
+function mountTerminal(host) {
+  const terminal = new Terminal({
+    cursorBlink: true,
+    scrollback: 5000,
+    convertEol: false,
+    fontFamily: '"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace',
+    fontSize: 12.5,
+    lineHeight: 1.15,
+    theme: terminalTheme()
+  });
+  const fit = new FitAddon();
+  terminal.loadAddon(fit);
+  terminal.open(host);
+  try { fit.fit(); } catch {}
+  return { terminal: terminal, fit: fit };
+}
+
+function connect(target, terminal) {
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  const parameters = new URLSearchParams({
+    scope: target.scope, role: target.roleName, cols: String(terminal.cols), rows: String(terminal.rows), token: pageToken()
+  });
+  if (target.scope === "task") parameters.set("task", target.taskId);
+  if (target.nativeSessionId) parameters.set("session", target.nativeSessionId);
+  return new WebSocket(protocol + "//" + window.location.host + "/api/terminal?" + parameters.toString());
+}
+
+function bindSocket(ctl, socket, terminal, link, generation) {
+  socket.addEventListener("message", function (event) {
+    if (generation !== ctl.generation) return;
+    let message;
+    try { message = JSON.parse(event.data); } catch { return; }
+    if (message.type === "ready") ready(ctl, message, terminal, link);
+    else if (message.type === "data") terminal.write(message.data);
+    else if (message.type === "exit") setState(ctl, "terminal.closed", "closed");
+    else if (message.type === "error") {
+      setState(ctl, "terminal.error", "error");
+      terminal.writeln("\r\n" + message.message);
+    }
+  });
+  socket.addEventListener("close", function () {
+    if (generation !== ctl.generation) return;
+    link.writable = false;
+    if (ctl.stateKey !== "terminal.error") setState(ctl, "terminal.closed", "closed");
+  });
+  socket.addEventListener("error", function () {
+    if (generation !== ctl.generation) return;
+    link.writable = false;
+    setState(ctl, "terminal.error", "error");
+    terminal.writeln(ctl.t("terminal.errorDetail"));
+  });
+}
+
+function ready(ctl, message, terminal, link) {
+  link.writable = !message.readOnly;
+  setState(ctl, link.writable ? "terminal.writable" : "terminal.readOnly", link.writable ? "writable" : "readonly");
+  if (message.history && message.history.limit < message.history.target) {
+    const number = new Intl.NumberFormat(ctl.locale());
+    ctl.notify(fill(ctl.t("terminal.historyLimited"), {
+      current: number.format(message.history.limit), target: number.format(message.history.target)
+    }));
+  }
+  terminal.focus();
+}
+`;

package/dist/web/assets/client/views/globalInput.js

@@ -0,0 +1,67 @@
+export const GLOBAL_INPUT_SCRIPT = String.raw `
+// The global Role input dialog: queue / steer / interrupt for a Role outside
+// any Task, with an explicit read of its current Turn. The receipt is shown
+// verbatim; an unknown delivery keeps the submit button disabled.
+import { setReceipt, submitWrite } from "/assets/js/ui/forms.js";
+
+const UNKNOWN_STATES = ["pending", "delivery-unknown", "steer-unknown", "interrupt-unknown"];
+
+export function bindGlobalInput(options) {
+  const t = options.t;
+  const api = options.api;
+  const $ = function (selector) { return document.querySelector(selector); };
+  const el = {
+    dialog: $("#global-input-dialog"), form: $("#global-input-form"), role: $("#global-input-role"),
+    action: $("#global-input-action"), body: $("#global-input-body"), target: $("#global-input-target"),
+    then: $("#global-input-then"), submit: $("#global-input-submit"), receipt: $("#global-input-receipt"),
+    state: $("#global-input-state")
+  };
+  $("#global-input-open").addEventListener("click", function () { el.dialog.showModal(); });
+  $("#global-input-close").addEventListener("click", function () { el.dialog.close(); });
+  el.action.addEventListener("change", function () {
+    $("#global-input-body-label").hidden = el.action.value === "interrupt";
+    $("#global-input-target-label").hidden = el.action.value === "queue";
+    $("#global-input-then-label").hidden = el.action.value !== "interrupt";
+    el.body.required = el.action.value !== "interrupt";
+    el.target.required = el.action.value !== "queue";
+  });
+  $("#global-input-inspect").addEventListener("click", function () { inspectRole(el, api); });
+  el.form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    if (el.submit.disabled) return;
+    submitWrite({
+      control: el.submit, receipt: el.receipt, t: t, unknownKey: "receipt.unknownControl",
+      send: function (requestId) { return api.globalControl(el.role.value.trim(), globalPayload(el, requestId)); },
+      saved: function (receipt) { return showReceipt(el, receipt); }
+    });
+  });
+  return { dialog: el.dialog };
+}
+
+async function inspectRole(el, api) {
+  el.state.hidden = false;
+  try {
+    const facts = await api.globalState(el.role.value.trim());
+    el.state.textContent = JSON.stringify(facts, null, 2);
+    el.target.value = (facts.turn && (facts.turn.nativeTurnId || facts.turn.attemptId)) || "";
+  } catch (error) { el.state.textContent = error.message; }
+}
+
+function globalPayload(el, requestId) {
+  const action = el.action.value;
+  const input = { action: action, requestId: requestId };
+  if (action !== "interrupt") input.body = el.body.value;
+  if (action !== "queue") input.expectedTarget = el.target.value.trim();
+  if (action === "interrupt" && el.then.value.trim()) input.thenMessage = el.then.value.trim();
+  return input;
+}
+
+// Returns true while the outcome is unknown, which keeps the submit disabled.
+function showReceipt(el, receipt) {
+  const status = receipt.steer || receipt.interrupt || receipt.delivery || {};
+  setReceipt(el.receipt, JSON.stringify(receipt), "ok");
+  const unknown = UNKNOWN_STATES.includes(status.state) || status.code === "DELIVERY_UNKNOWN";
+  if (!unknown && !status.code) el.body.value = "";
+  return unknown;
+}
+`;