gloomberb 0.9.9 → 0.10.0

package/src/renderers/electrobun/view/dialog-host.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from "bun:test";
+import { isDialogDismissKey, shouldFocusDialogContainer } from "./dialog-host";
+
+describe("desktop dialog focus and dismissal", () => {
+  test("dismisses on Escape, including legacy WebView key names", () => {
+    expect(isDialogDismissKey({ key: "Escape", isComposing: false })).toBe(true);
+    expect(isDialogDismissKey({ key: "Esc", isComposing: false })).toBe(true);
+    expect(isDialogDismissKey({ key: "Enter", isComposing: false })).toBe(false);
+    expect(isDialogDismissKey({ key: "Escape", isComposing: true })).toBe(false);
+  });
+
+  test("preserves focus already owned by dialog content", () => {
+    const child = {} as Element;
+    const outside = {} as Element;
+    const dialog = {
+      contains(element: Node | null) {
+        return element === child;
+      },
+    };
+
+    expect(shouldFocusDialogContainer(dialog, child)).toBe(false);
+    expect(shouldFocusDialogContainer(dialog, outside)).toBe(true);
+    expect(shouldFocusDialogContainer(dialog, null)).toBe(true);
+  });
+});

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

@@ -1,6 +1,6 @@
 /// <reference lib="dom" />
 /** @jsxImportSource react */
-import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { DialogHostProvider, type DialogApi } from "../../../ui/dialog";
 import { blendHex, colors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
@@ -8,33 +8,86 @@ import { useThemeColors } from "../../../theme/theme-context";
 interface DialogState {
   id: string;
   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);
+}
+
 export function WebDialogHostProvider({ children }: { children: ReactNode }) {
   useThemeColors();
   const [dialogState, setDialogState] = useState<DialogState | null>(null);
+  const dialogStateRef = useRef<DialogState | null>(null);
+  const dialogElementRef = useRef<HTMLDivElement | null>(null);
   const dialogBorder = blendHex(colors.border, colors.borderFocused, 0.18);
   const dialogBg = blendHex(colors.panel, colors.bg, 0.12);
 
   const close = useCallback((value?: unknown) => {
-    setDialogState((current) => {
-      current?.resolve(value);
-      return null;
+    const current = dialogStateRef.current;
+    if (!current) return;
+    dialogStateRef.current = null;
+    setDialogState(null);
+    current.resolve(value);
+    queueMicrotask(() => {
+      if (current.returnFocus?.isConnected) {
+        current.returnFocus.focus({ preventScroll: true });
+      }
     });
   }, []);
 
-  const open = useCallback((options: Record<string, unknown>) => (
-    new Promise<unknown>((resolve) => {
-      setDialogState({
+  const open = useCallback(function openDialog<T>(options: Record<string, unknown>): Promise<T> {
+    return new Promise<T>((resolve) => {
+      const activeElement = document.activeElement;
+      const next: DialogState = {
         id: `web-dialog-${nextDialogId++}`,
         content: options.content as DialogState["content"],
-        resolve,
-      });
-    })
-  ), []);
+        closeOnClickOutside: options.closeOnClickOutside === true,
+        returnFocus: activeElement instanceof HTMLElement ? activeElement : null,
+        resolve: (value) => resolve(value as T),
+      };
+      dialogStateRef.current?.resolve(undefined);
+      dialogStateRef.current = next;
+      setDialogState(next);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!dialogState) return;
+    const frame = requestAnimationFrame(() => {
+      const dialogElement = dialogElementRef.current;
+      if (
+        dialogElement
+        && shouldFocusDialogContainer(dialogElement, document.activeElement)
+      ) {
+        dialogElement.focus({ preventScroll: true });
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [dialogState?.id]);
+
+  useEffect(() => {
+    if (!dialogState) return;
+    const dismissOnEscape = (event: KeyboardEvent) => {
+      if (!isDialogDismissKey(event)) return;
+      event.preventDefault();
+      event.stopPropagation();
+      close(undefined);
+    };
+    window.addEventListener("keydown", dismissOnEscape, true);
+    return () => window.removeEventListener("keydown", dismissOnEscape, true);
+  }, [close, dialogState?.id]);
 
   const api = useMemo<DialogApi>(() => ({
     alert: open,
@@ -48,10 +101,20 @@ export function WebDialogHostProvider({ children }: { children: ReactNode }) {
         <div
           className="gloom-dialog-backdrop"
           onMouseDown={(event) => {
-            if (event.target === event.currentTarget) close(undefined);
+            if (
+              dialogState.closeOnClickOutside
+              && event.target === event.currentTarget
+            ) {
+              close(undefined);
+            }
           }}
         >
           <div
+            ref={dialogElementRef}
+            role="dialog"
+            aria-modal="true"
+            aria-label="Dialog"
+            tabIndex={-1}
             className="gloom-dialog"
             style={{
               borderColor: dialogBorder,

package/src/renderers/electrobun/view/host/box.tsx

@@ -130,6 +130,10 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       document.addEventListener("mouseup", handleDocumentUp);
     };
 
+    const handleMouseDownCapture = (event: MouseEvent) => {
+      callMouseHandler(propsRef.current.onMouseDownCapture, event, "down");
+    };
+
     const handleWheel = (event: ReactWheelEvent<HTMLDivElement>) => {
       callMouseHandler(propsRef.current.onMouseScroll, event, "scroll");
     };
@@ -148,6 +152,7 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
         {...cleanDomProps(props)}
         data-gloom-hover-bg={hoverBackgroundColor ? "true" : undefined}
         ref={elementRef}
+        onMouseDownCapture={typeof props.onMouseDownCapture === "function" ? handleMouseDownCapture : undefined}
         onMouseDown={handleMouseDown}
         onMouseOver={handleMouseOver}
         onMouseMove={(event) => scheduleFrameMouseHandler(event, "move")}

package/src/renderers/electrobun/view/host/chart-surface.tsx

@@ -2,6 +2,7 @@
 /** @jsxImportSource react */
 import {
   forwardRef,
+  memo,
   useEffect,
   useRef,
   type CSSProperties,
@@ -11,7 +12,7 @@ import {
 import type { BitmapSurface, BoxRenderable, ChartCrosshairOverlay } from "../../../../ui/host";
 import { WebBox } from "./box";
 
-function CanvasBitmap({ bitmap }: { bitmap: BitmapSurface }) {
+const CanvasBitmap = memo(function CanvasBitmap({ bitmap }: { bitmap: BitmapSurface }) {
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
 
   useEffect(() => {
@@ -19,10 +20,10 @@ function CanvasBitmap({ bitmap }: { bitmap: BitmapSurface }) {
     if (!canvas) return;
     const context = canvas.getContext("2d");
     if (!context) return;
-    const pixels = bitmap.pixels instanceof Uint8ClampedArray
-      ? bitmap.pixels
-      : new Uint8ClampedArray(bitmap.pixels.buffer, bitmap.pixels.byteOffset, bitmap.pixels.byteLength);
-    context.putImageData(new ImageData(new Uint8ClampedArray(pixels), bitmap.width, bitmap.height), 0, 0);
+    const pixels = bitmap.pixels.buffer instanceof ArrayBuffer
+      ? new Uint8ClampedArray(bitmap.pixels.buffer, bitmap.pixels.byteOffset, bitmap.pixels.byteLength)
+      : new Uint8ClampedArray(bitmap.pixels);
+    context.putImageData(new ImageData(pixels, bitmap.width, bitmap.height), 0, 0);
   }, [bitmap]);
 
   return (
@@ -37,9 +38,9 @@ function CanvasBitmap({ bitmap }: { bitmap: BitmapSurface }) {
       }}
     />
   );
-}
+});
 
-function BoxLayer({ bitmap, index }: { bitmap: BitmapSurface; index: number }) {
+const BoxLayer = memo(function BoxLayer({ bitmap, index }: { bitmap: BitmapSurface; index: number }) {
   return (
     <div
       style={{
@@ -52,7 +53,7 @@ function BoxLayer({ bitmap, index }: { bitmap: BitmapSurface; index: number }) {
       <CanvasBitmap bitmap={bitmap} />
     </div>
   );
-}
+});
 
 function ChartCrosshair({
   bitmap,
@@ -132,7 +133,7 @@ export const WebChartSurface = forwardRef<BoxRenderable, Record<string, unknown>
       >
         {layers.length > 0
           ? layers.map((layer, index) => (
-            <BoxLayer key={`${layer.width}x${layer.height}:${index}`} index={index} bitmap={layer} />
+            <BoxLayer key={`layer:${index}`} index={index} bitmap={layer} />
           ))
           : children as ReactNode}
         <ChartCrosshair bitmap={baseLayer} crosshair={crosshair} />

package/src/renderers/electrobun/view/host/input.tsx

@@ -89,13 +89,11 @@ function useLatestRef<T>(value: T): RefObject<T> {
 
 function useSyncedEditableElement<T extends HTMLInputElement | HTMLTextAreaElement>({
   elementRef,
-  propsRef,
   valueRef,
   handleValueChange,
   active,
 }: {
   elementRef: RefObject<T | null>;
-  propsRef: RefObject<Record<string, unknown>>;
   valueRef: RefObject<string>;
   handleValueChange: (nextValue: string) => void;
   active: boolean;
@@ -122,21 +120,6 @@ function useSyncedEditableElement<T extends HTMLInputElement | HTMLTextAreaEleme
     };
   }, [active, syncElementValue]);
 
-  useEffect(() => {
-    if (!active) return;
-    const commitBeforeOutsideMouseDown = (event: globalThis.MouseEvent) => {
-      const element = elementRef.current;
-      const target = event.target;
-      if (!element || (target instanceof Node && element.contains(target))) return;
-      const nextValue = syncElementValue();
-      callTextHandler(propsRef.current.onBlur, nextValue);
-    };
-    document.addEventListener("mousedown", commitBeforeOutsideMouseDown, true);
-    return () => {
-      document.removeEventListener("mousedown", commitBeforeOutsideMouseDown, true);
-    };
-  }, [active, elementRef, propsRef, syncElementValue]);
-
   return syncElementValue;
 }
 
@@ -223,6 +206,8 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
   useEffect(() => {
     if (props.focused === true) {
       elementRef.current?.focus();
+    } else if (props.focused === false && document.activeElement === elementRef.current) {
+      elementRef.current?.blur();
     }
   }, [props.focused]);
 
@@ -236,6 +221,7 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
     },
     setCursorOffset: applyCursorOffset,
     focus: () => elementRef.current?.focus(),
+    blur: () => elementRef.current?.blur(),
   }), [applyCursorOffset, cursorOffset, setValue, valueRef]);
 
   const handleValueChange = useCallback((nextValue: string) => {
@@ -247,13 +233,18 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
   }, [propsRef, setValue]);
   const syncElementValue = useSyncedEditableElement({
     elementRef,
-    propsRef,
     valueRef,
     handleValueChange,
     active: props.focused === true || domFocused,
   });
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if ((event.key === "Escape" || event.key === "Esc") && typeof propsRef.current.onEscape === "function") {
+      event.preventDefault();
+      event.stopPropagation();
+      (propsRef.current.onEscape as () => void)();
+      return;
+    }
     if (event.key === "Enter" && typeof propsRef.current.onSubmit === "function") {
       event.preventDefault();
       (propsRef.current.onSubmit as (value: string) => void)(syncElementValue());
@@ -361,7 +352,6 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
   }, [propsRef, setValue]);
   const syncElementValue = useSyncedEditableElement({
     elementRef,
-    propsRef,
     valueRef,
     handleValueChange,
     active: props.focused === true || domFocused,

package/src/renderers/electrobun/view/host/media-surface.tsx

@@ -0,0 +1,170 @@
+/// <reference lib="dom" />
+/** @jsxImportSource react */
+import Hls from "hls.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, type CSSProperties, type ReactNode } from "react";
+import type { MediaSurfaceHandle, MediaSurfaceProps } from "../../../../ui/host";
+import { cleanDomProps, commonStyle } from "./style";
+
+export const WebMediaSurface = forwardRef<HTMLVideoElement, MediaSurfaceProps>(function WebMediaSurface(rawProps, forwardedRef) {
+  const {
+    children,
+    src,
+    title,
+    poster,
+    autoPlay = false,
+    muted = false,
+    mediaHandleRef,
+    onPlaybackStateChange,
+    onMutedChange,
+    onError,
+    ...props
+  } = rawProps as MediaSurfaceProps & {
+    children?: ReactNode;
+    src?: string;
+    title?: string;
+    poster?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    mediaHandleRef?: MediaSurfaceProps["mediaHandleRef"];
+    onPlaybackStateChange?: (state: "idle" | "loading" | "playing" | "paused" | "error") => void;
+    onMutedChange?: (muted: boolean) => void;
+    onError?: (message: string) => void;
+  };
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const [failed, setFailed] = useState(false);
+  const mediaSrc = typeof src === "string" ? src.trim() : "";
+  const baseStyle = commonStyle(props);
+
+  useImperativeHandle(forwardedRef, () => videoRef.current as HTMLVideoElement, []);
+  useImperativeHandle(mediaHandleRef, (): MediaSurfaceHandle => ({
+    async play() {
+      if (videoRef.current) await videoRef.current.play();
+    },
+    pause() {
+      videoRef.current?.pause();
+    },
+    async toggle() {
+      const video = videoRef.current;
+      if (!video) return;
+      if (video.paused) {
+        await video.play();
+      } else {
+        video.pause();
+      }
+    },
+    toggleMuted() {
+      const video = videoRef.current;
+      if (!video) return muted;
+      video.muted = !video.muted;
+      return video.muted;
+    },
+  }), [muted]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !mediaSrc) {
+      onPlaybackStateChange?.("idle");
+      return;
+    }
+
+    setFailed(false);
+    onPlaybackStateChange?.("loading");
+    let hls: Hls | null = null;
+
+    let active = true;
+    const fail = (message: string) => {
+      if (!active) return;
+      setFailed(true);
+      onPlaybackStateChange?.("error");
+      onError?.(message);
+    };
+    const handlePlaying = () => onPlaybackStateChange?.("playing");
+    const handlePause = () => onPlaybackStateChange?.("paused");
+    const handleWaiting = () => onPlaybackStateChange?.("loading");
+    const handleVolumeChange = () => onMutedChange?.(video.muted);
+    const handleError = () => fail("The live stream could not be played.");
+    video.addEventListener("playing", handlePlaying);
+    video.addEventListener("pause", handlePause);
+    video.addEventListener("waiting", handleWaiting);
+    video.addEventListener("volumechange", handleVolumeChange);
+    video.addEventListener("error", handleError);
+    video.defaultMuted = muted;
+    video.muted = muted;
+    onMutedChange?.(video.muted);
+
+    const startPlayback = () => {
+      if (!autoPlay) return;
+      void video.play().catch(() => {
+        if (active) onPlaybackStateChange?.("paused");
+      });
+    };
+
+    if (video.canPlayType("application/vnd.apple.mpegurl")) {
+      video.src = mediaSrc;
+      video.load();
+      startPlayback();
+    } else if (Hls.isSupported()) {
+      hls = new Hls({
+        backBufferLength: 30,
+        enableWorker: true,
+        lowLatencyMode: true,
+      });
+      hls.on(Hls.Events.ERROR, (_event, data) => {
+        if (!data.fatal) return;
+        fail(data.details ? `Stream playback failed: ${data.details}` : "Stream playback failed.");
+      });
+      hls.on(Hls.Events.MANIFEST_PARSED, startPlayback);
+      hls.loadSource(mediaSrc);
+      hls.attachMedia(video);
+    } else {
+      fail("HLS playback is unavailable in this desktop runtime.");
+    }
+
+    return () => {
+      active = false;
+      hls?.destroy();
+      video.removeEventListener("playing", handlePlaying);
+      video.removeEventListener("pause", handlePause);
+      video.removeEventListener("waiting", handleWaiting);
+      video.removeEventListener("volumechange", handleVolumeChange);
+      video.removeEventListener("error", handleError);
+      video.pause();
+      video.removeAttribute("src");
+      video.load();
+    };
+  }, [autoPlay, mediaSrc, onError, onMutedChange, onPlaybackStateChange]);
+
+  return (
+    <div
+      {...cleanDomProps(props)}
+      style={{
+        ...baseStyle,
+        position: "relative",
+        overflow: "hidden",
+        background: "#050505",
+        ...(props.style as CSSProperties | undefined),
+      }}
+    >
+      {mediaSrc && !failed ? (
+        <video
+          key={mediaSrc}
+          ref={videoRef}
+          aria-label={title || "Live TV stream"}
+          title={title}
+          poster={poster}
+          controls
+          playsInline
+          autoPlay={autoPlay}
+          muted={muted}
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "block",
+            objectFit: "contain",
+            background: "#050505",
+          }}
+        />
+      ) : children as ReactNode}
+    </div>
+  );
+});

package/src/renderers/electrobun/view/host/mouse.ts

@@ -60,6 +60,7 @@ export function cellMouseEvent(event: MouseLikeEvent, type?: string) {
       ctrl: event.ctrlKey || event.metaKey,
     },
     scroll: resolveScroll(event),
+    isDefaultPrevented: () => event.defaultPrevented,
     preventDefault: () => event.preventDefault(),
     stopPropagation: () => event.stopPropagation(),
   };

package/src/renderers/electrobun/view/host/style.ts

@@ -102,7 +102,7 @@ export function cleanDomProps(props: Record<string, unknown>): Record<string, un
     "border", "borderStyle", "borderColor", "overflow", "selectable", "visible", "name", "color",
     "focused", "focusedBackgroundColor", "textColor", "focusedTextColor", "placeholderColor",
     "cursorColor", "selectionBg", "selectionFg", "showCursor", "keyBindings", "wrapText", "wrapMode",
-    "initialValue", "value", "onInput", "onChange", "onSubmit", "onCursorChange", "onMouse",
+    "initialValue", "value", "onInput", "onChange", "onSubmit", "onEscape", "onCursorChange", "onMouse",
     "scrollX", "scrollY", "focusable", "bitmap", "bitmaps", "crosshair", "text", "font",
     "hoverBackgroundColor",
   ]) {

package/src/renderers/electrobun/view/host/tabs.tsx

@@ -17,6 +17,7 @@ export function WebTabs({
   activeValue,
   onSelect,
   compact = false,
+  dense = false,
   variant = "underline",
   closeMode = "always",
   addLabel = "+",
@@ -29,7 +30,7 @@ export function WebTabs({
   const showUnderline = variant === "underline" && !compact;
   const listHeight = showUnderline ? 28 : compact ? WEB_CELL_HEIGHT : "100%";
   const tabFontSize = compact || showUnderline ? 12 : 13;
-  const tabPaddingInline = showUnderline ? 10 : 8;
+  const tabPaddingInline = dense ? 5 : showUnderline ? 10 : 8;
   const tabPaddingBlock = variant === "bare" || variant === "pill" ? 2 : 0;
 
   useEffect(() => {
@@ -74,14 +75,14 @@ export function WebTabs({
         display: "flex",
         flexDirection: "row",
         alignItems: "stretch",
-        gap: 4,
+        gap: dense ? 2 : 4,
         width: "100%",
         height: listHeight,
         minInlineSize: 0,
         flexShrink: 0,
         overflowX: "auto",
         overflowY: "hidden",
-        paddingInline: variant === "underline" ? 0 : 4,
+        paddingInline: variant === "underline" || dense ? 0 : 4,
         paddingBlock: tabPaddingBlock,
         marginBottom: showUnderline ? 4 : 0,
         boxSizing: "border-box",

package/src/renderers/electrobun/view/main.tsx

@@ -2,10 +2,16 @@
 /** @jsxImportSource react */
 import { createRoot } from "react-dom/client";
 import { App } from "../../../app";
+import { applyLanguageFromConfig } from "../../../i18n";
 import { UiHostProvider } from "../../../ui/host";
 import { debugLog } from "../../../utils/debug-log";
 import { measurePerfAsync } from "../../../utils/perf-marks";
-import { backendRequest, initElectrobunBackend, setElectrobunRemoteRequestHandler } from "./backend-rpc";
+import {
+  backendRequest,
+  initElectrobunBackend,
+  requestMainWindowRemoteControl,
+  setElectrobunRemoteRequestHandler,
+} from "./backend-rpc";
 import { installElectrobunAiHost } from "./ai-host";
 import { installElectrobunBrokerRemoteClient } from "./broker-remote-client";
 import { installElectrobunConfigStoreHost } from "./config-host";
@@ -82,18 +88,19 @@ async function boot() {
   installElectrobunCloudApiFetchTransport();
   installElectrobunUpdateHost();
   const init = await measurePerfAsync("startup.electrobun.backend-init", () => backendInitPromise);
-  await installElectrobunAiHost();
+  installElectrobunAiHost();
   const desktopSnapshot = init.windowKind === "detached" && init.paneId && init.desktopSnapshot
     ? prepareDetachedSnapshot(init.desktopSnapshot, init.paneId)
     : init.desktopSnapshot;
   const config = desktopSnapshot?.config ?? init.config;
+  applyLanguageFromConfig(config);
   const desktopWindowBridge = createDesktopWindowBridge(init.windowKind, init.paneId);
   const desktopApplicationMenuBridge = createApplicationMenuBridge();
   const desktopDeepLinkBridge = createDesktopDeepLinkBridge();
   const webUiHost = createWebUiHost(init.desktopPlatform);
   const remoteControlAdapter = init.windowKind === "main"
     ? { registerHandler: setElectrobunRemoteRequestHandler }
-    : undefined;
+    : { handleRequest: requestMainWindowRemoteControl };
   measurePerfAsync("startup.electrobun.root-render", async () => {
     root.render(
       <ElectrobunErrorBoundary>

package/src/renderers/electrobun/view/styles.css

@@ -455,3 +455,20 @@ body.gloom-dragging [data-gloom-role="chart-surface"] {
     0 18px 48px color-mix(in srgb, var(--gloom-bg) 46%, transparent),
     inset 0 1px 0 color-mix(in srgb, var(--gloom-text-bright) 5%, transparent);
 }
+.gloom-popover-anchor {
+  display: inline-flex;
+  min-width: 0;
+  outline: none;
+}
+.gloom-popover {
+  position: fixed;
+  z-index: 10001;
+  max-height: min(420px, calc(100vh - 20px));
+  overflow: auto;
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 8px;
+  box-shadow:
+    0 14px 34px color-mix(in srgb, var(--gloom-bg) 42%, transparent),
+    inset 0 1px 0 color-mix(in srgb, var(--gloom-text-bright) 5%, transparent);
+}

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

@@ -15,9 +15,11 @@ import {
   WebSegmentedControl,
   WebTextField,
 } from "./desktop/controls";
+import { WebPopover } from "./desktop/popover";
 import { WebBox } from "./host/box";
 import { WebChartSurface } from "./host/chart-surface";
 import { WebInput, WebTextarea } from "./host/input";
+import { WebMediaSurface } from "./host/media-surface";
 import {
   NATIVE_CONTEXT_MENU_SUPPORTED,
   showDesktopContextMenu,
@@ -84,6 +86,7 @@ export function createWebUiHost(desktopPlatform?: string): UiHost {
     Textarea: WebTextarea,
     Button: WebButton,
     Checkbox: WebCheckbox,
+    Popover: WebPopover,
     TextField: WebTextField,
     MessageComposer: WebMessageComposer,
     ListView: WebListView,
@@ -124,6 +127,7 @@ export function createWebUiHost(desktopPlatform?: string): UiHost {
         </div>
       );
     },
+    MediaSurface: WebMediaSurface,
     SpinnerMark: ({ color, ...props }) => (
       <span
         {...cleanDomProps(props)}
@@ -198,4 +202,7 @@ export const webRendererHost: RendererHost = {
     }).catch(() => {});
   },
   showContextMenu: showDesktopContextMenu,
+  resolveLiveStream(request) {
+    return backendRequest("media.resolveLiveStream", request);
+  },
 };