gloomberb 0.2.0 → 0.3.1

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

@@ -0,0 +1,225 @@
+import type { CliRenderer } from "@opentui/core";
+import {
+  computeNativePlacements,
+  excludeCellRects,
+  intersectCellRects,
+  type CellRect,
+  type NativeChartBitmap,
+} from "./chart-rasterizer";
+import { KittyImageManager } from "./kitty-manager";
+
+export interface NativePaneLayer {
+  paneId: string;
+  zIndex: number;
+}
+
+export interface NativeOccluder {
+  id: string;
+  paneId?: string | null;
+  rect: CellRect;
+  zIndex: number;
+}
+
+export interface NativeSurfaceSnapshot {
+  id: string;
+  paneId: string;
+  rect: CellRect;
+  visibleRect: CellRect | null;
+  bitmap: NativeChartBitmap;
+  bitmapKey: string;
+}
+
+interface SurfaceEntry {
+  imageManager: KittyImageManager;
+  snapshot: NativeSurfaceSnapshot;
+}
+
+interface NativeWindowState {
+  paneLayers: NativePaneLayer[];
+  occluders: NativeOccluder[];
+}
+
+function compareRects(a: CellRect, b: CellRect): number {
+  if (a.y !== b.y) return a.y - b.y;
+  if (a.x !== b.x) return a.x - b.x;
+  if (a.height !== b.height) return a.height - b.height;
+  return a.width - b.width;
+}
+
+function sameRect(a: CellRect | null, b: CellRect | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+
+function samePaneLayer(a: NativePaneLayer, b: NativePaneLayer): boolean {
+  return a.paneId === b.paneId && a.zIndex === b.zIndex;
+}
+
+function sameOccluder(a: NativeOccluder, b: NativeOccluder): boolean {
+  return a.id === b.id
+    && (a.paneId ?? null) === (b.paneId ?? null)
+    && a.zIndex === b.zIndex
+    && sameRect(a.rect, b.rect);
+}
+
+function sameWindowState(a: NativeWindowState, b: NativeWindowState): boolean {
+  if (a.paneLayers.length !== b.paneLayers.length || a.occluders.length !== b.occluders.length) {
+    return false;
+  }
+
+  for (let index = 0; index < a.paneLayers.length; index += 1) {
+    if (!samePaneLayer(a.paneLayers[index]!, b.paneLayers[index]!)) {
+      return false;
+    }
+  }
+
+  for (let index = 0; index < a.occluders.length; index += 1) {
+    if (!sameOccluder(a.occluders[index]!, b.occluders[index]!)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function sameSnapshot(a: NativeSurfaceSnapshot, b: NativeSurfaceSnapshot): boolean {
+  return a.id === b.id
+    && a.paneId === b.paneId
+    && a.bitmapKey === b.bitmapKey
+    && sameRect(a.rect, b.rect)
+    && sameRect(a.visibleRect, b.visibleRect);
+}
+
+export function computeSurfaceVisibleFragments(
+  rect: CellRect,
+  visibleRect: CellRect | null,
+  surfaceZIndex: number,
+  paneId: string,
+  occluders: NativeOccluder[],
+): CellRect[] {
+  if (!visibleRect) return [];
+  const clipped = intersectCellRects(rect, visibleRect);
+  if (!clipped) return [];
+
+  const relevantCuts = occluders
+    .filter((occluder) => occluder.paneId !== paneId && occluder.zIndex >= surfaceZIndex)
+    .sort((left, right) => right.zIndex - left.zIndex)
+    .map((occluder) => occluder.rect);
+
+  return excludeCellRects(clipped, relevantCuts).sort(compareRects);
+}
+
+export class NativeSurfaceManager {
+  private windowState: NativeWindowState = { paneLayers: [], occluders: [] };
+  private readonly surfaces = new Map<string, SurfaceEntry>();
+
+  constructor(private readonly renderer: CliRenderer) {}
+
+  setWindowState(windowState: NativeWindowState) {
+    if (sameWindowState(this.windowState, windowState)) {
+      return;
+    }
+    this.windowState = {
+      paneLayers: [...windowState.paneLayers],
+      occluders: [...windowState.occluders],
+    };
+    this.syncAll();
+  }
+
+  upsertSurface(snapshot: NativeSurfaceSnapshot) {
+    const existing = this.surfaces.get(snapshot.id);
+    if (existing) {
+      if (sameSnapshot(existing.snapshot, snapshot)) {
+        return;
+      }
+      existing.snapshot = snapshot;
+      this.syncSurface(existing);
+      return;
+    }
+
+    const entry: SurfaceEntry = {
+      imageManager: new KittyImageManager(this.renderer),
+      snapshot,
+    };
+    this.surfaces.set(snapshot.id, entry);
+    this.syncSurface(entry);
+  }
+
+  updateSurfaceGeometry(id: string, geometry: Pick<NativeSurfaceSnapshot, "paneId" | "rect" | "visibleRect">) {
+    const entry = this.surfaces.get(id);
+    if (!entry) return;
+    if (entry.snapshot.paneId === geometry.paneId
+      && sameRect(entry.snapshot.rect, geometry.rect)
+      && sameRect(entry.snapshot.visibleRect, geometry.visibleRect)) {
+      return;
+    }
+    entry.snapshot = {
+      ...entry.snapshot,
+      ...geometry,
+    };
+    this.syncSurface(entry);
+  }
+
+  removeSurface(id: string) {
+    const entry = this.surfaces.get(id);
+    if (!entry) return;
+    entry.imageManager.destroy();
+    this.surfaces.delete(id);
+  }
+
+  destroy() {
+    for (const id of [...this.surfaces.keys()]) {
+      this.removeSurface(id);
+    }
+  }
+
+  private syncAll() {
+    for (const entry of this.surfaces.values()) {
+      this.syncSurface(entry);
+    }
+  }
+
+  private syncSurface(entry: SurfaceEntry) {
+    const resolution = this.renderer.resolution;
+    if (!resolution) {
+      entry.imageManager.clear();
+      return;
+    }
+
+    const surfaceZIndex = this.windowState.paneLayers.find((layer) => layer.paneId === entry.snapshot.paneId)?.zIndex ?? 0;
+    const fragments = computeSurfaceVisibleFragments(
+      entry.snapshot.rect,
+      entry.snapshot.visibleRect,
+      surfaceZIndex,
+      entry.snapshot.paneId,
+      this.windowState.occluders,
+    );
+
+    const placements = computeNativePlacements(
+      entry.snapshot.rect,
+      fragments,
+      entry.snapshot.bitmap,
+      resolution,
+      this.renderer.terminalWidth,
+      this.renderer.terminalHeight,
+    );
+
+    if (placements.length === 0) {
+      entry.imageManager.clear();
+      return;
+    }
+
+    entry.imageManager.render(entry.snapshot.bitmap, placements, entry.snapshot.bitmapKey);
+  }
+}
+
+const nativeSurfaceManagers = new WeakMap<CliRenderer, NativeSurfaceManager>();
+
+export function getNativeSurfaceManager(renderer: CliRenderer): NativeSurfaceManager {
+  const existing = nativeSurfaceManagers.get(renderer);
+  if (existing) return existing;
+  const manager = new NativeSurfaceManager(renderer);
+  nativeSurfaceManagers.set(renderer, manager);
+  return manager;
+}

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

@@ -0,0 +1,34 @@
+import type { CellRect, NativeChartBitmap } from "./chart-rasterizer";
+import type { NativeSurfaceManager } from "./surface-manager";
+
+interface CachedNativeSurface {
+  key: string;
+  bitmap: NativeChartBitmap;
+}
+
+interface NativeSurfaceGeometry {
+  paneId: string;
+  rect: CellRect;
+  visibleRect: CellRect | null;
+}
+
+export function syncCachedNativeSurface(
+  manager: Pick<NativeSurfaceManager, "upsertSurface" | "updateSurfaceGeometry">,
+  id: string,
+  geometry: NativeSurfaceGeometry,
+  cachedSurface: CachedNativeSurface | null,
+) {
+  if (geometry.visibleRect && cachedSurface) {
+    manager.upsertSurface({
+      id,
+      paneId: geometry.paneId,
+      rect: geometry.rect,
+      visibleRect: geometry.visibleRect,
+      bitmap: cachedSurface.bitmap,
+      bitmapKey: cachedSurface.key,
+    });
+    return;
+  }
+
+  manager.updateSurfaceGeometry(id, geometry);
+}

package/src/components/chart/stock-chart-renderer-switch.test.tsx

@@ -0,0 +1,165 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { createTestRenderer } from "@opentui/core/testing";
+import { createRoot } from "@opentui/react";
+import { act, useReducer } from "react";
+import {
+  AppContext,
+  PaneInstanceProvider,
+  appReducer,
+  createInitialState,
+  type AppAction,
+} from "../../state/app-context";
+import { cloneLayout, createDefaultConfig, type AppConfig } from "../../types/config";
+import type { PricePoint, TickerFinancials } from "../../types/financials";
+import type { TickerRecord } from "../../types/ticker";
+import { StockChart } from "./stock-chart";
+
+const TEST_PANE_ID = "ticker-detail:test";
+
+let testSetup: Awaited<ReturnType<typeof createTestRenderer>> | undefined;
+let root: ReturnType<typeof createRoot> | undefined;
+let harnessDispatch: ((action: AppAction) => void) | null = null;
+const actEnvironment = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean };
+
+function makeTicker(symbol: string): TickerRecord {
+  return {
+    metadata: {
+      ticker: symbol,
+      exchange: "NASDAQ",
+      currency: "USD",
+      name: symbol,
+      portfolios: [],
+      watchlists: [],
+      positions: [],
+      custom: {},
+      tags: [],
+    },
+  };
+}
+
+function makeHistory(length: number): PricePoint[] {
+  return Array.from({ length }, (_, index) => {
+    const trend = index < length / 2 ? index : length - index;
+    return {
+      date: new Date(Date.UTC(2024, 0, index + 1)),
+      open: 100 + trend,
+      high: 101 + trend,
+      low: 99 + trend,
+      close: 100.5 + trend,
+      volume: 1_000 + index * 25,
+    };
+  });
+}
+
+function makeChartConfig(symbol: string): AppConfig {
+  const config = createDefaultConfig("/tmp/gloomberb-test");
+  config.layout = {
+    dockRoot: { kind: "pane", instanceId: TEST_PANE_ID },
+    instances: [{
+      instanceId: TEST_PANE_ID,
+      paneId: "ticker-detail",
+      binding: { kind: "fixed", symbol },
+    }],
+    floating: [],
+  };
+  config.layouts = [{ name: "Default", layout: cloneLayout(config.layout) }];
+  return config;
+}
+
+function ChartHarness({
+  config,
+  ticker,
+  financials,
+}: {
+  config: AppConfig;
+  ticker: TickerRecord;
+  financials: TickerFinancials;
+}) {
+  const initialState = createInitialState(config);
+  initialState.focusedPaneId = TEST_PANE_ID;
+  initialState.tickers = new Map([[ticker.metadata.ticker, ticker]]);
+  initialState.financials = new Map([[ticker.metadata.ticker, financials]]);
+
+  const [state, dispatch] = useReducer(appReducer, initialState);
+  harnessDispatch = dispatch;
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <PaneInstanceProvider paneId={TEST_PANE_ID}>
+        <StockChart width={84} height={16} focused />
+      </PaneInstanceProvider>
+    </AppContext>
+  );
+}
+
+async function flushFrames(count = 2) {
+  for (let index = 0; index < count; index += 1) {
+    await act(async () => {
+      await testSetup!.renderOnce();
+    });
+  }
+}
+
+afterEach(() => {
+  harnessDispatch = null;
+  if (root) {
+    act(() => {
+      root!.unmount();
+    });
+    root = undefined;
+  }
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+  actEnvironment.IS_REACT_ACT_ENVIRONMENT = false;
+});
+
+describe("StockChart renderer switching", () => {
+  test("switches from braille to kitty without crashing text updates", async () => {
+    const symbol = "AAPL";
+    const config = makeChartConfig(symbol);
+    config.chartPreferences.renderer = "braille";
+
+    const ticker = makeTicker(symbol);
+    const financials: TickerFinancials = {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: makeHistory(48),
+    };
+
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    testSetup = await createTestRenderer({ width: 120, height: 32 });
+    (testSetup.renderer as { _capabilities: unknown })._capabilities = { kitty_graphics: true };
+    (testSetup.renderer as { _resolution: unknown })._resolution = { width: 1200, height: 960 };
+
+    root = createRoot(testSetup.renderer);
+    act(() => {
+      root!.render(
+        <ChartHarness
+          config={config}
+          ticker={ticker}
+          financials={financials}
+        />,
+      );
+    });
+
+    await flushFrames();
+    expect(testSetup.captureCharFrame()).toContain("AAPL");
+
+    const nextConfig: AppConfig = {
+      ...config,
+      chartPreferences: {
+        ...config.chartPreferences,
+        renderer: "kitty",
+      },
+    };
+
+    act(() => {
+      harnessDispatch!({ type: "SET_CONFIG", config: nextConfig });
+    });
+
+    await flushFrames();
+    expect(testSetup.captureCharFrame()).toContain("AAPL");
+  });
+});

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

@@ -0,0 +1,107 @@
+import { describe, expect, test } from "bun:test";
+import type { BoxRenderable, CliRenderer } from "@opentui/core";
+import {
+  getLocalPlotPointer,
+  projectCellCursorToLocalPixels,
+  resolveAdjacentSelectionCursorX,
+  resolveSelectionDisplayCursorState,
+} from "./stock-chart";
+import { getPointTerminalColumn } from "./chart-renderer";
+
+const renderer = {
+  resolution: { width: 1200, height: 800 },
+  terminalWidth: 120,
+  terminalHeight: 40,
+} as Pick<CliRenderer, "resolution" | "terminalWidth" | "terminalHeight">;
+
+const renderable = {
+  x: 10,
+  y: 5,
+  width: 40,
+  height: 12,
+} as BoxRenderable;
+
+describe("stock chart pointer helpers", () => {
+  test("returns both cell and pixel coordinates when pixel mouse is available", () => {
+    const pointer = getLocalPlotPointer({
+      x: 24,
+      y: 10,
+      pixelX: 245,
+      pixelY: 205,
+      modifiers: { shift: false, alt: false, ctrl: false },
+    }, renderable, renderer);
+
+    expect(pointer).not.toBeNull();
+    expect(pointer).toMatchObject({
+      hasPixelPrecision: true,
+      pixelX: 145,
+      pixelY: 105,
+    });
+    expect(pointer!.cellX).toBeCloseTo(14.17, 2);
+    expect(pointer!.cellY).toBeCloseTo(4.83, 2);
+  });
+
+  test("returns null pixel coordinates when only cell mouse data exists", () => {
+    const pointer = getLocalPlotPointer({
+      x: 24,
+      y: 10,
+      modifiers: { shift: false, alt: false, ctrl: false },
+    }, renderable, renderer);
+
+    expect(pointer).toEqual({
+      cellX: 14,
+      cellY: 5,
+      pixelX: null,
+      pixelY: null,
+      hasPixelPrecision: false,
+    });
+  });
+
+  test("can derive local pixels from cell coordinates for non-pixel fallbacks", () => {
+    const pixels = projectCellCursorToLocalPixels(14, 5, renderable, renderer);
+
+    expect(pixels).not.toBeNull();
+    expect(pixels!.pixelX).toBeCloseTo(143.23, 2);
+    expect(pixels!.pixelY).toBeCloseTo(108.64, 2);
+  });
+
+  test("keeps a visible display cursor for keyboard selection when only cursorX is explicit", () => {
+    const cursor = resolveSelectionDisplayCursorState(14, null, 14, 5, renderable, renderer);
+
+    expect(cursor).toMatchObject({
+      cellX: 14,
+      cellY: 5,
+    });
+    expect(cursor.pixelX).toBeCloseTo(143.23, 2);
+    expect(cursor.pixelY).toBeCloseTo(108.64, 2);
+  });
+
+  test("prefers the explicit selection cursorY over the derived fallback", () => {
+    const cursor = resolveSelectionDisplayCursorState(14, 3, 17, 5, renderable, renderer);
+
+    expect(cursor).toMatchObject({
+      cellX: 14,
+      cellY: 3,
+    });
+    expect(cursor.pixelY).toBeCloseTo(65.18, 2);
+  });
+
+  test("can snap keyboard display cursor x to the active chart point", () => {
+    const cursor = resolveSelectionDisplayCursorState(14, null, 17, 5, renderable, renderer);
+
+    expect(cursor).toMatchObject({
+      cellX: 17,
+      cellY: 5,
+    });
+  });
+
+  test("moves keyboard selection between snapped chart points", () => {
+    const width = 40;
+    const pointCount = 20;
+    const rightmost = getPointTerminalColumn(pointCount - 1, pointCount, width, "candles");
+    const previous = getPointTerminalColumn(pointCount - 2, pointCount, width, "candles");
+
+    expect(resolveAdjacentSelectionCursorX(width - 1, -1, pointCount, width, "candles")).toBe(previous);
+    expect(resolveAdjacentSelectionCursorX(previous, 1, pointCount, width, "candles")).toBe(rightmost);
+  });
+});