@abot-ai/runtime 1.1.0 → 1.2.0

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

@@ -0,0 +1,182 @@
+import {
+  parseWebSourceUrl,
+  webSourceFaviconUrl,
+} from "../lib/source-url-policy.js";
+
+const PRESENTATION_LABELS = {
+  content: { short: "Content", detail: "Content returned" },
+  snippet: { short: "Snippet", detail: "Snippet returned" },
+  reference: { short: "Link", detail: "Reference returned" },
+  omitted: { short: "Omitted", detail: "Omitted from tool output" },
+};
+
+function sourceStatus(source) {
+  if (source.presentation === "unknown") {
+    const label = source.retrieval === "retrieved" ? "Fetched" : "Found";
+    return { short: label, detail: label };
+  }
+  return PRESENTATION_LABELS[source.presentation] || { short: "", detail: "" };
+}
+
+function sourceDescription(source, url, status) {
+  const details = [source.title, url.href, status.detail];
+  if (source.retrieval === "failed") details.push("Fetch failed");
+  if (source.contentTruncated) details.push("Partial content");
+  const requested = parseWebSourceUrl(source.requestedUrl);
+  if (requested && requested.href !== url.href) {
+    details.push(`Requested: ${requested.href}`);
+  }
+  return details.filter(Boolean).join("\n");
+}
+
+function element(documentRoot, tag, className, text = "") {
+  const node = documentRoot.createElement(tag);
+  node.className = className;
+  node.textContent = text;
+  return node;
+}
+
+function sourceIcon(documentRoot, url) {
+  const icon = element(documentRoot, "span", "conversation-source-icon");
+  icon.setAttribute("aria-hidden", "true");
+  const hostname = parseWebSourceUrl(url)?.hostname || "";
+  const initial =
+    hostname
+      .replace(/^www\./u, "")
+      .charAt(0)
+      .toUpperCase() || "↗";
+  const fallback = element(
+    documentRoot,
+    "span",
+    "conversation-source-initial",
+    initial,
+  );
+  icon.appendChild(fallback);
+  const iconUrl = webSourceFaviconUrl(url);
+  if (!iconUrl) return icon;
+  const image = documentRoot.createElement("img");
+  image.className = "conversation-source-favicon";
+  image.alt = "";
+  image.width = 16;
+  image.height = 16;
+  image.loading = "lazy";
+  image.decoding = "async";
+  image.referrerPolicy = "no-referrer";
+  image.addEventListener("load", () => {
+    fallback.hidden = true;
+  });
+  image.addEventListener("error", () => {
+    image.hidden = true;
+    fallback.hidden = false;
+  });
+  image.src = iconUrl;
+  icon.appendChild(image);
+  return icon;
+}
+
+function sourceCard(documentRoot, source) {
+  const url = parseWebSourceUrl(source.url);
+  if (!url) return null;
+  const item = element(documentRoot, "li", "conversation-source-card");
+  const link = element(documentRoot, "a", "conversation-source-link");
+  const status = sourceStatus(source);
+  const description = sourceDescription(source, url, status);
+  link.href = url.href;
+  link.target = "_blank";
+  link.rel = "noopener noreferrer";
+  link.title = description;
+  link.setAttribute("aria-label", description);
+  link.appendChild(sourceIcon(documentRoot, url.href));
+  const domain = element(
+    documentRoot,
+    "span",
+    "conversation-source-domain",
+    url.hostname,
+  );
+  domain.dir = "ltr";
+  link.appendChild(domain);
+  const failed = source.retrieval === "failed";
+  const label = failed ? `${status.short} · failed` : status.short;
+  const badge = element(
+    documentRoot,
+    "span",
+    "conversation-source-status",
+    label,
+  );
+  badge.setAttribute("aria-hidden", "true");
+  if (failed) badge.classList.add("is-failed");
+  link.appendChild(badge);
+  item.appendChild(link);
+  return item;
+}
+
+export function createConversationSources({ documentRoot = document } = {}) {
+  function createNode(groups = []) {
+    if (!Array.isArray(groups) || groups.length === 0) return null;
+    const section = element(documentRoot, "section", "conversation-sources");
+    section.setAttribute("aria-label", "Web sources");
+    const heading = element(
+      documentRoot,
+      "div",
+      "conversation-sources-heading",
+    );
+    heading.appendChild(
+      element(documentRoot, "h3", "conversation-sources-title", "Web sources"),
+    );
+    heading.title = "What the tools returned";
+    section.appendChild(heading);
+
+    groups.forEach((group, index) => {
+      const block = element(documentRoot, "div", "conversation-sources-group");
+      const header = element(
+        documentRoot,
+        "div",
+        "conversation-sources-group-header",
+      );
+      const operation = group.operation === "fetch" ? "Fetch" : "Search";
+      header.appendChild(
+        element(
+          documentRoot,
+          "h4",
+          "conversation-sources-operation",
+          `${operation} · ${index + 1}`,
+        ),
+      );
+      if (group.provider) {
+        const provider = group.provider === "light" ? "Light" : "Brave";
+        header.appendChild(
+          element(
+            documentRoot,
+            "span",
+            "conversation-sources-provider",
+            provider,
+          ),
+        );
+      }
+      const list = element(documentRoot, "ol", "conversation-sources-list");
+      for (const source of group.sources) {
+        const card = sourceCard(documentRoot, source);
+        if (card) list.appendChild(card);
+      }
+      block.append(header, list);
+      if (group.omittedSourceCount > 0) {
+        const notice = element(
+          documentRoot,
+          "p",
+          "conversation-sources-omitted",
+          `${group.omittedSourceCount} additional sources unavailable in this display`,
+        );
+        notice.title =
+          "Source metadata exceeded the result size limit. Tool output was preserved.";
+        notice.setAttribute(
+          "aria-label",
+          `${notice.textContent}. ${notice.title}`,
+        );
+        block.appendChild(notice);
+      }
+      section.appendChild(block);
+    });
+    return section;
+  }
+  return { createNode };
+}

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

@@ -1,15 +1,19 @@
 import { isNearScrollEnd, pinScrollToEnd } from "../ui-behavior.js";
 import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
+import { createConversationActivity } from "./conversation-activity.js";
+import { createComposerPlan } from "./composer-plan.js";
+import { buildComposerPlanModel } from "../lib/composer-plan-model.js";
 import {
-  createConversationActivity,
-  createConversationContextWindow,
-} from "./conversation-activity.js";
+  buildComposerContextWindowModel,
+  createComposerContextWindow,
+} from "./composer-context-window.js";
 import { createMessageAttachments } from "./message-attachments.js";
 import { createMessageTimestamp } from "./message-timestamp.js";
 
 export function createConversationView({
   dom,
   getMessages,
+  getActiveRequestId = () => "",
   getActivityForMessage,
   getPendingApproval,
   createApprovalCard,
@@ -20,7 +24,12 @@ export function createConversationView({
   viewport = window,
 }) {
   const conversationActivity = createConversationActivity({ documentRoot });
-  const conversationContextWindow = createConversationContextWindow({
+  const composerContextWindow = createComposerContextWindow({
+    container: dom.composerContextWindow,
+    documentRoot,
+  });
+  const composerPlan = createComposerPlan({
+    container: dom.composerPlan,
     documentRoot,
   });
   const messageAttachments = createMessageAttachments({
@@ -132,8 +141,6 @@ export function createConversationView({
         streaming: Boolean(message.streaming),
         ...getActivityForMessage(message),
       };
-      const contextWindow = conversationContextWindow.createNode(activityInput);
-      if (contextWindow) bubble.appendChild(contextWindow);
       const activity = conversationActivity.createNode(activityInput);
       if (activity) bubble.appendChild(activity);
     }
@@ -185,7 +192,25 @@ export function createConversationView({
     return row;
   }
 
+  function renderContextWindow() {
+    composerContextWindow.render(
+      buildComposerContextWindowModel({
+        messages: getMessages(),
+        activeRequestId: getActiveRequestId(),
+        getActivityForMessage,
+      }),
+    );
+  }
+
   function render() {
+    renderContextWindow();
+    composerPlan.render(
+      buildComposerPlanModel({
+        messages: getMessages(),
+        activeRequestId: getActiveRequestId(),
+        getActivityForMessage,
+      }),
+    );
     const previousScrollTop = dom.messagesList.scrollTop;
     const shouldFollow =
       viewState.followMessages || isNearScrollEnd(dom.messagesList);
@@ -248,6 +273,8 @@ export function createConversationView({
     cancelScheduledMessageRender();
     cancelScheduledThinkingRender();
     conversationActivity.reset();
+    composerContextWindow.reset();
+    composerPlan.reset();
   }
 
   function forgetThinkingDisclosure(messageId) {
@@ -271,6 +298,7 @@ export function createConversationView({
     cancelScheduledThinkingRender,
     forgetThinkingDisclosure,
     render,
+    renderContextWindow,
     reset,
     scheduleMessageRender,
     scheduleThinkingRender,

package/dist/src/web-ui/app/components/model-selector.js

@@ -50,7 +50,10 @@ export function createModelSelector({
     button.disabled = select.disabled || options.length === 0;
     button.setAttribute("aria-expanded", open ? "true" : "false");
     button.classList.toggle("open", open);
-    valueLabel.textContent = selected?.label || "No models configured";
+    const label = selected?.label || "No models configured";
+    valueLabel.textContent = label;
+    button.title = `Model: ${label}`;
+    button.setAttribute("aria-label", `Model: ${label}`);
     menu.hidden = !open;
     menu.classList.toggle("open", open);
     menu.setAttribute("role", "menu");

package/dist/src/web-ui/app/components/operations-section.js

@@ -0,0 +1,46 @@
+import { wrappedIndex } from "../ui-behavior.js";
+import { textOf } from "../lib/text-format.js";
+
+export function createOperationsSection({ buttons, pages }) {
+  const availableTabs = new Set(
+    buttons.map((button) => textOf(button.dataset.tab)),
+  );
+
+  function activateTab(tabName) {
+    const normalized = textOf(tabName, "runtime") || "runtime";
+    const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
+    for (const button of buttons) {
+      const active = button.dataset.tab === nextTab;
+      button.classList.toggle("active", active);
+      button.setAttribute("aria-selected", active ? "true" : "false");
+      button.tabIndex = active ? 0 : -1;
+    }
+    for (const page of pages) {
+      const active = page.id === `${nextTab}Tab`;
+      page.classList.toggle("active", active);
+      page.hidden = !active;
+      page.inert = !active;
+    }
+  }
+
+  function navigateTab(event, button) {
+    const isArrowNavigation =
+      event.key === "ArrowLeft" || event.key === "ArrowRight";
+    if (!isArrowNavigation) return;
+    event.preventDefault();
+    const delta = event.key === "ArrowRight" ? 1 : -1;
+    const next =
+      buttons[wrappedIndex(buttons.indexOf(button), delta, buttons.length)];
+    next?.focus();
+    activateTab(next?.dataset.tab);
+  }
+
+  function bind() {
+    for (const button of buttons) {
+      button.addEventListener("click", () => activateTab(button.dataset.tab));
+      button.addEventListener("keydown", (event) => navigateTab(event, button));
+    }
+  }
+
+  return { activateTab, bind };
+}

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

@@ -2,9 +2,13 @@ import {
   createInitialWorkspaceShellState,
   normalizeWorkspaceDestination,
   toggleWorkspaceSheet,
-  wrappedIndex,
 } from "../ui-behavior.js";
 import { textOf } from "../lib/text-format.js";
+import {
+  CONVERSATION_SIDEBAR_MEDIA_QUERY,
+  resolveConversationSidebarLayout,
+} from "./conversation-sidebar-layout.js";
+import { createOperationsSection } from "./operations-section.js";
 
 export function createWorkspaceShell({
   dom,
@@ -14,37 +18,45 @@ export function createWorkspaceShell({
 }) {
   const shellState = {
     ...createInitialWorkspaceShellState(),
-    activeOperationsTab: "runtime",
     toastTimer: 0,
     bound: false,
   };
+  const sidebarViewport = viewport.matchMedia?.(
+    CONVERSATION_SIDEBAR_MEDIA_QUERY,
+  );
+  const operationsSection = createOperationsSection({
+    buttons: dom.operationsTabButtons,
+    pages: dom.operationsTabPages,
+  });
+
+  function sidebarLayout() {
+    return resolveConversationSidebarLayout(
+      shellState.workspace,
+      shellState.activeSheet,
+      sidebarViewport?.matches === true,
+    );
+  }
 
   function setCurrentPage(button, active) {
     if (active) {
       button.setAttribute("aria-current", "page");
-    } else {
-      button.removeAttribute("aria-current");
+      return;
     }
+    button.removeAttribute("aria-current");
   }
 
   function syncShell() {
     const chatWorkspace = shellState.workspace === "chat";
-    const operationsWorkspace = shellState.workspace === "operations";
     const configWorkspace = shellState.workspace === "config";
-    const sessionsOpen = chatWorkspace && shellState.activeSheet === "sessions";
+    const sessions = sidebarLayout();
+    const showSessionsToggle = chatWorkspace && !sessions.docked;
 
-    dom.app.classList.toggle("operations-workspace", operationsWorkspace);
     dom.app.classList.toggle("config-workspace", configWorkspace);
-    dom.app.classList.toggle("sessions-open", sessionsOpen);
+    dom.app.classList.toggle("sessions-open", sessions.drawerOpen);
+    dom.app.classList.toggle("sessions-docked", sessions.docked);
 
     dom.chatPanel.hidden = !chatWorkspace;
-    dom.chatPanel.inert = !chatWorkspace || sessionsOpen;
-    dom.operationsWorkspacePanel.hidden = !operationsWorkspace;
-    dom.operationsWorkspacePanel.inert = !operationsWorkspace;
-    dom.operationsWorkspacePanel.setAttribute(
-      "aria-hidden",
-      operationsWorkspace ? "false" : "true",
-    );
+    dom.chatPanel.inert = !chatWorkspace || sessions.drawerOpen;
     dom.configWorkspacePanel.hidden = !configWorkspace;
     dom.configWorkspacePanel.inert = !configWorkspace;
     dom.configWorkspacePanel.setAttribute(
@@ -52,37 +64,72 @@ export function createWorkspaceShell({
       configWorkspace ? "false" : "true",
     );
 
-    dom.sessionsPanel.hidden = !sessionsOpen;
-    dom.sessionsPanel.inert = !sessionsOpen;
+    dom.sessionsPanel.hidden = !sessions.visible;
+    dom.sessionsPanel.inert = !sessions.visible;
     dom.sessionsPanel.setAttribute(
       "aria-hidden",
-      sessionsOpen ? "false" : "true",
+      sessions.visible ? "false" : "true",
     );
     dom.sessionsToggleButton.setAttribute(
       "aria-expanded",
-      sessionsOpen ? "true" : "false",
+      sessions.visible ? "true" : "false",
     );
     dom.sessionsToggleButton.setAttribute(
       "aria-label",
-      sessionsOpen ? "Close conversations" : "Open conversations",
+      sessions.drawerOpen ? "Close conversations" : "Open conversations",
     );
+    dom.sessionsToggleButton.hidden = !showSessionsToggle;
+    dom.closeSessionsButton.hidden = sessions.docked;
 
     setCurrentPage(dom.chatWorkspaceButton, chatWorkspace);
-    setCurrentPage(dom.operationsWorkspaceButton, operationsWorkspace);
     setCurrentPage(dom.configWorkspaceButton, configWorkspace);
 
-    dom.panelBackdrop.classList.toggle("visible", sessionsOpen);
-    dom.panelBackdrop.tabIndex = sessionsOpen ? 0 : -1;
+    dom.panelBackdrop.classList.toggle("visible", sessions.drawerOpen);
+    dom.panelBackdrop.tabIndex = sessions.drawerOpen ? 0 : -1;
     dom.panelBackdrop.setAttribute(
       "aria-hidden",
-      sessionsOpen ? "false" : "true",
+      sessions.drawerOpen ? "false" : "true",
     );
   }
 
-  function workspaceBackButton(destination) {
-    return destination === "operations"
-      ? dom.closeOperationsWorkspaceButton
-      : dom.closeConfigWorkspaceButton;
+  function focusVisibleSessionsControl() {
+    const sessions = sidebarLayout();
+    if (!sessions.visible) return;
+    if (sessions.drawerOpen) {
+      dom.closeSessionsButton.focus();
+      return;
+    }
+    const sidebarControl = dom.sessionSearchInput ?? dom.refreshSessionsButton;
+    (sidebarControl ?? dom.chatWorkspaceButton).focus();
+  }
+
+  function sidebarFocusNeedsRestoration(activeElement, sessions) {
+    if (!activeElement) return false;
+    if (activeElement === dom.sessionsToggleButton) {
+      return dom.sessionsToggleButton.hidden;
+    }
+    if (activeElement === dom.closeSessionsButton) {
+      return dom.closeSessionsButton.hidden;
+    }
+    if (activeElement === dom.panelBackdrop) return !sessions.drawerOpen;
+    if (sessions.visible) return false;
+    return Boolean(activeElement.closest?.(".sessions-panel"));
+  }
+
+  function syncSidebarViewport() {
+    const activeElement = documentRoot.activeElement;
+    shellState.activeSheet = "";
+    syncShell();
+    const sessions = sidebarLayout();
+    if (!sidebarFocusNeedsRestoration(activeElement, sessions)) return;
+    if (sessions.docked) {
+      focusVisibleSessionsControl();
+      return;
+    }
+    const visibleNavigationButton = dom.sessionsToggleButton.hidden
+      ? dom.chatWorkspaceButton
+      : dom.sessionsToggleButton;
+    visibleNavigationButton.focus();
   }
 
   function prepareWorkspaceTransition(destination) {
@@ -113,9 +160,10 @@ export function createWorkspaceShell({
 
     if (options.focus === false) return true;
     if (nextWorkspace !== "chat") {
-      viewport.requestAnimationFrame(() =>
-        workspaceBackButton(nextWorkspace)?.focus(),
-      );
+      viewport.requestAnimationFrame(() => {
+        if (shellState.workspace !== nextWorkspace) return;
+        dom.closeConfigWorkspaceButton.focus();
+      });
       return true;
     }
     if (previousWorkspace !== "chat" || previousSheet) {
@@ -147,12 +195,13 @@ export function createWorkspaceShell({
     preparedTransition.commitBeforeChange();
     const wasOpen = shellState.activeSheet === "sessions";
     shellState.workspace = "chat";
-    shellState.activeSheet = open ? "sessions" : "";
+    const useDrawer = open && sidebarViewport?.matches !== true;
+    shellState.activeSheet = useDrawer ? "sessions" : "";
     syncShell();
 
     if (options.focus === false) return true;
     if (open) {
-      viewport.requestAnimationFrame(() => dom.closeSessionsButton?.focus());
+      viewport.requestAnimationFrame(focusVisibleSessionsControl);
       return true;
     }
     if (
@@ -172,26 +221,6 @@ export function createWorkspaceShell({
     });
   }
 
-  function activateOperationsTab(tabName) {
-    const availableTabs = new Set(
-      dom.operationsTabButtons.map((button) => textOf(button.dataset.tab)),
-    );
-    const normalized = textOf(tabName, "runtime") || "runtime";
-    const nextTab = availableTabs.has(normalized) ? normalized : "runtime";
-    shellState.activeOperationsTab = nextTab;
-    for (const button of dom.operationsTabButtons) {
-      const active = button.dataset.tab === nextTab;
-      button.classList.toggle("active", active);
-      button.setAttribute("aria-selected", active ? "true" : "false");
-      button.tabIndex = active ? 0 : -1;
-    }
-    for (const page of dom.operationsTabPages) {
-      const active = page.id === `${nextTab}Tab`;
-      page.classList.toggle("active", active);
-      page.hidden = !active;
-    }
-  }
-
   function showToast(message, tone = "") {
     viewport.clearTimeout(shellState.toastTimer);
     dom.toastRegion.textContent = textOf(message);
@@ -218,15 +247,9 @@ export function createWorkspaceShell({
     dom.chatWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("chat");
     });
-    dom.operationsWorkspaceButton.addEventListener("click", () => {
-      activateWorkspace("operations");
-    });
     dom.configWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("config");
     });
-    dom.closeOperationsWorkspaceButton.addEventListener("click", () => {
-      activateWorkspace("chat");
-    });
     dom.closeConfigWorkspaceButton.addEventListener("click", () => {
       activateWorkspace("chat");
     });
@@ -239,33 +262,18 @@ export function createWorkspaceShell({
         setSessionsDrawerOpen(false, { restoreFocus: true });
       }
     });
-    for (const button of dom.operationsTabButtons) {
-      button.addEventListener("click", () => {
-        activateOperationsTab(button.dataset.tab);
-      });
-      button.addEventListener("keydown", (event) => {
-        if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
-        event.preventDefault();
-        const currentIndex = dom.operationsTabButtons.indexOf(button);
-        const delta = event.key === "ArrowRight" ? 1 : -1;
-        const next =
-          dom.operationsTabButtons[
-            wrappedIndex(currentIndex, delta, dom.operationsTabButtons.length)
-          ];
-        next?.focus();
-        activateOperationsTab(next?.dataset.tab);
-      });
-    }
+    sidebarViewport?.addEventListener("change", syncSidebarViewport);
+    operationsSection.bind();
   }
 
   function load() {
     Object.assign(shellState, createInitialWorkspaceShellState());
-    activateOperationsTab("runtime");
+    operationsSection.activateTab("runtime");
     syncShell();
   }
 
   return {
-    activateOperationsTab,
+    activateOperationsTab: operationsSection.activateTab,
     activateWorkspace,
     bind,
     closeOverlaysOnEscape,

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

@@ -26,6 +26,7 @@ export interface RealtimeEventControllerOptions {
     message: RealtimeEventRecord,
   ): ConversationSessionMessage;
   renderMessages(): void;
+  renderContextWindow?(): void;
   scheduleMessageRender(): void;
   scheduleThinkingRender(): void;
   cancelScheduledMessageRender(): void;