gloomberb 0.16.2 → 0.16.3

package/src/renderers/dom/host/box.tsx

@@ -6,6 +6,7 @@ import {
   useRef,
   type CSSProperties,
   type MouseEvent,
+  type PointerEvent,
   type ReactNode,
   type Ref,
 } from "react";
@@ -19,8 +20,56 @@ import {
   cellMouseEvent,
   requestWebFrame,
 } from "./mouse";
+import { hideDragShield, showDragShield } from "./drag-shield";
+import { applyLiveFrame } from "./live-frame";
 import { cleanDomProps, commonStyle } from "./style";
 
+/** Farther than this from the pointer, in px, a predicted point is noise. */
+const MAX_PREDICTION_PX = 48;
+
+type PointerMoveEvent = globalThis.MouseEvent & {
+  pointerId?: number;
+  getPredictedEvents?: () => Array<{ clientX: number; clientY: number }>;
+};
+
+function isPointerMove(event: globalThis.MouseEvent): boolean {
+  return typeof (event as PointerMoveEvent).pointerId === "number";
+}
+
+/**
+ * Where the browser predicts the pointer will be a moment after this move, when
+ * it predicts at all (Chrome does for the mouse; WebKit returns none). The
+ * event itself already sits at the last of its coalesced points.
+ */
+function predictedPoint(event: globalThis.MouseEvent): { clientX: number; clientY: number } | null {
+  const predicted = (event as PointerMoveEvent).getPredictedEvents?.();
+  const next = predicted?.[0];
+  if (!next) return null;
+  const dx = next.clientX - event.clientX;
+  const dy = next.clientY - event.clientY;
+  return dx * dx + dy * dy <= MAX_PREDICTION_PX * MAX_PREDICTION_PX ? next : null;
+}
+
+function capturePointer(element: HTMLElement | null, pointerId: number | null): { element: HTMLElement; pointerId: number } | null {
+  if (!element || pointerId === null || typeof element.setPointerCapture !== "function") return null;
+  try {
+    element.setPointerCapture(pointerId);
+    return { element, pointerId };
+  } catch {
+    // The pointer is already up or belongs to another frame: drag uncaptured.
+    return null;
+  }
+}
+
+function releasePointer(captured: { element: HTMLElement; pointerId: number } | null): void {
+  if (!captured) return;
+  try {
+    if (captured.element.hasPointerCapture?.(captured.pointerId)) captured.element.releasePointerCapture(captured.pointerId);
+  } catch {
+    // Released already, by the browser on pointerup.
+  }
+}
+
 export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { children?: ReactNode }>(
   function WebBox({ children, ...props }, ref: Ref<HTMLDivElement>) {
     const elementRef = useRef<HTMLDivElement | null>(null);
@@ -34,7 +83,13 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       ? props.hoverBackgroundColor
       : undefined;
 
-    useImperativeHandle(ref, () => cellBoundsForElement(() => elementRef.current, () => propsRef.current) as unknown as HTMLDivElement, []);
+    useImperativeHandle(ref, () => {
+      const handle = cellBoundsForElement(() => elementRef.current, () => propsRef.current);
+      handle.setLiveFrame = (frame) => {
+        if (elementRef.current) applyLiveFrame(elementRef.current, frame, propsRef.current);
+      };
+      return handle as unknown as HTMLDivElement;
+    }, []);
 
     const cancelPendingFrame = () => {
       if (frameRef.current !== null) {
@@ -63,7 +118,11 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       flushPendingFrameMouseHandlers();
     };
 
-    const scheduleFrameMouseHandler = (event: MouseLikeEvent, type: "move" | "drag") => {
+    const scheduleFrameMouseHandler = (
+      event: MouseLikeEvent,
+      type: "move" | "drag",
+      ahead: { clientX: number; clientY: number } | null = null,
+    ) => {
       // The DOM keeps firing mousemove while a button is held. A move means no
       // button anywhere else in the app, so drags must not surface as moves.
       if (type === "move" && draggingRef.current) return;
@@ -74,7 +133,7 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
         return;
       }
 
-      const nextEvent = cellMouseEvent(event, type);
+      const nextEvent = cellMouseEvent(event, type, ahead);
       if (type === "move") {
         pendingMoveRef.current = nextEvent;
       } else {
@@ -89,27 +148,42 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
     };
 
     const lastPointRef = useRef({ x: 0, y: 0 });
+    // The pointer that pressed this box, so a drag can capture it.
+    const pressedPointerRef = useRef<number | null>(null);
     const dragSessionRef = useRef<{
       move: (event: globalThis.MouseEvent) => void;
       up: (event: globalThis.MouseEvent) => void;
       cancel: () => void;
+      captured: { element: HTMLElement; pointerId: number } | null;
+      /** Pointer events are arriving, so the mousemove after each is a repeat. */
+      pointerMoves: boolean;
+      /** Moved far enough to be a drag: the drag shield is up. */
+      shielded: boolean;
     } | null>(null);
-    const endDocumentDragRef = useRef<(event: globalThis.MouseEvent | null, notify: boolean) => void>(() => {});
-    endDocumentDragRef.current = (event, notify) => {
+    /**
+     * Ends the press. "end" reports a release at `event` (or the last point);
+     * "cancel" reports the drag abandoned (the window lost focus or the system
+     * took the pointer), so a move can put things back.
+     */
+    const endDocumentDragRef = useRef<(event: globalThis.MouseEvent | null, outcome: "end" | "cancel") => void>(() => {});
+    endDocumentDragRef.current = (event, outcome) => {
       const session = dragSessionRef.current;
       const wasDragging = draggingRef.current;
       if (!session && !wasDragging) return;
       draggingRef.current = false;
+      const shielded = session?.shielded === true;
       dragSessionRef.current = null;
-      document.body.classList.remove("gloom-dragging");
+      if (shielded) hideDragShield();
       if (session) {
+        document.removeEventListener("pointermove", session.move);
         document.removeEventListener("mousemove", session.move);
         document.removeEventListener("mouseup", session.up);
         document.removeEventListener("pointerup", session.up);
         document.removeEventListener("pointercancel", session.cancel);
         window.removeEventListener("blur", session.cancel);
+        releasePointer(session.captured);
       }
-      if (!notify || !wasDragging) return;
+      if (!wasDragging) return;
       const point = event ?? new MouseEvent("mouseup", {
         clientX: lastPointRef.current.x,
         clientY: lastPointRef.current.y,
@@ -119,14 +193,14 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       flushPendingFrameNow();
       callMouseHandler(propsRef.current.onMouse, point, "up");
       callMouseHandler(propsRef.current.onMouseUp, point, "up");
-      callMouseHandler(propsRef.current.onMouseDragEnd, point, "drag-end");
+      callMouseHandler(propsRef.current.onMouseDragEnd, point, outcome === "cancel" ? "drag-cancel" : "drag-end");
     };
 
     useEffect(() => () => {
       cancelPendingFrame();
       pendingMoveRef.current = null;
       pendingDragRef.current = null;
-      endDocumentDragRef.current(null, true);
+      endDocumentDragRef.current(null, "end");
     }, []);
 
     const handlesWheel = typeof props.onMouseScroll === "function";
@@ -146,7 +220,7 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       pendingMoveRef.current = null;
       // A press that never saw mouseup (the window move took the pointer) is still tracked.
       // Finish it before the new press, so its drag-end cannot clear the drag this press starts.
-      endDocumentDragRef.current(null, true);
+      endDocumentDragRef.current(null, "end");
       callMouseHandler(propsRef.current.onMouseDown, event, "down");
       if (event.button !== 0 || (event.isPropagationStopped() && !hasDirectDrag)) return;
       if (!hasSyntheticDrag && !hasDirectDrag) return;
@@ -157,27 +231,41 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       const originY = event.clientY;
       const move = (moveEvent: globalThis.MouseEvent) => {
         if (!draggingRef.current) return;
+        const current = dragSessionRef.current;
+        if (isPointerMove(moveEvent)) {
+          if (current) current.pointerMoves = true;
+        } else if (current?.pointerMoves) {
+          return;
+        }
         lastPointRef.current = { x: moveEvent.clientX, y: moveEvent.clientY };
         // The button is up and mouseup never arrived. End the drag instead of following the cursor.
         if (moveEvent.buttons === 0) {
-          endDocumentDragRef.current(moveEvent, true);
+          endDocumentDragRef.current(moveEvent, "end");
           return;
         }
         const dx = moveEvent.clientX - originX;
         const dy = moveEvent.clientY - originY;
-        if (!document.body.classList.contains("gloom-dragging")) {
+        if (current && !current.shielded) {
           if (dx * dx + dy * dy < 9) return;
-          document.body.classList.add("gloom-dragging");
+          current.shielded = true;
+          showDragShield();
+          // Captured once it is a drag (a click keeps its usual target), the
+          // moves skip hit testing and leave every other element's hover state
+          // alone: nothing under the pointer restyles or repaints while a pane,
+          // divider or chart is dragged across it. The document listeners still
+          // see every move.
+          if (!current.captured) current.captured = capturePointer(elementRef.current, pressedPointerRef.current);
         }
-        scheduleFrameMouseHandler(moveEvent, "drag");
+        scheduleFrameMouseHandler(moveEvent, "drag", predictedPoint(moveEvent));
       };
       const up = (upEvent: globalThis.MouseEvent) => {
-        endDocumentDragRef.current(upEvent, true);
+        endDocumentDragRef.current(upEvent, "end");
       };
       const cancel = () => {
-        endDocumentDragRef.current(null, true);
+        endDocumentDragRef.current(null, "cancel");
       };
-      dragSessionRef.current = { move, up, cancel };
+      dragSessionRef.current = { move, up, cancel, captured: null, pointerMoves: false, shielded: false };
+      document.addEventListener("pointermove", move);
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
       document.addEventListener("pointerup", up);
@@ -185,6 +273,13 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
       window.addEventListener("blur", cancel);
     };
 
+    const handlesDrag = typeof props.onMouse === "function"
+      || typeof props.onMouseDrag === "function"
+      || typeof props.onMouseDragEnd === "function";
+    const handlePointerDown = (event: PointerEvent) => {
+      pressedPointerRef.current = event.pointerId;
+    };
+
     const handleMouseDownCapture = (event: MouseEvent) => {
       callMouseHandler(propsRef.current.onMouseDownCapture, event, "down");
     };
@@ -204,6 +299,7 @@ export const WebBox = forwardRef<HTMLDivElement, Record<string, unknown> & { chi
         data-gloom-hover-bg={hoverBackgroundColor ? "true" : undefined}
         ref={elementRef}
         onMouseDownCapture={typeof props.onMouseDownCapture === "function" ? handleMouseDownCapture : undefined}
+        onPointerDown={handlesDrag ? handlePointerDown : undefined}
         onMouseDown={handleMouseDown}
         onMouseOver={handleMouseOver}
         onMouseMove={(event) => scheduleFrameMouseHandler(event, "move")}

package/src/renderers/dom/host/drag-shield.ts

@@ -0,0 +1,24 @@
+let shield: HTMLElement | null = null;
+
+/**
+ * While a press drags, one transparent sheet covers the window: it keeps the
+ * grabbing cursor wherever the pointer goes and takes the hover, so nothing
+ * under the pointer restyles while a pane, divider or chart moves across it.
+ * It is a single element on purpose: a class on body matched by descendant
+ * rules restyled every element with a role (thousands on a busy layout) in
+ * the frame the drag began, and again when it ended.
+ */
+export function showDragShield(): void {
+  document.body.classList.add("gloom-dragging");
+  if (shield?.isConnected) return;
+  shield = document.createElement("div");
+  shield.setAttribute("data-gloom-role", "drag-shield");
+  shield.setAttribute("aria-hidden", "true");
+  document.body.appendChild(shield);
+}
+
+export function hideDragShield(): void {
+  document.body.classList.remove("gloom-dragging");
+  shield?.remove();
+  shield = null;
+}

package/src/renderers/dom/host/live-frame.ts

@@ -0,0 +1,54 @@
+import type { CSSProperties } from "react";
+import type { LiveBoxFrame } from "../../../ui/host";
+import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../theme/font-scale";
+import { commonStyle } from "./style";
+
+/**
+ * Blink lays the whole page out into compositor layers again whenever a
+ * style transform changes, even on a `will-change` layer: 4 to 9 ms a frame
+ * on a ten-pane desktop. The same transform held by a running animation's
+ * keyframes only updates the compositor (under 1 ms), at the same latency.
+ * WebKit has no such pass, and there an animation per frame costs more than
+ * the plain style, so it keeps the style.
+ */
+const ANIMATION_CARRIES_SLIDE = typeof navigator !== "undefined"
+  && /Chrome\//.test(navigator.userAgent)
+  && typeof Element !== "undefined"
+  && typeof Element.prototype.animate === "function";
+
+const slides = new WeakMap<HTMLElement, Animation>();
+
+function renderedValue(value: unknown): string {
+  return typeof value === "string" ? value : "";
+}
+
+function slide(element: HTMLElement, transform: string): void {
+  if (!ANIMATION_CARRIES_SLIDE) {
+    element.style.transform = transform;
+    return;
+  }
+  const keyframes = [{ transform }, { transform }];
+  const running = slides.get(element);
+  if (running) (running.effect as KeyframeEffect).setKeyframes(keyframes);
+  else slides.set(element, element.animate(keyframes, { duration: 1e9, fill: "both" }));
+}
+
+/**
+ * Draws a box where a drag has it this frame by restyling its element,
+ * outside React: an offset on its own compositor layer, with no layout or
+ * repaint. `null` hands the properties back to what React last rendered.
+ */
+export function applyLiveFrame(element: HTMLElement, frame: LiveBoxFrame | null, props: Record<string, unknown>): void {
+  const style = element.style;
+  if (!frame) {
+    const rendered: CSSProperties = { ...commonStyle(props), ...(props.style as CSSProperties | undefined) };
+    slides.get(element)?.cancel();
+    slides.delete(element);
+    style.transform = renderedValue(rendered.transform);
+    style.willChange = renderedValue(rendered.willChange);
+    return;
+  }
+  // Promoted once, before the first frame of the drag.
+  if (style.willChange !== "transform") style.willChange = "transform";
+  slide(element, `translate3d(${frame.dx * WEB_CELL_WIDTH}px, ${frame.dy * WEB_CELL_HEIGHT}px, 0)`);
+}

package/src/renderers/dom/host/mouse.ts

@@ -54,7 +54,12 @@ function resolveScroll(event: MouseLikeEvent) {
   };
 }
 
-export function cellMouseEvent(event: MouseLikeEvent, type?: string) {
+/**
+ * `ahead` is where the browser predicts the pointer will be a moment later
+ * (`getPredictedEvents`), for drawing what follows it; hit tests and releases
+ * keep the real point.
+ */
+export function cellMouseEvent(event: MouseLikeEvent, type?: string, ahead?: { clientX: number; clientY: number } | null) {
   const preciseX = event.clientX / WEB_CELL_WIDTH;
   const preciseY = event.clientY / WEB_CELL_HEIGHT;
   return {
@@ -63,6 +68,8 @@ export function cellMouseEvent(event: MouseLikeEvent, type?: string) {
     y: Math.max(0, Math.floor(preciseY)),
     preciseX: Math.max(0, preciseX),
     preciseY: Math.max(0, preciseY),
+    predictedX: ahead ? Math.max(0, ahead.clientX / WEB_CELL_WIDTH) : undefined,
+    predictedY: ahead ? Math.max(0, ahead.clientY / WEB_CELL_HEIGHT) : undefined,
     pixelX: event.clientX,
     pixelY: event.clientY,
     button: event.button,

package/src/renderers/dom/host/scroll-box.tsx

@@ -13,6 +13,7 @@ import {
 } from "react";
 import type { ScrollBoxRenderable } from "../../../ui/host";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../../../theme/font-scale";
+import { isHeaderStripScrollBox, scrollBoxScrollsVertically } from "../../../ui/scroll-box-axis";
 import { callMouseHandler } from "./mouse";
 import { cleanDomProps, commonStyle } from "./style";
 import { useScrollbarActivity } from "../scrollbar-activity";
@@ -48,15 +49,15 @@ function contentInsetStyle(props: Record<string, unknown>, contentOptions: unkno
 export const WebScrollBox = forwardRef<ScrollBoxRenderable, Record<string, unknown> & { children?: ReactNode }>(
   function WebScrollBox({ children, contentOptions, ...props }, ref) {
     const elementRef = useRef<HTMLDivElement | null>(null);
-    const isHeaderLikeScroller = props.scrollX === true && props.scrollY !== true && props.height === 1;
+    const isHeaderLikeScroller = isHeaderStripScrollBox(props);
     /**
      * OpenTUI's ScrollBox scrolls vertically unless told otherwise, so this one
      * has to as well: a pane that renders a ScrollBox and nothing more expects
-     * the wheel to work, and used to get an unscrollable box that only its own
-     * arrow-key handler could move. The one-row horizontal strips (tab bars,
-     * table headers, chart legends) are the exception and scroll on their axis.
+     * the wheel and the arrow keys to work (the pane keyboard scroll registry
+     * reads the same rule). The one-row horizontal strips (tab bars, table
+     * headers, chart legends) are the exception and scroll on their axis.
      */
-    const scrollYEnabled = props.scrollY !== false && !isHeaderLikeScroller;
+    const scrollYEnabled = scrollBoxScrollsVertically(props);
     const [horizontalScrollBarVisible, setHorizontalScrollBarVisible] = useState(
       () => props.scrollX === true && !isHeaderLikeScroller,
     );

package/src/renderers/dom/host/tabs.tsx

@@ -13,6 +13,7 @@ import { WebMenu } from "../desktop/menu";
 import { WebPopover } from "../desktop/popover";
 import { useHorizontalOverflow } from "./overflow-fade";
 import { useTopSurfaceColor } from "./top-surface";
+import { hideDragShield, showDragShield } from "./drag-shield";
 
 type CssVars = CSSProperties & Record<`--${string}`, string>;
 
@@ -106,7 +107,7 @@ export function WebTabs({
     const cleanup = () => {
       document.removeEventListener("mousemove", handleMove);
       document.removeEventListener("mouseup", handleUp);
-      document.body.classList.remove("gloom-dragging");
+      hideDragShield();
       dragCleanupRef.current = null;
       dragOffsetXRef.current = 0;
       dragSourceWidthRef.current = 0;
@@ -120,7 +121,7 @@ export function WebTabs({
       moveEvent.preventDefault();
       dragOffsetXRef.current = offsetX;
       sourceElement.style.transform = `translateX(${offsetX}px) scale(1.03)`;
-      document.body.classList.add("gloom-dragging");
+      showDragShield();
       setDragTargetValue(resolveTarget(sourceBounds.left + offsetX + sourceBounds.width / 2));
     };
     const handleUp = (upEvent: MouseEvent) => {

package/src/renderers/dom/styles.css

@@ -159,10 +159,21 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
 [data-gloom-role="pane-restore"] {
   cursor: pointer;
 }
-body.gloom-dragging,
-body.gloom-dragging [data-gloom-role="pane-header"] {
+/* Up for the length of a drag (see drag-shield.ts): the grabbing cursor
+   everywhere, and no hover under the pointer. */
+[data-gloom-role="drag-shield"] {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483647;
   cursor: grabbing;
 }
+/* Surfaces that drag a pane, its size or a split keep the whole pointer
+   stream: a touch or pen press on them never starts a pan or zoom. */
+[data-gloom-role="pane-header"][data-drag-surface="pane"],
+[data-gloom-role="resize-handle"],
+[data-gloom-role="dock-divider"] {
+  touch-action: none;
+}
 [data-gloom-role="pane-title"] {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -310,9 +321,6 @@ body.gloom-dragging [data-gloom-role="pane-header"] {
 [data-gloom-role="chart-surface"] {
   cursor: crosshair;
 }
-body.gloom-dragging [data-gloom-role="chart-surface"] {
-  cursor: grabbing;
-}
 [data-gloom-role="tab-list"] {
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;

package/src/renderers/electrobun/bun/desktop/backend-requests.ts

@@ -6,6 +6,7 @@ import {
   saveConfig,
 } from "../../../../data/config/store";
 import type { UpdateProgress } from "../../../../updater";
+import { deleteBrokerAccountRecord, saveBrokerAccountRecord } from "../../../../brokers/account-cache";
 import type {
   DesktopBackendRequestResponse,
   DesktopCoreRequest,
@@ -105,6 +106,12 @@ export async function handleDesktopBackendRequest(
     case "session.delete":
       backend.requireServices().persistence.sessions.delete(request.payload.sessionId);
       return null;
+    case "resources.set":
+      saveBrokerAccountRecord(backend.requireServices().persistence.resources, request.payload.record);
+      return null;
+    case "resources.delete":
+      deleteBrokerAccountRecord(backend.requireServices().persistence.resources, request.payload.key);
+      return null;
     default: {
       const exhaustive: never = request;
       throw new Error(`Unknown core backend method: ${String(exhaustive)}`);

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

@@ -511,6 +511,8 @@ export class DesktopBackend {
       case "config.import":
       case "session.set":
       case "session.delete":
+      case "resources.set":
+      case "resources.delete":
         return handleDesktopBackendRequest(this, rpc, request);
       default: {
         const exhaustive: never = request;

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

@@ -8,6 +8,8 @@ import {
   initDataDir,
 } from "../../../../data/config/store";
 import type { AppConfig } from "../../../../types/config";
+import { listPersistedBrokerAccountRecords } from "../../../../brokers/account-cache";
+import type { CachedResourceRecord } from "../../../../data/resource-store";
 import {
   loadDesktopPluginState,
 } from "./plugin-state";
@@ -54,6 +56,16 @@ export function desktopRendererCapabilityManifests(registry: CapabilityRegistry)
   return registry.manifests({ rendererOnly: true, includeDisabled: true });
 }
 
+/** The view's resource store lives in memory; it starts from the account snapshots saved here. */
+function loadSavedResources(services: AppServices, config: AppConfig): CachedResourceRecord[] {
+  try {
+    return listPersistedBrokerAccountRecords(services.persistence.resources, config.brokerInstances);
+  } catch (error) {
+    console.warn("saved broker accounts could not be read", error);
+    return [];
+  }
+}
+
 function buildInitializationPayload(
   backend: DesktopBackend,
   config: AppConfig,
@@ -66,6 +78,7 @@ function buildInitializationPayload(
     desktopSnapshot: backend.workspace?.getSnapshot() ?? null,
     desktopThemePreview: backend.stateBroadcaster.currentThemePreview,
     pluginState: loadDesktopPluginState(services.pluginRegistry),
+    savedResources: loadSavedResources(services, config),
     capabilityManifests: desktopRendererCapabilityManifests(services.pluginRegistry.capabilities),
     desktopPlatform: process.platform,
     windowKind: windowTarget.kind,

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

@@ -3,6 +3,7 @@ import type { PaneRuntimeState } from "../../../core/state/app/state";
 import type { DesktopDockPreviewState, DesktopSharedStateSnapshot, DesktopThemePreviewState } from "../../../types/desktop-window";
 import type { DesktopApplicationMenuCommand } from "../../../types/desktop-menu";
 import type { AppConfig } from "../../../types/config";
+import type { CachedResourceRecord, ResourceCacheKey } from "../../../data/resource-store";
 import type { TickerRecord } from "../../../types/ticker";
 import type { ReleaseInfo, UpdateCheckResult, UpdateProgress } from "../../../updater";
 import type { CapabilityManifest } from "../../../capabilities";
@@ -18,6 +19,8 @@ export interface ElectrobunBackendInit {
   desktopSnapshot: DesktopSharedStateSnapshot | null;
   desktopThemePreview: DesktopThemePreviewState;
   pluginState: Record<string, Record<string, unknown>>;
+  /** Saved broker account snapshots, which the view's in-memory store starts from. */
+  savedResources?: CachedResourceRecord[];
   capabilityManifests: CapabilityManifest[];
   desktopPlatform: string;
   windowKind: "main" | "detached";
@@ -226,6 +229,9 @@ interface DesktopBackendRequestMap {
     response: null;
   };
   "session.delete": { request: { sessionId: string }; response: null };
+  /** Saves or drops a broker account snapshot in the cache database; nothing else is accepted. */
+  "resources.set": { request: { record: CachedResourceRecord }; response: null };
+  "resources.delete": { request: { key: ResourceCacheKey }; response: null };
 }
 
 export type DesktopBackendRequestMethod = keyof DesktopBackendRequestMap;
@@ -251,7 +257,10 @@ export type DesktopWorkspaceRequest = DesktopBackendRequestFor<Extract<DesktopBa
 export type DesktopPluginStateRequest = DesktopBackendRequestFor<Extract<DesktopBackendRequestMethod, `pluginState.${string}`>>;
 export type DesktopHostRequest = DesktopBackendRequestFor<Extract<DesktopBackendRequestMethod, `host.${string}`>>;
 export type DesktopCoreRequest = DesktopBackendRequestFor<
-  Extract<DesktopBackendRequestMethod, `update.${string}` | `ticker.${string}` | `config.${string}` | `session.${string}`>
+  Extract<
+    DesktopBackendRequestMethod,
+    `update.${string}` | `ticker.${string}` | `config.${string}` | `session.${string}` | `resources.${string}`
+  >
 >;
 
 interface BackendRequestPayload {

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

@@ -397,6 +397,9 @@ function HydratePayload({
       tickers: new Map(payload.tickers.map((ticker) => [ticker.metadata.ticker, ticker])),
     });
     dispatch({ type: "HYDRATE_FINANCIALS", financials: new Map(payload.financials) });
+    for (const [instanceId, accounts] of Object.entries(payload.brokerAccounts ?? {})) {
+      dispatch({ type: "SET_BROKER_ACCOUNTS", instanceId, accounts });
+    }
     dispatch({ type: "SET_INITIALIZED" });
 
     return waitForShotReadiness();

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

@@ -14,16 +14,6 @@ const contextMenuActionScope = new DesktopContextMenuActionScope(
   CONTEXT_MENU_ACTION_TTL_MS,
 );
 
-export function startElectrobunWindowDrag(): void {
-  window.__electrobunInternalBridge?.postMessage(JSON.stringify([
-    JSON.stringify({
-      type: "message",
-      id: "startWindowMove",
-      payload: { id: window.__electrobunWindowId },
-    }),
-  ]));
-}
-
 export async function showDesktopContextMenu(items: ContextMenuItem[]): Promise<boolean> {
   if (!NATIVE_CONTEXT_MENU_SUPPORTED) return false;
   contextMenuActionScope.clear();

package/src/renderers/electrobun/view/host/window-move.ts

@@ -0,0 +1,28 @@
+function postWindowMove(id: "startWindowMove" | "stopWindowMove"): void {
+  window.__electrobunInternalBridge?.postMessage(JSON.stringify([
+    JSON.stringify({ type: "message", id, payload: { id: window.__electrobunWindowId } }),
+  ]));
+}
+
+let endWindowMove: (() => void) | null = null;
+
+/**
+ * Moves the window with the pointer until the button comes up. Electrobun
+ * stops the move when its native monitor sees the release, but only if the
+ * start reached it first: the start goes through the Bun process, and a quick
+ * click releases before it lands, leaving the window following the bare
+ * pointer until the next click. The release is sent from here too, as
+ * Electrobun's own drag regions do; it always arrives after the start.
+ */
+export function startElectrobunWindowDrag(): void {
+  // A press whose release never reached the page (it ended outside the window) is over.
+  endWindowMove?.();
+  postWindowMove("startWindowMove");
+  const end = () => {
+    window.removeEventListener("mouseup", end, true);
+    if (endWindowMove === end) endWindowMove = null;
+    postWindowMove("stopWindowMove");
+  };
+  endWindowMove = end;
+  window.addEventListener("mouseup", end, true);
+}

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

@@ -4,7 +4,8 @@ import {
   SESSION_SAVE_DEBOUNCE_MS,
 } from "../../../../state/persist-scheduler";
 import { backendRequest, getElectrobunBackendInitSnapshot } from "../backend-rpc";
-import { MemoryResourceStore } from "../../../../data/memory-resource-store";
+import { WriteThroughResourceStore } from "../../../../data/memory-resource-store";
+import { isBrokerAccountSnapshotKey } from "../../../../brokers/account-cache";
 
 class RemoteSessionStore {
   private snapshot = getElectrobunBackendInitSnapshot()?.sessionSnapshot ?? null;
@@ -123,9 +124,21 @@ class RemotePluginStateStore {
   }
 }
 
+/**
+ * Caches stay in the view's memory, except broker account snapshots: the Bun
+ * process saves those in the cache database, as the terminal does, so a
+ * broker portfolio opens with its last known equity and cash.
+ */
+function createViewResourceStore(): WriteThroughResourceStore {
+  return new WriteThroughResourceStore(getElectrobunBackendInitSnapshot()?.savedResources ?? [], {
+    set: (record) => void backendRequest("resources.set", { record }).catch(() => {}),
+    delete: (key) => void backendRequest("resources.delete", { key }).catch(() => {}),
+  }, isBrokerAccountSnapshotKey);
+}
+
 export class RemotePersistence {
   readonly tickers = {};
-  readonly resources = new MemoryResourceStore();
+  readonly resources = createViewResourceStore();
   readonly pluginState = new RemotePluginStateStore(getElectrobunBackendInitSnapshot()?.pluginState ?? {});
   readonly sessions = new RemoteSessionStore();
 

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

@@ -2,11 +2,8 @@
 import type { RendererHost, UiHost } from "../../../ui/host";
 import { flushUsageCounts } from "../../../telemetry/usage-counts";
 import { backendRequest } from "./backend-rpc";
-import {
-  NATIVE_CONTEXT_MENU_SUPPORTED,
-  showDesktopContextMenu,
-  startElectrobunWindowDrag,
-} from "./host/native";
+import { NATIVE_CONTEXT_MENU_SUPPORTED, showDesktopContextMenu } from "./host/native";
+import { startElectrobunWindowDrag } from "./host/window-move";
 import { createDomUiHost } from "../../dom/dom-ui-host";
 
 export function createWebUiHost(desktopPlatform?: string): UiHost {