@abot-ai/runtime 1.0.0 → 1.2.0

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

@@ -1,3 +1,6 @@
+import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
+import type { ConversationSourcesGroup } from "../lib/web-sources.js";
+
 export type ConversationActivityInput = {
   requestId?: unknown;
   events?: unknown[];
@@ -6,6 +9,12 @@ export type ConversationActivityInput = {
   streaming?: boolean;
 };
 
+export type ConversationActivityEvent = Record<string, unknown> & {
+  eventName: string;
+  name: string;
+  tone: string;
+};
+
 export type ConversationContextWindowModel = {
   invocationId: string;
   modelStep: string;
@@ -39,7 +48,9 @@ export declare function buildConversationActivityModel(
   input?: ConversationActivityInput,
 ): {
   requestId: string;
-  events: unknown[];
+  events: ConversationActivityEvent[];
+  roleCards: ReturnType<typeof buildConversationRoleCards>;
+  sources: ConversationSourcesGroup[];
   progress: unknown;
   contextWindow: ConversationContextWindowModel | null;
   eventCount: number;
@@ -64,9 +75,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,11 @@ 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";
 
 function textOf(value, fallback = "") {
   return typeof value === "string" ? value : fallback;
@@ -62,11 +67,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 +152,8 @@ export function buildConversationActivityModel({
     return {
       requestId: "",
       events: [],
+      roleCards: [],
+      sources: [],
       progress: null,
       contextWindow: null,
       eventCount: 0,
@@ -159,6 +171,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 +182,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 +193,12 @@ export function buildConversationActivityModel({
   return {
     requestId: normalizedRequestId,
     events: timeline,
+    roleCards: buildConversationRoleCards({
+      requestId: normalizedRequestId,
+      events: scopedEvents,
+      streaming,
+    }),
+    sources: buildConversationSources(scopedEvents),
     progress,
     contextWindow: contextWindowModel,
     eventCount,
@@ -211,135 +224,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,6 +280,8 @@ export function pinConversationActivityToLatest({
 }
 
 export function createConversationActivity({ documentRoot = document } = {}) {
+  const roleCards = createConversationRoleCards({ documentRoot });
+  const sourceCards = createConversationSources({ documentRoot });
   const manuallyCollapsedStreamingRequests = new Set();
   const manuallyExpandedCompletedRequests = new Set();
 
@@ -422,6 +308,11 @@ export function createConversationActivity({ documentRoot = document } = {}) {
       model.failureCount > 0 ? "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(
@@ -441,6 +332,13 @@ export function createConversationActivity({ documentRoot = document } = {}) {
     if (model.toolCount > 0) {
       facts.push(`${model.toolCount} tool${model.toolCount === 1 ? "" : "s"}`);
     }
+    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"}`);
     if (model.failureCount > 0) facts.push(`${model.failureCount} failed`);
     if (facts.length === 0 && model.eventCount > 0) {
       facts.push(`${model.eventCount} events`);
@@ -455,19 +353,37 @@ export function createConversationActivity({ documentRoot = document } = {}) {
 
     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));
+      body.appendChild(
+        roleCards.createNode({
+          requestId: model.requestId,
+          cards: model.roleCards,
+          timeline: renderTimeline(documentRoot, model.events),
+          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 +417,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);
-    },
-  };
-}

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

@@ -0,0 +1,23 @@
+import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
+
+export declare function createConversationRoleCards(options?: {
+  documentRoot?: Document;
+}): {
+  createSummaryNode(
+    cards: ReturnType<typeof buildConversationRoleCards>,
+  ): HTMLElement | null;
+  createNode(input: {
+    requestId: string;
+    cards: ReturnType<typeof buildConversationRoleCards>;
+    timeline: HTMLElement;
+    onViewChange?: () => void;
+  }): HTMLElement;
+  isTimeline(requestId: string): boolean;
+  bindScroll(input: {
+    requestId: string;
+    body: HTMLElement;
+    details: HTMLDetailsElement;
+  }): () => boolean;
+  forget(requestId: string): void;
+  reset(): void;
+};

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

@@ -0,0 +1,181 @@
+const ROLE_INITIALS = {
+  supervisor: "S",
+  planner: "P",
+  worker: "W",
+  reviewer: "R",
+};
+
+export function createConversationRoleCards({ documentRoot = document } = {}) {
+  const timelineRequests = new Set();
+  const cardsScroll = new Map();
+  let panelSequence = 0;
+
+  function element(tag, className, text = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text;
+    return node;
+  }
+
+  function textElement(tag, className, text) {
+    const node = element(tag, className, text);
+    node.setAttribute("dir", "auto");
+    return node;
+  }
+
+  function roleAvatar(role) {
+    const avatar = element(
+      "span",
+      "conversation-role-avatar",
+      ROLE_INITIALS[role],
+    );
+    avatar.setAttribute("aria-hidden", "true");
+    return avatar;
+  }
+
+  function createSummaryNode(cards) {
+    if (cards.length === 0) return null;
+    const strip = element("span", "conversation-role-summary-strip");
+    for (const card of cards) {
+      const item = element(
+        "span",
+        `conversation-role-summary-item is-${card.tone}`,
+      );
+      item.dataset.role = card.role;
+      item.setAttribute("role", "img");
+      item.setAttribute("aria-label", card.title);
+      item.setAttribute("title", card.title);
+      item.appendChild(roleAvatar(card.role));
+      strip.appendChild(item);
+    }
+    return strip;
+  }
+
+  function renderCard(card) {
+    const row = element("li", `conversation-role-card is-${card.tone}`);
+    row.dataset.role = card.role;
+    row.dataset.cardId = card.id;
+    row.appendChild(roleAvatar(card.role));
+    const content = element("div", "conversation-role-content");
+    const header = element("div", "conversation-role-header");
+    header.appendChild(
+      textElement("span", "conversation-role-title", card.title),
+    );
+    if (card.active) {
+      const active = element("span", "conversation-role-active");
+      active.setAttribute("role", "img");
+      active.setAttribute("aria-label", "Active role");
+      header.appendChild(active);
+    }
+    header.appendChild(
+      textElement(
+        "span",
+        "conversation-role-responsibility",
+        card.responsibility,
+      ),
+    );
+    const hasActivityError = card.tone === "failed";
+    if (hasActivityError) {
+      header.appendChild(
+        element("span", "conversation-role-error", "Activity error"),
+      );
+    }
+    if (card.facts.length > 0) {
+      const facts = element("ul", "conversation-role-facts");
+      for (const fact of card.facts) {
+        facts.appendChild(textElement("li", "conversation-role-fact", fact));
+      }
+      header.appendChild(facts);
+    }
+    content.appendChild(header);
+    if (card.summary) {
+      const summary = element("p", "conversation-role-summary");
+      summary.append(
+        element("span", "conversation-role-action-label", "Latest: "),
+        textElement("bdi", "conversation-role-action", card.summary),
+      );
+      content.appendChild(summary);
+    }
+    row.appendChild(content);
+    return row;
+  }
+
+  function isTimeline(requestId) {
+    return timelineRequests.has(requestId);
+  }
+
+  function bindScroll({ requestId, body, details }) {
+    const position = { top: cardsScroll.get(requestId)?.top || 0 };
+    cardsScroll.set(requestId, position);
+    function ownsVisibleCards() {
+      if (cardsScroll.get(requestId) !== position) return false;
+      if (!details.open) return false;
+      return !isTimeline(requestId);
+    }
+    body.addEventListener("scroll", () => {
+      if (!ownsVisibleCards()) return;
+      position.top = body.scrollTop;
+    });
+    return () => {
+      if (!ownsVisibleCards()) return false;
+      body.scrollTop = position.top;
+      return true;
+    };
+  }
+
+  function createNode({ requestId, cards, timeline, onViewChange = () => {} }) {
+    if (cards.length === 0) return timeline;
+    const section = element("div", "conversation-role-view");
+    const toolbar = element("div", "conversation-role-toolbar");
+    toolbar.appendChild(element("span", "conversation-role-label", "Agents"));
+    const toggle = element("button", "conversation-role-toggle");
+    toggle.type = "button";
+    toolbar.appendChild(toggle);
+    const panel = element("div", "conversation-role-panel");
+    panel.id = `conversation-role-panel-${++panelSequence}`;
+    toggle.setAttribute("aria-controls", panel.id);
+    const list = element("ol", "conversation-role-list");
+    list.setAttribute("aria-label", "Request agents");
+    for (const card of cards) list.appendChild(renderCard(card));
+    panel.append(list, timeline);
+    section.append(toolbar, panel);
+
+    function updateView() {
+      const showTimeline = isTimeline(requestId);
+      list.hidden = showTimeline;
+      timeline.hidden = !showTimeline;
+      section.dataset.view = showTimeline ? "timeline" : "cards";
+      toggle.textContent = showTimeline ? "Show agents" : "Show timeline";
+    }
+
+    toggle.addEventListener("click", () => {
+      if (isTimeline(requestId)) timelineRequests.delete(requestId);
+      else timelineRequests.add(requestId);
+      const position = cardsScroll.get(requestId);
+      if (position) position.top = 0;
+      updateView();
+      onViewChange();
+    });
+    updateView();
+    return section;
+  }
+
+  function forget(requestId) {
+    timelineRequests.delete(requestId);
+    cardsScroll.delete(requestId);
+  }
+
+  function reset() {
+    timelineRequests.clear();
+    cardsScroll.clear();
+  }
+
+  return {
+    createNode,
+    createSummaryNode,
+    isTimeline,
+    bindScroll,
+    forget,
+    reset,
+  };
+}

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

@@ -0,0 +1,12 @@
+export const CONVERSATION_SIDEBAR_MEDIA_QUERY = "(min-width: 1260px)";
+
+export function resolveConversationSidebarLayout(workspace, activeSheet, wide) {
+  if (workspace !== "chat") {
+    return { docked: false, drawerOpen: false, visible: false };
+  }
+  if (wide) {
+    return { docked: true, drawerOpen: false, visible: true };
+  }
+  const drawerOpen = activeSheet === "sessions";
+  return { docked: false, drawerOpen, visible: drawerOpen };
+}

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

@@ -0,0 +1,7 @@
+import type { ConversationSourcesGroup } from "../lib/web-sources.js";
+
+export declare function createConversationSources(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(groups?: ConversationSourcesGroup[]): HTMLElement | null;
+};