gloomberb 0.16.2 → 0.16.4

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(elementRef.current);
+          // 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,35 @@
+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.
+ *
+ * A press on a resize edge (a pane's corner, a split) keeps its resize cursor
+ * for the drag instead, as a window edge does.
+ */
+export function showDragShield(pressed?: Element | null): void {
+  document.body.classList.add("gloom-dragging");
+  if (!shield?.isConnected) {
+    shield = document.createElement("div");
+    shield.setAttribute("data-gloom-role", "drag-shield");
+    shield.setAttribute("aria-hidden", "true");
+    document.body.appendChild(shield);
+  }
+  shield.style.cursor = resizeCursor(pressed);
+}
+
+function resizeCursor(element: Element | null | undefined): string {
+  if (!element || typeof getComputedStyle !== "function") return "";
+  const cursor = getComputedStyle(element).cursor;
+  return cursor.endsWith("-resize") ? cursor : "";
+}
+
+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,62 @@
+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>();
+
+/** A style value as React writes it: a bare number is pixels. */
+function renderedValue(value: unknown): string {
+  if (typeof value === "number") return `${value}px`;
+  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, and a size, which lays out only the box's subtree. `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);
+    style.width = renderedValue(rendered.width);
+    style.height = renderedValue(rendered.height);
+    return;
+  }
+  if (frame.width !== undefined) style.width = `${frame.width * WEB_CELL_WIDTH}px`;
+  if (frame.height !== undefined) style.height = `${frame.height * WEB_CELL_HEIGHT}px`;
+  if (frame.dx === undefined && frame.dy === undefined) return;
+  // Promoted once, before the first frame of the drag.
+  if (style.willChange !== "transform") style.willChange = "transform";
+  slide(element, `translate3d(${(frame.dx ?? 0) * WEB_CELL_WIDTH}px, ${(frame.dy ?? 0) * 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/input-host.tsx

@@ -1,8 +1,10 @@
 /** @jsxImportSource react */
 import { useEffect, useMemo, useSyncExternalStore, type ReactNode } from "react";
+import { flushSync } from "react-dom";
 import {
   createShortcutRegistry,
   InputHostProvider,
+  useRegisteredBeforeShortcut,
   useRegisteredShortcut,
   type InputHost,
   type KeyEventLike,
@@ -76,7 +78,7 @@ function getViewport() {
 }
 
 export function WebInputHostProvider({ children }: { children: ReactNode }) {
-  const shortcutRegistry = useMemo(() => createShortcutRegistry(), []);
+  const shortcutRegistry = useMemo(() => createShortcutRegistry({ flushSync }), []);
 
   useEffect(() => {
     // Windows fires the Menu key's contextmenu on keyup. When the app used the
@@ -144,6 +146,9 @@ export function WebInputHostProvider({ children }: { children: ReactNode }) {
     useShortcut(handler, options) {
       useRegisteredShortcut(shortcutRegistry, handler, options);
     },
+    useBeforeShortcut(listener) {
+      useRegisteredBeforeShortcut(shortcutRegistry, listener);
+    },
     useViewport() {
       return useSyncExternalStore(subscribeViewport, getViewport, getViewport);
     },

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;
@@ -745,6 +753,19 @@ html[data-gloom-screenshot="true"] [data-gloom-role="chart-watermark"] {
   box-shadow: inset 1px 0 0 var(--qb-hairline);
 }
 .gloom-qb-inline .gloom-qb-view { margin-left: 0; box-shadow: none; align-self: stretch; }
+/* A long inline choice (an expiry strip) scrolls by itself, as the terminal's
+   does, so its label and the controls beside it stay in view. */
+.gloom-qb-filters[data-strip="true"],
+.gloom-qb-inline[data-strip="true"] { flex: 0 1 auto; min-width: 0; }
+.gloom-qb-inline[data-strip="true"] .gloom-qb-segments {
+  flex: 0 1 auto;
+  min-width: 12ch;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+.gloom-qb-inline[data-strip="true"] .gloom-qb-segments::-webkit-scrollbar { display: none; }
+.gloom-qb-inline[data-strip="true"] .gloom-qb-segments > button { flex: none; white-space: nowrap; }
+.gloom-qb-filters[data-strip="true"] > :not([data-strip="true"]) { flex: none; }
 .gloom-qb-view button {
   height: 100%;
   padding: 0 8px;

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

@@ -105,6 +105,8 @@ export class DesktopBackend {
     getWindowKey: this.rpcs.getRpcWindowKey,
   });
   readonly detachedWindows = new DesktopDetachedWindowManager(this);
+  /** Each pane type's plugin, for hiding popped-out windows with their plugin. */
+  paneOwners: ReadonlyMap<string, string> = new Map();
 
   private crashReporterInstalled = false;
   private restartInProgress = false;
@@ -162,9 +164,11 @@ export class DesktopBackend {
   async startServices(nextConfig: AppConfig): Promise<{ config: AppConfig; services: AppServices }> {
     this.setConfig(nextConfig);
     const config = this.requireConfig();
+    const { paneOwners, ...backendPlugins } = await loadDesktopBackendPlugins();
+    this.paneOwners = paneOwners;
     const services = createAppServices({
       config,
-      ...await loadDesktopBackendPlugins(),
+      ...backendPlugins,
     });
     this.services = services;
     await services.ready;
@@ -511,6 +515,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/detached-windows.ts

@@ -73,7 +73,18 @@ export class DesktopDetachedWindowManager {
     const config = this.backend.config;
     if (!config) return;
 
-    const desiredEntries = new Map(config.layout.detached.map((entry) => [entry.instanceId, entry] as const));
+    // A pane whose plugin is switched off stays in the layout, out of sight,
+    // as it does in the main window: its window closes without undocking or
+    // removing it, and opens again where it was when the plugin is back on.
+    const disabledPlugins = new Set(config.disabledPlugins);
+    const hidden = (instanceId: string) => {
+      const paneType = findPaneInstance(config.layout, instanceId)?.paneId;
+      const owner = paneType ? this.backend.paneOwners.get(paneType) : undefined;
+      return !!owner && disabledPlugins.has(owner);
+    };
+    const desiredEntries = new Map(config.layout.detached
+      .filter((entry) => !hidden(entry.instanceId))
+      .map((entry) => [entry.instanceId, entry] as const));
     for (const [instanceId, entry] of desiredEntries) {
       const existingWindow = this.windows.get(instanceId);
       if (!existingWindow) {

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

@@ -1,5 +1,5 @@
 import { existsSync, mkdirSync } from "fs";
-import { homedir } from "os";
+import { homedir, hostname } from "os";
 import { getGloomberbDirs } from "../../../../data/config/home";
 import type { AppServices } from "../../../../core/app-services";
 import { restoreExtractedPlugins } from "../../../../cli/restore-plugins";
@@ -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,8 +78,10 @@ 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,
+    hostName: hostname(),
     windowKind: windowTarget.kind,
     paneId: windowTarget.paneId,
     telemetry: {