@abot-ai/runtime 1.3.1 → 1.5.0

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

@@ -8,10 +8,13 @@ const ROLE_INITIALS = {
   reviewer: "R",
 };
 
-export function createConversationRoleCards({ documentRoot = document } = {}) {
+export function createConversationRoleCards({
+  documentRoot = document,
+  onOpenFile,
+  canOpenFile,
+} = {}) {
   const timelineRequests = new Set();
   const timelineToggles = new Map();
-  const cardsScroll = new Map();
   const toolsByRequest = new Map();
   let panelSequence = 0;
 
@@ -38,30 +41,16 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     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 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 });
+    const tools = createConversationTools({
+      documentRoot,
+      onOpenFile,
+      canOpenFile,
+    });
     cards.set(cardId, tools);
     return tools;
   }
@@ -88,7 +77,7 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
       textElement("span", "conversation-role-title", card.title),
     );
     if (card.active) {
-      const active = element("span", "conversation-role-active");
+      const active = element("span", "conversation-role-active", "Working");
       active.setAttribute("role", "img");
       active.setAttribute("aria-label", "Active role");
       header.appendChild(active);
@@ -106,21 +95,22 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
         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);
+    const message = element("div", "conversation-role-message");
     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);
+      message.appendChild(summary);
+    }
+    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));
+      }
+      message.appendChild(facts);
     }
     const tools = toolsForCard(requestId, card.id).createNode({
       requestId,
@@ -129,8 +119,9 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     });
     if (tools) {
       tools.setAttribute("aria-label", `${card.title} tool activity`);
-      content.appendChild(tools);
+      message.appendChild(tools);
     }
+    content.appendChild(message);
     row.appendChild(content);
     return row;
   }
@@ -139,28 +130,10 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     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,
+    heading,
     timeline,
     hasTimeline,
     onViewChange = () => {},
@@ -171,9 +144,16 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     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"));
+    toolbar.appendChild(
+      heading || element("span", "conversation-role-label", "Agents"),
+    );
     const toggle = element("button", "conversation-role-toggle");
     toggle.type = "button";
+    const icon = element("span", "conversation-role-toggle-icon");
+    icon.setAttribute("aria-hidden", "true");
+    icon.innerHTML = '<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"><path d="M3 3v10M7 3h6M7 8h6M7 13h6"/><circle cx="3" cy="3" r="1"/><circle cx="3" cy="8" r="1"/><circle cx="3" cy="13" r="1"/></svg>';
+    const toggleLabel = element("span", "conversation-role-toggle-label");
+    toggle.append(icon, toggleLabel);
     timelineToggles.set(requestId, toggle);
     if (hasTimeline) toolbar.appendChild(toggle);
     const panel = element("div", "conversation-role-panel");
@@ -183,14 +163,15 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     list.setAttribute("aria-label", "Request agents");
     for (const card of cards) list.appendChild(renderCard(requestId, card));
     panel.append(list, timeline);
-    section.append(toolbar, panel);
+    section.append(panel, toolbar);
 
     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";
+      toggleLabel.textContent = showTimeline ? "Show agents" : "Show timeline";
+      toggle.setAttribute("aria-pressed", String(showTimeline));
     }
 
     toggle.addEventListener("click", () => {
@@ -198,8 +179,6 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
       if (!hasTimeline) return;
       if (isTimeline(requestId)) timelineRequests.delete(requestId);
       else timelineRequests.add(requestId);
-      const position = cardsScroll.get(requestId);
-      if (position) position.top = 0;
       updateView();
       onViewChange();
     });
@@ -210,7 +189,6 @@ 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);
@@ -219,7 +197,6 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
   function reset() {
     timelineRequests.clear();
     timelineToggles.clear();
-    cardsScroll.clear();
     for (const tools of toolsByRequest.values()) {
       tools.forEach((renderer) => renderer.reset());
     }
@@ -228,9 +205,7 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
 
   return {
     createNode,
-    createSummaryNode,
     isTimeline,
-    bindScroll,
     forget,
     reset,
   };

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

@@ -20,7 +20,7 @@ function sourceStatus(source) {
 
 function sourceDescription(source, url, status) {
   const details = [source.title, url.href, status.detail];
-  if (source.retrieval === "failed") details.push("Fetch failed");
+  if (source.retrieval === "failed") details.push("Page content not retrieved");
   if (source.contentTruncated) details.push("Partial content");
   const requested = parseWebSourceUrl(source.requestedUrl);
   if (requested && requested.href !== url.href) {
@@ -96,7 +96,7 @@ function sourceCard(documentRoot, source) {
   domain.dir = "ltr";
   link.appendChild(domain);
   const failed = source.retrieval === "failed";
-  const label = failed ? `${status.short} · failed` : status.short;
+  const label = failed ? `${status.short} · not retrieved` : status.short;
   const badge = element(
     documentRoot,
     "span",

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

@@ -0,0 +1,9 @@
+import type { ConversationToolAction } from "../lib/tool-activity-model.js";
+
+export declare function createConversationToolEvidence(
+  action: Pick<
+    ConversationToolAction,
+    "sent" | "received" | "target" | "executed" | "preview"
+  >,
+  options?: { documentRoot?: Document; hideRepeatedTarget?: boolean },
+): HTMLElement | null;

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

@@ -0,0 +1,135 @@
+function text(value) {
+  return typeof value === "string" ? value : "";
+}
+
+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 [
+    "Content excerpt",
+    "Instruction",
+    "Command",
+    "Command excerpt",
+    "Typed text",
+    "Typed text excerpt",
+  ].includes(field.label);
+}
+
+function inputBlockLabel(field, executed) {
+  if (field.label === "Typed text")
+    return executed ? "Sent text" : "Prepared text";
+  if (field.label === "Typed text excerpt")
+    return executed ? "Sent text excerpt" : "Prepared text excerpt";
+  if (field.label === "Instruction") return "Instruction";
+  if (field.label === "Command")
+    return executed ? "Sent command" : "Prepared command";
+  if (field.label === "Command excerpt")
+    return executed ? "Sent command excerpt" : "Prepared command excerpt";
+  if (executed) return "Sent content excerpt";
+  return "Prepared content excerpt";
+}
+
+/** Render recorded evidence consistently in approval and activity surfaces. */
+export function createConversationToolEvidence(
+  action,
+  { documentRoot = document, hideRepeatedTarget = false } = {},
+) {
+  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;
+  }
+
+  const input = (action.sent || []).filter(
+    (field) =>
+      !hideRepeatedTarget || !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;
+}

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

@@ -1,7 +1,13 @@
+import type { ConversationFileReference } from "../lib/conversation-file-reference.js";
 import type { ConversationToolAction } from "../lib/tool-activity-model.js";
 
 export declare function createConversationTools(options?: {
   documentRoot?: Document;
+  canOpenFile?: () => boolean;
+  onOpenFile?: (
+    reference: ConversationFileReference,
+    opener: HTMLElement,
+  ) => unknown;
 }): {
   createNode(input?: {
     requestId?: string;

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

@@ -1,9 +1,12 @@
+import { createConversationFileAction } from "./conversation-file-action.js";
+import { createConversationToolEvidence } from "./conversation-tool-evidence.js";
+
 const STATUS_SYMBOLS = {
   preparing: "◌",
   running: "◌",
   awaiting_approval: "○",
   completed: "✓",
-  failed: "×",
+  failed: "−",
   empty: "−",
   unchanged: "−",
   incomplete: "!",
@@ -26,37 +29,15 @@ 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 } = {}) {
+export function createConversationTools({
+  documentRoot = document,
+  onOpenFile,
+  canOpenFile,
+} = {}) {
   const requests = new Map();
 
   function requestState(requestId) {
@@ -83,79 +64,6 @@ export function createConversationTools({ documentRoot = document } = {}) {
     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");
@@ -182,7 +90,7 @@ export function createConversationTools({ documentRoot = document } = {}) {
     return target;
   }
 
-  function actionSummary(action, status) {
+  function actionSummary(action, status, fileAction) {
     const summary = element("summary", "conversation-tool-summary");
     const symbol = element(
       "span",
@@ -194,9 +102,9 @@ export function createConversationTools({ documentRoot = document } = {}) {
     description.appendChild(
       isolatedText("bdi", "conversation-tool-title", action.title),
     );
-    if (action.target) {
+    if (fileAction) description.appendChild(fileAction);
+    if (!fileAction && action.target)
       description.appendChild(actionTarget(action));
-    }
     summary.append(symbol, description);
     if (isRepeatedToolAction(action.count)) {
       summary.appendChild(
@@ -226,14 +134,26 @@ export function createConversationTools({ documentRoot = document } = {}) {
     details.dataset.actionId = action.id;
     details.open = request.expanded.has(action.id);
     request.nodes.set(action.id, details);
-    details.appendChild(actionSummary(action, status));
+    const fileAction = createConversationFileAction({
+      documentRoot,
+      requestId,
+      action,
+      onOpenFile,
+      canOpenFile,
+      isCurrentAction: () =>
+        isCurrentDisclosure(requestId, request, action.id, details),
+    });
+    details.appendChild(actionSummary(action, status, fileAction));
     const body = element("div", "conversation-tool-body");
     if (action.intent) {
       body.appendChild(
         isolatedText("p", "conversation-tool-intent", action.intent),
       );
     }
-    const groups = evidenceGroups(action);
+    const groups = createConversationToolEvidence(action, {
+      documentRoot,
+      hideRepeatedTarget: true,
+    });
     if (groups) body.appendChild(groups);
     const notice = evidenceNotice(action, groups);
     if (notice) body.appendChild(notice);