gloomberb 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Bloomberg-style stock portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",
@@ -53,6 +53,7 @@
     "@opentui/react": "^0.1.90",
     "@stoqey/ib": "^1.5.3",
     "@tanstack/react-virtual": "^3.13.23",
+    "jimp": "1.6.0",
     "opentui-spinner": "^0.0.6",
     "react": "19.2.5",
     "rxjs": "^7.8.2"

package/src/components/chart/comparison-stock-chart.tsx

@@ -82,7 +82,6 @@ import {
 } from "./chart-types";
 import {
   computeBitmapSize,
-  intersectCellRects,
   renderNativeComparisonChartBase,
   renderNativeCrosshairOverlay,
   type CellRect,
@@ -93,6 +92,11 @@ import { ensureKittySupport, getCachedKittySupport } from "./native/kitty-suppor
 import { resolveChartRendererState } from "./native/renderer-selection";
 import { getNativeSurfaceManager } from "./native/surface-manager";
 import { syncCachedNativeSurface } from "./native/surface-sync";
+import {
+  getRenderableCellRect,
+  resolveNativeSurfaceVisibleRect,
+  type NativeSurfaceRenderableNode,
+} from "./native/surface-visibility";
 import { formatAxisCell, formatDateShort, resolveChartAxisWidth, type StyledContent } from "./chart-renderer";
 
 const MODE_CHIPS: Record<ComparisonChartRenderMode, string> = {
@@ -169,14 +173,6 @@ interface DisplayCursorState {
   pixelY: number | null;
 }
 
-interface RenderableNode {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  parent: RenderableNode | null;
-}
-
 const EMPTY_DISPLAY_CURSOR: DisplayCursorState = {
   cellX: null,
   cellY: null,
@@ -384,41 +380,6 @@ function resolveCursorMotionKind(
     : "cell";
 }
 
-function extractCellRect(renderable: RenderableNode): CellRect {
-  return {
-    x: renderable.x,
-    y: renderable.y,
-    width: renderable.width,
-    height: renderable.height,
-  };
-}
-
-function resolveVisibleRect(
-  renderable: RenderableNode | null,
-  terminalWidth: number,
-  terminalHeight: number,
-): CellRect | null {
-  if (!renderable) return null;
-
-  let visible: CellRect = {
-    x: 0,
-    y: 0,
-    width: terminalWidth,
-    height: terminalHeight,
-  };
-  let current: RenderableNode | null = renderable;
-
-  while (current) {
-    const currentRect = extractCellRect(current);
-    const nextVisible = intersectCellRects(visible, currentRect);
-    if (!nextVisible) return null;
-    visible = nextVisible;
-    current = current.parent;
-  }
-
-  return visible;
-}
-
 function buildBlankPlotLines(width: number, height: number): string[] {
   return Array.from({ length: height }, () => " ".repeat(width));
 }
@@ -1201,8 +1162,9 @@ function ComparisonStockChartView({
 
     const syncPlacement = () => {
       if (effectiveRenderer !== "kitty" || !rendererState.nativeReady || !plotRef.current) return;
-      const rect = extractCellRect(plotRef.current);
-      const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+      const plot = plotRef.current as NativeSurfaceRenderableNode;
+      const rect = getRenderableCellRect(plot);
+      const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
       const previous = lastNativeGeometryRef.current;
       if (previous
         && previous.rect.x === rect.x
@@ -1257,8 +1219,9 @@ function ComparisonStockChartView({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapKey = buildComparisonNativeBitmapKey(
       symbols.length,
@@ -1314,8 +1277,9 @@ function ComparisonStockChartView({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const renderablePixelSize = getRenderablePixelSize(plotRef.current, renderer);
     const overlayPixelX = scaleLocalPixelCoordinate(

package/src/components/chart/native/kitty.test.ts

@@ -17,6 +17,7 @@ import { chunkBase64Payload, encodeKittyTransmitRgba } from "./kitty-protocol";
 import { resolveChartRendererState } from "./renderer-selection";
 import { computeSurfaceVisibleFragments, NativeSurfaceManager } from "./surface-manager";
 import { syncCachedNativeSurface } from "./surface-sync";
+import { resolveNativeSurfaceVisibleRect, type NativeSurfaceRenderableNode } from "./surface-visibility";
 
 describe("resolveChartRendererState", () => {
   test("resolves auto and forced kitty correctly", () => {
@@ -98,6 +99,28 @@ describe("computeNativePlacement", () => {
   });
 });
 
+describe("resolveNativeSurfaceVisibleRect", () => {
+  test("treats hidden ancestors as invisible for native graphics", () => {
+    const hiddenParent: NativeSurfaceRenderableNode = {
+      x: 0,
+      y: 0,
+      width: 80,
+      height: 20,
+      visible: false,
+      parent: null,
+    };
+    const child: NativeSurfaceRenderableNode = {
+      x: 2,
+      y: 3,
+      width: 20,
+      height: 8,
+      parent: hiddenParent,
+    };
+
+    expect(resolveNativeSurfaceVisibleRect(child, 100, 30)).toBeNull();
+  });
+});
+
 describe("renderNativeChartBase", () => {
   test("leaves untouched bitmap pixels transparent", () => {
     const palette = resolveChartPalette({

package/src/components/chart/native/surface-visibility.ts

@@ -0,0 +1,48 @@
+import { intersectCellRects, type CellRect } from "./chart-rasterizer";
+
+export interface NativeSurfaceRenderableNode {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  visible?: boolean;
+  parent: NativeSurfaceRenderableNode | null;
+}
+
+export function getRenderableCellRect(
+  renderable: Pick<NativeSurfaceRenderableNode, "x" | "y" | "width" | "height">,
+): CellRect {
+  return {
+    x: renderable.x,
+    y: renderable.y,
+    width: renderable.width,
+    height: renderable.height,
+  };
+}
+
+export function resolveNativeSurfaceVisibleRect(
+  renderable: NativeSurfaceRenderableNode | null,
+  terminalWidth: number,
+  terminalHeight: number,
+): CellRect | null {
+  if (!renderable) return null;
+
+  let visible: CellRect = {
+    x: 0,
+    y: 0,
+    width: terminalWidth,
+    height: terminalHeight,
+  };
+  let current: NativeSurfaceRenderableNode | null = renderable;
+
+  while (current) {
+    if (current.visible === false) return null;
+
+    const nextVisible = intersectCellRects(visible, getRenderableCellRect(current));
+    if (!nextVisible) return null;
+    visible = nextVisible;
+    current = current.parent;
+  }
+
+  return visible;
+}

package/src/components/chart/stock-chart.tsx

@@ -110,7 +110,6 @@ import {
 } from "./chart-types";
 import {
   computeBitmapSize,
-  intersectCellRects,
   renderNativeChartBase,
   renderNativeCrosshairOverlay,
   type CellRect,
@@ -121,6 +120,11 @@ import { ensureKittySupport, getCachedKittySupport } from "./native/kitty-suppor
 import { resolveChartRendererState } from "./native/renderer-selection";
 import { getNativeSurfaceManager } from "./native/surface-manager";
 import { syncCachedNativeSurface } from "./native/surface-sync";
+import {
+  getRenderableCellRect,
+  resolveNativeSurfaceVisibleRect,
+  type NativeSurfaceRenderableNode,
+} from "./native/surface-visibility";
 import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 
@@ -275,14 +279,6 @@ interface DisplayCursorState {
   pixelY: number | null;
 }
 
-interface RenderableNode {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  parent: RenderableNode | null;
-}
-
 const EMPTY_DISPLAY_CURSOR: DisplayCursorState = {
   cellX: null,
   cellY: null,
@@ -522,41 +518,6 @@ function resolveCursorMotionKind(
     : "cell";
 }
 
-function extractCellRect(renderable: RenderableNode): CellRect {
-  return {
-    x: renderable.x,
-    y: renderable.y,
-    width: renderable.width,
-    height: renderable.height,
-  };
-}
-
-function resolveVisibleRect(
-  renderable: RenderableNode | null,
-  terminalWidth: number,
-  terminalHeight: number,
-): CellRect | null {
-  if (!renderable) return null;
-
-  let visible: CellRect = {
-    x: 0,
-    y: 0,
-    width: terminalWidth,
-    height: terminalHeight,
-  };
-  let current: RenderableNode | null = renderable;
-
-  while (current) {
-    const currentRect = extractCellRect(current);
-    const nextVisible = intersectCellRects(visible, currentRect);
-    if (!nextVisible) return null;
-    visible = nextVisible;
-    current = current.parent;
-  }
-
-  return visible;
-}
-
 function buildBlankPlotLines(width: number, height: number): string[] {
   return Array.from({ length: height }, () => " ".repeat(width));
 }
@@ -3236,8 +3197,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
     const syncPlacement = () => {
       if (effectiveRenderer !== "kitty" || !rendererState.nativeReady || !plotRef.current) return;
-      const rect = extractCellRect(plotRef.current);
-      const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+      const plot = plotRef.current as NativeSurfaceRenderableNode;
+      const rect = getRenderableCellRect(plot);
+      const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
       const previous = lastNativeGeometryRef.current;
       if (previous
         && previous.rect.x === rect.x
@@ -3292,8 +3254,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapKey = buildNativeBitmapKey(
       projection.points.length,
@@ -3364,8 +3327,9 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       return;
     }
 
-    const plotRect = extractCellRect(plotRef.current);
-    const visibleRect = resolveVisibleRect(plotRef.current, renderer.terminalWidth, renderer.terminalHeight);
+    const plot = plotRef.current as NativeSurfaceRenderableNode;
+    const plotRect = getRenderableCellRect(plot);
+    const visibleRect = resolveNativeSurfaceVisibleRect(plot, renderer.terminalWidth, renderer.terminalHeight);
     const bitmapSize = computeBitmapSize(plotRect, renderer.resolution, renderer.terminalWidth, renderer.terminalHeight);
     const renderablePixelSize = getRenderablePixelSize(plotRef.current, renderer);
     const overlayPixelX = scaleLocalPixelCoordinate(

package/src/components/index.ts

@@ -10,7 +10,7 @@ export type { DataTableKeyEvent } 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";
-export { usePaneFooter } from "./layout/pane-footer";
+export { PaneFooterScope, usePaneFooter } from "./layout/pane-footer";
 export type { PaneFooterSegment, PaneHint } from "./layout/pane-footer";
 export { useExternalLinkFooter } from "./use-external-link-footer";
 export { Button } from "./ui/button";

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

@@ -1,5 +1,6 @@
 import { memo, useCallback } from "react";
 import { PaneInstanceProvider } from "../../state/app-context";
+import { PaneKeyboardScrollController } from "../../state/pane-scroll-registry";
 import type { PaneDef } from "../../types/plugin";
 
 interface PaneContentProps {
@@ -27,6 +28,7 @@ export const PaneContent = memo(function PaneContent({
 
   return (
     <PaneInstanceProvider paneId={paneId}>
+      <PaneKeyboardScrollController paneId={paneId} focused={focused} />
       <Component
         paneId={paneId}
         paneType={paneType}

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

@@ -158,6 +158,21 @@ export function PaneFooterProvider({
   );
 }
 
+export function PaneFooterScope({
+  active,
+  children,
+}: {
+  active: boolean;
+  children: ReactNode;
+}) {
+  const context = useContext(PaneFooterContext);
+  return (
+    <PaneFooterContext.Provider value={active ? context : null}>
+      {children}
+    </PaneFooterContext.Provider>
+  );
+}
+
 export function usePaneFooter(
   registrationId: string,
   factory: () => PaneFooterRegistration | null | undefined,

package/src/components/layout/pane-keyboard-scroll.test.tsx

@@ -0,0 +1,226 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act, useReducer, type ReactNode } from "react";
+import { testRender } from "../../renderers/opentui/test-utils";
+import { useShortcut } from "../../react/input";
+import { AppContext, appReducer, createInitialState } from "../../state/app-context";
+import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../ui";
+import { DataTableStackView } from "../data-table-stack-view";
+import { type DataTableColumn } from "../ui";
+import { createDefaultConfig } from "../../types/config";
+import type { PaneProps } from "../../types/plugin";
+import { PaneContent } from "./pane-content";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let scrollRef: ScrollBoxRenderable | null = null;
+let hiddenScrollRef: ScrollBoxRenderable | null = null;
+
+afterEach(() => {
+  if (testSetup) {
+    act(() => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+  scrollRef = null;
+  hiddenScrollRef = null;
+});
+
+function emitDownArrow() {
+  return act(async () => {
+    testSetup!.mockInput.pressArrow("down");
+    await testSetup!.renderOnce();
+  });
+}
+
+async function renderHarness(component: ReactNode) {
+  await act(async () => {
+    testSetup = await testRender(component, { width: 30, height: 5 });
+  });
+  await act(async () => {
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+    await testSetup!.renderOnce();
+  });
+}
+
+function LongScrollPane({ width, height }: PaneProps) {
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">
+          {Array.from({ length: 20 }, (_, index) => (
+            <Box key={index} height={1}>
+              <Text>{`Row ${index}`}</Text>
+            </Box>
+          ))}
+        </Box>
+      </ScrollBox>
+    </Box>
+  );
+}
+
+function ConsumingScrollPane(props: PaneProps) {
+  useShortcut((event) => {
+    if (event.name !== "down") return;
+    event.preventDefault();
+    event.stopPropagation();
+  });
+  return <LongScrollPane {...props} />;
+}
+
+function HiddenMountedTabPane({ width, height }: PaneProps) {
+  const renderRows = () => Array.from({ length: 20 }, (_, index) => (
+    <Box key={index} height={1}>
+      <Text>{`Tab row ${index}`}</Text>
+    </Box>
+  ));
+
+  return (
+    <Box width={width} height={height}>
+      <ScrollBox
+        ref={(node) => {
+          scrollRef = node;
+        }}
+        height={height}
+        scrollY
+        focusable={false}
+      >
+        <Box flexDirection="column">{renderRows()}</Box>
+      </ScrollBox>
+      <Box visible={false} height={height}>
+        <ScrollBox
+          ref={(node) => {
+            hiddenScrollRef = node;
+          }}
+          height={height}
+          scrollY
+          focusable={false}
+        >
+          <Box flexDirection="column">{renderRows()}</Box>
+        </ScrollBox>
+      </Box>
+    </Box>
+  );
+}
+
+interface TestRow {
+  id: string;
+}
+
+const columns: DataTableColumn[] = [{ id: "label", label: "Label", width: 10, align: "left" }];
+const rows: TestRow[] = [{ id: "row-1" }];
+
+function StackDetailPane({ focused, width, height }: PaneProps) {
+  const detailContent = (
+    <ScrollBox
+      ref={(node) => {
+        scrollRef = node;
+      }}
+      flexGrow={1}
+      scrollY
+      focusable={false}
+    >
+      <Box flexDirection="column">
+        {Array.from({ length: 20 }, (_, index) => (
+          <Box key={index} height={1}>
+            <Text>{`Tweet detail row ${index}`}</Text>
+          </Box>
+        ))}
+      </Box>
+    </ScrollBox>
+  );
+
+  return (
+    <DataTableStackView<TestRow>
+      focused={focused}
+      detailOpen
+      onBack={() => {}}
+      detailContent={detailContent}
+      detailTitle="Tweet"
+      selectedIndex={0}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={rows}
+      sortColumnId={null}
+      sortDirection="asc"
+      onHeaderClick={() => {}}
+      getItemKey={(row) => row.id}
+      isSelected={(_row, index) => index === 0}
+      onSelect={() => {}}
+      renderCell={(row) => ({ text: row.id })}
+      emptyStateTitle="No rows"
+    />
+  );
+}
+
+function Harness({
+  component = LongScrollPane,
+  focused = true,
+}: {
+  component?: (props: PaneProps) => ReactNode;
+  focused?: boolean;
+}) {
+  const initialState = createInitialState(createDefaultConfig("/tmp/gloomberb-pane-keyboard-scroll-test"));
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <PaneContent
+        component={component}
+        paneId="test-pane:main"
+        paneType="test-pane"
+        focused={focused}
+        width={30}
+        height={5}
+      />
+    </AppContext>
+  );
+}
+
+describe("pane keyboard scrolling", () => {
+  test("scrolls the focused pane's vertical scrollbox with arrow keys", async () => {
+    await renderHarness(<Harness />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+  });
+
+  test("does not steal arrows from existing pane shortcut handlers", async () => {
+    await renderHarness(<Harness component={ConsumingScrollPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(0);
+  });
+
+  test("ignores mounted scrollboxes inside hidden tabs", async () => {
+    await renderHarness(<Harness component={HiddenMountedTabPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+    expect(hiddenScrollRef?.scrollTop).toBe(0);
+  });
+
+  test("scrolls stack detail content without requiring a pane-local detail handler", async () => {
+    await renderHarness(<Harness component={StackDetailPane} />);
+
+    expect(scrollRef?.scrollTop).toBe(0);
+    await emitDownArrow();
+
+    expect(scrollRef?.scrollTop).toBe(3);
+  });
+});

package/src/components/ui/remote-image.tsx

@@ -1,4 +1,4 @@
-import { Box, ImageSurface, Text, useUiHost } from "../../ui";
+import { Box, ImageSurface, Text } from "../../ui";
 import { colors } from "../../theme/colors";
 import { ExternalLinkText } from "./external-link";
 import { normalizedHttpUrl } from "../../utils/url";
@@ -25,51 +25,26 @@ export function RemoteImage({
   height = 12,
   label = "image",
 }: RemoteImageProps) {
-  const ui = useUiHost();
   const resolvedWidth = Math.max(12, width);
   const imageUrl = normalizedHttpUrl(src);
   if (!imageUrl) return null;
 
-  if (ui.kind === "desktop-web") {
-    return (
-      <ImageSurface
-        src={imageUrl}
-        alt={alt}
-        width={resolvedWidth}
-        height={Math.max(4, height)}
-        border
-        borderColor={colors.border}
-        backgroundColor={colors.panel}
-        objectFit="contain"
-      >
-        <Box paddingX={1} paddingY={1} flexDirection="column" gap={1}>
-          <Text fg={colors.textDim}>{label}</Text>
-          <ExternalLinkText
-            url={imageUrl}
-            label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
-            color={colors.textBright}
-          />
-        </Box>
-      </ImageSurface>
-    );
-  }
-
   return (
-    <Box
+    <ImageSurface
+      src={imageUrl}
+      alt={alt}
       width={resolvedWidth}
-      minHeight={2}
-      border
-      borderColor={colors.border}
-      backgroundColor={colors.panel}
-      paddingX={1}
-      flexDirection="column"
+      height={Math.max(4, height)}
+      objectFit="contain"
     >
-      <Text fg={colors.textDim}>{label}</Text>
-      <ExternalLinkText
-        url={imageUrl}
-        label={truncate(imageUrl, Math.max(1, resolvedWidth - 2))}
-        color={colors.textBright}
-      />
-    </Box>
+      <Box flexDirection="column" gap={1}>
+        <Text fg={colors.textDim}>{label}</Text>
+        <ExternalLinkText
+          url={imageUrl}
+          label={truncate(imageUrl, resolvedWidth)}
+          color={colors.textBright}
+        />
+      </Box>
+    </ImageSurface>
   );
 }