@zq-silk/yui 2.3.0 → 2.5.0

package/dist/web/assets/client/domain/taskForms.js

@@ -0,0 +1,197 @@
+export const TASK_FORMS_SCRIPT = String.raw `
+// Task write forms: the discussion composer, queue / steer / interrupt and
+// the title editor. Submission plumbing (requestId, unsent flag, receipts,
+// never replaying an unknown outcome) lives in ui/forms submitWrite().
+import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { fill } from "/assets/js/lib/format.js";
+import { button } from "/assets/js/ui/primitives.js";
+import { segmented } from "/assets/js/ui/controls.js";
+import { field, receiptLine, setReceipt, submitWrite } from "/assets/js/ui/forms.js";
+
+function isOpen(task) {
+  return ["active", "draft"].includes(task.status);
+}
+
+// --- Discussion composer -----------------------------------------------------
+export function messageComposer(task, t, actions) {
+  let intent = "discuss";
+  const form = h("form.composer");
+  const message = h("textarea.composer-input", {
+    required: true, maxLength: 8000, rows: 3, placeholder: t("composer.placeholder"),
+    "aria-label": t("composer.label")
+  });
+  const open = isOpen(task);
+  const send = h("button.btn.btn-primary.composer-send", { type: "submit", disabled: !open, title: t("composer.sendHint") },
+    icon("send"), h("span", null, t("composer.send")));
+  const intents = segmented("intent", ["discuss", "record", "develop"].map(function (value) {
+    return { value: value, label: t("intent." + value), title: t("intent." + value + ".hint") };
+  }), intent, function (value) { intent = value; });
+  const receipt = receiptLine(open ? t("receipt.notSubmitted") : t("composer.closed"));
+  const facets = h("div.facets");
+  form.append(h("div.composer-box", null, message, h("div.composer-bar", null, intents, h("span.spacer"), send)), receipt, facets);
+  form.addEventListener("input", function () { form.dataset.unsent = message.value ? "true" : "false"; });
+  message.addEventListener("keydown", function (event) {
+    if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) { event.preventDefault(); form.requestSubmit(); }
+  });
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    if (send.disabled || !message.value.trim()) return;
+    clear(facets);
+    // requestId is the submission key: the same key retried returns the
+    // original Message and routing, never a second submission.
+    submitWrite({
+      control: send, receipt: receipt, form: form, t: t,
+      send: function (requestId) { return actions.sendMessage(task.id, message.value, requestId, intent); },
+      saved: function (result) {
+        setReceipt(receipt, t("receipt.saved") + " · " + result.record.id, "ok");
+        renderSubmissionFacets(facets, result.submission, t);
+        message.value = "";
+      },
+      rejectedKey: "receipt.notSubmittedBecause", unknownKey: "receipt.unknownMessage", afterWrite: actions.afterWrite
+    });
+  });
+  return form;
+}
+
+// Each submission facet is reported on its own line, never collapsed into a
+// single "started". A missing facet block is a contract violation and is
+// reported as such rather than reinterpreted.
+export function renderSubmissionFacets(container, submission, t) {
+  clear(container);
+  if (!submission) { container.append(h("p.faint.small", null, t("facet.missing"))); return; }
+  const rows = [
+    ["facet.phase", "phase." + submission.phase, submission.phase],
+    ["facet.planning", "planningFacet." + submission.planning, submission.planning],
+    ["facet.activation", "activation." + submission.activation, submission.activation],
+    ["facet.delivery", "deliveryFacet." + submission.delivery, submission.delivery]
+  ];
+  container.append(h("dl.kv.kv-compact", null, rows.map(function (row) {
+    return [h("dt", null, t(row[0])), h("dd", null, t(row[1], row[2]))];
+  })));
+  const step = submission.nextStep;
+  const text = step ? nextStepText(step, t) : "";
+  if (text) container.append(h("p.next-step", { dataset: { nextStep: step.kind } }, icon("flag", "icon-sm"), h("span", null, text)));
+}
+
+function nextStepText(step, t) {
+  if (step.kind === "activate-manually") return fill(t("next.activateManually"), { task: step.taskId });
+  if (step.kind === "start-execution") return fill(t("next.startExecution"), { task: step.taskId });
+  if (step.kind === "await-pending-activation") return fill(t("next.awaitActivation"), { ref: step.activationRef });
+  if (step.kind === "resolve-failed-activation") return fill(t("next.resolveFailed"), { failure: step.failure, ref: step.activationRef });
+  return "";
+}
+
+// --- Queue / steer / interrupt ----------------------------------------------
+// The same three application-layer actions the CLI drives. Steer and
+// interrupt name an exact current Turn; a mismatch is a visible failure
+// receipt, never a silent downgrade to a queue.
+export function controlForm(task, t, actions, roleNames) {
+  let kind = "queue";
+  const form = h("form.stack");
+  const inputs = controlInputs(task, t, roleNames);
+  const fields = controlFields(inputs, t);
+  const submit = button(t("control.submit"), { type: "submit", variant: "primary", icon: "send", disabled: !isOpen(task) });
+  const receipt = receiptLine(t("receipt.notSubmitted"));
+  const apply = function () { applyControlKind(kind, inputs, fields); };
+  const actionsSeg = segmented("action", ["queue", "steer", "interrupt"].map(function (value) {
+    return { value: value, label: t("control." + value), title: t("control." + value + ".hint") };
+  }), kind, function (value) { kind = value; apply(); });
+  form.append(h("div.field", null, h("span", null, t("control.action")), actionsSeg),
+    h("div.field-row", null, fields.role, fields.workItem), inputs.roles, fields.body, fields.expected, fields.then,
+    h("div.form-actions", null, submit), receipt);
+  apply();
+  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 actions.control(task.id, controlPayload(kind, inputs, requestId)); },
+      // The receipt states exactly what settled; none of these states implies
+      // the Provider executed the input.
+      saved: function (result) { setReceipt(receipt, controlReceipt(result, t), "ok"); },
+      rejectedKey: "receipt.notSubmittedBecause", unknownKey: "receipt.unknownControl", afterWrite: actions.afterWrite
+    });
+  });
+  return form;
+}
+
+function controlInputs(task, t, roleNames) {
+  return {
+    role: h("input", { list: "control-roles-" + task.id, placeholder: t("control.rolePlaceholder") }),
+    roles: h("datalist", { id: "control-roles-" + task.id }, (roleNames || []).map(function (name) { return h("option", { value: name }); })),
+    body: h("textarea", { maxLength: 8000, rows: 3 }),
+    expected: h("input.mono", { placeholder: t("control.expectedPlaceholder") }),
+    workItem: h("input.mono"),
+    then: h("input.mono", { placeholder: t("control.thenPlaceholder") })
+  };
+}
+
+function controlFields(inputs, t) {
+  return {
+    role: field(t("control.role"), inputs.role),
+    body: field(t("control.message"), inputs.body),
+    expected: field(t("control.expectedTurn"), inputs.expected, t("control.expectedHint")),
+    workItem: field(t("control.workItem"), inputs.workItem),
+    then: field(t("control.then"), inputs.then)
+  };
+}
+
+function applyControlKind(kind, inputs, fields) {
+  fields.body.hidden = kind === "interrupt";
+  fields.expected.hidden = kind === "queue";
+  fields.then.hidden = kind !== "interrupt";
+  fields.workItem.hidden = kind === "interrupt";
+  inputs.role.required = kind !== "queue";
+  inputs.body.required = kind !== "interrupt";
+  inputs.expected.required = kind !== "queue";
+}
+
+function controlPayload(kind, inputs, requestId) {
+  const payload = { action: kind, requestId: requestId };
+  const role = inputs.role.value.trim();
+  if (kind === "interrupt") {
+    payload.role = role;
+    payload.expectedTarget = inputs.expected.value.trim();
+    if (inputs.then.value.trim()) payload.thenMessage = inputs.then.value.trim();
+    return payload;
+  }
+  payload.body = inputs.body.value;
+  if (kind === "steer") { payload.to = role; payload.expectedTarget = inputs.expected.value.trim(); }
+  else if (role) payload.to = role;
+  if (inputs.workItem.value.trim()) payload.workItem = inputs.workItem.value.trim();
+  return payload;
+}
+
+function controlReceipt(result, t) {
+  const settled = result.steer || result.interrupt || result.delivery || { state: result.disposition };
+  return t("receipt.receipt") + " " + result.action + " · " + settled.state
+    + (settled.outcome ? " · " + settled.outcome : "") + (settled.detail ? " · " + settled.detail : "")
+    + (result.record ? " · " + result.record.id : "");
+}
+
+// --- Title -------------------------------------------------------------------
+export function titleForm(task, t, actions) {
+  const form = h("form.inline-form");
+  const archived = task.status === "archived";
+  const input = h("input", { value: task.title, required: true, maxLength: 500, disabled: archived, "aria-label": t("details.title") });
+  const save = button(t("actions.save"), { type: "submit", variant: "primary", disabled: archived });
+  const receipt = receiptLine(t("receipt.notSubmitted"));
+  form.append(h("div.inline-row", null, input, save), receipt);
+  form.addEventListener("input", function () { form.dataset.unsent = input.value !== task.title ? "true" : "false"; });
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    if (save.disabled) return;
+    submitWrite({
+      control: save, receipt: receipt, form: form, t: t,
+      send: function (requestId) { return actions.updateTask(task.id, { title: input.value }, requestId); },
+      saved: function (result) {
+        setReceipt(receipt, t("receipt.savedRevision") + " " + result.revision, "ok");
+        input.value = result.record.title;
+      },
+      rejectedKey: "receipt.notSavedBecause", unknownKey: "receipt.unknownSave", afterWrite: actions.afterWrite
+    });
+  });
+  return form;
+}
+`;

package/dist/web/assets/client/domain/vocab.js

@@ -0,0 +1,69 @@
+import { AGENT_ADAPTER_CATALOG } from "../../../../agent/adapterCatalog.js";
+import { AGENT_EXECUTION_COMPONENT_CATALOG } from "../../../../agent/executionComponents.js";
+export const VOCAB_SCRIPT = String.raw `
+// Domain vocabulary: translated labels, semantic tones and the status badges
+// built from them. Unknown values stay visible verbatim, never hidden or
+// guessed.
+import { h } from "/assets/js/lib/dom.js";
+import { badge, chip } from "/assets/js/ui/primitives.js";
+
+// Generated from the server catalogs, not a second product registry.
+const adapterLabels = ${JSON.stringify(Object.fromEntries(AGENT_ADAPTER_CATALOG.map(({ id, label }) => [id, label])))};
+const componentLabels = ${JSON.stringify(Object.fromEntries(AGENT_EXECUTION_COMPONENT_CATALOG.map(({ id, label }) => [id, label])))};
+export function agentLabel(component, adapterId) {
+  return component ? componentLabels[component] || component : adapterLabels[adapterId] || adapterId;
+}
+
+export function label(t, prefix, value) {
+  if (value === undefined || value === null || value === "") return "—";
+  return t(prefix + "." + value, String(value).replace(/[-_]/g, " "));
+}
+
+const TONES = {
+  task: { draft: "warn", active: "info", completed: "ok", cancelled: "idle", archived: "idle" },
+  exec: {
+    "needs-leader-action": "accent", "waiting-on-agents": "info", "waiting-user": "warn",
+    recovering: "warn", attention: "bad", "progressing-with-attention": "warn", blocked: "bad",
+    conflicted: "warn", working: "info", completed: "ok", retired: "idle", cancelled: "idle",
+    accepted: "ok", open: "info", archived: "idle"
+  },
+  run: { active: "info", completed: "ok", failed: "bad" },
+  work: { open: "info", accepted: "ok", retired: "idle" },
+  review: { pending: "idle", running: "info", completed: "ok", failed: "bad" },
+  job: { queued: "idle", running: "info", succeeded: "ok", failed: "bad", "timed-out": "bad",
+    cancelled: "idle", "unknown-needs-attention": "warn" },
+  session: { active: "ok", waiting: "warn", quiet: "idle", diagnostic: "bad", unknown: "idle",
+    stopped: "bad", idle: "idle", background: "warn" },
+  role: { running: "ok", waiting: "warn", idle: "idle", unknown: "idle", failed: "bad", exited: "idle", detached: "idle" },
+  decision: { active: "ok", superseded: "idle" },
+  input: { open: "warn", answered: "ok", cancelled: "idle", "auto-resolved": "ok" },
+  integration: { running: "info", validating: "info", committed: "ok", conflicted: "warn", blocked: "bad",
+    failed: "bad", superseded: "idle" }
+};
+export function tone(kind, value) {
+  return (TONES[kind] && TONES[kind][value]) || "idle";
+}
+
+export function statusBadge(t, kind, prefix, value) {
+  const element = badge(label(t, prefix, value), tone(kind, value), { dot: true });
+  element.dataset.status = value;
+  return element;
+}
+
+// Native Session groups in display order, and one badge per non-empty group.
+export const SESSION_GROUPS = ["active", "waiting", "background", "quiet", "diagnostic", "stopped", "unknown", "idle"];
+export function sessionBadges(counts, t) {
+  return SESSION_GROUPS.filter(function (group) { return counts && counts[group]; }).map(function (group) {
+    return badge(counts[group] + " " + t("session." + group), tone("session", group), { dot: true });
+  });
+}
+
+export function agentChips(agent) {
+  if (!agent) return null;
+  const chips = [];
+  if (agent.adapterId || agent.component) chips.push(chip(agentLabel(agent.component, agent.adapterId), "chip-strong"));
+  if (agent.model) chips.push(chip(agent.model));
+  if (agent.effort) chips.push(chip(agent.effort));
+  return chips.length ? h("span.chip-row", null, chips) : null;
+}
+`;

package/dist/web/assets/client/domain/work.js

@@ -0,0 +1,116 @@
+export const WORK_SCRIPT = String.raw `
+// Work items and input requests: what the Task is doing and what it is
+// waiting on the user for.
+import { h, icon } from "/assets/js/lib/dom.js";
+import { relativeTime } from "/assets/js/lib/format.js";
+import { badge, chip, dot, mono, note, timeTag } from "/assets/js/ui/primitives.js";
+import { richText } from "/assets/js/ui/text.js";
+import { label, statusBadge, tone } from "/assets/js/domain/vocab.js";
+
+// --- Input requests ----------------------------------------------------------
+export function inputCard(input, t, locale, onAnswer) {
+  const policy = input.policy && input.policy.kind;
+  const element = h("article.input-card");
+  element.append(h("div.input-head", null,
+    h("span.input-kicker", null, icon("inbox", "icon-sm"), t("input.kicker")),
+    policy ? badge(label(t, "input", policy), policy === "required" ? "bad" : "warn") : null,
+    input.policy && input.policy.timeoutAt
+      ? h("span.input-timeout", null, icon("clock", "icon-sm"),
+        t("input.timeoutAt") + " " + relativeTime(input.policy.timeoutAt, locale, t)) : null,
+    timeTag(input.createdAt, locale, t)));
+  element.append(h("p.input-question", null, input.question));
+  const facts = inputFacts(input, t);
+  if (facts.length) element.append(h("p.input-facts", null, facts.join("  ·  ")));
+  element.append(input.choices && input.choices.length ? inputChoices(input, t, onAnswer) : inputAnswerForm(input, t, onAnswer));
+  element.append(h("p.receipt", { role: "status", dataset: { inputReceipt: input.id } }));
+  return element;
+}
+
+function inputFacts(input, t) {
+  const facts = [];
+  if (input.requester) facts.push(t("input.from") + " " + input.requester.roleName
+    + " · " + (input.requester.runId || input.requester.nativeSessionId || ""));
+  if (input.blockedRefs && input.blockedRefs.length) facts.push(t("input.blocks") + " "
+    + input.blockedRefs.map(function (ref) { return ref.type + " " + ref.id; }).join(", "));
+  return facts;
+}
+
+function inputChoices(input, t, onAnswer) {
+  const recommended = input.policy && input.policy.recommendedChoiceKey;
+  return h("div.input-choices", null, input.choices.map(function (choice) {
+    return h("button.choice" + (choice.key === recommended ? ".is-recommended" : ""), {
+      type: "button",
+      onclick: function (event) { onAnswer(input, { choiceKey: choice.key }, event.currentTarget); }
+    }, h("span", null, choice.label), choice.key === recommended ? badge(t("input.recommended"), "accent") : null);
+  }));
+}
+
+function inputAnswerForm(input, t, onAnswer) {
+  const field = h("input", { type: "text", required: true, placeholder: t("input.freeText"), "aria-label": input.question, maxLength: 8000 });
+  const form = h("form.input-form", null, field,
+    h("button.btn.btn-primary", { type: "submit" }, icon("send"), h("span", null, t("actions.answer"))));
+  form.addEventListener("input", function () { form.dataset.unsent = field.value ? "true" : "false"; });
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const text = field.value.trim();
+    if (text) onAnswer(input, { text: text }, form.querySelector("button"));
+  });
+  return form;
+}
+
+// --- Work items --------------------------------------------------------------
+export function workItemCard(item, t, locale, titles) {
+  const settled = item.status !== "open";
+  const element = h(settled ? "details.work-card.is-settled" : "article.work-card");
+  element.dataset.viewKey = "work:" + item.id;
+  element.append(h(settled ? "summary.work-head" : "header.work-head", null,
+    settled ? icon("chevron", "disclosure-chevron") : null,
+    dot(tone("work", item.status)),
+    h("span.work-title", null, item.title),
+    statusBadge(t, "work", "work", item.status)));
+  element.append(h("div.work-body", null, workItemBody(item, t, locale, titles)));
+  return element;
+}
+
+// The body of one work item, shared by the open card and a lazily read row.
+export function workItemBody(item, t, locale, titles) {
+  const parts = [];
+  parts.push(h("div.meta-line", null,
+    item.assignee ? h("span.meta-strong", null, icon("user", "icon-sm"), item.assignee) : null,
+    mono(item.id), timeTag(item.updatedAt, locale, t)));
+  if (item.objective && item.objective !== item.title) parts.push(richText(t("work.objective"), item.objective, t));
+  if (item.acceptance && item.acceptance.length) parts.push(acceptanceList(item, t));
+  const deps = (item.dependsOn || []).map(function (id) { return (titles && titles[id]) || id; });
+  if (deps.length) parts.push(chipLine(t("work.dependsOn"), deps));
+  if (item.writeProjectIds && item.writeProjectIds.length) parts.push(chipLine(t("work.writeProjects"), item.writeProjectIds));
+  if (item.candidates && item.candidates.length) parts.push(candidateList(item, t, locale));
+  if (item.disposition) {
+    parts.push(note(t("work.disposition") + ": " + item.disposition.summary
+      + (item.disposition.replacementWorkItemId ? " → " + item.disposition.replacementWorkItemId : "")));
+  }
+  if (item.outcome) parts.push(richText(t("work.outcome"), item.outcome, t, { className: "callout" }));
+  return parts.filter(Boolean);
+}
+
+function chipLine(title, values) {
+  return h("div.meta-line", null, h("span.meta-label", null, title), values.map(function (value) { return chip(value); }));
+}
+
+function acceptanceList(item, t) {
+  const done = item.status === "accepted";
+  return h("div.prose-block", null, h("h4.prose-label", null, t("work.acceptance")),
+    h("ul.checklist", null, item.acceptance.map(function (entry) {
+      return h("li" + (done ? ".is-done" : ""), null, icon(done ? "check" : "target", "icon-sm"), h("span", null, entry));
+    })));
+}
+
+function candidateList(item, t, locale) {
+  const newestFirst = item.candidates.slice().sort(function (a, b) { return b.sequence - a.sequence; });
+  return h("div.prose-block", null, h("h4.prose-label", null, t("work.candidates")),
+    h("ol.candidates", null, newestFirst.map(function (candidate) {
+      return h("li", null, h("span.candidate-seq", null, "#" + candidate.sequence), h("span", null, candidate.summary),
+        h("span.faint", null, candidate.source && candidate.source.type === "run" ? candidate.source.runId : t("work.direct")),
+        timeTag(candidate.createdAt, locale, t));
+    })));
+}
+`;