gloomberb 0.9.2 → 0.9.4

package/src/components/chart/stock-chart/viewport/runtime.ts

@@ -67,10 +67,10 @@ interface UseStockChartViewportRuntimeOptions {
   persistChartControls: (range: TimeRange, resolution: ChartResolution) => void;
   renderedResolution: ChartResolution;
   selectionSupportMap: ReadonlyMap<ManualChartResolution, TimeRange>;
+  persistChartRenderMode: (mode: ChartRenderMode) => void;
   setPendingAutoWindowOverride: Dispatch<SetStateAction<DateWindowRange | null>>;
   setRenderedAutoView: Dispatch<SetStateAction<AutoRenderedView | null>>;
   setRequestedResolution: Dispatch<SetStateAction<ChartResolution>>;
-  setStoredRenderMode: Dispatch<SetStateAction<ChartRenderMode>>;
   setViewState: Dispatch<SetStateAction<StockChartViewportState>>;
   storedRangePreset: TimeRange;
   storedRenderMode: ChartRenderMode;
@@ -101,12 +101,12 @@ export function useStockChartViewportRuntime({
   pendingCanonicalResetRef,
   pendingExpansionRef,
   persistChartControls,
+  persistChartRenderMode,
   renderedResolution,
   selectionSupportMap,
   setPendingAutoWindowOverride,
   setRenderedAutoView,
   setRequestedResolution,
-  setStoredRenderMode,
   setViewState,
   storedRangePreset,
   storedRenderMode,
@@ -172,10 +172,10 @@ export function useStockChartViewportRuntime({
   });
 
   const persistRenderMode = useCallback((nextMode: ChartRenderMode) => {
-    if (!compact && nextMode !== storedRenderMode) {
-      setStoredRenderMode(nextMode);
+    if (!compact) {
+      persistChartRenderMode(nextMode);
     }
-  }, [compact, setStoredRenderMode, storedRenderMode]);
+  }, [compact, persistChartRenderMode]);
 
   const expandBufferRange = useCallback((action: PendingExpansionAction): boolean => {
     if (compact) return false;

package/src/components/command-bar/layout-items/current-layout.ts

@@ -87,7 +87,11 @@ export function buildCurrentLayoutItems({
       kind: "action",
       action: () => {
         const { width, height } = pluginRegistry.getTermSizeFn();
-        persistLayoutChange(gridlockAllPanes(currentLayout, { x: 0, y: 0, width, height }));
+        persistLayoutChange(gridlockAllPanes(
+          currentLayout,
+          { x: 0, y: 0, width, height },
+          pluginRegistry.panes,
+        ));
         notifyGridlockRevert();
         closeAll({ revertThemePreview: false });
       },

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

@@ -16,7 +16,17 @@ import {
   getPaneTemplateDisplayLabel,
 } from "./items";
 
+function paneTemplateHasConfigFields(template: PaneTemplateDef): boolean {
+  if (template.wizard?.some((step) => step.type !== "info")) {
+    return true;
+  }
+  return !!buildGeneratedTemplateField(template, null).field;
+}
+
 export function shouldOpenPaneTemplateConfig(template: PaneTemplateDef, arg?: string): boolean {
+  if (!paneTemplateHasConfigFields(template)) {
+    return false;
+  }
   if (template.wizard && template.wizard.length > 0) {
     if (!arg?.trim()) {
       return true;

package/src/components/command-bar/surface/pane.test.tsx

@@ -117,6 +117,42 @@ function registerOptionalTextPane(pluginRegistry: MutablePaneRegistry): void {
   });
 }
 
+function registerQueryOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("prediction-markets", {
+    id: "prediction-markets",
+    name: "Prediction Markets",
+    component: () => null,
+    defaultPosition: "left",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("new-prediction-markets-pane", {
+    id: "new-prediction-markets-pane",
+    paneId: "prediction-markets",
+    label: "Prediction Markets",
+    description: "Open a new prediction markets browser pane",
+    keywords: ["prediction", "markets", "polymarket", "kalshi", "events"],
+    shortcut: { prefix: "PM", argPlaceholder: "query", argKind: "text" },
+  });
+}
+
+function registerShortcutOnlyPane(pluginRegistry: MutablePaneRegistry): void {
+  mutableRegistryMap(pluginRegistry.panes).set("top-news", {
+    id: "top-news",
+    name: "Top News",
+    component: () => null,
+    defaultPosition: "right",
+    defaultMode: "floating",
+  });
+  mutableRegistryMap(pluginRegistry.paneTemplates).set("top-news-pane", {
+    id: "top-news-pane",
+    paneId: "top-news",
+    label: "Top News",
+    description: "Curated top market stories ranked by importance",
+    keywords: ["top", "news", "headlines", "stories"],
+    shortcut: { prefix: "TOP" },
+  });
+}
+
 describe("CommandBar pane and layout routes", () => {
   const layoutModeConfig = (config: AppConfig): AppConfig => {
     const research = cloneLayout(config.layout);
@@ -271,6 +307,46 @@ describe("CommandBar pane and layout routes", () => {
     expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
   });
 
+  for (const scenario of [
+    {
+      query: "prediction markets",
+      register: registerQueryOnlyPane,
+      templateId: "new-prediction-markets-pane",
+    },
+    {
+      query: "top news",
+      register: registerShortcutOnlyPane,
+      templateId: "top-news-pane",
+    },
+  ] as const) {
+    test(`creates ${scenario.templateId} directly when it has no config fields`, async () => {
+      const created: CreatedPaneCall[] = [];
+
+      testSetup = await testRender(<CommandBarHarness
+        query={scenario.query}
+        live
+        configurePluginRegistry={(pluginRegistry) => {
+          scenario.register(pluginRegistry);
+          recordPaneCreations(pluginRegistry, created);
+        }}
+      />, {
+        width: 100,
+        height: 18,
+      });
+
+      await testSetup.renderOnce();
+
+      await act(async () => {
+        testSetup!.mockInput.pressEnter();
+        await Bun.sleep(0);
+        await testSetup!.renderOnce();
+      });
+
+      expect(created).toEqual([{ templateId: scenario.templateId, options: undefined }]);
+      expect(testSetup.captureCharFrame()).not.toContain("Create Pane");
+    });
+  }
+
   test("shows pane templates that share the same shortcut", async () => {
     testSetup = await testRender(<CommandBarHarness
       query="DUP"

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

@@ -26,6 +26,11 @@ export type DataTableKeyEvent = TableViewKeyEvent;
 
 const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
 
+export interface DataTableRootKeyContext {
+  selectedIndex: number;
+  itemCount: number;
+}
+
 export type DataTableSelectionChangeReason =
   | "keyboard"
   | "pointer"
@@ -95,7 +100,10 @@ export interface DataTableViewProps<
   hoveredIdx?: number | null;
   setHoveredIdx?: (index: number | null) => void;
   keyboardNavigation?: boolean;
-  onRootKeyDown?: (event: DataTableKeyEvent) => boolean | void;
+  onRootKeyDown?: (
+    event: DataTableKeyEvent,
+    context: DataTableRootKeyContext,
+  ) => boolean | void;
   resetScrollKey?: unknown;
 }
 
@@ -486,7 +494,10 @@ export function DataTableView<
     if (event.defaultPrevented || event.propagationStopped) return;
     if (!focused || !keyboardNavigation) return;
 
-    if (onRootKeyDown?.(event)) return;
+    if (onRootKeyDown?.(event, {
+      selectedIndex: effectiveSelectedIndexRef.current,
+      itemCount: tableProps.items.length,
+    })) return;
     if (tableProps.items.length === 0) return;
 
     if (isNextTableRowKey(event)) {

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

@@ -6,6 +6,7 @@ import { formatTimeAgo } from "../../utils/format";
 import { isPlainKey } from "../../utils/keyboard";
 import { toTimestampMillis } from "../../utils/timestamp";
 import { DataTableStackView } from "../data-table/stack-view";
+import type { DataTableRootKeyContext } from "../data-table/view";
 import {
   activeStackIndex,
   sortIndexedStackRows,
@@ -45,9 +46,16 @@ interface FeedDataTableStackViewProps {
   rootAfter?: ReactNode;
   onRootKeyDown?: (event: {
     name?: string;
+    sequence?: string;
+    ctrl?: boolean;
+    meta?: boolean;
+    super?: boolean;
+    alt?: boolean;
+    option?: boolean;
+    shift?: boolean;
     preventDefault?: () => void;
     stopPropagation?: () => void;
-  }) => boolean | void;
+  }, context: DataTableRootKeyContext) => boolean | void;
   sourceLabel?: string;
   titleLabel?: string;
   emptyStateTitle?: string;

package/src/components/index.ts

@@ -8,7 +8,7 @@ export type { TickerListVisibleRange } from "./ticker/list-table-view";
 export { TickerBadgeList } from "./ticker/badge/list";
 export { InputSearchBar } from "./input-search-bar";
 export { DataTableView } from "./data-table/view";
-export type { DataTableKeyEvent } from "./data-table/view";
+export type { DataTableKeyEvent, DataTableRootKeyContext } from "./data-table/view";
 export { DataTableStackView } from "./data-table/stack-view";
 export { FeedDataTableStackView } from "./feed-data-table/stack-view";
 export type { FeedDataTableItem } from "./feed-data-table/stack-view";

package/src/components/input-search-bar.test.tsx

@@ -0,0 +1,103 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useCallback, useRef, useState, type Dispatch, type SetStateAction } from "react";
+import { testRender } from "../renderers/opentui/test-utils";
+import { AppContext, createInitialState, type AppAction } from "../state/app/context";
+import { createDefaultConfig } from "../types/config";
+import type { InputRenderable } from "../ui";
+import { InputSearchBar } from "./input-search-bar";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let setSearchActive: Dispatch<SetStateAction<boolean>> | null = null;
+
+afterEach(async () => {
+  setSearchActive = null;
+  if (!testSetup) return;
+  await act(async () => {
+    testSetup!.renderer.destroy();
+  });
+  testSetup = undefined;
+});
+
+function Harness({
+  actions,
+  onNavigateDown,
+}: {
+  actions: AppAction[];
+  onNavigateDown?: () => void;
+}) {
+  const state = createInitialState(createDefaultConfig("/tmp/gloomberb-input-search-bar"));
+  const inputRef = useRef<InputRenderable | null>(null);
+  const [active, setActive] = useState(true);
+  setSearchActive = setActive;
+  const dispatch = useCallback((action: AppAction) => {
+    actions.push(action);
+  }, [actions]);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <InputSearchBar
+        value=""
+        focused
+        active={active}
+        width={30}
+        focusToken={0}
+        inputRef={inputRef}
+        placeholder="search"
+        debounceMs={100}
+        onNavigateDown={onNavigateDown}
+        onFocus={() => {}}
+        onBlur={() => {}}
+        onQueryChange={() => {}}
+      />
+    </AppContext>
+  );
+}
+
+describe("InputSearchBar", () => {
+  test("captures app input while the search input is active", async () => {
+    const actions: AppAction[] = [];
+
+    testSetup = await testRender(<Harness actions={actions} />, { width: 40, height: 4 });
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([{ type: "SET_INPUT_CAPTURED", captured: true }]);
+    if (!setSearchActive) throw new Error("search setter was not registered");
+
+    await act(async () => {
+      setSearchActive(false);
+      await testSetup!.renderOnce();
+    });
+
+    expect(actions).toEqual([
+      { type: "SET_INPUT_CAPTURED", captured: true },
+      { type: "SET_INPUT_CAPTURED", captured: false },
+    ]);
+  });
+
+  test("moves from the active search input to the table with Down", async () => {
+    const actions: AppAction[] = [];
+    let navigatedDown = 0;
+
+    testSetup = await testRender(
+      <Harness
+        actions={actions}
+        onNavigateDown={() => {
+          navigatedDown += 1;
+        }}
+      />,
+      { width: 40, height: 4 },
+    );
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+
+    await act(async () => {
+      testSetup!.mockInput.pressArrow("down");
+      await testSetup!.renderOnce();
+    });
+
+    expect(navigatedDown).toBe(1);
+  });
+});

package/src/components/input-search-bar.tsx

@@ -1,6 +1,9 @@
 import { useCallback, useEffect, useState, type RefObject } from "react";
 import { Box, Input, Text, type InputRenderable } from "../ui";
 import { colors } from "../theme/colors";
+import { useAppInputCapture } from "../state/app/input-capture";
+import { useShortcut } from "../react/input";
+import { isPlainArrowDown, stopSearchFocusNavigation } from "../utils/search-focus-navigation";
 
 export function InputSearchBar({
   value,
@@ -12,6 +15,7 @@ export function InputSearchBar({
   placeholder,
   debounceMs,
   normalizeValue = identity,
+  onNavigateDown,
   onFocus,
   onBlur,
   onQueryChange,
@@ -25,11 +29,23 @@ export function InputSearchBar({
   placeholder: string;
   debounceMs: number;
   normalizeValue?: (value: string) => string;
+  onNavigateDown?: () => void;
   onFocus: () => void;
   onBlur: () => void;
   onQueryChange: (query: string) => void;
 }) {
   const [draft, setDraft] = useState(value);
+  useAppInputCapture(focused && active);
+
+  useShortcut((event) => {
+    if (!onNavigateDown || !isPlainArrowDown(event)) return;
+    stopSearchFocusNavigation(event);
+    onNavigateDown();
+  }, {
+    allowEditable: true,
+    enabled: focused && active && !!onNavigateDown,
+    phase: "before",
+  });
 
   useEffect(() => {
     setDraft(value);

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

@@ -10,7 +10,7 @@ import { useThemeColors } from "../../theme/theme-context";
 import { hasPaneFooterContent, PaneFooterBar, PaneFooterProvider } from "./pane/footer";
 import { PaneBodyFrame, getPaneWindowAttributes } from "./pane/frame";
 import { PaneContent } from "./pane/content";
-import { resolvePaneBodyFrame } from "./pane/sizing";
+import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./pane/sizing";
 import { getPaneDisplayTitle } from "./pane/title";
 import { TITLEBAR_OVERLAY_HEIGHT_PX, getTitlebarLeadingInset } from "./titlebar-overlay";
 import { WindowControls, WINDOWS_CONTROL_GROUP_WIDTH_PX } from "./window-controls";
@@ -130,6 +130,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
     <PaneFooterProvider>
       {(footer) => {
         const showFooter = hasPaneFooterContent(footer);
+        const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
+        const renderFooter = reserveFooter || showFooter;
         const headerHeightRows = titleBarOverlay ? TITLEBAR_OVERLAY_HEIGHT_PX / cellHeightPx : 1;
         const background = floatingPaneBg(focused);
         const titleBackground = floatingPaneTitleBg(focused);
@@ -137,7 +139,8 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
           width,
           height,
           nativePaneChrome,
-          reserveFooter: showFooter,
+          footerVisible: renderFooter,
+          reserveFooter,
           headerRows: headerHeightRows,
         });
         const bodyWidth = bodyFrame.width ?? 1;
@@ -208,7 +211,7 @@ export function DetachedPaneShell({ pluginRegistry, desktopWindowBridge }: Detac
                 height={bodyHeight}
               />
             </PaneBodyFrame>
-            {showFooter && <PaneFooterBar footer={footer} focused={focused} width={width} />}
+            {renderFooter && <PaneFooterBar footer={footer} focused={focused} width={width} />}
           </Box>
         );
       }}

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

@@ -80,7 +80,8 @@ export function FloatingPaneWrapper({
   const bg = floatingPaneBg(focused);
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = shouldReservePaneFooter(nativePaneChrome, showFooter);
-  const bodyFrame = resolvePaneBodyFrame({ height, nativePaneChrome, reserveFooter });
+  const renderFooter = reserveFooter || showFooter;
+  const bodyFrame = resolvePaneBodyFrame({ height, nativePaneChrome, footerVisible: renderFooter, reserveFooter });
 
   return (
     <Box
@@ -124,7 +125,7 @@ export function FloatingPaneWrapper({
         {children}
       </PaneBodyFrame>
 
-      {reserveFooter && (
+      {renderFooter && (
         <PaneFooterBar
           footer={footer}
           focused={focused}

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

@@ -3,6 +3,7 @@ import { PaneInstanceProvider } from "../../../state/app/context";
 import { PaneKeyboardScrollController } from "../../../state/pane-scroll-registry";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneDef } from "../../../types/plugin";
+import { Box } from "../../../ui";
 
 interface PaneContentProps {
   component: PaneDef["component"];
@@ -31,14 +32,25 @@ export const PaneContent = memo(function PaneContent({
   return (
     <PaneInstanceProvider paneId={paneId}>
       <PaneKeyboardScrollController paneId={paneId} focused={focused} />
-      <Component
-        paneId={paneId}
-        paneType={paneType}
-        focused={focused}
-        width={width}
-        height={height}
-        close={onClose ? close : undefined}
-      />
+      <Box
+        flexDirection="column"
+        flexGrow={1}
+        flexShrink={1}
+        flexBasis={0}
+        minWidth={0}
+        minHeight={0}
+        overflow="hidden"
+        data-gloom-role="pane-content"
+      >
+        <Component
+          paneId={paneId}
+          paneType={paneType}
+          focused={focused}
+          width={width}
+          height={height}
+          close={onClose ? close : undefined}
+        />
+      </Box>
     </PaneInstanceProvider>
   );
 });

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

@@ -3,6 +3,7 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -17,6 +18,9 @@ import {
   type PaneHint,
 } from "./model";
 
+const usePaneFooterRegistrationEffect =
+  typeof document === "undefined" ? useEffect : useLayoutEffect;
+
 interface PaneFooterContextValue {
   register(registrationId: string, registration: PaneFooterRegistration | null): void;
   unregister(registrationId: string): void;
@@ -85,14 +89,14 @@ export function usePaneFooter(
   const context = useContext(PaneFooterContext);
   const previousRegistrationRef = useRef<PaneFooterRegistration | null>(null);
 
-  useEffect(() => {
+  usePaneFooterRegistrationEffect(() => {
     return () => {
       previousRegistrationRef.current = null;
       context?.unregister(registrationId);
     };
   }, [context, registrationId]);
 
-  useEffect(() => {
+  usePaneFooterRegistrationEffect(() => {
     if (!context) return;
     const nextRegistration = factory() ?? null;
     if (samePaneFooterRegistration(previousRegistrationRef.current, nextRegistration)) return;

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

@@ -19,13 +19,13 @@ export function getPaneWindowAttributes({
   windowModeSelected?: boolean;
   showBorderColor?: boolean;
 }): Record<string, unknown> {
-  if (!enabled) return {};
-
   const attributes: Record<string, unknown> = {
     "data-gloom-role": role,
-    "data-focused": focused ? "true" : "false",
   };
   if (paneId) attributes["data-gloom-pane-id"] = paneId;
+  if (!enabled) return attributes;
+
+  attributes["data-focused"] = focused ? "true" : "false";
   if (floating != null) attributes["data-floating"] = floating ? "true" : "false";
   if (windowModeSelected != null) {
     attributes["data-window-mode-selected"] = windowModeSelected ? "true" : "false";
@@ -48,7 +48,7 @@ export function PaneBodyFrame({
   children: ReactNode;
 }) {
   return (
-    <Box {...layoutProps} overflow="hidden" backgroundColor={backgroundColor}>
+    <Box {...layoutProps} overflow="hidden" backgroundColor={backgroundColor} data-gloom-role="pane-body">
       {children}
     </Box>
   );

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

@@ -1,5 +1,5 @@
-import { Box, Span, Text, useUiCapabilities } from "../../../ui";
-import type { ReactNode } from "react";
+import { Box, Span, Text, useNativeRenderer, useUiCapabilities } from "../../../ui";
+import { useCallback, useRef, type ReactNode } from "react";
 import { blendHex, colors, floatingPaneTitleBg, paneTitleBg, paneTitleText } from "../../../theme/colors";
 
 const PANE_HEADER_HEIGHT = 1;
@@ -29,6 +29,18 @@ function truncateTitle(title: string, maxWidth: number): string {
   return `${title.slice(0, maxWidth - 2)}..`;
 }
 
+function captureTerminalPointerDrag(renderer: unknown, renderable: unknown): void {
+  if (!renderable) return;
+  const hostCapture = (renderer as { captureMouseRenderable?: (target: unknown) => void }).captureMouseRenderable;
+  if (typeof hostCapture === "function") {
+    hostCapture.call(renderer, renderable);
+    return;
+  }
+  const capture = (renderer as { setCapturedRenderable?: (target: unknown) => void }).setCapturedRenderable;
+  if (typeof capture !== "function") return;
+  capture.call(renderer, renderable);
+}
+
 function DesktopPaneButton({
   icon,
   onMouseDown,
@@ -107,11 +119,17 @@ export function PaneHeader({
   onCloseMouseDown,
 }: PaneHeaderProps) {
   const { nativePaneChrome } = useUiCapabilities();
+  const nativeRenderer = useNativeRenderer();
+  const terminalHeaderRef = useRef<unknown>(null);
   const visuallyFocused = focused || windowModeSelected;
   const backgroundColor = floating ? floatingPaneTitleBg(visuallyFocused) : paneTitleBg(visuallyFocused);
   const actionText = showActions ? PANE_HEADER_ACTION : "     ";
   const closeText = floating ? PANE_HEADER_CLOSE : "";
   const textColor = paneTitleText(visuallyFocused, floating);
+  const handleTerminalHeaderMouseDown = useCallback((event: any) => {
+    captureTerminalPointerDrag(nativeRenderer, terminalHeaderRef.current);
+    onHeaderMouseDown?.(event);
+  }, [nativeRenderer, onHeaderMouseDown]);
 
   if (nativePaneChrome) {
     return (
@@ -201,7 +219,16 @@ export function PaneHeader({
     const fill = "─".repeat(fillLen);
 
     return (
-      <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
+      <Box
+        ref={terminalHeaderRef}
+        height={PANE_HEADER_HEIGHT}
+        width={width}
+        backgroundColor={backgroundColor}
+        flexDirection="row"
+        onMouseDown={handleTerminalHeaderMouseDown}
+        onMouseDrag={onHeaderMouseDrag}
+        onMouseDragEnd={onHeaderMouseDragEnd}
+      >
         <Text fg={borderColor} selectable={false}>{"┌─"}</Text>
         <Text fg={textColor} selectable={false}>{`${PANE_HEADER_GRIP}${clippedTitle}`}</Text>
         <Text fg={borderColor} selectable={false}>{fill}</Text>
@@ -229,7 +256,16 @@ export function PaneHeader({
   const padding = " ".repeat(Math.max(0, titleWidth - clippedTitle.length));
 
   return (
-    <Box height={PANE_HEADER_HEIGHT} width={width} backgroundColor={backgroundColor} flexDirection="row">
+    <Box
+      ref={terminalHeaderRef}
+      height={PANE_HEADER_HEIGHT}
+      width={width}
+      backgroundColor={backgroundColor}
+      flexDirection="row"
+      onMouseDown={handleTerminalHeaderMouseDown}
+      onMouseDrag={onHeaderMouseDrag}
+      onMouseDragEnd={onHeaderMouseDragEnd}
+    >
       <Text fg={textColor} selectable={false}>
         {`${PANE_HEADER_GRIP}${clippedTitle}${padding}`}
       </Text>

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

@@ -49,9 +49,11 @@ export function PaneWrapper({
   const bg = paneBg(focused);
   const showFooter = hasPaneFooterContent(footer);
   const reserveFooter = !!title && shouldReservePaneFooter(nativePaneChrome, showFooter);
+  const renderFooter = !!title && (reserveFooter || showFooter);
   const bodyFrame = resolvePaneBodyFrame({
     height: typeof height === "number" ? height : undefined,
     nativePaneChrome,
+    footerVisible: renderFooter,
     reserveFooter,
     headerRows: title ? 1 : 0,
   });
@@ -93,7 +95,7 @@ export function PaneWrapper({
       <PaneBodyFrame layoutProps={bodyFrame.layoutProps} backgroundColor={bg}>
         {children}
       </PaneBodyFrame>
-      {title && reserveFooter && (
+      {renderFooter && (
         <PaneFooterBar
           footer={footer}
           focused={focused}