gloomberb 0.11.2 → 0.12.0

package/src/renderers/electrobun/bun/external-plugins.ts

@@ -0,0 +1,140 @@
+import { readdir, stat } from "fs/promises";
+import { existsSync } from "fs";
+import { join } from "path";
+
+import type { DesktopExternalPluginBundle } from "../shared/protocol";
+import { bundleExternalPlugin, pluginBundleCacheDir } from "../../../plugins/bundle";
+import { linkHostPackages } from "../../../plugins/host-link";
+import { getPluginsDir, resolvePluginEntry } from "../../../plugins/loader";
+import type { GloomPlugin } from "../../../types/plugin";
+import { debugLog } from "../../../utils/debug-log";
+
+const log = debugLog.createLogger("desktop-plugins");
+
+/**
+ * Prepares external plugins for the desktop view.
+ *
+ * The view is a browser context and cannot read `~/.gloomberb/plugins`, so the
+ * Bun process does both halves here: it imports each plugin natively to read
+ * its metadata, and compiles it to an ES module the view can evaluate.
+ *
+ * Bundling is cached against the newest mtime in the plugin directory. Without
+ * that, every window open would recompile every plugin, which is slow enough to
+ * be visible at startup.
+ */
+
+interface CacheEntry {
+  mtimeMs: number;
+  code: string;
+}
+
+const bundleCache = new Map<string, CacheEntry>();
+
+async function newestMtime(dir: string): Promise<number> {
+  let newest = 0;
+  const walk = async (current: string, depth: number): Promise<void> => {
+    if (depth > 6) return;
+    for (const entry of await readdir(current, { withFileTypes: true })) {
+      if (entry.name === "node_modules" || entry.name === ".git") continue;
+      const full = join(current, entry.name);
+      if (entry.isDirectory()) {
+        await walk(full, depth + 1);
+        continue;
+      }
+      const info = await stat(full);
+      if (info.mtimeMs > newest) newest = info.mtimeMs;
+    }
+  };
+  await walk(dir, 0);
+  return newest;
+}
+
+async function readPluginMetadata(entryFile: string): Promise<GloomPlugin | null> {
+  try {
+    const mod = await import(entryFile);
+    const plugin: GloomPlugin = mod.default ?? mod.plugin;
+    return plugin?.id && plugin?.name ? plugin : null;
+  } catch (error) {
+    log.error(`Metadata read failed for ${entryFile}: ${error}`);
+    return null;
+  }
+}
+
+export async function collectExternalPluginBundles(): Promise<DesktopExternalPluginBundle[]> {
+  const pluginsDir = getPluginsDir();
+  if (!existsSync(pluginsDir)) return [];
+
+  const outDir = pluginBundleCacheDir(join(pluginsDir, ".cache"));
+  const bundles: DesktopExternalPluginBundle[] = [];
+
+  for (const entry of await readdir(pluginsDir, { withFileTypes: true })) {
+    if (!entry.isDirectory() || entry.name.startsWith(".")) continue;
+    const pluginDir = join(pluginsDir, entry.name);
+
+    const entryFile = await resolvePluginEntry(pluginDir);
+    if (!entryFile) continue;
+
+    linkHostPackages(pluginDir);
+
+    const plugin = await readPluginMetadata(entryFile);
+    const base = {
+      id: plugin?.id ?? entry.name,
+      name: plugin?.name ?? entry.name,
+      version: plugin?.version ?? "0.0.0",
+      path: pluginDir,
+      ...(plugin?.targets ? { targets: plugin.targets } : {}),
+    };
+
+    if (!plugin) {
+      bundles.push({ ...base, error: "Plugin did not export a valid GloomPlugin." });
+      continue;
+    }
+
+    // Skip compiling something the desktop cannot run anyway; the marketplace
+    // still lists it, explaining why it is inert.
+    if (plugin.targets && !plugin.targets.includes("desktop")) {
+      bundles.push({ ...base, error: `${plugin.name} does not support the desktop app.` });
+      continue;
+    }
+
+    try {
+      const mtimeMs = await newestMtime(pluginDir);
+      const cached = bundleCache.get(pluginDir);
+      if (cached && cached.mtimeMs === mtimeMs) {
+        bundles.push({ ...base, code: cached.code });
+        continue;
+      }
+
+      const result = await bundleExternalPlugin(pluginDir, join(outDir, entry.name));
+      const code = await Bun.file(result.outputPath).text();
+      bundleCache.set(pluginDir, { mtimeMs, code });
+      log.info(`Bundled ${plugin.id} (${Math.round(code.length / 1024)}KB, shared: ${result.shared.join(", ")})`);
+      bundles.push({ ...base, code });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      log.error(`Bundling ${plugin.id} failed: ${message}`);
+      bundles.push({ ...base, error: message });
+    }
+  }
+
+  return bundles;
+}
+
+/**
+ * Installs a plugin on behalf of the desktop view, which cannot run git or bun
+ * itself. Errors are returned rather than thrown so the marketplace can show
+ * them next to the plugin instead of surfacing an RPC failure.
+ *
+ * The bundle cache is cleared so the next `plugins.listExternal` compiles the
+ * newly installed plugin rather than serving a stale set.
+ */
+export async function installExternalPlugin(ref: string): Promise<{ ok: boolean; error?: string }> {
+  try {
+    const { installPlugin } = await import("../../../cli/commands/plugins");
+    await installPlugin(ref, { quiet: true });
+    bundleCache.clear();
+    return { ok: true };
+  } catch (error) {
+    return { ok: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}

package/src/renderers/electrobun/bun/index.ts

@@ -25,7 +25,6 @@ import type { DesktopWorkspace } from "./desktop/workspace";
 import { buildDesktopApplicationMenu } from "./application-menu";
 import { applicationMenuCommand } from "./application-menu/click";
 import { registerElectrobunCoreCapabilities } from "./core-capabilities";
-import { setNativeIbkrGatewayModuleLoader } from "../../../plugins/ibkr/gateway/service";
 import {
   runElectrobunDesktopUpdate,
 } from "./desktop/update";
@@ -37,6 +36,7 @@ import {
 } from "./window/frame";
 import { MAIN_WINDOW_RPC_KEY } from "./window/focus";
 import { handleHttpFetch } from "./desktop/http-fetch";
+import { collectExternalPluginBundles, installExternalPlugin } from "./external-plugins";
 import { handleDesktopPluginStateRequest } from "./desktop/plugin-state";
 import { scheduleDesktopRelaunch } from "./desktop/relaunch";
 import {
@@ -72,7 +72,6 @@ console.info = (...args) => console.error(...args);
 console.warn = (...args) => console.error(...args);
 
 setConfigStoreHost(nodeConfigStoreHost);
-setNativeIbkrGatewayModuleLoader(() => import("../../../plugins/ibkr/gateway/service/native"));
 
 let currentConfig: AppConfig | null = null;
 let services: AppServices | null = null;
@@ -468,6 +467,10 @@ async function handleBackendRequest(
     case "pluginState.setMany":
     case "pluginState.delete":
       return handleDesktopPluginStateRequest(requireServices().persistence.pluginState, request);
+    case "plugins.listExternal":
+      return collectExternalPluginBundles();
+    case "plugins.install":
+      return installExternalPlugin(request.payload.ref);
     case "host.restart":
     case "host.exit":
     case "host.windowControl":
@@ -476,6 +479,7 @@ async function handleBackendRequest(
     case "host.focusWindow":
     case "host.copyPngImage":
     case "host.readText":
+    case "host.saveTextFile":
     case "host.notify":
     case "host.showContextMenu":
       return handleDesktopHostRequest({

package/src/renderers/electrobun/shared/protocol.ts

@@ -83,6 +83,25 @@ export interface DesktopCapabilitySubscribeRequest extends DesktopCapabilityInvo
   subscriptionId: string;
 }
 
+/**
+ * One external plugin, compiled for the view.
+ *
+ * The Bun process owns the filesystem, so it reads and bundles the plugin and
+ * hands the view executable module text. `error` is carried rather than thrown
+ * so a single broken plugin surfaces in the marketplace instead of taking down
+ * the renderer.
+ */
+export interface DesktopExternalPluginBundle {
+  id: string;
+  name: string;
+  version: string;
+  path: string;
+  /** ES module source, absent when `error` is set. */
+  code?: string;
+  targets?: readonly ("cli" | "tui" | "desktop" | "web")[];
+  error?: string;
+}
+
 export interface DesktopBackendRequestMap {
   init: {
     request: { kind?: "main" | "detached"; paneId?: string };
@@ -111,6 +130,8 @@ export interface DesktopBackendRequestMap {
   "pluginState.set": { request: DesktopPluginStateSetEntry; response: null };
   "pluginState.setMany": { request: { entries: DesktopPluginStateSetEntry[] }; response: null };
   "pluginState.delete": { request: { pluginId: string; key: string }; response: null };
+  "plugins.listExternal": { request: null; response: DesktopExternalPluginBundle[] };
+  "plugins.install": { request: { ref: string }; response: { ok: boolean; error?: string } };
   "host.restart": { request: DesktopRestartMessage; response: null };
   "host.exit": { request: null; response: null };
   "host.windowControl": { request: { action: DesktopWindowControlAction }; response: null };
@@ -119,6 +140,10 @@ export interface DesktopBackendRequestMap {
   "host.focusWindow": { request: null; response: null };
   "host.copyPngImage": { request: { pngBase64: string }; response: null };
   "host.readText": { request: null; response: string };
+  "host.saveTextFile": {
+    request: { name: string; text: string; mimeType: string };
+    response: string;
+  };
   "host.notify": {
     request: { title?: string; body?: string; subtitle?: string; sound?: string };
     response: null;

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

@@ -23,7 +23,6 @@ const COMMON_ALIAS_RULES: AliasRule[] = [
   ["./kitty/support", "components/chart/native/renderer-selection.ts", "native-stubs/chart/kitty-support.ts"],
   ["native/surface/manager", "native-stubs/chart/surface-manager.ts"],
   ["native/surface/sync", "native-stubs/chart/surface-sync.ts"],
-  ["./native-loader", "plugins/ibkr/gateway/service/index.ts", "native-stubs/ibkr-native-loader.ts"],
   ["./native-loader", "plugins/broker-sync/robinhood.ts", "native-stubs/broker-sync-native-loader.ts"],
   ["./native-loader", "plugins/broker-sync/simplefin.ts", "native-stubs/broker-sync-native-loader.ts"],
 ];

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

@@ -41,9 +41,14 @@ import type { AppState, PaneRuntimeState } from "../../../core/state/app/state";
 import type { PaneDef } from "../../../types/plugin";
 import { canonicalTickerKey, parsePublicTickerKey } from "../../../utils/exchanges";
 import { hydrateFredSeries, type FredSeriesCacheEntry } from "../../../data/fred-series";
+import { hydrateValuationSeries } from "../../../plugins/builtin/market-valuation/cache";
+import { statsCache } from "../../../plugins/builtin/econ-statistics/cache";
+import type { DatedObservation } from "../../../plugins/builtin/market-valuation/series";
 import { clipPriceHistoryToRange } from "../../../time-series/history-window";
 import type { ResolvedSeries } from "../../../time-series/types";
 import { chartSeriesSourceKey } from "../../../capabilities";
+import { apiClient, setCloudApiFetchTransport } from "../../../api-client";
+import { createGloomberbCloudProvider } from "../../../sources/gloomberb-cloud";
 
 interface CliPaneShotPayload {
   config: AppConfig;
@@ -54,6 +59,8 @@ interface CliPaneShotPayload {
   financials: Array<[string, TickerFinancials]>;
   optionsChains: Array<[string, OptionsChain]>;
   fredSeries: Array<[string, FredSeriesCacheEntry]>;
+  valuationSeries: Array<[string, DatedObservation[]]>;
+  statSeries: Array<[string, DatedObservation[]]>;
   capabilitySeries: Array<[string, ResolvedSeries]>;
   paneState: Record<string, PaneRuntimeState>;
 }
@@ -77,6 +84,7 @@ 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__";
 const TRACKED_RESPONSE_METHODS = new Set<PropertyKey>([
   "arrayBuffer",
   "blob",
@@ -141,6 +149,29 @@ function installShotFetchTracker(): void {
   )) as typeof fetch;
 }
 
+function installShotCloudApiTransport(): void {
+  apiClient.setCookieSessionMode(true);
+  setCloudApiFetchTransport((url, init = {}) => {
+    const upstream = new URL(url);
+    const proxyUrl = new URL(`${SHOT_API_PROXY_PREFIX}${upstream.pathname}`, window.location.origin);
+    proxyUrl.search = upstream.search;
+    const headers = new Headers(init.headers);
+    // Bun owns the real session cookie. The browser only talks to the local
+    // same-origin proxy and never receives or serializes the credential.
+    headers.delete("Cookie");
+    headers.delete("Origin");
+    return window.fetch(proxyUrl, {
+      ...init,
+      headers,
+      credentials: "same-origin",
+    });
+  });
+}
+
+async function restoreShotCloudSession(): Promise<void> {
+  await apiClient.getSession().catch(() => null);
+}
+
 function resolveShotWork<T>(value: T): Promise<T> {
   return trackShotWork(Promise.resolve(value));
 }
@@ -249,7 +280,7 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
     return data;
   };
 
-  return {
+  const injectedProvider: DataProvider = {
     id: "cli-shot",
     name: "CLI screenshot data",
     getTickerFinancials(ticker, exchange) {
@@ -330,6 +361,19 @@ function createShotDataProvider(payload: CliPaneShotPayload): DataProvider {
       return () => {};
     },
   };
+
+  // Keep deterministic payload data for the mapped screenshot capabilities,
+  // then fall through to the authenticated cloud provider for operations such
+  // as SEC filings that live panes request through market-data hooks.
+  const cloudProvider = createGloomberbCloudProvider();
+  return new Proxy(injectedProvider, {
+    get(target, property, receiver) {
+      const local = Reflect.get(target, property, receiver);
+      if (local !== undefined) return local;
+      const cloud = Reflect.get(cloudProvider, property, cloudProvider);
+      return typeof cloud === "function" ? cloud.bind(cloudProvider) : cloud;
+    },
+  });
 }
 
 function installShotMarketData(payload: CliPaneShotPayload): void {
@@ -586,11 +630,17 @@ async function render() {
   if (!payload) throw new Error("Missing CLI pane screenshot payload.");
   revivePayloadDates(payload);
   installShotFetchTracker();
+  installShotCloudApiTransport();
   hydrateFredSeries(payload.fredSeries ?? []);
+  hydrateValuationSeries(payload.valuationSeries ?? []);
+  statsCache.hydrate(payload.statSeries ?? []);
   installShotMarketData(payload);
   // Panes contributed from an async setup() only exist once every plugin has
   // finished registering, so the tree cannot mount before that resolves.
   await installShotPluginRegistry(payload);
+  // Plugin setup hydrates its in-memory persistence and may reset apiClient.
+  // Restore the proxied cloud session only after registration is complete.
+  await restoreShotCloudSession();
 
   const rootElement = document.getElementById("root");
   if (!rootElement) throw new Error("Missing root element.");

package/src/renderers/electrobun/view/external-plugins.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, test } from "bun:test";
+
+import { loadDesktopExternalPlugins } from "./external-plugins";
+import type { DesktopExternalPluginBundle } from "../shared/protocol";
+
+/**
+ * The guarantee under test is containment: a plugin that fails to compile, ships
+ * no bundle, or exports the wrong shape must surface as a broken entry the
+ * marketplace can explain, never as an exception that stops the desktop app from
+ * starting. Every case here is one a user can hit by installing a bad plugin.
+ */
+function bundle(overrides: Partial<DesktopExternalPluginBundle>): DesktopExternalPluginBundle {
+  return { id: "x", name: "X", version: "1.0.0", path: "/tmp/x", ...overrides };
+}
+
+describe("loadDesktopExternalPlugins", () => {
+  test("does nothing when there is nothing to load", async () => {
+    expect(await loadDesktopExternalPlugins([])).toEqual([]);
+  });
+
+  test("carries a compile error through instead of throwing", async () => {
+    const [entry] = await loadDesktopExternalPlugins([
+      bundle({ id: "broken", error: "Could not resolve ./nope" }),
+    ]);
+
+    expect(entry?.error).toBe("Could not resolve ./nope");
+    expect(entry?.plugin.id).toBe("broken");
+  });
+
+  test("reports a bundle that arrived without code", async () => {
+    const [entry] = await loadDesktopExternalPlugins([bundle({ id: "empty" })]);
+
+    expect(entry?.error).toContain("no bundle");
+  });
+
+  test("keeps loading the rest after one plugin fails", async () => {
+    const entries = await loadDesktopExternalPlugins([
+      bundle({ id: "first", error: "boom" }),
+      bundle({ id: "second", error: "also boom" }),
+    ]);
+
+    expect(entries.map((entry) => entry.plugin.id)).toEqual(["first", "second"]);
+    expect(entries.every((entry) => entry.error)).toBe(true);
+  });
+});

package/src/renderers/electrobun/view/external-plugins.ts

@@ -0,0 +1,63 @@
+import type { DesktopExternalPluginBundle } from "../shared/protocol";
+import { installPluginHostModules } from "../../../plugins/host-modules";
+import type { LoadedExternalPlugin } from "../../../plugins/loader";
+import type { GloomPlugin } from "../../../types/plugin";
+import { debugLog } from "../../../utils/debug-log";
+
+const log = debugLog.createLogger("desktop-plugins");
+
+/**
+ * Evaluates the plugin bundles the Bun process compiled for this view.
+ *
+ * The host's shared modules have to be published before any bundle is imported:
+ * a compiled plugin's `react` and `gloomberb/*` imports read from that registry
+ * rather than carrying their own copies (see `plugins/bundle.ts`).
+ *
+ * Bundles are imported from blob URLs. The desktop view has no origin to fetch
+ * from and no filesystem, and writing them to a served directory would mean
+ * managing a cache the renderer cannot clean up reliably.
+ */
+export async function loadDesktopExternalPlugins(
+  bundles: readonly DesktopExternalPluginBundle[],
+): Promise<LoadedExternalPlugin[]> {
+  if (bundles.length === 0) return [];
+
+  await installPluginHostModules();
+
+  const loaded: LoadedExternalPlugin[] = [];
+
+  for (const bundle of bundles) {
+    const fallback = {
+      plugin: { id: bundle.id, name: bundle.name, version: bundle.version } as GloomPlugin,
+      path: bundle.path,
+    };
+
+    if (bundle.error || !bundle.code) {
+      loaded.push({ ...fallback, error: bundle.error ?? "Plugin produced no bundle." });
+      continue;
+    }
+
+    let objectUrl: string | null = null;
+    try {
+      objectUrl = URL.createObjectURL(new Blob([bundle.code], { type: "text/javascript" }));
+      const mod = await import(/* @vite-ignore */ objectUrl);
+      const plugin: GloomPlugin = mod.default ?? mod.plugin;
+      if (!plugin?.id || !plugin?.name) {
+        loaded.push({ ...fallback, error: "Bundle did not export a valid GloomPlugin." });
+        continue;
+      }
+      log.info(`Loaded external plugin: ${plugin.id} v${plugin.version ?? "0.0.0"}`);
+      loaded.push({ plugin, path: bundle.path });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      log.error(`Evaluating ${bundle.id} failed: ${message}`);
+      loaded.push({ ...fallback, error: message });
+    } finally {
+      // The module graph keeps its own reference once imported, so the URL can
+      // be released immediately; leaving it would leak for the session.
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    }
+  }
+
+  return loaded;
+}

package/src/renderers/electrobun/view/host/ascii-text.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { webAsciiTextWordmarkVariant } from "./ascii-text";
+
+const globalWithNavigator = globalThis as { navigator?: unknown };
+const originalNavigator = Object.getOwnPropertyDescriptor(globalThis, "navigator");
+
+function stubNavigator(platform: string): void {
+  Object.defineProperty(globalThis, "navigator", {
+    value: { platform, userAgent: platform },
+    configurable: true,
+    writable: true,
+  });
+}
+
+afterEach(() => {
+  if (originalNavigator) Object.defineProperty(globalThis, "navigator", originalNavigator);
+  else delete globalWithNavigator.navigator;
+});
+
+/**
+ * The block-glyph wordmark only renders on macOS fonts, so every other platform
+ * gets the `/ \ | _` fallback. The DOM host is shared by Electrobun, which knows
+ * its `process.platform`, and the hosted web build, which does not and passes a
+ * sentinel instead. Reading that sentinel as "not macOS" is what shipped the
+ * wrong wordmark to Mac browsers.
+ */
+describe("web wordmark variant", () => {
+  test("trusts a real platform from the desktop host over the navigator", () => {
+    stubNavigator("MacIntel");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "darwin")).toBe("legacy");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "win32")).toBe("compat");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "linux")).toBe("compat");
+  });
+
+  test("falls back to the navigator when the host names no OS", () => {
+    stubNavigator("MacIntel");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "browser")).toBe("legacy");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "")).toBe("legacy");
+    stubNavigator("Win32");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "browser")).toBe("compat");
+  });
+
+  test("leaves anything that is not the wordmark alone", () => {
+    stubNavigator("MacIntel");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "tiny", "darwin")).toBeNull();
+    expect(webAsciiTextWordmarkVariant("Portfolio", "wordmark", "darwin")).toBeNull();
+  });
+});

package/src/renderers/electrobun/view/host/ascii-text.ts

@@ -25,8 +25,18 @@ function currentDesktopPlatform(): string {
   ].filter(Boolean).join(" ");
 }
 
+/**
+ * A platform string worth trusting. The DOM host is shared by Electrobun, which
+ * passes a real `process.platform`, and the browser build, which passes the
+ * sentinel `"browser"` because a web page has no OS of its own. Only the former
+ * answers the question we are asking, so anything that does not name an OS
+ * falls through to sniffing the navigator.
+ */
+const OS_PLATFORM = /(darwin|mac|iphone|ipad|ipod|win|linux|android|freebsd|openbsd|netbsd|aix|sunos|cros|x11)/i;
+
 function isMacDesktopPlatform(desktopPlatform?: string): boolean {
-  const raw = desktopPlatform?.trim() || currentDesktopPlatform();
+  const hint = desktopPlatform?.trim();
+  const raw = hint && OS_PLATFORM.test(hint) ? hint : currentDesktopPlatform();
   return /(darwin|mac|iphone|ipad|ipod)/i.test(raw);
 }
 

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

@@ -145,9 +145,11 @@ function ChartCrosshair({
 }) {
   if (!bitmap || !crosshair) return null;
   const x = bitmap.width <= 1 ? 0 : (crosshair.pixelX / (bitmap.width - 1)) * 100;
-  const y = bitmap.height <= 1 ? 0 : (crosshair.pixelY / (bitmap.height - 1)) * 100;
+  const y = crosshair.pixelY === null
+    ? null
+    : bitmap.height <= 1 ? 0 : (crosshair.pixelY / (bitmap.height - 1)) * 100;
   const clampedX = Math.max(0, Math.min(100, x));
-  const clampedY = Math.max(0, Math.min(100, y));
+  const clampedY = y === null ? null : Math.max(0, Math.min(100, y));
   return (
     <>
       <div
@@ -164,36 +166,40 @@ function ChartCrosshair({
           zIndex: 10,
         }}
       />
-      <div
-        style={{
-          position: "absolute",
-          left: 0,
-          right: 0,
-          top: `${clampedY}%`,
-          height: 1,
-          backgroundColor: crosshair.color,
-          opacity: 0.78,
-          transform: "translateY(-0.5px)",
-          pointerEvents: "none",
-          zIndex: 10,
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          left: `${clampedX}%`,
-          top: `${clampedY}%`,
-          width: 7,
-          height: 7,
-          borderRadius: 7,
-          border: `1px solid ${crosshair.color}`,
-          backgroundColor: `color-mix(in srgb, ${crosshair.color} 16%, transparent)`,
-          boxSizing: "border-box",
-          transform: "translate(-50%, -50%)",
-          pointerEvents: "none",
-          zIndex: 11,
-        }}
-      />
+      {clampedY === null ? null : (
+        <>
+          <div
+            style={{
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: `${clampedY}%`,
+              height: 1,
+              backgroundColor: crosshair.color,
+              opacity: 0.78,
+              transform: "translateY(-0.5px)",
+              pointerEvents: "none",
+              zIndex: 10,
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              left: `${clampedX}%`,
+              top: `${clampedY}%`,
+              width: 7,
+              height: 7,
+              borderRadius: 7,
+              border: `1px solid ${crosshair.color}`,
+              backgroundColor: `color-mix(in srgb, ${crosshair.color} 16%, transparent)`,
+              boxSizing: "border-box",
+              transform: "translate(-50%, -50%)",
+              pointerEvents: "none",
+              zIndex: 11,
+            }}
+          />
+        </>
+      )}
     </>
   );
 }

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

@@ -27,16 +27,30 @@ export function cancelWebFrame(id: number): void {
   clearTimeout(id as unknown as ReturnType<typeof setTimeout>);
 }
 
+// Line and page deltas come from wheel mice; trackpads report pixels.
+const WHEEL_LINE_PIXELS = 16;
+const WHEEL_PAGE_PIXELS = 400;
+
+function wheelPixels(delta: number, deltaMode: number): number {
+  if (deltaMode === 1) return delta * WHEEL_LINE_PIXELS;
+  if (deltaMode === 2) return delta * WHEEL_PAGE_PIXELS;
+  return delta;
+}
+
 function resolveScroll(event: MouseLikeEvent) {
   if (!("deltaX" in event) && !("deltaY" in event)) return undefined;
   const wheel = event as WheelEvent;
-  const useHorizontal = Math.abs(wheel.deltaX) > Math.abs(wheel.deltaY);
-  const delta = useHorizontal ? wheel.deltaX : wheel.deltaY;
+  const deltaX = wheelPixels(wheel.deltaX, wheel.deltaMode);
+  const deltaY = wheelPixels(wheel.deltaY, wheel.deltaMode);
+  const useHorizontal = Math.abs(deltaX) > Math.abs(deltaY);
+  const delta = useHorizontal ? deltaX : deltaY;
   return {
     direction: useHorizontal
       ? (delta > 0 ? "right" : "left")
       : (delta > 0 ? "down" : "up"),
     delta: Math.abs(delta),
+    deltaX,
+    deltaY,
   };
 }