gloomberb 0.15.2 → 0.15.4

package/src/renderers/electrobun/view/cli-pane-shot-entry.tsx

@@ -13,12 +13,14 @@ import { createAppRuntime } from "../../../core/app-runtime";
 import { JsonPersistence } from "../../../data/json-persistence";
 import { JsonTickerRepository } from "../../../data/json-ticker-repository";
 import type { DesktopPaneShotPayload } from "../../../cli/desktop-pane-shot";
+import {
+  SHOT_API_PROXY_PREFIX,
+  SHOT_HTTP_BRIDGE_PATH,
+  SHOT_MARKET_BRIDGE_PATH,
+} from "../../../cli/desktop-pane-shot-routes";
 import { instrumentFromTicker } from "../../../market-data/request-types";
-import { UiHostProvider, type RendererHost } from "../../../ui/host";
-import { WebInputHostProvider } from "./input-host";
-import { WebDialogHostProvider } from "./dialog-host";
-import { webNativeRenderer } from "./native-renderer";
-import { WebToastHostProvider } from "./toast-host";
+import type { RendererHost } from "../../../ui/host";
+import { DomHostProviders } from "./dom-host-providers";
 import { webUiHost } from "./ui-host";
 import { getLoadablePlugins } from "../../../plugins/catalog";
 import { setCurrentPluginTarget } from "../../../plugins/current-target";
@@ -51,9 +53,14 @@ import type {
 } from "../../../types/financials";
 import type { NewsCapability } from "../../../capabilities/types";
 import { setHttpFetchTransport } from "../../../utils/http-transport";
+import {
+  createProxyResponse,
+  toRequestEnvelope,
+  type HttpProxyResponseEnvelope,
+} from "../../../utils/http-proxy-response";
 import type { AppState } from "../../../core/state/app/state";
 import { canonicalTickerKey, parsePublicTickerKey } from "../../../utils/exchanges";
-import { hydrateValuationSeries } from "../../../plugins/builtin/market-valuation/cache";
+import { valuationCache } from "../../../plugins/builtin/market-valuation/cache";
 import { statsCache } from "../../../plugins/builtin/econ-statistics/cache";
 import { apiClient, setCloudApiFetchTransport } from "../../../api-client";
 import { createGloomberbCloudCapabilities, createGloomberbCloudProvider } from "../../../sources/gloomberb-cloud";
@@ -77,10 +84,6 @@ const SHOT_READY_STABLE_FRAMES = 10;
 // content contains the word "loading" (a changelog release note, a news
 // headline) wait forever and time out.
 const SHOT_LOADING_SELECTOR = "[data-gloom-status=\"loading\"]";
-const SHOT_API_PROXY_PREFIX = "/__gloom_cli_api__";
-// Served by the Bun process that owns this page, see src/cli/desktop-pane-shot.ts.
-const SHOT_MARKET_BRIDGE_PATH = "/__gloom_cli_market__";
-const SHOT_HTTP_BRIDGE_PATH = "/__gloom_cli_http__";
 const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
   "arrayBuffer",
   "blob",
@@ -164,57 +167,16 @@ function installShotCloudApiTransport(): void {
  * handshake still works.
  */
 function installShotHttpFetchTransport(): void {
-  setHttpFetchTransport(async (url, init = {}) => {
-    const headers: Record<string, string> = {};
-    new Headers(init.headers).forEach((value, name) => {
-      headers[name] = value;
-    });
+  setHttpFetchTransport(async (url, init) => {
     const response = await window.fetch(SHOT_HTTP_BRIDGE_PATH, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        url,
-        method: init.method,
-        headers,
-        body: typeof init.body === "string" ? init.body : undefined,
-      }),
+      body: JSON.stringify(await toRequestEnvelope(url, init)),
     });
-    const result = await response.json() as {
-      ok: boolean;
-      error?: string;
-      data?: {
-        status: number;
-        statusText: string;
-        headers: Record<string, string>;
-        setCookie: string[];
-        body: string;
-      };
-    };
+    const result = await response.json() as { ok: boolean; error?: string; data?: HttpProxyResponseEnvelope };
     if (!result.ok || !result.data) throw new Error(result.error ?? `Request failed: ${url}`);
-    return createShotHttpResponse(result.data);
-  });
-}
-
-function createShotHttpResponse(payload: {
-  status: number;
-  statusText: string;
-  headers: Record<string, string>;
-  setCookie: string[];
-  body: string;
-}): Response {
-  // Yahoo's crumb handshake reads set-cookie, which fetch hides from a page.
-  const headers = new Headers(payload.headers);
-  const originalGet = headers.get.bind(headers);
-  headers.get = ((name: string) => (
-    name.toLowerCase() === "set-cookie" ? payload.setCookie[0] ?? null : originalGet(name)
-  )) as Headers["get"];
-  (headers as Headers & { getSetCookie?: () => string[] }).getSetCookie = () => [...payload.setCookie];
-  const response = new Response(payload.body, {
-    status: payload.status,
-    statusText: payload.statusText,
+    return createProxyResponse(result.data);
   });
-  Object.defineProperty(response, "headers", { value: headers, configurable: true });
-  return response;
 }
 
 async function restoreShotCloudSession(): Promise<void> {
@@ -270,24 +232,10 @@ function isShotLoadingTextVisible(): boolean {
   return document.querySelector(SHOT_LOADING_SELECTOR) !== null;
 }
 
+/** A chart pane holds the capture by publishing `ready: false` on its chart-data node. */
 function hasUnresolvedChartData(): boolean {
   return (window.__GLOOM_CLI_SHOT_SEMANTIC_UI__ ?? []).some((node) => (
-    node.role === "chart-data"
-    && (
-      node.metadata?.kind === "stock-price"
-      || node.metadata?.kind === "price-comparison"
-      || node.metadata?.kind === "chart-composer"
-      || node.metadata?.kind === "realized-volatility"
-      || node.metadata?.kind === "volatility-indices"
-      || node.metadata?.kind === "options-scenario"
-    )
-    && (
-      node.metadata.loading === true
-      || (!["chart-composer", "realized-volatility", "volatility-indices", "options-scenario"].includes(String(node.metadata.kind)) && (
-        typeof node.metadata.projectedPointCount !== "number"
-        || node.metadata.projectedPointCount <= 0
-      ))
-    )
+    node.role === "chart-data" && node.metadata?.ready === false
   ));
 }
 
@@ -513,7 +461,7 @@ async function render() {
   installShotFetchTracker();
   installShotCloudApiTransport();
   installShotHttpFetchTransport();
-  hydrateValuationSeries(payload.valuationSeries ?? []);
+  valuationCache.hydrate(payload.valuationSeries ?? []);
   statsCache.hydrate(payload.statSeries ?? []);
   // This page is the desktop view's renderer, so installed plugins run here
   // the way they do in the app: compiled by the Bun process, evaluated from
@@ -535,27 +483,21 @@ async function render() {
     <TapeClientContext.Provider value={tapeClient}>
       <RemoteUiRegistryProvider>
         <CaptureShotSemanticUi />
-        <UiHostProvider ui={webUiHost} renderer={rendererHost} nativeRenderer={webNativeRenderer}>
-          <WebInputHostProvider>
-            <WebToastHostProvider>
-              <WebDialogHostProvider>
-                <AppProvider config={payload.config} desktopSnapshot={{
-                  config: payload.config,
-                  paneState: payload.paneState,
-                  focusedPaneId: payload.paneId,
-                  activePanel: "right",
-                  statusBarVisible: false,
-                }}>
-                  <HydratePayload payload={payload}>
-                    <ChartSnapshotContext.Provider value={payload.chartModel ?? null}>
-                      <ShotPane payload={payload} registry={services.pluginRegistry} />
-                    </ChartSnapshotContext.Provider>
-                  </HydratePayload>
-                </AppProvider>
-              </WebDialogHostProvider>
-            </WebToastHostProvider>
-          </WebInputHostProvider>
-        </UiHostProvider>
+        <DomHostProviders ui={webUiHost} renderer={rendererHost}>
+          <AppProvider config={payload.config} desktopSnapshot={{
+            config: payload.config,
+            paneState: payload.paneState,
+            focusedPaneId: payload.paneId,
+            activePanel: "right",
+            statusBarVisible: false,
+          }}>
+            <HydratePayload payload={payload}>
+              <ChartSnapshotContext.Provider value={payload.chartModel ?? null}>
+                <ShotPane payload={payload} registry={services.pluginRegistry} />
+              </ChartSnapshotContext.Provider>
+            </HydratePayload>
+          </AppProvider>
+        </DomHostProviders>
       </RemoteUiRegistryProvider>
     </TapeClientContext.Provider>,
   );

package/src/renderers/electrobun/view/context-menu.ts

@@ -1,19 +1,18 @@
 import type { ContextMenuActionItem, ContextMenuItem, ContextMenuRoleItem } from "../../../types/context-menu";
-import { ELECTROBUN_CONTEXT_MENU_ACTION, type DesktopContextMenuItem } from "../shared/protocol";
+import {
+  ELECTROBUN_CONTEXT_MENU_ACTION,
+  type ContextMenuSelectMessage,
+  type DesktopContextMenuItem,
+} from "../shared/protocol";
 
 export interface PreparedDesktopContextMenu {
   menu: DesktopContextMenuItem[];
   actions: Map<string, () => void | Promise<void>>;
 }
 
-export interface DesktopContextMenuSelectMessage {
-  requestId: string;
-  itemId: string;
-}
-
 type ContextMenuSelectSubscribe = (
   requestId: string,
-  listener: (message: DesktopContextMenuSelectMessage) => void,
+  listener: (message: ContextMenuSelectMessage) => void,
 ) => () => void;
 
 type ContextMenuTimeout = ReturnType<typeof globalThis.setTimeout>;

package/src/renderers/electrobun/view/data-table/dom.ts

@@ -9,8 +9,7 @@ import {
 } from "react";
 import { TextAttributes, type ScrollBoxRenderable } from "../../../../ui/host";
 import type { DataTableColumn } from "../../../../components/ui/data-table";
-import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
-import { chromeRowPx } from "../../../../theme/font-scale";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH, chromeRowPx } from "../../../../theme/font-scale";
 
 export const TABLE_INLINE_PADDING_PX = 8;
 

package/src/renderers/electrobun/view/data-table/index.tsx

@@ -10,21 +10,21 @@ import {
   type CSSProperties,
 } from "react";
 import { EmptyState } from "../../../../components/ui/status";
-import { useAppDispatch, usePaneInstance } from "../../../../state/app/context";
+import { usePaneInstance } from "../../../../state/app/context";
 import { useRafCallback } from "../../../../react/use-raf-callback";
 import { measurePerf } from "../../../../utils/perf-marks";
 import type {
   DataTableColumn,
   DataTableProps,
-  DataTableVisibleRange,
 } from "../../../../components/ui/data-table";
-import { resolveDataTableVisibleRange } from "../../../../components/ui/data-table/visible-range";
+import { resolveDataTableScrollTop } from "../../../../components/ui/data-table/visible-range";
+import { useFocusOwningPane, useVisibleRangeEmitter } from "../../../../components/ui/data-table/hooks";
 import {
   buildTableGridTemplateColumns,
   getTableWidth,
   hasMeaningfulTableHorizontalOverflow,
 } from "../../../../components/ui/table-layout";
-import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../../theme/font-scale";
 import { useScrollbarActivity } from "../scrollbar-activity";
 import { useHorizontalScrollEdges } from "../host/overflow-fade";
 import {
@@ -89,10 +89,12 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   onTableMouseDown,
   visibleRangeKey,
   onVisibleRangeChange,
+  visibleRangeBuffer,
   onRowMouseDown,
   onRowContextMenu,
   rowContextMenuSurface = false,
   renderCell,
+  selectedTextOverridesCellColor = false,
   getRowVersion,
   renderSectionHeader,
   getRowBackgroundColor,
@@ -111,13 +113,9 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   scrollToIndexAlign = "nearest",
   scrollToIndexVersion = 0,
 }: DataTableProps<T, C>) {
-  const dispatch = useAppDispatch();
   const paneInstanceId = usePaneInstance()?.instanceId ?? null;
+  const focusPane = useFocusOwningPane();
   const bodyElementRef = useRef<HTMLDivElement | null>(null);
-  const lastVisibleRangeRef = useRef<{
-    key: string | number | undefined;
-    range: DataTableVisibleRange;
-  } | null>(null);
   const headerHorizontal = useScrollbarState(false);
   const headerVertical = useScrollbarState(false);
   const bodyHorizontal = useScrollbarState(showHorizontalScrollbar);
@@ -140,31 +138,21 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     onActivate?.(item, index);
   }, [onActivate]);
 
-  const focusPane = useCallback(() => {
-    if (!paneInstanceId) return;
-    dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
-  }, [dispatch, paneInstanceId]);
-
+  const reportVisibleRange = useVisibleRangeEmitter({
+    itemCount: items.length,
+    visibleRangeKey,
+    visibleRangeBuffer,
+    onVisibleRangeChange,
+  });
   const emitVisibleRange = useCallback(() => {
-    if (!onVisibleRangeChange) return;
     const element = bodyElementRef.current;
     if (!element) return;
-    const range = resolveDataTableVisibleRange({
-      itemCount: items.length,
+    reportVisibleRange({
       rowSize: WEB_CELL_HEIGHT,
       scrollOffset: element.scrollTop,
       viewportSize: Math.max(0, element.clientHeight - tableHeaderPx()),
     });
-    const previous = lastVisibleRangeRef.current;
-    if (
-      previous !== null
-      && previous.key === visibleRangeKey
-      && previous.range.start === range.start
-      && previous.range.end === range.end
-    ) return;
-    lastVisibleRangeRef.current = { key: visibleRangeKey, range };
-    onVisibleRangeChange(range);
-  }, [items.length, onVisibleRangeChange, visibleRangeKey]);
+  }, [reportVisibleRange]);
   const handleBodyScrollActivity = useCallback(() => {
     onBodyScrollActivity();
     emitVisibleRange();
@@ -261,14 +249,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     if (!element) return;
     const viewportRows = Math.max(1, Math.floor((element.clientHeight - tableHeaderPx()) / WEB_CELL_HEIGHT));
     const currentTop = toCellY(element.scrollTop);
-    let nextTop = currentTop;
-    if (scrollToIndexAlign === "center") {
-      nextTop = Math.max(0, targetIndex - Math.floor(viewportRows / 2));
-    } else if (targetIndex < currentTop) {
-      nextTop = targetIndex;
-    } else if (targetIndex >= currentTop + viewportRows) {
-      nextTop = targetIndex - viewportRows + 1;
-    }
+    const nextTop = resolveDataTableScrollTop(targetIndex, currentTop, viewportRows, items.length, scrollToIndexAlign);
     if (nextTop !== currentTop) {
       element.scrollTop = nextTop * WEB_CELL_HEIGHT;
       // A controlled scroll is navigation requested by the app. Reporting it
@@ -463,6 +444,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
                     rowContextMenuSurface={rowContextMenuSurface}
                     rowVersion={getRowVersion?.(item, row.index)}
                     selected={selected}
+                    selectedTextOverridesCellColor={selectedTextOverridesCellColor}
                   />
                 );
               }),

package/src/renderers/electrobun/view/data-table/row.tsx

@@ -11,7 +11,7 @@ import type {
 import { tableColumnLeadGap } from "../../../../components/ui/table-layout";
 import { WebIcon } from "../desktop/icons";
 import { useFrozenColumnInsets } from "./frozen-column";
-import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../../theme/font-scale";
 import {
   CSS_BG,
   CSS_PANEL,
@@ -197,6 +197,7 @@ function WebDataTableRowInner<
   rowStart,
   rowContextMenuSurface,
   selected,
+  selectedTextOverridesCellColor,
 }: {
   /** Only compared by the row memo; see `getRowVersion`. */
   rowVersion?: unknown;
@@ -223,6 +224,7 @@ function WebDataTableRowInner<
   rowStart: number;
   rowContextMenuSurface: boolean;
   selected: boolean;
+  selectedTextOverridesCellColor: boolean;
 }) {
   const { ref, insets } = useFrozenColumnInsets(freezeFirstColumn === true, scrollLeft, viewportWidth, columns, columnGap * WEB_CELL_WIDTH);
   const sectionHeader: DataTableSectionHeader | null =
@@ -392,7 +394,9 @@ function WebDataTableRowInner<
                 title={cell.text}
                 style={clippedCellTextStyle(
                   column,
-                  cell.color ?? (selected ? CSS_SELECTED_TEXT : CSS_TEXT),
+                  selected && (cell.color === undefined || (selectedTextOverridesCellColor && !cell.keepColorWhenSelected))
+                    ? CSS_SELECTED_TEXT
+                    : cell.color ?? CSS_TEXT,
                   cell.attributes ?? TextAttributes.NONE,
                 )}
               >

package/src/renderers/electrobun/view/desktop/controls.tsx

@@ -135,7 +135,7 @@ function checkboxCheckImage(): string {
  * The one checkbox square on the desktop: the kit Checkbox, query-bar toggles
  * and multi-select menu items all draw it through this style.
  */
-export function checkboxBoxStyle(
+function checkboxBoxStyle(
   colors: ThemeColors,
   { checked, active = false, size = 14 }: { checked: boolean; active?: boolean; size?: number },
 ): CSSProperties {

package/src/renderers/electrobun/view/desktop/popover.tsx

@@ -8,6 +8,8 @@ import { useThemeColors } from "../../../../theme/theme-context";
 
 const VIEWPORT_MARGIN = 10;
 const POPOVER_GAP = 6;
+/** `.gloom-popover` in styles.css: above dialogs and toasts. */
+const POPOVER_Z_INDEX = 10_001;
 
 interface PopoverPosition {
   left: number;
@@ -19,6 +21,24 @@ function cssSize(value: number | string | undefined): number | string | undefine
   return typeof value === "number" ? `${value}px` : value;
 }
 
+/**
+ * The popover is portalled to <body>, so its z-index only competes in the root
+ * stacking context. A trigger inside a surface stacked above the popover layer
+ * (the desktop command bar sits at the top of the z-index range) would open
+ * its menu underneath that surface. Lift the popover to the highest z-index on
+ * the trigger's ancestor chain instead; the portal comes later in the
+ * document, so it still paints on top when the two are equal. Returns
+ * undefined when the stylesheet layer is already high enough.
+ */
+function resolvePopoverZIndex(anchor: Element | null): number | undefined {
+  let highest = POPOVER_Z_INDEX;
+  for (let element = anchor; element; element = element.parentElement) {
+    const zIndex = Number.parseInt(window.getComputedStyle(element).zIndex, 10);
+    if (zIndex > highest) highest = zIndex;
+  }
+  return highest > POPOVER_Z_INDEX ? highest : undefined;
+}
+
 export function WebPopover({
   open,
   onOpenChange,
@@ -36,6 +56,7 @@ export function WebPopover({
   const anchorRef = useRef<HTMLDivElement | null>(null);
   const popoverRef = useRef<HTMLDivElement | null>(null);
   const [position, setPosition] = useState<PopoverPosition>({ left: 0, top: 0, visible: false });
+  const [zIndex, setZIndex] = useState<number | undefined>(undefined);
 
   const updatePosition = useCallback(() => {
     const anchor = anchorRef.current;
@@ -97,6 +118,7 @@ export function WebPopover({
       setPosition((current) => current.visible ? { ...current, visible: false } : current);
       return;
     }
+    setZIndex(resolvePopoverZIndex(anchorRef.current));
     updatePosition();
     const frame = window.requestAnimationFrame(updatePosition);
     window.addEventListener("resize", updatePosition);
@@ -162,6 +184,7 @@ export function WebPopover({
           style={{
             left: position.left,
             top: position.top,
+            zIndex,
             visibility: position.visible ? "visible" : "hidden",
             minWidth: cssSize(minWidth),
             maxWidth: cssSize(maxWidth),

package/src/renderers/electrobun/view/desktop/window/bridge.ts

@@ -5,7 +5,7 @@ import type {
   DesktopThemePreviewState,
   DesktopWindowBridge,
 } from "../../../../../types/desktop-window";
-import { backendRequest, getElectrobunBackendInitSnapshot, onDesktopDockPreview, onDesktopState, onDesktopThemePreview } from "../../backend-rpc";
+import { backendRequest, getElectrobunBackendInitSnapshot, onBackendMessage } from "../../backend-rpc";
 import { detachedSnapshotKey, prepareDetachedSnapshot } from "./snapshot";
 
 export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: string): DesktopWindowBridge {
@@ -45,7 +45,7 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
       await backendRequest("desktop.focusDetachedPane", { paneId: targetPaneId });
     },
     subscribeState(listener: (snapshot: DesktopSharedStateSnapshot) => void) {
-      return onDesktopState((message) => {
+      return onBackendMessage("desktop.state", (message) => {
         if (kind === "detached" && paneId) {
           const nextKey = detachedSnapshotKey(message.snapshot, paneId);
           if (nextKey === lastDetachedSnapshotKey) return;
@@ -57,12 +57,12 @@ export function createDesktopWindowBridge(kind: "main" | "detached", paneId?: st
       });
     },
     subscribeDockPreview(listener: (preview: DesktopDockPreviewState) => void) {
-      return onDesktopDockPreview((message) => {
+      return onBackendMessage("desktop.dockPreview", (message) => {
         listener(message.preview);
       });
     },
     subscribeThemePreview(listener: (preview: DesktopThemePreviewState) => void) {
-      return onDesktopThemePreview((message) => {
+      return onBackendMessage("desktop.themePreview", (message) => {
         listener(message.preview);
       });
     },

package/src/renderers/electrobun/view/dialog-host.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource react */
-import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
-import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
+import { useEffect, useRef, type ReactNode } from "react";
+import { DialogHostProvider } from "../../../ui/dialog";
+import { useDialogStack } from "../../../ui/dialog-stack";
 import { blendHex } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { isEditableTarget, isInsideDialogSurface } from "./host/focus-scope";
@@ -10,20 +11,6 @@ interface DialogState {
   content: ReactNode | ((context: { dialogId: string; dismiss(): void; resolve(value: unknown): void }) => ReactNode);
   closeOnClickOutside: boolean;
   returnFocus: HTMLElement | null;
-  resolve(value: unknown): void;
-}
-
-let nextDialogId = 1;
-
-export function isDialogDismissKey(event: Pick<KeyboardEvent, "key" | "isComposing">): boolean {
-  return !event.isComposing && (event.key === "Escape" || event.key === "Esc");
-}
-
-export function shouldFocusDialogContainer(
-  dialog: Pick<HTMLElement, "contains">,
-  activeElement: Element | null,
-): boolean {
-  return activeElement === null || !dialog.contains(activeElement);
 }
 
 /**
@@ -33,28 +20,12 @@ export function shouldFocusDialogContainer(
  */
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
   const colors = useThemeColors();
-  const [dialogs, setDialogs] = useState<DialogState[]>([]);
-  const dialogsRef = useRef<DialogState[]>([]);
   const dialogElementsRef = useRef(new Map<string, HTMLDivElement>());
   const dialogBorder = blendHex(colors.border, colors.borderFocused, 0.18);
   const dialogBg = blendHex(colors.panel, colors.bg, 0.12);
-
-  const close = useCallback((id: string, value?: unknown) => {
-    const current = dialogsRef.current.find((dialog) => dialog.id === id);
-    if (!current) return;
-    const next = dialogsRef.current.filter((dialog) => dialog.id !== id);
-    dialogsRef.current = next;
-    setDialogs(next);
-    current.resolve(value);
-    queueMicrotask(() => {
-      if (current.returnFocus?.isConnected) {
-        current.returnFocus.focus({ preventScroll: true });
-      }
-    });
-  }, []);
-
-  const open = useCallback(function openDialog<T>(options: Record<string, unknown>): Promise<T> {
-    return new Promise<T>((resolve) => {
+  const { dialogs, close, api } = useDialogStack<DialogState>({
+    idPrefix: "web-dialog",
+    createEntry: (id, _kind, options) => {
       const activeElement = document.activeElement;
       // Focus goes back to a field or to the dialog underneath. A button a
       // pointer pressed in a pane would take the next Enter for itself.
@@ -62,17 +33,21 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
         && (isEditableTarget(activeElement) || isInsideDialogSurface(activeElement))
         ? activeElement
         : null;
-      const next: DialogState = {
-        id: `web-dialog-${nextDialogId++}`,
+      return {
+        id,
         content: options.content as DialogState["content"],
         closeOnClickOutside: options.closeOnClickOutside === true,
         returnFocus,
-        resolve: (value) => resolve(value as T),
       };
-      dialogsRef.current = [...dialogsRef.current, next];
-      setDialogs(dialogsRef.current);
-    });
-  }, []);
+    },
+    onClosed: (dialog) => {
+      queueMicrotask(() => {
+        if (dialog.returnFocus?.isConnected) {
+          dialog.returnFocus.focus({ preventScroll: true });
+        }
+      });
+    },
+  });
 
   const topmost = dialogs[dialogs.length - 1] ?? null;
 
@@ -80,10 +55,8 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
     if (!topmost) return;
     const frame = requestAnimationFrame(() => {
       const dialogElement = dialogElementsRef.current.get(topmost.id);
-      if (
-        dialogElement
-        && shouldFocusDialogContainer(dialogElement, document.activeElement)
-      ) {
+      // Leave focus alone when the dialog content already owns it.
+      if (dialogElement && !dialogElement.contains(document.activeElement)) {
         dialogElement.focus({ preventScroll: true });
       }
     });
@@ -93,7 +66,8 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
   useEffect(() => {
     if (!topmost) return;
     const dismissOnEscape = (event: KeyboardEvent) => {
-      if (!isDialogDismissKey(event)) return;
+      // Older WebViews report Escape as "Esc".
+      if (event.isComposing || (event.key !== "Escape" && event.key !== "Esc")) return;
       // A menu open inside the dialog (a select field) closes first; the next
       // Esc closes the dialog.
       if (document.querySelector(".gloom-popover")) return;
@@ -105,17 +79,6 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
     return () => window.removeEventListener("keydown", dismissOnEscape, true);
   }, [close, topmost?.id]);
 
-  // Settle anything still open if the host goes away.
-  useEffect(() => () => {
-    for (const dialog of dialogsRef.current) dialog.resolve(undefined);
-    dialogsRef.current = [];
-  }, []);
-
-  const api = useMemo<DialogApi>(() => ({
-    alert: open,
-    prompt: open,
-  }), [open]);
-
   return (
     <DialogHostProvider dialog={api} isOpen={dialogs.length > 0}>
       {children}