gloomberb 0.9.3 → 0.9.4

package/src/components/chart/static/chart/surface.tsx

@@ -1,16 +1,26 @@
-import { useMemo } from "react";
-import { Box, ChartSurface, Text } from "../../../../ui";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Box, ChartSurface, Text, type BoxRenderable, type ChartSurfaceProps, useUiCapabilities } from "../../../../ui";
+import { colors as themeColors } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
+import { PriceAxisLabels } from "../../price-axis-labels";
 import type { ProjectedChartPoint } from "../../core/data";
 import {
   buildChartScene,
   computeGridLines,
-  formatAxisCell,
   renderChart,
   type RenderChartOptions,
 } from "../../core/renderer";
 import { renderNativeChartBase, type NativeChartBitmap } from "../../native/chart-rasterizer";
 import { useStaticChartBitmapSize } from "./bitmap";
+import {
+  StaticXAxisLabels,
+  StaticXMarkerLabels,
+  StaticXMarkerOverlay,
+  clampRatio,
+  type StaticChartXMarker,
+} from "./axis-overlays";
+
+export type { StaticChartXMarker } from "./axis-overlays";
 
 export interface StaticChartSurfaceProps extends Omit<
   RenderChartOptions,
@@ -23,11 +33,52 @@ export interface StaticChartSurfaceProps extends Omit<
   volumeHeight?: number;
   showTimeAxis?: boolean;
   timeAxisColor?: string;
+  xAxisLabels?: string[];
+  xAxisColor?: string;
+  formatXAxisCursorValue?: (xRatio: number) => string;
+  xMarkers?: StaticChartXMarker[];
   yAxisLabel?: string;
   yAxisColor?: string;
   formatYAxisValue?: (value: number) => string;
 }
 
+interface ChartMouseEventLike {
+  x: number;
+  y: number;
+  preciseX?: number;
+  preciseY?: number;
+  preventDefault?: () => void;
+}
+
+function localPlotPointer(
+  event: ChartMouseEventLike,
+  renderable: BoxRenderable | null,
+): { x: number; y: number } | null {
+  if (!renderable) return null;
+  const originX = typeof renderable.absoluteX === "number"
+    ? renderable.absoluteX
+    : typeof renderable.x === "number"
+      ? renderable.x
+      : 0;
+  const originY = typeof renderable.absoluteY === "number"
+    ? renderable.absoluteY
+    : typeof renderable.y === "number"
+      ? renderable.y
+      : 0;
+  const rawX = typeof event.preciseX === "number" ? event.preciseX : event.x;
+  const rawY = typeof event.preciseY === "number" ? event.preciseY : event.y;
+  const x = rawX - originX;
+  const y = rawY - originY;
+  const width = typeof renderable.width === "number" ? renderable.width : 0;
+  const height = typeof renderable.height === "number" ? renderable.height : 0;
+  if (!Number.isFinite(x) || !Number.isFinite(y) || width <= 0 || height <= 0) return null;
+  if (x < 0 || y < 0 || x >= width || y >= height) return null;
+  return {
+    x: Math.max(0, Math.min(x, Math.max(width - 1, 0))),
+    y: Math.max(0, Math.min(y, Math.max(height - 1, 0))),
+  };
+}
+
 export function StaticChartSurface({
   points,
   width,
@@ -43,16 +94,24 @@ export function StaticChartSurface({
   volumeHeight = 0,
   showTimeAxis = false,
   timeAxisColor,
+  xAxisLabels,
+  xAxisColor,
+  formatXAxisCursorValue,
+  xMarkers,
   yAxisLabel,
   yAxisColor,
   formatYAxisValue,
 }: StaticChartSurfaceProps) {
   useThemeColors();
-  const timeAxisRows = showTimeAxis ? 1 : 0;
+  const { cellWidthPx = 8, cellHeightPx = 18 } = useUiCapabilities();
+  const plotRef = useRef<BoxRenderable | null>(null);
+  const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);
+  const xAxisRows = showTimeAxis || (xAxisLabels?.length ?? 0) > 0 ? 1 : 0;
+  const xMarkerRows = xMarkers?.some((marker) => marker.label) ? 1 : 0;
   const labelRows = yAxisLabel ? 1 : 0;
   const totalWidth = Math.max(1, Math.floor(width));
   const totalHeight = Math.max(1, Math.floor(height));
-  const plotHeight = Math.max(1, totalHeight - timeAxisRows - labelRows);
+  const plotHeight = Math.max(1, totalHeight - xAxisRows - xMarkerRows - labelRows);
   const axisSourceOptions = useMemo<RenderChartOptions>(() => ({
     width: totalWidth,
     height: plotHeight,
@@ -104,8 +163,8 @@ export function StaticChartSurface({
     height: plotHeight,
     showVolume,
     volumeHeight,
-    cursorX: null,
-    cursorY: null,
+    cursorX: cursor?.x ?? null,
+    cursorY: cursor?.y ?? null,
     mode,
     axisMode,
     currency,
@@ -122,6 +181,7 @@ export function StaticChartSurface({
     mode,
     plotHeight,
     plotWidth,
+    cursor,
     showVolume,
     timeAxisDates,
     volumeHeight,
@@ -133,6 +193,14 @@ export function StaticChartSurface({
   const effectiveAxisLabelsByRow = useMemo(() => {
     return new Map(axisLabels.map((entry) => [entry.row, entry.label] as const));
   }, [axisLabels]);
+  const cursorAxisLabel = useMemo(() => {
+    if (!formatYAxisValue || textResult.crosshairPrice === null) return null;
+    return formatYAxisValue(textResult.crosshairPrice);
+  }, [formatYAxisValue, textResult.crosshairPrice]);
+  const cursorXAxisLabel = useMemo(() => {
+    if (!formatXAxisCursorValue || !cursor) return null;
+    return formatXAxisCursorValue(clampRatio(cursor.x / Math.max(plotWidth - 1, 1)));
+  }, [cursor, formatXAxisCursorValue, plotWidth]);
   const effectiveAxisWidth = axisWidth;
   const effectiveAxisGap = effectiveAxisWidth > 0 ? 1 : 0;
   const bitmap = useMemo<NativeChartBitmap | null>(() => {
@@ -141,40 +209,115 @@ export function StaticChartSurface({
     if (!scene) return null;
     return renderNativeChartBase(scene, bitmapSize.pixelWidth, bitmapSize.pixelHeight);
   }, [bitmapSize, points, renderOptions]);
+  const canvasCrosshair = useMemo<ChartSurfaceProps["crosshair"]>(() => {
+    if (!bitmap || !cursor) return null;
+    return {
+      pixelX: Math.round(clampRatio(cursor.x / Math.max(plotWidth - 1, 1)) * Math.max(bitmap.width - 1, 0)),
+      pixelY: Math.round(clampRatio(cursor.y / Math.max(plotHeight - 1, 1)) * Math.max(bitmap.height - 1, 0)),
+      color: colors.crosshairColor,
+    };
+  }, [bitmap, colors.crosshairColor, cursor, plotHeight, plotWidth]);
+  const handleCursorEvent = useCallback((event: ChartMouseEventLike) => {
+    const pointer = localPlotPointer(event, plotRef.current);
+    if (!pointer) return;
+    event.preventDefault?.();
+    setCursor((current) => (
+      current && current.x === pointer.x && current.y === pointer.y ? current : pointer
+    ));
+  }, []);
+  const clearCursor = useCallback(() => {
+    setCursor(null);
+  }, []);
 
   return (
-    <Box flexDirection="column" width={totalWidth} height={plotHeight + timeAxisRows + labelRows}>
+    <Box flexDirection="column" width={totalWidth} height={plotHeight + xAxisRows + xMarkerRows + labelRows}>
       {yAxisLabel ? (
         <Box height={1}>
           <Text fg={yAxisColor}>{yAxisLabel}</Text>
         </Box>
       ) : null}
       <Box flexDirection="row" height={plotHeight}>
-        <ChartSurface
+        <Box
+          ref={plotRef}
+          position="relative"
           width={plotWidth}
           height={plotHeight}
-          flexDirection="column"
-          bitmaps={bitmap ? [bitmap] : null}
+          onMouseMove={handleCursorEvent}
+          onMouseDown={handleCursorEvent}
+          onMouseOut={clearCursor}
+          data-gloom-role="static-chart-plot"
         >
-          {textResult.lines.map((line, index) => (
-            <Text key={index} content={line} />
-          ))}
-        </ChartSurface>
+          <ChartSurface
+            width={plotWidth}
+            height={plotHeight}
+            flexDirection="column"
+            bitmaps={bitmap ? [bitmap] : null}
+            crosshair={canvasCrosshair}
+          >
+            {textResult.lines.map((line, index) => (
+              <Text key={index} content={line} />
+            ))}
+          </ChartSurface>
+          {xMarkers ? (
+            <StaticXMarkerOverlay
+              markers={xMarkers}
+              width={plotWidth}
+              height={plotHeight}
+              fallbackColor={xAxisColor ?? timeAxisColor}
+            />
+          ) : null}
+        </Box>
         {effectiveAxisWidth > 0 ? (
           <>
             <Box width={effectiveAxisGap} />
-            <Box width={effectiveAxisWidth} height={plotHeight} flexDirection="column">
-              {Array.from({ length: plotHeight }, (_, row) => (
-                <Text key={row} fg={yAxisColor}>
-                  {formatAxisCell(effectiveAxisLabelsByRow.get(row) ?? null, effectiveAxisWidth)}
-                </Text>
-              ))}
-            </Box>
+            <PriceAxisLabels
+              axisLabels={effectiveAxisLabelsByRow}
+              axisWidth={effectiveAxisWidth}
+              axisSectionWidth={effectiveAxisWidth}
+              height={plotHeight}
+              cursorRow={textResult.cursorRow}
+              cursorPixelY={cursor ? cursor.y * cellHeightPx : null}
+              cursorLabel={cursorAxisLabel}
+              cursorColor={colors.crosshairColor}
+              axisColor={yAxisColor}
+            />
           </>
         ) : null}
       </Box>
-      {showTimeAxis ? (
-        <Text fg={timeAxisColor}>{textResult.timeLabels}</Text>
+      {showTimeAxis || (xAxisLabels?.length ?? 0) > 0 ? (
+        <Box height={1} flexDirection="row">
+          {xAxisLabels ? (
+            <StaticXAxisLabels
+              labels={xAxisLabels}
+              width={plotWidth}
+              color={xAxisColor ?? timeAxisColor}
+              cursorColumn={textResult.cursorColumn}
+              cursorPixelX={cursor ? cursor.x * cellWidthPx : null}
+              cursorLabel={cursorXAxisLabel}
+              cursorColor={colors.crosshairColor}
+              cursorBackgroundColor={colors.bgColor ?? themeColors.bg}
+            />
+          ) : (
+            <Text fg={timeAxisColor}>{textResult.timeLabels}</Text>
+          )}
+          {effectiveAxisWidth > 0 ? (
+            <>
+              <Box width={effectiveAxisGap} />
+              <Box width={effectiveAxisWidth} />
+            </>
+          ) : null}
+        </Box>
+      ) : null}
+      {xMarkers && xMarkerRows > 0 ? (
+        <Box height={1} flexDirection="row">
+          <StaticXMarkerLabels markers={xMarkers} width={plotWidth} fallbackColor={xAxisColor ?? timeAxisColor} />
+          {effectiveAxisWidth > 0 ? (
+            <>
+              <Box width={effectiveAxisGap} />
+              <Box width={effectiveAxisWidth} />
+            </>
+          ) : null}
+        </Box>
       ) : null}
     </Box>
   );

package/src/components/chart/stock-chart/index.test.ts

@@ -76,6 +76,31 @@ describe("stock chart pointer helpers", () => {
     });
   });
 
+  test("uses absolute renderable coordinates for desktop mouse hit testing", () => {
+    const pointer = getLocalPlotPointer({
+      x: 49,
+      y: 10,
+      preciseX: 49.5,
+      preciseY: 10.25,
+      modifiers: { shift: false, alt: false, ctrl: false },
+    }, {
+      x: 0,
+      y: 0,
+      absoluteX: 10,
+      absoluteY: 5,
+      width: 40,
+      height: 12,
+    }, renderer);
+
+    expect(pointer).toMatchObject({
+      hasPixelPrecision: false,
+      pixelX: null,
+      pixelY: null,
+    });
+    expect(pointer!.cellX).toBeCloseTo(39.5, 2);
+    expect(pointer!.cellY).toBeCloseTo(5.25, 2);
+  });
+
   test("can derive local pixels from cell coordinates for non-pixel fallbacks", () => {
     const pixels = projectCellCursorToLocalPixels(14, 5, renderable, renderer);
 

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/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}

package/src/components/layout/pane/sizing.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, test } from "bun:test";
+import { resolvePaneBodyFrame, shouldReservePaneFooter } from "./sizing";
+
+describe("pane sizing", () => {
+  test("lets native pane chrome lay out footer bars in normal flex flow", () => {
+    expect(shouldReservePaneFooter(true, true)).toBe(false);
+
+    const bodyFrame = resolvePaneBodyFrame({
+      width: 80,
+      height: 30,
+      nativePaneChrome: true,
+      footerVisible: true,
+      reserveFooter: false,
+    });
+
+    expect(bodyFrame.height).toBe(28);
+    expect(bodyFrame.layoutProps).toEqual({
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: 0,
+      minWidth: 0,
+      minHeight: 0,
+    });
+  });
+
+  test("keeps terminal pane footer rows reserved for border rendering", () => {
+    expect(shouldReservePaneFooter(false, false)).toBe(true);
+
+    const bodyFrame = resolvePaneBodyFrame({
+      width: 80,
+      height: 30,
+      nativePaneChrome: false,
+      reserveFooter: true,
+    });
+
+    expect(bodyFrame.height).toBe(28);
+    expect(bodyFrame.layoutProps).toEqual({
+      height: 28,
+      flexGrow: 0,
+      flexBasis: undefined,
+    });
+  });
+});