@abot-ai/runtime 1.2.0 → 1.3.0

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

@@ -9,6 +9,11 @@ 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;
@@ -154,6 +159,7 @@ export function buildConversationActivityModel({
       events: [],
       roleCards: [],
       sources: [],
+      toolActions: [],
       progress: null,
       contextWindow: null,
       eventCount: 0,
@@ -199,6 +205,11 @@ export function buildConversationActivityModel({
       streaming,
     }),
     sources: buildConversationSources(scopedEvents),
+    toolActions: buildConversationToolActions({
+      requestId: normalizedRequestId,
+      events: scopedEvents,
+      streaming,
+    }),
     progress,
     contextWindow: contextWindowModel,
     eventCount,
@@ -288,6 +299,7 @@ export function createConversationActivity({ documentRoot = document } = {}) {
   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";
@@ -305,7 +317,7 @@ 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);
@@ -329,7 +341,10 @@ 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"}`);
     }
     const sourceCount = model.sources.reduce(
@@ -339,16 +354,26 @@ export function createConversationActivity({ documentRoot = document } = {}) {
     );
     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) {
+    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");
@@ -358,11 +383,13 @@ export function createConversationActivity({ documentRoot = document } = {}) {
       ? 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,
-          timeline: renderTimeline(documentRoot, model.events),
+          timeline: renderTimeline(documentRoot, timelineEvents),
+          hasTimeline: timelineEvents.length > 0,
           onViewChange() {
             body.scrollTop = 0;
             schedulePinToLatest();

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

@@ -10,6 +10,7 @@ export declare function createConversationRoleCards(options?: {
     requestId: string;
     cards: ReturnType<typeof buildConversationRoleCards>;
     timeline: HTMLElement;
+    hasTimeline: boolean;
     onViewChange?: () => void;
   }): HTMLElement;
   isTimeline(requestId: string): boolean;

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

@@ -1,13 +1,18 @@
+import { createConversationTools } from "./conversation-tools.js";
+
 const ROLE_INITIALS = {
   supervisor: "S",
   planner: "P",
   worker: "W",
+  researcher: "Rs",
   reviewer: "R",
 };
 
 export function createConversationRoleCards({ documentRoot = document } = {}) {
   const timelineRequests = new Set();
+  const timelineToggles = new Map();
   const cardsScroll = new Map();
+  const toolsByRequest = new Map();
   let panelSequence = 0;
 
   function element(tag, className, text = "") {
@@ -27,7 +32,7 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     const avatar = element(
       "span",
       "conversation-role-avatar",
-      ROLE_INITIALS[role],
+      ROLE_INITIALS[role] || "•",
     );
     avatar.setAttribute("aria-hidden", "true");
     return avatar;
@@ -51,7 +56,28 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     return strip;
   }
 
-  function renderCard(card) {
+  function toolsForCard(requestId, cardId) {
+    const cards = toolsByRequest.get(requestId) || new Map();
+    toolsByRequest.set(requestId, cards);
+    const existing = cards.get(cardId);
+    if (existing) return existing;
+    const tools = createConversationTools({ documentRoot });
+    cards.set(cardId, tools);
+    return tools;
+  }
+
+  function discardMissingCardTools(requestId, cards) {
+    const renderers = toolsByRequest.get(requestId);
+    if (!renderers) return;
+    const cardIds = new Set(cards.map((card) => card.id));
+    for (const [cardId, tools] of renderers) {
+      if (cardIds.has(cardId)) continue;
+      tools.reset();
+      renderers.delete(cardId);
+    }
+  }
+
+  function renderCard(requestId, card) {
     const row = element("li", `conversation-role-card is-${card.tone}`);
     row.dataset.role = card.role;
     row.dataset.cardId = card.id;
@@ -96,6 +122,15 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
       );
       content.appendChild(summary);
     }
+    const tools = toolsForCard(requestId, card.id).createNode({
+      requestId,
+      actions: card.toolActions || [],
+      embedded: true,
+    });
+    if (tools) {
+      tools.setAttribute("aria-label", `${card.title} tool activity`);
+      content.appendChild(tools);
+    }
     row.appendChild(content);
     return row;
   }
@@ -123,20 +158,30 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     };
   }
 
-  function createNode({ requestId, cards, timeline, onViewChange = () => {} }) {
+  function createNode({
+    requestId,
+    cards,
+    timeline,
+    hasTimeline,
+    onViewChange = () => {},
+  }) {
+    discardMissingCardTools(requestId, cards);
+    timelineToggles.delete(requestId);
+    if (!hasTimeline) timelineRequests.delete(requestId);
     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);
+    timelineToggles.set(requestId, toggle);
+    if (hasTimeline) 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));
+    for (const card of cards) list.appendChild(renderCard(requestId, card));
     panel.append(list, timeline);
     section.append(toolbar, panel);
 
@@ -149,6 +194,8 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     }
 
     toggle.addEventListener("click", () => {
+      if (timelineToggles.get(requestId) !== toggle) return;
+      if (!hasTimeline) return;
       if (isTimeline(requestId)) timelineRequests.delete(requestId);
       else timelineRequests.add(requestId);
       const position = cardsScroll.get(requestId);
@@ -162,12 +209,21 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
 
   function forget(requestId) {
     timelineRequests.delete(requestId);
+    timelineToggles.delete(requestId);
     cardsScroll.delete(requestId);
+    const tools = toolsByRequest.get(requestId);
+    tools?.forEach((renderer) => renderer.reset());
+    toolsByRequest.delete(requestId);
   }
 
   function reset() {
     timelineRequests.clear();
+    timelineToggles.clear();
     cardsScroll.clear();
+    for (const tools of toolsByRequest.values()) {
+      tools.forEach((renderer) => renderer.reset());
+    }
+    toolsByRequest.clear();
   }
 
   return {

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

@@ -0,0 +1,71 @@
+import {
+  normalizeScheduleReference,
+  scheduleTimeLabel,
+} from "../lib/schedule-message.js";
+
+export function createConversationSchedule({
+  documentRoot = document,
+  onOpenJob = () => {},
+  canOpenJob = () => true,
+} = {}) {
+  const expandedRuns = new Set();
+
+  function createNode(message) {
+    if (message.role !== "user") return null;
+    const schedule = normalizeScheduleReference(message.schedule);
+    if (!schedule) return null;
+    const row = documentRoot.createElement("article");
+    row.className = "message-row schedule-message-row";
+    row.dataset.requestId = message.requestId || "";
+    row.setAttribute("aria-label", "Scheduled task invocation");
+    const card = documentRoot.createElement("div");
+    card.className = "schedule-chat-card";
+    card.dataset.jobId = schedule.jobId;
+    card.dataset.runId = schedule.runId;
+    const eyebrow = documentRoot.createElement("div");
+    eyebrow.className = "schedule-eyebrow";
+    eyebrow.textContent =
+      schedule.triggerType === "manual"
+        ? "Run now · Scheduled task"
+        : "Scheduled task";
+    const title = documentRoot.createElement("button");
+    title.type = "button";
+    title.className = "schedule-chat-title";
+    title.dir = "auto";
+    title.textContent = schedule.title;
+    title.setAttribute("aria-label", `View schedule: ${schedule.title}`);
+    title.disabled = !canOpenJob();
+    if (title.disabled)
+      title.title = "Schedules require the local Runtime backend.";
+    title.addEventListener("click", () => {
+      if (!canOpenJob()) return;
+      onOpenJob(schedule.jobId, schedule.runId);
+    });
+    const time = documentRoot.createElement("div");
+    time.className = "schedule-chat-time";
+    time.textContent = scheduleTimeLabel(
+      schedule.scheduledAt || message.createdAt,
+    );
+    const disclosure = documentRoot.createElement("details");
+    disclosure.className = "schedule-prompt-disclosure";
+    disclosure.open = expandedRuns.has(schedule.runId);
+    disclosure.addEventListener("toggle", () => {
+      if (disclosure.open) {
+        expandedRuns.add(schedule.runId);
+        return;
+      }
+      expandedRuns.delete(schedule.runId);
+    });
+    const summary = documentRoot.createElement("summary");
+    summary.textContent = "View invocation prompt";
+    const prompt = documentRoot.createElement("pre");
+    prompt.dir = "auto";
+    prompt.textContent = message.text || "";
+    disclosure.append(summary, prompt);
+    card.append(eyebrow, title, time, disclosure);
+    row.appendChild(card);
+    return row;
+  }
+
+  return { createNode, reset: () => expandedRuns.clear() };
+}

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

@@ -0,0 +1,65 @@
+import { buildConversationStatus } from "../lib/conversation-status-model.js";
+
+const SHIMMER_DURATION_MS = 2_800;
+
+function isActiveAssistant(message, activeRequestId) {
+  if (message.role !== "assistant") return false;
+  if (!message.streaming || !message.requestId) return false;
+  return message.requestId === activeRequestId;
+}
+
+/** Updates the activity text without replacing the conversation or its scroll position. */
+export function createConversationStatus({
+  getActiveRequestId,
+  getActivityForMessage,
+  isConnected = () => true,
+  documentRoot = document,
+}) {
+  const entries = new Map();
+
+  function refresh(message, node) {
+    const model = buildConversationStatus({
+      ...getActivityForMessage(message),
+      requestId: message.requestId,
+      streaming: isActiveAssistant(message, getActiveRequestId()),
+      connected: isConnected(),
+    });
+    node.hidden = !model;
+    const label = model?.label || "";
+    if (node.textContent !== label) node.textContent = label;
+    node.classList.toggle("is-animated", Boolean(model?.animate));
+  }
+
+  function createNode(message) {
+    if (!isActiveAssistant(message, getActiveRequestId())) return null;
+    const node = documentRoot.createElement("span");
+    node.className = "conversation-status";
+    node.setAttribute("role", "status");
+    node.setAttribute("aria-live", "polite");
+    node.setAttribute("aria-atomic", "true");
+    node.setAttribute("dir", "ltr");
+    node.setAttribute("lang", "en");
+    node.style.setProperty(
+      "--status-shimmer-duration",
+      `${SHIMMER_DURATION_MS}ms`,
+    );
+    // Keep the light sweep in phase when a streaming render recreates the row.
+    node.style.setProperty(
+      "--status-shimmer-delay",
+      `${-(Date.now() % SHIMMER_DURATION_MS)}ms`,
+    );
+    entries.set(message.id, { message, node });
+    refresh(message, node);
+    return node;
+  }
+
+  function render() {
+    for (const { message, node } of entries.values()) refresh(message, node);
+  }
+
+  function reset() {
+    entries.clear();
+  }
+
+  return { createNode, render, reset };
+}

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

@@ -0,0 +1,13 @@
+import type { ConversationToolAction } from "../lib/tool-activity-model.js";
+
+export declare function createConversationTools(options?: {
+  documentRoot?: Document;
+}): {
+  createNode(input?: {
+    requestId?: string;
+    actions?: ConversationToolAction[];
+    embedded?: boolean;
+  }): HTMLElement | null;
+  forget(requestId: unknown): void;
+  reset(): void;
+};

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

@@ -0,0 +1,284 @@
+const STATUS_SYMBOLS = {
+  preparing: "◌",
+  running: "◌",
+  awaiting_approval: "○",
+  completed: "✓",
+  failed: "×",
+  empty: "−",
+  unchanged: "−",
+  incomplete: "!",
+};
+
+function text(value) {
+  return typeof value === "string" ? value : "";
+}
+
+function hasKnownToolStatus(status) {
+  return Object.hasOwn(STATUS_SYMBOLS, status);
+}
+
+function canShowToolActivity(requestId, actions) {
+  if (!requestId) return false;
+  return Array.isArray(actions) && actions.length > 0;
+}
+
+function hasToolActionIdentity(action) {
+  return Boolean(text(action?.id));
+}
+
+function hasRecordedFields(fields) {
+  return Array.isArray(fields) && fields.length > 0;
+}
+
+function hasNoDisplayEvidence(fields, blocks) {
+  if (hasRecordedFields(fields)) return false;
+  return blocks.length === 0;
+}
+
+function repeatsActionTarget(field, target) {
+  if (!target || field.value !== target) return false;
+  return ["Path", "Folder", "Memory ID", "Target", "Source", "Query"].includes(
+    field.label,
+  );
+}
+
+function isTextInputField(field) {
+  return field.label === "Content excerpt" || field.label === "Instruction";
+}
+
+function inputBlockLabel(field, executed) {
+  if (field.label === "Instruction") return "Instruction";
+  if (executed) return "Sent content excerpt";
+  return "Prepared content excerpt";
+}
+
+function isRepeatedToolAction(count) {
+  return Number.isSafeInteger(count) && count > 1;
+}
+
+export function createConversationTools({ documentRoot = document } = {}) {
+  const requests = new Map();
+
+  function requestState(requestId) {
+    const existing = requests.get(requestId);
+    if (existing) return existing;
+    const state = {
+      expanded: new Set(),
+      nodes: new Map(),
+    };
+    requests.set(requestId, state);
+    return state;
+  }
+
+  function element(tag, className, value = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = text(value);
+    return node;
+  }
+
+  function isolatedText(tag, className, value) {
+    const node = element(tag, className, value);
+    node.setAttribute("dir", "auto");
+    return node;
+  }
+
+  function evidencePanel(title, fields, blocks = []) {
+    if (hasNoDisplayEvidence(fields, blocks)) return null;
+    const panel = element("section", "conversation-tool-evidence");
+    panel.setAttribute("aria-label", title);
+    if (hasRecordedFields(fields)) {
+      const list = element("dl", "conversation-tool-fields");
+      for (const field of fields) {
+        const row = element("div", "conversation-tool-field");
+        const label = isolatedText(
+          "dt",
+          "conversation-tool-field-label",
+          field.label,
+        );
+        const value = element("dd", "conversation-tool-field-value");
+        value.appendChild(isolatedText("bdi", "", field.value));
+        row.append(label, value);
+        list.appendChild(row);
+      }
+      panel.appendChild(list);
+    }
+    for (const block of blocks) {
+      const content = element("div", "conversation-tool-text-block");
+      content.appendChild(
+        element("p", "conversation-tool-preview-label", block.label),
+      );
+      const preview = isolatedText(
+        "pre",
+        "conversation-tool-preview",
+        block.value,
+      );
+      preview.setAttribute("aria-label", block.label);
+      content.appendChild(preview);
+      panel.appendChild(content);
+    }
+    return panel;
+  }
+
+  function evidenceGroups(action) {
+    const input = (action.sent || []).filter(
+      (field) => !repeatsActionTarget(field, action.target),
+    );
+    const labels = action.executed
+      ? ["Sent", "Received"]
+      : ["Prepared input", "Status"];
+    const preview = text(action.preview);
+    const panels = [
+      evidencePanel(
+        labels[0],
+        input.filter((field) => !isTextInputField(field)),
+        input.filter(isTextInputField).map((field) => ({
+          ...field,
+          label: inputBlockLabel(field, action.executed),
+        })),
+      ),
+      evidencePanel(
+        labels[1],
+        action.received,
+        preview
+          ? [
+              {
+                label: action.executed ? "Returned excerpt" : "Status",
+                value: preview,
+              },
+            ]
+          : [],
+      ),
+    ].filter(Boolean);
+    if (panels.length === 0) return null;
+    const groups = element("div", "conversation-tool-panels");
+    groups.append(...panels);
+    return groups;
+  }
+
+  function evidenceNotice(action, groups) {
+    const notices = [];
+    if (action.partial) notices.push("Partial result");
+    if (action.previewTruncated) notices.push("Excerpt shortened");
+    if (action.legacy) notices.push("Limited recorded details");
+    if (!groups && notices.length === 0) {
+      return element(
+        "p",
+        "conversation-tool-unrecorded",
+        "No additional details were recorded.",
+      );
+    }
+    if (notices.length === 0) return null;
+    return element("p", "conversation-tool-notice", notices.join(" · "));
+  }
+
+  function actionTarget(action) {
+    const target = isolatedText(
+      "bdi",
+      "conversation-tool-target",
+      action.target,
+    );
+    target.title = text(action.target);
+    return target;
+  }
+
+  function actionSummary(action, status) {
+    const summary = element("summary", "conversation-tool-summary");
+    const symbol = element(
+      "span",
+      "conversation-tool-symbol",
+      STATUS_SYMBOLS[status],
+    );
+    symbol.setAttribute("aria-hidden", "true");
+    const description = element("span", "conversation-tool-description");
+    description.appendChild(
+      isolatedText("bdi", "conversation-tool-title", action.title),
+    );
+    if (action.target) {
+      description.appendChild(actionTarget(action));
+    }
+    summary.append(symbol, description);
+    if (isRepeatedToolAction(action.count)) {
+      summary.appendChild(
+        element("span", "conversation-tool-count", `×${action.count}`),
+      );
+    }
+    summary.appendChild(
+      isolatedText("span", "conversation-tool-status", action.statusLabel),
+    );
+    const chevron = element("span", "conversation-tool-chevron", "⌄");
+    chevron.setAttribute("aria-hidden", "true");
+    summary.appendChild(chevron);
+    return summary;
+  }
+
+  function isCurrentDisclosure(requestId, request, actionId, details) {
+    if (requests.get(requestId) !== request) return false;
+    return request.nodes.get(actionId) === details;
+  }
+
+  function actionRow(requestId, request, action) {
+    const status = hasKnownToolStatus(action.status)
+      ? action.status
+      : "incomplete";
+    const row = element("li", "conversation-tool-row");
+    const details = element("details", `conversation-tool is-${status}`);
+    details.dataset.actionId = action.id;
+    details.open = request.expanded.has(action.id);
+    request.nodes.set(action.id, details);
+    details.appendChild(actionSummary(action, status));
+    const body = element("div", "conversation-tool-body");
+    if (action.intent) {
+      body.appendChild(
+        isolatedText("p", "conversation-tool-intent", action.intent),
+      );
+    }
+    const groups = evidenceGroups(action);
+    if (groups) body.appendChild(groups);
+    const notice = evidenceNotice(action, groups);
+    if (notice) body.appendChild(notice);
+    details.appendChild(body);
+    details.addEventListener("toggle", () => {
+      if (!isCurrentDisclosure(requestId, request, action.id, details)) return;
+      if (details.open) {
+        request.expanded.add(action.id);
+        return;
+      }
+      request.expanded.delete(action.id);
+    });
+    row.appendChild(details);
+    return row;
+  }
+
+  function createNode({ requestId, actions = [], embedded = false } = {}) {
+    const id = text(requestId);
+    const currentRequest = requests.get(id);
+    currentRequest?.nodes.clear();
+    if (!canShowToolActivity(id, actions)) return null;
+    const validActions = actions.filter(hasToolActionIdentity);
+    if (validActions.length === 0) return null;
+    const request = requestState(id);
+    const section = element("section", "conversation-tools");
+    section.setAttribute("aria-label", "Tool activity");
+    section.dataset.requestId = id;
+    if (!embedded) {
+      section.appendChild(element("h3", "conversation-tools-title", "Tools"));
+    }
+    const list = element("ol", "conversation-tools-list");
+    for (const action of validActions) {
+      list.appendChild(actionRow(id, request, action));
+    }
+    section.appendChild(list);
+    return section;
+  }
+
+  function forget(requestId) {
+    requests.delete(text(requestId));
+  }
+
+  function reset() {
+    requests.clear();
+  }
+
+  return { createNode, forget, reset };
+}