@abot-ai/runtime 1.3.0 → 1.4.0

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

@@ -1,3 +1,8 @@
+import {
+  configRepairGuidance,
+  configRequiresRawRepair,
+} from "./raw-config-repair.js";
+import { renderModelSetupEntry } from "./model-setup-entry.js";
 import { escapeHtml, textOf } from "../../lib/text-format.js";
 import { CONFIG_CATEGORIES } from "./config-model.js";
 
@@ -7,6 +12,8 @@ export function createConfigWorkspaceView({
   eventTarget,
   memorySetup,
   memoryManagement,
+  pluginManagement,
+  hostConnection,
   configFileEntries,
   configFileKey,
   countObjectKeys,
@@ -52,6 +59,13 @@ export function createConfigWorkspaceView({
     if (!requestRunner) {
       return '<div class="empty-state compact">No request runner config found</div>';
     }
+    if (
+      configRequiresRawRepair(
+        requestRunner,
+        state.appliedJsonRepairKeys.has(configFileKey(requestRunner)),
+      )
+    )
+      return '<p class="error-text">Repair this linked file in Advanced → Raw JSON before editing pipeline settings.</p>';
     return renderStepsEditor(
       requestRunner,
       "Request pipeline",
@@ -141,6 +155,8 @@ export function createConfigWorkspaceView({
         ${renderCategoryTab("memory", "Memory")}
         ${renderCategoryTab("pipeline", "Pipeline")}
         ${renderCategoryTab("models", "Models")}
+        ${renderCategoryTab("plugins", "Plugins")}
+        ${renderCategoryTab("computer", "Connected computer")}
         ${renderCategoryTab("advanced", "Advanced")}
       </nav>
       <div class="config-category-panels">
@@ -155,12 +171,15 @@ export function createConfigWorkspaceView({
         ${renderCategoryPanel(
           "models",
           `<section class="config-section models-section">
+            ${renderModelSetupEntry(runtime, models)}
             <div class="config-model-layout">
               ${renderModelList(models)}
               ${renderSelectedModelEditor(models)}
             </div>
           </section>`,
         )}
+        ${renderCategoryPanel("plugins", "<div data-plugin-management></div>")}
+        ${renderCategoryPanel("computer", "<div data-system-host-connection></div>")}
         ${renderCategoryPanel("advanced", renderConfigMap())}
       </div>
     `;
@@ -170,6 +189,13 @@ export function createConfigWorkspaceView({
     memoryManagement.mount(
       dom.configDashboard.querySelector("[data-long-term-memory-management]"),
     );
+    pluginManagement?.mount(
+      dom.configDashboard.querySelector("[data-plugin-management]"),
+    );
+    hostConnection?.mount(
+      dom.configDashboard.querySelector("[data-system-host-connection]"),
+    );
+    hostConnection?.setActive(state.activeCategory === "computer");
     syncDirtyPresentation({ syncRawEditor: true });
   }
 
@@ -195,6 +221,7 @@ export function createConfigWorkspaceView({
     if (!CONFIG_CATEGORIES.includes(category)) return;
     state.activeCategory = category;
     syncActiveCategory();
+    hostConnection?.setActive(category === "computer");
     if (options.focus) {
       dom.configDashboard
         .querySelector(`[data-config-category="${category}"]`)
@@ -202,6 +229,26 @@ export function createConfigWorkspaceView({
     }
   }
 
+  function selectModel(profileId) {
+    const models = state.configDashboard?.files?.models || [];
+    if (!models.some((model) => model.id === profileId)) return false;
+    state.selectedConfigModelId = profileId;
+    state.activeCategory = "models";
+    renderConfigDashboard();
+    return true;
+  }
+
+  function focusSelectedModel() {
+    const buttons = Array.from(
+      dom.configDashboard.querySelectorAll("[data-model-id]"),
+    );
+    const selected = buttons.find(
+      (button) => button.dataset.modelId === state.selectedConfigModelId,
+    );
+    selected?.focus?.({ preventScroll: true });
+    selected?.scrollIntoView?.({ block: "nearest" });
+  }
+
   function syncFileControls() {
     for (const file of configFileEntries()) {
       const key = configFileKey(file);
@@ -260,6 +307,13 @@ export function createConfigWorkspaceView({
     const status = dom.configDashboard.querySelector(".config-raw-status");
     const file = selectedRawConfigFile();
     if (!file) return;
+    const guidance = dom.configDashboard.querySelector(
+      "#configRawRepairGuidance",
+    );
+    if (guidance) {
+      guidance.textContent = configRepairGuidance(file);
+      guidance.hidden = !guidance.textContent;
+    }
     if (select) select.value = state.selectedRawConfigKey;
     if (shouldSynchronizeRawEditor(editor, options)) {
       editor.value = rawDraftFor(file);
@@ -291,6 +345,8 @@ export function createConfigWorkspaceView({
 
   return {
     activateCategory,
+    selectModel,
+    focusSelectedModel,
     renderConfigDashboard,
     setWorkspaceStatus,
     syncDashboardInteractivity,

package/dist/src/web-ui/app/components/config-workspace.js

@@ -23,6 +23,9 @@ export function createConfigWorkspace({
   saveFile,
   memorySetup,
   memoryManagement,
+  pluginManagement,
+  hostConnection,
+  onAddModel,
   recordControlEvent,
   confirmDiscard = (message) => window.confirm(message),
   eventTarget = window,
@@ -81,6 +84,8 @@ export function createConfigWorkspace({
     eventTarget,
     memorySetup,
     memoryManagement,
+    pluginManagement,
+    hostConnection,
     configFileEntries: workspaceModel.configFileEntries,
     configFileKey: workspaceModel.configFileKey,
     countObjectKeys: fieldRendering.countObjectKeys,
@@ -127,6 +132,8 @@ export function createConfigWorkspace({
     saveFile,
     memorySetup,
     memoryManagement,
+    pluginManagement,
+    hostConnection,
     recordControlEvent,
     applyRawDraft: workspaceMutations.applyRawDraft,
     baselineFor: workspaceModel.baselineFor,
@@ -146,6 +153,7 @@ export function createConfigWorkspace({
   });
 
   const workspaceEvents = createConfigWorkspaceEvents({
+    onAddModel,
     state,
     dom,
     eventTarget,
@@ -174,6 +182,7 @@ export function createConfigWorkspace({
   });
 
   return {
+    activateCategory: workspaceView.activateCategory,
     beginExternalRuntimeMutation:
       workspacePersistence.beginExternalRuntimeMutation,
     bind: workspaceEvents.bind,
@@ -181,6 +190,8 @@ export function createConfigWorkspace({
     endExternalRuntimeMutation: workspacePersistence.endExternalRuntimeMutation,
     hasUnsavedChanges: workspaceModel.hasUnsavedChanges,
     load: workspacePersistence.loadRuntimeConfig,
+    selectModel: workspaceView.selectModel,
+    focusSelectedModel: workspaceView.focusSelectedModel,
     prepareDiscardChanges: workspaceMutations.prepareDiscardChanges,
     refreshAfterExternalRuntimeMutation:
       workspacePersistence.refreshAfterExternalRuntimeMutation,

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

@@ -1,3 +1,4 @@
+import type { ConversationFileReference } from "../lib/conversation-file-reference.js";
 import type { buildConversationRoleCards } from "../lib/conversation-role-model.js";
 import type { ConversationSourcesGroup } from "../lib/web-sources.js";
 import type { ConversationToolAction } from "../lib/tool-activity-model.js";
@@ -72,6 +73,11 @@ export declare function pinConversationActivityToLatest(input?: {
 
 export declare function createConversationActivity(options?: {
   documentRoot?: Document;
+  canOpenFile?: () => boolean;
+  onOpenFile?: (
+    reference: ConversationFileReference,
+    opener: HTMLElement,
+  ) => unknown;
 }): {
   createNode(input?: ConversationActivityInput): HTMLElement | null;
   forget(requestId: unknown): void;

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

@@ -290,8 +290,16 @@ export function pinConversationActivityToLatest({
   return true;
 }
 
-export function createConversationActivity({ documentRoot = document } = {}) {
-  const roleCards = createConversationRoleCards({ documentRoot });
+export function createConversationActivity({
+  documentRoot = document,
+  onOpenFile,
+  canOpenFile,
+} = {}) {
+  const roleCards = createConversationRoleCards({
+    documentRoot,
+    onOpenFile,
+    canOpenFile,
+  });
   const sourceCards = createConversationSources({ documentRoot });
   const manuallyCollapsedStreamingRequests = new Set();
   const manuallyExpandedCompletedRequests = new Set();

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

@@ -0,0 +1,33 @@
+import { canViewConversationFile } from "../lib/conversation-file-reference.js";
+
+export function createConversationFileAction({
+  documentRoot,
+  requestId,
+  action,
+  onOpenFile,
+  isCurrentAction,
+  canOpenFile = () => true,
+}) {
+  if (typeof onOpenFile !== "function") return null;
+  if (!canOpenFile()) return null;
+  if (!canViewConversationFile(action, requestId)) return null;
+  const button = documentRoot.createElement("button");
+  button.type = "button";
+  button.className = "conversation-tool-target conversation-tool-file-action";
+  button.setAttribute("dir", "auto");
+  button.textContent = action.target || action.fileReference.output.logicalPath;
+  button.title = button.textContent;
+  button.dataset.requestId = requestId;
+  button.dataset.executionId = action.fileReference.executionId;
+  button.setAttribute(
+    "aria-label",
+    "View current file " + action.fileReference.output.relativePath,
+  );
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isCurrentAction()) return;
+    void onOpenFile(action.fileReference, button);
+  });
+  return button;
+}

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

@@ -0,0 +1,12 @@
+export declare function createConversationFileFocus(options: {
+  panel: HTMLElement;
+  backdrop: HTMLElement;
+  host: HTMLElement;
+  closeButton: HTMLButtonElement;
+  documentRoot: Document;
+  viewport: Window;
+  onClose: () => void;
+}): {
+  show(opener?: HTMLElement): void;
+  hide(restoreFocus: boolean): void;
+};

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

@@ -0,0 +1,149 @@
+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 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-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>,