@abot-ai/runtime 1.4.0 → 1.5.0

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

@@ -7,13 +7,11 @@ import { escapeHtml, textOf } from "../../lib/text-format.js";
 import { CONFIG_CATEGORIES } from "./config-model.js";
 
 export function createConfigWorkspaceView({
+  onNavigationChange = () => {},
   state,
   dom,
   eventTarget,
-  memorySetup,
-  memoryManagement,
   pluginManagement,
-  hostConnection,
   configFileEntries,
   configFileKey,
   countObjectKeys,
@@ -26,13 +24,24 @@ export function createConfigWorkspaceView({
   isFileDirty,
   rawDraftFor,
   renderCategoryPanel,
-  renderCategoryTab,
   renderConfigMap,
   renderModelList,
   renderSelectedModelEditor,
   renderStepsEditor,
   selectedRawConfigFile,
 }) {
+  const operationsSection = dom.configDashboard.parentElement?.querySelector?.(
+    "#configOperationsSection",
+  );
+
+  function mountOperationsSection() {
+    if (!operationsSection) return;
+    const panel = dom.configDashboard.querySelector("#configOperationsPanel");
+    if (!panel) return;
+    panel.appendChild(operationsSection);
+    operationsSection.hidden = false;
+  }
+
   function selectedConfigModelIsAvailable(models) {
     return (
       Boolean(state.selectedConfigModelId) &&
@@ -65,7 +74,7 @@ export function createConfigWorkspaceView({
         state.appliedJsonRepairKeys.has(configFileKey(requestRunner)),
       )
     )
-      return '<p class="error-text">Repair this linked file in Advanced → Raw JSON before editing pipeline settings.</p>';
+      return '<p class="error-text">Repair this linked configuration file before editing pipeline settings.</p>';
     return renderStepsEditor(
       requestRunner,
       "Request pipeline",
@@ -82,9 +91,42 @@ export function createConfigWorkspaceView({
     return editor !== eventTarget.document?.activeElement;
   }
 
+  function renderUnavailableDashboard() {
+    const unavailable =
+      '<div class="empty-state">No config dashboard data</div>';
+    dom.configDashboard.innerHTML =
+      '<div class="config-category-panels">' +
+      CONFIG_CATEGORIES.map((category) =>
+        renderCategoryPanel(
+          category,
+          category === "operations" ? "" : unavailable,
+        ),
+      ).join("") +
+      "</div>";
+    mountOperationsSection();
+  }
+
+  function unavailableDashboardNeedsShell() {
+    const filesUnavailable = !state.configDashboard?.files;
+    const operationsPanelMissing = !dom.configDashboard.querySelector(
+      "#configOperationsPanel",
+    );
+    return filesUnavailable && operationsPanelMissing;
+  }
+
+  function shouldLockConfigPanel(panel, busy) {
+    return busy && panel.dataset.configCategoryPanel !== "operations";
+  }
+
   function syncDashboardInteractivity() {
+    if (unavailableDashboardNeedsShell()) renderUnavailableDashboard();
     const busy = dashboardIsBusy();
-    dom.configDashboard.inert = busy;
+    dom.configDashboard.inert = false;
+    for (const panel of dom.configDashboard.querySelectorAll(
+      ".config-category-panel",
+    )) {
+      panel.inert = shouldLockConfigPanel(panel, busy);
+    }
     dom.configDashboard.setAttribute("aria-busy", busy ? "true" : "false");
     dom.refreshConfigButton.disabled = busy;
   }
@@ -92,8 +134,7 @@ export function createConfigWorkspaceView({
   function renderConfigDashboard() {
     const dashboard = state.configDashboard;
     if (!dashboard?.files) {
-      dom.configDashboard.innerHTML =
-        '<div class="empty-state">No config dashboard data</div>';
+      renderUnavailableDashboard();
       return;
     }
     const runtime = dashboard.files.runtime;
@@ -117,6 +158,12 @@ export function createConfigWorkspaceView({
       sparseOverrides,
     );
     const dirtyCount = dirtyFiles().length;
+    const repairNeeded = configFileEntries().some((file) =>
+      configRequiresRawRepair(
+        file,
+        state.appliedJsonRepairKeys.has(configFileKey(file)),
+      ),
+    );
     dom.configDashboard.innerHTML = `
       <dl class="config-summary" aria-label="Configuration summary">
         <div class="config-summary-item">
@@ -151,23 +198,12 @@ export function createConfigWorkspaceView({
           >${escapeHtml(configChangeSummary(dirtyCount))}</dd>
         </div>
       </dl>
-      <nav class="config-category-nav" role="tablist" aria-label="Configuration categories">
-        ${renderCategoryTab("memory", "Memory")}
-        ${renderCategoryTab("pipeline", "Pipeline")}
-        ${renderCategoryTab("models", "Models")}
-        ${renderCategoryTab("plugins", "Plugins")}
-        ${renderCategoryTab("computer", "Connected computer")}
-        ${renderCategoryTab("advanced", "Advanced")}
-      </nav>
+      ${
+        repairNeeded
+          ? `<section class="config-category-panel" aria-label="Repair configuration file">${renderConfigMap()}</section>`
+          : ""
+      }
       <div class="config-category-panels">
-        ${renderCategoryPanel(
-          "memory",
-          '<div class="config-memory-layout"><div data-long-term-memory-setup></div><div data-long-term-memory-management></div></div>',
-        )}
-        ${renderCategoryPanel(
-          "pipeline",
-          requestPipelineContent(requestRunner),
-        )}
         ${renderCategoryPanel(
           "models",
           `<section class="config-section models-section">
@@ -179,35 +215,18 @@ export function createConfigWorkspaceView({
           </section>`,
         )}
         ${renderCategoryPanel("plugins", "<div data-plugin-management></div>")}
-        ${renderCategoryPanel("computer", "<div data-system-host-connection></div>")}
-        ${renderCategoryPanel("advanced", renderConfigMap())}
+        ${renderCategoryPanel("operations", "")}
       </div>
     `;
-    memorySetup.mount(
-      dom.configDashboard.querySelector("[data-long-term-memory-setup]"),
-    );
-    memoryManagement.mount(
-      dom.configDashboard.querySelector("[data-long-term-memory-management]"),
-    );
+    mountOperationsSection();
     pluginManagement?.mount(
       dom.configDashboard.querySelector("[data-plugin-management]"),
     );
-    hostConnection?.mount(
-      dom.configDashboard.querySelector("[data-system-host-connection]"),
-    );
-    hostConnection?.setActive(state.activeCategory === "computer");
     syncDirtyPresentation({ syncRawEditor: true });
+    syncDashboardInteractivity();
   }
 
   function syncActiveCategory() {
-    for (const button of dom.configDashboard.querySelectorAll(
-      "[data-config-category]",
-    )) {
-      const active = button.dataset.configCategory === state.activeCategory;
-      button.classList.toggle("active", active);
-      button.setAttribute("aria-selected", active ? "true" : "false");
-      button.tabIndex = active ? 0 : -1;
-    }
     for (const panel of dom.configDashboard.querySelectorAll(
       "[data-config-category-panel]",
     )) {
@@ -217,16 +236,11 @@ export function createConfigWorkspaceView({
     }
   }
 
-  function activateCategory(category, options = {}) {
+  function activateCategory(category) {
     if (!CONFIG_CATEGORIES.includes(category)) return;
     state.activeCategory = category;
     syncActiveCategory();
-    hostConnection?.setActive(category === "computer");
-    if (options.focus) {
-      dom.configDashboard
-        .querySelector(`[data-config-category="${category}"]`)
-        ?.focus();
-    }
+    onNavigationChange();
   }
 
   function selectModel(profileId) {
@@ -235,6 +249,7 @@ export function createConfigWorkspaceView({
     state.selectedConfigModelId = profileId;
     state.activeCategory = "models";
     renderConfigDashboard();
+    onNavigationChange();
     return true;
   }
 

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

@@ -1,3 +1,4 @@
+import { createConfigCalibrationDisclosure } from "./config-workspace/calibration-disclosure.js";
 import { createConfigDashboardRendering } from "./config-workspace/dashboard-rendering.js";
 import { createConfigFieldRendering } from "./config-workspace/field-rendering.js";
 import { createConfigWorkspaceModel } from "./config-workspace/config-model.js";
@@ -7,6 +8,7 @@ import { createConfigWorkspaceEvents } from "./config-workspace/workspace-events
 import { createConfigWorkspaceMutations } from "./config-workspace/workspace-mutations.js";
 import { createConfigWorkspacePersistence } from "./config-workspace/workspace-persistence.js";
 import { createConfigWorkspaceView } from "./config-workspace/workspace-view.js";
+import { configurationCategoryForWorkspace } from "../lib/configuration-pages.js";
 
 export {
   configValuesEqual,
@@ -24,14 +26,20 @@ export function createConfigWorkspace({
   memorySetup,
   memoryManagement,
   pluginManagement,
-  hostConnection,
   onAddModel,
+  onRemoveModel,
+  onNavigationChange = () => {},
   recordControlEvent,
   confirmDiscard = (message) => window.confirm(message),
   eventTarget = window,
 }) {
   const workspaceModel = createConfigWorkspaceModel();
   const { state } = workspaceModel;
+  const calibrationDisclosure = createConfigCalibrationDisclosure({
+    state,
+    root: dom.configDashboard,
+  });
+  let navigationRevision = 0;
 
   const fieldRendering = createConfigFieldRendering({
     state,
@@ -79,13 +87,14 @@ export function createConfigWorkspace({
   });
 
   const workspaceView = createConfigWorkspaceView({
+    onNavigationChange: () => {
+      navigationRevision += 1;
+      onNavigationChange();
+    },
     state,
     dom,
     eventTarget,
-    memorySetup,
-    memoryManagement,
     pluginManagement,
-    hostConnection,
     configFileEntries: workspaceModel.configFileEntries,
     configFileKey: workspaceModel.configFileKey,
     countObjectKeys: fieldRendering.countObjectKeys,
@@ -98,7 +107,6 @@ export function createConfigWorkspace({
     isFileDirty: workspaceModel.isFileDirty,
     rawDraftFor: workspaceModel.rawDraftFor,
     renderCategoryPanel: dashboardRendering.renderCategoryPanel,
-    renderCategoryTab: dashboardRendering.renderCategoryTab,
     renderConfigMap: dashboardRendering.renderConfigMap,
     renderModelList: modelRendering.renderModelList,
     renderSelectedModelEditor: modelRendering.renderSelectedModelEditor,
@@ -133,7 +141,6 @@ export function createConfigWorkspace({
     memorySetup,
     memoryManagement,
     pluginManagement,
-    hostConnection,
     recordControlEvent,
     applyRawDraft: workspaceMutations.applyRawDraft,
     baselineFor: workspaceModel.baselineFor,
@@ -154,10 +161,10 @@ export function createConfigWorkspace({
 
   const workspaceEvents = createConfigWorkspaceEvents({
     onAddModel,
+    onRemoveModel,
     state,
     dom,
     eventTarget,
-    activateCategory: workspaceView.activateCategory,
     applyRawDraft: workspaceMutations.applyRawDraft,
     changeRawFile: workspaceMutations.changeRawFile,
     configFileKey: workspaceModel.configFileKey,
@@ -182,6 +189,13 @@ export function createConfigWorkspace({
   });
 
   return {
+    activeCategory: () => state.activeCategory,
+    setActive: calibrationDisclosure.setActive,
+    setWorkspace: (workspace) => {
+      const category = configurationCategoryForWorkspace(workspace);
+      calibrationDisclosure.setActive(Boolean(category));
+      if (category) workspaceView.activateCategory(category);
+    },
     activateCategory: workspaceView.activateCategory,
     beginExternalRuntimeMutation:
       workspacePersistence.beginExternalRuntimeMutation,
@@ -190,7 +204,9 @@ export function createConfigWorkspace({
     endExternalRuntimeMutation: workspacePersistence.endExternalRuntimeMutation,
     hasUnsavedChanges: workspaceModel.hasUnsavedChanges,
     load: workspacePersistence.loadRuntimeConfig,
+    navigationRevision: () => navigationRevision,
     selectModel: workspaceView.selectModel,
+    setStatus: workspaceView.setWorkspaceStatus,
     focusSelectedModel: workspaceView.focusSelectedModel,
     prepareDiscardChanges: workspaceMutations.prepareDiscardChanges,
     refreshAfterExternalRuntimeMutation:

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

@@ -3,6 +3,7 @@ import {
   eventTone,
   formatEventDetail,
   formatEventLabel,
+  isUncompletedToolEvent,
 } from "../lib/event-presentation.js";
 import { countToolInvocations } from "../lib/tool-invocation-count.js";
 import { buildConversationRoleCards } from "../lib/conversation-role-model.js";
@@ -38,18 +39,21 @@ 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);
+  let tone = textOf(event?.tone) || eventTone(event);
+  if (isUncompletedToolEvent(event)) {
+    name = formatEventLabel({ ...event, name: eventName });
+    tone = "neutral";
+  }
   return {
     ...event,
-    eventName: textOf(
-      event?.eventName || event?.name || event?.rawType || event?.type,
-    ),
-    name: isPresentedEvent
-      ? textOf(event.name, "Event")
-      : formatEventLabel(event),
+    eventName,
+    name,
     summary: isPresentedEvent
       ? textOf(event.summary)
       : formatEventDetail(event),
-    tone: textOf(event?.tone) || eventTone(event),
+    tone,
     count: Math.max(1, countOf(event?.count, 1)),
   };
 }
@@ -308,32 +312,33 @@ export function createConversationActivity({
     const model = buildConversationActivityModel(input);
     if (!model.hasContent) return null;
     const hasFailures = model.failureCount > 0;
+    const hasRoleCards = model.roleCards.length > 0;
 
-    const details = documentRoot.createElement("details");
+    const details = documentRoot.createElement(hasRoleCards ? "section" : "details");
     details.className = "conversation-activity";
+    details.classList.toggle("is-inline-agents", hasRoleCards);
     details.dataset.requestId = model.requestId;
-    details.open = model.openByDefault
-      ? !manuallyCollapsedStreamingRequests.has(model.requestId)
-      : manuallyExpandedCompletedRequests.has(model.requestId);
+    if (!hasRoleCards) {
+      details.open = model.openByDefault
+        ? !manuallyCollapsedStreamingRequests.has(model.requestId)
+        : manuallyExpandedCompletedRequests.has(model.requestId);
+    }
 
-    const summary = documentRoot.createElement("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";
-    appendTextNode(documentRoot, heading, "conversation-activity-chevron", "");
+    if (!hasRoleCards)
+      appendTextNode(documentRoot, heading, "conversation-activity-chevron", "");
+    const activityTitle = hasRoleCards ? "Agents" : "Activity";
     appendTextNode(
       documentRoot,
       heading,
       "conversation-activity-title",
-      hasFailures ? "Activity needs attention" : "Activity",
+      activityTitle,
     );
     summary.appendChild(heading);
-    const roleSummary = roleCards.createSummaryNode(model.roleCards);
-    if (roleSummary) {
-      details.classList.add("has-role-summary");
-      summary.appendChild(roleSummary);
-    }
-
     if (model.currentLabel) {
       appendTextNode(
         documentRoot,
@@ -382,24 +387,22 @@ export function createConversationActivity({
         `${model.failureCount} failed`,
       );
     }
-    details.appendChild(summary);
+    if (!hasRoleCards) details.appendChild(summary);
 
     const body = documentRoot.createElement("div");
     body.className = "conversation-activity-body";
-    const hasRoleCards = model.roleCards.length > 0;
-    const restoreCardsScroll = hasRoleCards
-      ? roleCards.bindScroll({ requestId: model.requestId, body, details })
-      : () => false;
     if (model.events.length > 0) {
       const timelineEvents = model.events.filter(isNonToolTimelineEvent);
       body.appendChild(
         roleCards.createNode({
           requestId: model.requestId,
           cards: model.roleCards,
+          heading: summary,
           timeline: renderTimeline(documentRoot, timelineEvents),
           hasTimeline: timelineEvents.length > 0,
           onViewChange() {
-            body.scrollTop = 0;
+            const panel = body.querySelector(".conversation-role-panel");
+            if (panel) panel.scrollTop = 0;
             schedulePinToLatest();
           },
         }),
@@ -412,10 +415,10 @@ export function createConversationActivity({
     const pinToLatest = () => {
       const showsTimeline =
         model.roleCards.length === 0 || roleCards.isTimeline(model.requestId);
-      if (!showsTimeline) return restoreCardsScroll();
+      if (!showsTimeline) return false;
       return pinConversationActivityToLatest({
-        details,
-        body,
+        details: hasRoleCards ? { open: true } : details,
+        body: hasRoleCards ? body.querySelector(".conversation-role-panel") : body,
         streaming: model.openByDefault && showsTimeline,
       });
     };
@@ -429,6 +432,7 @@ export function createConversationActivity({
     };
     schedulePinToLatest();
 
+    if (hasRoleCards) return details;
     details.addEventListener("toggle", () => {
       if (model.openByDefault) {
         if (details.open) {

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

@@ -37,6 +37,9 @@ function fileReturnTarget(node) {
   if (target) return target;
   const activity = node?.closest(".conversation-activity");
   if (!activity) return null;
+  const viewToggle = activity.querySelector(".conversation-role-toggle");
+  const visibleToggle = visibleFileReturnTarget(viewToggle);
+  if (visibleToggle) return visibleToggle;
   const summary = [...activity.children].find(isDisclosureSummary);
   return visibleFileReturnTarget(summary);
 }

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

@@ -0,0 +1,9 @@
+type ReasoningMessage = { id: string; thinkingText?: string };
+
+export declare function createConversationReasoning(options?: {
+  documentRoot?: Document;
+}): {
+  beginRender(messages: ReasoningMessage[]): void;
+  createNode(message: ReasoningMessage): HTMLDetailsElement | null;
+  reset(): void;
+};

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

@@ -0,0 +1,46 @@
+import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
+
+export function createConversationReasoning({ documentRoot = document } = {}) {
+  const expandedMessages = new Set();
+  const renderedMessages = new Map();
+
+  function beginRender(messages) {
+    renderedMessages.clear();
+    const messageIds = new Set(messages.map((message) => message.id));
+    for (const id of expandedMessages) {
+      if (!messageIds.has(id)) expandedMessages.delete(id);
+    }
+  }
+
+  function createNode(message) {
+    if (!message.thinkingText) return null;
+    const details = documentRoot.createElement("details");
+    details.className = "conversation-reasoning";
+    details.open = expandedMessages.has(message.id);
+    const summary = documentRoot.createElement("summary");
+    summary.className = "conversation-reasoning-toggle";
+    summary.setAttribute("aria-label", message.thinkingText);
+    const content = documentRoot.createElement("div");
+    content.className = "thinking-body";
+    applyTextDirection(content, message.thinkingText);
+    content.innerHTML = renderMarkdown(message.thinkingText);
+    content.inert = !details.open;
+    summary.appendChild(content);
+    details.appendChild(summary);
+    renderedMessages.set(message.id, details);
+    details.addEventListener("toggle", () => {
+      if (renderedMessages.get(message.id) !== details) return;
+      content.inert = !details.open;
+      if (details.open) expandedMessages.add(message.id);
+      else expandedMessages.delete(message.id);
+    });
+    return details;
+  }
+
+  function reset() {
+    expandedMessages.clear();
+    renderedMessages.clear();
+  }
+
+  return { beginRender, createNode, reset };
+}

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

@@ -9,22 +9,15 @@ export declare function createConversationRoleCards(options?: {
     opener: HTMLElement,
   ) => unknown;
 }): {
-  createSummaryNode(
-    cards: ReturnType<typeof buildConversationRoleCards>,
-  ): HTMLElement | null;
   createNode(input: {
     requestId: string;
     cards: ReturnType<typeof buildConversationRoleCards>;
+    heading?: HTMLElement;
     timeline: HTMLElement;
     hasTimeline: boolean;
     onViewChange?: () => void;
   }): HTMLElement;
   isTimeline(requestId: string): boolean;
-  bindScroll(input: {
-    requestId: string;
-    body: HTMLElement;
-    details: HTMLDetailsElement;
-  }): () => boolean;
   forget(requestId: string): void;
   reset(): void;
 };