@abot-ai/runtime 1.1.0 → 1.3.0

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

@@ -0,0 +1,155 @@
+import { buildConversationActivityModel } from "./conversation-activity.js";
+import { textOf } from "../lib/text-format.js";
+
+export function buildComposerContextWindowModel({
+  messages = [],
+  activeRequestId = "",
+  getActivityForMessage = () => ({}),
+} = {}) {
+  const activeId = textOf(activeRequestId);
+  const contextRequestCandidates = activeId
+    ? [...messages].reverse()
+    : messages.slice(-1);
+  const selectedMessage = contextRequestCandidates.find((message) => {
+    const isAssistantRequest =
+      message.role === "assistant" && Boolean(textOf(message.requestId));
+    if (!isAssistantRequest) return false;
+    if (!activeId) return true;
+    return message.requestId === activeId;
+  });
+  if (!selectedMessage) return null;
+  const requestId = textOf(selectedMessage.requestId);
+  const model = buildConversationActivityModel({
+    requestId,
+    contextWindow: getActivityForMessage(selectedMessage)?.contextWindow,
+  }).contextWindow;
+  if (!model) return null;
+  return { ...model, requestId };
+}
+
+function compactNumber(value) {
+  return new Intl.NumberFormat("en", { notation: "compact" }).format(value);
+}
+
+function formatPercent(value) {
+  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(1)}%`;
+}
+
+export function createComposerContextWindow({
+  container,
+  documentRoot = document,
+}) {
+  const button = documentRoot.createElement("button");
+  button.type = "button";
+  button.className = "composer-context-window-button";
+  button.setAttribute("aria-label", "Context window");
+  button.setAttribute("aria-describedby", "composerContextWindowTooltip");
+
+  const ring = documentRoot.createElement("span");
+  ring.className = "composer-context-window-ring";
+  ring.setAttribute("aria-hidden", "true");
+  button.appendChild(ring);
+
+  const tooltip = documentRoot.createElement("div");
+  tooltip.id = "composerContextWindowTooltip";
+  tooltip.className = "composer-context-window-tooltip";
+  tooltip.setAttribute("role", "tooltip");
+  tooltip.hidden = true;
+  const header = documentRoot.createElement("div");
+  header.className = "composer-context-window-header";
+  const title = documentRoot.createElement("span");
+  title.textContent = "Context window";
+  const percentage = documentRoot.createElement("span");
+  percentage.className = "composer-context-window-percentage";
+  header.append(title, percentage);
+  const detail = documentRoot.createElement("div");
+  const compaction = documentRoot.createElement("div");
+  compaction.className = "composer-context-window-compaction";
+  const provider = documentRoot.createElement("div");
+  tooltip.append(header, detail, compaction, provider);
+  container.replaceChildren(button, tooltip);
+
+  function hideDetails() {
+    tooltip.hidden = true;
+    container.classList.remove("open");
+  }
+
+  function showDetails() {
+    if (container.hidden) return;
+    tooltip.hidden = false;
+    container.classList.add("open");
+  }
+
+  container.addEventListener("pointerenter", showDetails);
+  container.addEventListener("pointerleave", () => {
+    if (documentRoot.activeElement === button) return;
+    hideDetails();
+  });
+  button.addEventListener("focus", showDetails);
+  button.addEventListener("blur", hideDetails);
+  button.addEventListener("click", showDetails);
+  documentRoot.addEventListener(
+    "keydown",
+    (event) => {
+      if (tooltip.hidden) return;
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopPropagation();
+      hideDetails();
+    },
+    true,
+  );
+  documentRoot.addEventListener("pointerdown", (event) => {
+    if (container.contains(event.target)) return;
+    hideDetails();
+  });
+
+  function reset() {
+    hideDetails();
+    container.hidden = true;
+    container.dataset.requestId = "";
+    container.classList.remove("rejected");
+    ring.style.setProperty("--context-used", "0%");
+    button.setAttribute("aria-label", "Context window");
+    percentage.textContent = "";
+    detail.textContent = "";
+    compaction.textContent = "";
+    provider.textContent = "";
+  }
+
+  function render(model) {
+    if (!model) {
+      reset();
+      return;
+    }
+    container.hidden = false;
+    container.dataset.requestId = model.requestId;
+    container.classList.toggle(
+      "rejected",
+      model.admissionOutcome === "rejected",
+    );
+    const usedPercent = formatPercent(model.usedContextPercent);
+    button.setAttribute("aria-label", `Context window: ${usedPercent} used`);
+    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
+    }`;
+    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`
+      : "";
+  }
+
+  reset();
+  return { render, reset };
+}

package/dist/src/web-ui/app/components/composer-plan.d.ts

@@ -0,0 +1,9 @@
+import type { ComposerPlanModel } from "../lib/composer-plan-model.js";
+
+export declare function createComposerPlan(options?: {
+  container?: HTMLElement | null;
+  documentRoot?: Document;
+}): {
+  render(model: ComposerPlanModel | null): void;
+  reset(): void;
+};

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

@@ -0,0 +1,128 @@
+const STATUS_LABELS = {
+  pending: "Pending",
+  active: "In progress",
+  done: "Completed",
+  blocked: "Blocked",
+  superseded: "Superseded",
+};
+
+const STATUS_SYMBOLS = {
+  pending: "○",
+  active: "◌",
+  done: "✓",
+  blocked: "×",
+  superseded: "−",
+};
+
+export function createComposerPlan({
+  container,
+  documentRoot = globalThis.document,
+} = {}) {
+  if (!container || !documentRoot) return { render() {}, reset() {} };
+
+  function element(tag, className, value = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = value;
+    return node;
+  }
+
+  const details = element("details", "composer-plan-details");
+  const summary = element("summary", "composer-plan-toggle");
+  const label = element("span", "composer-plan-label", "Planning");
+  const preview = element("span", "composer-plan-preview");
+  preview.setAttribute("dir", "auto");
+  const previewIcon = element("span", "composer-plan-status");
+  previewIcon.setAttribute("aria-hidden", "true");
+  const chevron = element("span", "composer-plan-chevron", "⌄");
+  chevron.setAttribute("aria-hidden", "true");
+  summary.append(previewIcon, label, preview, chevron);
+
+  const body = element("div", "composer-plan-body");
+  const header = element("div", "composer-plan-header");
+  const title = element("p", "composer-plan-title");
+  title.setAttribute("dir", "auto");
+  const counter = element("span", "composer-plan-counter");
+  header.append(title, counter);
+  const list = element("ol", "composer-plan-items");
+  const placeholder = element(
+    "p",
+    "composer-plan-placeholder",
+    "Preparing tasks...",
+  );
+  body.append(header, list, placeholder);
+  details.append(summary, body);
+  container.classList.add("composer-plan");
+  container.replaceChildren(details);
+  let currentTurnKey = "";
+  let renderedItems = "";
+
+  function reset() {
+    container.hidden = true;
+    container.dataset.requestId = "";
+    details.open = false;
+    body.scrollTop = 0;
+    currentTurnKey = "";
+    renderedItems = "";
+    preview.textContent = "";
+    title.textContent = "";
+    counter.textContent = "";
+    list.replaceChildren();
+  }
+
+  function renderItems(items) {
+    const signature = JSON.stringify(items);
+    if (signature === renderedItems) return;
+    const scrollTop = body.scrollTop;
+    const rows = items.map((item) => {
+      const row = element("li", `composer-plan-item is-${item.status}`);
+      row.dataset.itemId = item.id;
+      const icon = element(
+        "span",
+        "composer-plan-status",
+        STATUS_SYMBOLS[item.status],
+      );
+      icon.setAttribute("aria-hidden", "true");
+      const itemTitle = element("span", "composer-plan-item-title", item.title);
+      itemTitle.setAttribute("dir", "auto");
+      const status = element(
+        "span",
+        "composer-plan-item-status",
+        STATUS_LABELS[item.status],
+      );
+      row.append(icon, itemTitle, status);
+      return row;
+    });
+    list.replaceChildren(...rows);
+    body.scrollTop = scrollTop;
+    renderedItems = signature;
+  }
+
+  function render(model) {
+    if (!model) {
+      reset();
+      return;
+    }
+    if (currentTurnKey !== model.turnKey) {
+      details.open = false;
+      body.scrollTop = 0;
+      currentTurnKey = model.turnKey;
+    }
+    container.hidden = false;
+    container.dataset.requestId = model.requestId;
+    preview.textContent = model.preview;
+    previewIcon.className = `composer-plan-status is-${model.previewStatus}`;
+    previewIcon.textContent = STATUS_SYMBOLS[model.previewStatus];
+    title.textContent = model.summary;
+    title.hidden = !model.summary;
+    counter.textContent = `${model.completed}/${model.total} completed`;
+    counter.hidden = model.total === 0;
+    header.hidden = !model.summary && model.total === 0;
+    list.hidden = model.items.length === 0;
+    placeholder.hidden = model.items.length > 0;
+    renderItems(model.items);
+  }
+
+  reset();
+  return { render, reset };
+}

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

@@ -1,3 +1,7 @@
+import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
+import type { ConversationSourcesGroup } from "../lib/web-sources.js";
+import type { ConversationToolAction } from "../lib/tool-activity-model.js";
+
 export type ConversationActivityInput = {
   requestId?: unknown;
   events?: unknown[];
@@ -46,6 +50,9 @@ export declare function buildConversationActivityModel(
 ): {
   requestId: string;
   events: ConversationActivityEvent[];
+  roleCards: ReturnType<typeof buildConversationRoleCards>;
+  sources: ConversationSourcesGroup[];
+  toolActions: ConversationToolAction[];
   progress: unknown;
   contextWindow: ConversationContextWindowModel | null;
   eventCount: number;
@@ -70,9 +77,3 @@ export declare function createConversationActivity(options?: {
   forget(requestId: unknown): void;
   reset(): void;
 };
-
-export declare function createConversationContextWindow(options?: {
-  documentRoot?: Document;
-}): {
-  createNode(input?: ConversationActivityInput): HTMLElement | null;
-};

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

@@ -4,6 +4,16 @@ import {
   formatEventDetail,
   formatEventLabel,
 } from "../lib/event-presentation.js";
+import { countToolInvocations } from "../lib/tool-invocation-count.js";
+import { buildConversationRoleCards } from "../lib/conversation-role-model.js";
+import { createConversationRoleCards } from "./conversation-role-cards.js";
+import { buildConversationSources } from "../lib/web-sources.js";
+import { createConversationSources } from "./conversation-sources.js";
+import {
+  buildConversationToolActions,
+  summarizeConversationTools,
+} from "../lib/tool-activity-model.js";
+import { isNonToolTimelineEvent } from "../lib/tool-timeline.js";
 
 function textOf(value, fallback = "") {
   return typeof value === "string" ? value : fallback;
@@ -62,11 +72,16 @@ function normalizeProgress(taskProgress, requestId) {
         ];
       })
     : [];
-  const completed = Math.max(
-    countOf(taskProgress.completed),
-    items.filter((item) => item.status === "done").length,
-  );
-  const total = Math.max(countOf(taskProgress.total), items.length);
+  const hasAuthoritativeCounts = taskProgress.hasSnapshot === true;
+  const completed = hasAuthoritativeCounts
+    ? countOf(taskProgress.completed)
+    : Math.max(
+        countOf(taskProgress.completed),
+        items.filter((item) => item.status === "done").length,
+      );
+  const total = hasAuthoritativeCounts
+    ? countOf(taskProgress.total)
+    : Math.max(countOf(taskProgress.total), items.length);
   return {
     summary: textOf(taskProgress.summary).trim(),
     activeItem: textOf(taskProgress.activeItem).trim(),
@@ -142,6 +157,9 @@ export function buildConversationActivityModel({
     return {
       requestId: "",
       events: [],
+      roleCards: [],
+      sources: [],
+      toolActions: [],
       progress: null,
       contextWindow: null,
       eventCount: 0,
@@ -159,6 +177,7 @@ export function buildConversationActivityModel({
         .filter((event) => eventRequestId(event) === normalizedRequestId)
         .map(presentEvent)
     : [];
+  const toolCount = countToolInvocations(scopedEvents);
   const timeline = buildEventTimelineEntries(scopedEvents);
   const progress = normalizeProgress(taskProgress, normalizedRequestId);
   const contextWindowModel = normalizeContextWindow(
@@ -169,12 +188,6 @@ export function buildConversationActivityModel({
     (total, event) => total + Math.max(1, countOf(event.count, 1)),
     0,
   );
-  const toolCount = timeline.reduce((total, event) => {
-    const eventName = textOf(event.eventName || event.rawType || event.type);
-    return eventName.startsWith("tool.")
-      ? total + Math.max(1, countOf(event.count, 1))
-      : total;
-  }, 0);
   const failureCount = timeline.reduce(
     (total, event) =>
       event.tone === "failed"
@@ -186,6 +199,17 @@ export function buildConversationActivityModel({
   return {
     requestId: normalizedRequestId,
     events: timeline,
+    roleCards: buildConversationRoleCards({
+      requestId: normalizedRequestId,
+      events: scopedEvents,
+      streaming,
+    }),
+    sources: buildConversationSources(scopedEvents),
+    toolActions: buildConversationToolActions({
+      requestId: normalizedRequestId,
+      events: scopedEvents,
+      streaming,
+    }),
     progress,
     contextWindow: contextWindowModel,
     eventCount,
@@ -211,135 +235,6 @@ function appendTextNode(documentRoot, parent, className, text) {
   return node;
 }
 
-function renderProgress(documentRoot, progress) {
-  if (!progress) return null;
-  const section = documentRoot.createElement("section");
-  section.className = "conversation-activity-progress";
-
-  const header = documentRoot.createElement("div");
-  header.className = "conversation-activity-progress-header";
-  appendTextNode(
-    documentRoot,
-    header,
-    "conversation-activity-progress-title",
-    progress.summary || progress.activeItem || "Task progress",
-  );
-  if (progress.total > 0) {
-    appendTextNode(
-      documentRoot,
-      header,
-      "conversation-activity-progress-count",
-      `${Math.min(progress.completed, progress.total)}/${progress.total}`,
-    );
-  }
-  section.appendChild(header);
-
-  if (progress.total > 0) {
-    const track = documentRoot.createElement("div");
-    track.className = "conversation-activity-progress-track";
-    const value = documentRoot.createElement("span");
-    value.style.width = `${Math.min(100, (progress.completed / progress.total) * 100)}%`;
-    track.appendChild(value);
-    section.appendChild(track);
-  }
-
-  if (progress.items.length > 0) {
-    const list = documentRoot.createElement("ol");
-    list.className = "conversation-activity-progress-items";
-    for (const item of progress.items) {
-      const row = documentRoot.createElement("li");
-      row.className = `conversation-activity-progress-item ${item.status}`;
-      appendTextNode(
-        documentRoot,
-        row,
-        "conversation-activity-progress-dot",
-        "",
-      );
-      appendTextNode(
-        documentRoot,
-        row,
-        "conversation-activity-progress-label",
-        item.title,
-      );
-      list.appendChild(row);
-    }
-    section.appendChild(list);
-  }
-  return section;
-}
-
-function compactNumber(value) {
-  return new Intl.NumberFormat("en", { notation: "compact" }).format(value);
-}
-
-function formatPercent(value) {
-  return Number.isInteger(value) ? `${value}%` : `${value.toFixed(1)}%`;
-}
-
-function renderContextWindow(documentRoot, contextWindow) {
-  if (!contextWindow) return null;
-  const section = documentRoot.createElement("section");
-  section.className = "conversation-context-window";
-  const header = documentRoot.createElement("div");
-  header.className = "conversation-context-window-header";
-  appendTextNode(
-    documentRoot,
-    header,
-    "conversation-context-window-title",
-    "Context window",
-  );
-  appendTextNode(
-    documentRoot,
-    header,
-    `conversation-context-window-value${
-      contextWindow.admissionOutcome === "rejected" ? " rejected" : ""
-    }`,
-    formatPercent(contextWindow.usedContextPercent),
-  );
-  section.appendChild(header);
-
-  const track = documentRoot.createElement("div");
-  track.className = "conversation-context-window-track";
-  const value = documentRoot.createElement("span");
-  value.style.width = `${Math.min(100, contextWindow.usedContextPercent)}%`;
-  track.appendChild(value);
-  section.appendChild(track);
-
-  appendTextNode(
-    documentRoot,
-    section,
-    "conversation-context-window-detail",
-    `${compactNumber(contextWindow.estimatedInputTokens)} / ${compactNumber(
-      contextWindow.contextWindowTokens,
-    )} estimated input tokens · ${formatPercent(
-      contextWindow.remainingContextPercent,
-    )} left · ${contextWindow.modelStep || contextWindow.profileId}`,
-  );
-  if (contextWindow.compaction) {
-    appendTextNode(
-      documentRoot,
-      section,
-      "conversation-context-window-compaction",
-      `Compaction ${formatPercent(
-        contextWindow.compaction.beforePercent,
-      )} → ${formatPercent(contextWindow.compaction.afterPercent)}`,
-    );
-  }
-  if (contextWindow.providerUsage) {
-    appendTextNode(
-      documentRoot,
-      section,
-      "conversation-context-window-provider",
-      `Provider reported ${compactNumber(
-        contextWindow.providerUsage.inputTokens,
-      )} input · ${compactNumber(
-        contextWindow.providerUsage.outputTokens,
-      )} output tokens`,
-    );
-  }
-  return section;
-}
-
 function renderTimeline(documentRoot, events) {
   const timeline = documentRoot.createElement("div");
   timeline.className = "conversation-activity-timeline";
@@ -396,12 +291,15 @@ export function pinConversationActivityToLatest({
 }
 
 export function createConversationActivity({ documentRoot = document } = {}) {
+  const roleCards = createConversationRoleCards({ documentRoot });
+  const sourceCards = createConversationSources({ documentRoot });
   const manuallyCollapsedStreamingRequests = new Set();
   const manuallyExpandedCompletedRequests = new Set();
 
   function createNode(input = {}) {
     const model = buildConversationActivityModel(input);
     if (!model.hasContent) return null;
+    const hasFailures = model.failureCount > 0;
 
     const details = documentRoot.createElement("details");
     details.className = "conversation-activity";
@@ -419,9 +317,14 @@ export function createConversationActivity({ documentRoot = document } = {}) {
       documentRoot,
       heading,
       "conversation-activity-title",
-      model.failureCount > 0 ? "Activity needs attention" : "Activity",
+      hasFailures ? "Activity needs attention" : "Activity",
     );
     summary.appendChild(heading);
+    const roleSummary = roleCards.createSummaryNode(model.roleCards);
+    if (roleSummary) {
+      details.classList.add("has-role-summary");
+      summary.appendChild(roleSummary);
+    }
 
     if (model.currentLabel) {
       appendTextNode(
@@ -438,36 +341,76 @@ export function createConversationActivity({ documentRoot = document } = {}) {
         `${Math.min(model.progress.completed, model.progress.total)}/${model.progress.total} steps`,
       );
     }
-    if (model.toolCount > 0) {
+    const toolSummary = summarizeConversationTools(model.toolActions);
+    if (toolSummary) details.classList.add("has-tool-summary");
+    if (toolSummary) facts.push(toolSummary);
+    if (!toolSummary && model.toolCount > 0) {
       facts.push(`${model.toolCount} tool${model.toolCount === 1 ? "" : "s"}`);
     }
-    if (model.failureCount > 0) facts.push(`${model.failureCount} failed`);
-    if (facts.length === 0 && model.eventCount > 0) {
+    const sourceCount = model.sources.reduce(
+      (total, group) =>
+        total + group.sources.length + (group.omittedSourceCount || 0),
+      0,
+    );
+    if (sourceCount > 0)
+      facts.push(`${sourceCount} source${sourceCount === 1 ? "" : "s"}`);
+    const showEventCount =
+      facts.length === 0 && !hasFailures && model.eventCount > 0;
+    if (showEventCount) {
       facts.push(`${model.eventCount} events`);
     }
-    appendTextNode(
+    const factsNode = appendTextNode(
       documentRoot,
       summary,
-      `conversation-activity-facts${model.failureCount > 0 ? " failed" : ""}`,
+      "conversation-activity-facts",
       facts.join(" · "),
     );
+    if (hasFailures) {
+      factsNode.textContent += facts.length > 0 ? " · " : "";
+      appendTextNode(
+        documentRoot,
+        factsNode,
+        "failed",
+        `${model.failureCount} failed`,
+      );
+    }
     details.appendChild(summary);
 
     const body = documentRoot.createElement("div");
     body.className = "conversation-activity-body";
-    const progress = renderProgress(documentRoot, model.progress);
-    if (progress) body.appendChild(progress);
+    const hasRoleCards = model.roleCards.length > 0;
+    const restoreCardsScroll = hasRoleCards
+      ? roleCards.bindScroll({ requestId: model.requestId, body, details })
+      : () => false;
     if (model.events.length > 0) {
-      body.appendChild(renderTimeline(documentRoot, model.events));
+      const timelineEvents = model.events.filter(isNonToolTimelineEvent);
+      body.appendChild(
+        roleCards.createNode({
+          requestId: model.requestId,
+          cards: model.roleCards,
+          timeline: renderTimeline(documentRoot, timelineEvents),
+          hasTimeline: timelineEvents.length > 0,
+          onViewChange() {
+            body.scrollTop = 0;
+            schedulePinToLatest();
+          },
+        }),
+      );
     }
+    const sources = sourceCards.createNode(model.sources);
+    if (sources) body.appendChild(sources);
     details.appendChild(body);
 
-    const pinToLatest = () =>
-      pinConversationActivityToLatest({
+    const pinToLatest = () => {
+      const showsTimeline =
+        model.roleCards.length === 0 || roleCards.isTimeline(model.requestId);
+      if (!showsTimeline) return restoreCardsScroll();
+      return pinConversationActivityToLatest({
         details,
         body,
-        streaming: model.openByDefault,
+        streaming: model.openByDefault && showsTimeline,
       });
+    };
     const schedulePinToLatest = () => {
       const animationFrame = documentRoot.defaultView?.requestAnimationFrame;
       if (typeof animationFrame === "function") {
@@ -501,23 +444,14 @@ export function createConversationActivity({ documentRoot = document } = {}) {
     const normalizedRequestId = textOf(requestId);
     manuallyCollapsedStreamingRequests.delete(normalizedRequestId);
     manuallyExpandedCompletedRequests.delete(normalizedRequestId);
+    roleCards.forget(normalizedRequestId);
   }
 
   function reset() {
     manuallyCollapsedStreamingRequests.clear();
     manuallyExpandedCompletedRequests.clear();
+    roleCards.reset();
   }
 
   return { createNode, forget, reset };
 }
-
-export function createConversationContextWindow({
-  documentRoot = document,
-} = {}) {
-  return {
-    createNode(input = {}) {
-      const model = buildConversationActivityModel(input);
-      return renderContextWindow(documentRoot, model.contextWindow);
-    },
-  };
-}