gloomberb 0.18.2 → 0.18.3

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

@@ -12,6 +12,7 @@ import { WebIcon, WebIconButton } from "../desktop/icons";
 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>;
@@ -44,9 +45,10 @@ export function WebTabs({
   // A tab bar occupies exactly the one row every caller reserves for it. Any
   // extra pixels here are pixels the pane's children are told they own and the
   // pane then clips, which is how a chart's time axis ends up behind a footer.
-  // Title-bar tabs fill the header to its bottom edge, so the active tab's
-  // underline lies on the header's bottom rule. Every variant draws the one tab
-  // look in styles.css: text, and the active tab on an accent underline.
+  // Title-bar tabs fill the header to its bottom edge, where the active tab's
+  // box covers the header's bottom rule and opens into the pane. Every variant
+  // draws the one tab look in styles.css: text, the active tab on an accent
+  // underline, and title-bar tabs as boxes instead of underlines.
   const listHeight = header ? "100%" : variant === "underline" || compact ? WEB_CELL_HEIGHT : "100%";
 
   useEffect(() => () => dragCleanupRef.current?.(), []);
@@ -67,6 +69,9 @@ export function WebTabs({
   useEffect(() => {
     if (!overflowing) setOverflowMenuOpen(false);
   }, [overflowing]);
+  // The active title-bar tab opens into the pane, so it takes the colour of
+  // whatever is directly under it.
+  useTopSurfaceColor(tabListRef, header, [activeValue, tabs]);
 
   const selectFromOverflowMenu = (value: string) => {
     setOverflowMenuOpen(false);
@@ -173,12 +178,14 @@ export function WebTabs({
     <div
       ref={tabListRef}
       data-gloom-role="tab-list"
+      data-gloom-variant={header ? "header" : undefined}
       role="tablist"
       onWheel={overflow.onWheel}
       style={{
         display: "flex",
         flexDirection: "row",
-        alignItems: "stretch",
+        // Title-bar tabs stand on the header's bottom edge, clear of its top.
+        alignItems: header ? "flex-end" : "stretch",
         gap: 0,
         width: "100%",
         height: listHeight,
@@ -217,7 +224,10 @@ export function WebTabs({
           transform: `translateX(${dragTranslateX}px)${sourceDragging ? " scale(1.03)" : ""}`,
           zIndex: dragSourceValue === tab.value ? 2 : undefined,
           willChange: dragSourceValue ? "transform" : undefined,
-          transition: `color 110ms ease, transform ${dragSourceValue && dragSourceValue !== tab.value ? "var(--tab-reorder-duration, 160ms)" : "0ms"} cubic-bezier(0.77, 0, 0.175, 1)`,
+          // An inactive title-bar tab fades its hover fill in. The active one's
+          // box changes with the bar's rule and the body under it, which do not
+          // fade, so it does not either.
+          transition: `color 110ms ease${header && !active ? ", background-color 110ms ease" : ""}, transform ${dragSourceValue && dragSourceValue !== tab.value ? "var(--tab-reorder-duration, 160ms)" : "0ms"} cubic-bezier(0.77, 0, 0.175, 1)`,
           cursor: disabled ? "default" : dragSourceValue ? "grabbing" : reorderable ? "grab" : "pointer",
           ...(dragTarget ? { color: "var(--gloom-text)" } : {}),
         } satisfies CssVars;
@@ -230,6 +240,7 @@ export function WebTabs({
             data-active={active ? "true" : undefined}
             data-dense={dense || compact ? "true" : undefined}
             data-reorderable={reorderable ? "true" : undefined}
+            data-drag-target={dragTarget ? "true" : undefined}
             data-tab-value={tab.value}
             type="button"
             role="tab"

package/src/renderers/dom/host/top-surface.ts

@@ -0,0 +1,127 @@
+import { useLayoutEffect, type RefObject } from "react";
+
+type Rgba = [number, number, number, number];
+
+const THROTTLE_MS = 120;
+/** Rows and cells follow the cursor and selection; a tab must not take their colour. */
+const TRANSIENT_ROLES = /^data-table-(row|cell|header-cell)$/;
+const ACTIVE_BG = "--pane-tab-active-bg";
+
+function parseColor(value: string): Rgba | null {
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "transparent") return [0, 0, 0, 0];
+  const rgb = /^rgba?\(([^)]+)\)$/.exec(trimmed);
+  if (rgb) {
+    const parts = rgb[1]!.split(/[\s,/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+    return [parts[0]!, parts[1]!, parts[2]!, parts[3] ?? 1];
+  }
+  const srgb = /^color\(srgb\s+([^)]+)\)$/.exec(trimmed);
+  if (srgb) {
+    const parts = srgb[1]!.split(/[\s/]+/).filter(Boolean).map(Number);
+    if (parts.length < 3 || parts.some(Number.isNaN)) return null;
+    return [parts[0]! * 255, parts[1]! * 255, parts[2]! * 255, parts[3] ?? 1];
+  }
+  return null;
+}
+
+function over(top: Rgba, base: Rgba): Rgba {
+  const alpha = top[3];
+  return [
+    top[0] * alpha + base[0] * (1 - alpha),
+    top[1] * alpha + base[1] * (1 - alpha),
+    top[2] * alpha + base[2] * (1 - alpha),
+    1,
+  ];
+}
+
+/**
+ * The colour the active title-bar tab takes so it reads as the top of the pane
+ * body: whatever surface sits directly under it (the query bar's band, a detail
+ * header, a table header, the body itself), translucent layers composited.
+ */
+function measureTopSurface(body: HTMLElement, x: number): string | null {
+  const bodyRect = body.getBoundingClientRect();
+  if (bodyRect.width <= 0 || bodyRect.height <= 0) return null;
+  const y = bodyRect.top + 1;
+  let top: Element = document.elementsFromPoint(x, y).find((element) => body.contains(element)) ?? body;
+  // A marked surface (query bar, detail header) is taken whole, so hovering a
+  // control inside it never tints the tab.
+  const surface = top.closest("[data-gloom-top-surface]");
+  if (surface && body.contains(surface)) top = surface;
+
+  const layers: Rgba[] = [];
+  for (let element: Element | null = top; element; element = element.parentElement) {
+    const role = element.getAttribute("data-gloom-role") ?? "";
+    const rect = element.getBoundingClientRect();
+    const startsAtTop = Math.abs(rect.top - bodyRect.top) <= 1.5;
+    const spansBody = rect.width >= bodyRect.width * 0.6;
+    if (element === body || element === surface || (startsAtTop && spansBody && !TRANSIENT_ROLES.test(role))) {
+      const color = parseColor(getComputedStyle(element).backgroundColor);
+      if (color && color[3] > 0) layers.push(color);
+    }
+    if (element === body) break;
+  }
+  // From the body outwards to the topmost surface.
+  let color: Rgba | null = null;
+  for (let index = layers.length - 1; index >= 0; index -= 1) {
+    const layer = layers[index]!;
+    color = color ? over(layer, color) : layer[3] >= 1 ? layer : null;
+  }
+  if (!color) return null;
+  return `rgb(${Math.round(color[0])}, ${Math.round(color[1])}, ${Math.round(color[2])})`;
+}
+
+/**
+ * Keeps `--pane-tab-active-bg` on a title-bar tab list equal to the surface
+ * under its active tab, so the tab opens into the pane. Without a measure the
+ * header's own value (the body colour) applies. A change to the body itself
+ * (focus and theme recolour it) is measured at once, before it paints; changes
+ * inside it (a detail opens, a query bar appears) at most every 120 ms; a
+ * resize once it stops, so dragging a pane's edge costs no measures.
+ */
+export function useTopSurfaceColor(listRef: RefObject<HTMLElement | null>, enabled: boolean, deps: readonly unknown[]) {
+  useLayoutEffect(() => {
+    const list = listRef.current;
+    if (!enabled || !list) return;
+    const body = list.closest("[data-gloom-role=pane-window], [data-gloom-role=detached-pane-window]")
+      ?.querySelector<HTMLElement>(":scope > [data-gloom-role=pane-body]");
+    if (!body) return;
+
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const measure = () => {
+      if (timer != null) clearTimeout(timer);
+      timer = null;
+      const active = list.querySelector<HTMLElement>("[data-active=true]");
+      if (!active) return;
+      const rect = active.getBoundingClientRect();
+      const color = measureTopSurface(body, rect.left + rect.width / 2);
+      if (color === (list.style.getPropertyValue(ACTIVE_BG) || null)) return;
+      if (color) list.style.setProperty(ACTIVE_BG, color);
+      else list.style.removeProperty(ACTIVE_BG);
+    };
+    const schedule = () => {
+      if (timer == null) timer = setTimeout(measure, THROTTLE_MS);
+    };
+    const settle = () => {
+      if (timer != null) clearTimeout(timer);
+      timer = setTimeout(measure, THROTTLE_MS);
+    };
+    measure();
+    const resize = new ResizeObserver(settle);
+    resize.observe(body);
+    // Live data rewrites text constantly; only structure and inline styles
+    // (visibility, focus colours, theme) can change what sits under the tab.
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => record.target === body)) measure();
+      else schedule();
+    });
+    mutations.observe(body, { subtree: true, childList: true, attributes: true, attributeFilter: ["style", "data-gloom-top-surface"] });
+    return () => {
+      if (timer != null) clearTimeout(timer);
+      resize.disconnect();
+      mutations.disconnect();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [enabled, ...deps]);
+}

package/src/renderers/dom/styles.css

@@ -507,6 +507,45 @@ button, [data-gloom-interactive="true"] { cursor: pointer; }
 [data-gloom-role="tab-button"][data-active="true"]::after { opacity: 1; }
 [data-gloom-role="tab-button"]:disabled { color: var(--gloom-text-muted); cursor: default; }
 [data-gloom-role="tab-button"]:focus-visible { outline: none; }
+/* Title-bar tabs: the same text, sizes and colours, drawn as raised boxes
+   instead of underlines. The active tab is a box with rounded top corners,
+   open at the bottom: its top and sides in the header rule's colour (the
+   accent while the pane is focused), its fill the surface under it, laid over
+   the rule so it opens into the pane. An inactive tab takes the hover fill in
+   the same shape. The pane header sets the colours (pane/header.tsx). */
+[data-gloom-role="tab-list"][data-gloom-variant="header"] {
+  /* Header colour left above a box, and the box's line: the header rule's width. */
+  --pane-tab-top-gap: 2px;
+  --pane-tab-rule: 1px;
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"] {
+  height: calc(100% - var(--pane-tab-top-gap));
+  /* The sides take their line from the padding, so a label sits where it
+     would without the box. The gap and the top line push the label down; the
+     bottom padding lifts it back onto the header's centre line, halfway
+     between its top rule (a divider or a floating border, when there is one)
+     and its bottom rule, where the title sits. */
+  padding: 0 calc(var(--gloom-space-sm) - var(--pane-tab-rule)) calc(var(--pane-tab-top-gap) + 2 * var(--pane-tab-rule) - var(--pane-tab-top-inset, 0px));
+  border: var(--pane-tab-rule) solid transparent;
+  border-bottom: 0;
+  border-radius: var(--gloom-radius-md) var(--gloom-radius-md) 0 0;
+  /* The line lies on the bar, as the rule does, so a translucent hairline is
+     the same colour on both. */
+  background-clip: padding-box;
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"]::after { content: none; }
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"][data-active="true"] {
+  background-color: var(--pane-tab-active-bg, var(--gloom-bg));
+  border-color: var(--pane-tab-border, var(--gloom-hairline));
+}
+[data-gloom-role="tab-list"][data-gloom-variant="header"] > [data-gloom-role="tab-button"]:not([data-active="true"]):not(:disabled):is(:hover, :focus-visible, [data-drag-target="true"]) {
+  background-color: var(--gloom-hover-fill);
+}
+/* A tab's close mark stays inside the box: in a 20px title bar the box is
+   shorter than the icon button, whose fill would cover the box's top line. */
+[data-gloom-role="tab-list"][data-gloom-variant="header"] [data-gloom-role="tab-close"] {
+  max-height: 100%;
+}
 /* A tab's close mark and a strip's plus are the icon button: 20 by 18, the control radius, the hover fill. */
 [data-gloom-role="tab-add"] {
   border: 0;

package/src/renderers/electrobun/bun/core-capabilities.ts

@@ -8,6 +8,7 @@ import type { AppServices } from "../../../core/app-services";
 import { diskNotesFilesIO, isNotesFile } from "../../../plugins/builtin/notes/files";
 import type { BrokerAdapter } from "../../../types/broker";
 import type { AppConfig, BrokerInstanceConfig } from "../../../types/config";
+import { errorMessage } from "../../../utils/errors";
 
 const DESKTOP_CORE_PLUGIN_ID = "desktop-core";
 
@@ -221,7 +222,14 @@ function createNotesFilesCapability(): PluginCapability {
         await io(input).delete(file(input));
         return null;
       }, "action"),
-      listKeys: op((input: any) => io(input).listKeys({ strict: input.strict === true })),
+      listKeys: op(async (input: any) => {
+        const skipped: Array<{ key: string; reason: string }> = [];
+        const keys = await io(input).listKeys({
+          strict: input.strict === true,
+          ...(input.reportSkipped === true ? { skipped: (key: string, error: unknown) => skipped.push({ key, reason: errorMessage(error) }) } : {}),
+        });
+        return input.reportSkipped === true ? { keys, skipped } : keys;
+      }),
     },
   };
 }

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

@@ -15,6 +15,8 @@ import { startRemoteControlServer, type RemoteControlServer } from "../../../../
 import type { RemoteControlRequest, RemoteControlResponse } from "../../../../remote/types";
 import { installCrashReporter } from "../../../../telemetry/crash-reports";
 import { createNodeCrashReporterHost } from "../../../../telemetry/crash-reports-node";
+import { installUpdateFailureReporter, reviewLastUpdateAttempt } from "../../../../telemetry/update-failures";
+import { createNodeUpdateFailureHost } from "../../../../telemetry/update-failures-node";
 import type { AppConfig } from "../../../../types/config";
 import type { DesktopSharedStateSnapshot } from "../../../../types/desktop-window";
 import type {
@@ -37,6 +39,7 @@ import {
 } from "../external-plugins";
 import { MAIN_WINDOW_RPC_KEY } from "../window/focus";
 import { handleDesktopBackendRequest } from "./backend-requests";
+import { detectDesktopInstallKind, removeUpdateAsides } from "./update";
 import { DesktopCapabilityBridge } from "./capability-bridge";
 import { DesktopDetachedWindowManager } from "./detached-windows";
 import { handleDesktopHostRequest } from "./host-requests";
@@ -138,6 +141,13 @@ export class DesktopBackend {
     if (!this.crashReporterInstalled) {
       this.crashReporterInstalled = true;
       installCrashReporter(createNodeCrashReporterHost({ surface: "desktop", getConfig: () => this.config }));
+      // This process runs the desktop update, so it reports how the last one ended and any that fail.
+      installUpdateFailureReporter(createNodeUpdateFailureHost({
+        installKind: detectDesktopInstallKind(),
+        getDataDir: () => this.config?.dataDir ?? null,
+      }));
+      reviewLastUpdateAttempt();
+      void removeUpdateAsides();
     }
     // The native menu shows the same accelerators the keys use, so a rebind
     // rebuilds it.