@zq-silk/yui 2.2.0 → 2.4.0

package/dist/web/assets/client/ui/metrics.js

@@ -0,0 +1,137 @@
+export const METRICS_SCRIPT = String.raw `
+// Metric tiles and the usage card. DOM is built with node() only, so the
+// usage test can execute this module with node() and formatDateTime() alone.
+import { node } from "/assets/js/lib/dom.js";
+import { formatDateTime } from "/assets/js/lib/format.js";
+import { requestJson } from "/assets/js/lib/api.js";
+
+export function metricTile(labelText, value, options) {
+  const variant = options && options.tone ? " tone-" + options.tone : "";
+  const tile = node("div", "metric" + variant);
+  tile.append(node("span", "metric-label", labelText), node("strong", "metric-value", String(value)));
+  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");
+  const value = suffix === "s" ? durationText(metric.value) : metric.value + (suffix || "");
+  return value + (metric.status === "partial" ? " · " + t("detail.partial") : "");
+}
+
+function usageTile(labelText, metric, t, suffix) {
+  const tile = metricTile(labelText, usageMetricText(metric, t, suffix));
+  if (metric && metric.reasons && metric.reasons.length) {
+    tile.append(node("small", "metric-note", metric.reasons.map(function (reason) {
+      return t("usage.reason." + reason);
+    }).join("; ")));
+  }
+  return tile;
+}
+
+export function observabilityMetricCard(observability, t, viewState) {
+  if (!observability) return null;
+  const wrap = node("div", "usage");
+  const grid = node("div", "metric-grid");
+  const cost = observability.cost || {};
+  const context = observability.context || {};
+  grid.append(usageTile(t("usage.tokens"), cost.tokens, t));
+  grid.append(usageTile(t("usage.toolCalls"), cost.toolCalls, t));
+  grid.append(usageTile(t("usage.elapsed"), cost.elapsedSeconds, t, "s"));
+  grid.append(usageTile(t("usage.executionSum"), cost.executionSeconds, t, "s"));
+  ["actual", "estimated"].forEach(function (kind) {
+    const money = cost.costs && cost.costs[kind];
+    grid.append(metricTile(t("usage." + kind), !money || !money.amounts.length
+      ? t("detail.unobserved")
+      : money.amounts.map(function (amount) { return usageMetricText(amount, t) + " " + amount.currency; }).join("; ")));
+  });
+  grid.append(metricTile(t("usage.ready"), observability.readyCount === undefined
+    ? ((observability.dag && observability.dag.readyIds) || []).length : observability.readyCount));
+  grid.append(metricTile(t("usage.contextSnapshots"), context.snapshotCount == null ? t("detail.unobserved") : context.snapshotCount));
+  wrap.append(grid);
+  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, pageLocale()) : t("detail.unobserved"))));
+  meta.append(node("span", "", t("usage.contextBytes") + " "
+    + (context.totalBytes == null ? t("detail.partial") : context.totalBytes + " B")));
+  wrap.append(meta);
+  wrap.append(node("p", "usage-meta", t("usage.notBill")));
+  if (cost.history && !cost.history.complete) wrap.append(node("p", "metric-note", t("usage.reason.usage-history-limited")));
+  if (cost.taskId && typeof document !== "undefined") {
+    const details = node("details", "usage-details");
+    details.dataset.viewKey = "usage-sources";
+    details.append(node("summary", "", t("usage.sources")));
+    const body = node("div", "stack");
+    const more = node("button", "", t("usage.loadDetails"));
+    more.type = "button";
+    const cache = viewState || {};
+    const state = cache.usageDetails || (cache.usageDetails = { pages: [], offset: 0, reading: false });
+    function drawPages() {
+      body.replaceChildren();
+      state.pages.forEach(function (page) {
+        body.append(node("p", "metric-note", t("usage.observedThrough") + " "
+          + (page.observedThrough ? formatDateTime(page.observedThrough, pageLocale()) : t("detail.unobserved"))));
+        ["actual", "estimated"].forEach(function (kind) {
+          page.costs[kind].evidence.forEach(function (entry) {
+            const basis = entry.basis;
+            body.append(node("p", "small mono-line", t("usage." + kind) + " · "
+              + usageMetricText(entry.amount, t) + " " + entry.currency + " · " + entry.source
+              + " · " + entry.roleName + "/" + entry.nativeSessionId + " · " + entry.semantics
+              + (basis ? " · " + basis.model + " · " + basis.source + "@" + basis.version
+                + " · " + basis.scope + " · " + t("usage.excluded") + ": " + basis.excluded.join(", ") : "")));
+          });
+        });
+        page.sessions.forEach(function (entry) {
+          body.append(node("p", "small mono-line", entry.identity.roleName + "/" + entry.identity.nativeSessionId
+            + " · " + usageMetricText(entry.tokens, t) + " · " + entry.sources.join(", ")
+            + " · " + entry.semantics.join(", ")));
+        });
+        if (!page.details.sessionTotal && !page.details.actualTotal && !page.details.estimatedTotal) {
+          body.append(node("p", "small", t("usage.unavailable")));
+        }
+      });
+      more.hidden = state.offset === null;
+      more.disabled = state.reading;
+      details.dataset.reading = String(state.reading);
+    }
+    async function load() {
+      if (state.reading || state.offset === null) return;
+      state.reading = true;
+      drawPages();
+      try {
+        const page = await requestJson("/api/tasks/" + encodeURIComponent(cost.taskId)
+          + "/usage?limit=20&offset=" + state.offset);
+        state.pages.push(page);
+        state.offset = page.details.nextOffset;
+        drawPages();
+      } catch (error) {
+        body.append(node("p", "metric-note", String(error.message || error)));
+      } finally {
+        state.reading = false;
+        more.disabled = false;
+        details.dataset.reading = "false";
+      }
+    }
+    drawPages();
+    more.addEventListener("click", load);
+    details.addEventListener("toggle", function () { if (details.open && !state.pages.length) load(); });
+    details.append(body, more);
+    wrap.append(details);
+  }
+  return wrap;
+}
+`;

package/dist/web/assets/client/ui/primitives.js

@@ -0,0 +1,92 @@
+export const PRIMITIVES_SCRIPT = String.raw `
+// Leaf builders: data in, one small DOM element out. Nothing here reads
+// application state, translates domain values or performs a request.
+import { h, icon } from "/assets/js/lib/dom.js";
+import { formatDateTime, relativeTime } from "/assets/js/lib/format.js";
+
+export function badge(text, toneName, options) {
+  const element = h("span.badge.tone-" + (toneName || "idle"), null,
+    options && options.dot ? h("i.badge-dot", { "aria-hidden": "true" }) : null, text);
+  if (options && options.title) element.title = options.title;
+  return element;
+}
+
+export function dot(toneName, title) {
+  const element = h("span.dot.tone-" + (toneName || "idle"), { "aria-hidden": title ? null : "true" });
+  if (title) { element.title = title; element.setAttribute("role", "img"); element.setAttribute("aria-label", title); }
+  return element;
+}
+
+export function chip(text, extraClass) {
+  return h("span.chip" + (extraClass ? "." + extraClass : ""), null, text);
+}
+
+export function mono(text, extraClass) {
+  return h("code.id" + (extraClass ? "." + extraClass : ""), null, text);
+}
+
+export function timeTag(iso, locale, t, options) {
+  if (!iso) return null;
+  const element = h("time.when", { dateTime: iso }, options && options.absolute
+    ? formatDateTime(iso, locale) : relativeTime(iso, locale, t));
+  element.title = formatDateTime(iso, locale);
+  return element;
+}
+
+export function button(text, options) {
+  const opts = options || {};
+  const element = h("button.btn" + (opts.variant ? ".btn-" + opts.variant : ""), {
+    type: opts.type || "button", onclick: opts.onClick, disabled: !!opts.disabled, title: opts.title
+  }, opts.icon ? icon(opts.icon) : null, text ? h("span", null, text) : null);
+  if (opts.dataset) Object.assign(element.dataset, opts.dataset);
+  return element;
+}
+
+export function note(text, toneName) {
+  return h("p.note" + (toneName ? ".tone-" + toneName : ""), null, text);
+}
+
+export function emptyState(text, iconName, extra) {
+  return h("div.empty", null, iconName ? icon(iconName) : null, h("p", null, text), extra || null);
+}
+
+export function loadingBlock(text) {
+  return h("div.loading-block", null, h("span.spinner"), h("span", null, text));
+}
+
+export function kv(rows) {
+  const list = h("dl.kv");
+  rows.forEach(function (row) {
+    if (!row || row[1] === undefined || row[1] === null || row[1] === "") return;
+    list.append(h("dt", null, row[0]), h("dd", null, row[1]));
+  });
+  return list;
+}
+
+export function bulletList(items, className) {
+  const list = (items || []).filter(Boolean);
+  if (!list.length) return null;
+  return h("ul.bullets" + (className ? "." + className : ""), null, list.map(function (item) { return h("li", null, item); }));
+}
+
+// Verbatim text (a command, an exact record) in a scrollable block.
+export function codeBlock(text) {
+  return h("pre.code-block", null, text);
+}
+
+export function jsonBlock(value) {
+  return codeBlock(JSON.stringify(value, null, 2));
+}
+
+// Only http(s) links without credentials leave the page.
+export function safeUrl(value) {
+  try {
+    const url = new URL(value);
+    return ["http:", "https:"].includes(url.protocol) && !url.username && !url.password ? url.href : null;
+  } catch { return null; }
+}
+
+export function externalLink(href, text) {
+  return h("a.link", { href: href, rel: "noopener noreferrer", target: "_blank" }, text);
+}
+`;

package/dist/web/assets/client/ui/text.js

@@ -0,0 +1,33 @@
+export const TEXT_SCRIPT = String.raw `
+// Agent and user prose: rendered Markdown that collapses when long.
+import { h } from "/assets/js/lib/dom.js";
+import { renderMarkdown } from "/assets/js/lib/markdown.js";
+
+function shouldCollapse(text, threshold) {
+  const value = String(text);
+  if (value.length > (threshold || 700)) return true;
+  let lines = 0;
+  for (let index = 0; index < value.length; index += 1) if (value[index] === "\n") lines += 1;
+  return lines > 12;
+}
+
+export function richText(title, text, t, options) {
+  if (!text) return null;
+  const opts = options || {};
+  const block = h("div.prose-block" + (opts.className ? "." + opts.className : ""));
+  if (title) block.append(h("h4.prose-label", null, title));
+  const body = h("div.md" + (opts.muted ? ".muted" : ""));
+  body.innerHTML = renderMarkdown(text);
+  block.append(body);
+  if (shouldCollapse(text, opts.threshold)) {
+    block.classList.add("is-collapsed");
+    const toggle = h("button.link-btn", { type: "button" }, t("actions.showMore"));
+    toggle.addEventListener("click", function () {
+      const collapsed = block.classList.toggle("is-collapsed");
+      toggle.textContent = t(collapsed ? "actions.showMore" : "actions.showLess");
+    });
+    block.append(toggle);
+  }
+  return block;
+}
+`;

package/dist/web/assets/client/ui/toast.js

@@ -0,0 +1,12 @@
+export const TOAST_SCRIPT = String.raw `
+// A transient status message; a newer message replaces the current one.
+export function createToast(element) {
+  let timer = null;
+  return function showToast(message) {
+    element.textContent = message;
+    element.classList.add("show");
+    window.clearTimeout(timer);
+    timer = window.setTimeout(function () { element.classList.remove("show"); }, 3200);
+  };
+}
+`;

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

@@ -0,0 +1,172 @@
+export const BODY_SEARCH_SCRIPT = String.raw `
+import { h } from "/assets/js/lib/dom.js";
+import { button } from "/assets/js/ui/primitives.js";
+
+// Textareas normalize CR/CRLF to LF. Map their UTF-16 selections back to the
+// unchanged source before computing the search contract's code-point offset.
+export function selectedSearchText(page, body) {
+  if (body.selectionStart === body.selectionEnd) return { excerpt: page.content, offset: page.offset };
+  let visible = 0, start, end;
+  for (let index = 0; index <= page.content.length;) {
+    if (visible === body.selectionStart) start = index;
+    if (visible === body.selectionEnd) { end = index; break; }
+    if (index === page.content.length) break;
+    const point = String.fromCodePoint(page.content.codePointAt(index));
+    index += point === "\r" && page.content[index + 1] === "\n" ? 2 : point.length;
+    visible += point.length;
+  }
+  if (start === undefined || end === undefined) throw new Error("Select complete characters before quoting.");
+  return { excerpt: page.content.slice(start, end),
+    offset: page.offset + Array.from(page.content.slice(0, start)).length };
+}
+
+// Search never sends input or starts a Task. The user/Operator chooses excerpts
+// to reuse through the normal Task input path with its own authority.
+export function bindBodySearch(options) {
+  const t = options.t, api = options.api;
+  const dialog = h("dialog.dialog.body-search-dialog", { "aria-labelledby": "body-search-title" });
+  const close = button(t("actions.close"));
+  close.dataset.i18n = "actions.close";
+  close.addEventListener("click", function () { dialog.close(); });
+  const query = h("input", { type: "search", required: true, maxLength: 256 });
+  const scope = h("select", { "aria-label": t("bodySearch.scope") },
+    h("option", { value: "" }, t("bodySearch.allTasks")),
+    h("option", { value: "current" }, t("bodySearch.currentTask")));
+  const kind = h("select");
+  ["", "brief", "message", "decision", "result", "completion"].forEach(function (value) {
+    const key = "bodySearch.kind." + (value || "all");
+    kind.append(h("option", { value: value, dataset: { i18n: key } }, t(key)));
+  });
+  const submit = button(t("bodySearch.search"), { variant: "primary" });
+  submit.dataset.i18n = "bodySearch.search";
+  submit.type = "submit";
+  const status = h("p.receipt", { role: "status" });
+  const destination = h("p.dialog-sub");
+  const results = h("div.row-stack");
+  const next = button(t("catalog.next"));
+  next.dataset.i18n = "catalog.next";
+  next.disabled = true;
+  const form = h("form.dialog-body", null,
+    h("header.dialog-head", null, h("h2", { id: "body-search-title", dataset: { i18n: "bodySearch.title" } }, t("bodySearch.title")), close),
+    h("p.dialog-sub", { dataset: { i18n: "bodySearch.help" } }, t("bodySearch.help")),
+    h("label.field", null, h("span", { dataset: { i18n: "bodySearch.query" } }, t("bodySearch.query")), query),
+    h("label.field", null, h("span", { dataset: { i18n: "bodySearch.kind" } }, t("bodySearch.kind")), kind),
+    h("label.field", null, h("span", null, t("bodySearch.scope")), scope),
+    h("div.dialog-actions", null, submit, next), destination, status, results);
+  dialog.append(form);
+  document.body.append(dialog);
+  let cursor = null, searched = null, generation = 0, target = null, currentTask = null;
+  function invalidate() {
+    generation += 1; cursor = null; searched = null; next.disabled = true;
+    submit.disabled = false; results.replaceChildren(); status.textContent = "";
+  }
+  query.addEventListener("input", invalidate);
+  kind.addEventListener("change", invalidate);
+  scope.addEventListener("change", invalidate);
+  dialog.addEventListener("close", invalidate);
+  async function load(more) {
+    const ticket = ++generation;
+    const parameters = more ? new URLSearchParams(searched) : new URLSearchParams({ query: query.value.trim(), limit: "20" });
+    if (!more && kind.value) parameters.set("kind", kind.value);
+    if (!more && scope.value === "current") {
+      if (!currentTask) { status.textContent = t("bodySearch.noTask"); return; }
+      parameters.set("task", currentTask);
+    }
+    if (more && cursor) parameters.set("cursor", cursor);
+    submit.disabled = true; next.disabled = true; status.textContent = t("bodySearch.loading");
+    // One page in view: browsing large histories never accumulates all bodies.
+    results.replaceChildren();
+    try {
+      const page = await api.searchBodies(parameters);
+      if (ticket !== generation) return;
+      cursor = page.nextCursor;
+      parameters.delete("cursor"); searched = parameters.toString();
+      status.textContent = page.items.length ? t("bodySearch.results") + " " + page.items.length : t("bodySearch.empty");
+      page.items.forEach(function (item) {
+        const source = item.taskId + " / " + t("bodySearch.kind." + item.kind) + " / " + item.ref.refId + " / " + item.field;
+        const original = button(t("bodySearch.original"));
+        original.dataset.i18n = "bodySearch.original";
+        const locate = button(t("bodySearch.locate"));
+        locate.dataset.i18n = "bodySearch.locate";
+        locate.addEventListener("click", function () { dialog.close(); options.selectTask(item.taskId); });
+        const quote = button(t("bodySearch.quoteSnippet"));
+        quote.disabled = !target;
+        const feedback = h("p.receipt", { role: "status" });
+        const detail = h("div");
+        const row = h("article.card", null, h("div.card-body", null,
+          h("h3.card-title", null, source), h("pre.code-block.search-snippet", null, item.snippet),
+          h("p.faint.small", null, item.ref.revision + " · " + item.ref.digest),
+          h("div.dialog-actions", null, original, locate, quote), feedback, detail));
+        async function insert(excerpt, offset, control) {
+          control.disabled = true;
+          try {
+            const page = await api.searchSource(item, offset);
+            if (ticket !== generation) return;
+            if (!page.content.startsWith(excerpt)) throw new Error(t("bodySearch.sourceChanged"));
+            const ref = JSON.stringify({ authority: "reference-only", taskId: item.taskId,
+              kind: item.kind, ref: item.ref, field: item.field, offset: offset,
+              length: Array.from(excerpt).length, offsetUnit: "unicode-code-points" });
+            options.insertReference(target, t("bodySearch.referenceOnly") + "\n" + ref
+              + "\n\n" + excerpt.split("\n").map(function (line) { return "> " + line; }).join("\n"));
+            feedback.textContent = t("bodySearch.inserted");
+          } catch (error) { if (ticket === generation) feedback.textContent = error.message; }
+          finally { if (ticket === generation) control.disabled = !target; }
+        }
+        quote.addEventListener("click", function () { insert(item.snippet, item.offset, quote); });
+        async function read(offset) {
+          original.disabled = true;
+          detail.textContent = t("bodySearch.loading");
+          try {
+            const page = await api.searchSource(item, offset);
+            if (ticket !== generation) return;
+            const body = h("textarea.search-source", { readOnly: true, rows: 12,
+              "aria-label": t("bodySearch.sourceText") });
+            body.value = page.content;
+            const stage = button(t("bodySearch.quoteSelection"));
+            stage.disabled = !target || !page.content;
+            stage.addEventListener("click", function () {
+              try {
+                const selection = selectedSearchText(page, body);
+                insert(selection.excerpt, selection.offset, stage);
+              } catch (error) { feedback.textContent = error.message; }
+            });
+            const previous = button(t("bodySearch.previous"));
+            previous.disabled = page.offset === 0;
+            previous.addEventListener("click", function () { read(Math.max(0, page.offset - 4000)); });
+            const more = button(t("catalog.next"));
+            more.disabled = page.nextOffset === null;
+            more.addEventListener("click", function () { read(page.nextOffset); });
+            detail.replaceChildren(h("p.faint.small", null,
+              page.offset + "–" + (page.offset + Array.from(page.content).length) + " / " + page.totalCharacters),
+              body, h("div.dialog-actions", null, previous, more, stage));
+          } catch (error) {
+            if (ticket === generation) detail.textContent = t("bodySearch.unavailable") + " " + error.message;
+          } finally { if (ticket === generation) original.disabled = false; }
+        }
+        original.addEventListener("click", function () { read(0); });
+        results.append(row);
+      });
+      next.disabled = !cursor;
+    } catch (error) {
+      if (ticket !== generation) return;
+      cursor = null; searched = null;
+      status.textContent = t("bodySearch.failed") + " " + error.message;
+    } finally { if (ticket === generation) submit.disabled = false; }
+  }
+  form.addEventListener("submit", function (event) { event.preventDefault(); if (!submit.disabled) load(false); });
+  next.addEventListener("click", function () { if (cursor && searched) load(true); });
+  document.querySelector("#body-search-open").addEventListener("click", function () {
+    invalidate();
+    target = options.captureDraftTarget();
+    currentTask = options.currentTask();
+    if (!target) destination.textContent = t("bodySearch.noTarget");
+    else {
+      const identity = JSON.parse(target);
+      destination.textContent = t("bodySearch.destination") + " "
+        + (identity[0].taskId || identity[0].scope) + " / " + identity[0].roleName + " / " + identity[1];
+    }
+    dialog.showModal(); query.focus();
+  });
+  return { dialog: dialog };
+}
+`;

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

@@ -0,0 +1,85 @@
+export const CREATE_TASK_SCRIPT = String.raw `
+import { h } from "/assets/js/lib/dom.js";
+import { button } from "/assets/js/ui/primitives.js";
+import { field, receiptLine, setReceipt, submitWrite } from "/assets/js/ui/forms.js";
+import { renderSubmissionFacets } from "/assets/js/domain/taskForms.js";
+
+export function bindCreateTask(options) {
+  const t = options.t;
+  let dialog = null;
+  window.addEventListener("beforeunload", function (event) {
+    if (dialog && dialog.querySelector('[data-unsent="true"]')) {
+      event.preventDefault(); event.returnValue = "";
+    }
+  });
+  document.querySelector("#create-task").addEventListener("click", async function () {
+    if (dialog && dialog.dataset.saved === "true") { dialog.remove(); dialog = null; }
+    if (dialog) { dialog.showModal(); return; }
+    dialog = h("dialog.dialog", { "aria-label": t("create.title") });
+    const creationDialog = dialog;
+    const form = h("form.dialog-body");
+    const title = h("input", { required: true, maxLength: 200 });
+    const requirements = h("textarea", { required: true, rows: 6, maxLength: 8000 });
+    const projects = h("fieldset.stack", null, h("legend", null, t("create.projects")));
+    const plan = h("input", { type: "checkbox", checked: true });
+    const receipt = receiptLine(t("receipt.notSubmitted"));
+    const facets = h("div");
+    const submit = button(t("create.plan"), { type: "submit", variant: "primary", disabled: true });
+    const close = button(t("actions.close"), { onClick: function () { dialog.close(); } });
+    form.append(h("h2", null, t("create.title")), field(t("create.name"), title),
+      field(t("goal.requirements"), requirements), projects, field(t("create.plan"), plan, t("create.hint")),
+      submit, close, receipt, facets);
+    dialog.append(form);
+    document.body.append(dialog);
+    dialog.showModal();
+    const choices = [];
+    let projectsReady = false;
+    let cursor;
+    const more = button(t("catalog.next"), { onClick: function () { loadProjects(); } });
+    projects.append(more);
+    async function loadProjects() {
+      more.disabled = true;
+      try {
+        const result = await options.api.projects(cursor);
+        result.projects.forEach(function (project) {
+          const control = h("input", { type: "checkbox", value: project.id, disabled: creationDialog.dataset.saved === "true" });
+          choices.push(control);
+          projects.insertBefore(field(project.name + " · " + project.id, control), more);
+        });
+        cursor = result.nextCursor;
+        more.hidden = !cursor;
+        more.disabled = creationDialog.dataset.saved === "true";
+        if (!projectsReady) { submit.disabled = false; projectsReady = true; }
+      } catch (error) { setReceipt(receipt, error.message, "bad"); more.disabled = creationDialog.dataset.saved === "true"; }
+    }
+    await loadProjects();
+    plan.addEventListener("change", function () { submit.textContent = t(plan.checked ? "create.plan" : "create.only"); });
+    form.addEventListener("input", function () { form.dataset.unsent = "true"; });
+    form.addEventListener("submit", function (event) {
+      event.preventDefault();
+      if (submit.disabled) return;
+      submitWrite({
+        control: submit, receipt: receipt, form: form, t: t,
+        send: function (requestId) {
+          return options.api.createTask({ title: title.value.trim(), requirements: requirements.value.trim(),
+            projectIds: choices.filter(function (control) { return control.checked; }).map(function (control) { return control.value; }),
+            plan: plan.checked, requestId: requestId });
+        },
+        saved: function (result) {
+          creationDialog.dataset.saved = "true";
+          [title, requirements, plan, more].concat(choices).forEach(function (control) { control.disabled = true; });
+          setReceipt(receipt, t("receipt.saved") + " · " + result.task.id, "ok");
+          renderSubmissionFacets(facets, result.submission, t);
+          facets.append(button(t("create.open"), { onClick: function () {
+            dialog.close(); dialog.remove(); dialog = null;
+            options.selectTask(result.task.id);
+          } }));
+          options.afterWrite();
+          return true;
+        },
+        rejectedKey: "receipt.notSubmittedBecause", unknownKey: "workbench.unknown"
+      });
+    });
+  });
+}
+`;