@zq-silk/yui 2.3.0 → 2.5.0

package/dist/web/assets/client/{overview.js → views/overview.js}

@@ -1,75 +1,87 @@
 export const OVERVIEW_SCRIPT = String.raw `
-// Workspace overview, shown in the center while no Task is selected.
-import { h, icon, clear } from "/assets/js/dom.js";
-import { byNewest, formatDateTime, relativeTime } from "/assets/js/format.js";
-import { card, dot, tone, label, metricTile, emptyState, button, badge, note } from "/assets/js/components.js";
-import { ATTENTION_KINDS } from "/assets/js/sidebar.js";
-
-const SESSION_GROUPS = ["active", "waiting", "background", "quiet", "diagnostic", "stopped", "unknown", "idle"];
+// Workspace overview, shown in the center while no Task is selected: one
+// reading column with the work path first (answer, in progress, recent),
+// then catalog-wide signals and the explicit Session read.
+import { h, icon, clear } from "/assets/js/lib/dom.js";
+import { byNewest, fill, formatDateTime, relativeTime } from "/assets/js/lib/format.js";
+import { badge, button, dot, emptyState, note } from "/assets/js/ui/primitives.js";
+import { card } from "/assets/js/ui/containers.js";
+import { metricTile } from "/assets/js/ui/metrics.js";
+import { label, sessionBadges, tone } from "/assets/js/domain/vocab.js";
+import { ATTENTION_KINDS } from "/assets/js/views/sidebar.js";
 
 export function renderOverview(container, state, t, locale, actions) {
   clear(container);
-  const counts = state.counts;
+  const tasks = state.tasks || [];
+  const active = tasks.filter(function (task) { return task.status === "active"; });
+  const recent = tasks.filter(function (task) { return task.status !== "archived"; }).slice().sort(byNewest).slice(0, 8);
   const page = h("div.page.overview");
-  page.append(h("header.page-head", null,
+  page.append(overviewHead(state.counts, t, actions), metricStrip(state.counts, t));
+  page.append(h("div.card-stack", null,
+    inboxCard(state, t, actions),
+    taskListCard(t("overview.activeNow"), "pulse", active, t("overview.activeEmpty"), t, locale, actions),
+    taskListCard(t("overview.recent"), "history", recent, t("sidebar.empty"), t, locale, actions),
+    catalogCard(state, t, actions),
+    sessionCard(state, t, locale, actions)));
+  page.append(h("p.page-foot", null, t("overview.pageScope")));
+  container.append(page);
+}
+
+function overviewHead(counts, t, actions) {
+  return h("header.page-head", null,
     h("div.page-head-main", null,
       h("p.kicker", null, t("overview.kicker")),
       h("h1.page-title", null, t("overview.title")),
       h("p.page-sub", null, counts
-        ? t("overview.sub").replace("{total}", String(counts.total)).replace("{active}", String(counts.active || 0))
+        ? fill(t("overview.sub"), { total: counts.total, active: counts.active || 0 })
         : t("loading.dashboard"))),
     h("div.page-head-actions", null,
-      button(t("actions.operator"), { icon: "terminal", variant: "ghost", onClick: actions.openOperator }))));
+      button(t("actions.operator"), { icon: "terminal", variant: "ghost", onClick: actions.openOperator })));
+}
 
-  page.append(h("div.metric-strip", null,
+function metricStrip(counts, t) {
+  return h("div.metric-strip", null,
     metricTile(t("metrics.inputs"), counts ? counts.openInputs : "—", { tone: counts && counts.openInputs ? "warn" : "" }),
     metricTile(t("metrics.active"), counts ? counts.active : "—", { tone: "info" }),
     metricTile(t("metrics.draft"), counts ? counts.draft : "—"),
     metricTile(t("metrics.completed"), counts ? counts.completed : "—", { tone: "ok" }),
-    metricTile(t("metrics.total"), counts ? counts.total : "—")));
+    metricTile(t("metrics.total"), counts ? counts.total : "—"));
+}
 
-  // One reading column: the work path first (answer, in progress, recent),
-  // then catalog-wide signals and the explicit Session read.
-  // Open questions: the catalog names the affected Tasks, never the questions.
+// Open questions: the catalog names the affected Tasks, never the questions.
+function inboxCard(state, t, actions) {
+  const counts = state.counts;
   const inbox = card({ title: t("overview.inbox"), icon: "inbox", count: counts ? counts.openInputs : null });
   const items = state.attention || [];
   if (!items.length) {
     inbox.body.append(emptyState(counts && counts.openInputs > 0 ? t("overview.inboxElsewhere") : t("overview.inboxEmpty"), "check"));
-  } else {
-    inbox.body.append(h("div.row-list", null, items.slice(0, 8).map(function (item) {
-      return h("button.list-row", { type: "button", onclick: function () { actions.select(item.taskId); } },
-        dot("warn"), h("span.list-row-title", null, item.taskTitle), h("code.id", null, item.taskId),
-        h("span.list-row-go", null, t("overview.answer"), icon("chevron", "icon-sm")));
-    })));
+    return inbox;
   }
+  inbox.body.append(h("div.row-list", null, items.slice(0, 8).map(function (item) {
+    return h("button.list-row", { type: "button", onclick: function () { actions.select(item.taskId); } },
+      dot("warn"), h("span.list-row-title", null, item.taskTitle), h("code.id", null, item.taskId),
+      h("span.list-row-go", null, t("overview.answer"), icon("chevron", "icon-sm")));
+  })));
+  return inbox;
+}
 
+function catalogCard(state, t, actions) {
   const catalog = card({ title: t("overview.catalog"), icon: "broadcast", hint: t("overview.catalogHint") });
-  if (state.catalogAttention) {
-    catalog.body.append(h("div.row-list", null, ATTENTION_KINDS.map(function (kind) {
-      const value = state.catalogAttention[kind];
-      if (!value) return null;
-      return h("button.list-row", {
-        type: "button", disabled: value.taskCount === 0,
-        "aria-pressed": String(state.attentionFilter === kind),
-        onclick: function () { actions.filterAttention(kind); }
-      },
-      h("span.list-row-title", null, t("catalog." + kind)),
-      h("span.list-row-count", null, String(value.count)),
-      h("span.faint", null, value.taskCount + " " + t("overview.tasks")));
-    })));
-    catalog.body.append(note(t("overview.signalsHelp")));
-  } else catalog.body.append(emptyState(t("loading.dashboard")));
-
-  const active = (state.tasks || []).filter(function (task) { return task.status === "active"; });
-  const recent = (state.tasks || []).filter(function (task) { return task.status !== "archived"; }).slice().sort(byNewest).slice(0, 8);
-  page.append(h("div.card-stack", null,
-    inbox,
-    taskListCard(t("overview.activeNow"), "pulse", active, t("overview.activeEmpty"), t, locale, actions),
-    taskListCard(t("overview.recent"), "history", recent, t("sidebar.empty"), t, locale, actions),
-    catalog,
-    sessionCard(state, t, locale, actions)));
-  page.append(h("p.page-foot", null, t("overview.pageScope")));
-  container.append(page);
+  if (!state.catalogAttention) { catalog.body.append(emptyState(t("loading.dashboard"))); return catalog; }
+  catalog.body.append(h("div.row-list", null, ATTENTION_KINDS.map(function (kind) {
+    const value = state.catalogAttention[kind];
+    if (!value) return null;
+    return h("button.list-row", {
+      type: "button", disabled: value.taskCount === 0,
+      "aria-pressed": String(state.attentionFilter === kind),
+      onclick: function () { actions.filterAttention(kind); }
+    },
+    h("span.list-row-title", null, t("catalog." + kind)),
+    h("span.list-row-count", null, String(value.count)),
+    h("span.faint", null, value.taskCount + " " + t("overview.tasks")));
+  })));
+  catalog.body.append(note(t("overview.signalsHelp")));
+  return catalog;
 }
 
 function taskListCard(title, iconName, tasks, empty, t, locale, actions) {
@@ -102,9 +114,7 @@ function sessionCard(state, t, locale, actions) {
   }
   element.body.append(h("p.faint.small", null, t("overview.readAt") + " " + formatDateTime(overview.readAt, locale)));
   element.body.append(h("div.row-list", null, overview.tasks.map(function (task) {
-    const chips = SESSION_GROUPS.filter(function (group) { return task.counts && task.counts[group]; }).map(function (group) {
-      return badge(task.counts[group] + " " + t("session." + group), tone("session", group), { dot: true });
-    });
+    const chips = sessionBadges(task.counts, t);
     return h("button.list-row.list-row-wrap", { type: "button", onclick: function () { actions.select(task.taskId); } },
       h("span.list-row-title", null, task.title), h("code.id", null, task.taskId),
       h("span.chip-row", null, chips.length ? chips : h("span.faint", null, t("session.noneRecorded"))));

package/dist/web/assets/client/{sidebar.js → views/sidebar.js}

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

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

@@ -0,0 +1,152 @@
+export const SKILLS_SCRIPT = String.raw `
+import { h } from "/assets/js/lib/dom.js";
+import { requestJson, submitMutation } from "/assets/js/lib/api.js";
+
+export function mountSkills(root, t) {
+  if (!root) return;
+  const tr = (key, fallback) => t("skills.browser." + key, fallback);
+  const scope = h("select", null, h("option", { value: "global" }, tr("global", "Global Role")),
+    h("option", { value: "task" }, tr("task", "Task Role")));
+  const task = h("input", { placeholder: "task-123", disabled: true });
+  const roles = h("select");
+  const status = h("p", { role: "status", "aria-live": "polite" });
+  const bindings = h("div.settings-stack");
+  const frozen = h("div.settings-stack");
+  const query = h("input", { type: "search" });
+  const catalog = h("div.settings-stack");
+  const reader = h("div.settings-stack", { tabindex: "-1" });
+  const acknowledge = h("input", { type: "checkbox" });
+  const acknowledgement = h("label.settings-reset", null, acknowledge, tr("ack", "Keep any live global Session on its existing version."));
+  const save = h("button.btn.btn-primary", { type: "button", disabled: true }, tr("save", "Save bindings"));
+  const reload = h("button.btn", { type: "button" }, tr("reload", "Load / reload Role"));
+  const more = h("button.btn", { type: "button", hidden: true }, tr("more", "More Skills"));
+  const search = h("button.btn", { type: "button" }, tr("search", "Search"));
+  let state = null, draft = [], busy = false, uncertain = false, generation = 0, catalogGeneration = 0, readerGeneration = 0;
+  const selected = () => ({ scope: scope.value, role: roles.value, ...(scope.value === "task" ? { task: task.value.trim() } : {}) });
+  const params = object => new URLSearchParams(object).toString();
+  const label = (text, control) => h("label.field", null, h("span", null, text), control);
+  function dirty() { return !!state && JSON.stringify(draft) !== JSON.stringify(state.skills); }
+  function invalidate() {
+    generation++; state = null; draft = []; bindings.replaceChildren(); frozen.replaceChildren(); save.disabled = true;
+    scope.disabled = roles.disabled = false; task.disabled = scope.value !== "task";
+    acknowledgement.hidden = scope.value !== "global";
+  }
+  function renderBindings() {
+    // A draft remains attached to the exact Role baseline until saved or explicitly reloaded.
+    [scope, roles].forEach(c => { c.disabled = busy || dirty(); });
+    task.disabled = busy || dirty() || scope.value !== "task";
+    bindings.replaceChildren(h("h3", null, tr("configured", "Configured bindings")),
+      ...draft.map(id => h("div.settings-actions", null, h("code", null, id),
+        h("button.btn", { type: "button", disabled: busy || uncertain, onclick: () => { draft = draft.filter(s => s !== id); renderBindings(); } }, tr("remove", "Remove binding")),
+        h("button.btn", { type: "button", onclick: () => read({ id }) }, tr("readSource", "Read current source")))));
+    if (!draft.length) bindings.append(h("p", null, tr("none", "No additional bindings. Built-in Role Skills are loaded automatically.")));
+    save.disabled = busy || uncertain || !dirty();
+  }
+  function renderEvidence(data) {
+    frozen.replaceChildren(h("h3", null, tr("frozen", "Current Session · frozen evidence")));
+    if (!data.session) frozen.append(h("p", null, tr("noSession", "No current Session. No loaded version can be claimed.")));
+    else {
+      frozen.append(h("p.mono-line", null, data.session.nativeSessionId + " · " + data.session.status +
+        " · " + tr("revision", "launch / desired revision") + " " + data.session.sourceDesiredRevision + " / " + data.launchRevision));
+      if (!data.session.packages) frozen.append(h("p", null, tr("unrecorded", "This Session has no frozen package evidence. Current source is not a substitute.")));
+      else data.session.packages.forEach(pkg => frozen.append(h("div.settings-stack", null,
+        h("strong", null, pkg.id), h("code.mono-line", null, pkg.digest),
+        h("span.mono-line", null, pkg.source.kind + " · " + pkg.source.path),
+        h("button.btn", { type: "button", onclick: () => read({ ...data.target, id: pkg.id, digest: pkg.digest, frozen: "true" }) }, tr("readFrozen", "Read frozen package")))));
+    }
+  }
+  async function read(input) {
+    const current = ++readerGeneration;
+    reader.textContent = tr("loading", "Loading…");
+    try {
+      const data = await requestJson("/api/skills/file?" + params(input));
+      if (current !== readerGeneration) return;
+      const files = h("select", null, data.files.map(path => h("option", { value: path }, path)));
+      files.value = data.resource;
+      files.addEventListener("change", () => read({ ...input, resource: files.value }));
+      reader.replaceChildren(h("h3", null, data.id + " · " + data.resource),
+        h("p.mono-line", null, data.source.kind + " · " + data.source.path),
+        h("p.mono-line", null, tr("version", "Package version") + ": " + data.version),
+        h("p.mono-line", null, "SHA-256 (" + tr("file", "file") + "): " + data.fileDigest),
+        label(tr("resource", "Read a resource (never executed)"), files),
+        h("pre.settings-observation", { tabindex: "0" }, data.content));
+      reader.focus({ preventScroll: true }); reader.scrollIntoView({ block: "start" });
+    } catch (error) {
+      if (current === readerGeneration) { reader.textContent = error.message; reader.scrollIntoView({ block: "nearest" }); }
+    }
+  }
+  async function loadRole() {
+    if (busy) return;
+    if (dirty() && !window.confirm(tr("discard", "Discard unsaved Skill bindings and reload?"))) return;
+    const current = ++generation;
+    status.textContent = tr("loading", "Loading…");
+    try {
+      const roleNames = await requestJson("/api/skills/roles?" + params({ scope: scope.value, ...(scope.value === "task" ? { task: task.value.trim() } : {}) }));
+      if (current !== generation) return;
+      const previous = roles.value;
+      roles.replaceChildren(...roleNames.map(r => h("option", { value: r.name }, r.name)));
+      if (roleNames.some(r => r.name === previous)) roles.value = previous;
+      if (!roles.value) { invalidate(); status.textContent = tr("noRoles", "No Roles in this scope."); return; }
+      const data = await requestJson("/api/skills/role?" + params(selected()));
+      if (current !== generation) return;
+      state = data; draft = [...data.skills]; uncertain = false; renderBindings();
+      status.textContent = tr("nextLaunch", "Bindings apply to a subsequent launch; saving does not load a Skill or restart a Session. Removing a binding never deletes its package.");
+      renderEvidence(data);
+    } catch (error) { if (current === generation) { invalidate(); status.textContent = error.message; } }
+  }
+  async function loadCatalog(cursor) {
+    const current = ++catalogGeneration;
+    more.disabled = search.disabled = true;
+    try {
+      const data = await requestJson("/api/skills/catalog?" + params({ q: query.value.trim(), cursor: cursor || "0" }));
+      if (current !== catalogGeneration) return;
+      if (!cursor) catalog.replaceChildren();
+      if (!data.items.length) catalog.append(h("p", null, tr("noMatches", "No matching Skills.")));
+      data.items.forEach(item => catalog.append(h("article.settings-card", null,
+        h("h3", null, item.id), h("p", null, item.description || item.error),
+        h("small.mono-line", null, item.source.kind + " · " + item.source.path),
+        h("div.settings-actions", null,
+          h("button.btn", { type: "button", onclick: () => read({ id: item.id }) }, tr("readSource", "Read current source")),
+          h("button.btn", { type: "button", disabled: !!item.error, onclick: () => {
+            if (!state || busy || uncertain) { status.textContent = tr("choose", "Load an explicit Role before editing bindings."); return; }
+            if (!draft.includes(item.id)) draft.push(item.id);
+            renderBindings(); status.textContent = tr("unsaved", "Unsaved bindings. Review the selected Role and save.");
+            bindings.scrollIntoView({ block: "nearest" });
+          } }, tr("add", "Add to selected Role"))))));
+      more.hidden = !data.nextCursor; more.onclick = () => loadCatalog(data.nextCursor);
+    } catch (error) { catalog.replaceChildren(h("p", null, error.message)); }
+    finally { if (current === catalogGeneration) more.disabled = search.disabled = false; }
+  }
+  save.addEventListener("click", async () => {
+    if (!state || busy || uncertain || !dirty()) return;
+    busy = true; renderBindings();
+    [scope, task, roles, reload].forEach(c => { c.disabled = true; });
+    try {
+      const result = await submitMutation("skills/" + JSON.stringify(state.target), "/api/skills/role",
+        { target: state.target, revision: state.revision, skills: draft, acknowledgeLive: acknowledge.checked });
+      state = result.role; draft = [...state.skills];
+      renderEvidence(state);
+      status.textContent = tr("saved", "Bindings saved. Existing frozen Sessions and Runs are unchanged; no package was deleted.");
+    } catch (error) {
+      uncertain = error.disposition !== "not-submitted";
+      status.textContent = error.message + (uncertain ? "\n" + tr("unknown", "Save outcome unknown. Reload and compare before making another change.") : "");
+    } finally {
+      busy = false; [scope, roles, reload].forEach(c => { c.disabled = false; }); task.disabled = scope.value !== "task"; renderBindings();
+    }
+  });
+  scope.addEventListener("change", () => { invalidate(); task.disabled = scope.value !== "task"; });
+  task.addEventListener("input", invalidate);
+  roles.addEventListener("change", () => { invalidate(); void loadRole(); });
+  reload.addEventListener("click", loadRole);
+  search.addEventListener("click", () => loadCatalog());
+  query.addEventListener("keydown", event => { if (event.key === "Enter") { event.preventDefault(); void loadCatalog(); } });
+  window.addEventListener("beforeunload", event => { if (dirty()) { event.preventDefault(); event.returnValue = ""; } });
+  root.replaceChildren(h("h2", null, tr("title", "Skills · browse & bind")),
+    h("p", null, tr("intro", "Read existing packages and choose additional bindings for one explicit Role. Scripts are displayed as data, never run.")),
+    h("div.settings-grid", null, label(tr("scope", "Scope"), scope), label(tr("taskId", "Task ID"), task), label("Role", roles)),
+    h("div.settings-actions", null, reload), status, bindings, acknowledgement,
+    h("div.settings-actions", null, save), frozen, label(tr("query", "Find an existing Skill by name or purpose"), query),
+    h("div.settings-actions", null, search), catalog, more, reader);
+  void loadRole(); void loadCatalog();
+}
+`;

package/dist/web/assets/client/views/task/actions.js

@@ -0,0 +1,36 @@
+export const TASK_ACTIONS_SCRIPT = String.raw `
+import { h } from "/assets/js/lib/dom.js";
+import { button, note } from "/assets/js/ui/primitives.js";
+import { card } from "/assets/js/ui/containers.js";
+import { receiptLine, setReceipt, submitWrite } from "/assets/js/ui/forms.js";
+
+export function taskActions(task, t, ctx) {
+  const element = card({ title: t("workbench.next"), icon: "chat" });
+  element.body.append(button(t("workbench.continue"), { variant: "primary", onClick: function () { ctx.openConversation(); } }));
+  const action = task.status === "draft" ? "activate"
+    : ["completed", "cancelled"].includes(task.status) ? "archive" : null;
+  if (!action) return element;
+  const activation = task.activationRequest;
+  const blocked = action === "activate" && (task.executionGate.state !== "enabled"
+    || activation && ["pending", "failed"].includes(activation.disposition));
+  const receipt = receiptLine(blocked ? (activation && activation.outcome || t("workbench.activationBlocked")) : t("receipt.notSubmitted"));
+  const control = button(t("workbench." + action), { disabled: !!blocked, onClick: function () {
+    if (!window.confirm(t("workbench." + action + "Confirm"))) return;
+    submitWrite({
+      control: control, receipt: receipt, form: element.body, t: t,
+      send: function (requestId) { return ctx.taskAction(task.id, action, requestId); },
+      saved: function (value) {
+        const result = value.result;
+        const text = action === "activate" ? result.operationRef + " · " + result.request.disposition
+          : result.task.id + " · " + result.task.status;
+        setReceipt(receipt, text, "ok");
+        return true;
+      },
+      rejectedKey: "receipt.notSubmittedBecause", unknownKey: "workbench.unknown",
+      afterWrite: ctx.afterWrite
+    });
+  } });
+  element.body.append(control, note(t("workbench." + action + "Hint")), receipt);
+  return element;
+}
+`;