@abot-ai/runtime 1.8.1 → 1.9.0

package/dist/src/web-ui/app/components/automations/run-history.js

@@ -0,0 +1,55 @@
+import { escapeHtml, formatTime } from "../../lib/text-format.js";
+
+const RUN_STATUSES = ["pending", "running", "stopping", "succeeded", "completed_with_skips", "failed", "cancelled", "interrupted", "missed"];
+
+function renderHistoryFilters(snapshot) {
+  const filters = snapshot.runsFilters || {};
+  return `<form class="automation-run-filters" data-run-history-filters id="automation-run-history-filters">
+    <label>Status<select name="status" id="automation-run-status-filter"><option value="">All statuses</option>${RUN_STATUSES.map((status) => `<option value="${status}"${filters.status === status ? " selected" : ""}>${escapeHtml(status.replaceAll("_", " "))}</option>`).join("")}</select></label>
+    <label>Scheduled from<input type="date" name="from" id="automation-run-date-from" value="${escapeHtml(filters.from || "")}" aria-describedby="automation-run-date-help"></label>
+    <label>Through<input type="date" name="to" id="automation-run-date-to" value="${escapeHtml(filters.to || "")}" aria-describedby="automation-run-date-help"></label>
+    <button type="submit"${snapshot.runsLoading ? " disabled" : ""}>Apply</button>
+    <button type="button" data-reset-run-history${snapshot.runsLoading ? " disabled" : ""}>Newest</button>
+    <small id="automation-run-date-help">Scheduled dates in your local time.</small>
+  </form>`;
+}
+
+function renderHistoryRow(run, selectedRunId) {
+  const status = run.status || "unknown";
+  return `<button type="button" data-select-run="${escapeHtml(run.id)}" data-run-id="${escapeHtml(run.id)}" aria-current="${run.id === selectedRunId}">
+    <span class="automation-run-time">${escapeHtml(formatTime(run.scheduledAt || run.startedAt || run.createdAt) || "Run")}</span>
+    <span class="automation-run-status" data-status="${escapeHtml(status)}">${escapeHtml(status.replaceAll("_", " "))}</span>
+  </button>`;
+}
+
+export function renderAutomationRunHistory(snapshot) {
+  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
+  const filtered = Object.values(snapshot.runsFilters || {}).some(Boolean);
+  const empty = snapshot.runsLoading ? "Loading runs…" : filtered ? "No runs match these filters." : "No runs yet.";
+  const canLoadMore = snapshot.runsNextCursor || snapshot.runsError;
+  return `<section class="automation-run-history" aria-labelledby="automation-run-history-heading">
+    <h4 id="automation-run-history-heading">Run history <span>${runs.length} loaded</span></h4>
+    ${renderHistoryFilters(snapshot)}
+    ${snapshot.runsFilterError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsFilterError)}</p>` : ""}
+    <div class="automation-run-choices" id="automation-run-history-list" aria-busy="${Boolean(snapshot.runsLoading)}">${runs.map((run) => renderHistoryRow(run, snapshot.selectedRunId)).join("") || `<p class="automation-muted">${empty}</p>`}</div>
+    ${snapshot.selectedRunId && !runs.some((run) => run.id === snapshot.selectedRunId) ? `<p class="automation-muted">The selected report is outside these results and remains open below.</p>` : ""}
+    <div class="automation-run-history-footer">
+      <span role="status">${snapshot.runsLoading ? "Loading…" : snapshot.runsNextCursor ? "Scroll for older runs" : runs.length ? "All matching runs loaded" : ""}</span>
+      ${canLoadMore ? `<button type="button" data-load-more-runs${snapshot.runsLoading ? " disabled" : ""}>${snapshot.runsError ? "Retry" : "Load more"}</button>` : ""}
+    </div>
+    ${snapshot.runsError ? `<p class="automation-run-history-error" role="alert">${escapeHtml(snapshot.runsError)}</p>` : ""}
+  </section>`;
+}
+
+export function revealSelectedAutomationRun(root, { focus = false } = {}) {
+  const list = root.querySelector("#automation-run-history-list");
+  const selected = list?.querySelector('[aria-current="true"]');
+  if (!selected) return;
+  if (focus) selected.focus({ preventScroll: true });
+  const viewport = list.getBoundingClientRect();
+  const row = selected.getBoundingClientRect();
+  const top = viewport.top + list.clientTop;
+  const bottom = top + list.clientHeight;
+  if (row.top < top) list.scrollTop += row.top - top;
+  else if (row.bottom > bottom) list.scrollTop += row.bottom - bottom;
+}

package/dist/src/web-ui/app/components/automations/run.js

@@ -1,18 +1,13 @@
-import { escapeHtml, formatTime } from "../../lib/text-format.js";
+import { escapeHtml } from "../../lib/text-format.js";
 import { findAutomationNode, renderAutomationNodeDetails, renderAutomationTimeline } from "./timeline.js";
 import { renderAutomationReport, renderAutomationStepEvidence } from "./run-report-view.js";
 import { renderAutomationRunSteps } from "./run-steps-view.js";
+import { renderAutomationRunHistory } from "./run-history.js";
 
 function runIsActive(run) {
   return ["running", "stopping", "pending"].includes(run?.status);
 }
 
-function renderRunChoices(snapshot) {
-  const runs = Array.isArray(snapshot.runs) ? snapshot.runs : [];
-  if (!runs.length) return `<p class="automation-muted">No runs yet.</p>`;
-  return `<div class="automation-run-choices" aria-label="Recent runs">${runs.map((run) => `<button type="button" data-select-run="${escapeHtml(run.id)}" aria-current="${run.id === snapshot.selectedRunId}">${escapeHtml(formatTime(run.startedAt || run.createdAt) || "Run")} · ${escapeHtml(run.status || "Unknown")}</button>`).join("")}</div>`;
-}
-
 export function renderAutomationRun(snapshot, { locked = false } = {}) {
   const run = snapshot.run;
   const current = snapshot.automations.find((item) => item.id === snapshot.selectedAutomationId);
@@ -26,7 +21,7 @@ export function renderAutomationRun(snapshot, { locked = false } = {}) {
     <div class="automation-heading"><div><button type="button" class="automation-text-button" data-action="${locked ? "return-studio" : "editor"}">← ${locked ? "ABot Studio" : "Editor"}</button><h3 dir="auto">${escapeHtml(title)}</h3><p>${run ? `Read-only run${definitionRevision ? ` · Revision ${escapeHtml(definitionRevision)}` : ""}` : "Select a saved run"}</p></div>
       <div class="automation-actions">${!locked && run ? `<button type="button" data-action="open-chat-run">Open read-only view</button>` : ""}${runIsActive(run) && run?.status !== "stopping" ? `<button type="button" class="automation-stop" data-action="stop">Stop run</button>` : ""}${!locked && run && !runIsActive(run) && current?.status !== "archived" ? `<button type="button" data-action="rerun"${rerunDisabled ? " disabled" : ""}${runPending ? ' aria-busy="true"' : ""}>${runPending ? "Starting…" : "Run again"}</button>` : ""}</div></div>
     <p class="automation-feedback" role="status" aria-live="polite" data-tone="${snapshot.error ? "error" : ""}">${escapeHtml(snapshot.error || snapshot.feedback || (run ? "Run details loaded." : "Open a run to see its timeline and report."))}</p>
-    ${locked ? "" : `<div class="automation-tabs" role="tablist"><button type="button" role="tab" aria-selected="false" data-action="editor">Editor</button><button type="button" role="tab" aria-selected="true">Runs</button></div>${renderRunChoices(snapshot)}`}
+    ${locked ? "" : `<div class="automation-tabs" role="tablist"><button type="button" role="tab" aria-selected="false" data-action="editor">Editor</button><button type="button" role="tab" aria-selected="true">Runs</button></div>${renderAutomationRunHistory(snapshot)}`}
     ${run ? `${renderAutomationReport(run)}
       <div class="automation-run-explorer">${renderAutomationRunSteps(run, snapshot.selectedNodeId, detailId)}
       ${selectedNode ? `<section class="automation-run-detail" id="${escapeHtml(detailId)}" data-selected-step-result tabindex="-1" aria-label="Selected step result">

package/dist/src/web-ui/app/components/automations/workspace.js

@@ -7,6 +7,7 @@ import { readAutomationDefinitionPatch, renderAutomationEditor, renderAutomation
 import { createAutomationStepEditorDialog } from "./step-editor-dialog.js";
 import { focusSelectedAutomationStep } from "./run-steps-view.js";
 import { renderAutomationRun } from "./run.js";
+import { createAutomationRunHistoryControls } from "./run-history-controls.js";
 import { findAutomationPosition } from "../../lib/automation-graph-position.js";
 import { canWrapAutomationSequence } from "../../lib/automation-parallel-depth.js";
 import { createAutomationTimelineCamera } from "./timeline-camera.js";
@@ -70,6 +71,7 @@ export function createAutomationsWorkspace({
     isEditing: () => Boolean(current.selectedNodeId) || stepEditor.isOpen(),
   });
   const liveView = createAutomationLiveView(root);
+  const runHistory = createAutomationRunHistoryControls({ root, actions });
 
   function isDirty() { return definitionDirty || stepEditor.isDirty(); }
 
@@ -132,7 +134,9 @@ export function createAutomationsWorkspace({
     const previousNodeId = renderedNodeId;
     const viewIdentity = `${snapshot.selectedAutomationId}/${snapshot.selectedRunId || "editor"}`;
     const sameEditor = snapshot.selectedAutomationId === current.selectedAutomationId && !snapshot.selectedRunId;
-    if (!liveView.isCurrent(viewIdentity)) { paletteQuery = ""; paletteSelectedTool = ""; insertion = null; detailsCollapsed = false; camera.resetState(); }
+    const viewChanged = !liveView.isCurrent(viewIdentity);
+    const historyHadFocus = documentRoot.activeElement?.matches?.("[data-select-run]");
+    if (viewChanged) { paletteQuery = ""; paletteSelectedTool = ""; insertion = null; detailsCollapsed = false; camera.resetState(); }
     else camera.capture();
     const retainedDefinition = definitionDirty && sameEditor
       ? root.querySelector("[data-automation-definition-form]") : null;
@@ -144,6 +148,7 @@ export function createAutomationsWorkspace({
         : renderAutomationEditor(snapshot, { query: paletteQuery, selectedToolName: paletteSelectedTool });
     const changed = liveView.update(viewIdentity, renderAutomationLibraryTabs(snapshot, markup, activeLibraryTab));
     if (changed && retainedDefinition) root.querySelector("[data-automation-definition-form]")?.replaceWith(retainedDefinition);
+    runHistory.sync(snapshot, { viewChanged, focus: historyHadFocus });
     markInsertion();
     updateDetailsVisibility();
     camera.restore();
@@ -314,7 +319,11 @@ export function createAutomationsWorkspace({
     run: () => { if (requireSavedGraph()) return actions.startRun(); },
     "toggle-active": () => current.automations.find((item) => item.id === current.selectedAutomationId)?.status === "active"
       ? actions.setActive(false) : openPermissionDialog("activate"),
-    "show-runs": () => { if (prepareLeave()) return current.runs[0] ? actions.openRun(current.runs[0].id) : notify("No runs yet."); },
+    "show-runs": () => {
+      if (!prepareLeave()) return;
+      const runId = current.runs[0]?.id || current.lastViewedRunId;
+      return runId ? actions.openRun(runId) : notify("No runs yet.");
+    },
     editor: () => { if (prepareLeave()) return actions.openRoute(current.selectedAutomationId, ""); },
     stop: () => actions.stopRun(),
     rerun: () => current.run &&

package/dist/src/web-ui/app/components/conversation-role-cards.js

@@ -1,4 +1,6 @@
 import { createConversationTools } from "./conversation-tools.js";
+import { createConversationRoleDelegations } from "./conversation-role-delegations.js";
+import { createConversationRoleReturns } from "./conversation-role-returns.js";
 
 const ROLE_INITIALS = {
   supervisor: "S",
@@ -16,6 +18,8 @@ export function createConversationRoleCards({
   const timelineRequests = new Set();
   const timelineToggles = new Map();
   const toolsByRequest = new Map();
+  const delegations = createConversationRoleDelegations({ documentRoot });
+  const returns = createConversationRoleReturns({ documentRoot });
   let panelSequence = 0;
 
   function element(tag, className, text = "") {
@@ -97,6 +101,25 @@ export function createConversationRoleCards({
     }
     content.appendChild(header);
     const message = element("div", "conversation-role-message");
+    for (const activity of card.skillActivities || []) {
+      const skill = textElement(
+        "p",
+        "conversation-role-summary conversation-role-skill-activity",
+        activity.summary,
+      );
+      skill.dataset.tone = activity.tone;
+      message.appendChild(skill);
+    }
+    if (card.role === "supervisor") {
+      const history = delegations.createNode({
+        requestId, delegations: card.delegations || [],
+      });
+      if (history) message.appendChild(history);
+    }
+    if (card.role === "planner") {
+      const history = returns.createNode({ requestId, returns: card.returns || [] });
+      if (history) message.appendChild(history);
+    }
     if (card.summary) {
       const summary = element("p", "conversation-role-summary");
       summary.append(
@@ -187,6 +210,8 @@ export function createConversationRoleCards({
   }
 
   function forget(requestId) {
+    delegations.forget(requestId);
+    returns.forget(requestId);
     timelineRequests.delete(requestId);
     timelineToggles.delete(requestId);
     const tools = toolsByRequest.get(requestId);
@@ -195,6 +220,8 @@ export function createConversationRoleCards({
   }
 
   function reset() {
+    delegations.reset();
+    returns.reset();
     timelineRequests.clear();
     timelineToggles.clear();
     for (const tools of toolsByRequest.values()) {

package/dist/src/web-ui/app/components/conversation-role-delegations.d.ts

@@ -0,0 +1,12 @@
+import type { RoleDelegation } from "../lib/role-delegation-event.js";
+
+export declare function createConversationRoleDelegations(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input: {
+    requestId: string;
+    delegations?: RoleDelegation[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/conversation-role-delegations.js

@@ -0,0 +1,24 @@
+import { titleCaseEventValue } from "../lib/event-presentation.js";
+import { createConversationRoleHistory } from "./conversation-role-history.js";
+
+export function createConversationRoleDelegations({ documentRoot = document } = {}) {
+  const history = createConversationRoleHistory({
+    documentRoot,
+    kind: "delegation",
+    textClassName: "conversation-role-delegation-objective",
+    ariaLabel: "Delegated work",
+  });
+
+  function createNode({ requestId, delegations = [] }) {
+    return history.createNode({
+      requestId,
+      items: delegations.map((delegation) => ({
+        id: delegation.id,
+        label: `Delegated to ${titleCaseEventValue(delegation.childRole)}`,
+        text: delegation.objective,
+      })),
+    });
+  }
+
+  return { createNode, forget: history.forget, reset: history.reset };
+}

package/dist/src/web-ui/app/components/conversation-role-history.d.ts

@@ -0,0 +1,13 @@
+export declare function createConversationRoleHistory(options: {
+  documentRoot?: Document;
+  kind: "delegation" | "return";
+  textClassName: string;
+  ariaLabel: string;
+}): {
+  createNode(input: {
+    requestId: string;
+    items?: { id: string; label: string; text: string }[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/conversation-role-history.js

@@ -0,0 +1,81 @@
+export function createConversationRoleHistory({
+  documentRoot = document,
+  kind,
+  textClassName,
+  ariaLabel,
+}) {
+  const requests = new Map();
+  const prefix = `conversation-role-${kind}`;
+
+  function element(tag, className, text = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text;
+    return node;
+  }
+
+  function requestState(requestId) {
+    const existing = requests.get(requestId);
+    if (existing) return existing;
+    const state = { expanded: new Set(), nodes: new Map() };
+    requests.set(requestId, state);
+    return state;
+  }
+
+  function isCurrentDisclosure(requestId, state, id, node) {
+    if (requests.get(requestId) !== state) return false;
+    return state.nodes.get(id) === node;
+  }
+
+  function historyRow(requestId, state, item) {
+    const row = element("li", `${prefix}-row`);
+    const details = element("details", `conversation-role-history-item ${prefix}`);
+    details.dataset[`${kind}Id`] = item.id;
+    details.open = state.expanded.has(item.id);
+    state.nodes.set(item.id, details);
+    const summary = element("summary", `conversation-role-history-toggle ${prefix}-toggle`);
+    const label = element("span", `conversation-role-history-label ${prefix}-label`, item.label);
+    const chevron = element("span", `conversation-role-history-chevron ${prefix}-chevron`, "⌄");
+    chevron.setAttribute("aria-hidden", "true");
+    const text = element("span", `conversation-role-history-text ${textClassName}`, item.text);
+    text.setAttribute("dir", "auto");
+    summary.append(label, chevron, text);
+    details.appendChild(summary);
+    details.addEventListener("toggle", () => {
+      if (!isCurrentDisclosure(requestId, state, item.id, details)) return;
+      if (details.open) {
+        state.expanded.add(item.id);
+        return;
+      }
+      state.expanded.delete(item.id);
+    });
+    row.appendChild(details);
+    return row;
+  }
+
+  function createNode({ requestId, items = [] }) {
+    requests.get(requestId)?.nodes.clear();
+    if (items.length === 0) return null;
+    const state = requestState(requestId);
+    const identities = new Set(items.map((item) => item.id));
+    for (const id of state.expanded) {
+      if (!identities.has(id)) state.expanded.delete(id);
+    }
+    const list = element("ol", `conversation-role-history ${prefix}s`);
+    list.setAttribute("aria-label", ariaLabel);
+    for (const item of items) {
+      list.appendChild(historyRow(requestId, state, item));
+    }
+    return list;
+  }
+
+  function forget(requestId) {
+    requests.delete(requestId);
+  }
+
+  function reset() {
+    requests.clear();
+  }
+
+  return { createNode, forget, reset };
+}

package/dist/src/web-ui/app/components/conversation-role-returns.d.ts

@@ -0,0 +1,12 @@
+import type { RoleReturn } from "../lib/role-return-event.js";
+
+export declare function createConversationRoleReturns(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input: {
+    requestId: string;
+    returns?: RoleReturn[];
+  }): HTMLElement | null;
+  forget(requestId: string): void;
+  reset(): void;
+};

package/dist/src/web-ui/app/components/conversation-role-returns.js

@@ -0,0 +1,23 @@
+import { createConversationRoleHistory } from "./conversation-role-history.js";
+
+export function createConversationRoleReturns({ documentRoot = document } = {}) {
+  const history = createConversationRoleHistory({
+    documentRoot,
+    kind: "return",
+    textClassName: "conversation-role-return-summary",
+    ariaLabel: "Planner results",
+  });
+
+  function createNode({ requestId, returns = [] }) {
+    return history.createNode({
+      requestId,
+      items: returns.map((receipt) => ({
+        id: receipt.id,
+        label: receipt.outcome === "failed" ? "Planner failed" : "Returned result",
+        text: receipt.summary,
+      })),
+    });
+  }
+
+  return { createNode, forget: history.forget, reset: history.reset };
+}

package/dist/src/web-ui/app/components/onboarding-workspace-access.js

@@ -1,6 +1,6 @@
 const navigation = Object.freeze({
   home: "homeWorkspaceButton", chat: "chatWorkspaceButton", learning: "learningWorkspaceButton",
-  memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", automations: "automationsWorkspaceButton", models: "modelsWorkspaceButton",
+  skills: "skillsWorkspaceButton", memory: "memoryWorkspaceButton", schedules: "schedulesWorkspaceButton", automations: "automationsWorkspaceButton", models: "modelsWorkspaceButton",
   plugins: "pluginsWorkspaceButton", notifications: "notificationsWorkspaceButton", config: "configWorkspaceButton",
 });
 

package/dist/src/web-ui/app/components/skills/workspace.js

@@ -0,0 +1,119 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+
+/** Mounts the existing shell's navigation/panel contract without growing index.html. */
+export function mountSkillsWorkspace(dom, documentRoot = document) {
+  const button = documentRoot.createElement("button");
+  button.id = "skillsWorkspaceButton";
+  button.className = "rail-button";
+  button.type = "button";
+  button.setAttribute("aria-label", "Open Skills");
+  button.setAttribute("aria-controls", "skillsWorkspacePanel");
+  button.title = "Skills";
+  button.innerHTML = `<span class="rail-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="3" width="14" height="18" rx="2" /><path d="m8 9 1 1 2-2m2 1h3m-8 6 1 1 2-2m2 1h3" /></svg></span><span class="rail-button-label">Skills</span>`;
+  dom.memoryWorkspaceButton.after(button);
+  const panel = documentRoot.createElement("section");
+  panel.id = "skillsWorkspacePanel";
+  panel.className = "workspace-page-panel skills-workspace-panel";
+  panel.hidden = true;
+  panel.inert = true;
+  panel.setAttribute("aria-hidden", "true");
+  panel.setAttribute("aria-labelledby", "skillsWorkspaceTitle");
+  panel.innerHTML = `<header class="workspace-page-header"><div class="workspace-page-heading"><p class="eyebrow">Personal guidance</p><h2 id="skillsWorkspaceTitle">Skills</h2></div><button type="button" class="workspace-page-back" data-skills-close>Back to chat</button></header><div class="workspace-page-body" data-skills-root></div>`;
+  dom.app.append(panel);
+  Object.assign(dom, { skillsWorkspaceButton: button, skillsWorkspacePanel: panel,
+    closeSkillsWorkspaceButton: panel.querySelector("[data-skills-close]"), skillsRoot: panel.querySelector("[data-skills-root]") });
+}
+
+export function renderSkillRows(snapshot) {
+  const items = snapshot.items.filter((item) => item.source === "personal" && item.archived === snapshot.archived);
+  if (!items.length) return `<p class="skills-empty">${snapshot.loading ? "Loading Skills…" : snapshot.archived ? "No archived Skills." : "No personal Skills yet. Create one here or ask ABot to help."}</p>`;
+  return items.map((item) => `<button type="button" class="config-model-button skills-list-item" data-skill-id="${escapeAttribute(item.skillId)}" aria-pressed="${item.skillId === snapshot.skill?.skillId}"><strong dir="auto">${escapeHtml(item.name)}</strong><span dir="auto">${escapeHtml(item.description)}</span></button>`).join("");
+}
+
+export function createSkillsWorkspace({ root, actions, confirmArchive = (message) => window.confirm(message) }) {
+  root.innerHTML = `<div class="config-dashboard skills-workspace-content"><div class="skills-toolbar"><div class="skills-filters" role="group" aria-label="Skill status"><button type="button" class="config-category-tab" data-skills-filter="active" aria-pressed="true">Active</button><button type="button" class="config-category-tab" data-skills-filter="archived" aria-pressed="false">Archived</button></div><div class="skills-toolbar-actions"><button type="button" data-skills-refresh>Refresh</button><button type="button" class="primary-button" data-skills-new>New Skill</button></div></div><p class="skills-intro">Personal Skills guide how ABot works. Built-in Skills are maintained by ABot.</p><p class="skills-feedback" role="alert" data-skills-error hidden></p><p class="skills-feedback" role="status" data-skills-message hidden></p><div class="skills-layout"><div class="skills-list" data-skills-list></div><section class="skills-detail" data-skills-detail><p class="skills-empty" data-skills-placeholder>Select a Skill to read or edit it.</p><form data-skills-form hidden><div data-skills-creation-fields hidden><h3>New Skill</h3><label class="skills-creation-label">Name<input type="text" data-skills-new-name maxlength="160" dir="auto" required disabled></label><label class="skills-creation-label">Description<textarea data-skills-new-description rows="3" maxlength="512" dir="auto" required disabled></textarea></label></div><div data-skills-saved-metadata><h3 dir="auto" data-skills-name></h3><p dir="auto" class="skills-description" data-skills-description></p><p class="skills-id">ID: <span dir="ltr" data-skills-id></span></p></div><label class="skills-content-label">Content<textarea data-skills-content rows="16" dir="auto" maxlength="65536" required></textarea></label><p class="skills-archived-note" data-skills-archived-note hidden>Archived Skills are unavailable to models. Restore this Skill to use or edit it.</p><div class="skills-editor-actions"><button class="primary-button" type="submit" data-skills-save>Save changes</button><button type="button" data-skills-cancel hidden>Cancel</button><button type="button" data-skills-reload>Reload saved</button><button type="button" data-skills-archive>Archive</button><button type="button" data-skills-restore hidden>Restore</button></div></form></section></div></div>`;
+  const find = (selector) => root.querySelector(selector);
+  const list = find("[data-skills-list]");
+  const form = find("[data-skills-form]");
+  const content = find("[data-skills-content]");
+  const nameInput = find("[data-skills-new-name]");
+  const descriptionInput = find("[data-skills-new-description]");
+  let current;
+  let listMarkup = "";
+  root.addEventListener("click", (event) => {
+    const selected = event.target.closest?.("[data-skill-id]");
+    if (selected) void actions.select(selected.dataset.skillId);
+    const filter = event.target.closest?.("[data-skills-filter]");
+    if (filter) actions.setArchived(filter.dataset.skillsFilter === "archived");
+    if (event.target.closest?.("[data-skills-new]")) actions.beginCreate();
+    if (event.target.closest?.("[data-skills-cancel]")) actions.cancelCreate();
+    if (event.target.closest?.("[data-skills-refresh]")) void actions.refresh();
+    if (event.target.closest?.("[data-skills-reload]")) void actions.reloadSelected();
+    if (event.target.closest?.("[data-skills-restore]")) void actions.restore();
+    if (event.target.closest?.("[data-skills-archive]")) {
+      const warning = current?.dirty ? " Unsaved edits will be discarded." : "";
+      if (confirmArchive(`Archive this Skill? Models will no longer discover or read it.${warning}`)) void actions.archive();
+    }
+  });
+  nameInput.addEventListener("input", () => actions.setCreationField("name", nameInput.value));
+  descriptionInput.addEventListener("input", () => actions.setCreationField("description", descriptionInput.value));
+  content.addEventListener("input", () => actions.setDraft(content.value));
+  form.addEventListener("submit", (event) => { event.preventDefault(); void actions.save(); });
+  function render(snapshot) {
+    current = snapshot;
+    const nextList = renderSkillRows(snapshot);
+    if (nextList !== listMarkup) { list.innerHTML = nextList; listMarkup = nextList; }
+    list.setAttribute("aria-busy", String(snapshot.loading));
+    for (const button of root.querySelectorAll("[data-skills-filter]")) {
+      const selected = (button.dataset.skillsFilter === "archived") === snapshot.archived;
+      button.setAttribute("aria-pressed", String(selected));
+      button.className = selected ? "config-category-tab active" : "config-category-tab";
+      button.disabled = Boolean(snapshot.mutation);
+    }
+    for (const [selector, message] of [["[data-skills-error]", snapshot.error], ["[data-skills-message]", snapshot.message]]) {
+      const element = find(selector); element.textContent = message; element.hidden = !message;
+    }
+    const skill = snapshot.skill;
+    const creating = snapshot.creating === true;
+    const editing = Boolean(skill) || creating;
+    const archived = skill?.archived === true;
+    const busy = Boolean(snapshot.mutation);
+    find("[data-skills-new]").disabled = busy;
+    const placeholder = find("[data-skills-placeholder]");
+    placeholder.hidden = editing;
+    placeholder.textContent = snapshot.reading ? "Loading Skill…" : "Select a Skill to read or edit it.";
+    form.hidden = !editing;
+    if (!editing) return;
+    find("[data-skills-creation-fields]").hidden = !creating;
+    find("[data-skills-saved-metadata]").hidden = creating;
+    nameInput.disabled = !creating || busy;
+    descriptionInput.disabled = !creating || busy;
+    if (nameInput.value !== (snapshot.name || "")) nameInput.value = snapshot.name || "";
+    if (descriptionInput.value !== (snapshot.description || "")) descriptionInput.value = snapshot.description || "";
+    find("[data-skills-name]").textContent = skill?.name || "";
+    find("[data-skills-description]").textContent = skill?.description || "";
+    find("[data-skills-id]").textContent = skill?.skillId || "";
+    if (content.value !== snapshot.draft) content.value = snapshot.draft;
+    content.readOnly = archived;
+    content.disabled = busy;
+    find("[data-skills-archived-note]").hidden = !archived;
+    find("[data-skills-save]").hidden = archived;
+    find("[data-skills-save]").disabled = cannotSave(snapshot);
+    const saveLabels = { create: "Creating…", save: "Saving…" };
+    find("[data-skills-save]").textContent = saveLabels[snapshot.mutation] || (creating ? "Create Skill" : "Save changes");
+    find("[data-skills-cancel]").hidden = !creating;
+    find("[data-skills-reload]").hidden = creating;
+    find("[data-skills-archive]").hidden = creating || archived;
+    find("[data-skills-restore]").hidden = creating || !archived;
+    for (const selector of ["[data-skills-cancel]", "[data-skills-reload]", "[data-skills-archive]", "[data-skills-restore]"])
+      find(selector).disabled = busy;
+  }
+  return { render };
+}
+
+function cannotSave(snapshot) {
+  if (snapshot.mutation || !snapshot.dirty || !snapshot.draft.trim()) return true;
+  if (!snapshot.creating) return false;
+  if (!snapshot.name.trim()) return true;
+  return !snapshot.description.trim();
+}

package/dist/src/web-ui/app/components/workspace-shell.js

@@ -74,6 +74,7 @@ export function createWorkspaceShell({
     const automationsWorkspace = shellState.workspace === "automations";
     const learningWorkspace = shellState.workspace === "learning";
     const memoryWorkspace = shellState.workspace === "memory";
+    const skillsWorkspace = shellState.workspace === "skills";
     const notificationsWorkspace = shellState.workspace === "notifications";
     const sessions = sidebarLayout();
     const showSessionsToggle = chatWorkspace && !sessions.docked;
@@ -128,6 +129,12 @@ export function createWorkspaceShell({
       "aria-hidden",
       String(!memoryWorkspace),
     );
+    if (dom.skillsWorkspacePanel) {
+      dom.skillsWorkspacePanel.hidden = !skillsWorkspace;
+      dom.skillsWorkspacePanel.inert = !skillsWorkspace;
+      dom.skillsWorkspacePanel.setAttribute("aria-hidden", String(!skillsWorkspace));
+    }
+    setCurrentPage(dom.skillsWorkspaceButton, skillsWorkspace);
     if (dom.notificationsWorkspacePanel) {
       dom.notificationsWorkspacePanel.hidden = !notificationsWorkspace;
       dom.notificationsWorkspacePanel.inert = !notificationsWorkspace;
@@ -263,6 +270,7 @@ export function createWorkspaceShell({
           automations: dom.closeAutomationsWorkspaceButton,
           learning: dom.closeLearningWorkspaceButton,
           memory: dom.closeMemoryWorkspaceButton,
+          skills: dom.closeSkillsWorkspaceButton,
           config: dom.closeConfigWorkspaceButton,
           models: dom.closeConfigWorkspaceButton,
           plugins: dom.closeConfigWorkspaceButton,
@@ -342,7 +350,7 @@ export function createWorkspaceShell({
       setSessionsDrawerOpen(false, { restoreFocus: true });
       return true;
     }
-    if (["config", "models", "plugins", "schedules", "automations", "learning", "memory", "notifications"].includes(shellState.workspace)) {
+    if (["config", "models", "plugins", "schedules", "automations", "learning", "memory", "skills", "notifications"].includes(shellState.workspace)) {
       return activateWorkspace("chat");
     }
     return false;
@@ -351,6 +359,8 @@ export function createWorkspaceShell({
   function bind() {
     if (shellState.bound) return;
     shellState.bound = true;
+    dom.skillsWorkspaceButton?.addEventListener("click", () => activateWorkspace("skills"));
+    dom.closeSkillsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
     dom.notificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("notifications"));
     dom.closeNotificationsWorkspaceButton?.addEventListener("click", () => activateWorkspace("chat"));
     dom.homeWorkspaceButton?.addEventListener("click", () => {

package/dist/src/web-ui/app/controllers/automation-read-projection.js

@@ -1,3 +1,5 @@
+import { automationRunPage } from "./automation-run-history.js";
+
 export function validationResult(value) {
   if (Array.isArray(value)) return { issues: value };
   if (Array.isArray(value?.issues)) return value;
@@ -17,11 +19,12 @@ export async function readAutomationList(client, environmentId) {
   };
 }
 
-export async function readAutomationSelection(client, automationId, runId, environmentId) {
+export async function readAutomationSelection(client, automationId, runId, environmentId,
+  { runsQuery = { limit: 50 } } = {}) {
   const [draftResponse, catalog, runsResponse, runResponse] = await Promise.all([
     client.getAutomationDraft(automationId, environmentId),
     client.getAutomationCatalog(automationId, environmentId),
-    client.listAutomationRuns(automationId, environmentId),
+    runsQuery ? client.listAutomationRuns(automationId, environmentId, runsQuery) : Promise.resolve(null),
     runId ? client.getAutomationRun(runId, environmentId) : Promise.resolve(null),
   ]);
   if (runResponse?.run && runResponse.run.automationId !== automationId)
@@ -32,7 +35,7 @@ export async function readAutomationSelection(client, automationId, runId, envir
     grant: draftResponse.grant || null,
     validation: validationResult(draftResponse.validation),
     catalog,
-    runs: Array.isArray(runsResponse.runs) ? runsResponse.runs : [],
+    ...(runsResponse ? automationRunPage(runsResponse) : {}),
     run: runResponse?.run || null,
   };
 }
@@ -41,7 +44,8 @@ export async function readAutomationBackgroundProjection(client, identity) {
   const [list, selected, evidenceResponse] = await Promise.all([
     readAutomationList(client, identity.environmentId),
     identity.automationId
-      ? readAutomationSelection(client, identity.automationId, identity.runId, identity.environmentId)
+      ? readAutomationSelection(client, identity.automationId, identity.runId, identity.environmentId,
+        { runsQuery: identity.runsQuery })
       : Promise.resolve(null),
     identity.runId && identity.nodeId
       ? client.getAutomationStepEvidence(identity.runId, identity.nodeId,

package/dist/src/web-ui/app/controllers/automation-run-actions.js

@@ -1,5 +1,5 @@
 /** Async run commands retain the view that authorized them through every read. */
-export function createAutomationRunActions({ client, mutation, publish, loadSelected, openRun,
+export function createAutomationRunActions({ client, mutation, publish, loadSelected, refreshRunHistory, openRun,
   captureView }) {
   const pendingStarts = new Set();
   const runStartKey = (view) => JSON.stringify([view.environmentId, view.automationId]);
@@ -10,6 +10,8 @@ export function createAutomationRunActions({ client, mutation, publish, loadSele
     const continuation = view.captureContinuation();
     const refreshed = await loadSelected(view.automationId, "", continuation.isCurrent);
     if (!refreshed || !continuation.isCurrent()) return false;
+    await refreshRunHistory(continuation.isCurrent);
+    if (!continuation.isCurrent()) return false;
     return openRun(result.run.id, continuation.ownsMutation);
   }