@abot-ai/runtime 1.3.1 → 1.5.0

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

@@ -0,0 +1,152 @@
+function matchesFileOpener(node, identity) {
+  if (node.dataset.requestId !== identity.requestId) return false;
+  return node.dataset.executionId === identity.executionId;
+}
+
+function isPreviewTabStop(node) {
+  if (node.disabled || node.closest("[hidden]")) return false;
+  const disclosure = node.closest("details");
+  if (!disclosure || disclosure.open) return true;
+  return node.tagName.toLowerCase() === "summary";
+}
+
+function isClosedDisclosure(node) {
+  if (node.tagName.toLowerCase() !== "details") return false;
+  return !node.open;
+}
+
+function isDisclosureSummary(node) {
+  return node.tagName.toLowerCase() === "summary";
+}
+
+function visibleFileReturnTarget(node) {
+  if (!node?.isConnected) return null;
+  let target = node;
+  for (let ancestor = node; ancestor; ancestor = ancestor.parentElement) {
+    if (ancestor.hidden || ancestor.inert) return null;
+    if (!isClosedDisclosure(ancestor)) continue;
+    const summary = [...ancestor.children].find(isDisclosureSummary);
+    if (!summary) return null;
+    if (!summary.contains(target)) target = summary;
+  }
+  return target;
+}
+
+function fileReturnTarget(node) {
+  const target = visibleFileReturnTarget(node);
+  if (target) return target;
+  const activity = node?.closest(".conversation-activity");
+  if (!activity) return null;
+  const viewToggle = activity.querySelector(".conversation-role-toggle");
+  const visibleToggle = visibleFileReturnTarget(viewToggle);
+  if (visibleToggle) return visibleToggle;
+  const summary = [...activity.children].find(isDisclosureSummary);
+  return visibleFileReturnTarget(summary);
+}
+
+export function createConversationFileFocus({
+  panel,
+  backdrop,
+  host,
+  closeButton,
+  documentRoot,
+  viewport,
+  onClose,
+}) {
+  const overlayQuery = viewport.matchMedia?.("(max-width: 1200px)");
+  const previewInertNodes = new Set();
+  let open = false;
+  let opener = null;
+  let openerIdentity = null;
+
+  function restoreBackground() {
+    for (const element of previewInertNodes) {
+      if (element.inert) element.inert = false;
+    }
+    previewInertNodes.clear();
+  }
+
+  function makeBackgroundInert() {
+    for (let child = panel; child?.parentElement; child = child.parentElement) {
+      for (const sibling of child.parentElement.children) {
+        if (sibling === child || sibling === backdrop) continue;
+        if (sibling.inert) continue;
+        previewInertNodes.add(sibling);
+        sibling.inert = true;
+      }
+      if (child.parentElement === documentRoot.body) break;
+    }
+  }
+
+  function syncLayout() {
+    restoreBackground();
+    const modal = open && overlayQuery?.matches === true;
+    backdrop.hidden = !modal;
+    panel.classList.toggle("is-overlay", modal);
+    if (!modal) {
+      panel.removeAttribute("role");
+      panel.removeAttribute("aria-modal");
+      return;
+    }
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    makeBackgroundInert();
+    if (!panel.contains(documentRoot.activeElement)) closeButton.focus();
+  }
+
+  function findReturnTarget() {
+    if (opener?.isConnected) return fileReturnTarget(opener);
+    if (!openerIdentity) return null;
+    const replacement = [
+      ...host.querySelectorAll(".conversation-tool-file-action"),
+    ].find((node) => matchesFileOpener(node, openerIdentity));
+    return fileReturnTarget(replacement);
+  }
+
+  function show(nextOpener) {
+    const wasOpen = open;
+    open = true;
+    if (nextOpener) {
+      opener = nextOpener;
+      openerIdentity = { ...nextOpener.dataset };
+    }
+    syncLayout();
+    if (!wasOpen) closeButton.focus({ preventScroll: true });
+  }
+
+  function hide(restoreFocus) {
+    const wasOpen = open;
+    open = false;
+    syncLayout();
+    if (wasOpen && restoreFocus)
+      findReturnTarget()?.focus({ preventScroll: true });
+    opener = null;
+    openerIdentity = null;
+  }
+
+  panel.addEventListener("keydown", (event) => {
+    if (!open || event.key !== "Tab" || !overlayQuery?.matches) return;
+    const elements = [
+      ...panel.querySelectorAll("button, a[href], summary, [tabindex='0']"),
+    ].filter(isPreviewTabStop);
+    const first = elements[0];
+    const last = elements.at(-1);
+    const active = documentRoot.activeElement;
+    if (event.shiftKey && active === first) {
+      event.preventDefault();
+      last?.focus();
+      return;
+    }
+    if (!event.shiftKey && active === last) {
+      event.preventDefault();
+      first?.focus();
+    }
+  });
+  documentRoot.addEventListener("keydown", (event) => {
+    if (!open || event.key !== "Escape") return;
+    event.preventDefault();
+    onClose();
+  });
+  overlayQuery?.addEventListener("change", syncLayout);
+  return { show, hide };
+}

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

@@ -0,0 +1,23 @@
+import type { ConversationFilePreview } from "../lib/conversation-file-preview.js";
+export interface FilePreviewViewState {
+  open: boolean;
+  restoreFocus?: boolean;
+  status?: "loading" | "ready" | "error" | "native";
+  opener?: HTMLElement;
+  name?: string;
+  file?: ConversationFilePreview;
+  nativeStatus?: "opening" | "opened" | "error";
+  nativeError?: string;
+  imageUrl?: string;
+  error?: string;
+}
+export declare function createConversationFilePreview(options: {
+  host: HTMLElement;
+  documentRoot?: Document;
+  viewport?: Window;
+  onClose: () => void;
+  onOpenNative?: () => void | Promise<void>;
+}): {
+  render(state: FilePreviewViewState): void;
+  panel: HTMLElement;
+};

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-reasoning.d.ts

@@ -0,0 +1,9 @@
+type ReasoningMessage = { id: string; thinkingText?: string };
+
+export declare function createConversationReasoning(options?: {
+  documentRoot?: Document;
+}): {
+  beginRender(messages: ReasoningMessage[]): void;
+  createNode(message: ReasoningMessage): HTMLDetailsElement | null;
+  reset(): void;
+};

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

@@ -0,0 +1,46 @@
+import { applyTextDirection, renderMarkdown } from "../lib/text-format.js";
+
+export function createConversationReasoning({ documentRoot = document } = {}) {
+  const expandedMessages = new Set();
+  const renderedMessages = new Map();
+
+  function beginRender(messages) {
+    renderedMessages.clear();
+    const messageIds = new Set(messages.map((message) => message.id));
+    for (const id of expandedMessages) {
+      if (!messageIds.has(id)) expandedMessages.delete(id);
+    }
+  }
+
+  function createNode(message) {
+    if (!message.thinkingText) return null;
+    const details = documentRoot.createElement("details");
+    details.className = "conversation-reasoning";
+    details.open = expandedMessages.has(message.id);
+    const summary = documentRoot.createElement("summary");
+    summary.className = "conversation-reasoning-toggle";
+    summary.setAttribute("aria-label", message.thinkingText);
+    const content = documentRoot.createElement("div");
+    content.className = "thinking-body";
+    applyTextDirection(content, message.thinkingText);
+    content.innerHTML = renderMarkdown(message.thinkingText);
+    content.inert = !details.open;
+    summary.appendChild(content);
+    details.appendChild(summary);
+    renderedMessages.set(message.id, details);
+    details.addEventListener("toggle", () => {
+      if (renderedMessages.get(message.id) !== details) return;
+      content.inert = !details.open;
+      if (details.open) expandedMessages.add(message.id);
+      else expandedMessages.delete(message.id);
+    });
+    return details;
+  }
+
+  function reset() {
+    expandedMessages.clear();
+    renderedMessages.clear();
+  }
+
+  return { beginRender, createNode, reset };
+}

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

@@ -1,24 +1,23 @@
+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>,
-  ): HTMLElement | null;
   createNode(input: {
     requestId: string;
     cards: ReturnType<typeof buildConversationRoleCards>;
+    heading?: HTMLElement;
     timeline: HTMLElement;
     hasTimeline: boolean;
     onViewChange?: () => void;
   }): HTMLElement;
   isTimeline(requestId: string): boolean;
-  bindScroll(input: {
-    requestId: string;
-    body: HTMLElement;
-    details: HTMLDetailsElement;
-  }): () => boolean;
   forget(requestId: string): void;
   reset(): void;
 };