gloomberb 0.16.1 → 0.16.2

package/src/components/chart/composite/use-composite-viewport.ts

@@ -0,0 +1,143 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ResolvedSeries } from "../../../time-series/types";
+import {
+  buildCompositeNavigationFrame,
+  compositeNavigationDataViewport,
+  compositeViewportPositions,
+  fitCompositeViewport,
+  panCompositeViewport,
+  sameCompositeViewport,
+  shouldResetCompositeViewport,
+  zoomCompositeViewport,
+  type CompositeNavigationFrame,
+  type CompositeViewportRange,
+} from "./interactions";
+import type { CompositeChartProps } from "./types";
+
+/** How far past the first loaded observation a backfilling chart may pan, as a fraction of the view. */
+const HISTORICAL_PADDING_RATIO = 0.5;
+
+export function useCompositeViewport({
+  viewport,
+  viewportResetKey,
+  visibleSeries,
+  marketTimelineSeries,
+  allowHistoricalBackfill,
+  onViewportChange,
+}: {
+  viewport: CompositeChartProps["viewport"];
+  viewportResetKey: CompositeChartProps["viewportResetKey"];
+  visibleSeries: ResolvedSeries[];
+  marketTimelineSeries: ResolvedSeries[];
+  allowHistoricalBackfill: boolean;
+  onViewportChange: CompositeChartProps["onViewportChange"];
+}) {
+  const previousAuthoredViewportRef = useRef<CompositeViewportRange | null>(viewport ?? null);
+  const previousViewportResetKeyRef = useRef(viewportResetKey);
+  // The user owns this once they navigate. Data refreshes never rewrite it;
+  // only the authored viewport changing or an explicit reset clears it.
+  const [userViewport, setUserViewport] = useState<CompositeViewportRange | null>(null);
+  const hasViewportResetKey = viewportResetKey !== undefined
+    || previousViewportResetKeyRef.current !== undefined;
+  const authoredViewportChanged = hasViewportResetKey
+    ? previousViewportResetKeyRef.current !== viewportResetKey
+    : shouldResetCompositeViewport(
+        previousAuthoredViewportRef.current,
+        viewport ?? null,
+      );
+  const navigationFrame = useMemo(
+    () => buildCompositeNavigationFrame(visibleSeries, marketTimelineSeries, {
+      historicalPaddingRatio: allowHistoricalBackfill ? HISTORICAL_PADDING_RATIO : 0,
+    }),
+    [allowHistoricalBackfill, marketTimelineSeries, visibleSeries],
+  );
+  const authoredViewport = useMemo(() => {
+    // The requested dates own the axis, including gaps in a cached or partial
+    // response. Fitting them to available observations silently changes the
+    // research period. User pan/zoom gestures retain their navigation limits.
+    if (viewport && Number.isFinite(viewport.start.getTime())
+      && Number.isFinite(viewport.end.getTime()) && viewport.start <= viewport.end) return viewport;
+    return navigationFrame ? compositeNavigationDataViewport(navigationFrame) : null;
+  }, [navigationFrame, viewport]);
+  const activeUserViewport = authoredViewportChanged ? null : userViewport;
+  const effectiveViewport = activeUserViewport ?? authoredViewport;
+  const userViewportStart = activeUserViewport?.start.getTime() ?? null;
+  const userViewportEnd = activeUserViewport?.end.getTime() ?? null;
+  const lastReportedViewportRef = useRef<string | null>(null);
+  const viewportInteractionRef = useRef<"pan" | "reset" | "zoom">("reset");
+  useEffect(() => {
+    if (!onViewportChange) return;
+    const key = userViewportStart === null || userViewportEnd === null
+      ? "none"
+      : `${userViewportStart}:${userViewportEnd}`;
+    // The callback drives adaptive data loading. Seed it from the authored
+    // viewport without echoing that controlled value back into the loader.
+    if (lastReportedViewportRef.current === null) {
+      lastReportedViewportRef.current = key;
+      return;
+    }
+    if (lastReportedViewportRef.current === key) return;
+    lastReportedViewportRef.current = key;
+    onViewportChange(
+      userViewportStart === null || userViewportEnd === null
+        ? null
+        : { start: new Date(userViewportStart), end: new Date(userViewportEnd) },
+      viewportInteractionRef.current,
+    );
+  }, [onViewportChange, userViewportEnd, userViewportStart]);
+
+  useEffect(() => {
+    previousAuthoredViewportRef.current = viewport ?? null;
+    previousViewportResetKeyRef.current = viewportResetKey;
+    if (authoredViewportChanged && userViewport) {
+      viewportInteractionRef.current = "reset";
+      setUserViewport(null);
+    }
+  }, [authoredViewportChanged, userViewport, viewport, viewportResetKey]);
+
+  const navigate = useCallback((
+    kind: "pan" | "zoom",
+    compute: (base: CompositeViewportRange, frame: CompositeNavigationFrame) => CompositeViewportRange,
+    gesture?: { frame: CompositeNavigationFrame; from: CompositeViewportRange },
+  ) => {
+    const frame = gesture?.frame ?? navigationFrame;
+    if (!frame) return;
+    viewportInteractionRef.current = kind;
+    setUserViewport((current) => {
+      const base = gesture?.from ?? current ?? authoredViewport;
+      if (!base) return current;
+      const next = compute(base, frame);
+      // Once navigated, the window is the user's until they reset it, even if
+      // a gesture happens to land back on the authored range: the owner may
+      // echo a navigated range back as the authored one, and dropping to null
+      // there would reload the original range under the pointer.
+      return sameCompositeViewport(next, current ?? base) ? current : next;
+    });
+  }, [authoredViewport, navigationFrame]);
+  const panViewport = useCallback((
+    deltaPositions: number,
+    gesture?: { frame: CompositeNavigationFrame; from: CompositeViewportRange },
+  ) => {
+    navigate("pan", (base, frame) => panCompositeViewport(frame, base, deltaPositions), gesture);
+  }, [navigate]);
+  const panViewportByRatio = useCallback((shiftRatio: number) => {
+    if (!navigationFrame || !effectiveViewport) return;
+    const positions = compositeViewportPositions(navigationFrame, effectiveViewport);
+    if (!positions) return;
+    panViewport(shiftRatio * Math.max(positions.end - positions.start, Number.EPSILON));
+  }, [effectiveViewport, navigationFrame, panViewport]);
+  const zoomViewport = useCallback((zoomFactor: number, anchorRatio = 1) => {
+    navigate("zoom", (base, frame) => zoomCompositeViewport(frame, base, zoomFactor, anchorRatio));
+  }, [navigate]);
+  const setViewportRange = useCallback((range: CompositeViewportRange) => {
+    navigate("zoom", (_base, frame) => fitCompositeViewport(frame, range));
+  }, [navigate]);
+  const resetViewport = useCallback(() => {
+    viewportInteractionRef.current = "reset";
+    setUserViewport(null);
+  }, []);
+  return {
+    navigationFrame, activeUserViewport, effectiveViewport,
+    panViewport, panViewportByRatio, zoomViewport, setViewportRange, resetViewport,
+  };
+}

package/src/components/command-bar/list/model.ts

@@ -24,6 +24,11 @@ export interface ResultItem {
   lines?: CommandBarResultLine[];
   /** Short tag drawn left of the label: a shortcut, an asset class, a document type. */
   badge?: string;
+  /**
+   * An instrument's name, drawn muted after the symbol. Listings that share a
+   * symbol (SAP on NYSE and XETRA, Saputo as SAP on TSX) differ only here.
+   */
+  name?: string;
   right?: string;
   /** Provider type retained for symbol/alias identity checks. */
   instrumentType?: string;

package/src/components/command-bar/list/view.tsx

@@ -11,7 +11,7 @@ import {
   TextAttributes,
   type ScrollBoxRenderable,
 } from "../../../ui";
-import { truncateTextSegments, truncateToDisplayWidth } from "../../../utils/format";
+import { displayWidth, truncateTextSegments, truncateToDisplayWidth } from "../../../utils/format";
 import { Spinner } from "../../ui";
 import { useCommandBarPalette } from "../panel/palette";
 import { getRowPresentation } from "../view-model";
@@ -37,6 +37,9 @@ export type CommandBarListScrollEvent = {
 
 /** Columns every row gives up to the badge column, badge or not. */
 const BADGE_INDENT = BADGE_COLUMN_WIDTH + BADGE_GAP;
+const NAME_GAP = 2;
+/** Below this a name is a few letters and an ellipsis, which tells nobody apart. */
+const MIN_NAME_WIDTH = 6;
 
 interface CommandBarListItemRowProps {
   item: ResultItem;
@@ -79,7 +82,12 @@ const CommandBarListItemRow = memo(function CommandBarListItemRow({
   const labelColumnWidth = Math.max(1, labelWidth - BADGE_INDENT);
   // A long title stops one cell short of the right column, so its ellipsis
   // never runs into the date or shortcut sitting there.
-  const label = truncateToDisplayWidth(presentation.label, Math.max(1, labelColumnWidth - (trailingWidth > 0 ? 1 : 0)));
+  const labelSpace = Math.max(1, labelColumnWidth - (trailingWidth > 0 ? 1 : 0));
+  const label = truncateToDisplayWidth(presentation.label, labelSpace);
+  // The name gives way before the symbol: it shrinks to its ellipsis and drops
+  // out once fewer than a few characters of it would show.
+  const nameSpace = labelSpace - displayWidth(label) - NAME_GAP;
+  const name = item.name && nameSpace >= MIN_NAME_WIDTH ? truncateToDisplayWidth(item.name, nameSpace) : "";
   // "current" outranks the shortcut on the right; otherwise a badge lifted from
   // `right` must not be repeated there.
   const trailing = badgeConsumesRight(item) && !item.current
@@ -152,10 +160,15 @@ const CommandBarListItemRow = memo(function CommandBarListItemRow({
         <Box width={BADGE_INDENT} flexDirection="row">
           {badge && <CommandBarRowBadge text={badge.text} tone={badge.tone} width={BADGE_COLUMN_WIDTH} />}
         </Box>
-        <Box width={labelColumnWidth}>
+        <Box width={labelColumnWidth} flexDirection="row">
           <Text fg={isSelected ? palette.selectedText : presentation.primaryMuted ? palette.subtle : palette.text}>
             {label}
           </Text>
+          {name && (
+            <Text fg={isSelected ? palette.selectedText : palette.subtle}>
+              {" ".repeat(NAME_GAP) + name}
+            </Text>
+          )}
         </Box>
         <Box width={trailingWidth}>
           <Text

package/src/components/command-bar/pane-templates/workflow.ts

@@ -165,6 +165,7 @@ export function useCommandBarPaneTemplateActions({
           trimmedList,
           activeCollectionId,
           buildWorkflowDeps(),
+          template.shortcut?.keepArgToken,
         );
         const createOptions = {
           arg: trimmedList,

package/src/components/command-bar/routes/ticker-search/actions.ts

@@ -64,6 +64,9 @@ export function useCommandBarTickerSearchActions({
     // text goes quiet rather than repeating it.
     const badge = formatInstrumentBadge(candidate);
     const right = candidate.exchangeLabel || candidate.primaryExchangeLabel || candidate.right || undefined;
+    // The candidate's detail leads with the name; the rest repeats the badge or venue.
+    const leadingName = candidate.detail.split(" | ")[0]?.trim();
+    const name = leadingName && leadingName.toUpperCase() !== candidate.label.toUpperCase() ? leadingName : undefined;
 
     if (candidate.kind === "ticker" && candidate.ticker) {
       return {
@@ -74,6 +77,7 @@ export function useCommandBarTickerSearchActions({
         instrumentType: candidate.instrumentType,
         detail,
         badge,
+        name,
         right,
         category: candidate.category,
         kind: "ticker",
@@ -97,6 +101,7 @@ export function useCommandBarTickerSearchActions({
       instrumentType: candidate.instrumentType,
       detail,
       badge,
+      name,
       right,
       category: candidate.category,
       kind: "search",

package/src/components/command-bar/workflow/ops.ts

@@ -252,7 +252,7 @@ async function resolvePaneTemplateOptions(
     const rawInput = resolvedOptions?.arg ?? resolvedOptions?.values?.tickers ?? "";
     const symbols = !String(rawInput).trim() && template.shortcut?.openWithoutArg
       ? []
-      : await resolveTickerListInput(rawInput, baseContext.activeCollectionId, deps);
+      : await resolveTickerListInput(rawInput, baseContext.activeCollectionId, deps, template.shortcut?.keepArgToken);
     resolvedOptions = {
       ...resolvedOptions,
       arg: rawInput,

package/src/components/command-bar/workflow/tickers.ts

@@ -233,12 +233,18 @@ export async function resolveTickerListInput(
   rawInput: string,
   collectionId: string | null,
   deps: SharedWorkflowDeps,
+  keepToken?: (token: string) => boolean,
 ): Promise<string[]> {
   const tokens = parseTickerListInput(rawInput);
   const symbols: string[] = [];
   const seen = new Set<string>();
 
   for (const token of tokens) {
+    if (keepToken?.(token)) {
+      if (!seen.has(token)) symbols.push(token);
+      seen.add(token);
+      continue;
+    }
     const resolvedTicker = await resolveTickerInputOrThrow(token, null, collectionId, deps, { preserveListingKey: true });
     const symbol = resolvedTicker.symbol;
 

package/src/components/data-table/view.tsx

@@ -593,26 +593,45 @@ export function DataTableView<
     && (!isNavigable || isNavigable(item, index))
   ), [effectiveSelectedIndex, isNavigable]);
 
+  // The row handlers reach the latest cursor logic through a ref, so their
+  // identity survives a parent render. Most callers build `selection` inline,
+  // which used to give every handler a new identity on each render and made
+  // every visible row re-render its cells, even when nothing in it changed.
+  const rowHandlerStateRef = useRef({
+    activateIndex,
+    onRowContextMenu: tableProps.onRowContextMenu,
+    onRowMouseDown: tableProps.onRowMouseDown,
+    updateCursorIndex,
+  });
+  rowHandlerStateRef.current = {
+    activateIndex,
+    onRowContextMenu: tableProps.onRowContextMenu,
+    onRowMouseDown: tableProps.onRowMouseDown,
+    updateCursorIndex,
+  };
+
   const handleTableSelect = useCallback((_item: T, index: number) => {
-    updateCursorIndex(index, { commit: "immediate" });
-  }, [updateCursorIndex]);
+    rowHandlerStateRef.current.updateCursorIndex(index, { commit: "immediate" });
+  }, []);
 
   const handleTableActivate = useCallback((_item: T, index: number) => {
-    activateIndex(index);
-  }, [activateIndex]);
+    rowHandlerStateRef.current.activateIndex(index);
+  }, []);
 
   const handleRowMouseDown = useCallback((item: T, index: number, event: any) => {
-    const handled = tableProps.onRowMouseDown?.(item, index, event);
+    const latest = rowHandlerStateRef.current;
+    const handled = latest.onRowMouseDown?.(item, index, event);
     if (handled === true) {
-      updateCursorIndex(index, { commit: "immediate" });
+      latest.updateCursorIndex(index, { commit: "immediate" });
     }
     return handled;
-  }, [tableProps.onRowMouseDown, updateCursorIndex]);
+  }, []);
 
   const handleRowContextMenu = useCallback((item: T, index: number, event: any) => {
-    updateCursorIndex(index, { commit: "immediate" });
-    tableProps.onRowContextMenu?.(item, index, event);
-  }, [tableProps.onRowContextMenu, updateCursorIndex]);
+    const latest = rowHandlerStateRef.current;
+    latest.updateCursorIndex(index, { commit: "immediate" });
+    latest.onRowContextMenu?.(item, index, event);
+  }, []);
 
   // Wide tables scroll their columns on Shift+Left/Right, the way a chart pans,
   // and on Ctrl+Left/Right where the OS leaves those alone (macOS takes them to

package/src/components/feedback-dialog.tsx

@@ -37,6 +37,7 @@ import { useToastHost } from "../ui/toast";
 import { VERSION } from "../version";
 import { Button } from "./ui/button";
 import { Checkbox } from "./ui/checkbox";
+import { FRAMED_TEXTAREA_DESKTOP_STYLE } from "./ui/fields";
 import { DialogFrame } from "./ui/frame";
 import { TERMINAL_MESSAGE_KEYS } from "./textarea-keys";
 
@@ -217,7 +218,7 @@ function FeedbackDialog({
             flexGrow={1}
             wrapText
             {...(nativePaneChrome
-              ? { style: { padding: "6px 8px", lineHeight: "18px" }, onKeyDown: sendOnModifiedEnter }
+              ? { style: FRAMED_TEXTAREA_DESKTOP_STYLE, onKeyDown: sendOnModifiedEnter }
               : { keyBindings: TERMINAL_MESSAGE_KEYS, onSubmit: () => { void send(); } })}
             onInput={(value: string) => {
               messageValueRef.current = value;

package/src/components/form-modal/field-row.tsx

@@ -19,7 +19,7 @@ import {
 import type { CommandBarFieldValue, CommandBarWorkflowField } from "../command-bar/workflow/types";
 import { TERMINAL_MESSAGE_KEYS } from "../textarea-keys";
 import { Checkbox } from "../ui/checkbox";
-import { FieldLabel, NumberField, TextField } from "../ui/fields";
+import { FieldLabel, FRAMED_TEXTAREA_DESKTOP_STYLE, NumberField, TextField } from "../ui/fields";
 import { SelectField, type SelectFieldHandle } from "../ui/select-field";
 import { FORM_TEXTAREA_ROWS } from "./model";
 
@@ -132,7 +132,7 @@ function FormTextarea({
         flexGrow={1}
         wrapText
         {...(desktop
-          ? { style: { padding: "6px 8px", lineHeight: "18px" }, onKeyDown: submitOnModifiedEnter }
+          ? { style: FRAMED_TEXTAREA_DESKTOP_STYLE, onKeyDown: submitOnModifiedEnter }
           : { keyBindings: TERMINAL_MESSAGE_KEYS, onSubmit: onSubmitField })}
         onInput={(nextValue: string) => onChange(nextValue)}
       />

package/src/components/layout/detached-pane-shell.tsx

@@ -32,6 +32,7 @@ import { contextMenuDivider, type ContextMenuItem } from "../../types/context-me
 import { useKeybindings } from "../../app/keybindings";
 import { useDialogState } from "../../ui/dialog";
 import { getShortcutDisplayMode } from "../../utils/shortcut-labels";
+import { fireAndForget } from "../../utils/fire-and-forget";
 import {
   inputCaptureAllowsPaneManagementShortcut,
   modalSurfaceOwnsKey,
@@ -142,7 +143,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
       if (takeDoubleEscapeClose(doubleEscapeState, desktopWindowBridge.paneId, Date.now())) {
         event.preventDefault();
         event.stopPropagation();
-        if (!locked) void desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId);
+        if (!locked) fireAndForget(desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId), "desktop.closeDetachedPane");
       }
       return;
     }
@@ -170,7 +171,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
       pluginRegistry.notify({ body: "Pane is locked. Unlock it in pane settings.", type: "info" });
       return;
     }
-    void desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId);
+    fireAndForget(desktopWindowBridge.closeDetachedPane?.(desktopWindowBridge.paneId), "desktop.closeDetachedPane");
   }, [desktopWindowBridge, locked, pluginRegistry]);
 
   const startWindowDrag = useCallback(() => {
@@ -212,7 +213,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
   }, [desktopWindowBridge.paneId, focusPane, pluginRegistry]);
 
   const dockPane = desktopWindowBridge.dockDetachedPane
-    ? () => { void desktopWindowBridge.dockDetachedPane?.(desktopWindowBridge.paneId); }
+    ? () => { fireAndForget(desktopWindowBridge.dockDetachedPane?.(desktopWindowBridge.paneId), "desktop.dockDetachedPane"); }
     : null;
 
   /** The same menu as a pane in the main window, minus what a window cannot do. */
@@ -428,9 +429,11 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                   component={paneDef.component}
                   paneId={instance.instanceId}
                   paneType={instance.paneId}
+                  title={title}
                   focused={focused}
                   width={bodyWidth}
                   height={bodyHeight}
+                  closePane={closePane}
                 />
               </PaneHeaderTabsProvider>
             </PaneBodyFrame>

package/src/components/layout/pane/content.tsx

@@ -7,6 +7,7 @@ import { useThemeColors } from "../../../theme/theme-context";
 import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import type { PaneDef } from "../../../types/plugin";
 import { Box } from "../../../ui";
+import { PaneErrorBoundary } from "./error-boundary";
 
 // Under GLOOMBERB_PERF_TRACE every pane commit is reported by pane, which is
 // how a store update that fans out to the whole layout gets attributed. The
@@ -29,29 +30,39 @@ interface PaneContentProps {
   component: PaneDef["component"];
   paneId: string;
   paneType: string;
+  /** The header's title, named by the failure card when the pane throws. */
+  title: string;
   focused: boolean;
   width: number;
   height: number;
   /** False while the pane is covered on screen; its streams drop to the off-screen cadence. */
   inView?: boolean;
+  /** Passed to the pane as `close` (floating panes). */
   onClose?: (paneId: string) => void;
+  /** Takes the pane out of its layout; the failure card offers it. Keep it stable: the content is memoized. */
+  closePane?: (paneId: string) => void;
 }
 
 export const PaneContent = memo(function PaneContent({
   component: Component,
   paneId,
   paneType,
+  title,
   focused,
   width,
   height,
   inView = true,
   onClose,
+  closePane,
 }: PaneContentProps) {
   useAppLanguage();
   useThemeColors();
   const close = useCallback(() => {
     onClose?.(paneId);
   }, [onClose, paneId]);
+  const closeFailedPane = useCallback(() => {
+    closePane?.(paneId);
+  }, [closePane, paneId]);
 
   return (
     <PaneInstanceProvider paneId={paneId}>
@@ -67,16 +78,18 @@ export const PaneContent = memo(function PaneContent({
           overflow="hidden"
           data-gloom-role="pane-content"
         >
-          <PaneRenderTrace paneId={paneId} paneType={paneType}>
-            <Component
-              paneId={paneId}
-              paneType={paneType}
-              focused={focused}
-              width={width}
-              height={height}
-              close={onClose ? close : undefined}
-            />
-          </PaneRenderTrace>
+          <PaneErrorBoundary paneType={paneType} title={title} onClose={closePane ? closeFailedPane : undefined}>
+            <PaneRenderTrace paneId={paneId} paneType={paneType}>
+              <Component
+                paneId={paneId}
+                paneType={paneType}
+                focused={focused}
+                width={width}
+                height={height}
+                close={onClose ? close : undefined}
+              />
+            </PaneRenderTrace>
+          </PaneErrorBoundary>
         </Box>
       </PaneInViewProvider>
     </PaneInstanceProvider>

package/src/components/layout/pane/error-boundary.tsx

@@ -0,0 +1,103 @@
+import { Component, type ErrorInfo, type ReactNode } from "react";
+import { tf } from "../../../i18n";
+import { getSharedRegistry } from "../../../plugins/registry/shared";
+import { reportCrash } from "../../../telemetry/crash-reports";
+import { debugLog } from "../../../utils/debug-log";
+import { Button } from "../../ui/button";
+import { PaneStatusBody } from "../../ui/status";
+
+const MAX_MESSAGE_LENGTH = 200;
+
+/** The first line of what was thrown, clipped: the card has one line for it. */
+function failureMessage(error: unknown): string {
+  const raw = error instanceof Error
+    ? error.message || error.name
+    : typeof error === "string" ? error : String(error);
+  const line = raw.split("\n").find((part) => part.trim())?.trim() || "Unknown error";
+  return line.length > MAX_MESSAGE_LENGTH ? `${line.slice(0, MAX_MESSAGE_LENGTH - 3)}...` : line;
+}
+
+function failureKey(error: unknown): string {
+  return error instanceof Error ? `${error.name}\n${error.message}` : String(error);
+}
+
+interface PaneErrorBoundaryProps {
+  paneType: string;
+  title: string;
+  /** Takes the pane out of the layout; without it the card offers Reload only. */
+  onClose?: () => void;
+  children: ReactNode;
+}
+
+interface PaneErrorBoundaryState {
+  error: { value: unknown } | null;
+}
+
+/**
+ * Keeps a pane that throws while rendering inside its own frame: the pane body
+ * becomes a failure card with Reload and Close, and every other pane, the
+ * command bar and the layout keep working. The pane's header stays outside, so
+ * it can still be moved or closed from its menu.
+ *
+ * Only render errors reach it. Event handlers, effects and async work fail the
+ * way they always have.
+ */
+export class PaneErrorBoundary extends Component<PaneErrorBoundaryProps, PaneErrorBoundaryState> {
+  override state: PaneErrorBoundaryState = { error: null };
+  private reportedKey: string | null = null;
+
+  static getDerivedStateFromError(error: unknown): PaneErrorBoundaryState {
+    return { error: { value: error } };
+  }
+
+  override componentDidCatch(error: unknown, errorInfo: ErrorInfo): void {
+    // A pane that fails again after Reload, or re-renders its card, is still
+    // the same failure: reported once.
+    const key = failureKey(error);
+    if (key === this.reportedKey) return;
+    this.reportedKey = key;
+    const { paneType } = this.props;
+    const plugin = getSharedRegistry()?.getPanePluginId(paneType);
+    reportCrash(error, { kind: "render", pane: paneType, plugin, componentStack: errorInfo.componentStack });
+    // Logged under the owning plugin, so the Plugins pane counts it as one of its errors.
+    debugLog.createLogger(plugin ?? "pane").error(`Pane ${paneType} stopped rendering: ${failureMessage(error)}`, {
+      componentStack: errorInfo.componentStack,
+    });
+  }
+
+  private readonly reload = () => {
+    this.setState({ error: null });
+  };
+
+  override render(): ReactNode {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    return (
+      <FallbackGuard>
+        <PaneStatusBody
+          error={failureMessage(error.value)}
+          errorTitle={tf("{title} stopped working.", { title: this.props.title })}
+          actions={(
+            <>
+              <Button label="Reload pane" variant="primary" compact onPress={this.reload} />
+              {this.props.onClose && <Button label="Close pane" variant="secondary" compact onPress={this.props.onClose} />}
+            </>
+          )}
+        />
+      </FallbackGuard>
+    );
+  }
+}
+
+/** A card that cannot render leaves the body empty rather than taking the app down with it. */
+class FallbackGuard extends Component<{ children: ReactNode }, { failed: boolean }> {
+  override state = { failed: false };
+
+  static getDerivedStateFromError(): { failed: boolean } {
+    return { failed: true };
+  }
+
+  override render(): ReactNode {
+    return this.state.failed ? null : this.props.children;
+  }
+}