@abot-ai/runtime 1.8.0 → 1.9.0

package/dist/src/web-ui/app/components/dashboard/widget-card.js

@@ -0,0 +1,85 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { dashboardIcon } from "./icons.js";
+
+const compactLabels = { conversations: "Conversations", approvals: "Approvals" };
+
+function symbolMarkup(indicator) {
+  if (!indicator) return "";
+  const label = escapeHtml(indicator.label || "");
+  const value = indicator.value === undefined ? "" : `<span aria-hidden="true">${escapeHtml(String(indicator.value))}</span>`;
+  const glyph = indicator.icon ? dashboardIcon(indicator.icon) : "";
+  return `<span class="home-widget-symbol" data-tone="${escapeHtml(indicator.tone || "neutral")}" role="img" aria-label="${label}" title="${label}">${glyph}${value}</span>`;
+}
+
+function copyMarkup(title, detail = "") {
+  return `<span class="home-widget-copy"><span class="home-widget-item-title" dir="auto" title="${escapeHtml(title)}">${escapeHtml(title)}</span><span class="home-widget-meta" dir="auto" title="${escapeHtml(detail)}">${escapeHtml(detail)}</span></span>`;
+}
+
+function rowsMarkup(preview) {
+  return preview.items.map((item) => `<span class="home-widget-row">${copyMarkup(item.title, item.detail)}${symbolMarkup(item.indicator)}</span>`).join("");
+}
+
+function metricsMarkup(preview) {
+  return `<span class="home-widget-metrics">${preview.items.map((item) => `<span class="home-widget-metric">${symbolMarkup(item.indicator)}<span>${escapeHtml(item.label)}</span></span>`).join("")}</span>`;
+}
+
+function computerMarkup(preview) {
+  const checks = preview.items.map((item) => `<span class="home-widget-check"><span>${escapeHtml(item.label)}</span>${symbolMarkup(item.indicator)}</span>`).join("");
+  return `<span class="home-widget-computer"><span class="home-widget-device"><span class="home-widget-item-title" dir="auto">${escapeHtml(preview.title)}</span><span class="home-widget-meta">${escapeHtml(preview.detail || "")}</span></span><span class="home-widget-checks">${checks}</span></span>`;
+}
+
+function previewMarkup(summary) {
+  const preview = summary.preview;
+  if (preview?.kind === "rows") return rowsMarkup(preview);
+  if (preview?.kind === "metrics") return metricsMarkup(preview);
+  if (preview?.kind === "computer") return computerMarkup(preview);
+  if (preview?.kind === "automation")
+    return `<span class="home-widget-automation">${symbolMarkup(preview.indicator)}${copyMarkup(preview.title, preview.detail)}</span>`;
+  return `<span class="home-widget-fallback"><span class="home-widget-title" dir="auto">${escapeHtml(summary.title || "")}</span><span class="home-widget-detail" dir="auto">${escapeHtml(summary.detail || "")}</span><span class="home-widget-status" dir="auto">${escapeHtml(summary.status || "")}</span></span>`;
+}
+
+function previewDescriptions(summary) {
+  const preview = summary.preview;
+  if (!preview) return [];
+  const descriptions = [preview.title, preview.detail];
+  descriptions.push(...(preview.items || []).map((item) =>
+    [item.title, item.label, item.detail, item.indicator?.label].filter(Boolean).join(": "),
+  ));
+  if (preview.indicator) descriptions.push(preview.indicator.label);
+  return descriptions.filter(Boolean);
+}
+
+/** A stable button; only the read-only preview changes, never the live component. */
+export function createHomeWidgetCard({ documentRoot, id, label, icon }) {
+  const button = documentRoot.createElement("button");
+  button.type = "button";
+  button.className = "home-widget";
+  button.dataset.homeWidget = id;
+  button.setAttribute("aria-haspopup", "dialog");
+  const glyph = id === "learning" ? '<img src="/spark-mascot.svg" alt="" />' : dashboardIcon(icon);
+  button.innerHTML = `<span class="home-widget-heading"><span class="home-widget-heading-icon">${glyph}</span><span data-widget-label></span><span class="home-widget-badge" hidden></span><span class="home-widget-arrow" aria-hidden="true">›</span></span><span class="home-widget-preview"></span>`;
+  button.querySelector("[data-widget-label]").textContent = compactLabels[id] || label;
+  const body = button.querySelector(".home-widget-preview");
+  const badge = button.querySelector(".home-widget-badge");
+  let previousMarkup;
+  let previousBadge;
+  function render(summary) {
+    const markup = previewMarkup(summary);
+    if (markup !== previousMarkup) {
+      body.innerHTML = markup;
+      previousMarkup = markup;
+    }
+    const badgeMarkup = symbolMarkup(summary.preview?.badge);
+    if (badgeMarkup !== previousBadge) {
+      badge.innerHTML = badgeMarkup;
+      previousBadge = badgeMarkup;
+    }
+    badge.hidden = !badgeMarkup;
+    button.dataset.tone = summary.tone || "neutral";
+    button.setAttribute("aria-label", `${label} — open details`);
+    const description = [...new Set([summary.title, summary.detail, summary.status, ...previewDescriptions(summary)].filter(Boolean))].join(". ");
+    button.setAttribute("aria-description", description);
+    button.setAttribute("title", description);
+  }
+  return { button, render };
+}

package/dist/src/web-ui/app/components/dashboard/widget-dialog.js

@@ -0,0 +1,83 @@
+/** The original live panel is borrowed temporarily, never rendered a second time. */
+export function createHomeWidgetDialog({ root, onClosed }) {
+  const documentRoot = root.ownerDocument;
+  const dialog = documentRoot.createElement("dialog");
+  dialog.className = "home-widget-dialog";
+  dialog.setAttribute("aria-labelledby", "home-widget-detail-title");
+  dialog.innerHTML = `<header class="home-widget-dialog-header">
+    <h2 id="home-widget-detail-title"></h2>
+    <button type="button" class="home-text-button" data-home-widget-close aria-label="Close details">Close</button>
+  </header><div class="home-widget-dialog-body"></div>`;
+  root.appendChild(dialog);
+  const title = dialog.querySelector("h2");
+  const body = dialog.querySelector(".home-widget-dialog-body");
+  const closeButton = dialog.querySelector("[data-home-widget-close]");
+  const empty = documentRoot.createElement("p");
+  empty.className = "home-panel-state";
+  empty.setAttribute("role", "status");
+  let borrowed = null;
+
+  function restorePanel() {
+    if (!borrowed) return null;
+    const previous = borrowed;
+    borrowed = null;
+    previous.entry.element.classList.remove("home-widget-expanded");
+    const parent = previous.entry.getReturnParent?.() || previous.parent;
+    const next = previous.nextSibling;
+    const anchor = next?.parentNode === parent ? next : null;
+    parent.insertBefore(previous.entry.element, anchor);
+    empty.remove();
+    return previous.entry;
+  }
+
+  function close({ restoreFocus = true } = {}) {
+    const entry = restorePanel();
+    if (dialog.open) dialog.close();
+    if (entry) onClosed(entry, restoreFocus);
+  }
+
+  function refresh() {
+    if (!borrowed) return;
+    const summary = borrowed.entry.getSummary();
+    empty.textContent = borrowed.entry.emptyMessage || [summary.title, summary.detail].filter(Boolean).join(" · ");
+    empty.hidden = !borrowed.entry.element.hidden;
+  }
+
+  function open(entry) {
+    if (borrowed?.entry === entry) return;
+    close({ restoreFocus: false });
+    const element = entry.element;
+    borrowed = { entry, parent: element.parentNode, nextSibling: element.nextSibling };
+    title.textContent = entry.label;
+    element.classList.add("home-widget-expanded");
+    body.appendChild(element);
+    body.appendChild(empty);
+    refresh();
+    body.scrollTop = 0;
+    dialog.showModal();
+    closeButton.focus({ preventScroll: true });
+  }
+
+  closeButton.addEventListener("click", () => close());
+  dialog.addEventListener("cancel", (event) => {
+    event.preventDefault();
+    close();
+  });
+  dialog.addEventListener("close", () => {
+    if (dialog.open) return;
+    const entry = restorePanel();
+    if (entry) onClosed(entry, true);
+  });
+  dialog.addEventListener("click", (event) => {
+    if (event.target !== dialog) return;
+    const bounds = dialog.getBoundingClientRect();
+    const inside = event.clientX >= bounds.left && event.clientX <= bounds.right &&
+      event.clientY >= bounds.top && event.clientY <= bounds.bottom;
+    if (!inside) close();
+  });
+  return {
+    open, close, refresh,
+    isExpanded: (element) => borrowed?.entry.element === element,
+    dispose() { close({ restoreFocus: false }); dialog.remove(); },
+  };
+}

package/dist/src/web-ui/app/components/dashboard/widget-summaries.js

@@ -0,0 +1,155 @@
+import {
+  dashboardTimePresentation,
+  projectDashboardActivity,
+  projectDashboardConversations,
+} from "../../lib/dashboard-presentation.js";
+import { coWorkerAgentState } from "../passive-learning/agent-state.js";
+import { learningWidgetPreview } from "../passive-learning/home-widget-preview.js";
+import { formatToolName } from "../../lib/event-presentation.js";
+import { projectToolActivityEvent } from "../../lib/tool-activity-event.js";
+import { textOf } from "../../lib/text-format.js";
+
+function learningSnapshotMatchesEnvironment(snapshot, learning) {
+  if (!snapshot.environmentId || !learning?.environmentId) return true;
+  return snapshot.environmentId === learning.environmentId;
+}
+
+function learningSummary(snapshot, learning) {
+  const current = learningSnapshotMatchesEnvironment(snapshot, learning) ? learning : null;
+  if (current?.statusError)
+    return { title: "Connection interrupted", detail: "Open Spark to check its current activity.", status: "Status unavailable", tone: "attention" };
+  const presentation = coWorkerAgentState(current || {});
+  const tones = { attention: "attention", collecting: "active", reviewing: "active" };
+  return {
+    title: presentation.title,
+    detail: presentation.description,
+    status: presentation.label,
+    tone: tones[presentation.mode] || "neutral",
+    preview: learningWidgetPreview(current?.status),
+  };
+}
+
+function conversationsSummary(snapshot) {
+  const overview = snapshot.sessionOverview;
+  const projection = projectDashboardConversations(overview?.sessions ?? snapshot.sessions ?? [], 2);
+  const latest = projection.recentConversations[0];
+  const title = latest?.title || "A fresh start.";
+  if (snapshot.sessionsError)
+    return { title: latest?.title || "Conversations unavailable", detail: "Recent conversations could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingSessions)
+    return { title: latest?.title || "Loading conversations…", detail: "", status: "Loading", tone: "neutral" };
+  const unavailable = overview?.hasUnavailableReadState ?? projection.hasUnavailableReadState;
+  if (unavailable)
+    return { title, detail: "Unread status unavailable", status: "Open chats", tone: "attention" };
+  const unread = overview?.unreadCount ?? projection.unreadCount;
+  const preview = conversationsPreview(projection, unread);
+  if (unread > 0)
+    return { title, detail: latest ? "Latest conversation" : "Open chats to read replies.", status: `${unread} unread ${unread === 1 ? "message" : "messages"}`, tone: "active", preview };
+  return { title, detail: latest ? "Latest conversation" : "Your conversations will appear here.", status: latest ? "No unread messages" : "No conversations yet", tone: "neutral", preview };
+}
+
+function activitySummary(snapshot) {
+  if (snapshot.supportsSchedules === false)
+    return { title: "Jobs unavailable", detail: "Choose a Runtime environment to use scheduled jobs.", status: "Unavailable", tone: "neutral" };
+  const latest = projectDashboardActivity(snapshot.runs ?? [], 1)[0];
+  if (snapshot.activityError)
+    return { title: latest?.title || "Activity unavailable", detail: "Recent activity could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingActivity)
+    return { title: latest?.title || "Loading activity…", detail: "", status: "Loading", tone: "neutral" };
+  if (!latest)
+    return { title: "No activity yet", detail: "Try a ready-to-use job.", status: "View jobs", tone: "neutral" };
+  return { title: latest.title, detail: "Latest scheduled run", status: latest.statusLabel, tone: latest.tone, preview: activityPreview(snapshot.runs) };
+}
+
+function automationsSummary(snapshot) {
+  const active = snapshot.activeAutomations ?? [];
+  if (snapshot.automationStatusUnavailable)
+    return { title: "Automation status unavailable", detail: active[0]?.title || "Open ABot Studio to check runs.", status: active.length ? `${active.length} last seen in progress` : "Status unavailable", tone: "attention" };
+  if (!active.length)
+    return { title: "No automations in progress", detail: "ABot Studio", status: "No active runs", tone: "neutral" };
+  return {
+    title: `${active.length} ${active.length === 1 ? "automation" : "automations"} in progress`,
+    detail: active[0].title || "ABot Automation",
+    status: "View live timeline",
+    tone: "active",
+    preview: {
+      kind: "automation", title: active[0].title || "ABot Automation", detail: "ABot Studio",
+      indicator: { icon: "active", label: `${active.length} ${active.length === 1 ? "automation" : "automations"} in progress`, value: active.length, tone: "active" },
+    },
+  };
+}
+
+function approvalsSummary(snapshot) {
+  if (snapshot.supportsToolApprovals === false)
+    return { title: "Home approvals unavailable", detail: "Open the conversation to review pending actions.", status: "Unavailable", tone: "neutral" };
+  const count = snapshot.approvals?.length || 0;
+  const pendingTitle = `${count} ${count === 1 ? "action" : "actions"} waiting`;
+  if (snapshot.approvalDecisionError)
+    return { title: count ? pendingTitle : "Approval decision failed", detail: "Open approvals to review the failed decision.", status: "Needs attention", tone: "attention" };
+  if (snapshot.approvalsError)
+    return { title: count ? pendingTitle : "Approvals unavailable", detail: "Pending actions could not be refreshed.", status: "Status unavailable", tone: "attention" };
+  if (snapshot.loadingApprovals)
+    return { title: count ? pendingTitle : "Checking approvals…", detail: "", status: "Loading", tone: "neutral" };
+  if (count)
+    return { title: pendingTitle, detail: "Review the action before allowing it.", status: "Needs review", tone: "attention", preview: approvalsPreview(snapshot) };
+  return { title: "No pending approvals", detail: "Actions waiting for your decision appear here.", status: "Nothing waiting", tone: "neutral" };
+}
+
+function conversationIndicator(session) {
+  if (session.readStateUnavailable)
+    return { icon: "unknown", label: "Unread status unavailable", tone: "attention" };
+  if (!session.unreadCount) return null;
+  return { icon: "unread", label: `${session.unreadCount} unread ${session.unreadCount === 1 ? "message" : "messages"}`, value: session.unreadCount, tone: "active" };
+}
+
+function conversationsPreview(projection, unread) {
+  if (!projection.recentConversations.length) return undefined;
+  return {
+    kind: "rows",
+    badge: unread > 0 ? { icon: "unread", label: `${unread} unread ${unread === 1 ? "message" : "messages"} in all conversations`, value: unread, tone: "active" } : undefined,
+    items: projection.recentConversations.map((session) => ({
+      title: session.title,
+      detail: dashboardTimePresentation(session.updatedAt)?.label || "",
+      indicator: conversationIndicator(session),
+    })),
+  };
+}
+
+function activityPreview(runs) {
+  return {
+    kind: "rows",
+    items: projectDashboardActivity(runs, 2).map((run) => ({
+      title: run.title,
+      detail: dashboardTimePresentation(run.timestamp)?.label || "",
+      indicator: { icon: run.tone, label: run.statusLabel, tone: run.tone },
+    })),
+  };
+}
+
+function approvalsPreview(snapshot) {
+  return {
+    kind: "rows",
+    badge: { value: snapshot.approvals.length, label: `${snapshot.approvals.length} pending ${snapshot.approvals.length === 1 ? "approval" : "approvals"}`, tone: "attention" },
+    items: snapshot.approvals.slice(0, 2).map((approval) => {
+      const event = approval.event || {};
+      const activity = projectToolActivityEvent(event);
+      const conversation = (snapshot.sessions || []).find((session) => session.id === approval.sessionId);
+      return {
+        title: formatToolName(event.tool) || "Tool",
+        detail: activity?.target || textOf(conversation?.displayName || conversation?.title),
+        indicator: { icon: "active", label: "Awaiting approval", tone: "attention" },
+      };
+    }),
+  };
+}
+
+/** Read-only presentation of the existing Home owners; no new reads or state. */
+export function dashboardWidgetSummaries(snapshot = {}, learningSnapshot) {
+  return {
+    learning: learningSummary(snapshot, learningSnapshot),
+    conversations: conversationsSummary(snapshot),
+    activity: activitySummary(snapshot),
+    automations: automationsSummary(snapshot),
+    approvals: approvalsSummary(snapshot),
+  };
+}

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

@@ -3,6 +3,8 @@ import { getDashboardJobTemplates } from "../../lib/dashboard-job-templates.js";
 import { renderDashboardActivity } from "./activity.js";
 import { renderDashboardConversations } from "./recent-conversations.js";
 import { renderDashboardAutomations } from "./automations.js";
+import { createCompactHomeLayout } from "./compact-layout.js";
+import { dashboardWidgetSummaries } from "./widget-summaries.js";
 import {
   hasPendingDashboardApprovals,
   renderDashboardApprovals,
@@ -37,7 +39,26 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   const setupHost = root.querySelector("[data-dashboard-setup]");
   const learningPanel = root.querySelector("[data-dashboard-learning]");
   const automationPanel = root.querySelector("[data-dashboard-automations]");
-  passiveLearning?.mountHome(root.querySelector("[data-dashboard-learning-content]"));
+  let currentSnapshot = {};
+  function approvalHome() {
+    if (hasPendingDashboardApprovals(currentSnapshot)) return approvalDock;
+    return content;
+  }
+  const returnParents = { approvals: approvalHome };
+  const compactWidgets = createCompactHomeLayout({ root, content });
+  for (const [id, label, icon, element] of [
+    ["learning", "ABot Spark", "learning", learningPanel],
+    ["conversations", "Recent conversations", "conversations", conversations],
+    ["activity", "Recent activity", "active", activity],
+    ["automations", "Automations", "job", automationPanel],
+    ["approvals", "Pending approvals", "success", approvals],
+  ]) compactWidgets.register({
+    id, label, icon, element,
+    getReturnParent: returnParents[id],
+    isAvailable: () => id !== "learning" || Boolean(passiveLearning),
+    getSummary: () => dashboardWidgetSummaries(currentSnapshot, passiveLearning?.snapshot?.())[id],
+  });
+  passiveLearning?.mountHome(root.querySelector("[data-dashboard-learning-content]"), compactWidgets.refresh);
   const composerNote = root.querySelector(".home-composer-note");
   const handlers = {
     template: (button) => actions.createJob(button.dataset.templateId),
@@ -57,12 +78,14 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   });
 
   function render(snapshot) {
+    currentSnapshot = snapshot;
     const setupRequired = snapshot.composerAvailable === false;
+    compactWidgets.setEnabled(!setupRequired);
     const pendingApprovals = hasPendingDashboardApprovals(snapshot);
     approvalDock.hidden = setupRequired || !pendingApprovals;
     // Keep pending actions beside the composer; refresh errors stay in content.
-    const approvalParent = pendingApprovals ? approvalDock : content;
-    if (approvals.parentElement !== approvalParent)
+    const approvalParent = approvalHome();
+    if (!compactWidgets.isExpanded(approvals) && approvals.parentElement !== approvalParent)
       approvalParent.appendChild(approvals);
     root.classList.toggle("home-setup-active", setupRequired);
     learningPanel.hidden = setupRequired || !passiveLearning;
@@ -118,7 +141,8 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       "aria-busy",
       String(Boolean(snapshot.loadingSessions)),
     );
+    compactWidgets.refresh();
   }
 
-  return { render, composerHost, setupHost };
+  return { render, composerHost, setupHost, compactWidgets };
 }

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/operations-summary.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../lib/reasoning-controls.js";
 import { formatTime, textOf } from "../lib/text-format.js";
 import { getNumber } from "../lib/event-presentation.js";
 
@@ -91,7 +92,7 @@ function healthSummary(read) {
     label: "System health · all environments",
     items: [
       { label: "Health · all environments", value: unavailable || healthValue(payload.ok), status: true },
-      { label: "Runtime mode", value: unavailable || textOf(payload.agentMode, "-") || "-" },
+      { label: "Runtime mode", value: unavailable || textOf(displayReasoningMode(payload.agentMode), "-") || "-" },
       { label: "Active streams", value: unavailable || activeStreamCount(payload) },
       { label: "Latest event", value: unavailable || textOf(latest?.lastEventName || latest?.lastEventType, "-") || "-" },
     ],

package/dist/src/web-ui/app/components/passive-learning/home-widget-preview.js

@@ -0,0 +1,32 @@
+import { coWorkerActivityStates, coWorkerActivityTones } from "./agent-state.js";
+
+const indicators = {
+  off: { icon: "paused", tone: "neutral" },
+  waiting: { icon: "active", tone: "neutral" },
+  ready: { icon: "success", tone: "success" },
+  active: { icon: "active", tone: "active" },
+  attention: { icon: "failed", tone: "attention" },
+};
+
+/** Read-only projection of the same activity states used by the expanded owner. */
+export function learningWidgetPreview(status) {
+  if (!status?.preferences) return null;
+  const states = coWorkerActivityStates(status);
+  const tones = coWorkerActivityTones(status);
+  return {
+    kind: "metrics",
+    items: [
+      ["collection", "Collection"],
+      ["processing", "Learning"],
+      ["proactive", "Proactive"],
+    ].map(([key, label]) => {
+      const indicator = { ...(indicators[tones[key]] || indicators.off) };
+      indicator.label = [label, ...states[key]].filter(Boolean).join(": ");
+      if (key === "collection" && tones[key] === "active") indicator.icon = "collecting";
+      if (key === "processing" && ["ready", "waiting"].includes(tones[key])
+        && Number.isFinite(status.pendingObservations) && status.pendingObservations > 0)
+        indicator.value = status.pendingObservations;
+      return { label, indicator };
+    }),
+  };
+}

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

@@ -37,8 +37,10 @@ export function createPassiveLearningHome({
   let root = null;
   let renderedSnapshot = {};
   let motion;
+  let onRendered = () => {};
 
-  function mount(nextRoot) {
+  function mount(nextRoot, notify = () => {}) {
+    onRendered = notify;
     if (root === nextRoot) return;
     motion?.dispose();
     root?.removeEventListener("click", handleClick);
@@ -88,6 +90,7 @@ export function createPassiveLearningHome({
     const error = root.querySelector("[data-learning-status]");
     error.textContent = snapshot.statusError || "";
     error.hidden = !snapshot.statusError;
+    onRendered();
   }
 
   return Object.freeze({ mount, render });

package/dist/src/web-ui/app/components/schedules/details.js

@@ -1,3 +1,4 @@
+import { displayReasoningMode } from "../../lib/reasoning-controls.js";
 import { toolPermissionModeMeta } from "../../lib/tool-permission-mode.js";
 import { updateLiveRegion } from "../../lib/live-region.js";
 import { escapeHtml } from "../../lib/text-format.js";
@@ -33,7 +34,7 @@ function runMarkup(run) {
   return `<article class="schedule-run" data-run-id="${escapeHtml(run.id)}">
     <div class="schedule-run-heading"><strong>${scheduleTimeLabel(run.scheduledAt, timeZone)}</strong><span class="schedule-badge" data-state="${escapeHtml(run.status)}">${escapeHtml(run.status)}</span></div>
     <div class="schedule-run-meta">${run.trigger === "manual" ? "Manual run" : "Scheduled run"}${run.startedAt ? ` · Started ${scheduleTimeLabel(run.startedAt, timeZone)}` : ""}${run.finishedAt ? ` · Finished ${scheduleTimeLabel(run.finishedAt, timeZone)}` : ""}</div>
-    <dl class="schedule-run-settings">${fact("Model", run.modelProfileId)}${fact("Mode", run.agentMode)}${fact("Tool access", toolPermissionModeMeta(run.toolPermissionMode).label)}${fact("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
+    <dl class="schedule-run-settings">${fact("Model", run.modelProfileId)}${fact("Mode", displayReasoningMode(run.agentMode))}${fact("Tool access", toolPermissionModeMeta(run.toolPermissionMode).label)}${fact("Time zone", run.timeZone)}${fact("Job revision", String(run.jobRevision ?? "—"))}</dl>
     ${run.error ? `<p class="schedule-error" dir="auto">${escapeHtml(run.error)}</p>` : ""}
     ${run.resultText ? `<details class="schedule-result" data-disclosure-id="result:${escapeHtml(run.id)}"><summary>View result</summary><pre dir="auto">${escapeHtml(run.resultText)}</pre></details>` : ""}
     <details class="schedule-prompt-disclosure" data-disclosure-id="run:${escapeHtml(run.id)}"><summary>View invocation prompt</summary><pre dir="auto">${escapeHtml(run.prompt)}</pre></details>
@@ -67,7 +68,7 @@ export function renderScheduleDetails({ root, snapshot, actions }) {
   const conversationLabel = scheduleConversationLabel(job.sessionId, snapshot.sessions);
   const markup = `<div class="schedule-detail-heading"><span class="schedule-eyebrow">Scheduled task</span><h3 dir="auto">${escapeHtml(job.title)}</h3><span class="schedule-badge" data-state="${job.state}">${job.state}</span></div>
     <div class="schedule-action-row">${actionsMarkup(job, snapshot.mutation)}</div>
-    <dl class="schedule-facts">${fact("Schedule", scheduleDescription(job))}${fact("Next run", scheduleTimeLabel(job.nextRunAt, job.timeZone))}${fact("Time zone", job.timeZone)}${fact("Model", job.modelProfileId)}${fact("Mode", job.agentMode)}${fact("Tool access", toolPermissionModeMeta(job.toolPermissionMode).label)}${fact("Created", scheduleTimeLabel(job.createdAt, job.timeZone))}${fact("Updated", scheduleTimeLabel(job.updatedAt, job.timeZone))}</dl>
+    <dl class="schedule-facts">${fact("Schedule", scheduleDescription(job))}${fact("Next run", scheduleTimeLabel(job.nextRunAt, job.timeZone))}${fact("Time zone", job.timeZone)}${fact("Model", job.modelProfileId)}${fact("Mode", displayReasoningMode(job.agentMode))}${fact("Tool access", toolPermissionModeMeta(job.toolPermissionMode).label)}${fact("Created", scheduleTimeLabel(job.createdAt, job.timeZone))}${fact("Updated", scheduleTimeLabel(job.updatedAt, job.timeZone))}</dl>
     <button type="button" class="schedule-conversation-link" data-open-conversation>↗ <span dir="auto">${escapeHtml(conversationLabel)}</span></button>
     <details class="schedule-prompt-disclosure" data-disclosure-id="job:${escapeHtml(job.id)}"><summary>View task prompt</summary><pre dir="auto">${escapeHtml(job.prompt)}</pre></details>
     <small class="schedule-id">Job ${escapeHtml(job.id)} · Revision ${job.revision}</small>

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/spark-chat/panel.js

@@ -66,7 +66,7 @@ export function createSparkChatPanel({ documentRoot = document, launcherAnchor }
     placement.refresh();
     onToggle(value);
     if (!focus) return;
-    if (value) dom.messagesList.focus({ preventScroll: true });
+    if (value) dom.composerInput.focus({ preventScroll: true });
     else (previousFocus?.isConnected ? previousFocus : dom.launcherButton)?.focus({ preventScroll: true });
   }
 

package/dist/src/web-ui/app/components/spark-chat/settings.js

@@ -14,7 +14,7 @@ export function createSparkChatSettings({ root, onSave, onClear, onOpen, onReset
     </form>
     <div class="spark-settings-row">
       <label for="spark-agent-mode"><strong>Thinking mode</strong><span>Choose how deeply SPARK thinks before replying.</span></label>
-      <select id="spark-agent-mode" data-spark-agent-mode aria-label="SPARK thinking mode"><option value="fast">Fast</option><option value="reasoning" selected>Reasoning</option><option value="deep">Deep</option></select>
+      <select id="spark-agent-mode" data-spark-agent-mode aria-label="SPARK thinking mode"><option value="fast">Low</option><option value="reasoning" selected>Reasoning</option><option value="deep">Deep</option></select>
     </div>
     <div class="spark-settings-row"><div><strong>Chat shortcut</strong><p>Drag SPARK wherever feels right. Use Alt + arrow keys to move it.</p></div>
       <button type="button" data-spark-reset-position>Return to sidebar</button></div>