@abot-ai/runtime 1.8.0 → 1.9.0

package/dist/src/web-ui/app/lib/conversation-role-model.js

@@ -5,6 +5,14 @@ import {
   titleCaseEventValue,
 } from "./event-presentation.js";
 import { textOf } from "./text-format.js";
+import {
+  isRoleDelegationEvent,
+  projectRoleDelegationEvent,
+} from "./role-delegation-event.js";
+import {
+  isRoleReturnEvent,
+  projectRoleReturnEvent,
+} from "./role-return-event.js";
 import { countToolInvocations } from "./tool-invocation-count.js";
 import { projectToolActivityEvent } from "./tool-activity-event.js";
 import { correlateToolApprovalActivity } from "./tool-approval-activity.js";
@@ -32,13 +40,16 @@ const ROLE_RESPONSIBILITIES = Object.freeze({
 });
 
 function latestRoleAction(group) {
+  if (group.summarySupersededByReturn) return "";
+  if (!group.latestEvent) return "";
   if (group.toolActions.some((action) => !action.legacy)) {
-    return group.latestRoleEvent
+    return group.latestRoleEvent && !isSupervisorSkillActivity(group.latestRoleEvent)
       ? roleActivitySummary(group.latestRoleEvent)
       : "";
   }
   const toolEvent = group.toolEvents.at(-1);
-  return roleActivitySummary(toolEvent || group.latestEvent);
+  const event = toolEvent || group.latestEvent;
+  return isSupervisorSkillActivity(event) ? "" : roleActivitySummary(event);
 }
 
 function belongsToRoleRequest(event, requestId) {
@@ -64,14 +75,20 @@ function orderedRequestActivity(events, requestId) {
   for (const event of events) {
     if (!belongsToRoleRequest(event, requestId)) continue;
     const position = activityPosition(event);
-    if (!position) {
+    const delegation = projectRoleDelegationEvent(event);
+    const receipt = projectRoleReturnEvent(event);
+    if (!position && !delegation && !receipt) {
       unique.push({ event, position });
       continue;
     }
-    const identity = `${position.domain}:${position.value}`;
+    let identity;
+    if (receipt) identity = `return:${receipt.id}`;
+    else if (delegation) identity = `delegation:${delegation.id}`;
+    else identity = `${position.domain}:${position.value}`;
     if (seen.has(identity)) continue;
     seen.add(identity);
     unique.push({ event, position });
+    if (!position) continue;
     const domain = domains.get(position.domain) || { events: [], next: 0 };
     domain.events.push({ event, position });
     domains.set(position.domain, domain);
@@ -104,8 +121,14 @@ function isToolActivityEvent(event) {
   return activityEventName(event).startsWith("tool.");
 }
 
+function isSupervisorSkillActivity(event) {
+  return event.stage === "supervisor" && event.phase === "skills"
+    && !isToolActivityEvent(event);
+}
+
 function roleActivityStage(event) {
   if (isToolActivityEvent(event)) return "";
+  if (isRoleDelegationEvent(event) || isRoleReturnEvent(event)) return "";
   return textOf(event.stage).trim();
 }
 
@@ -114,6 +137,7 @@ function hasSupportedRoleStage(stage) {
 }
 
 function isFailedRoleActivity(event) {
+  if (!event) return false;
   if (isToolActivityEvent(event)) return false;
   return (textOf(event.tone) || eventTone(event)) === "failed";
 }
@@ -134,6 +158,10 @@ function createRoleGroup(role, event) {
     latestRoleEvent: null,
     toolEvents: [],
     toolActions: [],
+    skillActivities: [],
+    delegations: [],
+    returns: [],
+    summarySupersededByReturn: false,
   };
 }
 
@@ -153,6 +181,7 @@ function buildRoleCard(group, activeRole, streaming) {
   const active = isActiveRoleActivity(group, activeRole, streaming);
   const toolCount = countToolInvocations(group.toolEvents);
   const toolSummary = summarizeConversationTools(group.toolActions);
+  const roleIdentityRecorded = group.latestRoleEvent || group.delegations[0];
   let tone = "recorded";
   if (active) tone = "active";
   if (failed) tone = "failed";
@@ -160,12 +189,17 @@ function buildRoleCard(group, activeRole, streaming) {
     id: group.role,
     role: group.role,
     title:
-      group.role === "supervisor" && !group.latestRoleEvent
+      group.role === "supervisor" && !roleIdentityRecorded
         ? "Root agent"
         : ROLE_TITLES[group.role],
     responsibility: ROLE_RESPONSIBILITIES[group.role],
     phaseLabel: titleCaseEventValue(group.phase),
     summary: latestRoleAction(group),
+    ...(group.skillActivities.length > 0
+      ? { skillActivities: group.skillActivities }
+      : {}),
+    ...(group.delegations.length > 0 ? { delegations: group.delegations } : {}),
+    ...(group.returns.length > 0 ? { returns: group.returns } : {}),
     toolActions: group.toolActions,
     facts: toolSummary
       ? [toolSummary]
@@ -203,6 +237,23 @@ export function buildConversationRoleCards({
       continue;
     }
 
+    const delegation = projectRoleDelegationEvent(event);
+    if (delegation) {
+      const group = groups.get("supervisor") || createRoleGroup("supervisor", null);
+      group.delegations.push(delegation);
+      groups.set("supervisor", group);
+      continue;
+    }
+
+    const receipt = projectRoleReturnEvent(event);
+    if (receipt) {
+      const group = groups.get("planner") || createRoleGroup("planner", null);
+      group.returns.push(receipt);
+      group.summarySupersededByReturn = true;
+      groups.set("planner", group);
+      continue;
+    }
+
     const stage = roleActivityStage(event);
     if (stage) {
       activeRole = "";
@@ -212,6 +263,13 @@ export function buildConversationRoleCards({
         group.phase = textOf(event.phase);
         group.latestEvent = event;
         group.latestRoleEvent = event;
+        group.summarySupersededByReturn = false;
+        if (isSupervisorSkillActivity(event)) {
+          group.skillActivities.push({
+            summary: roleActivitySummary(event),
+            tone: textOf(event.tone) || eventTone(event),
+          });
+        }
         groups.set(stage, group);
       }
     }

package/dist/src/web-ui/app/lib/event-presentation.js

@@ -1,8 +1,19 @@
 import { textOf } from "./text-format.js";
 import { isStopResult } from "./request-stop-state.js";
+import {
+  isRoleDelegationEvent,
+  projectRoleDelegationEvent,
+} from "./role-delegation-event.js";
+
+import {
+  isRoleReturnEvent,
+  projectRoleReturnEvent,
+} from "./role-return-event.js";
 
 function canMergeEventTimelineEntries(previous, event, name, summary) {
   if (!previous) return false;
+  if (isRoleDelegationEvent(previous) || isRoleDelegationEvent(event)) return false;
+  if (isRoleReturnEvent(previous) || isRoleReturnEvent(event)) return false;
   if (previous.name !== name) return false;
   if (previous.summary !== summary) return false;
   if (previous.tone !== event.tone) return false;
@@ -119,7 +130,22 @@ export function getPlanItemPayload(message) {
   };
 }
 
+function isMissingSkillLookup(message) {
+  if (message.type !== "event") return false;
+  if (message.stage !== "supervisor") return false;
+  if (message.phase !== "skills") return false;
+  // Runtime-owned status text, before or after event enrichment.
+  const name = textOf(message.name || message.rawType);
+  const status = textOf(message.message || name);
+  return (name === "runtime.state" || name === status)
+    && status === "Skill lookup failed: knowledge_skill_not_found";
+}
+
 export function formatEventLabel(message) {
+  const receipt = projectRoleReturnEvent(message);
+  if (receipt) return receipt.outcome === "failed" ? "Planner failed" : "Returned result";
+  const delegation = projectRoleDelegationEvent(message);
+  if (delegation) return `Delegated to ${titleCaseEventValue(delegation.childRole)}`;
   const name = textOf(message.name || message.rawType || message.type);
   const status = textOf(message.status);
   const phase = textOf(message.phase);
@@ -155,6 +181,7 @@ export function formatEventLabel(message) {
   if (name === "request.failed" || message.type === "failed") {
     return isStopResult(message) ? "Response stopped" : "Response failed";
   }
+  if (isMissingSkillLookup(message)) return "Skill not found";
   if (name === "runtime.state") {
     return status || textOf(message.output) || "Runtime state";
   }
@@ -180,6 +207,11 @@ function uncompletedToolLabel(message, name) {
 }
 
 export function formatEventDetail(message) {
+  const receipt = projectRoleReturnEvent(message);
+  if (receipt) return receipt.summary;
+  const delegation = projectRoleDelegationEvent(message);
+  if (delegation) return delegation.objective;
+  if (isMissingSkillLookup(message)) return "";
   if (isStopResult(message)) return "Stopped by you.";
   const parts = [];
   const name = textOf(message.name || message.rawType || message.type);
@@ -209,10 +241,12 @@ export function formatEventDetail(message) {
 }
 
 export function eventTone(message) {
+  if (isRoleReturnEvent(message)) return "neutral";
   const name = textOf(message.name || message.type);
   const normalized = name.toLowerCase();
   if (isStopResult(message)) return "neutral";
   if (isUncompletedToolEvent(message)) return "neutral";
+  if (isMissingSkillLookup(message)) return "neutral";
   if (
     message.ok === false ||
     textOf(message.status).toLowerCase() === "failed" ||

package/dist/src/web-ui/app/lib/reasoning-controls.js

@@ -1,5 +1,10 @@
 import { escapeHtml } from "./text-format.js";
 
+export function displayReasoningMode(mode) {
+  if (mode === "fast") return "Low";
+  return mode;
+}
+
 export function canChooseReasoning(profile) {
   return profile?.supportsThinking === true;
 }
@@ -7,7 +12,7 @@ export function canChooseReasoning(profile) {
 /** Keep the stored mode for compatibility while showing the effective provider default. */
 export function reasoningModeOptions(mode, enabled, modes = ["fast", "reasoning", "deep"]) {
   if (!enabled) return `<option value="${escapeHtml(mode || "reasoning")}">Provider default</option>`;
-  const labels = { fast: "Fast", reasoning: "Reasoning", deep: "Deep", auto: "Auto" };
+  const labels = { fast: "Low", reasoning: "Reasoning", deep: "Deep", auto: "Auto" };
   return modes.map((value) => `<option value="${escapeHtml(value)}"${value === mode ? " selected" : ""}>${escapeHtml(labels[value] || value)}</option>`).join("");
 }
 

package/dist/src/web-ui/app/lib/role-delegation-event.d.ts

@@ -0,0 +1,18 @@
+export interface RoleDelegation {
+  id: string;
+  generation: string;
+  callerCallId: string;
+  callerRole: "supervisor";
+  childCallId: string;
+  childRole: "planner" | "worker" | "researcher" | "reviewer";
+  objective: string;
+}
+
+export declare function isRoleDelegationEvent(event: unknown): boolean;
+export declare function projectRoleDelegationEvent(
+  event: Record<string, unknown>,
+): RoleDelegation | null;
+export declare function hasRecordedRoleDelegation(
+  events: Record<string, unknown>[],
+  delegation: RoleDelegation,
+): boolean;

package/dist/src/web-ui/app/lib/role-delegation-event.js

@@ -0,0 +1,47 @@
+const DELEGATED_ROLES = new Set([
+  "planner", "worker", "researcher", "reviewer",
+]);
+
+export function isRoleDelegationEvent(event) {
+  return (event?.eventName || event?.name || event?.rawType || event?.type)
+    === "role.delegated";
+}
+
+function hasDelegationIdentity(value) {
+  if (typeof value !== "string") return false;
+  return value.trim().length > 0;
+}
+
+function hasDelegationObjective(value) {
+  if (typeof value !== "string") return false;
+  if (value.length > 8_192) return false;
+  return value.trim().length > 0;
+}
+
+/** Explicit committed delegation evidence, without inferred role or objective data. */
+export function projectRoleDelegationEvent(event) {
+  if (!isRoleDelegationEvent(event)) return null;
+  const source = event.roleDelegation || event;
+  if (source.callerRole !== "supervisor") return null;
+  if (!DELEGATED_ROLES.has(source.childRole)) return null;
+  if (!hasDelegationIdentity(event.requestId)) return null;
+  if (!hasDelegationIdentity(source.callerCallId)) return null;
+  if (!hasDelegationIdentity(source.childCallId)) return null;
+  if (!hasDelegationObjective(source.objective)) return null;
+  if (source.generation !== undefined && typeof source.generation !== "string")
+    return null;
+  const generation = source.generation || "";
+  return {
+    id: JSON.stringify([event.requestId, generation, source.childCallId]),
+    generation,
+    callerCallId: source.callerCallId,
+    callerRole: source.callerRole,
+    childCallId: source.childCallId,
+    childRole: source.childRole,
+    objective: source.objective,
+  };
+}
+
+export function hasRecordedRoleDelegation(events, delegation) {
+  return events.some((event) => event.roleDelegation?.id === delegation.id);
+}

package/dist/src/web-ui/app/lib/role-return-event.d.ts

@@ -0,0 +1,19 @@
+export interface RoleReturn {
+  id: string;
+  generation: string;
+  callerCallId: string;
+  callerRole: "supervisor";
+  childCallId: string;
+  childRole: "planner";
+  outcome: "completed" | "failed";
+  summary: string;
+}
+
+export declare function isRoleReturnEvent(event: unknown): boolean;
+export declare function projectRoleReturnEvent(
+  event: Record<string, unknown>,
+): RoleReturn | null;
+export declare function hasRecordedRoleReturn(
+  events: Record<string, unknown>[],
+  receipt: RoleReturn,
+): boolean;

package/dist/src/web-ui/app/lib/role-return-event.js

@@ -0,0 +1,36 @@
+export function isRoleReturnEvent(event) {
+  return (event?.eventName || event?.name || event?.rawType || event?.type)
+    === "role.returned";
+}
+
+function hasReturnIdentity(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+
+export function projectRoleReturnEvent(event) {
+  if (!isRoleReturnEvent(event)) return null;
+  const source = event.roleReturn || event;
+  if (source.callerRole !== "supervisor") return null;
+  if (source.childRole !== "planner") return null;
+  if (source.outcome !== "completed" && source.outcome !== "failed") return null;
+  if (!hasReturnIdentity(event.requestId)) return null;
+  if (!hasReturnIdentity(source.callerCallId)) return null;
+  if (!hasReturnIdentity(source.childCallId)) return null;
+  if (typeof source.summary !== "string" || !source.summary.trim()) return null;
+  if (source.generation !== undefined && typeof source.generation !== "string") return null;
+  const generation = source.generation || "";
+  return {
+    id: JSON.stringify([event.requestId, generation, source.childCallId]),
+    generation,
+    callerCallId: source.callerCallId,
+    callerRole: source.callerRole,
+    childCallId: source.childCallId,
+    childRole: source.childRole,
+    outcome: source.outcome,
+    summary: source.summary,
+  };
+}
+
+export function hasRecordedRoleReturn(events, receipt) {
+  return events.some((event) => event.roleReturn?.id === receipt.id);
+}

package/dist/src/web-ui/app/lib/tool-activity-event.js

@@ -2,6 +2,7 @@ import { getRecord, titleCaseEventValue } from "./event-presentation.js";
 import { projectConversationFileReference } from "./conversation-file-reference.js";
 import { computerInputFields } from "./tool-computer-activity-fields.js";
 import { automationActivityFields } from "./tool-automation-activity-fields.js";
+import { skillActivityFields } from "./tool-skill-activity-fields.js";
 import {
   processInputFields,
   processResultFields,
@@ -193,10 +194,11 @@ export function projectToolActivityEvent(message) {
   const params = getRecord(meta.params);
   const inputMeta = { ...meta, params };
   const fileReference = projectConversationFileReference(message);
-  const automation = automationActivityFields(meta, tool);
+  const skill = skillActivityFields(meta, tool, completed, message.ok);
+  const activity = skill ?? automationActivityFields(meta, tool);
   return {
     ...(fileReference ? { fileReference } : {}),
-    ...(automation?.activityTitle ? { activityTitle: automation.activityTitle } : {}),
+    ...(activity?.activityTitle ? { activityTitle: activity.activityTitle } : {}),
     name,
     tool,
     executionId: boundedText(message.executionId, 200).trim(),
@@ -206,7 +208,7 @@ export function projectToolActivityEvent(message) {
     beforeExternalExecution: message.stage === "before_external_execution",
     intent: boundedText(message.intent || meta.intent),
     target: boundedText(
-      automation?.target ||
+      activity?.target ||
         meta.source ||
         meta.displayTarget ||
         meta.path ||
@@ -215,10 +217,10 @@ export function projectToolActivityEvent(message) {
         meta.id ||
         meta.savedId,
     ),
-    sent: [...inputFields(inputMeta, completed, tool), ...(automation?.sent || [])],
+    sent: [...inputFields(inputMeta, completed, tool), ...(activity?.sent || [])],
     received: terminal ? resultFields(meta, tool, message.ok) : [],
-    preview: terminal ? boundedText(meta.outputPreview, 1_200) : "",
-    previewTruncated: terminal && hasClippedPreview(meta),
+    preview: terminal && !skill ? boundedText(meta.outputPreview, 1_200) : "",
+    previewTruncated: terminal && !skill && hasClippedPreview(meta),
     partial: terminal && hasPartialSource(meta),
     outcome: completedOutcome(meta),
     ok: typeof message.ok === "boolean" ? message.ok : null,

package/dist/src/web-ui/app/lib/tool-skill-activity-fields.js

@@ -0,0 +1,50 @@
+const ACTION_TITLES = Object.freeze({
+  list_skills: "List skills",
+  read_skill: "Read skill",
+  read_skills: "Read skills",
+  create_skill: "Create skill",
+  update_skill: "Edit skill",
+});
+
+function boundedSkillText(value, limit) {
+  if (typeof value !== "string") return "";
+  const text = value.trim();
+  if (text.length <= limit) return text;
+  return `${text.slice(0, limit - 1)}…`;
+}
+
+function isSkillReadAction(action) {
+  return action === "read_skill" || action === "read_skills";
+}
+
+function hasSuccessfulSkillResult(action, completed, ok) {
+  if (action === "list_skills" || !Object.hasOwn(ACTION_TITLES, action)) return false;
+  if (!completed) return false;
+  return ok === true;
+}
+
+/** Decode declared display metadata only; never inspect a Skill body or tool output. */
+export function skillActivityFields(meta, tool, completed, ok) {
+  if (tool !== "abot_skills") return null;
+  const action = boundedSkillText(meta.skillAction, 128);
+  const activityTitle = Object.hasOwn(ACTION_TITLES, action)
+    ? ACTION_TITLES[action]
+    : "";
+  const sent = [];
+  if (activityTitle) sent.push({ label: "Action", value: activityTitle });
+  if (action === "list_skills" || !activityTitle) return { activityTitle, target: "", sent };
+
+  const readAction = isSkillReadAction(action);
+  const referenceLimit = readAction ? 160 : 128;
+  const referenceLabel = readAction ? "Skill reference" : "Skill ID";
+  const skillId = action === "read_skills"
+    ? boundedSkillText(Array.isArray(meta.skillIds)
+      ? meta.skillIds.slice(0, 8).map((id) => boundedSkillText(id, referenceLimit)).filter(Boolean).join(", ")
+      : "", 160)
+    : boundedSkillText(meta.skillId, referenceLimit) || (completed && ok === true ? boundedSkillText(meta.savedSkillId, 128) : "");
+  const skillTitle = hasSuccessfulSkillResult(action, completed, ok)
+    ? boundedSkillText(meta.skillTitle, 160)
+    : "";
+  if (skillId) sent.push({ label: action === "read_skills" ? "Skill references" : referenceLabel, value: skillId });
+  return { activityTitle, target: skillTitle || boundedSkillText(meta.skillName, 160) || skillId, sent };
+}

package/dist/src/web-ui/app/lib/workspace-route.js

@@ -8,6 +8,7 @@ const WORKSPACE_PATHS = Object.freeze({
   automations: "/automations",
   learning: "/learning",
   memory: "/memory",
+  skills: "/skills",
   models: "/models",
   plugins: "/plugins",
   config: "/system",

package/dist/src/web-ui/app/passive-learning-feature.js

@@ -77,8 +77,8 @@ export function createPassiveLearningFeature({
       macConsent.cancel();
       controller.environmentChanged();
     },
-    mountHome: (root) => {
-      home.mount(root);
+    mountHome: (root, onRendered) => {
+      home.mount(root, onRendered);
       home.render(controller.snapshot());
     },
   });

package/dist/src/web-ui/app/services/runtime-web-client/automations.d.ts

@@ -6,6 +6,14 @@ export type AutomationDraftResponse = Readonly<{
   validation?: Record<string, unknown> | null;
 }>;
 
+export type AutomationRunHistoryQuery = Readonly<{
+  limit?: number;
+  cursor?: string;
+  status?: string;
+  from?: string;
+  to?: string;
+}>;
+
 export type AutomationRequests = Readonly<{
   supportsAutomations(): boolean;
   listAutomations(environmentId?: string): Promise<{ automations: Record<string, unknown>[] }>;
@@ -22,7 +30,7 @@ export type AutomationRequests = Readonly<{
   setAutomationPermission(automationId: string, input: { expectedGrantRevision: number; mode: "full_access" | "full_plus"; operations: OperationRef[] }, environmentId?: string): Promise<Record<string, unknown>>;
   getAutomationCatalog(automationId: string, environmentId?: string): Promise<Record<string, unknown>>;
   startAutomationRun(automationId: string, idempotencyKey: string, environmentId?: string): Promise<Record<string, unknown>>;
-  listAutomationRuns(automationId: string, environmentId?: string): Promise<Record<string, unknown>>;
+  listAutomationRuns(automationId: string, environmentId?: string, query?: AutomationRunHistoryQuery): Promise<Record<string, unknown>>;
   getAutomationRun(runId: string, environmentId?: string): Promise<Record<string, unknown>>;
   getAutomationStepEvidence(runId: string, nodeId: string, environmentId?: string, full?: boolean): Promise<Record<string, unknown>>;
   stopAutomationRun(runId: string, environmentId?: string): Promise<Record<string, unknown>>;

package/dist/src/web-ui/app/services/runtime-web-client/automations.js

@@ -14,6 +14,14 @@ export function createAutomationRequests({ requestApi, getEnvironmentId, getConf
   const post = (url, input) => requestAutomation(url, {
     method: "POST", body: JSON.stringify(input),
   });
+  const historyPath = (automationId, environmentId, query) => {
+    const params = new URLSearchParams();
+    for (const key of ["limit", "cursor", "status", "from", "to"])
+      if (query[key] !== undefined && query[key] !== null && query[key] !== "")
+        params.set(key, String(query[key]));
+    const suffix = params.size ? `&${params}` : "";
+    return `${path(`/${encodeURIComponent(automationId)}/runs`, environmentId)}${suffix}`;
+  };
   return {
     supportsAutomations,
     listAutomations: (environmentId) => requestAutomation(path("", environmentId)),
@@ -59,8 +67,8 @@ export function createAutomationRequests({ requestApi, getEnvironmentId, getConf
     },
     startAutomationRun: (automationId, idempotencyKey, environmentId) =>
       post(path(`/${encodeURIComponent(automationId)}/run`, environmentId), { idempotencyKey }),
-    listAutomationRuns: (automationId, environmentId) =>
-      requestAutomation(path(`/${encodeURIComponent(automationId)}/runs`, environmentId)),
+    listAutomationRuns: (automationId, environmentId, query = {}) =>
+      requestAutomation(historyPath(automationId, environmentId, query)),
     getAutomationRun: (runId, environmentId) => requestAutomation(runPath(runId, environmentId)),
     getAutomationStepEvidence: (runId, nodeId, environmentId, full = false) => requestAutomation(
       `/automation-runs/${encodeURIComponent(runId)}/steps/${encodeURIComponent(nodeId)}?environment=${encodeURIComponent(environmentId || getEnvironmentId())}${full ? "&full=1" : ""}`),

package/dist/src/web-ui/app/services/runtime-web-client/skills.js

@@ -0,0 +1,23 @@
+export function createSkillRequests({ requestApi, getEnvironmentId, getConfig }) {
+  const supportsSkills = () => getConfig()?.backend === "runtime";
+  const path = (suffix, environmentId) =>
+    `/runtime/skills${suffix}?environment=${encodeURIComponent(environmentId)}`;
+  function request(suffix, environmentId, options) {
+    if (!supportsSkills()) throw new Error("Skills require the local Runtime backend.");
+    return requestApi(path(suffix, environmentId), options);
+  }
+  const identity = (id) => `/${encodeURIComponent(id)}`;
+  return {
+    supportsSkills,
+    createPersonalSkill: ({ name, description, content }, environmentId = getEnvironmentId()) =>
+      request("", environmentId, { method: "POST", body: JSON.stringify({ name, description, content }) }),
+    listPersonalSkills: (environmentId = getEnvironmentId()) => request("", environmentId),
+    readPersonalSkill: (id, environmentId = getEnvironmentId()) => request(identity(id), environmentId),
+    updatePersonalSkill: (id, content, expectedRevision, environmentId = getEnvironmentId()) =>
+      request(identity(id), environmentId, { method: "PATCH", body: JSON.stringify({ content, expectedRevision }) }),
+    archivePersonalSkill: (id, expectedRevision, environmentId = getEnvironmentId()) =>
+      request(`${identity(id)}/archive`, environmentId, { method: "POST", body: JSON.stringify({ expectedRevision }) }),
+    restorePersonalSkill: (id, expectedRevision, environmentId = getEnvironmentId()) =>
+      request(`${identity(id)}/restore`, environmentId, { method: "POST", body: JSON.stringify({ expectedRevision }) }),
+  };
+}

package/dist/src/web-ui/app/services/runtime-web-client.js

@@ -1,3 +1,4 @@
+import { createSkillRequests } from "./runtime-web-client/skills.js";
 import { createNotificationRequests } from "./runtime-web-client/notifications.js";
 import { createSparkChatRequests } from "./runtime-web-client/spark-chat.js";
 import { createProjectRequests } from "./runtime-web-client/projects.js";
@@ -380,6 +381,7 @@ export function createRuntimeWebClient({
     ...createProjectRequests({ requestApi, getEnvironmentId, getConfig }),
     ...createToolApprovalRequests({ requestApi, getEnvironmentId, getConfig }),
     ...createNotificationRequests({ requestApi, getEnvironmentId, getConfig }),
+    ...createSkillRequests({ requestApi, getEnvironmentId, getConfig }),
     ...createSparkChatRequests({ requestApi, getEnvironmentId, getConfig }),
   };
 }

package/dist/src/web-ui/app/skills-feature.js

@@ -0,0 +1,36 @@
+import { createSkillsController } from "./controllers/skills-controller.js";
+import { mountSkillsWorkspace, createSkillsWorkspace } from "./components/skills/workspace.js";
+
+export function createSkillsFeature({ dom, client, shell, getEnvironmentId,
+  documentRoot = document, viewport = window }) {
+  mountSkillsWorkspace(dom, documentRoot);
+  let view;
+  const controller = createSkillsController({ client, getEnvironmentId,
+    confirmDiscard: (message) => viewport.confirm(message), render: (snapshot) => view?.render(snapshot) });
+  view = createSkillsWorkspace({ root: dom.skillsRoot, actions: controller,
+    confirmArchive: (message) => viewport.confirm(message) });
+  view.render(controller.snapshot());
+  shell.addWorkspaceGuard(({ from, to }) => {
+    if (from !== "skills" || to === "skills") return true;
+    return controller.prepareLeave();
+  });
+  shell.subscribeWorkspaceChange((workspace) => controller.setActive(workspace === "skills"));
+  function bind() {
+    // Bind after the canonical transition: rejected raw changes never clear drafts.
+    dom.environmentSelect.addEventListener("change", () => controller.environmentChanged());
+    viewport.addEventListener("beforeunload", (event) => {
+      if (!controller.isDirty()) return;
+      event.preventDefault();
+      event.returnValue = "";
+    });
+  }
+  function refreshAvailability() {
+    const available = client.supportsSkills();
+    dom.skillsWorkspaceButton.hidden = !available;
+    dom.skillsWorkspaceButton.disabled = !available || dom.skillsWorkspaceButton.dataset.onboardingBlocked === "true";
+    if (!available) controller.setActive(false);
+  }
+  shell.subscribeRuntimeAvailabilityChange(refreshAvailability);
+  return { bind, refreshAvailability, prepareEnvironmentChange: controller.prepareLeave,
+    isWorkspaceAvailable: (destination) => destination !== "skills" || client.supportsSkills() };
+}