@abot-ai/runtime 1.5.0 → 1.6.0

package/dist/src/web-ui/app/components/composer-context-window.js

@@ -28,7 +28,19 @@ export function buildComposerContextWindowModel({
 }
 
 function compactNumber(value) {
-  return new Intl.NumberFormat("en", { notation: "compact" }).format(value);
+  return new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(value);
+}
+
+function providerUsageText(usage) {
+  if (!usage) return "";
+  const parts = ["input", "output", "total"].flatMap((kind) => {
+    const value = usage[`${kind}Tokens`];
+    return value === undefined ? [] : [`${compactNumber(value)} ${kind}`];
+  });
+  return parts.length ? `Provider reported ${parts.join(" · ")} tokens` : "";
 }
 
 function formatPercent(value) {
@@ -58,7 +70,7 @@ export function createComposerContextWindow({
   const header = documentRoot.createElement("div");
   header.className = "composer-context-window-header";
   const title = documentRoot.createElement("span");
-  title.textContent = "Context window";
+  title.textContent = "Latest measured model attempt";
   const percentage = documentRoot.createElement("span");
   percentage.className = "composer-context-window-percentage";
   header.append(title, percentage);
@@ -114,7 +126,9 @@ export function createComposerContextWindow({
     percentage.textContent = "";
     detail.textContent = "";
     compaction.textContent = "";
+    compaction.hidden = true;
     provider.textContent = "";
+    provider.hidden = true;
   }
 
   function render(model) {
@@ -129,25 +143,22 @@ export function createComposerContextWindow({
       model.admissionOutcome === "rejected",
     );
     const usedPercent = formatPercent(model.usedContextPercent);
-    button.setAttribute("aria-label", `Context window: ${usedPercent} used`);
+    button.setAttribute(
+      "aria-label",
+      `Latest measured model attempt: ${model.inputTokens.toLocaleString("en")} / ${model.contextWindowTokens.toLocaleString("en")} ${model.measurementKind} input tokens, ${usedPercent} used, ${formatPercent(model.remainingContextPercent)} left, ${model.modelStep}, ${model.profileId}`,
+    );
     ring.style.setProperty(
       "--context-used",
       `${Math.max(0, Math.min(100, model.usedContextPercent))}%`,
     );
     percentage.textContent = usedPercent;
-    detail.textContent = `${compactNumber(model.estimatedInputTokens)} / ${compactNumber(
-      model.contextWindowTokens,
-    )} estimated input tokens · ${formatPercent(model.remainingContextPercent)} left · ${
-      model.modelStep || model.profileId
-    }`;
+    detail.textContent = `${compactNumber(model.inputTokens)} / ${compactNumber(model.contextWindowTokens)} ${model.measurementKind} input tokens · ${formatPercent(model.remainingContextPercent)} left · ${model.modelStep} · ${model.profileId}`;
     compaction.hidden = !model.compaction;
     compaction.textContent = model.compaction
-      ? `Compaction ${formatPercent(model.compaction.beforePercent)} → ${formatPercent(model.compaction.afterPercent)}`
-      : "";
-    provider.hidden = !model.providerUsage;
-    provider.textContent = model.providerUsage
-      ? `Provider reported ${compactNumber(model.providerUsage.inputTokens)} input · ${compactNumber(model.providerUsage.outputTokens)} output tokens`
+      ? `Last compaction (${model.compaction.modelStep} · ${model.compaction.profileId}) ${formatPercent(model.compaction.beforePercent)} → ${formatPercent(model.compaction.afterPercent)}`
       : "";
+    provider.textContent = providerUsageText(model.providerUsage);
+    provider.hidden = !provider.textContent;
   }
 
   reset();

package/dist/src/web-ui/app/components/config-workspace/model-rendering.js

@@ -209,10 +209,10 @@ export function createConfigModelRendering({
               <strong>Model defaults</strong>
               ${renderConfigInput(model, ["supportsThinking"], {
                 type: "boolean",
-                label: "Thinking",
+                label: "Supports reasoning controls",
               })}
             </div>
-            <span>Provider, generation, and base context limits.</span>
+            <span>Unchecked uses the provider’s default reasoning; it does not disable thinking. When supported, the request mode and reasoning settings choose the effort.</span>
           </div>
           <div class="config-field-grid model-basics">
             <label><span>Label</span>${renderConfigInput(model, ["label"])}</label>

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

@@ -1,3 +1,4 @@
+import type { ContextWindowDisplay } from "../lib/context-window-state.js";
 import type { ConversationFileReference } from "../lib/conversation-file-reference.js";
 import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
 import type { ConversationSourcesGroup } from "../lib/web-sources.js";
@@ -17,34 +18,7 @@ export type ConversationActivityEvent = Record<string, unknown> & {
   tone: string;
 };
 
-export type ConversationContextWindowModel = {
-  invocationId: string;
-  modelStep: string;
-  profileId: string;
-  measurement: string;
-  source: string;
-  admissionOutcome: string;
-  contextWindowTokens: number;
-  estimatedInputTokens: number;
-  remainingContextTokens: number;
-  usedContextPercent: number;
-  remainingContextPercent: number;
-  compactionTriggerPercent: number;
-  outputReserveTokens: number;
-  safetyReserveTokens: number;
-  attachmentReserveTokens: number;
-  formatReserveTokens: number;
-  providerUsage: {
-    inputTokens: number;
-    outputTokens: number;
-    totalTokens: number;
-    source: string;
-  } | null;
-  compaction: {
-    beforePercent: number;
-    afterPercent: number;
-  } | null;
-};
+export type ConversationContextWindowModel = ContextWindowDisplay;
 
 export declare function buildConversationActivityModel(
   input?: ConversationActivityInput,

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

@@ -1,3 +1,4 @@
+import { projectContextWindowDisplay } from "../lib/context-window-state.js";
 import {
   buildEventTimelineEntries,
   eventTone,
@@ -39,8 +40,12 @@ function progressStatus(value) {
 
 function presentEvent(event) {
   const isPresentedEvent = Boolean(event?.eventName || event?.key);
-  const eventName = textOf(event?.eventName || event?.name || event?.rawType || event?.type);
-  let name = isPresentedEvent ? textOf(event.name, "Event") : formatEventLabel(event);
+  const eventName = textOf(
+    event?.eventName || event?.name || event?.rawType || event?.type,
+  );
+  let name = isPresentedEvent
+    ? textOf(event.name, "Event")
+    : formatEventLabel(event);
   let tone = textOf(event?.tone) || eventTone(event);
   if (isUncompletedToolEvent(event)) {
     name = formatEventLabel({ ...event, name: eventName });
@@ -96,59 +101,6 @@ function normalizeProgress(taskProgress, requestId) {
   };
 }
 
-function normalizeContextWindow(contextWindow, requestId) {
-  if (!contextWindow || textOf(contextWindow.requestId) !== requestId) {
-    return null;
-  }
-  const snapshot = contextWindow.snapshot;
-  const contextWindowTokens = countOf(snapshot?.contextWindowTokens);
-  const estimatedInputTokens = countOf(snapshot?.estimatedInputTokens);
-  const usedContextPercent = countOf(snapshot?.usedContextPercent, -1);
-  if (contextWindowTokens <= 0 || usedContextPercent < 0) return null;
-  const providerUsage = contextWindow.providerUsage;
-  const providerUsageMatches =
-    providerUsage &&
-    textOf(providerUsage.invocationId) === textOf(snapshot.invocationId);
-  const compaction = contextWindow.lastCompaction;
-  return {
-    invocationId: textOf(snapshot.invocationId),
-    modelStep: textOf(snapshot.modelStep),
-    profileId: textOf(snapshot.profileId),
-    measurement: textOf(snapshot.measurement, "estimated"),
-    source: textOf(snapshot.source, "runtime_token_estimator"),
-    admissionOutcome: textOf(snapshot.admissionOutcome),
-    contextWindowTokens,
-    estimatedInputTokens,
-    remainingContextTokens: countOf(snapshot.remainingContextTokens),
-    usedContextPercent,
-    remainingContextPercent: countOf(
-      snapshot.remainingContextPercent,
-      Math.max(0, 100 - usedContextPercent),
-    ),
-    compactionTriggerPercent: countOf(snapshot.compactionTriggerPercent, 70),
-    outputReserveTokens: countOf(snapshot.outputReserveTokens),
-    safetyReserveTokens: countOf(snapshot.safetyReserveTokens),
-    attachmentReserveTokens: countOf(snapshot.attachmentReserveTokens),
-    formatReserveTokens: countOf(snapshot.formatReserveTokens),
-    providerUsage: providerUsageMatches
-      ? {
-          inputTokens: countOf(providerUsage.inputTokens),
-          outputTokens: countOf(providerUsage.outputTokens),
-          totalTokens: countOf(providerUsage.totalTokens),
-          source: textOf(providerUsage.source, "provider_reported"),
-        }
-      : null,
-    compaction:
-      Number.isFinite(compaction?.beforePercent) &&
-      Number.isFinite(compaction?.afterPercent)
-        ? {
-            beforePercent: compaction.beforePercent,
-            afterPercent: compaction.afterPercent,
-          }
-        : null,
-  };
-}
-
 export function buildConversationActivityModel({
   requestId,
   events = [],
@@ -184,7 +136,7 @@ export function buildConversationActivityModel({
   const toolCount = countToolInvocations(scopedEvents);
   const timeline = buildEventTimelineEntries(scopedEvents);
   const progress = normalizeProgress(taskProgress, normalizedRequestId);
-  const contextWindowModel = normalizeContextWindow(
+  const contextWindowModel = projectContextWindowDisplay(
     contextWindow,
     normalizedRequestId,
   );
@@ -314,7 +266,9 @@ export function createConversationActivity({
     const hasFailures = model.failureCount > 0;
     const hasRoleCards = model.roleCards.length > 0;
 
-    const details = documentRoot.createElement(hasRoleCards ? "section" : "details");
+    const details = documentRoot.createElement(
+      hasRoleCards ? "section" : "details",
+    );
     details.className = "conversation-activity";
     details.classList.toggle("is-inline-agents", hasRoleCards);
     details.dataset.requestId = model.requestId;
@@ -324,13 +278,20 @@ export function createConversationActivity({
         : manuallyExpandedCompletedRequests.has(model.requestId);
     }
 
-    const summary = documentRoot.createElement(hasRoleCards ? "header" : "summary");
+    const summary = documentRoot.createElement(
+      hasRoleCards ? "header" : "summary",
+    );
     summary.className = "conversation-activity-summary";
     if (hasRoleCards) summary.setAttribute("tabindex", "-1");
     const heading = documentRoot.createElement("span");
     heading.className = "conversation-activity-heading";
     if (!hasRoleCards)
-      appendTextNode(documentRoot, heading, "conversation-activity-chevron", "");
+      appendTextNode(
+        documentRoot,
+        heading,
+        "conversation-activity-chevron",
+        "",
+      );
     const activityTitle = hasRoleCards ? "Agents" : "Activity";
     appendTextNode(
       documentRoot,
@@ -418,7 +379,9 @@ export function createConversationActivity({
       if (!showsTimeline) return false;
       return pinConversationActivityToLatest({
         details: hasRoleCards ? { open: true } : details,
-        body: hasRoleCards ? body.querySelector(".conversation-role-panel") : body,
+        body: hasRoleCards
+          ? body.querySelector(".conversation-role-panel")
+          : body,
         streaming: model.openByDefault && showsTimeline,
       });
     };

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

@@ -13,17 +13,18 @@ export function createConversationStatus({
   getActiveRequestId,
   getActivityForMessage,
   isConnected = () => true,
+  present = (model) => model,
   documentRoot = document,
 }) {
   const entries = new Map();
 
   function refresh(message, node) {
-    const model = buildConversationStatus({
+    const model = present(buildConversationStatus({
       ...getActivityForMessage(message),
       requestId: message.requestId,
       streaming: isActiveAssistant(message, getActiveRequestId()),
       connected: isConnected(),
-    });
+    }));
     node.hidden = !model;
     const label = model?.label || "";
     if (node.textContent !== label) node.textContent = label;

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

@@ -31,6 +31,14 @@ export function createConversationView({
   canOpenSchedule = () => true,
   filePreview = { reset() {}, syncScope() {}, setWorkspace() {} },
   sparkActions = { createNode: () => null },
+  scrollBehavior = null,
+  preserveMessageHistory = false,
+  createActivityView = createConversationActivity,
+  statusPresentation = (model) => model,
+  statusPlacement = "bubble",
+  emptyState = { title: "What would you like to work on?", copy: "Ask a question, inspect a project, or start a task." },
+  showReasoning = true,
+  showContextWindow = true,
   documentRoot = document,
   viewport = window,
 }) {
@@ -39,7 +47,7 @@ export function createConversationView({
     onOpenJob: onOpenSchedule,
     canOpenJob: canOpenSchedule,
   });
-  const conversationActivity = createConversationActivity({
+  const conversationActivity = createActivityView({
     documentRoot,
     onOpenFile: filePreview.open,
     canOpenFile: filePreview.canOpen,
@@ -49,12 +57,13 @@ export function createConversationView({
     getActiveRequestId,
     getActivityForMessage,
     isConnected,
+    present: statusPresentation,
     documentRoot,
   });
-  const composerContextWindow = createComposerContextWindow({
+  const composerContextWindow = showContextWindow ? createComposerContextWindow({
     container: dom.composerContextWindow,
     documentRoot,
-  });
+  }) : { render() {}, reset() {} };
   const composerPlan = createComposerPlan({
     container: dom.composerPlan,
     documentRoot,
@@ -68,6 +77,7 @@ export function createConversationView({
     viewport,
     scrollRoot: dom.messagesList,
     onLayoutChange: () => {
+      if (scrollBehavior) { scrollBehavior.onLayoutChange?.(); return; }
       if (viewState.followMessages) scrollToEnd();
     },
   });
@@ -86,6 +96,7 @@ export function createConversationView({
   }
 
   function scrollToEnd() {
+    if (scrollBehavior) return scrollBehavior.toEnd();
     viewState.followMessages = true;
     pinScrollToEnd(dom.messagesList);
     updateJumpToLatest();
@@ -112,18 +123,22 @@ export function createConversationView({
   }
 
   function renderEmptyState() {
+    if (emptyState.render) return emptyState.render(dom.messagesList);
     dom.messagesList.innerHTML = `
       <div class="empty-state chat-empty-state">
-        <div class="mode-empty-title">What would you like to work on?</div>
-        <div class="mode-empty-copy">Ask a question, inspect a project, or start a task.</div>
+        <div class="mode-empty-title"></div>
+        <div class="mode-empty-copy"></div>
       </div>
     `;
+    dom.messagesList.querySelector(".mode-empty-title").textContent = emptyState.title;
+    dom.messagesList.querySelector(".mode-empty-copy").textContent = emptyState.copy;
   }
 
   function createMessageNode(message) {
     const scheduleNode = conversationSchedule.createNode(message);
     if (scheduleNode) return scheduleNode;
     const row = documentRoot.createElement("article");
+    row.dataset.messageId = String(message.id);
     row.dataset.requestId = message.requestId || "";
     row.className = `message-row ${message.role === "user" ? "user" : "assistant"}`;
     row.setAttribute(
@@ -162,22 +177,23 @@ export function createConversationView({
     const attachments = messageAttachments.createNode(message.attachments);
     if (attachments) bubble.appendChild(attachments);
 
+    let activity = null;
     if (message.role !== "user" && message.requestId) {
       const activityInput = {
         requestId: message.requestId,
         streaming: Boolean(message.streaming),
         ...getActivityForMessage(message),
       };
-      const activity = conversationActivity.createNode(activityInput);
+      activity = conversationActivity.createNode(activityInput);
       if (activity) bubble.appendChild(activity);
     }
 
-    const thinking = conversationReasoning.createNode(message);
+    const thinking = showReasoning ? conversationReasoning.createNode(message) : null;
     if (thinking) bubble.appendChild(thinking);
 
     bubble.appendChild(body);
     const status = conversationStatus.createNode(message);
-    if (status) bubble.appendChild(status);
+    if (status && statusPlacement === "bubble") bubble.appendChild(status);
     const linkPreviews = messageLinkPreviews.createNode(message);
     if (linkPreviews) bubble.appendChild(linkPreviews);
     if (message.role !== "user" && message.text && !message.streaming) {
@@ -196,12 +212,15 @@ export function createConversationView({
       actions.appendChild(copyButton);
       bubble.appendChild(actions);
     }
-    const sparkChoices = sparkActions.createNode(message, { onKept: () => row.focus({ preventScroll: true }) });
-    if (sparkChoices) {
-      row.tabIndex = -1;
-      bubble.appendChild(sparkChoices);
-    }
+    const initiativeAction = sparkActions.createNode(message);
+    if (initiativeAction) bubble.appendChild(initiativeAction);
     row.appendChild(bubble);
+    if (status && statusPlacement === "outside") {
+      const hasVisibleContent = Boolean(message.text || attachments || activity || thinking || linkPreviews || initiativeAction);
+      bubble.hidden = !hasVisibleContent;
+      row.classList.add("message-status-outside");
+      row.appendChild(status);
+    }
     return row;
   }
 
@@ -228,7 +247,7 @@ export function createConversationView({
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
       viewState.followMessages || isNearScrollEnd(dom.messagesList);
-    const messages = projectApprovalContinuations(getMessages());
+    const messages = preserveMessageHistory ? getMessages() : projectApprovalContinuations(getMessages());
     conversationReasoning.beginRender(messages);
     messageLinkPreviews.reset();
     conversationStatus.reset();
@@ -237,6 +256,7 @@ export function createConversationView({
       renderEmptyState();
       viewState.followMessages = true;
       updateJumpToLatest();
+      scrollBehavior?.afterRender();
       return;
     }
     for (const message of messages) {
@@ -245,6 +265,7 @@ export function createConversationView({
     for (const pendingApproval of getPendingApprovals()) {
       dom.messagesList.appendChild(createApprovalCard(pendingApproval));
     }
+    if (scrollBehavior) return scrollBehavior.afterRender();
     if (shouldFollow) {
       scrollToEnd();
     } else {
@@ -302,6 +323,7 @@ export function createConversationView({
     viewState.bound = true;
     dom.jumpToLatestButton.addEventListener("click", scrollToEnd);
     dom.messagesList.addEventListener("scroll", () => {
+      if (scrollBehavior) return;
       viewState.followMessages = isNearScrollEnd(dom.messagesList);
       if (!viewState.followMessages) viewState.scrollSettleVersion += 1;
       updateJumpToLatest();

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

@@ -0,0 +1,28 @@
+import { escapeHtml } from "../../lib/text-format.js";
+
+function runLink(automation, environmentId) {
+  const query = new URLSearchParams({
+    environment: environmentId,
+    automation: automation.id,
+    run: automation.latestRunId,
+  });
+  return `/automations?${query}`;
+}
+
+function runStatusLabel(status) {
+  return { pending: "Queued", stopping: "Stopping" }[status] || "Running";
+}
+
+export function renderDashboardAutomations(automations = [], environmentId = "", unavailable = false) {
+  if (!automations.length && !unavailable) return "";
+  const visible = automations.slice(0, 3);
+  const remaining = automations.length - visible.length;
+  const heading = unavailable ? "Automation status unavailable" :
+    `${automations.length} ${automations.length === 1 ? "automation" : "automations"} in progress`;
+  return `<div class="home-automation-heading"><span>ABot Studio</span><strong>${heading}</strong></div>
+    <div class="home-automation-runs">${visible.map((automation) => `<a class="home-automation-run" href="${escapeHtml(runLink(automation, environmentId))}">
+      ${unavailable ? "" : '<span class="home-automation-pulse" aria-hidden="true"></span>'}
+      <strong dir="auto">${escapeHtml(automation.title || "ABot Automation")}</strong>
+      <span>${unavailable ? "Last seen " : ""}${runStatusLabel(automation.latestRunStatus)} · ${unavailable ? "Open run" : "View live timeline"}</span>
+    </a>`).join("")}${remaining ? `<span class="home-automation-more">+${remaining} more in ABot Studio</span>` : ""}${unavailable ? '<button type="button" class="home-automation-retry" data-dashboard-action="refresh">Retry</button>' : ""}</div>`;
+}

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

@@ -2,6 +2,7 @@ import { updateLiveRegion } from "../../lib/live-region.js";
 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 {
   hasPendingDashboardApprovals,
   renderDashboardApprovals,
@@ -12,6 +13,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   root.innerHTML = `<div class="home-workspace-body">
     <div class="home-workspace-content">
       <section class="home-panel home-learning-panel" data-dashboard-learning hidden><div data-dashboard-learning-content></div></section>
+      <section class="home-automation-status" aria-label="Automations in progress" aria-live="polite" data-dashboard-automations hidden></section>
       <div class="home-overview">
         <section class="home-panel home-activity-panel" aria-label="Recent activity" data-dashboard-activity></section>
         <section class="home-panel home-recent-panel" aria-label="Recent conversations" data-dashboard-conversations></section>
@@ -34,6 +36,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
   const composerHost = root.querySelector("[data-dashboard-composer]");
   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]"));
   const composerNote = root.querySelector(".home-composer-note");
   const handlers = {
@@ -63,6 +66,10 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       approvalParent.appendChild(approvals);
     root.classList.toggle("home-setup-active", setupRequired);
     learningPanel.hidden = setupRequired || !passiveLearning;
+    const automationMarkup = renderDashboardAutomations(
+      snapshot.activeAutomations, snapshot.environmentId, snapshot.automationStatusUnavailable,
+    );
+    automationPanel.hidden = setupRequired || !automationMarkup;
     overview.hidden = setupRequired;
     approvals.hidden = setupRequired;
     composerHost.hidden = snapshot.composerAvailable === false;
@@ -70,6 +77,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
     composerNote.hidden = snapshot.composerAvailable === false;
     if (setupRequired) {
       activity.innerHTML = "";
+      automationPanel.innerHTML = "";
       conversations.innerHTML = "";
       approvals.innerHTML = "";
       return;
@@ -81,6 +89,7 @@ export function createDashboardWorkspace({ root, actions, passiveLearning }) {
       onDecision: actions.decideApproval,
       documentRoot: root.ownerDocument,
     });
+    updateLiveRegion(automationPanel, automationMarkup);
 
     updateLiveRegion(
       activity,

package/dist/src/web-ui/app/components/notifications/dom.js

@@ -19,7 +19,7 @@ export function mountNotificationsDom(dom, documentRoot = document) {
   panel.setAttribute("aria-labelledby", "notificationsWorkspaceTitle");
   panel.setAttribute("aria-hidden", "true");
   panel.innerHTML = `<header class="workspace-page-header">
-    <div class="workspace-page-heading"><h2 id="notificationsWorkspaceTitle">Notifications</h2><p>Updates from your assistant, in one place.</p></div>
+    <div class="workspace-page-heading"><h2 id="notificationsWorkspaceTitle">Notifications</h2></div>
     <button type="button" class="workspace-page-back notification-close">Back to chat</button>
     </header><div class="workspace-page-body" data-notifications-root></div>`;
   dom.app.append(panel);

package/dist/src/web-ui/app/components/notifications/feedback.js

@@ -0,0 +1,34 @@
+import { escapeHtml } from "../../lib/text-format.js";
+import { hasOlderUnreadNotifications } from "./pagination.js";
+
+function notificationFeedbackState(snapshot, items) {
+  if (snapshot.error) return { message: snapshot.error };
+  if (!snapshot.supported) return { message: "Notifications are unavailable with this backend." };
+  if (items.length) return { message: "" };
+  if (snapshot.loading) return { message: "Loading notifications…" };
+  if (hasOlderUnreadNotifications(snapshot))
+    return { message: "Unread notifications are in older history. Load older notifications to view them." };
+  if (snapshot.filter === "unread") return {
+    message: "You're all caught up.",
+    detail: "No unread notifications. Switch to All to revisit earlier updates.",
+    icon: '<circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" />',
+  };
+  return {
+    message: "No notifications yet.",
+    detail: "Updates from your chats and automations will appear here.",
+    icon: '<path d="M5 17h14l-2-3V9a5 5 0 0 0-10 0v5l-2 3Z" /><path d="M10 20h4" />',
+  };
+}
+
+export function notificationFeedback(snapshot, items) {
+  return notificationFeedbackState(snapshot, items).message;
+}
+
+export function renderNotificationFeedback(snapshot, items) {
+  const state = notificationFeedbackState(snapshot, items);
+  if (!state.detail) return escapeHtml(state.message);
+  return `<div class="notification-empty-state">
+    <span class="notification-empty-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${state.icon}</svg></span>
+    <h3>${escapeHtml(state.message)}</h3><p>${escapeHtml(state.detail)}</p>
+  </div>`;
+}

package/dist/src/web-ui/app/components/notifications/pagination.js

@@ -0,0 +1,13 @@
+export function canLoadOlderNotifications(snapshot) {
+  if (!snapshot.nextCursor) return false;
+  if (snapshot.filter !== "unread") return true;
+  return hasOlderUnreadNotifications(snapshot);
+}
+
+export function hasOlderUnreadNotifications(snapshot) {
+  if (!snapshot.nextCursor) return false;
+  if (snapshot.filter !== "unread") return false;
+  const loadedUnreadCount = (snapshot.items || [])
+    .filter((item) => item.readAt == null).length;
+  return snapshot.unreadCount > loadedUnreadCount;
+}

package/dist/src/web-ui/app/components/notifications/presentation.js

@@ -4,7 +4,8 @@ export const NOTIFICATION_KIND_LABELS = Object.freeze({
   reply: "Assistant replies",
   failure: "Failures",
   approval: "Approval requests",
-  proposal: "Co-worker suggestions",
+  proposal: "SPARK suggestions",
+  automation: "Automation runs",
 });
 
 const DELIVERY_LABELS = Object.freeze({
@@ -21,6 +22,7 @@ const NOTIFICATION_KIND_ICONS = Object.freeze({
   failure: '<path d="m12 3 10 18H2L12 3Z" /><path d="M12 9v5M12 17h.01" />',
   approval: '<path d="M12 3 4 6v6c0 5 8 9 8 9s8-4 8-9V6l-8-3Z" /><path d="m8 12 3 3 5-6" />',
   proposal: '<path d="m12 3 2.5 6.5L21 12l-6.5 2.5L12 21l-2.5-6.5L3 12l6.5-2.5L12 3Z" />',
+  automation: '<rect x="3" y="4" width="18" height="16" rx="2" /><path d="M7 8h10M8 12l3 2 4-4" />',
 });
 
 function renderNotificationTimestamp(createdAt) {
@@ -36,6 +38,24 @@ function notificationBodyRepeatsTitle(item) {
   return item.body.trim() === item.title.trim();
 }
 
+function hasBoundAutomationSource(item, url) {
+  if (!item.sourceUrl.startsWith("/automations?")) return false;
+  if (url.pathname !== "/automations" || url.hash) return false;
+  if (typeof item.automationId !== "string" || !item.automationId) return false;
+  if (typeof item.runId !== "string" || !item.runId) return false;
+  if (item.sessionId !== undefined || item.requestId !== undefined) return false;
+  const expected = {
+    environment: item.environmentId,
+    automation: item.automationId,
+    run: item.runId,
+  };
+  for (const [key, value] of Object.entries(expected)) {
+    if (url.searchParams.getAll(key).length !== 1) return false;
+    if (url.searchParams.get(key) !== value) return false;
+  }
+  return [...url.searchParams.keys()].every((key) => Object.hasOwn(expected, key));
+}
+
 export function notificationSourceUrl(item) {
   if (typeof item?.sourceUrl !== "string") return "";
   if (!item.sourceUrl.startsWith("/")) return "";
@@ -46,6 +66,8 @@ export function notificationSourceUrl(item) {
     return "";
   }
   if (url.origin !== "https://abot.invalid") return "";
+  if (item.kind === "automation")
+    return hasBoundAutomationSource(item, url) ? `${url.pathname}${url.search}` : "";
   if (!["/chat", "/learning", "/home", "/notifications"].includes(url.pathname)) return "";
   if (url.searchParams.get("environment") !== item.environmentId) return "";
   return `${url.pathname}${url.search}${url.hash}`;
@@ -107,8 +129,7 @@ export function renderNotificationSettings(snapshot) {
   const status = desktop.message || (desktop.available
     ? "Computer access is connected. Alerts can arrive while your browser is closed."
     : "Connect Computer access to receive desktop alerts.");
-  return `<details class="notification-settings"><summary>Notification settings</summary>
-    <div class="notification-settings-body">
+  return `<div class="notification-settings-body">
       <label class="notification-setting"><span><strong>Desktop notifications</strong>
         <small>Show ABot alerts on this computer.</small></span>
         <input type="checkbox" data-notification-preference="desktopEnabled" ${preferences.desktopEnabled ? "checked" : ""} ${disabled}></label>
@@ -119,5 +140,5 @@ export function renderNotificationSettings(snapshot) {
         ).join("")}
       </div></div>
       <p class="notification-settings-note">History is always saved. Replies in the active conversation stay silent. System notification settings apply.</p>
-    </div></details>`;
+    </div>`;
 }