gloomberb 0.9.7 → 0.9.9

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

@@ -4,9 +4,11 @@ import { Box, Input, Text, Textarea, editableTextContextMenuItems, useRendererHo
 import { TextAttributes, type InputRenderable } from "../../../../ui";
 import { useShortcut } from "../../../../react/input";
 import { blendHex, colors } from "../../../../theme/colors";
+import { contrastRatio } from "../../../../theme/color-utils";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { isDetailBackNavigationKey } from "../../../../utils/back-navigation";
 import type { ButtonProps } from "../../../../components/ui/button";
+import type { CheckboxProps } from "../../../../components/ui/checkbox";
 import type { TextFieldProps } from "../../../../components/ui/fields";
 import type { DialogFrameProps } from "../../../../components/ui/frame";
 import type { MessageComposerProps } from "../../../../components/ui/message-composer";
@@ -31,6 +33,7 @@ export function WebButton({
   active = false,
   shortcut,
   width,
+  height,
 }: ButtonProps) {
   useThemeColors();
   const palette = buttonPalette({ variant, active, disabled });
@@ -38,7 +41,7 @@ export function WebButton({
   return (
     <Box
       width={width}
-      height={1}
+      height={height ?? 1}
       flexDirection="row"
       alignItems="center"
       justifyContent="center"
@@ -51,7 +54,8 @@ export function WebButton({
       style={{
         border: `1px solid ${palette.border}`,
         borderRadius: CONTROL_RADIUS,
-        paddingInline: 8,
+        paddingLeft: 8,
+        paddingRight: 8,
         boxShadow: controlShadow(active),
         cursor: disabled ? "default" : "pointer",
       }}
@@ -59,7 +63,9 @@ export function WebButton({
       <Text
         fg={palette.fg}
         attributes={active ? TextAttributes.BOLD : 0}
-        style={{ fontWeight: active || variant === "primary" ? 700 : 600 }}
+        style={{
+          fontWeight: active || variant === "primary" ? 700 : 600,
+        }}
       >
         {label}
       </Text>
@@ -75,6 +81,129 @@ export function WebButton({
   );
 }
 
+function checkboxAccentColor(): string {
+  const base = colors.borderFocused;
+  const nativeCheckmark = "#ffffff";
+  const candidates = [
+    blendHex(base, colors.selected, 0.55),
+    blendHex(base, colors.selected, 0.65),
+    blendHex(base, "#000000", 0.45),
+    blendHex(base, "#000000", 0.52),
+    base,
+  ];
+  return candidates.find((candidate) => (
+    contrastRatio(candidate, nativeCheckmark) >= 4.5
+    && contrastRatio(candidate, colors.panel) >= 2.2
+  )) ?? candidates[1]!;
+}
+
+function checkboxCheckImage(): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M3 7.3 5.8 10 11.2 3.7" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+
+export function WebCheckbox({
+  label,
+  displayLabel,
+  checked,
+  onChange,
+  disabled = false,
+  active = false,
+  description,
+  width,
+}: CheckboxProps) {
+  useThemeColors();
+  const textColor = disabled
+    ? colors.textMuted
+    : active
+    ? colors.textBright
+    : colors.text;
+  const visibleLabel = displayLabel ?? label;
+  const accentColor = checkboxAccentColor();
+  const borderColor = checked ? accentColor : controlBorderColor(active, false);
+  return (
+    <Box
+      flexDirection="column"
+      width={width}
+      data-gloom-role="desktop-checkbox"
+      data-gloom-interactive={disabled ? undefined : "true"}
+      style={{ opacity: disabled ? 0.55 : 1 }}
+    >
+      <label
+        onMouseDown={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+        }}
+        onClick={(event) => {
+          event.preventDefault();
+          event.stopPropagation();
+          if (!disabled) onChange?.(!checked);
+        }}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 8,
+          width: "100%",
+          minWidth: 0,
+          cursor: disabled ? "default" : "pointer",
+          color: textColor,
+          fontWeight: active ? 700 : 500,
+          lineHeight: "20px",
+          userSelect: "none",
+          position: "relative",
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={checked}
+          readOnly
+          disabled={disabled}
+          style={{
+            appearance: "none",
+            WebkitAppearance: "none",
+            width: 14,
+            height: 14,
+            margin: 0,
+            backgroundColor: checked ? accentColor : panelFill(),
+            backgroundImage: checked ? checkboxCheckImage() : undefined,
+            backgroundPosition: "center",
+            backgroundRepeat: "no-repeat",
+            backgroundSize: "12px 12px",
+            border: `1px solid ${borderColor}`,
+            borderRadius: 4,
+            boxShadow: active
+              ? `0 0 0 2px ${blendHex(colors.bg, colors.borderFocused, 0.28)}, inset 0 1px 0 rgba(255,255,255,0.16)`
+              : "inset 0 1px 0 rgba(255,255,255,0.10)",
+            boxSizing: "border-box",
+            flexShrink: 0,
+            cursor: disabled ? "default" : "pointer",
+            verticalAlign: "middle",
+          }}
+        />
+        <span
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {visibleLabel}
+        </span>
+      </label>
+      {description ? (
+        <Text
+          fg={colors.textMuted}
+          wrapText
+          width={width}
+          style={{ paddingLeft: 22, lineHeight: "18px" }}
+        >
+          {description}
+        </Text>
+      ) : null}
+    </Box>
+  );
+}
+
 export function WebTextField({
   label,
   value,
@@ -184,6 +313,7 @@ export function WebMessageComposer({
   height = 2,
   onFocusRequest,
   onInput,
+  onCursorChange,
   onSubmit,
   keyBindings,
   wrapText = false,
@@ -234,6 +364,7 @@ export function WebMessageComposer({
         onMouseDown={requestFocus}
         onFocus={requestFocus}
         onInput={handleInput}
+        onCursorChange={onCursorChange}
         keyBindings={keyBindings}
         onSubmit={onSubmit}
         wrapText={wrapText}
@@ -295,7 +426,7 @@ export function WebDialogFrame({
   title,
   children,
   footer,
-  showTitleDivider = true,
+  showTitleDivider = false,
 }: DialogFrameProps) {
   useThemeColors();
   return (

package/src/renderers/electrobun/view/desktop/list-view.tsx

@@ -20,24 +20,29 @@ function DefaultDesktopRow({
   selected: boolean;
 }) {
   return (
-    <Box flexDirection="row" justifyContent="space-between" width="100%" alignItems="center">
-      <Box flexDirection="row" alignItems="center" minWidth={0}>
-        <Box
-          width={1}
-          height={1}
-          marginRight={1}
-          backgroundColor={selected ? colors.borderFocused : "transparent"}
-          style={{ borderRadius: CONTROL_RADIUS }}
-        />
+    <Box
+      flexDirection="row"
+      justifyContent="space-between"
+      width="100%"
+      minWidth={0}
+      alignItems="center"
+      style={{ boxSizing: "border-box" }}
+    >
+      <Box flexDirection="row" alignItems="center" minWidth={0} flexShrink={1}>
         <Text
           fg={selected ? colors.text : colors.textDim}
           attributes={selected ? TextAttributes.BOLD : 0}
+          style={{
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
         >
           {item.label}
         </Text>
       </Box>
       {item.detail && (
-        <Text fg={colors.textMuted}>
+        <Text fg={colors.textMuted} style={{ flexShrink: 0, marginLeft: 12 }}>
           {item.detail}
         </Text>
       )}
@@ -50,7 +55,11 @@ function listRowStyle(selected: boolean): CSSProperties {
     borderRadius: CONTROL_RADIUS,
     border: `1px solid ${selected ? colors.borderFocused : "transparent"}`,
     boxShadow: selected ? `inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.06)}` : undefined,
+    boxSizing: "border-box",
     cursor: "pointer",
+    maxWidth: "100%",
+    minWidth: 0,
+    paddingInline: 10,
   };
 }
 
@@ -69,10 +78,11 @@ export function WebListView({
   hoverBgColor,
   rowGap = 1,
   rowHeight = 1,
-  surface = "framed",
+  surface,
   height,
   flexGrow,
   scrollable = false,
+  selectOnHover = false,
   autoScrollToIndex = true,
 }: ListViewProps) {
   useThemeColors();
@@ -83,6 +93,20 @@ export function WebListView({
   const rowHoverBg = hoverBgColor ?? hoverBg();
   const selectedItem = selectedIndex >= 0 ? items[selectedIndex] : undefined;
   const activeScrollIndex = scrollIndex ?? selectedIndex;
+  const effectiveSurface = surface ?? (scrollable ? "framed" : "plain");
+  const frameStyle = effectiveSurface === "plain"
+    ? {
+      border: "none",
+      borderRadius: 0,
+      padding: 0,
+      backgroundColor: "transparent",
+    }
+    : {
+      border: `1px solid ${panelBorder()}`,
+      borderRadius: CONTROL_RADIUS,
+      padding: 4,
+      backgroundColor: subtlePanelFill(),
+    };
 
   useEffect(() => {
     if (!scrollable || !autoScrollToIndex || activeScrollIndex < 0) return;
@@ -130,6 +154,7 @@ export function WebListView({
           onMouseMove={() => {
             if (!disabled) {
               setHoveredIndex((current) => (current === index ? current : index));
+              if (selectOnHover) onSelect?.(index);
             }
           }}
           onMouseDown={() => {
@@ -156,26 +181,14 @@ export function WebListView({
           flexGrow={flexGrow}
           scrollY
           focusable={false}
-          style={surface === "plain"
-            ? {
-              border: "none",
-              borderRadius: 0,
-              padding: 0,
-              backgroundColor: "transparent",
-            }
-            : {
-              border: `1px solid ${panelBorder()}`,
-              borderRadius: CONTROL_RADIUS,
-              padding: 4,
-              backgroundColor: subtlePanelFill(),
-            }}
+          style={frameStyle}
         >
           <Box flexDirection="column" gap={rowGap}>
             {rows}
           </Box>
         </ScrollBox>
       ) : (
-        <Box flexDirection="column" gap={rowGap}>
+        <Box flexDirection="column" gap={rowGap} style={frameStyle}>
           {rows}
         </Box>
       )}

package/src/renderers/electrobun/view/desktop-deeplink-bridge.ts

@@ -0,0 +1,10 @@
+import type { DesktopDeepLinkBridge } from "../../../types/desktop-deeplink";
+import { onDesktopDeepLink } from "./backend-rpc";
+
+export function createDesktopDeepLinkBridge(): DesktopDeepLinkBridge {
+  return {
+    subscribe(listener) {
+      return onDesktopDeepLink(listener);
+    },
+  };
+}

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

@@ -19,7 +19,6 @@ import {
   cancelWebFrame,
   cellBoundsForElement,
   cellMouseEvent,
-  hasDirectMouseHandler,
   requestWebFrame,
 } from "./mouse";
 import { cleanDomProps, commonStyle } from "./style";
@@ -148,7 +147,6 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       <div
         {...cleanDomProps(props)}
         data-gloom-hover-bg={hoverBackgroundColor ? "true" : undefined}
-        data-gloom-interactive={hasDirectMouseHandler(props) ? "true" : undefined}
         ref={elementRef}
         onMouseDown={handleMouseDown}
         onMouseOver={handleMouseOver}

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

@@ -90,17 +90,6 @@ export function callCellMouseHandler(handler: unknown, event: CellMouseEvent): v
   (handler as (event: unknown) => void)(event);
 }
 
-export function hasDirectMouseHandler(props: Record<string, unknown>): boolean {
-  return typeof props.onMouseDown === "function"
-    || typeof props.onMouseOver === "function"
-    || typeof props.onMouseUp === "function"
-    || typeof props.onMouseMove === "function"
-    || typeof props.onMouseOut === "function"
-    || typeof props.onMouseDrag === "function"
-    || typeof props.onMouseDragEnd === "function"
-    || typeof props.onMouseScroll === "function";
-}
-
 export function cellBoundsForElement(
   getElement: () => HTMLElement | null,
   getProps: () => Record<string, unknown>,

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

@@ -14,7 +14,7 @@ import {
 } from "react";
 import type { ScrollBoxRenderable } from "../../../../ui/host";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
-import { callMouseHandler, hasDirectMouseHandler } from "./mouse";
+import { callMouseHandler } from "./mouse";
 import { cleanDomProps, commonStyle } from "./style";
 import { useScrollbarActivity } from "../scrollbar-activity";
 
@@ -254,7 +254,6 @@ export const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unkno
         data-gloom-scrollbar-x={props.scrollX === true ? (horizontalScrollBarVisible ? "visible" : "hidden") : undefined}
         data-gloom-scrollbar-y={props.scrollY === true ? (verticalScrollBarVisible ? "visible" : "hidden") : undefined}
         data-gloom-scrollbar-active={scrollbarActive ? "true" : undefined}
-        data-gloom-interactive={hasDirectMouseHandler(props) ? "true" : undefined}
         onMouseDown={(event) => callMouseHandler(props.onMouseDown, event, "down")}
         onMouseMove={(event) => callMouseHandler(props.onMouseMove, event, "move")}
         onMouseUp={(event) => callMouseHandler(props.onMouseUp, event, "up")}

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

@@ -9,7 +9,7 @@ import {
 } from "../../../../ui/host";
 import { WEB_CELL_WIDTH } from "../input-host";
 import { webAsciiTextLines, webAsciiTextWordmarkVariant } from "./ascii-text";
-import { hasDirectMouseHandler, mouseHandlers } from "./mouse";
+import { mouseHandlers } from "./mouse";
 import { cleanDomProps, commonStyle, textStyle } from "./style";
 
 const WEB_WORDMARK_CHAR_WIDTH_PX = Math.max(10, WEB_CELL_WIDTH);
@@ -56,7 +56,6 @@ export function WebText({ children, ...props }: TextProps) {
     <span
       {...cleanDomProps(props)}
       {...mouseHandlers(props)}
-      data-gloom-interactive={hasDirectMouseHandler(props) ? "true" : undefined}
       style={{ ...textStyle(props), ...(props.style as CSSProperties | undefined) }}
     >
       {renderTextContent(children, props.content, props)}

package/src/renderers/electrobun/view/http-fetch.ts

@@ -11,6 +11,8 @@ interface ElectrobunHttpFetchResponse {
   body: string;
 }
 
+const CLOUD_MARKET_HTTP_TIMEOUT_MS = 10_000;
+
 function normalizeHeaders(headers: HeadersInit | undefined): Record<string, string> {
   const normalized: Record<string, string> = {};
   if (!headers) return normalized;
@@ -75,7 +77,11 @@ async function electrobunHttpFetch(url: string, init?: RequestInit): Promise<Res
   return fetchResponse;
 }
 
-async function requestBackendHttpFetch(url: string, init?: RequestInit): Promise<ElectrobunHttpFetchResponse> {
+async function requestBackendHttpFetch(
+  url: string,
+  init?: RequestInit,
+  timeoutMs?: number,
+): Promise<ElectrobunHttpFetchResponse> {
   return backendRequest<ElectrobunHttpFetchResponse>("http.fetch", {
     url,
     init: {
@@ -83,6 +89,7 @@ async function requestBackendHttpFetch(url: string, init?: RequestInit): Promise
       headers: normalizeHeaders(init?.headers),
       body: await serializeBody(init?.body),
       redirect: init?.redirect,
+      timeoutMs,
     },
   });
 }
@@ -100,7 +107,13 @@ function createResponseHeaders(headers: Record<string, string>, setCookie: strin
 }
 
 async function electrobunCloudApiFetch(url: string, init?: RequestInit): Promise<Response> {
-  const response = await requestBackendHttpFetch(url, init);
+  if (init?.signal?.aborted) {
+    throw createAbortError();
+  }
+  const timeoutMs = new URL(url).pathname.startsWith("/market/")
+    ? CLOUD_MARKET_HTTP_TIMEOUT_MS
+    : undefined;
+  const response = await withAbort(requestBackendHttpFetch(url, init, timeoutMs), init?.signal);
 
   return {
     ok: response.status >= 200 && response.status < 300,

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

@@ -21,6 +21,7 @@ import { webNativeRenderer } from "./native-renderer";
 import { WebToastHostProvider } from "./toast-host";
 import { createWebUiHost, webRendererHost } from "./ui-host";
 import { createApplicationMenuBridge } from "./application-menu-bridge";
+import { createDesktopDeepLinkBridge } from "./desktop-deeplink-bridge";
 import { createDesktopWindowBridge } from "./desktop/window/bridge";
 import { prepareDetachedSnapshot } from "./desktop/window/snapshot";
 
@@ -88,6 +89,7 @@ async function boot() {
   const config = desktopSnapshot?.config ?? init.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 }
@@ -103,6 +105,7 @@ async function boot() {
                   config={config}
                   desktopWindowBridge={desktopWindowBridge}
                   desktopApplicationMenuBridge={desktopApplicationMenuBridge}
+                  desktopDeepLinkBridge={desktopDeepLinkBridge}
                   desktopSnapshot={desktopSnapshot}
                   desktopThemePreview={init.desktopThemePreview}
                   remoteControlAdapter={remoteControlAdapter}

package/src/renderers/electrobun/view/remote/asset-data-client.ts

@@ -3,9 +3,11 @@ import type { NewsArticle, NewsQuery } from "../../../../news/types";
 import type { DataProvider, QuoteSubscriptionTarget } from "../../../../types/data-provider";
 import type { Quote, TickerFinancials } from "../../../../types/financials";
 import { backendRequest, getElectrobunBackendInitSnapshot, onCapabilityEvent } from "../backend-rpc";
+import { createCapabilityInvoker } from "./capability-invoker";
 
 const ASSET_DATA_CAPABILITY_ID = "asset-data.asset-data-router";
 const NEWS_CAPABILITY_ID = "news.core";
+const ASSET_DATA_REQUEST_TIMEOUT_MS = 115_000;
 
 export type RemoteAssetDataClient = DataProvider & {
   getNews(query: NewsQuery): Promise<NewsArticle[]>;
@@ -64,23 +66,12 @@ function hasRendererOperation(operations: Set<string> | null, operationId: strin
   return operations === null || operations.has(operationId);
 }
 
-function createCapabilityInvoker() {
-  const inFlightRequests = new Map<string, Promise<unknown>>();
-  return function invoke<T>(capabilityId: string, operationId: string, payload: unknown): Promise<T> {
-    const requestPayload = { capabilityId, operationId, payload };
-    const key = JSON.stringify(requestPayload);
-    const inFlight = inFlightRequests.get(key);
-    if (inFlight) return inFlight as Promise<T>;
-    const promise = backendRequest<T>("capability.invoke", requestPayload).finally(() => {
-      inFlightRequests.delete(key);
-    });
-    inFlightRequests.set(key, promise);
-    return promise;
-  };
-}
-
 export function createRemoteAssetDataClient(): RemoteAssetDataClient {
-  const invoke = createCapabilityInvoker();
+  const invoke = createCapabilityInvoker({
+    request: backendRequest,
+    shouldApplyDeadline: (capabilityId) => capabilityId === ASSET_DATA_CAPABILITY_ID,
+    timeoutMs: ASSET_DATA_REQUEST_TIMEOUT_MS,
+  });
   const assetDataOperations = getRendererOperationIds(ASSET_DATA_CAPABILITY_ID);
   const newsOperations = getRendererOperationIds(NEWS_CAPABILITY_ID);
   let nextSubscriptionId = 1;
@@ -93,7 +84,7 @@ export function createRemoteAssetDataClient(): RemoteAssetDataClient {
   let quoteBackendFlushTimer: ReturnType<typeof setTimeout> | null = null;
 
   const quoteTargetKey = (target: QuoteSubscriptionTarget) =>
-    `${target.symbol}:${target.exchange ?? ""}:${target.context?.brokerId ?? ""}:${target.context?.brokerInstanceId ?? ""}:${target.context?.instrument?.conId ?? target.context?.instrument?.localSymbol ?? ""}`;
+    `${target.symbol}:${target.exchange ?? ""}:${target.context?.brokerId ?? ""}:${target.context?.brokerInstanceId ?? ""}:${target.context?.instrument?.conId ?? target.context?.instrument?.localSymbol ?? target.context?.instrument?.symbol ?? ""}`;
 
   const scheduleQuoteBackendSubscriptionFlush = () => {
     if (quoteBackendFlushTimer) return;
@@ -156,7 +147,7 @@ export function createRemoteAssetDataClient(): RemoteAssetDataClient {
       if (!hasRendererOperation(assetDataOperations, "subscribeQuotes")) return () => {};
       const uniqueTargets = [...new Map(
         targets.map((target) => [
-          `${target.symbol}:${target.exchange ?? ""}:${target.context?.brokerId ?? ""}:${target.context?.brokerInstanceId ?? ""}`,
+          quoteTargetKey(target),
           target,
         ] as const),
       ).values()];

package/src/renderers/electrobun/view/remote/capability-invoker.test.ts

@@ -0,0 +1,50 @@
+import { describe, expect, test } from "bun:test";
+import { createCapabilityInvoker } from "./capability-invoker";
+
+describe("createCapabilityInvoker", () => {
+  test("keeps timed-out calls deduped until the raw backend request settles", async () => {
+    let requestCount = 0;
+    const rawResolvers: Array<(value: unknown) => void> = [];
+    const invoke = createCapabilityInvoker({
+      request: <T>() => {
+        requestCount += 1;
+        return new Promise<T>((resolve) => {
+          rawResolvers.push((value) => resolve(value as T));
+        });
+      },
+      shouldApplyDeadline: (capabilityId) => capabilityId.startsWith("asset-data."),
+      timeoutMs: 10,
+    });
+    const payload = { ticker: "AAPL", exchange: "NASDAQ" };
+
+    const first = invoke("asset-data.asset-data-router", "getQuote", payload);
+    const duplicate = invoke("asset-data.asset-data-router", "getQuote", payload);
+    expect(duplicate).toBe(first);
+    expect(requestCount).toBe(1);
+    await expect(first).rejects.toThrow("Asset data request timed out after 10ms");
+
+    const retryWhileRawPending = invoke(
+      "asset-data.asset-data-router",
+      "getQuote",
+      payload,
+    );
+    expect(retryWhileRawPending).toBe(first);
+    await expect(retryWhileRawPending).rejects.toThrow(
+      "Asset data request timed out after 10ms",
+    );
+    expect(requestCount).toBe(1);
+
+    rawResolvers[0]?.({ price: 100 });
+    await Promise.resolve();
+    await Promise.resolve();
+
+    const retryAfterRawSettles = invoke(
+      "asset-data.asset-data-router",
+      "getQuote",
+      payload,
+    );
+    expect(requestCount).toBe(2);
+    rawResolvers[1]?.({ price: 101 });
+    await expect(retryAfterRawSettles).resolves.toEqual({ price: 101 });
+  });
+});

package/src/renderers/electrobun/view/remote/capability-invoker.ts

@@ -0,0 +1,36 @@
+import { withDeadline } from "../../../../utils/async-deadline";
+
+type CapabilityRequest = <T>(method: string, payload: unknown) => Promise<T>;
+
+export function createCapabilityInvoker(options: {
+  request: CapabilityRequest;
+  shouldApplyDeadline(capabilityId: string): boolean;
+  timeoutMs: number;
+}) {
+  const inFlightRequests = new Map<string, Promise<unknown>>();
+
+  return function invoke<T>(capabilityId: string, operationId: string, payload: unknown): Promise<T> {
+    const requestPayload = { capabilityId, operationId, payload };
+    const key = JSON.stringify(requestPayload);
+    const inFlight = inFlightRequests.get(key);
+    if (inFlight) return inFlight as Promise<T>;
+
+    const request = options.request<T>("capability.invoke", requestPayload);
+    const boundedRequest = options.shouldApplyDeadline(capabilityId)
+      ? withDeadline(
+        request,
+        options.timeoutMs,
+        `Asset data request timed out after ${options.timeoutMs}ms: ${operationId}`,
+      )
+      : request;
+    inFlightRequests.set(key, boundedRequest);
+    void request.finally(() => {
+      if (inFlightRequests.get(key) === boundedRequest) {
+        inFlightRequests.delete(key);
+      }
+    }).catch(() => {
+      // The returned bounded request owns error delivery to the caller.
+    });
+    return boundedRequest;
+  };
+}

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

@@ -7,6 +7,7 @@ import { backendRequest } from "./backend-rpc";
 import { WebDataTable } from "./data-table";
 import {
   WebButton,
+  WebCheckbox,
   WebDialogFrame,
   WebListView,
   WebMessageComposer,
@@ -82,6 +83,7 @@ export function createWebUiHost(desktopPlatform?: string): UiHost {
     Input: WebInput,
     Textarea: WebTextarea,
     Button: WebButton,
+    Checkbox: WebCheckbox,
     TextField: WebTextField,
     MessageComposer: WebMessageComposer,
     ListView: WebListView,

package/src/renderers/opentui/host.tsx

@@ -22,6 +22,7 @@ export function toKeyEventLike(event: {
   shift?: boolean;
   alt?: boolean;
   meta?: boolean;
+  option?: boolean;
   preventDefault?: () => void;
   stopPropagation?: () => void;
   defaultPrevented?: boolean;
@@ -37,9 +38,12 @@ export function toKeyEventLike(event: {
     sequence: event.sequence,
     ctrl: event.ctrl ?? false,
     shift: event.shift ?? false,
-    alt: event.alt ?? false,
-    meta: event.meta ?? event.super ?? false,
-    super: event.super ?? event.meta ?? false,
+    // OpenTUI follows terminal naming: `meta` is Alt/Option, while the
+    // kitty keyboard protocol exposes the Command/Windows modifier as
+    // `super`. Keep the shared input model aligned with browser semantics.
+    alt: event.alt === true || event.meta === true || event.option === true,
+    meta: event.super === true,
+    super: event.super === true,
     get defaultPrevented() {
       return event.defaultPrevented ?? false;
     },
@@ -101,6 +105,9 @@ export async function createOpenTuiHost(): Promise<OpenTuiHost> {
       await proc.exited;
     },
     async copyText(text) {
+      if (!text) return;
+      if (renderer.copyToClipboardOSC52(text)) return;
+      if (process.platform !== "darwin") return;
       const proc = Bun.spawn(["pbcopy"], {
         stdin: "pipe",
         stdout: "ignore",
@@ -111,6 +118,7 @@ export async function createOpenTuiHost(): Promise<OpenTuiHost> {
       await proc.exited;
     },
     async readText() {
+      if (process.platform !== "darwin") return "";
       const proc = Bun.spawn(["pbpaste"], {
         stdout: "pipe",
         stderr: "ignore",