gloomberb 0.16.0 → 0.16.2

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/index.ts

@@ -131,7 +131,7 @@ export {
   IconButton, InlineQuickAddRow, KeyValueRow, ListView, loadingText, Menu, MenuPopover,
   MessageComposer, MultiSelectDialogButton, MultiSelectDialogContent, Notice, NumberField,
   NumberPromptDialog, openUrl, PageStackView, PaneLinkMenu, PaneStatusBody, Popover, Prose,
-  QueryBar, READING_WIDTH, RemoteImage, Section, SectionHeading, SegmentedControl, SelectButton, ShortcutHint,
+  QueryBar, RangeTrack, RatioBar, READING_WIDTH, RemoteImage, Section, SectionHeading, SegmentedControl, SelectButton, ShortcutHint,
   Spinner, StatGrid, statGridColumns, statGridRows, Tabs, TextField, TextPromptDialog, unavailableText,
   useFieldRing, usePaneLinkMenuEntry, useQueryBarSearch,
 } from "./ui";
@@ -145,7 +145,7 @@ export type {
   MenuProps, MultiSelectDialogButtonHandle, MultiSelectPopoverAnchorPoint, MultiSelectRowAction,
   NoticeProps, NumberFieldProps, PaneStatusBodyProps, PopoverProps, ProseProps, QueryBarFilter,
   QueryBarMultiFilter, QueryBarProps, QueryBarSearch, QueryBarSearchFocus, QueryBarSelectFilter, QueryBarTextFilter,
-  QueryBarToggleFilter, QueryBarView, SectionHeadingProps, SectionProps, SegmentedControlProps,
+  QueryBarToggleFilter, QueryBarView, RangeTrackProps, RatioBarProps, SectionHeadingProps, SectionProps, SegmentedControlProps,
   SelectButtonOption, SelectButtonProps, SelectControl, StatGridProps, StatItem, TabsProps,
   TextFieldProps, TextPromptDialogProps,
 } from "./ui";

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/floating-pane.tsx

@@ -31,6 +31,8 @@ interface FloatingPaneWrapperProps {
   onHeaderContextMenu?: (event: any) => void;
   onActionMouseDown?: (event: any) => void;
   onCloseMouseDown?: (event: any) => void;
+  onRestoreMouseDown?: (event: any) => void;
+  fullscreen?: boolean;
   onResizeMouseDown?: (event: any) => void;
   onResizeMouseDrag?: (event: any) => void;
   onResizeMouseDragEnd?: (event: any) => void;
@@ -80,6 +82,8 @@ export function FloatingPaneWrapper({
   onHeaderContextMenu,
   onActionMouseDown,
   onCloseMouseDown,
+  onRestoreMouseDown,
+  fullscreen = false,
   onResizeMouseDown,
   onResizeMouseDrag,
   onResizeMouseDragEnd,
@@ -137,6 +141,8 @@ export function FloatingPaneWrapper({
         onHeaderContextMenu={onHeaderContextMenu}
         onActionMouseDown={onActionMouseDown}
         onCloseMouseDown={onCloseMouseDown}
+        onRestoreMouseDown={onRestoreMouseDown}
+        fullscreen={fullscreen}
       />
 
       <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={bg}>

package/src/components/layout/header.tsx

@@ -239,14 +239,15 @@ function HeaderCommandPrompt({
   );
 }
 
-function UpdateStatus() {
+function UpdateStatus({ onRestart }: { onRestart?: () => void }) {
   const colors = useThemeColors();
   const dispatch = useAppDispatch();
   const updateAvailable = useAppSelector((state) => state.updateAvailable);
   const updateProgress = useAppSelector((state) => state.updateProgress);
   const updateCheckInProgress = useAppSelector((state) => state.updateCheckInProgress);
   const updateNotice = useAppSelector((state) => state.updateNotice);
-  const retryKey = useActionShortcut("install-update");
+  // One key: Restart for a downloaded update, retry for a failed one.
+  const updateKey = useActionShortcut("install-update");
 
   useEffect(() => {
     if (!updateNotice || updateAvailable || updateProgress || updateCheckInProgress) return;
@@ -278,15 +279,28 @@ function UpdateStatus() {
         </Box>
       );
     }
+    if (updateProgress.phase === "ready") {
+      // A desktop update waits for the user: the app never relaunches by itself.
+      // The terminal binary is already swapped in and only needs a new launch.
+      if (updateProgress.canRestart && onRestart) {
+        return (
+          <Box flexDirection="row" gap={1} alignItems="center">
+            <Text fg={colors.headerText}>{t("Update ready")}</Text>
+            <Button compact label="Restart" shortcut={updateKey || undefined} onPress={onRestart} stopPropagation />
+          </Box>
+        );
+      }
+      return <Text fg={colors.headerText}>{t("Update ready, restart to apply")}</Text>;
+    }
     if (updateProgress.phase === "done") {
-      return <Text fg={colors.headerText}>{t(updateProgress.message ?? "Update installed, restart to apply")}</Text>;
+      return <Text fg={colors.headerText}>{t(updateProgress.message ?? "Update ready, restart to apply")}</Text>;
     }
     if (updateProgress.phase === "error") {
-      const retry = retryKey && canRetryUpdate({ updateAvailable, updateProgress, updateCheckInProgress });
+      const retry = updateKey && canRetryUpdate({ updateAvailable, updateProgress, updateCheckInProgress });
       return (
         <Box flexDirection="row">
           <Text fg={colors.headerText}>{tf("Update failed: {error}", { error: updateProgress.error ?? "Unknown error" })}</Text>
-          {retry ? <Text fg={blendHex(colors.headerText, colors.header, 0.62)}>{`  ${retryKey} ${t("retry")}`}</Text> : null}
+          {retry ? <Text fg={blendHex(colors.headerText, colors.header, 0.62)}>{`  ${updateKey} ${t("retry")}`}</Text> : null}
         </Box>
       );
     }
@@ -378,8 +392,11 @@ function HeaderMarketSummary({ nativePaneChrome, width }: { nativePaneChrome: bo
 
 export function Header({
   onOpenHelp,
+  onRestartForUpdate,
 }: {
   onOpenHelp?: () => void;
+  /** Applies a downloaded desktop update and relaunches; the header offers Restart only when it is given. */
+  onRestartForUpdate?: () => void;
 }) {
   const colors = useThemeColors();
   const rendererHost = useRendererHost();
@@ -444,7 +461,7 @@ export function Header({
         <Box width={prompt.left} />
         {commandPrompt}
         <Box flexGrow={1} paddingLeft={2} paddingRight={2} minWidth={0}>
-          <UpdateStatus />
+          <UpdateStatus onRestart={onRestartForUpdate} />
         </Box>
         {onOpenHelp ? (
           <Box flexShrink={0} data-gloom-role="header-help-action" style={{ marginRight: 8 }}>
@@ -470,7 +487,7 @@ export function Header({
       <Box width={prompt.left} />
       {commandPrompt}
       <Box flexGrow={1} minWidth={0} paddingLeft={2}>
-        <UpdateStatus />
+        <UpdateStatus onRestart={onRestartForUpdate} />
       </Box>
       {marketSummary}
       {showWindowControls ? <WindowControls /> : null}

package/src/components/layout/missing-pane.tsx

@@ -3,7 +3,7 @@ import { Button } from "../ui/button";
 import { confirmDialog } from "../ui/confirm-dialog";
 import { EmptyState } from "../ui/status";
 import { runsExternalPlugins } from "../../plugins/current-target";
-import { activateInstalledPlugin } from "../../plugins/builtin/plugin-marketplace/activation";
+import { activateInstall } from "../../plugins/builtin/plugin-marketplace/activation";
 import { installConsent } from "../../plugins/builtin/plugin-marketplace/model";
 import { getMarketplaceHost, getPluginManager } from "../../plugins/builtin/plugin-marketplace/store";
 import type { PaneDef, PaneProps } from "../../types/plugin";
@@ -115,7 +115,7 @@ function MissingPanePlaceholder({ paneType, width }: PaneProps) {
       // Bring it into this session so the pane replaces the placeholder rather
       // than waiting for a restart; a plugin that cannot load live says so.
       const host = getMarketplaceHost();
-      const activated = host ? await activateInstalledPlugin(result.directory, host, installer) : null;
+      const activated = host ? await activateInstall(result, host, installer) : null;
       if (activated && !activated.ok) setNotice({ text: `Installed but did not load: ${activated.error}`, error: true });
       else if (!activated || activated.restart) setNotice({ text: "Installed. Restart to finish.", error: false });
     } finally {

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;
+  }
+}

package/src/components/layout/pane/footer/registration.tsx

@@ -66,17 +66,17 @@ export function PaneFooterProvider({
   const value = useMemo(() => ({ register, unregister }), [register, unregister]);
   const footer = useMemo(() => combinePaneFooterRegistrations(registrations), [registrations]);
 
-  const [arrowClaims, setArrowClaims] = useState<ReadonlySet<string>>(() => new Set());
-  const setArrowClaim = useCallback((id: string, claimed: boolean) => {
-    setArrowClaims((current) => {
-      if (current.has(id) === claimed) return current;
-      const next = new Set(current);
-      if (claimed) next.add(id);
-      else next.delete(id);
-      return next;
-    });
-  }, []);
-  const arrowValue = useMemo(() => ({ claimed: arrowClaims.size > 0, setArrowClaim }), [arrowClaims, setArrowClaim]);
+  const [arrowClaims, setArrowClaim] = useMemberSet();
+  const [strips, setStrip] = useMemberSet();
+  const [holds, setArrowHold] = useMemberSet();
+  const arrowValue = useMemo<PaneArrowState>(() => ({
+    claimed: arrowClaims.size > 0,
+    strip: strips.size > 0,
+    held: holds.size > 0,
+    setArrowClaim,
+    setStrip,
+    setArrowHold,
+  }), [arrowClaims, holds, setArrowClaim, setArrowHold, setStrip, strips]);
 
   return (
     <PaneFooterContext.Provider value={value}>
@@ -87,22 +87,57 @@ export function PaneFooterProvider({
   );
 }
 
-const PaneArrowContext = createContext<{ claimed: boolean; setArrowClaim(id: string, claimed: boolean): void } | null>(null);
+function useMemberSet(): [ReadonlySet<string>, (id: string, member: boolean) => void] {
+  const [members, setMembers] = useState<ReadonlySet<string>>(() => new Set());
+  const setMember = useCallback((id: string, member: boolean) => {
+    setMembers((current) => {
+      if (current.has(id) === member) return current;
+      const next = new Set(current);
+      if (member) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }, []);
+  return [members, setMember];
+}
+
+interface PaneArrowState {
+  /** A focused tab strip owns Left, Right, h and l. */
+  claimed: boolean;
+  /** The pane has a tab strip that walks its tabs by keyboard. */
+  strip: boolean;
+  /** Content the user moved into (a chart) holds the strip's keys until Esc. */
+  held: boolean;
+  setArrowClaim(id: string, claimed: boolean): void;
+  setStrip(id: string, present: boolean): void;
+  setArrowHold(id: string, held: boolean): void;
+}
+
+const PaneArrowContext = createContext<PaneArrowState | null>(null);
+
+function usePaneArrowMember(set: ((id: string, member: boolean) => void) | undefined, member: boolean) {
+  const id = useId();
+  useEffect(() => {
+    if (!set) return;
+    set(id, member);
+    return () => set(id, false);
+  }, [id, member, set]);
+}
 
 /**
- * A focused tab strip owns Left and Right in its pane. It claims them here, so
- * a read-only chart in the same pane leaves them to the strip and the arrows
- * keep walking the tabs.
+ * A tab strip's keys. A focused strip owns Left, Right, h and l in its pane and
+ * claims them, so a chart in the same pane leaves them to it and the arrows
+ * keep walking the tabs. While content the user moved into holds them (a chart
+ * after Down, Enter or a click), the strip lets go until that content hands
+ * them back with Esc. Returns whether the strip has its keys now.
  */
-export function usePaneArrowClaim(claimed: boolean) {
+export function usePaneTabStripKeys(navigates: boolean, focused: boolean): { active: boolean; held: boolean } {
   const context = useContext(PaneArrowContext);
-  const id = useId();
-  const setArrowClaim = context?.setArrowClaim;
-  useEffect(() => {
-    if (!setArrowClaim) return;
-    setArrowClaim(id, claimed);
-    return () => setArrowClaim(id, false);
-  }, [claimed, id, setArrowClaim]);
+  const held = context?.held ?? false;
+  const active = navigates && focused && !held;
+  usePaneArrowMember(context?.setStrip, navigates);
+  usePaneArrowMember(context?.setArrowClaim, active);
+  return { active, held: navigates && held };
 }
 
 /** Whether a tab strip in this pane owns Left and Right. */
@@ -110,6 +145,16 @@ export function usePaneArrowsClaimed(): boolean {
   return useContext(PaneArrowContext)?.claimed ?? false;
 }
 
+/** Whether this pane has a tab strip that content can hand the keys back to. */
+export function usePaneHasTabStrip(): boolean {
+  return useContext(PaneArrowContext)?.strip ?? false;
+}
+
+/** While `held`, the pane's tab strips leave Left, Right, h and l to the caller. */
+export function usePaneArrowHold(held: boolean) {
+  usePaneArrowMember(useContext(PaneArrowContext)?.setArrowHold, held);
+}
+
 export function PaneFooterScope({
   active,
   children,