gloomberb 0.7.1 → 0.7.3

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

@@ -10,16 +10,15 @@ import {
 import { createAppServices, type AppServices } from "../../../core/app-services";
 import { getDataDir, initDataDir, saveConfig, resetAllData, exportConfig, importConfig, setConfigStoreHost } from "../../../data/config-store";
 import * as nodeConfigStoreHost from "../../../data/config-store-node";
-import { cloneLayout, findPaneInstance, type AppConfig } from "../../../types/config";
+import { findPaneInstance, type AppConfig } from "../../../types/config";
 import type { AppSessionSnapshot } from "../../../core/state/session-persistence";
-import type { PaneRuntimeState } from "../../../core/state/app-state";
+import { syncConfigActiveLayoutState, type PaneRuntimeState } from "../../../core/state/app-state";
 import type { DesktopDockPreviewState, DesktopSharedStateSnapshot, DesktopThemePreviewState } from "../../../types/desktop-window";
 import type { ReleaseInfo, UpdateCheckResult, UpdateProgress } from "../../../updater";
 import { buildSoundCommand } from "../../../notifications/app-notifier";
 import { isPaneDetached } from "../../../plugins/pane-manager";
 import { ELECTROBUN_CONTEXT_MENU_ACTION, type ElectrobunDesktopRpcSchema } from "../shared/protocol";
 import { decodeRpcValue, encodeRpcValue } from "../view/rpc-codec";
-import { startMainThreadMonitor } from "../../../utils/main-thread-monitor";
 import { contextMenuSelectionMessage } from "./context-menu-click";
 import { getContextMenuRequestId, normalizeContextMenuItems } from "./context-menu-normalize";
 import { createDesktopWorkspace, type DesktopWorkspace } from "./desktop-workspace";
@@ -56,7 +55,6 @@ console.log = (...args) => console.error(...args);
 console.info = (...args) => console.error(...args);
 console.warn = (...args) => console.error(...args);
 
-startMainThreadMonitor("electrobun.bun", { mirrorToConsole: true });
 setConfigStoreHost(nodeConfigStoreHost);
 setNativeIbkrGatewayModuleLoader(() => import("../../../plugins/ibkr/gateway-service-native"));
 
@@ -136,17 +134,21 @@ function forEachReadyWindowRpc(callback: (rpc: DesktopRpc) => void): void {
   }
 }
 
+function openMainWindowDevTools(): void {
+  mainWindow?.webview.openDevTools();
+}
+
 function scopeClientId(rpc: DesktopRpc, id: string): string {
   return `${getRpcWindowKey(rpc) ?? "window"}:${id}`;
 }
 
-function syncActiveLayout(config: AppConfig): AppConfig {
-  return {
-    ...config,
-    layouts: config.layouts.map((entry, index) => (
-      index === config.activeLayoutIndex ? { ...entry, layout: cloneLayout(config.layout) } : entry
-    )),
-  };
+function syncActiveLayout(
+  config: AppConfig,
+  paneState: Record<string, PaneRuntimeState> = config.layouts[config.activeLayoutIndex]?.paneState ?? {},
+  focusedPaneId: string | null = config.layouts[config.activeLayoutIndex]?.focusedPaneId ?? null,
+  activePanel: "left" | "right" = config.layouts[config.activeLayoutIndex]?.activePanel ?? "left",
+): AppConfig {
+  return syncConfigActiveLayoutState(config, paneState, focusedPaneId, activePanel);
 }
 
 function normalizeInitWindowTarget(
@@ -416,6 +418,25 @@ async function runDesktopUpdate(rpc: DesktopRpc, currentVersion: string): Promis
   }
 }
 
+interface PluginStateBackendSetEntry {
+  pluginId: string;
+  key: string;
+  value: unknown;
+  schemaVersion?: number;
+}
+
+function normalizePluginStateSetEntry(entry: unknown): PluginStateBackendSetEntry | null {
+  if (!entry || typeof entry !== "object") return null;
+  const record = entry as Record<string, unknown>;
+  if (typeof record.pluginId !== "string" || typeof record.key !== "string") return null;
+  return {
+    pluginId: record.pluginId,
+    key: record.key,
+    value: record.value,
+    schemaVersion: typeof record.schemaVersion === "number" ? record.schemaVersion : undefined,
+  };
+}
+
 function syncBackendCloudAuthState(pluginId: string, key: string, value: unknown): void {
   if (pluginId !== "gloomberb-cloud" || (key !== "session" && key !== "resume:session")) return;
 
@@ -670,7 +691,7 @@ async function commitDesktopSnapshot(
   snapshot: DesktopSharedStateSnapshot,
   options: { persistConfig?: boolean; reconcileWindows?: boolean } = {},
 ): Promise<DesktopSharedStateSnapshot> {
-  const nextConfig = syncActiveLayout(snapshot.config);
+  const nextConfig = syncActiveLayout(snapshot.config, snapshot.paneState, snapshot.focusedPaneId, snapshot.activePanel);
   setCurrentConfig(nextConfig);
   desktopWorkspace = requireDesktopWorkspace();
   desktopWorkspace.replaceConfig(nextConfig, { layoutChanged: snapshot.layoutChanged });
@@ -1049,6 +1070,19 @@ async function handleBackendRequest(
       requireServices().persistence.pluginState.set(payload.pluginId as string, payload.key as string, payload.value, payload.schemaVersion as number | undefined);
       syncBackendCloudAuthState(payload.pluginId as string, payload.key as string, payload.value);
       return null;
+    case "pluginState.setMany": {
+      const entries = Array.isArray(payload.entries)
+        ? payload.entries.flatMap((entry) => {
+            const normalized = normalizePluginStateSetEntry(entry);
+            return normalized ? [normalized] : [];
+          })
+        : [];
+      requireServices().persistence.pluginState.setMany(entries);
+      for (const entry of entries) {
+        syncBackendCloudAuthState(entry.pluginId, entry.key, entry.value);
+      }
+      return null;
+    }
     case "pluginState.delete":
       requireServices().persistence.pluginState.delete(payload.pluginId as string, payload.key as string);
       syncBackendCloudAuthState(payload.pluginId as string, payload.key as string, null);
@@ -1142,7 +1176,12 @@ Electrobun.events.on("context-menu-clicked", (event: unknown) => {
 
 ApplicationMenu.on("application-menu-clicked", (event: unknown) => {
   const command = applicationMenuCommand(event);
-  if (!command || !readyWindowRpcs.has(MAIN_WINDOW_RPC_KEY)) return;
+  if (!command) return;
+  if (command.type === "open-devtools") {
+    openMainWindowDevTools();
+    return;
+  }
+  if (!readyWindowRpcs.has(MAIN_WINDOW_RPC_KEY)) return;
   windowRpcs.get(MAIN_WINDOW_RPC_KEY)?.send["application-menu.select"]({ command });
 });
 

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

@@ -24,6 +24,7 @@ import { getRendererBuiltinPlugins } from "../../../plugins/catalog-ui";
 const servicesLog = debugLog.createLogger("services");
 const ASSET_DATA_CAPABILITY_ID = "asset-data.asset-data-router";
 const NEWS_CAPABILITY_ID = "news.core";
+const PLUGIN_STATE_BACKEND_FLUSH_DELAY_MS = 25;
 
 class RemoteTickerRepository {
   async loadAllTickers(): Promise<TickerRecord[]> {
@@ -274,14 +275,19 @@ class RemoteSessionStore {
   }
 }
 
+interface PluginStatePersistEntry {
+  pluginId: string;
+  key: string;
+  value: unknown;
+  schemaVersion: number;
+}
+
 class RemotePluginStateStore {
   private readonly state = new Map<string, Map<string, unknown>>();
-  private readonly schedulers = new Map<string, ReturnType<typeof createPersistScheduler<{
-    pluginId: string;
-    key: string;
-    value: unknown;
-    schemaVersion: number;
-  }>>>();
+  private readonly schedulers = new Map<string, ReturnType<typeof createPersistScheduler<PluginStatePersistEntry>>>();
+  private readonly pendingBackendSaves = new Map<string, PluginStatePersistEntry>();
+  private backendSaveTimer: ReturnType<typeof setTimeout> | null = null;
+  private backendSaveInFlight: Promise<void> = Promise.resolve();
 
   constructor(initial: Record<string, Record<string, unknown>>) {
     for (const [pluginId, values] of Object.entries(initial)) {
@@ -304,7 +310,11 @@ class RemotePluginStateStore {
   delete(pluginId: string, key: string): void {
     this.state.get(pluginId)?.delete(key);
     this.getScheduler(pluginId, key).cancel();
-    void backendRequest("pluginState.delete", { pluginId, key }).catch(() => {});
+    this.pendingBackendSaves.delete(this.schedulerKey(pluginId, key));
+    void this.backendSaveInFlight
+      .catch(() => {})
+      .then(() => backendRequest("pluginState.delete", { pluginId, key }))
+      .catch(() => {});
   }
 
   keys(pluginId: string): string[] {
@@ -317,20 +327,52 @@ class RemotePluginStateStore {
 
   async flush(): Promise<void> {
     await Promise.all([...this.schedulers.values()].map((scheduler) => scheduler.flush()));
+    await this.flushBackendSaves();
   }
 
   private getScheduler(pluginId: string, key: string) {
-    const schedulerKey = `${pluginId}\u0000${key}`;
+    const schedulerKey = this.schedulerKey(pluginId, key);
     let scheduler = this.schedulers.get(schedulerKey);
     if (!scheduler) {
       scheduler = createPersistScheduler({
         delayMs: PLUGIN_STATE_SAVE_DEBOUNCE_MS,
-        save: (entry) => backendRequest("pluginState.set", entry),
+        save: (entry) => {
+          this.scheduleBackendSave(entry);
+        },
       });
       this.schedulers.set(schedulerKey, scheduler);
     }
     return scheduler;
   }
+
+  private schedulerKey(pluginId: string, key: string): string {
+    return `${pluginId}\u0000${key}`;
+  }
+
+  private scheduleBackendSave(entry: PluginStatePersistEntry): void {
+    this.pendingBackendSaves.set(this.schedulerKey(entry.pluginId, entry.key), entry);
+    if (this.backendSaveTimer) return;
+    this.backendSaveTimer = setTimeout(() => {
+      void this.flushBackendSaves();
+    }, PLUGIN_STATE_BACKEND_FLUSH_DELAY_MS);
+  }
+
+  private async flushBackendSaves(): Promise<void> {
+    if (this.backendSaveTimer) {
+      clearTimeout(this.backendSaveTimer);
+      this.backendSaveTimer = null;
+    }
+    if (this.pendingBackendSaves.size === 0) return this.backendSaveInFlight;
+
+    const entries = [...this.pendingBackendSaves.values()];
+    this.pendingBackendSaves.clear();
+    const save = this.backendSaveInFlight
+      .catch(() => {})
+      .then(() => backendRequest<void>("pluginState.setMany", { entries }))
+      .catch(() => {});
+    this.backendSaveInFlight = save;
+    return save;
+  }
 }
 
 class RemotePersistence {

package/src/renderers/electrobun/view/backend-rpc.ts

@@ -1,6 +1,5 @@
 /// <reference lib="dom" />
 import { Electroview } from "electrobun/view";
-import { measurePerfAsync } from "../../../utils/perf-marks";
 import {
   type ApplicationMenuSelectMessage,
   type CapabilityEventMessage,
@@ -119,13 +118,11 @@ async function waitForBridgeReady(): Promise<void> {
 }
 
 export async function backendRequest<T = unknown>(method: string, payload: unknown = null): Promise<T> {
-  const result = await measurePerfAsync("electrobun.rpc.request", async () => {
-    await waitForBridgeReady();
-    return rpc.request["backend.request"]({
-      method,
-      payload: encodeRpcValue(payload),
-    });
-  }, { method });
+  await waitForBridgeReady();
+  const result = await rpc.request["backend.request"]({
+    method,
+    payload: encodeRpcValue(payload),
+  });
   return decodeRpcValue<T>(result);
 }
 

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

@@ -40,8 +40,8 @@ function controlBorderColor(focused = false, active = false): string {
 
 function controlShadow(active = false): string {
   return active
-    ? "0 0 0 1px rgba(84, 201, 159, 0.18), inset 0 1px 0 rgba(255,255,255,0.06)"
-    : "inset 0 1px 0 rgba(255,255,255,0.04)";
+    ? `0 0 0 1px ${blendHex(colors.bg, colors.borderFocused, 0.18)}, inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.06)}`
+    : `inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.04)}`;
 }
 
 function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled">) {
@@ -76,7 +76,7 @@ function buttonPalette(props: Pick<ButtonProps, "variant" | "active" | "disabled
     case "ghost":
       return {
         fg: colors.textDim,
-        bg: "rgba(0, 0, 0, 0)",
+        bg: "transparent",
         border: panelBorder(),
       };
     case "secondary":
@@ -339,7 +339,7 @@ function listRowStyle(selected: boolean): CSSProperties {
   return {
     borderRadius: CONTROL_RADIUS,
     border: `1px solid ${selected ? colors.borderFocused : "transparent"}`,
-    boxShadow: selected ? "inset 0 1px 0 rgba(255,255,255,0.06)" : undefined,
+    boxShadow: selected ? `inset 0 1px 0 ${blendHex(colors.bg, colors.textBright, 0.06)}` : undefined,
     cursor: "pointer",
   };
 }

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

@@ -5,7 +5,6 @@ import { App } from "../../../app";
 import { UiHostProvider } from "../../../ui/host";
 import { debugLog } from "../../../utils/debug-log";
 import { measurePerfAsync } from "../../../utils/perf-marks";
-import { startMainThreadMonitor } from "../../../utils/main-thread-monitor";
 import { backendRequest, initElectrobunBackend } from "./backend-rpc";
 import { installElectrobunAiHost } from "./ai-host";
 import { installElectrobunBrokerRemoteClient } from "./broker-remote-client";
@@ -31,23 +30,9 @@ if (!rootElement) {
 
 const root = createRoot(rootElement);
 const bootLog = debugLog.createLogger("electrobun-web-boot");
-const ELECTROBUN_WEB_CONSOLE_LOG_SOURCES = [
-  "app",
-  "main-thread",
-  "perf",
-  "refresh-queue",
-  "services",
-  "startup",
-  "electrobun-web-boot",
-];
-debugLog.mirrorToConsole({
-  sources: ELECTROBUN_WEB_CONSOLE_LOG_SOURCES,
-});
-const stopMainThreadMonitor = startMainThreadMonitor("electrobun.web", { mirrorToConsole: true });
 
 rootElement.tabIndex = -1;
 root.render(<div className="gloom-loading">Starting Gloomberb...</div>);
-bootLog.warn("diagnostic console mirror enabled", { sources: ELECTROBUN_WEB_CONSOLE_LOG_SOURCES });
 
 function focusWebSurface(): void {
   window.focus();
@@ -111,7 +96,6 @@ async function boot() {
 }
 
 boot().catch((error) => {
-  stopMainThreadMonitor();
   root.render(
     <div className="gloom-fatal">
       <h1>Gloomberb failed to start</h1>

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

@@ -1,5 +1,5 @@
 @keyframes gloom-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-html, body, #root { width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: #000; }
+html, body, #root { width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: var(--gloom-bg); }
 #root:focus { outline: none; }
 body {
   --cell-w: 8px;
@@ -8,7 +8,7 @@ body {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 12px;
   line-height: var(--cell-h);
-  color: #d8dde3;
+  color: var(--gloom-text);
   cursor: default;
   user-select: none;
   color-scheme: dark;
@@ -62,26 +62,26 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
   border: 0;
   border-radius: 6px;
   overflow: hidden;
-  box-shadow: 0 18px 38px rgba(0, 0, 0, .46);
+  box-shadow: 0 18px 38px color-mix(in srgb, var(--gloom-bg) 46%, transparent);
 }
 [data-gloom-role="pane-window"][data-floating="true"]::after {
   content: "";
   position: absolute;
   inset: 0;
-  border: 1px solid var(--pane-border-color, #3a4148);
+  border: 1px solid var(--pane-border-color, var(--gloom-border));
   border-radius: inherit;
   pointer-events: none;
   z-index: 100;
 }
 [data-gloom-role="pane-window"][data-floating="true"][data-focused="true"] {
-  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
+  box-shadow: 0 18px 40px color-mix(in srgb, var(--gloom-bg) 50%, transparent);
 }
 [data-gloom-role="pane-window"][data-floating="false"] {
   border: 0;
   border-radius: 0;
 }
 [data-gloom-role="pane-window"][data-floating="false"][data-focused="true"] {
-  box-shadow: inset 0 0 0 1px var(--pane-border-color, #54c99f);
+  box-shadow: inset 0 0 0 1px var(--pane-border-color, var(--gloom-border-focused));
 }
 [data-gloom-role="pane-header"] {
   align-items: center;
@@ -125,7 +125,7 @@ body.gloom-dragging {
   min-height: var(--cell-h);
   max-height: var(--cell-h);
   align-items: center;
-  border-top: 1px solid color-mix(in srgb, #3a4148 72%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--gloom-border) 72%, transparent);
   font-size: 11.5px;
 }
 [data-gloom-role="status-bar"] span {
@@ -137,7 +137,7 @@ body.gloom-dragging {
   min-height: var(--cell-h);
   max-height: var(--cell-h);
   align-items: center;
-  border-top: 1px solid color-mix(in srgb, var(--pane-footer-border-color, #3a4148) 72%, transparent);
+  border-top: 1px solid color-mix(in srgb, var(--pane-footer-border-color, var(--gloom-border)) 72%, transparent);
   font-size: 11.5px;
   overflow: hidden;
 }
@@ -153,7 +153,7 @@ body.gloom-dragging {
   border-radius: 4px;
 }
 [data-gloom-role="pane-hint"]:hover {
-  background: rgba(255,255,255,.08);
+  background: color-mix(in srgb, var(--gloom-text-bright) 8%, transparent);
 }
 [data-gloom-role="pane-action"],
 [data-gloom-role="pane-close"] {
@@ -162,7 +162,7 @@ body.gloom-dragging {
 }
 [data-gloom-role="pane-action"]:hover,
 [data-gloom-role="pane-close"]:hover {
-  background: rgba(255,255,255,.08);
+  background: color-mix(in srgb, var(--gloom-text-bright) 8%, transparent);
 }
 [data-gloom-role="resize-handle"] {
   cursor: nwse-resize;
@@ -191,7 +191,7 @@ body.gloom-dragging {
   cursor: pointer;
 }
 [data-gloom-role="tab-close"]:hover {
-  background: rgba(255,255,255,.1);
+  background: color-mix(in srgb, var(--gloom-text-bright) 10%, transparent);
 }
 [data-gloom-scrollbar-x],
 [data-gloom-scrollbar-y] {
@@ -199,7 +199,7 @@ body.gloom-dragging {
   scrollbar-width: thin;
 }
 [data-gloom-scrollbar-active="true"] {
-  scrollbar-color: rgba(216,221,227,.26) transparent;
+  scrollbar-color: color-mix(in srgb, var(--gloom-text) 26%, transparent) transparent;
 }
 [data-gloom-scrollbar-x]::-webkit-scrollbar,
 [data-gloom-scrollbar-y]::-webkit-scrollbar {
@@ -227,7 +227,7 @@ body.gloom-dragging {
 }
 [data-gloom-scrollbar-active="true"]::-webkit-scrollbar-thumb,
 [data-gloom-scrollbar-active="true"]::-webkit-scrollbar-thumb:hover {
-  background: rgba(216,221,227,.24);
+  background: color-mix(in srgb, var(--gloom-text) 24%, transparent);
   background-clip: content-box;
 }
 [data-gloom-scrollbar-x]::-webkit-scrollbar-corner,
@@ -284,8 +284,8 @@ body.gloom-dragging {
   top: 50%;
   height: 1px;
 }
-.gloom-loading, .gloom-fatal { padding: 24px; color: #d8dde3; }
-.gloom-fatal pre { white-space: pre-wrap; color: #ffb4a8; }
+.gloom-loading, .gloom-fatal { padding: 24px; color: var(--gloom-text); }
+.gloom-fatal pre { white-space: pre-wrap; color: var(--gloom-negative); }
 .gloom-toast-viewport {
   position: fixed;
   right: 16px;
@@ -300,7 +300,7 @@ body.gloom-dragging {
   max-width: 420px;
   padding: 10px 12px;
   border: 1px solid;
-  box-shadow: 0 12px 24px rgba(0,0,0,.28);
+  box-shadow: 0 12px 24px color-mix(in srgb, var(--gloom-bg) 28%, transparent);
 }
 .gloom-toast-action {
   margin-top: 8px;
@@ -313,17 +313,19 @@ body.gloom-dragging {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0,0,0,.64);
+  background: color-mix(in srgb, var(--gloom-bg) 64%, transparent);
   z-index: 9999;
 }
 .gloom-dialog {
   max-width: min(920px, calc(100vw - 48px));
   max-height: calc(100vh - 48px);
   overflow: auto;
-  border: 1px solid #3a4148;
+  border: 1px solid var(--gloom-border);
   border-radius: 6px;
-  background: #101417;
-  color: #d8dde3;
+  background: var(--gloom-panel);
+  color: var(--gloom-text);
   padding: 0;
-  box-shadow: 0 18px 48px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.05);
+  box-shadow:
+    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);
 }

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

@@ -129,7 +129,7 @@ function commonStyle(props: Record<string, unknown>): CSSProperties {
     marginBottom: cellInset(props.marginBottom ?? props.marginY ?? props.margin, "y"),
     gap: typeof props.gap === "number" ? `${props.gap * gapUnit}px` : props.gap as CSSProperties["gap"],
     overflow: props.overflow as CSSProperties["overflow"],
-    border: props.border ? `1px solid ${typeof props.borderColor === "string" ? props.borderColor : "#3a4148"}` : undefined,
+    border: props.border ? `1px solid ${typeof props.borderColor === "string" ? props.borderColor : "var(--gloom-border)"}` : undefined,
     boxSizing: "border-box",
     minInlineSize: zeroMinInlineSize ? 0 : undefined,
     minBlockSize: zeroMinBlockSize ? 0 : undefined,
@@ -551,7 +551,7 @@ function ChartCrosshair({
           height: 7,
           borderRadius: 7,
           border: `1px solid ${crosshair.color}`,
-          backgroundColor: "rgba(255, 255, 255, 0.16)",
+          backgroundColor: `color-mix(in srgb, ${crosshair.color} 16%, transparent)`,
           boxSizing: "border-box",
           transform: "translate(-50%, -50%)",
           pointerEvents: "none",
@@ -610,7 +610,7 @@ function textInputStyle(props: Record<string, unknown>, multiline: boolean): CSS
     resize: "none",
     border: "none",
     outline: "none",
-    color: typeof textColor === "string" ? textColor : "#d8dde3",
+    color: typeof textColor === "string" ? textColor : "var(--gloom-text)",
     backgroundColor: typeof backgroundColor === "string" ? backgroundColor : "transparent",
     whiteSpace: multiline && props.wrapText ? "pre-wrap" : "pre",
     overflow: multiline ? "auto" : "hidden",
@@ -886,13 +886,29 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
     );
     const horizontalScrollBarVisibleRef = useRef(horizontalScrollBarVisible);
     const verticalScrollBarVisibleRef = useRef(verticalScrollBarVisible);
+    const horizontalScrollChangeHandlersRef = useRef(new Set<() => void>());
+    const verticalScrollChangeHandlersRef = useRef(new Set<() => void>());
     const scrollFrameRef = useRef<number | null>(null);
     const lastWheelAtRef = useRef(0);
     const [scrollbarActive, markScrollbarActive] = useScrollbarActivity();
 
-    const getElement = () => elementRef.current;
+    const getElement = useCallback(() => elementRef.current, []);
     const toCellY = (pixels: number) => Math.max(0, Math.round(pixels / WEB_CELL_HEIGHT));
     const toCellX = (pixels: number) => Math.max(0, Math.round(pixels / WEB_CELL_WIDTH));
+    const emitHorizontalScrollChange = useCallback(() => {
+      for (const handler of horizontalScrollChangeHandlersRef.current) {
+        handler();
+      }
+    }, []);
+    const emitVerticalScrollChange = useCallback(() => {
+      for (const handler of verticalScrollChangeHandlersRef.current) {
+        handler();
+      }
+    }, []);
+    const emitScrollPositionChanges = useCallback(() => {
+      emitVerticalScrollChange();
+      emitHorizontalScrollChange();
+    }, [emitHorizontalScrollChange, emitVerticalScrollChange]);
     const horizontalScrollBar = useMemo(() => ({
       get visible() {
         return horizontalScrollBarVisibleRef.current;
@@ -902,6 +918,12 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         horizontalScrollBarVisibleRef.current = normalized;
         setHorizontalScrollBarVisible(normalized);
       },
+      on(event: "change", handler: () => void) {
+        if (event === "change") horizontalScrollChangeHandlersRef.current.add(handler);
+      },
+      off(event: "change", handler: () => void) {
+        if (event === "change") horizontalScrollChangeHandlersRef.current.delete(handler);
+      },
     }), []);
     const verticalScrollBar = useMemo(() => ({
       get visible() {
@@ -912,6 +934,12 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         verticalScrollBarVisibleRef.current = normalized;
         setVerticalScrollBarVisible(normalized);
       },
+      on(event: "change", handler: () => void) {
+        if (event === "change") verticalScrollChangeHandlersRef.current.add(handler);
+      },
+      off(event: "change", handler: () => void) {
+        if (event === "change") verticalScrollChangeHandlersRef.current.delete(handler);
+      },
     }), []);
 
     useEffect(() => {
@@ -938,28 +966,40 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
       },
       set scrollTop(value: number) {
         const element = getElement();
-        if (element) element.scrollTop = Math.max(0, value) * WEB_CELL_HEIGHT;
+        if (element) {
+          element.scrollTop = Math.max(0, value) * WEB_CELL_HEIGHT;
+          emitVerticalScrollChange();
+        }
       },
       get scrollTopPx() {
         return Math.max(0, getElement()?.scrollTop ?? 0);
       },
       set scrollTopPx(value: number) {
         const element = getElement();
-        if (element) element.scrollTop = Math.max(0, value);
+        if (element) {
+          element.scrollTop = Math.max(0, value);
+          emitVerticalScrollChange();
+        }
       },
       get scrollLeft() {
         return toCellX(getElement()?.scrollLeft ?? 0);
       },
       set scrollLeft(value: number) {
         const element = getElement();
-        if (element) element.scrollLeft = Math.max(0, value) * WEB_CELL_WIDTH;
+        if (element) {
+          element.scrollLeft = Math.max(0, value) * WEB_CELL_WIDTH;
+          emitHorizontalScrollChange();
+        }
       },
       get scrollLeftPx() {
         return Math.max(0, getElement()?.scrollLeft ?? 0);
       },
       set scrollLeftPx(value: number) {
         const element = getElement();
-        if (element) element.scrollLeft = Math.max(0, value);
+        if (element) {
+          element.scrollLeft = Math.max(0, value);
+          emitHorizontalScrollChange();
+        }
       },
       get scrollHeight() {
         return toCellY(getElement()?.scrollHeight ?? 0);
@@ -1003,8 +1043,10 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         if (!element) return;
         if (typeof target === "number") {
           element.scrollTop = Math.max(0, target) * WEB_CELL_HEIGHT;
+          emitVerticalScrollChange();
           if (typeof y === "number") {
             element.scrollLeft = Math.max(0, y) * WEB_CELL_WIDTH;
+            emitHorizontalScrollChange();
           }
           return;
         }
@@ -1012,14 +1054,17 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           left: Math.max(0, target.x ?? toCellX(element.scrollLeft)) * WEB_CELL_WIDTH,
           top: Math.max(0, target.y ?? toCellY(element.scrollTop)) * WEB_CELL_HEIGHT,
         });
+        emitScrollPositionChanges();
       },
       scrollToPixels(target: number | { x?: number; y?: number }, y?: number) {
         const element = getElement();
         if (!element) return;
         if (typeof target === "number") {
           element.scrollTop = Math.max(0, target);
+          emitVerticalScrollChange();
           if (typeof y === "number") {
             element.scrollLeft = Math.max(0, y);
+            emitHorizontalScrollChange();
           }
           return;
         }
@@ -1027,13 +1072,22 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
           left: Math.max(0, target.x ?? element.scrollLeft),
           top: Math.max(0, target.y ?? element.scrollTop),
         });
+        emitScrollPositionChanges();
       },
-    }), [horizontalScrollBar, verticalScrollBar]);
+    }), [
+      emitHorizontalScrollChange,
+      emitScrollPositionChanges,
+      emitVerticalScrollChange,
+      getElement,
+      horizontalScrollBar,
+      verticalScrollBar,
+    ]);
 
     const scrollable = props.scrollX === true || props.scrollY === true;
     const overflowX = props.scrollX === true ? "auto" : "hidden";
     const overflowY = props.scrollY === true ? "auto" : "hidden";
     const handleScroll = useCallback(() => {
+      emitScrollPositionChanges();
       markScrollbarActive();
       if (typeof props.onMouseScroll !== "function") return;
       if (Date.now() - lastWheelAtRef.current < 32) return;
@@ -1042,7 +1096,7 @@ const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & {
         scrollFrameRef.current = null;
         (props.onMouseScroll as () => void)();
       });
-    }, [markScrollbarActive, props.onMouseScroll]);
+    }, [emitScrollPositionChanges, markScrollbarActive, props.onMouseScroll]);
     const handleWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {
       markScrollbarActive();
       lastWheelAtRef.current = Date.now();
@@ -1155,7 +1209,9 @@ function WebTabs({
 
   const resolveTabBackground = (active: boolean, hovered: boolean) => {
     if (active && variant === "pill") {
-      return hovered ? "rgba(84, 201, 159, 0.24)" : palette.activeBg;
+      return hovered
+        ? `color-mix(in srgb, ${palette.activeBg} 76%, ${palette.hoverBg})`
+        : palette.activeBg;
     }
     return hovered ? palette.hoverBg : "transparent";
   };