gloomberb 0.9.0 → 0.9.2

package/src/components/layout/window-controls.tsx

@@ -0,0 +1,99 @@
+import { Box, useRendererHost } from "../../ui";
+import { useCallback } from "react";
+import { TITLEBAR_OVERLAY_HEIGHT_PX } from "./titlebar-overlay";
+
+const WINDOWS_CONTROL_SIZE_PX = TITLEBAR_OVERLAY_HEIGHT_PX;
+export const WINDOWS_CONTROL_GROUP_WIDTH_PX = WINDOWS_CONTROL_SIZE_PX * 3;
+
+type WindowControlAction = "minimize" | "toggle-maximize" | "close";
+
+const WINDOWS_CONTROLS: Array<{
+  action: WindowControlAction;
+  label: string;
+}> = [
+  { action: "minimize", label: "Minimize" },
+  { action: "toggle-maximize", label: "Maximize" },
+  { action: "close", label: "Close" },
+];
+
+function stopMouse(event: { stopPropagation?: () => void; preventDefault?: () => void }) {
+  event.stopPropagation?.();
+  event.preventDefault?.();
+}
+
+function WindowControlIcon({ action }: { action: WindowControlAction }) {
+  if (action === "minimize") {
+    return (
+      <svg viewBox="0 0 12 12" width="10" height="10" fill="none" aria-hidden="true">
+        <path d="M2.5 6.5H9.5" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" />
+      </svg>
+    );
+  }
+
+  if (action === "toggle-maximize") {
+    return (
+      <svg viewBox="0 0 12 12" width="10" height="10" fill="none" aria-hidden="true">
+        <rect x="3" y="3" width="6" height="6" stroke="currentColor" strokeWidth="1.25" />
+      </svg>
+    );
+  }
+
+  return (
+    <svg viewBox="0 0 12 12" width="10" height="10" fill="none" aria-hidden="true">
+      <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+interface WindowControlsProps {
+  windowKind?: "main" | "detached";
+}
+
+export function WindowControls({ windowKind = "main" }: WindowControlsProps) {
+  const rendererHost = useRendererHost();
+
+  const controlWindow = useCallback((action: WindowControlAction, event: { stopPropagation?: () => void; preventDefault?: () => void }) => {
+    stopMouse(event);
+    void rendererHost.controlWindow?.(action);
+  }, [rendererHost]);
+
+  return (
+    <Box
+      flexDirection="row"
+      alignItems="stretch"
+      flexShrink={0}
+      width={`${WINDOWS_CONTROL_GROUP_WIDTH_PX}px`}
+      data-gloom-role="window-controls"
+      data-window-kind={windowKind}
+      aria-hidden={false}
+      style={{
+        position: "fixed",
+        top: 0,
+        right: 0,
+        height: `${WINDOWS_CONTROL_SIZE_PX}px`,
+        zIndex: 1000,
+        backgroundColor: "inherit",
+      }}
+    >
+      {WINDOWS_CONTROLS.map((control) => (
+        <Box
+          key={control.action}
+          alignItems="center"
+          justifyContent="center"
+          flexShrink={0}
+          width={`${WINDOWS_CONTROL_SIZE_PX}px`}
+          height="100%"
+          data-gloom-role="window-control"
+          data-window-control-action={control.action}
+          data-gloom-interactive="true"
+          role="button"
+          aria-label={control.label}
+          title={control.label}
+          onMouseDown={(event: { stopPropagation?: () => void; preventDefault?: () => void }) => controlWindow(control.action, event)}
+        >
+          <WindowControlIcon action={control.action} />
+        </Box>
+      ))}
+    </Box>
+  );
+}

package/src/components/price-performance.tsx

@@ -0,0 +1,175 @@
+import { Box, ScrollBox, Text } from "../ui";
+import { blendHex, colors, priceColor } from "../theme/colors";
+import { displayWidth, formatPercent, padTo } from "../utils/format";
+import type { PriceReturnField } from "../market-data/performance";
+
+const STRIP_COLUMN_GAP = 1;
+const RETURN_CELL_MIN_WIDTH = 7;
+const SYMBOL_COLUMN_MIN_WIDTH = 6;
+const SYMBOL_COLUMN_MAX_WIDTH = 12;
+
+export interface PriceReturnTableRow {
+  symbol: string;
+  color: string;
+  fields: PriceReturnField[];
+  selected: boolean;
+}
+
+function formatReturnValue(value: number | null): string {
+  return value == null ? "-" : formatPercent(value);
+}
+
+function returnValueColor(value: number | null): string {
+  return value == null ? colors.textMuted : priceColor(value);
+}
+
+function hasAnyReturn(fields: readonly PriceReturnField[]): boolean {
+  return fields.some((field) => field.value != null);
+}
+
+function chunkFields<T>(fields: readonly T[], size: number): T[][] {
+  const rows: T[][] = [];
+  for (let index = 0; index < fields.length; index += size) {
+    rows.push(fields.slice(index, index + size));
+  }
+  return rows;
+}
+
+export function PriceReturnStrip({
+  fields,
+  width,
+}: {
+  fields: PriceReturnField[];
+  width: number;
+}) {
+  if (!hasAnyReturn(fields)) return null;
+
+  const columnCount = width >= 72
+    ? Math.min(6, fields.length)
+    : width >= 54
+      ? Math.min(4, fields.length)
+      : width >= 36
+        ? Math.min(3, fields.length)
+        : Math.min(2, fields.length);
+  const availableWidth = Math.max(width - STRIP_COLUMN_GAP * Math.max(columnCount - 1, 0), columnCount);
+  const cellWidth = Math.max(RETURN_CELL_MIN_WIDTH, Math.floor(availableWidth / columnCount));
+  const rows = chunkFields(fields, columnCount);
+
+  return (
+    <Box flexDirection="column" width={width}>
+      {rows.map((row, rowIndex) => (
+        <Box key={rowIndex} flexDirection="row" height={1}>
+          {row.map((field, columnIndex) => {
+            const labelWidth = Math.min(3, Math.max(2, displayWidth(field.label)));
+            const valueWidth = Math.max(1, cellWidth - labelWidth);
+            return (
+              <Box key={field.id} flexDirection="row">
+                {columnIndex > 0 && <Box width={STRIP_COLUMN_GAP} />}
+                <Box flexDirection="row" width={cellWidth}>
+                  <Text fg={colors.textDim}>{padTo(field.label, labelWidth)}</Text>
+                  <Box width={valueWidth} overflow="hidden">
+                    <Text fg={returnValueColor(field.value)}>{padTo(formatReturnValue(field.value), valueWidth, "right")}</Text>
+                  </Box>
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+function getFieldById(fields: readonly PriceReturnField[], id: string): PriceReturnField | null {
+  return fields.find((field) => field.id === id) ?? null;
+}
+
+function chooseComparisonFieldIds(width: number, availableIds: readonly string[]): string[] {
+  const preferred = width >= 86
+    ? ["RNG", "1M", "3M", "6M", "1Y", "3Y", "5Y"]
+    : width >= 72
+      ? ["RNG", "1M", "3M", "1Y", "3Y", "5Y"]
+      : width >= 58
+        ? ["RNG", "1M", "1Y", "3Y", "5Y"]
+        : width >= 44
+          ? ["RNG", "1M", "1Y", "5Y"]
+          : ["1Y", "5Y"];
+  const available = new Set(availableIds);
+  return preferred.filter((id) => available.has(id));
+}
+
+export function PriceReturnTable({
+  height,
+  onOpenSymbol,
+  onSelectSymbol,
+  rows,
+  width,
+}: {
+  height: number;
+  onOpenSymbol: (symbol: string) => void;
+  onSelectSymbol: (symbol: string) => void;
+  rows: PriceReturnTableRow[];
+  width: number;
+}) {
+  if (height <= 0 || rows.length === 0) return null;
+
+  const availableIds = rows[0]?.fields.map((field) => field.id) ?? [];
+  const fieldIds = chooseComparisonFieldIds(width, availableIds);
+  if (fieldIds.length === 0) return null;
+
+  const valueWidth = Math.max(
+    RETURN_CELL_MIN_WIDTH,
+    Math.floor((width - SYMBOL_COLUMN_MIN_WIDTH - fieldIds.length) / Math.max(fieldIds.length, 1)),
+  );
+  const symbolWidth = Math.min(
+    SYMBOL_COLUMN_MAX_WIDTH,
+    Math.max(SYMBOL_COLUMN_MIN_WIDTH, width - fieldIds.length * (valueWidth + 1)),
+  );
+  const fieldsById = rows[0]?.fields ?? [];
+
+  return (
+    <ScrollBox height={height} scrollY>
+      <Box flexDirection="column" width={width}>
+        <Box flexDirection="row" height={1}>
+          <Text fg={colors.textDim}>{padTo("Sym", symbolWidth)}</Text>
+          {fieldIds.map((fieldId) => {
+            const field = getFieldById(fieldsById, fieldId);
+            return (
+              <Box key={fieldId} flexDirection="row">
+                <Text fg={colors.textDim}>{" "}</Text>
+                <Text fg={colors.textDim}>{padTo(field?.label ?? fieldId, valueWidth, "right")}</Text>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {rows.map((row) => (
+          <Box
+            key={row.symbol}
+            flexDirection="row"
+            height={1}
+            width={width}
+            backgroundColor={row.selected ? blendHex(colors.panel, colors.borderFocused, 0.18) : colors.panel}
+            onMouseMove={() => onSelectSymbol(row.symbol)}
+            onMouseDown={() => {
+              onSelectSymbol(row.symbol);
+              onOpenSymbol(row.symbol);
+            }}
+          >
+            <Text fg={row.color}>{padTo(`${row.selected ? ">" : " "} ${row.symbol}`, symbolWidth)}</Text>
+            {fieldIds.map((fieldId) => {
+              const field = getFieldById(row.fields, fieldId);
+              const value = field?.value ?? null;
+              return (
+                <Box key={fieldId} flexDirection="row">
+                  <Text fg={colors.textDim}>{" "}</Text>
+                  <Text fg={returnValueColor(value)}>{padTo(formatReturnValue(value), valueWidth, "right")}</Text>
+                </Box>
+              );
+            })}
+          </Box>
+        ))}
+      </Box>
+    </ScrollBox>
+  );
+}

package/src/market-data/performance.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, test } from "bun:test";
+import {
+  appendQuoteToPriceReturnHistory,
+  buildPriceReturnFields,
+  computePriceReturnForHorizon,
+  PRICE_RETURN_HORIZONS,
+} from "./performance";
+import type { PricePoint } from "../types/financials";
+
+function point(date: string, close: number): PricePoint {
+  return { date: new Date(`${date}T00:00:00Z`), close };
+}
+
+describe("price performance", () => {
+  test("computes horizon return from the closest prior baseline", () => {
+    const history = [
+      point("2025-12-31", 100),
+      point("2026-01-02", 102),
+      point("2026-01-31", 110),
+      point("2026-02-01", 120),
+    ];
+
+    const oneMonth = PRICE_RETURN_HORIZONS.find((horizon) => horizon.id === "1M")!;
+
+    expect(computePriceReturnForHorizon(history, oneMonth)).toBeCloseTo(20 / 100);
+  });
+
+  test("leaves fixed horizons empty when history does not reach the baseline date", () => {
+    const history = [
+      point("2026-01-15", 100),
+      point("2026-02-01", 110),
+    ];
+
+    const fields = buildPriceReturnFields(history);
+
+    expect(fields.find((field) => field.id === "1M")?.value).toBeNull();
+    expect(fields.find((field) => field.id === "1Y")?.value).toBeNull();
+  });
+
+  test("can include a newer live quote as the latest return point", () => {
+    const history = [
+      point("2025-01-31", 100),
+      point("2026-01-31", 120),
+    ];
+    const withQuote = appendQuoteToPriceReturnHistory(history, {
+      price: 150,
+      lastUpdated: Date.parse("2026-02-01T15:30:00Z"),
+    });
+    const oneYear = PRICE_RETURN_HORIZONS.find((horizon) => horizon.id === "1Y")!;
+
+    expect(withQuote).toHaveLength(3);
+    expect(computePriceReturnForHorizon(withQuote, oneYear)).toBeCloseTo(50 / 100);
+  });
+});

package/src/market-data/performance.ts

@@ -0,0 +1,109 @@
+import type { PricePoint, Quote } from "../types/financials";
+
+export interface PriceReturnHorizon {
+  id: string;
+  label: string;
+  amount: number;
+  unit: "month" | "year";
+}
+
+export interface PriceReturnField {
+  id: string;
+  label: string;
+  value: number | null;
+}
+
+export const PRICE_RETURN_HORIZONS: PriceReturnHorizon[] = [
+  { id: "1M", label: "1M", amount: 1, unit: "month" },
+  { id: "3M", label: "3M", amount: 3, unit: "month" },
+  { id: "6M", label: "6M", amount: 6, unit: "month" },
+  { id: "1Y", label: "1Y", amount: 1, unit: "year" },
+  { id: "3Y", label: "3Y", amount: 3, unit: "year" },
+  { id: "5Y", label: "5Y", amount: 5, unit: "year" },
+];
+
+function coercePointDate(value: Date | string | number): Date | null {
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isFinite(date.getTime()) ? date : null;
+}
+
+export function normalizePriceReturnHistory(points: readonly PricePoint[]): PricePoint[] {
+  const byTimestamp = new Map<number, PricePoint>();
+  for (const point of points) {
+    const date = coercePointDate(point.date as Date | string | number);
+    if (!date || !Number.isFinite(point.close)) continue;
+    byTimestamp.set(date.getTime(), { ...point, date });
+  }
+  return [...byTimestamp.entries()]
+    .sort((left, right) => left[0] - right[0])
+    .map(([, point]) => point);
+}
+
+export function appendQuoteToPriceReturnHistory(
+  points: readonly PricePoint[],
+  quote: Pick<Quote, "price" | "lastUpdated"> | null | undefined,
+): PricePoint[] {
+  const history = normalizePriceReturnHistory(points);
+  if (!quote || !Number.isFinite(quote.price) || !Number.isFinite(quote.lastUpdated)) {
+    return history;
+  }
+
+  const quoteDate = new Date(quote.lastUpdated);
+  if (!Number.isFinite(quoteDate.getTime())) return history;
+
+  const latestHistoryTime = history.at(-1)?.date.getTime() ?? Number.NEGATIVE_INFINITY;
+  if (quoteDate.getTime() <= latestHistoryTime) return history;
+
+  return [
+    ...history,
+    {
+      date: quoteDate,
+      close: quote.price,
+    },
+  ];
+}
+
+function subtractHorizon(date: Date, horizon: PriceReturnHorizon): Date {
+  const target = new Date(date);
+  if (horizon.unit === "month") {
+    target.setMonth(target.getMonth() - horizon.amount);
+  } else {
+    target.setFullYear(target.getFullYear() - horizon.amount);
+  }
+  return target;
+}
+
+export function computePriceReturnForHorizon(
+  points: readonly PricePoint[],
+  horizon: PriceReturnHorizon,
+): number | null {
+  const history = normalizePriceReturnHistory(points);
+  if (history.length < 2) return null;
+
+  const latest = history.at(-1)!;
+  const cutoff = subtractHorizon(latest.date, horizon);
+  let baseline: PricePoint | null = null;
+
+  for (const point of history) {
+    if (point.date.getTime() <= cutoff.getTime()) {
+      baseline = point;
+    } else {
+      break;
+    }
+  }
+
+  if (!baseline || !Number.isFinite(baseline.close) || baseline.close === 0) return null;
+  if (!Number.isFinite(latest.close)) return null;
+  return (latest.close - baseline.close) / baseline.close;
+}
+
+export function buildPriceReturnFields(
+  points: readonly PricePoint[],
+  horizons: readonly PriceReturnHorizon[] = PRICE_RETURN_HORIZONS,
+): PriceReturnField[] {
+  return horizons.map((horizon) => ({
+    id: horizon.id,
+    label: horizon.label,
+    value: computePriceReturnForHorizon(points, horizon),
+  }));
+}

package/src/plugins/builtin/comparison-chart/index.test.tsx

@@ -68,6 +68,28 @@ function makeFinancials(symbol: string, currency: string, closes: number[]): Tic
   };
 }
 
+function makeDatedFinancials(symbol: string, currency: string, closes: Array<[string, number]>): TickerFinancials {
+  const latest = closes.at(-1);
+  const latestClose = latest?.[1] ?? 0;
+  const latestDate = latest ? Date.parse(`${latest[0]}T00:00:00Z`) : Date.now();
+  return {
+    annualStatements: [],
+    quarterlyStatements: [],
+    quote: {
+      symbol,
+      price: latestClose,
+      currency,
+      change: latestClose - (closes[0]?.[1] ?? latestClose),
+      changePercent: closes[0]?.[1] ? ((latestClose - closes[0]![1]) / closes[0]![1]) * 100 : 0,
+      lastUpdated: latestDate,
+    },
+    priceHistory: closes.map(([date, close]) => ({
+      date: new Date(`${date}T00:00:00Z`),
+      close,
+    })),
+  };
+}
+
 function createProvider(historyBySymbol: Record<string, number[]>, currencyBySymbol: Record<string, string>): DataProvider {
   return {
     id: "test-provider",
@@ -101,6 +123,22 @@ function createProvider(historyBySymbol: Record<string, number[]>, currencyBySym
   };
 }
 
+function createDatedProvider(financialsBySymbol: Record<string, TickerFinancials>): DataProvider {
+  const provider = createProvider({}, {});
+  provider.getTickerFinancials = async (symbol) => financialsBySymbol[symbol] ?? makeDatedFinancials(symbol, "USD", []);
+  provider.getQuote = async (symbol) => financialsBySymbol[symbol]?.quote ?? {
+    symbol,
+    price: 0,
+    currency: "USD",
+    change: 0,
+    changePercent: 0,
+    lastUpdated: Date.now(),
+  };
+  provider.getPriceHistory = async (symbol) => financialsBySymbol[symbol]?.priceHistory ?? [];
+  provider.getPriceHistoryForResolution = async (symbol) => financialsBySymbol[symbol]?.priceHistory ?? [];
+  return provider;
+}
+
 function createRegistrySpy(spy: { selected: string[]; focused: string[] }): PluginRegistry {
   return {
     selectTicker: (symbol: string) => { spy.selected.push(symbol); },
@@ -314,7 +352,7 @@ describe("comparisonChartPlugin", () => {
     expect(frame).not.toContain("side by side");
   });
 
-  test("updates every legend value from the crosshair position", async () => {
+  test("updates every return summary range value from the crosshair position", async () => {
     const provider = createProvider({
       AAPL: [100, 102, 104],
       MSFT: [200, 202, 204],
@@ -343,8 +381,12 @@ describe("comparisonChartPlugin", () => {
 
     let frame = testSetup!.captureCharFrame();
     expect(frame).not.toContain("AAPL - 1D");
-    expect(frame).toContain("AAPL $104.00 +4.00%");
-    expect(frame).toContain("MSFT $204.00 +2.00%");
+    expect(frame).toContain("Sym");
+    expect(frame).toContain("Rng");
+    expect(frame).toContain("1Y");
+    expect(frame).toContain("5Y");
+    expect(frame).toMatch(/> AAPL\s+\+4\.00%/);
+    expect(frame).toMatch(/MSFT\s+\+2\.00%/);
 
     await act(async () => {
       await testSetup!.mockMouse.moveTo(2, 4);
@@ -353,8 +395,45 @@ describe("comparisonChartPlugin", () => {
     await flushFrames();
 
     frame = testSetup!.captureCharFrame();
-    expect(frame).toContain("AAPL $100.00 0.00%");
-    expect(frame).toContain("MSFT $200.00 0.00%");
+    expect(frame).toMatch(/> AAPL\s+0\.00%/);
+    expect(frame).toMatch(/MSFT\s+0\.00%/);
+  });
+
+  test("sorts comparison summary rows by one-year return", async () => {
+    const rows = {
+      SLOW: makeDatedFinancials("SLOW", "USD", [["2025-01-02", 100], ["2026-01-02", 105]]),
+      FAST: makeDatedFinancials("FAST", "USD", [["2025-01-02", 100], ["2026-01-02", 150]]),
+      MID: makeDatedFinancials("MID", "USD", [["2025-01-02", 100], ["2026-01-02", 125]]),
+    };
+    const provider = createDatedProvider(rows);
+    setSharedMarketDataForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    await mountComparisonHarness({
+      axisMode: "percent",
+      symbols: ["SLOW", "FAST", "MID"],
+      symbolsText: "SLOW, FAST, MID",
+    }, [
+      makeTicker("SLOW", "USD"),
+      makeTicker("FAST", "USD"),
+      makeTicker("MID", "USD"),
+    ], Object.entries(rows));
+
+    await flushFrames();
+
+    const frame = testSetup!.captureCharFrame();
+    const table = frame.slice(frame.indexOf("Sym"));
+    const fastIndex = table.indexOf("FAST");
+    const midIndex = table.indexOf("MID");
+    const slowIndex = table.indexOf("SLOW");
+
+    expect(fastIndex).toBeGreaterThanOrEqual(0);
+    expect(midIndex).toBeGreaterThanOrEqual(0);
+    expect(slowIndex).toBeGreaterThanOrEqual(0);
+    expect(fastIndex).toBeLessThan(midIndex);
+    expect(midIndex).toBeLessThan(slowIndex);
   });
 
   test("extends lagging comparison histories with the latest quote", async () => {
@@ -406,11 +485,11 @@ describe("comparisonChartPlugin", () => {
     await flushFrames();
 
     const frame = testSetup!.captureCharFrame();
-    expect(frame).toContain("AAPL $150.00 +");
-    expect(frame).toContain("MSFT $250.00 +");
+    expect(frame).toMatch(/> AAPL\s+\+47\.06%/);
+    expect(frame).toMatch(/MSFT\s+\+23\.76%/);
   });
 
-  test("updates comparison legends from chart-owned quote streams", async () => {
+  test("updates comparison return summary from chart-owned quote streams", async () => {
     let emitQuote: ((symbol: string, price: number) => void) | null = null;
     const provider = createProvider({
       AAPL: [100, 102],
@@ -464,7 +543,7 @@ describe("comparisonChartPlugin", () => {
     await flushFrames();
 
     const frame = testSetup!.captureCharFrame();
-    expect(frame).toContain("AAPL $155.00 +");
+    expect(frame).toMatch(/> AAPL\s+\+51\.96%/);
   });
 
   test("does not refetch resolution support when only comparison prices update", async () => {