gloomberb 0.11.0 → 0.11.2

package/src/renderers/cloudflare/worker.ts

@@ -0,0 +1,116 @@
+interface StaticAssetsBinding {
+  fetch(request: Request): Promise<Response>;
+}
+
+export interface WorkerEnv {
+  ASSETS: StaticAssetsBinding;
+}
+
+const SHARE_PATH = /^\/s\/[a-f0-9]{32}\/?$/;
+const LAYOUT_SHARE_PATH = /^\/l\/[a-f0-9]{32}\/?$/;
+const API_PATH = /^\/api(?:\/|$)/;
+const APPLE_APP_SITE_ASSOCIATION_PATH = "/.well-known/apple-app-site-association";
+
+/**
+ * Lets the iOS app claim `https://term.gloom.sh/s/...` share links.
+ *
+ * Apple fetches this over HTTPS with its own client, so it has to be a direct
+ * 200 with JSON content type: a redirect, an HTML error page, or a 404 all
+ * silently disable universal links with no visible failure on device.
+ *
+ * The path list mirrors `SHARE_PATH` above. Only pane/content shares are
+ * claimed. Layout permalinks stay in the browser so their page can preview the
+ * workspace and hand it to the hosted terminal as an editable copy.
+ *
+ * `3XQML3UV65` is the Apple team id that prefixes the app id.
+ */
+const APPLE_APP_SITE_ASSOCIATION = {
+  applinks: {
+    details: [
+      {
+        appIDs: ["3XQML3UV65.sh.gloom.companion"],
+        components: [{ "/": "/s/*", comment: "Public portfolio shares" }],
+      },
+    ],
+  },
+} as const;
+const API_ORIGIN = "https://api.gloom.sh";
+const API_METHODS = new Set(["GET", "HEAD", "POST", "PUT", "PATCH", "DELETE", "OPTIONS"]);
+type ApiFetch = (request: Request) => Promise<Response>;
+
+export const SECURITY_HEADERS = {
+  "content-security-policy": "default-src 'self'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; media-src 'self' https:; connect-src 'self' https://api.github.com https://api.fiscaldata.treasury.gov; form-action 'self'; upgrade-insecure-requests",
+  "cross-origin-opener-policy": "same-origin",
+  "cross-origin-resource-policy": "same-origin",
+  "permissions-policy": "camera=(), geolocation=(), microphone=(), payment=(), usb=()",
+  "referrer-policy": "strict-origin-when-cross-origin",
+  "strict-transport-security": "max-age=31536000; includeSubDomains",
+  "x-content-type-options": "nosniff",
+  "x-frame-options": "DENY",
+} as const;
+
+export function withSecurityHeaders(response: Response, options: { share?: boolean } = {}): Response {
+  const headers = new Headers(response.headers);
+  for (const [name, value] of Object.entries(SECURITY_HEADERS)) headers.set(name, value);
+  if (options.share) headers.set("x-robots-tag", "noindex, nofollow, noarchive");
+  if ((headers.get("content-type") ?? "").includes("text/html")) {
+    headers.set("cache-control", "no-store");
+  }
+  return new Response(response.body, { status: response.status, statusText: response.statusText, headers });
+}
+
+async function proxyApi(request: Request, fetchApi: ApiFetch): Promise<Response> {
+  const url = new URL(request.url);
+  if (!API_METHODS.has(request.method)) {
+    return Response.json({ error: "Method not allowed" }, {
+      status: 405,
+      headers: { Allow: [...API_METHODS].join(", ") },
+    });
+  }
+  const origin = request.headers.get("origin");
+  if (origin && origin !== url.origin) {
+    return Response.json({ error: "Origin not allowed" }, { status: 403 });
+  }
+  const upstreamUrl = new URL(`${url.pathname.slice(4) || "/"}${url.search}`, API_ORIGIN);
+  return fetchApi(new Request(upstreamUrl, request));
+}
+
+export async function handleRequest(request: Request, env: WorkerEnv, fetchApi: ApiFetch = fetch): Promise<Response> {
+  const url = new URL(request.url);
+  if (API_PATH.test(url.pathname)) return proxyApi(request, fetchApi);
+
+  if (request.method !== "GET" && request.method !== "HEAD") {
+    return withSecurityHeaders(Response.json({ error: "Method not allowed" }, {
+      status: 405,
+      headers: { Allow: "GET, HEAD" },
+    }));
+  }
+
+  if (url.pathname === "/health") {
+    return withSecurityHeaders(Response.json({ status: "ok" }));
+  }
+
+  // Served before the asset handler so it cannot be shadowed by a static file
+  // or the SPA fallback, either of which would hand Apple HTML and quietly
+  // break universal links.
+  if (url.pathname === APPLE_APP_SITE_ASSOCIATION_PATH) {
+    return withSecurityHeaders(
+      Response.json(APPLE_APP_SITE_ASSOCIATION, {
+        headers: { "cache-control": "public, max-age=3600" },
+      }),
+    );
+  }
+  const socialShare = SHARE_PATH.test(url.pathname) || LAYOUT_SHARE_PATH.test(url.pathname);
+  if (socialShare) {
+    const assetUrl = new URL("/share.html", url.origin);
+    const assetRequest = new Request(assetUrl, { method: request.method, headers: request.headers });
+    return withSecurityHeaders(await env.ASSETS.fetch(assetRequest), { share: true });
+  }
+  return withSecurityHeaders(await env.ASSETS.fetch(request));
+}
+
+export default {
+  fetch(request: Request, env: WorkerEnv): Promise<Response> {
+    return handleRequest(request, env);
+  },
+};

package/src/renderers/electrobun/bun/application-menu/index.ts

@@ -88,11 +88,12 @@ function buildApplicationMenu(): ApplicationMenuItemConfig[] {
     {
       label: "Layout",
       submenu: [
-        openCommandBar("Layout Actions...", "LAY ", { accelerator: "CmdOrCtrl+Shift+L" }),
+        commandItem("Layouts...", { type: "open-layout-gallery" }, { accelerator: "CmdOrCtrl+Shift+L" }),
+        openCommandBar("Layout Actions...", "LMA "),
         { type: "divider" },
         commandItem("Undo Layout Change", { type: "layout-undo" }),
         commandItem("Redo Layout Change", { type: "layout-redo" }),
-        commandItem("Gridlock All Windows", { type: "layout-gridlock" }, { accelerator: "CmdOrCtrl+Shift+G" }),
+        commandItem("Tidy Windows", { type: "layout-gridlock" }, { accelerator: "CmdOrCtrl+Shift+G" }),
         { type: "divider" },
         commandItem("New Layout...", { type: "open-plugin-workflow", commandId: "new-layout" }),
         commandItem("Rename Current Layout...", { type: "open-plugin-workflow", commandId: "rename-layout" }),

package/src/renderers/electrobun/bun/desktop/initialization.ts

@@ -142,6 +142,7 @@ export async function initializeDesktopBackend<TRpc>(
     plugins: getDesktopBackendPlugins(),
   });
   options.setServices(services);
+  await services.ready;
   options.syncConfigAccessors();
   options.registerCoreCapabilities();
   options.setDesktopWorkspace(createDesktopWorkspace(config, options.getSessionSnapshot()));

package/src/renderers/electrobun/bun/desktop/plugin-state.ts

@@ -76,9 +76,15 @@ export function handleDesktopPluginStateRequest(
   }
 }
 
+function pluginStateIds(registry: PluginRegistry): string[] {
+  const store = registry.persistence.pluginState as { pluginIds?: () => string[] };
+  const storedIds = typeof store.pluginIds === "function" ? store.pluginIds() : [];
+  return [...new Set(["gloomberb-cloud", ...registry.allPlugins.keys(), ...storedIds])];
+}
+
 export function loadDesktopPluginState(registry: PluginRegistry): Record<string, Record<string, unknown>> {
   const state: Record<string, Record<string, unknown>> = {};
-  for (const pluginId of registry.allPlugins.keys()) {
+  for (const pluginId of pluginStateIds(registry)) {
     const keys = registry.persistence.pluginState.keys(pluginId);
     if (keys.length === 0) continue;
     state[pluginId] = {};

package/src/renderers/electrobun/view/app-services.ts

@@ -7,17 +7,18 @@ import type { AppRuntimeServices, AppServicesFactoryOptions } from "../../../cor
 import { newsProvider } from "../../../capabilities";
 import { debugLog } from "../../../utils/debug-log";
 import { measurePerf, measurePerfAsync } from "../../../utils/perf-marks";
-import { getRendererBuiltinPlugins } from "../../../plugins/catalog-ui";
 import { createRemoteAssetDataClient } from "./remote/asset-data-client";
 import { RemotePersistence } from "./remote/persistence";
 import { RemoteTickerRepository } from "./remote/ticker-repository";
 import { connectBackendConnectionHealth } from "./remote/connection-health-backend";
 import { backendRequest, getElectrobunBackendInitSnapshot } from "./backend-rpc";
 import { createCapabilityInvoker } from "./remote/capability-invoker";
+import { apiClient } from "../../../api-client";
+import { cloudNewsParams, mapCloudNewsArticle } from "../../../sources/gloomberb-cloud/news";
 
 const servicesLog = debugLog.createLogger("services");
 
-export function createElectrobunAppServices({ config }: AppServicesFactoryOptions): AppRuntimeServices {
+export function createElectrobunAppServices({ config, plugins }: AppServicesFactoryOptions): AppRuntimeServices {
   servicesLog.info("create desktop web services start", {
     brokerInstanceCount: config.brokerInstances.length,
   });
@@ -54,10 +55,20 @@ export function createElectrobunAppServices({ config }: AppServicesFactoryOption
     priority: 0,
     provider: {
       fetchNews: (query) => dataProvider.getNews(query),
+      fetchNewsPage: async (query) => {
+        try {
+          const response = await apiClient.getCloudNews(cloudNewsParams(query));
+          return {
+            articles: response.items.map((item) => mapCloudNewsArticle(item, query.ticker)),
+            nextCursor: response.nextCursor ?? null,
+          };
+        } catch {
+          return { articles: await dataProvider.getNews(query), nextCursor: null };
+        }
+      },
     },
   }));
 
-  const plugins = getRendererBuiltinPlugins();
   const pluginReadyPromises: Promise<void>[] = [];
   for (const plugin of plugins) {
     pluginReadyPromises.push(measurePerfAsync("startup.services.register-plugin", () => (

package/src/renderers/electrobun/view/build-assets.ts

@@ -2,7 +2,7 @@ import { readFile, writeFile } from "fs/promises";
 import { join, relative } from "path";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../../../components/layout/titlebar-overlay";
 
-type AliasRule = readonly [string, string] | readonly [string, string, string];
+export type AliasRule = readonly [string, string] | readonly [string, string, string];
 type PageOptions = {
   entrypoint: string;
   outdir: string;
@@ -61,15 +61,7 @@ async function buildElectrobunViewBundle({
       // already reads from the environment is baked in at build time.
       __GLOOMBERB_API_URL__: JSON.stringify(process.env.GLOOMBERB_API_URL ?? ""),
     },
-    plugins: [
-      {
-        name: pluginName,
-        setup(build) {
-          const aliasRules = [...extraAliasRules, ...COMMON_ALIAS_RULES];
-          build.onResolve({ filter: /.*/ }, (args) => resolveAlias(args, aliasRules));
-        },
-      },
-    ],
+    plugins: [electrobunViewAliasPlugin(pluginName, extraAliasRules)],
   });
 
   if (!result.success) {
@@ -113,6 +105,16 @@ ${bootstrapScript}
 `;
 }
 
+export function electrobunViewAliasPlugin(name: string, extraAliasRules: AliasRule[] = []) {
+  return {
+    name,
+    setup(build: { onResolve(options: { filter: RegExp }, callback: (args: { path: string; importer?: string }) => unknown): void }) {
+      const aliasRules = [...extraAliasRules, ...COMMON_ALIAS_RULES];
+      build.onResolve({ filter: /.*/ }, (args) => resolveAlias(args, aliasRules));
+    },
+  };
+}
+
 function resolveAlias(args: { path: string; importer?: string }, aliasRules: AliasRule[]) {
   const importer = args.importer?.replaceAll("\\", "/");
   for (const rule of aliasRules) {

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

@@ -546,7 +546,7 @@ function ShotPane({ payload }: { payload: CliPaneShotPayload }) {
     config: payload.config,
     paneState: payload.paneState,
   } as Pick<AppState, "config" | "paneState">;
-  const title = getPaneDisplayTitle(titleState, instance, pane);
+  const title = getPaneDisplayTitle(titleState, instance, pane, shotRegistry?.panes);
   const width = payload.widthCells;
   const height = payload.heightCells;
   const bodyFrame = resolvePaneBodyFrame({

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

@@ -140,6 +140,7 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   }, [emitVisibleRange, onBodyScrollActivity]);
   const scheduleBodyScrollActivity = useRafCallback(handleBodyScrollActivity);
   const scheduleVisibleRangeMeasure = useRafCallback(emitVisibleRange);
+  const lastAppliedScrollRequestRef = useRef<string | null>(null);
 
   const rowVirtualizer = useVirtualizer({
     count: items.length,
@@ -203,7 +204,12 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
   // then converted to pixels. Letting the virtualizer scroll by pixels landed
   // mid-row and clipped the first and last visible rows into slivers.
   useEffect(() => {
-    if (scrollToIndex == null || items.length === 0) return;
+    if (scrollToIndex == null || items.length === 0) {
+      lastAppliedScrollRequestRef.current = null;
+      return;
+    }
+    const scrollRequestKey = `${scrollToIndex}:${scrollToIndexVersion}:${scrollToIndexAlign}`;
+    if (lastAppliedScrollRequestRef.current === scrollRequestKey) return;
     const targetIndex = Math.max(0, Math.min(scrollToIndex, items.length - 1));
     const element = bodyElementRef.current;
     if (!element) return;
@@ -219,13 +225,16 @@ export function WebDataTable<T, C extends DataTableColumn = DataTableColumn>({
     }
     if (nextTop !== currentTop) {
       element.scrollTop = nextTop * WEB_CELL_HEIGHT;
+      scheduleBodyScrollActivity();
     }
+    lastAppliedScrollRequestRef.current = scrollRequestKey;
     scheduleVisibleRangeMeasure();
   }, [
     items.length,
     scrollToIndex,
     scrollToIndexAlign,
     scrollToIndexVersion,
+    scheduleBodyScrollActivity,
     scheduleVisibleRangeMeasure,
   ]);
 

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

@@ -216,6 +216,7 @@ export function WebTextField({
   onBlur,
   hint,
   type = "text",
+  autoComplete,
   variant = "default",
   backgroundColor,
   textColor,
@@ -273,6 +274,7 @@ export function WebTextField({
           width="100%"
           value={value}
           type={type}
+          autoComplete={autoComplete}
           placeholder={placeholder}
           focused={focused}
           textColor={resolvedTextColor}

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

@@ -0,0 +1,143 @@
+/** @jsxImportSource react */
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import type { UiHost } from "../../../ui/host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "./input-host";
+import { WebDataTable } from "./data-table";
+import {
+  WebButton,
+  WebCheckbox,
+  WebDialogFrame,
+  WebListView,
+  WebMessageComposer,
+  WebPageStackView,
+  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 { WebScrollBox } from "./host/scroll-box";
+import { cleanDomProps, commonStyle } from "./host/style";
+import { WebAsciiText, WebSpan, WebStrong, WebText, WebUnderline } from "./host/text";
+import { WebTabs } from "./host/tabs";
+
+function currentDesktopPlatform(): string {
+  const navigatorWithUserAgentData = navigator as Navigator & {
+    userAgentData?: { platform?: string };
+  };
+  return [
+    navigatorWithUserAgentData.userAgentData?.platform,
+    navigator.platform,
+    navigator.userAgent,
+  ].filter((value): value is string => Boolean(value)).join(" ");
+}
+
+const DESKTOP_PLATFORM = currentDesktopPlatform();
+const USES_WINDOWS_CONTROLS = !/(darwin|ipad|iphone|linux|mac)/i.test(DESKTOP_PLATFORM);
+const NON_WINDOWS_DESKTOP_PLATFORMS = /^(darwin|linux|freebsd|openbsd|aix|sunos)$/i;
+
+function usesWindowsWindowControls(desktopPlatform?: string): boolean {
+  const platform = desktopPlatform?.trim();
+  if (!platform) return USES_WINDOWS_CONTROLS;
+  if (/^win/i.test(platform)) return true;
+  if (NON_WINDOWS_DESKTOP_PLATFORMS.test(platform)) return false;
+  return USES_WINDOWS_CONTROLS;
+}
+
+export function createDomUiHost(
+  desktopPlatform?: string,
+  options: {
+    nativeContextMenu?: boolean;
+    titleBarOverlay?: boolean;
+    nativePaneChrome?: boolean;
+    nativeWindowChrome?: boolean;
+    publicSharing?: boolean;
+  } = {},
+): UiHost {
+  const usesWindowsControls = options.titleBarOverlay !== false
+    && options.nativeWindowChrome !== false
+    && usesWindowsWindowControls(desktopPlatform);
+  return {
+    kind: "desktop-web",
+    capabilities: {
+      nativePaneChrome: options.nativePaneChrome ?? true,
+      titleBarOverlay: options.titleBarOverlay ?? true,
+      nativeWindowChrome: options.nativeWindowChrome ?? true,
+      publicSharing: options.publicSharing ?? false,
+      precisePointer: true,
+      fractionalViewport: true,
+      cellWidthPx: WEB_CELL_WIDTH,
+      cellHeightPx: WEB_CELL_HEIGHT,
+      pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+      canvasCharts: true,
+      nativeContextMenu: options.nativeContextMenu ?? false,
+      windowControls: usesWindowsControls ? "windows" : undefined,
+    },
+    Box: WebBox,
+    Text: WebText,
+    Span: WebSpan,
+    Strong: WebStrong,
+    Underline: WebUnderline,
+    ScrollBox: WebScrollBox,
+    Input: WebInput,
+    Textarea: WebTextarea,
+    Button: WebButton,
+    Checkbox: WebCheckbox,
+    Popover: WebPopover,
+    TextField: WebTextField,
+    MessageComposer: WebMessageComposer,
+    ListView: WebListView,
+    SegmentedControl: WebSegmentedControl,
+    DialogFrame: WebDialogFrame,
+    PageStackView: WebPageStackView,
+    DataTable: WebDataTable,
+    Tabs: WebTabs,
+    ChartSurface: WebChartSurface,
+    ImageSurface: ({ children, src, alt = "", objectFit = "contain", ...props }) => {
+      const imageSrc = typeof src === "string" ? src.trim() : "";
+      const [failed, setFailed] = useState(false);
+      useEffect(() => setFailed(false), [imageSrc]);
+      const baseStyle = commonStyle(props);
+      return (
+        <div
+          {...cleanDomProps(props)}
+          style={{
+            ...baseStyle,
+            overflow: baseStyle.overflow ?? "hidden",
+            ...(props.style as CSSProperties | undefined),
+          }}
+        >
+          {imageSrc && !failed ? (
+            <img
+              key={imageSrc}
+              src={imageSrc}
+              alt={alt}
+              draggable={false}
+              onError={() => setFailed(true)}
+              style={{ width: "100%", height: "100%", display: "block", objectFit }}
+            />
+          ) : children as ReactNode}
+        </div>
+      );
+    },
+    MediaSurface: WebMediaSurface,
+    SpinnerMark: ({ color, ...props }) => (
+      <span
+        {...cleanDomProps(props)}
+        aria-hidden="true"
+        style={{
+          color,
+          display: "inline-block",
+          width: "1ch",
+          animation: "gloom-spin 0.9s steps(8) infinite",
+          ...(props.style as CSSProperties | undefined),
+        }}
+      >
+        *
+      </span>
+    ),
+    AsciiText: (props) => <WebAsciiText {...props} desktopPlatform={desktopPlatform} />,
+  };
+}

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

@@ -71,6 +71,39 @@ test("reports a drag as a drag, never as a move, and keeps its modifiers", async
   expect(modifiers.every((entry) => entry.shift)).toBe(true);
 });
 
+test("chart surfaces consume browser pan and zoom gestures", async () => {
+  const directions: string[] = [];
+  const container = testWindow.document.createElement("div");
+  testWindow.document.body.appendChild(container);
+  const root = createRoot(container as unknown as HTMLElement);
+  await act(async () => {
+    root.render(
+      <WebChartSurface
+        width={40}
+        height={10}
+        onMouseScroll={(event: { scroll?: { direction?: string }; preventDefault: () => void }) => {
+          directions.push(event.scroll?.direction ?? "");
+          event.preventDefault();
+        }}
+      />,
+    );
+  });
+
+  const surface = container.firstElementChild as unknown as HTMLElement;
+  const wheel = new testWindow.WheelEvent("wheel", {
+    bubbles: true,
+    cancelable: true,
+    deltaX: 24,
+  });
+  expect(surface.dispatchEvent(wheel as never)).toBe(false);
+  expect(wheel.defaultPrevented).toBe(true);
+  expect(directions).toEqual(["right"]);
+  expect(surface.style.touchAction).toBe("none");
+  expect(surface.style.overscrollBehavior).toBe("none");
+
+  await act(async () => root.unmount());
+});
+
 test("a tab bar occupies exactly the one row panes reserve for it", async () => {
   const { WebTabs } = await import("./tabs");
   const { WEB_CELL_HEIGHT } = await import("../input-host");

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

@@ -8,7 +8,6 @@ import {
   type MouseEvent,
   type ReactNode,
   type Ref,
-  type WheelEvent as ReactWheelEvent,
 } from "react";
 import {
   type CellMouseEvent,
@@ -96,6 +95,17 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       document.body.classList.remove("gloom-dragging");
     }, []);
 
+    const handlesWheel = typeof props.onMouseScroll === "function";
+    useEffect(() => {
+      const element = elementRef.current;
+      if (!element || !handlesWheel) return;
+      const handleWheel = (event: WheelEvent) => {
+        callMouseHandler(propsRef.current.onMouseScroll, event, "scroll");
+      };
+      element.addEventListener("wheel", handleWheel, { passive: false });
+      return () => element.removeEventListener("wheel", handleWheel);
+    }, [handlesWheel]);
+
     const stopDocumentDrag = () => {
       if (!draggingRef.current) return;
       draggingRef.current = false;
@@ -136,10 +146,6 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       callMouseHandler(propsRef.current.onMouseDownCapture, event, "down");
     };
 
-    const handleWheel = (event: ReactWheelEvent<HTMLDivElement>) => {
-      callMouseHandler(propsRef.current.onMouseScroll, event, "scroll");
-    };
-
     const handleMouseOver = (event: MouseEvent) => {
       callMouseHandler(propsRef.current.onMouseOver, event, "over");
     };
@@ -160,7 +166,6 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
         onMouseMove={(event) => scheduleFrameMouseHandler(event, "move")}
         onMouseUp={(event) => callMouseHandler(propsRef.current.onMouseUp, event, "up")}
         onMouseOut={handleMouseOut}
-        onWheel={typeof props.onMouseScroll === "function" ? handleWheel : undefined}
         style={{
           ...commonStyle(props),
           "--gloom-box-hover-bg": hoverBackgroundColor,

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

@@ -211,7 +211,13 @@ export const WebChartSurface = forwardRef<BoxRenderable, Record<string, unknown>
         {...props}
         ref={ref as Ref<HTMLDivElement>}
         data-gloom-role={(props["data-gloom-role"] as string | undefined) ?? "chart-surface"}
-        style={{ position: "relative", overflow: "hidden", ...(props.style as CSSProperties | undefined) }}
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          touchAction: "none",
+          overscrollBehavior: "none",
+          ...(props.style as CSSProperties | undefined),
+        }}
       >
         {layers.length > 0
           ? layers.map((layer, index) => (

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

@@ -10,9 +10,9 @@ import {
   type KeyboardEvent,
   type RefObject,
 } from "react";
-import type { InputRenderable, TextareaRenderable } from "../../../../ui/host";
+import { editableTextContextMenuItems } from "../../../../ui/context-menu";
+import { useRendererHost, useUiCapabilities, type InputRenderable, type TextareaRenderable } from "../../../../ui/host";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
-import { NATIVE_CONTEXT_MENU_SUPPORTED, showEditableTextContextMenu } from "./native";
 import { cellHeight, cellWidth, cleanDomProps, commonStyle } from "./style";
 
 function textInputStyle(props: Record<string, unknown>, multiline: boolean): CSSProperties {
@@ -205,6 +205,8 @@ function textareaMetrics(
 }
 
 export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(function WebInput(props, ref) {
+  const renderer = useRendererHost();
+  const { nativeContextMenu } = useUiCapabilities();
   const elementRef = useRef<HTMLInputElement | null>(null);
   const propsRef = useLatestRef(props);
   const { value, valueRef, setValue } = useEditableValue(props);
@@ -271,7 +273,7 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
       value={value}
       autoCorrect="off"
       autoCapitalize="off"
-      autoComplete="off"
+      autoComplete={getStringProp(props, "autoComplete") ?? "off"}
       spellCheck={false}
       placeholder={getStringProp(props, "placeholder")}
       onInput={(event) => handleValueChange(event.currentTarget.value)}
@@ -287,11 +289,11 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
       }}
       onKeyDown={handleKeyDown}
       onContextMenu={(event) => {
-        if (!NATIVE_CONTEXT_MENU_SUPPORTED) return;
+        if (!nativeContextMenu || !renderer.showContextMenu) return;
         elementRef.current?.focus();
         event.preventDefault();
         event.stopPropagation();
-        void showEditableTextContextMenu();
+        void renderer.showContextMenu(editableTextContextMenuItems());
       }}
       onSelect={() => {
         setCursorOffset(elementRef.current?.selectionStart ?? valueRef.current.length);
@@ -303,6 +305,8 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
 });
 
 export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown>>(function WebTextarea(props, ref) {
+  const renderer = useRendererHost();
+  const { nativeContextMenu } = useUiCapabilities();
   const elementRef = useRef<HTMLTextAreaElement | null>(null);
   const propsRef = useLatestRef(props);
   const { value, valueRef, setValue } = useEditableValue(props);
@@ -400,11 +404,11 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
       }}
       onKeyDown={handleKeyDown}
       onContextMenu={(event) => {
-        if (!NATIVE_CONTEXT_MENU_SUPPORTED) return;
+        if (!nativeContextMenu || !renderer.showContextMenu) return;
         elementRef.current?.focus();
         event.preventDefault();
         event.stopPropagation();
-        void showEditableTextContextMenu();
+        void renderer.showContextMenu(editableTextContextMenuItems());
       }}
       onSelect={() => {
         setCursorOffset(elementRef.current?.selectionStart ?? valueRef.current.length);

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

@@ -1,5 +1,4 @@
 import type { ContextMenuItem } from "../../../../types/context-menu";
-import { editableTextContextMenuItems } from "../../../../ui/context-menu";
 import { backendRequest, onContextMenuSelect } from "../backend-rpc";
 import {
   DesktopContextMenuActionScope,
@@ -42,7 +41,3 @@ export async function showDesktopContextMenu(items: ContextMenuItem[]): Promise<
     return false;
   }
 }
-
-export function showEditableTextContextMenu(): Promise<boolean> {
-  return showDesktopContextMenu(editableTextContextMenuItems());
-}

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

@@ -30,6 +30,7 @@ import { createDesktopDeepLinkBridge } from "./desktop-deeplink-bridge";
 import { createDesktopWindowBridge } from "./desktop/window/bridge";
 import { prepareDetachedSnapshot } from "./desktop/window/snapshot";
 import { createElectrobunAppServices } from "./app-services";
+import { getRendererBuiltinPlugins } from "../../../plugins/catalog-ui";
 
 const rootElement = document.getElementById("root");
 if (!rootElement) {
@@ -112,6 +113,7 @@ async function boot() {
                 <App
                   config={config}
                   servicesFactory={createElectrobunAppServices}
+                  plugins={getRendererBuiltinPlugins()}
                   desktopWindowBridge={desktopWindowBridge}
                   desktopApplicationMenuBridge={desktopApplicationMenuBridge}
                   desktopDeepLinkBridge={desktopDeepLinkBridge}

package/src/renderers/electrobun/view/remote/persistence.ts

@@ -77,6 +77,11 @@ class RemotePluginStateStore {
     if (!this.state.has(pluginId)) this.state.set(pluginId, new Map());
     this.state.get(pluginId)!.set(key, value);
     this.getScheduler(pluginId, key).schedule({ pluginId, key, value, schemaVersion });
+    // Closing the window tears down the RPC before a debounced save can land.
+    // Auth has to reach SQLite immediately or the next launch is signed out.
+    if (key === "session" || key === "resume:session") {
+      void this.flush();
+    }
   }
 
   delete(pluginId: string, key: string): void {