@abot-ai/runtime 1.3.1 → 1.4.0

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

@@ -0,0 +1,27 @@
+import { escapeAttribute, escapeHtml } from "../../lib/text-format.js";
+import { isConfigObject } from "./config-model.js";
+
+export function renderModelSetupEntry(runtime, models) {
+  const config = runtime?.config?.models?.providers;
+  const providers = isConfigObject(config) ? Object.entries(config) : [];
+  const cards = providers
+    .filter(([, provider]) => isConfigObject(provider))
+    .map(([id, provider]) => {
+      const count = models.filter(
+        (model) => model.config?.provider === id,
+      ).length;
+      return `<article class="config-provider-card">
+        <div><h3>${escapeHtml(id)}</h3><span>${escapeHtml(provider.type || "Provider")}</span></div>
+        <footer><span>${count} ${count === 1 ? "model" : "models"}</span>
+          <button type="button" data-config-action="add-model" data-provider-id="${escapeAttribute(id)}" aria-label="${escapeAttribute(`Add model to ${id}`)}">Add model</button>
+        </footer>
+      </article>`;
+    })
+    .join("");
+  return `<div class="config-model-setup-entry">
+    <header><div><h2>Models and providers</h2><p>Add a model using a saved connection or connect a new provider.</p></div>
+      <button type="button" data-config-action="add-model">Add model</button>
+    </header>
+    ${cards ? `<div class="config-provider-grid" aria-label="Configured providers">${cards}</div>` : ""}
+  </div>`;
+}

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

@@ -0,0 +1,28 @@
+export function malformedConfigRaw(file) {
+  if (file?.kind !== "model" && file?.kind !== "requestRunner") return undefined;
+  const raw = file.invalidJson?.raw;
+  return typeof raw === "string" ? raw : undefined;
+}
+
+export function configRequiresRawRepair(file, appliedRepair = false) {
+  if (appliedRepair) return false;
+  return malformedConfigRaw(file) !== undefined;
+}
+
+export function configRepairGuidance(file) {
+  if (malformedConfigRaw(file) === undefined) return "";
+  return "This saved file contains invalid JSON. Correct the JSON, then save the file. Reset restores the original text; other configuration files are preserved.";
+}
+
+export function selectMalformedConfigForRepair(state, files, configFileKey) {
+  const file = files.find((entry) => configRequiresRawRepair(entry));
+  if (!file) return;
+  state.selectedRawConfigKey = configFileKey(file);
+  state.activeCategory = "advanced";
+  state.rawPanelOpen = true;
+}
+
+export function configRepairSaveIsConfirmed(result) {
+  if (!result?.file) return false;
+  return !result.file.invalidJson;
+}

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

@@ -8,6 +8,7 @@ export function createConfigWorkspaceEvents({
   state,
   dom,
   eventTarget,
+  onAddModel,
   activateCategory,
   applyRawDraft,
   changeRawFile,
@@ -194,6 +195,10 @@ export function createConfigWorkspaceEvents({
       activateCategory(element.dataset.configCategory || "memory");
       return;
     }
+    if (action === "add-model") {
+      onAddModel?.({ providerId: element.dataset.providerId || undefined });
+      return;
+    }
     if (action === "select-model") {
       state.selectedConfigModelId = element.dataset.modelId || "";
       renderConfigDashboard();

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

@@ -1,3 +1,8 @@
+import {
+  malformedConfigRaw,
+  configRequiresRawRepair,
+  selectMalformedConfigForRepair,
+} from "./raw-config-repair.js";
 import { textOf } from "../../lib/text-format.js";
 import {
   cloneConfig,
@@ -27,6 +32,13 @@ export function createConfigWorkspaceMutations({
     const file = findConfigFile(kind, id);
     if (!file) return;
     const key = configFileKey(file);
+    if (configRequiresRawRepair(file, state.appliedJsonRepairKeys.has(key))) {
+      setWorkspaceStatus(
+        "Repair this file in Advanced → Raw JSON before editing its fields.",
+        "error-text",
+      );
+      return;
+    }
     const shouldFollowStructuredConfig = !hasRawDraftChanges(file);
     mutator(file.config);
     state.savedKeys.delete(key);
@@ -47,7 +59,8 @@ export function createConfigWorkspaceMutations({
     const baseline = state.baselinesByKey.get(key);
     if (!baseline) return;
     file.config = cloneConfig(baseline);
-    state.rawDraftsByKey.set(key, formattedConfig(baseline));
+    state.appliedJsonRepairKeys.delete(key);
+    state.rawDraftsByKey.set(key, malformedConfigRaw(file) ?? formattedConfig(baseline));
     state.savedKeys.delete(key);
     renderConfigDashboard();
   }
@@ -58,7 +71,8 @@ export function createConfigWorkspaceMutations({
       const baseline = state.baselinesByKey.get(key);
       if (!baseline) continue;
       file.config = cloneConfig(baseline);
-      state.rawDraftsByKey.set(key, formattedConfig(baseline));
+      state.appliedJsonRepairKeys.delete(key);
+      state.rawDraftsByKey.set(key, malformedConfigRaw(file) ?? formattedConfig(baseline));
     }
     state.savedKeys.clear();
     renderConfigDashboard();
@@ -105,6 +119,7 @@ export function createConfigWorkspaceMutations({
     if (!models.some((model) => model.id === state.selectedConfigModelId)) {
       state.selectedConfigModelId = models[0]?.id || "";
     }
+    selectMalformedConfigForRepair(state, configFileEntries(), configFileKey);
     ensureRawSelection();
     renderConfigDashboard();
   }
@@ -113,6 +128,7 @@ export function createConfigWorkspaceMutations({
     state.configDashboard = null;
     state.baselinesByKey.clear();
     state.rawDraftsByKey.clear();
+    state.appliedJsonRepairKeys.clear();
     state.savedKeys.clear();
     state.selectedRawConfigKey = "";
     dom.configDashboard.innerHTML = "";
@@ -146,6 +162,8 @@ export function createConfigWorkspaceMutations({
       const parsed = parseRawDraft(file);
       file.config = parsed;
       const key = configFileKey(file);
+      if (malformedConfigRaw(file) !== undefined)
+        state.appliedJsonRepairKeys.add(key);
       state.rawDraftsByKey.set(key, formattedConfig(parsed));
       state.savedKeys.delete(key);
       setWorkspaceStatus("");
@@ -170,7 +188,9 @@ export function createConfigWorkspaceMutations({
     }
     state.rawDraftsByKey.set(
       configFileKey(currentFile),
-      formattedConfig(currentFile.config),
+      configRequiresRawRepair(currentFile, state.appliedJsonRepairKeys.has(configFileKey(currentFile)))
+        ? malformedConfigRaw(currentFile)
+        : formattedConfig(currentFile.config),
     );
     return true;
   }

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

@@ -1,3 +1,4 @@
+import { configRepairSaveIsConfirmed } from "./raw-config-repair.js";
 import { textOf } from "../../lib/text-format.js";
 import {
   cloneConfig,
@@ -12,6 +13,8 @@ export function createConfigWorkspacePersistence({
   saveFile,
   memorySetup,
   memoryManagement,
+  pluginManagement,
+  hostConnection,
   recordControlEvent,
   applyRawDraft,
   baselineFor,
@@ -39,12 +42,12 @@ export function createConfigWorkspacePersistence({
     syncDashboardInteractivity();
   }
 
-  function externalRuntimeMutationBlockReason() {
+  function externalRuntimeMutationBlockReason(subject) {
     if (hasUnsavedChanges()) {
-      return "Save or reset configuration changes before changing Runtime memory settings.";
+      return `Save or reset configuration changes before changing Runtime ${subject}.`;
     }
     if (dashboardIsBusy() || state.savingKeys.size > 0) {
-      return "Wait for the current configuration operation before changing Runtime memory settings.";
+      return `Wait for the current configuration operation before changing Runtime ${subject}.`;
     }
     return "";
   }
@@ -89,6 +92,8 @@ export function createConfigWorkspacePersistence({
       if (configLoadIsStale(loadGeneration)) return false;
       replaceDashboard(payload);
       const memoryLoads = [memoryManagement.load()];
+      if (pluginManagement) memoryLoads.push(pluginManagement.load());
+      if (hostConnection) memoryLoads.push(hostConnection.load());
       if (options.loadMemorySetup !== false) {
         memoryLoads.unshift(memorySetup.load());
       }
@@ -127,8 +132,8 @@ export function createConfigWorkspacePersistence({
     }
   }
 
-  function beginExternalRuntimeMutation() {
-    const blockReason = externalRuntimeMutationBlockReason();
+  function beginExternalRuntimeMutation(subject = "memory settings") {
+    const blockReason = externalRuntimeMutationBlockReason(subject);
     if (blockReason) {
       setWorkspaceStatus(blockReason, "error-text");
       return false;
@@ -138,13 +143,15 @@ export function createConfigWorkspacePersistence({
     return true;
   }
 
-  async function refreshAfterExternalRuntimeMutation() {
+  async function refreshAfterExternalRuntimeMutation(
+    failurePrefix = "Memory updated; refresh required",
+  ) {
     if (!state.externalRuntimeMutationInFlight) return false;
     return loadRuntimeConfig({
       protectUnsaved: false,
       clearBeforeLoad: true,
       loadMemorySetup: false,
-      failurePrefix: "Memory updated; refresh required",
+      failurePrefix,
     });
   }
 
@@ -194,7 +201,18 @@ export function createConfigWorkspacePersistence({
     syncDashboardInteractivity();
     syncDirtyPresentation();
     try {
-      const result = await saveFile({ kind, id, config: configToSave });
+      const result = await saveFile({
+        kind,
+        id,
+        config: configToSave,
+        expectedRevision: file.revision,
+      });
+      if (typeof result?.file?.revision === "string")
+        file.revision = result.file.revision;
+      if (configRepairSaveIsConfirmed(result)) {
+        delete file.invalidJson;
+        state.appliedJsonRepairKeys?.delete(key);
+      }
       state.baselinesByKey.set(key, cloneConfig(configToSave));
       state.savedKeys.add(key);
       recordControlEvent({

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;
+};