gloomberb 0.9.3 → 0.9.5

package/src/plugins/builtin/kelly-sizer/view.tsx

@@ -0,0 +1,375 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Box, Text, TextAttributes, type InputRenderable } from "../../../ui";
+import type { KeyEventLike } from "../../../react/input";
+import { colors } from "../../../theme/colors";
+import { NumberField } from "../../../components/ui";
+import { formatCurrency, formatNumber, formatPercentRaw } from "../../../utils/format";
+import { isPlainKey } from "../../../utils/keyboard";
+import type { SensitivityGrid } from "./model";
+import type { InlineField } from "./fields";
+export type { InlineField } from "./fields";
+
+export function truncateText(value: string, maxWidth: number): string {
+  if (maxWidth <= 0) return "";
+  if (value.length <= maxWidth) return value;
+  if (maxWidth <= 1) return value.slice(0, maxWidth);
+  return `${value.slice(0, maxWidth - 1)}…`;
+}
+
+export function formatPct(value: number, decimals = 1): string {
+  return `${formatNumber(value * 100, decimals)}%`;
+}
+
+export function formatSignedPct(value: number): string {
+  return formatPercentRaw(value * 100);
+}
+
+export function isPlainShortcut(event: KeyEventLike, ...names: string[]): boolean {
+  if (isPlainKey(event, ...names)) return true;
+  const key = event.key?.toLowerCase();
+  return !event.ctrl && !event.meta && !event.super && !event.alt && names.includes(key);
+}
+
+function parsePromptNumber(value: string): number | null {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function formatInputNumber(value: number, percent = false): string {
+  const scaled = percent ? value * 100 : value;
+  const decimals = percent
+    ? Math.abs(scaled) >= 10 ? 1 : 2
+    : Math.abs(scaled) >= 100 ? 0 : 2;
+  return formatNumber(scaled, decimals).replace(/,/g, "");
+}
+
+export function InlineFieldView({
+  field,
+  active,
+  width,
+  focused,
+  onFocus,
+}: {
+  field: InlineField;
+  active: boolean;
+  width: number;
+  focused: boolean;
+  onFocus: () => void;
+}) {
+  const labelWidth = Math.min(12, Math.max(7, Math.floor(width * 0.38)));
+  const suffixWidth = field.suffix ? field.suffix.length + 1 : field.percent ? 2 : 0;
+  const valueWidth = Math.max(5, width - labelWidth - suffixWidth - 2);
+  const inputNodeRef = useRef<InputRenderable | null>(null);
+  const displayValue = field.valueText ?? formatInputNumber(field.value ?? 0, field.percent);
+  const fieldRef = useRef(field);
+  const displayValueRef = useRef(displayValue);
+  const [text, setText] = useState(displayValue);
+  const latestTextRef = useRef(displayValue);
+  const committedTextRef = useRef(displayValue);
+  const wasActiveRef = useRef(active);
+  const dirtyRef = useRef(false);
+  fieldRef.current = field;
+  displayValueRef.current = displayValue;
+  const focusInput = useCallback(() => {
+    const input = inputNodeRef.current;
+    try {
+      input?.focus?.();
+      input?.setCursorOffset?.(0);
+    } catch {
+      // Renderer teardown can race queued focus attempts.
+    }
+  }, []);
+  const fg = active
+    ? colors.selectedText
+    : field.tone === "positive"
+      ? colors.positive
+      : field.tone === "negative"
+        ? colors.negative
+        : colors.text;
+
+  const commitText = useCallback((nextText: string): string | null => {
+    const currentField = fieldRef.current;
+    if (nextText.trim() === "") {
+      currentField.onClear?.();
+      return null;
+    }
+    const parsed = parsePromptNumber(nextText);
+    if (parsed == null) return null;
+    const nextValue = currentField.percent ? parsed / 100 : parsed;
+    currentField.onValue?.(nextValue);
+    return formatInputNumber(nextValue, currentField.percent);
+  }, []);
+
+  const commitEditText = useCallback((nextText: string, fallbackText = displayValue) => {
+    latestTextRef.current = nextText;
+    const committedText = commitText(nextText);
+    committedTextRef.current = committedText ?? fallbackText;
+    setText(committedTextRef.current);
+    dirtyRef.current = false;
+  }, [commitText, displayValue]);
+
+  const getLiveInputText = useCallback(() => {
+    const input = inputNodeRef.current;
+    if (!input) return latestTextRef.current;
+    try {
+      return input.editBuffer.getText();
+    } catch {
+      return latestTextRef.current;
+    }
+  }, []);
+
+  const commitLiveInputText = useCallback(() => {
+    const liveText = getLiveInputText();
+    const nextText = typeof liveText === "string" ? liveText : latestTextRef.current;
+    if (!dirtyRef.current && (nextText.trim() === "" || nextText === committedTextRef.current)) return;
+    latestTextRef.current = nextText;
+    const committedText = commitText(nextText);
+    committedTextRef.current = committedText ?? displayValueRef.current;
+    dirtyRef.current = false;
+  }, [commitText, getLiveInputText]);
+
+  useLayoutEffect(() => {
+    const wasActive = wasActiveRef.current;
+    wasActiveRef.current = active;
+    if (!wasActive && active) {
+      dirtyRef.current = false;
+      latestTextRef.current = "";
+      committedTextRef.current = displayValue;
+      setText("");
+      return;
+    }
+    if (wasActive && !active) {
+      const nextText = dirtyRef.current ? latestTextRef.current : text;
+      if (dirtyRef.current) {
+        commitEditText(nextText);
+      } else {
+        committedTextRef.current = displayValue;
+        setText(displayValue);
+      }
+      return;
+    }
+    if (!active) {
+      latestTextRef.current = displayValue;
+      committedTextRef.current = displayValue;
+      setText(displayValue);
+    }
+  }, [active, commitEditText, displayValue, text]);
+
+  useEffect(() => {
+    if (!active) return;
+    let animationFrame: number | null = null;
+    const timeouts: ReturnType<typeof setTimeout>[] = [];
+    focusInput();
+    queueMicrotask(focusInput);
+    animationFrame = globalThis.requestAnimationFrame?.(focusInput) ?? null;
+    timeouts.push(setTimeout(focusInput, 0), setTimeout(focusInput, 32));
+    return () => {
+      if (animationFrame !== null) globalThis.cancelAnimationFrame?.(animationFrame);
+      for (const timeout of timeouts) clearTimeout(timeout);
+    };
+  }, [active, focusInput]);
+
+  useLayoutEffect(() => {
+    if (!active) return;
+    return () => {
+      commitLiveInputText();
+    };
+  }, [active, commitLiveInputText]);
+
+  const handleSubmit = (nextText: string) => {
+    commitEditText(nextText, nextText);
+  };
+
+  const handleBlur = (nextText: string) => {
+    if (!dirtyRef.current && (nextText.trim() === "" || nextText === committedTextRef.current)) return;
+    commitEditText(nextText, nextText);
+  };
+
+  if (field.onPress && !field.onValue) {
+    return (
+      <Box
+        width={width}
+        height={1}
+        flexDirection="row"
+        backgroundColor={active ? colors.selected : colors.panel}
+        data-gloom-field-id={field.id}
+        onMouseDown={() => {
+          onFocus();
+          field.onPress?.();
+        }}
+      >
+        <Text fg={active ? colors.selectedText : colors.textDim}>
+          {truncateText(field.label, labelWidth).padEnd(labelWidth)}
+        </Text>
+        <Text fg={fg} attributes={active ? TextAttributes.BOLD : 0}>
+          {truncateText(field.valueText ?? "", Math.max(1, width - labelWidth))}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      width={width}
+      height={1}
+      flexDirection="row"
+      backgroundColor={active ? colors.selected : colors.panel}
+      data-gloom-field-id={field.id}
+      onMouseDown={() => {
+        onFocus();
+        focusInput();
+      }}
+    >
+      <Text fg={active ? colors.selectedText : colors.textDim}>
+        {truncateText(field.label, labelWidth).padEnd(labelWidth)}
+      </Text>
+      {active ? (
+        <NumberField
+          inputRef={inputNodeRef}
+          focused={active}
+          value={text}
+          placeholder={displayValue}
+          allowNegative={field.allowNegative}
+          allowDecimal
+          width={valueWidth}
+          variant="plain"
+          backgroundColor={colors.selected}
+          textColor={fg}
+          placeholderColor={colors.textMuted}
+          onMouseDown={onFocus}
+          onChange={(nextText) => {
+            dirtyRef.current = true;
+            latestTextRef.current = nextText;
+            setText(nextText);
+          }}
+          onSubmit={handleSubmit}
+          onBlur={handleBlur}
+        />
+      ) : (
+        <Box width={valueWidth} height={1} onMouseDown={() => {
+          onFocus();
+          focusInput();
+        }}>
+          <Text fg={fg}>{truncateText(displayValue, valueWidth)}</Text>
+        </Box>
+      )}
+      {suffixWidth > 0 && (
+        <Text fg={active ? colors.selectedText : colors.textDim}>
+          {field.suffix ?? (field.percent ? "%" : "")}
+        </Text>
+      )}
+    </Box>
+  );
+}
+
+export function MetricLine({
+  label,
+  value,
+  detail,
+  color,
+  width,
+}: {
+  label: string;
+  value: string;
+  detail?: string;
+  color?: string;
+  width: number;
+}) {
+  const labelWidth = Math.min(12, Math.max(8, Math.floor(width * 0.32)));
+  const valueWidth = Math.min(Math.max(8, width - labelWidth), Math.max(8, Math.floor(width * 0.42)));
+  const detailWidth = Math.max(0, width - labelWidth - valueWidth);
+  return (
+    <Box height={1} width={width} flexDirection="row" overflow="hidden">
+      <Box width={labelWidth} flexShrink={0}>
+        <Text fg={colors.textDim}>{label}</Text>
+      </Box>
+      <Box width={valueWidth} flexShrink={0}>
+        <Text fg={color ?? colors.text} attributes={TextAttributes.BOLD}>
+          {truncateText(value, valueWidth)}
+        </Text>
+      </Box>
+      {detail && detailWidth > 0 && (
+        <Text fg={colors.textDim}>{truncateText(detail, detailWidth)}</Text>
+      )}
+    </Box>
+  );
+}
+
+export function SensitivityGridView({
+  width,
+  grid,
+}: {
+  width: number;
+  grid: SensitivityGrid;
+}) {
+  const labelWidth = 9;
+  const cellWidth = Math.max(8, Math.floor((width - labelWidth) / Math.max(1, grid.columns.length)));
+  return (
+    <Box flexDirection="column" paddingX={1}>
+      <Box height={1} flexDirection="row">
+        <Box width={labelWidth}>
+          <Text fg={colors.textDim}>{truncateText(grid.rowLabel, labelWidth)}</Text>
+        </Box>
+        {grid.columns.map((column) => (
+          <Box key={column} width={cellWidth}>
+            <Text fg={colors.textDim}>{truncateText(column, cellWidth - 1).padStart(cellWidth - 1)}</Text>
+          </Box>
+        ))}
+      </Box>
+      {grid.rows.map((row, rowIndex) => (
+        <Box key={row} height={1} flexDirection="row">
+          <Box width={labelWidth}>
+            <Text fg={colors.textDim}>{truncateText(row, labelWidth)}</Text>
+          </Box>
+          {grid.cells[rowIndex]?.map((cell, cellIndex) => (
+            <Box key={`${row}:${cellIndex}`} width={cellWidth}>
+              <Text fg={colors.text}>{truncateText(cell.text, cellWidth - 1).padStart(cellWidth - 1)}</Text>
+            </Box>
+          ))}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export function buildKellyCurveXAxisLabels(maxFraction: number): string[] {
+  if (!Number.isFinite(maxFraction) || maxFraction <= 0) return [];
+  return [0, 0.25, 0.5, 0.75, 1].map((ratio) => formatPct(maxFraction * ratio, 0));
+}
+
+export function KellyCurveDecisionView({
+  width,
+  currentFraction,
+  targetFraction,
+  fullKellyFraction,
+  currentGrowth,
+  targetGrowth,
+  addTrimValue,
+  currency,
+  clipReasons,
+}: {
+  width: number;
+  currentFraction: number;
+  targetFraction: number;
+  fullKellyFraction: number;
+  currentGrowth: number;
+  targetGrowth: number;
+  addTrimValue: number;
+  currency: string;
+  clipReasons: string[];
+}) {
+  const moveLabel = addTrimValue >= 0 ? "add" : "trim";
+  const capLabel = clipReasons.length > 0 ? `cap ${clipReasons.join(", ")}` : "cap none";
+  const text = [
+    `${formatPct(currentFraction, 1)} -> ${formatPct(targetFraction, 1)}`,
+    `${moveLabel} ${formatCurrency(Math.abs(addTrimValue), currency)}`,
+    `growth ${formatSignedPct(currentGrowth)} -> ${formatSignedPct(targetGrowth)}`,
+    `full ${formatPct(fullKellyFraction, 0)}`,
+    capLabel,
+  ].join("  ");
+  return (
+    <Box height={1} paddingX={1}>
+      <Text fg={colors.textDim}>{truncateText(text, Math.max(1, width - 2))}</Text>
+    </Box>
+  );
+}

package/src/plugins/builtin/layout-manager/index.tsx

@@ -105,7 +105,11 @@ export const layoutManagerPlugin: GloomPlugin = {
       execute: async () => {
         if (!getStateRef) return;
         const { layout, termWidth, termHeight } = getStateRef();
-        persistLayout(ctx, gridlockAllPanes(layout, { x: 0, y: 0, width: termWidth, height: termHeight }));
+        persistLayout(ctx, gridlockAllPanes(
+          layout,
+          { x: 0, y: 0, width: termWidth, height: termHeight },
+          ctx.getPaneDef,
+        ));
         notifyGridlockComplete(ctx.notify, () => {
           dispatchRef?.({ type: "UNDO_LAYOUT" });
         });

package/src/plugins/builtin/options/table.ts

@@ -130,9 +130,9 @@ function optionMoneynessBackground(
   row: OptionTableRow,
   contract: OptionContract | undefined,
   columnId: OptionColumnId,
-  rowState: { selected: boolean; hovered: boolean },
+  rowState: { selected: boolean },
 ): string | undefined {
-  if (rowState.selected || rowState.hovered) return undefined;
+  if (rowState.selected) return undefined;
   const inTheMoney = inferColumnMoneyness(row, contract, columnId);
   const sideColor = columnId.startsWith("call") ? colors.positive : colors.negative;
   return inTheMoney
@@ -180,13 +180,13 @@ export function renderOptionCell(
   row: OptionTableRow,
   column: OptionColumn,
   _index: number,
-  rowState: { selected: boolean; hovered: boolean },
+  rowState: { selected: boolean },
 ): DataTableCell {
   const selectedColor = rowState.selected ? colors.selectedText : undefined;
-  const rowSurface = rowState.selected ? colors.selected : rowState.hovered ? hoverBg() : colors.bg;
+  const rowSurface = rowState.selected ? colors.selected : colors.bg;
 
   if (column.id === "strike") {
-    const backgroundColor = rowState.selected || rowState.hovered
+    const backgroundColor = rowState.selected
       ? undefined
       : blendHex(colors.bg, row.isPositionStrike ? colors.borderFocused : colors.header, row.isPositionStrike ? 0.18 : 0.1);
     const surface = backgroundColor ?? rowSurface;

package/src/plugins/builtin/options/view.test.tsx

@@ -1,5 +1,6 @@
 import { afterEach, expect, test } from "bun:test";
 import { act } from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
 import { testRender } from "../../../renderers/opentui/test-utils";
 import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../../market-data/coordinator";
 import { AppContext, PaneInstanceProvider, createInitialState } from "../../../state/app/context";
@@ -7,6 +8,7 @@ import { createTestDataProvider } from "../../../test-support/data-provider";
 import { cloneLayout, createDefaultConfig } from "../../../types/config";
 import type { OptionContract, OptionsChain, TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
+import { formatExpDate } from "../../../utils/options";
 import { OptionsView } from "./view";
 
 const TEST_PANE_ID = "ticker-detail:options-test";
@@ -49,10 +51,14 @@ function makeContract(strike: number, side: "C" | "P", atmStrike = 101): OptionC
   };
 }
 
-function makeChain(strikes = [100, 101], atmStrike = 101): OptionsChain {
+function makeChain(
+  strikes = [100, 101],
+  atmStrike = 101,
+  expirationDates = [1_782_345_600],
+): OptionsChain {
   return {
     underlyingSymbol: "AAPL",
-    expirationDates: [1_782_345_600],
+    expirationDates,
     calls: strikes.map((strike) => makeContract(strike, "C", atmStrike)),
     puts: strikes.map((strike) => makeContract(strike, "P", atmStrike)),
   };
@@ -74,7 +80,17 @@ function makeFinancials(price: number): TickerFinancials {
   };
 }
 
-function OptionsHarness({ ticker, quotePrice }: { ticker: TickerRecord; quotePrice?: number }) {
+function OptionsHarness({
+  ticker,
+  quotePrice,
+  width = 122,
+  onCapture = () => {},
+}: {
+  ticker: TickerRecord;
+  quotePrice?: number;
+  width?: number;
+  onCapture?: (capturing: boolean) => void;
+}) {
   const config = createDefaultConfig("/tmp/gloomberb-options-test");
   config.layout = {
     dockRoot: { kind: "pane", instanceId: TEST_PANE_ID },
@@ -98,7 +114,7 @@ function OptionsHarness({ ticker, quotePrice }: { ticker: TickerRecord; quotePri
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
       <PaneInstanceProvider paneId={TEST_PANE_ID}>
-        <OptionsView width={122} height={14} focused onCapture={() => {}} />
+        <OptionsView width={width} height={14} focused onCapture={onCapture} />
       </PaneInstanceProvider>
     </AppContext>
   );
@@ -183,3 +199,124 @@ test("defaults the table around the nearest strike to the current quote", async
   expect(frame).toContain("120");
   expect(frame).not.toContain(" 50 ");
 });
+
+test("lets the expiration tab row use the full available width", async () => {
+  const expirationDates = Array.from({ length: 9 }, (_, index) => (
+    Math.floor(Date.UTC(2026, index, 20) / 1000)
+  ));
+  const provider = createTestDataProvider({
+    getOptionsChain: async () => makeChain([100, 101], 101, expirationDates),
+  });
+  setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+
+  await act(async () => {
+    testSetup = await testRender(
+      <OptionsHarness ticker={makeTicker("AAPL")} width={122} />,
+      {
+        width: 124,
+        height: 16,
+      },
+    );
+  });
+
+  await renderSettled();
+
+  const frame = testSetup!.captureCharFrame();
+  expect(frame).toContain(formatExpDate(expirationDates.at(-1)!));
+});
+
+test("keeps expiration tabs independently scrollable from a narrow strike table", async () => {
+  const expirationDates = Array.from({ length: 12 }, (_, index) => (
+    Math.floor(Date.UTC(2026, index, 20) / 1000)
+  ));
+  const requestedExpirations: Array<number | undefined> = [];
+  const provider = createTestDataProvider({
+    getOptionsChain: async (_ticker, _exchange, expirationDate) => {
+      requestedExpirations.push(expirationDate);
+      return makeChain([100, 101], 101, expirationDates);
+    },
+  });
+  setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+  const captures: boolean[] = [];
+
+  await act(async () => {
+    testSetup = await testRender(
+      <OptionsHarness ticker={makeTicker("AAPL")} width={54} onCapture={(capturing) => captures.push(capturing)} />,
+      {
+        width: 56,
+        height: 16,
+      },
+    );
+  });
+
+  await renderSettled();
+  const bodyScroll = testSetup!.renderer.root.findDescendantById("options-table-body-scroll") as ScrollBoxRenderable | undefined;
+  const expirationTabsScroll = testSetup!.renderer.root.findDescendantById("options-expiration-tabs-scroll") as ScrollBoxRenderable | undefined;
+  expect(bodyScroll?.horizontalScrollBar.visible).toBe(true);
+  expect(expirationTabsScroll?.horizontalScrollBar.visible).toBe(false);
+  expect(testSetup!.captureCharFrame()).not.toContain(formatExpDate(expirationDates.at(-1)!));
+
+  await act(async () => {
+    testSetup!.mockInput.pressEnter();
+    await testSetup!.renderOnce();
+  });
+  await renderSettled();
+  expect(captures).toContain(true);
+  expect(captures.at(-1)).toBe(true);
+
+  for (let index = 1; index < expirationDates.length; index += 1) {
+    await act(async () => {
+      testSetup!.mockInput.pressKey("l");
+      await testSetup!.renderOnce();
+    });
+    await renderSettled();
+  }
+
+  expect(bodyScroll?.horizontalScrollBar.visible).toBe(true);
+  expect(bodyScroll?.scrollLeft ?? 0).toBe(0);
+  expect(expirationTabsScroll?.scrollLeft ?? 0).toBeGreaterThan(0);
+  expect(requestedExpirations).toContain(expirationDates.at(-1));
+  expect(testSetup!.captureCharFrame()).toContain(formatExpDate(expirationDates.at(-1)!));
+});
+
+test("clicking the option table focuses expiration tabs for arrow navigation", async () => {
+  const expirationDates = Array.from({ length: 3 }, (_, index) => (
+    Math.floor(Date.UTC(2026, index, 20) / 1000)
+  ));
+  const requestedExpirations: Array<number | undefined> = [];
+  const provider = createTestDataProvider({
+    getOptionsChain: async (_ticker, _exchange, expirationDate) => {
+      requestedExpirations.push(expirationDate);
+      return makeChain([100, 101], 101, expirationDates);
+    },
+  });
+  setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+  const captures: boolean[] = [];
+
+  await act(async () => {
+    testSetup = await testRender(
+      <OptionsHarness ticker={makeTicker("AAPL")} width={80} onCapture={(capturing) => captures.push(capturing)} />,
+      {
+        width: 82,
+        height: 16,
+      },
+    );
+  });
+
+  await renderSettled();
+
+  await act(async () => {
+    await testSetup!.mockMouse.click(8, 4);
+    await testSetup!.renderOnce();
+  });
+  await renderSettled();
+  expect(captures.at(-1)).toBe(true);
+
+  await act(async () => {
+    testSetup!.mockInput.pressArrow("right");
+    await testSetup!.renderOnce();
+  });
+  await renderSettled();
+
+  expect(requestedExpirations).toContain(expirationDates[1]);
+});