@abot-ai/runtime 1.3.1 → 1.4.0

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

@@ -0,0 +1,247 @@
+import { renderMarkdown } from "../lib/message-markdown.js";
+import { createConversationFileFocus } from "./conversation-file-focus.js";
+
+function isMarkdownFile(file) {
+  if (file?.kind !== "text") return false;
+  if (file.mimeType === "text/markdown") return true;
+  return /\.(md|markdown)$/iu.test(file.name);
+}
+
+function sizeLabel(bytes) {
+  if (bytes < 1024) return String(bytes) + " bytes";
+  if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+  return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+}
+
+function safeSameOriginUrl(value, baseHref) {
+  if (!value) return "";
+  try {
+    const url = new URL(value, baseHref);
+    if (!["http:", "https:"].includes(url.protocol)) return "";
+    if (url.origin !== new URL(baseHref).origin) return "";
+    return url.href;
+  } catch {
+    return "";
+  }
+}
+
+export function createConversationFilePreview({
+  host,
+  documentRoot = document,
+  viewport = window,
+  onClose,
+  onOpenNative,
+}) {
+  function element(tag, className, value = "") {
+    const node = documentRoot.createElement(tag);
+    node.className = className;
+    node.textContent = value;
+    return node;
+  }
+  function button(className, label) {
+    const node = element("button", className, label);
+    node.type = "button";
+    return node;
+  }
+
+  const panel = element("aside", "conversation-file-preview");
+  panel.hidden = true;
+  panel.setAttribute("aria-label", "Current file preview");
+  const backdrop = button("conversation-file-backdrop", "");
+  backdrop.hidden = true;
+  backdrop.tabIndex = -1;
+  backdrop.setAttribute("aria-label", "Close file preview");
+  backdrop.addEventListener("click", onClose);
+  const header = element("header", "conversation-file-header");
+  const heading = element("div", "conversation-file-heading");
+  const title = element("h2", "conversation-file-title", "Current file");
+  title.dir = "auto";
+  const subtitle = element(
+    "p",
+    "conversation-file-subtitle",
+    "Current file contents",
+  );
+  heading.append(title, subtitle);
+  const closeButton = button("conversation-file-close", "×");
+  closeButton.setAttribute("aria-label", "Close file preview");
+  closeButton.addEventListener("click", onClose);
+  header.append(heading, closeButton);
+
+  const toolbar = element("div", "conversation-file-toolbar");
+  toolbar.hidden = true;
+  const modes = element("div", "conversation-file-modes");
+  modes.setAttribute("role", "group");
+  modes.setAttribute("aria-label", "File view");
+  const previewButton = button("conversation-file-mode", "Preview");
+  const sourceButton = button("conversation-file-mode", "Source");
+  modes.append(previewButton, sourceButton);
+  const openNative = button("conversation-file-open-native", "Open on Mac ↗");
+  openNative.title = "Open the original file in its default Mac app";
+  openNative.hidden = true;
+  openNative.addEventListener("click", () => {
+    if (openNative.hidden || openNative.disabled) return;
+    void onOpenNative?.();
+  });
+  const nativeStatus = element("p", "conversation-file-native-status");
+  nativeStatus.hidden = true;
+  nativeStatus.setAttribute("role", "status");
+  nativeStatus.setAttribute("aria-live", "polite");
+  toolbar.append(modes, openNative);
+  const body = element("div", "conversation-file-body");
+  body.tabIndex = 0;
+  const notice = element("p", "conversation-file-notice");
+  notice.hidden = true;
+  const footer = element(
+    "footer",
+    "conversation-file-footer",
+    "Read only · Current file contents",
+  );
+  panel.append(header, toolbar, nativeStatus, notice, body, footer);
+  host.append(backdrop, panel);
+  const focus = createConversationFileFocus({
+    panel,
+    backdrop,
+    host,
+    closeButton,
+    documentRoot,
+    viewport,
+    onClose,
+  });
+  let current = null;
+  let mode = "preview";
+
+  function renderFileContent() {
+    body.replaceChildren();
+    previewButton.setAttribute("aria-pressed", String(mode === "preview"));
+    sourceButton.setAttribute("aria-pressed", String(mode === "source"));
+    if (!current) return;
+    const { file } = current;
+    if (file.kind === "unsupported") {
+      body.appendChild(
+        element(
+          "p",
+          "conversation-file-state",
+          "Preview is not available for this file type or size.",
+        ),
+      );
+      return;
+    }
+    if (file.kind === "image") {
+      const imageUrl = safeSameOriginUrl(
+        current.imageUrl,
+        viewport.location.href,
+      );
+      if (!imageUrl) return;
+      const image = element("img", "conversation-file-image");
+      image.alt = file.name;
+      image.decoding = "async";
+      image.referrerPolicy = "no-referrer";
+      image.addEventListener("error", () => {
+        if (!body.contains(image)) return;
+        body.replaceChildren(
+          element(
+            "p",
+            "conversation-file-state",
+            "The image is no longer available. Try opening the file again.",
+          ),
+        );
+      });
+      image.src = imageUrl;
+      body.appendChild(image);
+      return;
+    }
+    if (isMarkdownFile(file) && mode === "preview") {
+      const markdown = element(
+        "div",
+        "markdown-body conversation-file-markdown",
+      );
+      markdown.dir = "auto";
+      markdown.innerHTML = renderMarkdown(file.content);
+      body.appendChild(markdown);
+      return;
+    }
+    const source = element("pre", "conversation-file-source", file.content);
+    source.dir = "auto";
+    body.appendChild(source);
+  }
+
+  previewButton.addEventListener("click", () => {
+    mode = "preview";
+    renderFileContent();
+  });
+  sourceButton.addEventListener("click", () => {
+    mode = "source";
+    renderFileContent();
+  });
+
+  function render(state) {
+    panel.hidden = !state.open;
+    host.classList.toggle("has-file-preview", state.open);
+    if (!state.open) {
+      current = null;
+      body.replaceChildren();
+      openNative.hidden = true;
+      nativeStatus.hidden = true;
+      focus.hide(state.restoreFocus !== false);
+      return;
+    }
+    if (state.status === "native") {
+      openNative.disabled = state.nativeStatus === "opening";
+      openNative.textContent = openNative.disabled
+        ? "Opening…"
+        : "Open on Mac ↗";
+      nativeStatus.hidden = state.nativeStatus === "opening";
+      nativeStatus.textContent =
+        state.nativeStatus === "error"
+          ? state.nativeError
+          : "Sent to your Mac app";
+      return;
+    }
+    focus.show(state.opener);
+    body.setAttribute("aria-busy", String(state.status === "loading"));
+    if (state.status === "loading") {
+      current = null;
+      mode = "preview";
+      openNative.disabled = false;
+      openNative.textContent = "Open on Mac ↗";
+      title.textContent = state.name || "Current file";
+      subtitle.textContent = "Current file contents";
+      toolbar.hidden = true;
+      notice.hidden = true;
+      openNative.hidden = true;
+      nativeStatus.hidden = true;
+      body.replaceChildren(
+        element("p", "conversation-file-state", "Loading file…"),
+      );
+      body.scrollTop = 0;
+      return;
+    }
+    if (state.status === "error") {
+      toolbar.hidden = true;
+      openNative.hidden = true;
+      nativeStatus.hidden = true;
+      const error = element("p", "conversation-file-state", state.error);
+      error.setAttribute("role", "alert");
+      body.replaceChildren(error);
+      return;
+    }
+    current = state;
+    const { file } = state;
+    title.textContent = file.name;
+    subtitle.textContent = sizeLabel(file.size) + " · Current file";
+    modes.hidden = !isMarkdownFile(file);
+    openNative.hidden =
+      file.nativeOpenAvailable !== true || typeof onOpenNative !== "function";
+    openNative.disabled = false;
+    openNative.textContent = "Open on Mac ↗";
+    nativeStatus.hidden = true;
+    toolbar.hidden = modes.hidden && openNative.hidden;
+    notice.hidden = !file.truncated;
+    notice.textContent = openNative.hidden
+      ? "Showing the beginning of this file. Open the original on your computer to read it in full."
+      : "Showing the beginning of this file. Open on Mac to read it in full.";
+    renderFileContent();
+  }
+
+  return { render, panel };
+}

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

@@ -1,7 +1,13 @@
+import type { ConversationFileReference } from "../lib/conversation-file-reference.js";
 import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
 
 export declare function createConversationRoleCards(options?: {
   documentRoot?: Document;
+  canOpenFile?: () => boolean;
+  onOpenFile?: (
+    reference: ConversationFileReference,
+    opener: HTMLElement,
+  ) => unknown;
 }): {
   createSummaryNode(
     cards: ReturnType<typeof buildConversationRoleCards>,

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

@@ -8,7 +8,11 @@ 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();
@@ -61,7 +65,11 @@ export function createConversationRoleCards({ documentRoot = document } = {}) {
     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;
   }

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,129 @@
+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",
+  ].includes(field.label);
+}
+
+function inputBlockLabel(field, executed) {
+  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,3 +1,6 @@
+import { createConversationFileAction } from "./conversation-file-action.js";
+import { createConversationToolEvidence } from "./conversation-tool-evidence.js";
+
 const STATUS_SYMBOLS = {
   preparing: "◌",
   running: "◌",
@@ -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);

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

@@ -26,6 +26,7 @@ export function createConversationView({
   resolveAttachmentUrl = () => "",
   onOpenSchedule = () => {},
   canOpenSchedule = () => true,
+  filePreview = { reset() {}, syncScope() {}, setWorkspace() {} },
   documentRoot = document,
   viewport = window,
 }) {
@@ -34,7 +35,11 @@ export function createConversationView({
     onOpenJob: onOpenSchedule,
     canOpenJob: canOpenSchedule,
   });
-  const conversationActivity = createConversationActivity({ documentRoot });
+  const conversationActivity = createConversationActivity({
+    documentRoot,
+    onOpenFile: filePreview.open,
+    canOpenFile: filePreview.canOpen,
+  });
   const conversationStatus = createConversationStatus({
     getActiveRequestId,
     getActivityForMessage,
@@ -225,6 +230,7 @@ export function createConversationView({
   }
 
   function render() {
+    filePreview.syncScope();
     renderContextWindow();
     composerPlan.render(
       buildComposerPlanModel({
@@ -291,6 +297,7 @@ export function createConversationView({
   }
 
   function reset() {
+    filePreview.reset();
     viewState.followMessages = true;
     viewState.collapsedThinkingMessageIds.clear();
     viewState.scrollSettleVersion += 1;
@@ -320,6 +327,8 @@ export function createConversationView({
   }
 
   return {
+    setWorkspace: filePreview.setWorkspace,
+    closeFilePreview: filePreview.reset,
     bind,
     cancelScheduledMessageRender,
     cancelScheduledThinkingRender,