@abot-ai/runtime 1.6.0 → 1.7.0

package/dist/src/web-ui/app/controllers/conversation-session-controller.d.ts

@@ -47,10 +47,11 @@ export interface ConversationSessionClient {
     readThroughMessageId: number | string | null;
     readThroughRequestId?: string;
   }): Promise<Record<string, unknown>>;
-  listSessions(environmentId: string): Promise<Record<string, unknown>>;
+  listSessions(environmentId: string, page?: Record<string, unknown>): Promise<Record<string, unknown>>;
   loadSession(
     sessionId: string,
     environmentId: string,
+    page?: Record<string, unknown>,
   ): Promise<Record<string, unknown>>;
   fetchRequestEvents(options: {
     requestId: string;
@@ -125,6 +126,7 @@ export declare function normalizeConversationMessage(
 export declare function createConversationSessionController(
   options: ConversationSessionControllerOptions,
 ): {
+  history: { load(direction?: "older" | "newer"): Promise<void>; latest(): Promise<void>; hasNewer(): boolean };
   activateRequestForScope(
     scope: { environmentId: string; sessionId: string },
     requestId: string,
@@ -150,12 +152,16 @@ export declare function createConversationSessionController(
   invalidateEnvironmentLoads(): void;
   loadSessions(): Promise<ConversationSession[]>;
   markCurrentSessionReadSoon(): void;
+  rehydrateRequests(requests: Record<string, unknown>[]): Promise<boolean>;
   normalizeMessage(raw: unknown): ConversationMessage;
   openSession(
     sessionId: string,
     options?: {
-      isRouteCurrent(): boolean;
-      commitRouteNavigation(): boolean;
+      isRouteCurrent?(): boolean;
+      commitRouteNavigation?(): boolean;
+      snapshot?: Record<string, unknown>;
+      page?: Record<string, unknown>;
+      preserveCurrentWindow?: boolean;
     },
   ): Promise<void>;
   requestBelongsToCurrentView(requestId: string): boolean;

package/dist/src/web-ui/app/controllers/conversation-session-controller.js

@@ -4,25 +4,24 @@ import {
   isContextReplayCurrent,
 } from "../lib/context-window-replay.js";
 import { synchronizeContextRequestLifecycle } from "../lib/context-window-state.js";
-import { mergeSessionListReadState } from "../lib/session-read-state.js";
+import { createSessionListPagination } from "./session-list-pagination.js";
+import { createHistoryPagination, canRestoreSnapshotQueue } from "./history-pagination.js";
 import { createConversationReadStateController } from "./conversation-read-state-controller.js";
+import { createConversationRequestHydration } from "./conversation-request-hydration.js";
 import { normalizeScheduleReference } from "../lib/schedule-message.js";
-import { createWebSessionId, escapeHtml, textOf } from "../lib/text-format.js";
+import { createWebSessionId, textOf } from "../lib/text-format.js";
 import { insertRequestUserMessageBeforeAssistant } from "../ui-behavior.js";
 import { normalizeRealtimeMessage } from "../lib/realtime-message.js";
 import {
   sparkProposalId,
   sparkHandoffAvailable,
 } from "../lib/spark-proposal-message.js";
-import {
-  isStoppedRequest,
-  restoreStoppedResponses,
-} from "../lib/request-stop-state.js";
 import {
   isApprovalPresentation,
   requestLifecycles,
   rememberRequestLifecycle,
   sameConversationMessage,
+  mergeConversationMessage,
 } from "../lib/request-lifecycle-view.js";
 
 export function normalizeConversationMessage(raw, fallbackIndex = 0) {
@@ -82,12 +81,19 @@ export function createConversationSessionController({
   onSessionCreated = () => {},
 }) {
   let environmentLoadRevision = 0;
-  let sessionListRevision = 0;
+  const listPagination = createSessionListPagination({ state, dom, client, sessions, selectedEnvironmentId, renderSessions, onSessionListState });
+  const history = createHistoryPagination({ state, dom, client, selectedEnvironmentId,
+    normalizeMessage: normalizeConversationMessage, renderMessages, conversationView, applyReadState: sessions.applyReadState,
+    onRequests: (requests) => restoreSessionEventState(requests, new Set(), true),
+    loadLatest: () => openSession(state.currentSessionId, { preserveCurrentWindow: true }),
+    onNewerPage: (messages) => markDisplayedMessagesReadSoon(messages),
+  });
   let sessionRestoreRevision = 0;
 
   function invalidateEnvironmentLoads() {
     environmentLoadRevision += 1;
-    sessionListRevision += 1;
+    listPagination.invalidate();
+    history.reset();
     sessionRestoreRevision += 1;
     state.sessions = [];
     onSessionListState({ status: "loading", sessions: [] });
@@ -98,7 +104,7 @@ export function createConversationSessionController({
     return normalizeConversationMessage(raw, state.messages.length);
   }
 
-  const { markCurrentSessionReadSoon } = createConversationReadStateController({
+  const { markCurrentSessionReadSoon, markDisplayedMessagesReadSoon } = createConversationReadStateController({
     state,
     client,
     selectedEnvironmentId,
@@ -107,6 +113,11 @@ export function createConversationSessionController({
     isConversationVisible,
     scheduleTask,
   });
+  const requestHydration = createConversationRequestHydration({
+    state, client, selectedEnvironmentId, sessionQueue, applyConversationChrome, renderSessions,
+    updateComposerSendState, reportQueueFailure, activeAssistantForRequest, restoreSessionEventState,
+    subscribeSession, subscribeRequest, replayRequestEvents, resumeRequest, recoverBlockedQueue, drainQueuedMessage, renderMessages,
+  });
 
   function addOrMergeMessage(message) {
     const id = textOf(message.id);
@@ -115,13 +126,7 @@ export function createConversationSessionController({
       sameConversationMessage(item, message),
     );
     if (existingIndex >= 0) {
-      state.messages[existingIndex] = {
-        ...state.messages[existingIndex],
-        ...message,
-        text: message.text || state.messages[existingIndex].text,
-        thinkingText:
-          message.thinkingText || state.messages[existingIndex].thinkingText,
-      };
+      state.messages[existingIndex] = mergeConversationMessage(state.messages[existingIndex], message);
     } else {
       state.messages.push(message);
     }
@@ -156,6 +161,7 @@ export function createConversationSessionController({
   }
 
   function resetLiveRequestView() {
+    history.reset();
     state.events = [];
     state.taskProgressByRequest.clear();
     state.contextWindowByRequest.clear();
@@ -253,12 +259,16 @@ export function createConversationSessionController({
   function restoreSessionEventState(
     requests = [],
     hydrateRequestIds = new Set(),
+    append = false,
   ) {
-    state.events = [];
-    state.taskProgressByRequest.clear();
-    state.contextWindowByRequest.clear();
+    if (!append) {
+      state.events = [];
+      state.taskProgressByRequest.clear();
+      state.contextWindowByRequest.clear();
+    }
     const requestEvents = [];
     for (const request of requests) {
+      rememberRequestLifecycle(state, request.lifecycle);
       if (!Array.isArray(request.events)) continue;
       const replayScope = captureContextReplayScope(
         state,
@@ -372,46 +382,7 @@ export function createConversationSessionController({
       handleRealtimeMessage(event);
   }
 
-  async function loadSessions() {
-    const environmentRevision = environmentLoadRevision;
-    const requestRevision = ++sessionListRevision;
-    const environmentId = selectedEnvironmentId();
-    onSessionListState({ status: "loading", sessions: state.sessions });
-    try {
-      const payload = await client.listSessions(environmentId);
-      if (
-        environmentRevision !== environmentLoadRevision ||
-        requestRevision !== sessionListRevision ||
-        environmentId !== selectedEnvironmentId()
-      ) {
-        return [];
-      }
-      state.sessions = mergeSessionListReadState(
-        Array.isArray(payload.sessions) ? payload.sessions : [],
-        state.sessions,
-      );
-      onSessionListState({ status: "ready", sessions: state.sessions });
-      renderSessions();
-      return state.sessions;
-    } catch (error) {
-      if (
-        environmentRevision !== environmentLoadRevision ||
-        requestRevision !== sessionListRevision ||
-        environmentId !== selectedEnvironmentId()
-      ) {
-        return [];
-      }
-      onSessionListState({
-        status: "error",
-        sessions: state.sessions,
-        error: error instanceof Error ? error.message : String(error),
-      });
-      dom.sessionsList.innerHTML = `<div class="empty-state error-text">${escapeHtml(
-        error instanceof Error ? error.message : String(error),
-      )}</div>`;
-      return [];
-    }
-  }
+  const loadSessions = () => listPagination.load();
 
   async function restoreLastSession() {
     const environmentRevision = environmentLoadRevision;
@@ -422,33 +393,38 @@ export function createConversationSessionController({
       environmentRevision !== environmentLoadRevision ||
       restoreRevision !== sessionRestoreRevision ||
       environmentId !== selectedEnvironmentId() ||
-      availableSessions.length === 0 ||
       state.currentSessionId
     ) {
       return;
     }
     const savedSessionId = preferences.sessionIdForEnvironment(environmentId);
-    const targetSession =
-      availableSessions.find((session) => session.id === savedSessionId) ||
-      availableSessions[0];
-    if (targetSession?.id) await openSession(targetSession.id);
+    const targetId = savedSessionId || availableSessions[0]?.id;
+    if (!targetId) return;
+    try { await openSession(targetId); }
+    catch (error) {
+      if (error.code !== "session_not_found") throw error;
+      if (availableSessions[0]?.id && availableSessions[0].id !== targetId) await openSession(availableSessions[0].id);
+    }
   }
 
   async function openSession(
     sessionId,
-    { isRouteCurrent, commitRouteNavigation } = {},
+    { isRouteCurrent, commitRouteNavigation, snapshot, page, preserveCurrentWindow = false } = {},
   ) {
     const routeOwned = typeof commitRouteNavigation === "function";
+    const loadBeforeReset = routeOwned || preserveCurrentWindow;
     let payload;
-    if (routeOwned) {
+    const pageOptions = { ...page, waitingRequestId: sessionQueue.peek({ environmentId: selectedEnvironmentId(), sessionId })?.waitForRequestId };
+    const prefetched = canRestoreSnapshotQueue(snapshot, pageOptions.waitingRequestId) ? snapshot : undefined;
+    if (loadBeforeReset) {
       const environmentId = selectedEnvironmentId();
       const viewVersion = state.sessionViewVersion;
       const currentSessionId = state.currentSessionId;
-      payload = await client.loadSession(sessionId, environmentId);
+      payload = prefetched ?? await client.loadSession(sessionId, environmentId, pageOptions);
       if (environmentId !== selectedEnvironmentId()) return;
       if (viewVersion !== state.sessionViewVersion) return;
       if (currentSessionId !== state.currentSessionId) return;
-      if (isRouteCurrent?.() !== true) return;
+      if (routeOwned && isRouteCurrent?.() !== true) return;
     }
     if (
       state.currentSessionId &&
@@ -474,8 +450,8 @@ export function createConversationSessionController({
     renderMessages();
     subscribeSession(sessionId);
 
-    if (!routeOwned) {
-      payload = await client.loadSession(sessionId, selectedEnvironmentId());
+    if (!loadBeforeReset) {
+      payload = prefetched ?? await client.loadSession(sessionId, selectedEnvironmentId(), pageOptions);
     }
     if (
       state.currentSessionId !== sessionId ||
@@ -483,87 +459,17 @@ export function createConversationSessionController({
     ) {
       return;
     }
+    history.adopt(payload);
     const rawMessages = Array.isArray(payload.messages) ? payload.messages : [];
-    const scope = { environmentId: selectedEnvironmentId(), sessionId };
     state.messages = rawMessages.map((message, index) =>
       normalizeConversationMessage(message, index),
     );
+    const displayedPage = [...state.messages];
     sessions.applyTitle(sessionId, payload.title);
     sessions.applyReadState(sessionId, payload.readState);
-    for (const message of state.messages) {
-      if (
-        message.role === "assistant" &&
-        message.requestId &&
-        !isApprovalPresentation(message)
-      ) {
-        state.requestMessages.set(message.requestId, message.id);
-      }
-    }
     const requests = Array.isArray(payload.requests) ? payload.requests : [];
-    for (const request of requests)
-      rememberRequestLifecycle(state, request.lifecycle);
-    applyConversationChrome();
-    renderSessions();
-    const streamingRequestIds = new Set(
-      requests
-        .filter(
-          (request) => request.status === "streaming" && request.requestId,
-        )
-        .map((request) => textOf(request.requestId)),
-    );
-    if (streamingRequestIds.size === 1) {
-      const [streamingRequestId] = streamingRequestIds;
-      try {
-        sessionQueue.rebindBlocked(scope, streamingRequestId);
-      } catch (error) {
-        reportQueueFailure(
-          scope,
-          `The active request was restored, but the remaining Send next queue is paused: ${
-            error instanceof Error ? error.message : String(error)
-          }`,
-        );
-      }
-    }
-    state.activeRequestId = [...streamingRequestIds][0] || "";
-    updateComposerSendState();
-    for (const requestId of streamingRequestIds) {
-      activeAssistantForRequest(requestId);
-    }
-    restoreStoppedResponses(state.messages, requests);
-    restoreSessionEventState(requests, streamingRequestIds);
-    for (const request of requests) {
-      if (request.status === "streaming" && request.requestId) {
-        subscribeRequest(request.requestId);
-        await replayRequestEvents(request.requestId, viewVersion);
-        if (
-          state.currentSessionId !== sessionId ||
-          state.sessionViewVersion !== viewVersion
-        ) {
-          return;
-        }
-        resumeRequest(request.requestId);
-      }
-    }
-    if (!state.activeRequestId) {
-      recoverBlockedQueue(scope);
-      const queued = sessionQueue.peek(scope);
-      const terminal = queued
-        ? requests.find(
-            (request) =>
-              textOf(request.requestId) === queued.waitForRequestId &&
-              (request.status === "completed" || request.status === "failed"),
-          )
-        : null;
-      if (terminal) {
-        await drainQueuedMessage({
-          ...scope,
-          terminalRequestId: terminal.requestId,
-          cancelled: isStoppedRequest(terminal),
-        });
-      }
-    }
-    renderMessages();
-    markCurrentSessionReadSoon();
+    if (!await requestHydration.restore(requests)) return;
+    markDisplayedMessagesReadSoon(displayedPage);
   }
 
   function ensureSession() {
@@ -628,6 +534,7 @@ export function createConversationSessionController({
   }
 
   return {
+    history,
     activateRequestForScope,
     activeAssistantForRequest,
     addOrMergeMessage,
@@ -642,6 +549,7 @@ export function createConversationSessionController({
     invalidateEnvironmentLoads,
     loadSessions,
     markCurrentSessionReadSoon,
+    rehydrateRequests: requestHydration.rehydrate,
     normalizeMessage,
     openSession,
     requestBelongsToCurrentView,

package/dist/src/web-ui/app/controllers/history-pagination.js

@@ -0,0 +1,111 @@
+import { mergeHistoryPage } from "../lib/history-page-messages.js";
+
+export function canRestoreSnapshotQueue(snapshot, waitingRequestId) {
+  if (!snapshot) return false;
+  if (!waitingRequestId) return true;
+  return (snapshot.requests || []).some((request) => request.requestId === waitingRequestId);
+}
+
+export function createHistoryPagination({ state, dom, client, selectedEnvironmentId, normalizeMessage, onRequests, renderMessages, conversationView, applyReadState, loadLatest, onNewerPage = () => {} }) {
+  let revision = 0;
+  let pending = false;
+  let older = null;
+  let newer = null;
+  let error = "";
+  let scrollRequested = false;
+  let windowEnd;
+  const requestIds = new Set();
+  function reset() {
+    revision += 1; pending = false; older = null; newer = null; error = ""; requestIds.clear();
+    scrollRequested = false;
+    windowEnd = undefined;
+  }
+  function adopt(snapshot) {
+    scrollRequested = false;
+    older = snapshot.nextCursor || null; newer = snapshot.newerCursor || null;
+    windowEnd = snapshot.messages?.length ? normalizeMessage(snapshot.messages.at(-1)) : undefined;
+    for (const request of snapshot.requests || []) requestIds.add(request.requestId);
+  }
+  function refresh(snapshot) {
+    if (newer) return;
+    const first = snapshot.messages?.[0];
+    if (!first) { adopt(snapshot); return; }
+    const overlaps = state.messages.some((message) => String(message.persistedMessageId ?? message.id) === String(first.id) && message.createdAt === first.createdAt);
+    if (!overlaps) { reset(); adopt(snapshot); }
+  }
+  function isCurrent(environmentId, sessionId, version, viewVersion) {
+    if (version !== revision || viewVersion !== state.sessionViewVersion) return false;
+    if (environmentId !== selectedEnvironmentId()) return false;
+    return sessionId === state.currentSessionId;
+  }
+  async function load(direction = "older") {
+    const cursor = direction === "older" ? older : newer;
+    if (pending || !cursor) return;
+    scrollRequested = false;
+    const environmentId = selectedEnvironmentId();
+    const sessionId = state.currentSessionId;
+    const version = revision;
+    const viewVersion = state.sessionViewVersion;
+    pending = true; error = "";
+    if (conversationView.preserveScroll) conversationView.preserveScroll(renderMessages);
+    else renderMessages();
+    try {
+      const snapshot = await client.loadSession(sessionId, environmentId, { cursor });
+      if (!isCurrent(environmentId, sessionId, version, viewVersion)) return;
+      const incoming = (snapshot.messages || []).map(normalizeMessage);
+      const requests = (snapshot.requests || []).filter((request) => !requestIds.has(request.requestId));
+      for (const request of requests) requestIds.add(request.requestId);
+      const merge = () => {
+        mergeHistoryPage(state, incoming, direction, windowEnd);
+        if (direction === "newer" && incoming.length) windowEnd = incoming.at(-1);
+        if (direction === "older") older = snapshot.nextCursor || null;
+        else newer = snapshot.newerCursor || null;
+        onRequests(requests);
+        applyReadState(sessionId, snapshot.readState);
+        pending = false;
+        renderMessages();
+      };
+      if (conversationView.preserveScroll) conversationView.preserveScroll(merge);
+      else merge();
+      if (direction === "newer" && incoming.length) onNewerPage(incoming);
+    } catch (failure) {
+      if (!isCurrent(environmentId, sessionId, version, viewVersion)) return;
+      error = failure.code === "history_cursor_stale" ? "History changed. Reopen this conversation." : "Could not load history. Retry.";
+      if (failure.code === "history_cursor_stale") { older = null; newer = null; }
+    } finally {
+      if (isCurrent(environmentId, sessionId, version, viewVersion)) { pending = false; renderMessages(); }
+    }
+  }
+  function renderControls(root) {
+    if (!root?.ownerDocument) return;
+    for (const [direction, cursor, label] of [["older", older, "Load older messages"], ["newer", newer, "Load newer messages"]]) {
+      if (!cursor) continue;
+      const button = root.ownerDocument.createElement("button");
+      button.type = "button"; button.className = "history-page-button";
+      button.disabled = pending;
+      button.textContent = pending ? "Loading…" : error || label;
+      button.addEventListener("click", () => void load(direction));
+      if (direction === "older") root.prepend(button);
+      else root.append(button);
+    }
+    if (error && !older && !newer) {
+      const note = root.ownerDocument.createElement("p"); note.textContent = error; root.prepend(note);
+    }
+  }
+  // Rendering and target positioning also emit scroll events; only user input can request another page.
+  for (const name of ["wheel", "touchmove", "pointerdown"]) {
+    dom.messagesList?.addEventListener?.(name, () => { scrollRequested = true; }, { passive: true });
+  }
+  dom.messagesList?.addEventListener?.("keydown", (event) => {
+    if (["ArrowUp", "ArrowDown", "PageUp", "PageDown", "Home", "End", " "].includes(event.key)) scrollRequested = true;
+  });
+  dom.messagesList?.addEventListener?.("scroll", () => {
+    if (error || pending || !scrollRequested) return;
+    const root = dom.messagesList;
+    if (root.scrollTop < 60 && older) { scrollRequested = false; void load("older"); return; }
+    if (root.scrollHeight - root.scrollTop - root.clientHeight < 60 && newer) { scrollRequested = false; void load("newer"); }
+  }, { passive: true });
+  const controller = { reset, adopt, refresh, load, renderControls, latest: loadLatest, hasNewer: () => Boolean(newer) };
+  conversationView.setHistoryPager?.(controller);
+  return controller;
+}

package/dist/src/web-ui/app/controllers/operations-controller.d.ts

@@ -3,8 +3,19 @@ export declare function latestHealthEvent(
   details: readonly Record<string, unknown>[],
 ): Record<string, unknown> | undefined;
 
+export interface OperationsSummary {
+  readonly label: string;
+  readonly items: readonly {
+    readonly label: string;
+    readonly value: string;
+    readonly dirty?: boolean;
+    readonly status?: boolean;
+  }[];
+}
+
 export interface OperationsControllerDependencies {
   readonly getEnvironmentId?: () => string | undefined;
+  readonly onSummaryChange?: () => void;
   readonly dom: Readonly<{
     runtimeStatus: Pick<HTMLElement, "innerHTML" | "textContent">;
     runtimeLogs: Pick<HTMLElement, "textContent">;
@@ -20,6 +31,7 @@ export interface OperationsControllerDependencies {
 export declare function createOperationsController(
   options: OperationsControllerDependencies,
 ): {
+  summary(tab: string): OperationsSummary;
   environmentChanged(): void;
   loadRuntimeStatus(): Promise<void>;
   loadRuntimeLogs(): Promise<void>;

package/dist/src/web-ui/app/controllers/operations-controller.js

@@ -1,5 +1,7 @@
 import { escapeHtml, formatTime, shortId, textOf } from "../lib/text-format.js";
-import { getNumber } from "../lib/event-presentation.js";
+import { formatDurationMs, latestHealthEvent, projectOperationsSummary } from "../components/operations-summary.js";
+
+export { formatDurationMs, latestHealthEvent } from "../components/operations-summary.js";
 
 function renderRuntimeRows(rows) {
   return `
@@ -18,34 +20,27 @@ function renderRuntimeRows(rows) {
   `;
 }
 
-export function formatDurationMs(value) {
-  const ms = typeof value === "number" ? value : Number(value);
-  if (!Number.isFinite(ms) || ms < 0) return "-";
-  const seconds = Math.round(ms / 1000);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.round(seconds / 60);
-  if (minutes < 90) return `${minutes}m`;
-  const hours = Math.round(minutes / 60);
-  if (hours < 48) return `${hours}h`;
-  return `${Math.round(hours / 24)}d`;
-}
-
-export function latestHealthEvent(details) {
-  return [...details].sort(
-    (left, right) =>
-      getNumber(right.lastEventAt, 0) - getNumber(left.lastEventAt, 0),
-  )[0];
-}
-
-export function createOperationsController({ dom, client, getEnvironmentId = () => undefined }) {
+export function createOperationsController({ dom, client, getEnvironmentId = () => undefined, onSummaryChange = () => {} }) {
   let statusRevision = 0;
   let logsRevision = 0;
+  let healthRevision = 0;
   let displayedEnvironment = getEnvironmentId();
+  const reads = { runtime: { phase: "idle" }, logs: { phase: "idle" }, health: { phase: "idle" } };
+  function updateSummaryRead(tab, read) {
+    reads[tab] = read;
+    onSummaryChange();
+  }
   function isCurrentOperationsRead(environmentId, revision, currentRevision) {
     if (environmentId !== getEnvironmentId()) return false;
     return revision === currentRevision;
   }
+  function isCurrentHealthRead(revision) {
+    return revision === healthRevision;
+  }
   const controller = {
+    summary(tab) {
+      return projectOperationsSummary(tab, reads, getEnvironmentId());
+    },
     environmentChanged() {
       const environmentId = getEnvironmentId();
       if (displayedEnvironment === environmentId) return;
@@ -57,6 +52,7 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
       const environmentId = getEnvironmentId();
       const revision = ++statusRevision;
       dom.runtimeStatus.textContent = "Loading...";
+      updateSummaryRead("runtime", { phase: "loading", environmentId });
       try {
         const payload = await client.getRuntimeStatus(environmentId);
         if (!isCurrentOperationsRead(environmentId, revision, statusRevision)) return;
@@ -70,11 +66,13 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
             <div class="runtime-row"><span>Trace</span><strong>${escapeHtml(status.config?.traceFile || "-")}</strong></div>
           </div>
         `;
+        updateSummaryRead("runtime", { phase: "ready", environmentId, payload });
       } catch (error) {
         if (!isCurrentOperationsRead(environmentId, revision, statusRevision)) return;
         dom.runtimeStatus.innerHTML = `<span class="error-text">${escapeHtml(
           error instanceof Error ? error.message : String(error),
         )}</span>`;
+        updateSummaryRead("runtime", { phase: "error", environmentId });
       }
     },
 
@@ -82,6 +80,7 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
       const environmentId = getEnvironmentId();
       const revision = ++logsRevision;
       dom.runtimeLogs.textContent = "Loading...";
+      updateSummaryRead("logs", { phase: "loading", environmentId });
       try {
         const payload = await client.getRuntimeLogs(100, environmentId);
         if (!isCurrentOperationsRead(environmentId, revision, logsRevision)) return;
@@ -91,17 +90,22 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
         dom.runtimeLogs.textContent = lines.length
           ? lines.join("\n")
           : "No runtime log lines returned.";
+        updateSummaryRead("logs", { phase: "ready", environmentId, payload, refreshedAt: Date.now() });
       } catch (error) {
         if (!isCurrentOperationsRead(environmentId, revision, logsRevision)) return;
         dom.runtimeLogs.textContent =
           error instanceof Error ? error.message : String(error);
+        updateSummaryRead("logs", { phase: "error", environmentId });
       }
     },
 
     async loadSystemHealth() {
+      const revision = ++healthRevision;
       dom.healthStatus.textContent = "Loading...";
+      updateSummaryRead("health", { phase: "loading" });
       try {
         const payload = await client.getSystemHealth();
+        if (!isCurrentHealthRead(revision)) return;
         const details = Array.isArray(payload.activeStreamingRequestDetails)
           ? payload.activeStreamingRequestDetails
           : [];
@@ -149,10 +153,13 @@ export function createOperationsController({ dom, client, getEnvironmentId = ()
               : '<div class="empty-state compact">No active streaming requests</div>'
           }
         `;
+        updateSummaryRead("health", { phase: "ready", payload });
       } catch (error) {
+        if (!isCurrentHealthRead(revision)) return;
         dom.healthStatus.innerHTML = `<span class="error-text">${escapeHtml(
           error instanceof Error ? error.message : String(error),
         )}</span>`;
+        updateSummaryRead("health", { phase: "error" });
       }
     },
   };

package/dist/src/web-ui/app/controllers/runtime-onboarding-controller.d.ts

@@ -17,6 +17,7 @@ export interface RuntimeOnboardingControllerDependencies {
     render(setup: RuntimeAvailability): void;
   }>;
   readonly reloadModels: () => void | Promise<void>;
+  readonly getEnvironmentId?: () => string;
   readonly setMessageStatus: (message: string) => void;
   readonly onStateChange?: () => void;
 }

package/dist/src/web-ui/app/controllers/runtime-onboarding-controller.js

@@ -40,11 +40,13 @@ export function createRuntimeOnboardingController({
   state,
   guide,
   reloadModels,
+  getEnvironmentId = () => "",
   setMessageStatus,
   onStateChange = () => {},
 }) {
   let checkPromise = null;
   let checkRevision = 0;
+  let catalogEnvironmentId = getEnvironmentId();
 
   function bind() {
     guide.bind({ onCheckAgain: checkAgain, onApplied: startCatalogCheck });
@@ -55,7 +57,16 @@ export function createRuntimeOnboardingController({
     guide.render(state.runtimeAvailability);
   }
 
+  function resetCatalogEnvironment() {
+    const environmentId = getEnvironmentId();
+    if (catalogEnvironmentId === environmentId) return;
+    catalogEnvironmentId = environmentId;
+    state.runtimeAvailability = { status: "loading" };
+    render();
+  }
+
   function beginCatalogLoad() {
+    resetCatalogEnvironment();
     state.runtimeAvailability = {
       status: "checking",
       showGuide: guideWasVisible(state.runtimeAvailability),