gloomberb 0.9.1 → 0.9.2

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 () => {

package/src/plugins/builtin/congress-trades/detail.tsx

@@ -1,25 +1,35 @@
-import type { RefObject } from "react";
-import { Box, ScrollBox, Text, TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Box, ScrollBox, Text, TextAttributes, useRendererHost } from "../../../ui";
+import {
+  DataTableView,
+  usePaneFooter,
+  type DataTableKeyEvent,
+} from "../../../components";
+import { useInlineTickerOpener } from "../../../state/hooks/inline-tickers";
 import { colors } from "../../../theme/colors";
 import { padTo } from "../../../utils/format";
+import { isPlainKey } from "../../../utils/keyboard";
 import type {
+  CloudCongressHousePayload,
   CloudCongressMemberPayload,
   CloudCongressTradePayload,
 } from "../../../api-client";
+import { apiClient } from "../../../api-client";
 import {
+  CONGRESS_MEMBER_FILING_LIMIT,
+  CONGRESS_MEMBER_TRADE_LIMIT,
+  CONGRESS_TRADES_PANE_ID,
+  buildMemberTradeColumns,
   formatAmountRange,
   formatLag,
-  formatShortDate,
+  nextSort,
+  sortedTrades,
   truncate,
+  type LoadStatus,
+  type TradeColumn,
+  type TradeColumnId,
 } from "./model";
-
-export function sideColor(side: CloudCongressTradePayload["side"], selected: boolean): string {
-  if (selected) return colors.selectedText;
-  if (side === "BUY") return colors.positive;
-  if (side === "SELL") return colors.negative;
-  if (side === "EXCHANGE") return colors.warning;
-  return colors.textDim;
-}
+import { renderCongressTradeCell } from "./table";
 
 function DetailLine({
   label,
@@ -86,69 +96,195 @@ export function TradeDetail({
   );
 }
 
-export function MemberTradeList({
+export function MemberTradesDetail({
   member,
-  trades,
+  initialTrades,
   width,
-  scrollRef,
+  focused,
+  filingLimit,
 }: {
   member: CloudCongressMemberPayload;
-  trades: CloudCongressTradePayload[];
+  initialTrades: CloudCongressTradePayload[];
   width: number;
-  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  focused: boolean;
+  filingLimit: number;
 }) {
-  const lineWidth = Math.max(1, width - 2);
-  const filedWidth = 7;
-  const txWidth = 7;
-  const sideWidth = 5;
-  const tickerWidth = 10;
-  const amountWidth = 14;
-  const assetWidth = Math.max(16, lineWidth - filedWidth - txWidth - sideWidth - tickerWidth - amountWidth - 6);
-  return (
-    <ScrollBox ref={scrollRef} scrollY focusable={false} flexGrow={1} paddingX={1}>
-      <Box flexDirection="column" width={lineWidth}>
-        <Box height={1} flexDirection="row">
-          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-            {truncate(`${member.memberName} ${member.stateDistrict}`, lineWidth)}
-          </Text>
-        </Box>
-        <Box height={1} flexDirection="row">
-          <Text fg={colors.textDim}>
-            {`${member.tradeCount} trades  ${member.buyCount} buys  ${member.sellCount} sells  ${formatAmountRange(member.estimatedLow, member.estimatedHigh)}`}
-          </Text>
-        </Box>
-        <Text>{" "}</Text>
-        <Box height={1} flexDirection="row">
-          <Text fg={colors.textDim}>{padTo("FILED", filedWidth)}</Text>
-          <Text fg={colors.textDim}> </Text>
-          <Text fg={colors.textDim}>{padTo("TX", txWidth)}</Text>
-          <Text fg={colors.textDim}> </Text>
-          <Text fg={colors.textDim}>{padTo("SIDE", sideWidth)}</Text>
-          <Text fg={colors.textDim}> </Text>
-          <Text fg={colors.textDim}>{padTo("TICKER", tickerWidth)}</Text>
-          <Text fg={colors.textDim}> </Text>
-          <Text fg={colors.textDim}>{padTo("AMOUNT", amountWidth, "right")}</Text>
-          <Text fg={colors.textDim}> </Text>
-          <Text fg={colors.textDim}>{padTo("ASSET", assetWidth)}</Text>
-        </Box>
-        {trades.map((trade) => (
-          <Box key={trade.id} height={1} flexDirection="row">
-            <Text fg={colors.textDim}>{padTo(formatShortDate(trade.filingDate), filedWidth)}</Text>
-            <Text fg={colors.textDim}> </Text>
-            <Text fg={colors.textDim}>{padTo(formatShortDate(trade.transactionDate), txWidth)}</Text>
-            <Text fg={colors.textDim}> </Text>
-            <Text fg={sideColor(trade.side, false)}>{padTo(trade.side, sideWidth)}</Text>
-            <Text fg={colors.textDim}> </Text>
-            <Text fg={trade.ticker ? colors.positive : colors.textDim} attributes={trade.ticker ? TextAttributes.BOLD : 0}>
-              {padTo(trade.ticker ?? "--", tickerWidth)}
-            </Text>
-            <Text fg={colors.textDim}> </Text>
-            <Text fg={colors.textBright}>{padTo(formatAmountRange(trade.amountLow, trade.amountHigh, trade.amount), amountWidth, "right")}</Text>
-            <Text fg={colors.textDim}> </Text>
-            <Text fg={colors.text}>{truncate(trade.assetName, assetWidth)}</Text>
-          </Box>
-        ))}
+  const rendererHost = useRendererHost();
+  const openTicker = useInlineTickerOpener();
+  const [trades, setTrades] = useState<CloudCongressTradePayload[]>(initialTrades);
+  const [detailPayload, setDetailPayload] = useState<CloudCongressHousePayload | null>(null);
+  const [status, setStatus] = useState<LoadStatus>("loading");
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTradeId, setSelectedTradeId] = useState<string | null>(initialTrades[0]?.id ?? null);
+  const [sortPreference, setSortPreference] = useState<{ columnId: TradeColumnId; direction: "asc" | "desc" }>({
+    columnId: "filed",
+    direction: "desc",
+  });
+  const fetchGenRef = useRef(0);
+
+  const load = useCallback((refresh = false) => {
+    fetchGenRef.current += 1;
+    const gen = fetchGenRef.current;
+    setStatus("loading");
+    setError(null);
+    apiClient.getCloudCongressHouse({
+      member: member.memberName,
+      limit: CONGRESS_MEMBER_TRADE_LIMIT,
+      filingLimit: Math.max(CONGRESS_MEMBER_FILING_LIMIT, filingLimit),
+      refresh,
+    })
+      .then((payload) => {
+        if (fetchGenRef.current !== gen) return;
+        const exactMemberTrades = payload.trades.filter((trade) => (
+          trade.memberName === member.memberName
+          && trade.stateDistrict === member.stateDistrict
+        ));
+        setDetailPayload(payload);
+        setTrades(exactMemberTrades.length > 0 ? exactMemberTrades : payload.trades);
+        setStatus("loaded");
+      })
+      .catch((loadError) => {
+        if (fetchGenRef.current !== gen) return;
+        setError(loadError instanceof Error ? loadError.message : String(loadError));
+        setStatus("error");
+      });
+  }, [filingLimit, member.memberName, member.stateDistrict]);
+
+  useEffect(() => {
+    fetchGenRef.current += 1;
+    setTrades(initialTrades);
+    setDetailPayload(null);
+    setStatus("loading");
+    setError(null);
+    setSelectedTradeId(initialTrades[0]?.id ?? null);
+  }, [member.id]);
+
+  useEffect(() => {
+    load(false);
+  }, [load]);
+
+  const sortedRows = useMemo(() => sortedTrades(trades, sortPreference), [sortPreference, trades]);
+  const columns = useMemo(() => buildMemberTradeColumns(width), [width]);
+  const selectedTrade = useMemo(() => (
+    sortedRows.find((trade) => trade.id === selectedTradeId) ?? sortedRows[0] ?? null
+  ), [selectedTradeId, sortedRows]);
+  const summaryMember = useMemo(() => (
+    detailPayload?.members.find((entry) => entry.id === member.id)
+    ?? detailPayload?.members.find((entry) => (
+      entry.memberName === member.memberName
+      && entry.stateDistrict === member.stateDistrict
+    ))
+    ?? member
+  ), [detailPayload?.members, member]);
+  const maybeTruncated = status === "loaded" && trades.length >= CONGRESS_MEMBER_TRADE_LIMIT;
+
+  useEffect(() => {
+    if (selectedTradeId && sortedRows.some((trade) => trade.id === selectedTradeId)) return;
+    setSelectedTradeId(sortedRows[0]?.id ?? null);
+  }, [selectedTradeId, sortedRows]);
+
+  const refresh = useCallback(() => {
+    load(true);
+  }, [load]);
+
+  const openSelectedTicker = useCallback(() => {
+    if (selectedTrade?.ticker) openTicker(selectedTrade.ticker);
+  }, [openTicker, selectedTrade?.ticker]);
+
+  const openSelectedSource = useCallback(() => {
+    if (selectedTrade?.sourceUrl) void rendererHost.openExternal(selectedTrade.sourceUrl);
+  }, [rendererHost, selectedTrade?.sourceUrl]);
+
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (isPlainKey(event, "r")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      refresh();
+      return true;
+    }
+    if (isPlainKey(event, "t") && selectedTrade?.ticker) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      openSelectedTicker();
+      return true;
+    }
+    if (isPlainKey(event, "o") && selectedTrade?.sourceUrl) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      openSelectedSource();
+      return true;
+    }
+    return false;
+  }, [openSelectedSource, openSelectedTicker, refresh, selectedTrade?.sourceUrl, selectedTrade?.ticker]);
+
+  usePaneFooter(`${CONGRESS_TRADES_PANE_ID}:member-detail`, () => ({
+    info: [
+      ...(status === "loading" ? [{ id: "member-loading", parts: [{ text: "loading member trades", tone: "muted" as const }] }] : []),
+      ...(error ? [{ id: "member-error", parts: [{ text: error, tone: "warning" as const }] }] : []),
+      ...(maybeTruncated ? [{ id: "member-truncated", parts: [{ text: `limited to ${CONGRESS_MEMBER_TRADE_LIMIT} trades`, tone: "warning" as const }] }] : []),
+    ],
+    hints: [
+      { id: "member-refresh", key: "r", label: "efresh", onPress: refresh },
+      { id: "member-ticker", key: "t", label: "icker", onPress: openSelectedTicker, disabled: !selectedTrade?.ticker },
+      { id: "member-open", key: "o", label: "pen", onPress: openSelectedSource, disabled: !selectedTrade?.sourceUrl },
+    ],
+  }), [
+    error,
+    maybeTruncated,
+    openSelectedSource,
+    openSelectedTicker,
+    refresh,
+    selectedTrade?.sourceUrl,
+    selectedTrade?.ticker,
+    status,
+  ]);
+
+  const summary = (
+    <Box flexDirection="column" paddingX={1} paddingTop={1} paddingBottom={1}>
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.textDim}>
+          {`${summaryMember.stateDistrict || "--"}  ${summaryMember.tradeCount} trades  ${summaryMember.buyCount} buys  ${summaryMember.sellCount} sells  ${formatAmountRange(summaryMember.estimatedLow, summaryMember.estimatedHigh)}`}
+        </Text>
       </Box>
-    </ScrollBox>
+    </Box>
+  );
+  const emptyTitle = status === "loading"
+    ? "Loading member trades..."
+    : error ?? "No trades for this member.";
+
+  return (
+    <Box flexDirection="column" flexGrow={1} overflow="hidden">
+      <DataTableView<CloudCongressTradePayload, TradeColumn>
+        focused={focused}
+        selection={{
+          kind: "id",
+          selectedId: selectedTradeId,
+          getId: (trade) => trade.id,
+          onChange: (id) => setSelectedTradeId(id),
+        }}
+        onActivate={(trade) => {
+          if (trade.ticker) openTicker(trade.ticker);
+        }}
+        onRootKeyDown={handleKeyDown}
+        rootWidth={width}
+        rootBefore={summary}
+        resetScrollKey={member.id}
+        columns={columns}
+        items={sortedRows}
+        sortColumnId={sortPreference.columnId}
+        sortDirection={sortPreference.direction}
+        onHeaderClick={(columnId) => {
+          setSortPreference((current) => nextSort(
+            current,
+            columnId as TradeColumnId,
+            columnId === "ticker" || columnId === "asset" || columnId === "side" || columnId === "owner" ? "asc" : "desc",
+          ));
+        }}
+        getItemKey={(trade) => trade.id}
+        renderCell={renderCongressTradeCell}
+        emptyStateTitle={emptyTitle}
+        showHorizontalScrollbar={false}
+      />
+    </Box>
   );
 }

package/src/plugins/builtin/congress-trades/footer.ts

@@ -7,11 +7,13 @@ import type {
 import {
   CONGRESS_TRADES_PANE_ID,
   type CongressTab,
+  type DetailMode,
   type LoadStatus,
 } from "./model";
 
 export function useCongressTradesFooter({
   activeTab,
+  detailMode,
   detailTrade,
   error,
   load,
@@ -23,6 +25,7 @@ export function useCongressTradesFooter({
   status,
 }: {
   activeTab: CongressTab;
+  detailMode: DetailMode;
   detailTrade: CloudCongressTradePayload | null;
   error: string | null;
   load: (refresh?: boolean) => void;
@@ -44,16 +47,19 @@ export function useCongressTradesFooter({
       ...(status === "loading" ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
       ...(error ? [{ id: "error", parts: [{ text: error, tone: "warning" as const }] }] : []),
     ],
-    hints: [
-      { id: "refresh", key: "r", label: "efresh", onPress: () => load(true) },
-      ...(activeTab === "trades" ? [
-        { id: "member", key: "m", label: "ember", onPress: openSelectedTradeMember, disabled: !selectedTrade },
-        { id: "ticker", key: "t", label: "icker", onPress: openSelectedTicker, disabled: !(detailTrade?.ticker ?? selectedTrade?.ticker) },
-        { id: "open", key: "o", label: "pen", onPress: openSelectedTradeSource, disabled: !(detailTrade ?? selectedTrade)?.sourceUrl },
-      ] : []),
-    ],
+    hints: detailMode?.kind === "member"
+      ? []
+      : [
+          { id: "refresh", key: "r", label: "efresh", onPress: () => load(true) },
+          ...(activeTab === "trades" ? [
+            { id: "member", key: "m", label: "ember", onPress: openSelectedTradeMember, disabled: !selectedTrade },
+            { id: "ticker", key: "t", label: "icker", onPress: openSelectedTicker, disabled: !(detailTrade?.ticker ?? selectedTrade?.ticker) },
+            { id: "open", key: "o", label: "pen", onPress: openSelectedTradeSource, disabled: !(detailTrade ?? selectedTrade)?.sourceUrl },
+          ] : []),
+        ],
   }), [
     activeTab,
+    detailMode,
     detailTrade,
     error,
     load,