gloomberb 0.15.2 → 0.15.4

package/src/plugins/builtin/cloud-tweets/pane.tsx

@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, type InputRenderable } from "../../../ui";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Box } from "../../../ui";
 import {
   EmptyState,
-  Tabs,
-  usePaneHeaderTabs,
+  usePaneTabs,
+  useQueryBarSearch,
 } from "../../../components";
 import type { PaneProps, TickerResearchTabProps } from "../../../types/plugin";
 import { usePaneInstance, usePaneInstanceId } from "../../../state/app/context";
@@ -81,9 +81,7 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
     { schemaVersion: TWITTER_FEED_LAUNCH_SCHEMA_VERSION },
   );
   const [activeFeedId, setActiveFeedId] = usePluginPaneState<string | null>("activeFeedId", null);
-  const [searchFocused, setSearchFocused] = useState(false);
-  const [searchFocusToken, setSearchFocusToken] = useState(0);
-  const searchInputRef = useRef<InputRenderable | null>(null);
+  const { active: searchFocused, focus: focusSearch, blur: blurSearch, searchProps } = useQueryBarSearch();
   const initializedRef = useRef(false);
   const feeds = useMemo(() => normalizeFeeds(persistedState), [persistedState]);
 
@@ -95,15 +93,6 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
     setLegacyPersistedState(EMPTY_FEED_STATE);
   }, [legacyPersistedState, panePersistedState, setLegacyPersistedState, setPanePersistedState]);
 
-  const focusSearch = useCallback(() => {
-    setSearchFocused(true);
-    setSearchFocusToken((current) => current + 1);
-  }, []);
-
-  const blurSearch = useCallback(() => {
-    setSearchFocused(false);
-  }, []);
-
   const updateFeeds = useCallback((updater: (feeds: TwitterFeed[]) => TwitterFeed[]) => {
     setPanePersistedState((current) => ({
       feeds: updater(normalizeFeeds(current ?? persistedState)),
@@ -234,15 +223,10 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
   }, [focusSearch, setTweetOpen]);
 
   useTwitterFeedKeyboard({
-    activeFeed,
-    addFeed,
     blurSearch,
     cycleFeeds,
-    focusSearch: searchFeed,
     focused,
-    removeFeed,
     searchFocused,
-    tweetOpen,
   });
 
   const activeFeedIdValue = activeFeed?.id ?? null;
@@ -292,47 +276,30 @@ export function TwitterFeedPane({ focused, width, height }: PaneProps) {
     onClose: removeFeed,
     onDoubleClick: searchFeed,
   })), [feeds, removeFeed, searchFeed]);
-  const tabsInHeader = usePaneHeaderTabs({
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({
     tabs: feedTabs,
     activeValue: activeFeed?.id ?? null,
     onSelect: setActiveFeedId,
     focused: focused && !searchFocused,
     onAdd: () => addFeed(),
     closeMode: "active",
+    compact: true,
+    variant: "pill",
   });
-  const tabRows = tabsInHeader ? 0 : 1;
 
   const searchBar = activeFeed ? (
     <TwitterFeedSearchBar
       feed={activeFeed}
       focused={focused}
-      active={searchFocused}
       width={width}
-      focusToken={searchFocusToken}
-      inputRef={searchInputRef}
-      onFocus={focusSearch}
-      onBlur={blurSearch}
-      onNavigateDown={blurSearch}
+      searchProps={searchProps}
       onQueryChange={updateFeedQuery}
     />
   ) : null;
 
   return (
     <Box flexDirection="column" width={width} height={height}>
-      {!tabsInHeader && (
-        <Box height={1}>
-          <Tabs
-            tabs={feedTabs}
-            activeValue={activeFeed?.id ?? null}
-            onSelect={setActiveFeedId}
-            compact
-            variant="pill"
-            closeMode="active"
-            onAdd={() => addFeed()}
-            focused={focused && !searchFocused}
-          />
-        </Box>
-      )}
+      {tabStrip && <Box height={1}>{tabStrip}</Box>}
 
       {!activeFeed ? (
         <Box padding={1} flexGrow={1}>

package/src/plugins/builtin/cloud-tweets/registration.ts

@@ -11,10 +11,7 @@ import {
   TwitterFeedPane,
   TwitterTickerTab,
 } from "./pane";
-
-function record(value: unknown): value is Record<string, unknown> {
-  return value !== null && typeof value === "object" && !Array.isArray(value);
-}
+import { isRecord } from "../../../utils/guards";
 
 export function registerTwitterFeedFeature(ctx: GloomPluginContext): void {
   ctx.registerTickerResearchTab({
@@ -46,7 +43,7 @@ export function registerTwitterFeedFeature(ctx: GloomPluginContext): void {
     description: "Open an X advanced-search feed.",
     keywords: ["twitter", "x", "tweet", "tweets", "feed", "social"],
     createInstance: (_context, options) => {
-      const shared = record(options?.shareData) ? options.shareData : null;
+      const shared = isRecord(options?.shareData) ? options.shareData : null;
       const query = typeof shared?.query === "string"
         ? shared.query.trim()
         : options?.values?.query?.trim() || options?.arg?.trim() || "";
@@ -61,12 +58,12 @@ export function registerTwitterFeedFeature(ctx: GloomPluginContext): void {
     },
     publicShare: {
       serialize: ({ pane, paneState }) => {
-        const pluginState = record(paneState.pluginState)
+        const pluginState = isRecord(paneState.pluginState)
           ? paneState.pluginState["gloomberb-cloud"]
           : null;
-        const feedsState = record(pluginState) ? pluginState.feeds : null;
+        const feedsState = isRecord(pluginState) ? pluginState.feeds : null;
         const feeds = normalizeFeeds(feedsState);
-        const activeFeedId = record(pluginState) && typeof pluginState.activeFeedId === "string"
+        const activeFeedId = isRecord(pluginState) && typeof pluginState.activeFeedId === "string"
           ? pluginState.activeFeedId
           : null;
         const active = feeds.find((feed) => feed.id === activeFeedId) ?? feeds[0];

package/src/plugins/builtin/cloud-tweets/search-bar.tsx

@@ -1,6 +1,5 @@
-import { useCallback, type RefObject } from "react";
-import type { InputRenderable } from "../../../ui";
-import { QueryBar } from "../../../components";
+import { useCallback } from "react";
+import { QueryBar, type QueryBarSearchFocus } from "../../../components";
 import {
   TWEET_SEARCH_DEBOUNCE_MS,
   type TwitterFeed,
@@ -9,24 +8,14 @@ import {
 export function TwitterFeedSearchBar({
   feed,
   focused,
-  active,
   width,
-  focusToken,
-  inputRef,
-  onFocus,
-  onBlur,
-  onNavigateDown,
+  searchProps,
   onQueryChange,
 }: {
   feed: TwitterFeed;
   focused: boolean;
-  active: boolean;
   width: number;
-  focusToken: number;
-  inputRef: RefObject<InputRenderable | null>;
-  onFocus: () => void;
-  onBlur: () => void;
-  onNavigateDown?: () => void;
+  searchProps: QueryBarSearchFocus["searchProps"];
   onQueryChange: (feedId: string, query: string) => void;
 }) {
   const updateQuery = useCallback((value: string) => {
@@ -41,12 +30,8 @@ export function TwitterFeedSearchBar({
         onChange: updateQuery,
         placeholder: "$AAPL -filter:replies",
         focused,
-        active,
-        onActiveChange: (next) => (next ? onFocus() : onBlur()),
-        focusToken,
-        inputRef,
+        ...searchProps,
         debounceMs: TWEET_SEARCH_DEBOUNCE_MS,
-        onNavigateDown,
       }}
     />
   );

package/src/plugins/builtin/cloud-tweets/table.tsx

@@ -16,23 +16,24 @@ import {
   type StatItem,
 } from "../../../components";
 import { TickerBadgeText } from "../../../components/ticker/badge/text";
+import { handleRefreshKey } from "../../../components/data-table/table-pane";
 import { RemoteImage, PaneLinkMenu } from "../../../components/ui";
 import { useInlineTickerOpener, useInlineTickers } from "../../../state/hooks/inline-tickers";
 import { useDialog, type PromptContext } from "../../../ui/dialog";
 import { usePluginAppActions, usePluginPaneState } from "../../runtime";
 import type { CloudTweetPayload, CloudTweetSearchResponse } from "../../../api-client";
-import { formatTimeAgo } from "../../../utils/format";
+import { formatTimeAgo } from "../../../utils/datetime-format";
 import { tokenizeInlineContent } from "../../../utils/inline-content-tokenizer";
 import { isPlainKey } from "../../../utils/keyboard";
 import { colors } from "../../../theme/colors";
 import { SignInWall } from "../cloud/auth-actions";
 import { isPlainArrowUp, stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
+import { nextHeaderSort } from "../../../utils/sort-values";
 import {
   appendNewTweets,
   mergeLatestTweets,
   buildTweetColumns,
   formatMetric,
-  formatRelativeShort,
   isTweetSortColumnId,
   normalizeTwitterUsername,
   normalizeTweetCellText,
@@ -46,8 +47,8 @@ import {
   type TweetSortColumnId,
   type TweetSortDirection,
 } from "./model";
-import { useAutoRefresh } from "../shared/auto-refresh";
-import { usePaneStatusLinkFooter } from "../shared/pane-footer";
+import { useAutoRefresh } from "../../../react/auto-refresh";
+import { usePaneStatusLinkFooter } from "../../../components/layout/pane/status-footer";
 
 function isAuthError(error: string | null): boolean {
   return !!error && /unauthorized|verification/i.test(error);
@@ -56,7 +57,7 @@ function isAuthError(error: string | null): boolean {
 // Result rows only lived in table state, so switching feed tabs refetched an
 // identical search. Cached per request key for the life of the process; `r`
 // still forces a fresh search.
-// ponytail: in-memory only, move to plugin state if results must survive restarts
+// In-memory only. Move to plugin state if results must survive restarts.
 const TWEET_RESULT_CACHE = new Map<string, { data: CloudTweetSearchResponse; fetchedAt: number; hasMore: boolean }>();
 const TWEET_CACHE_TTL_MS = 5 * 60 * 1000;
 /** Matches the server's search cache, so a visible pane never asks for a result it cannot get. */
@@ -414,11 +415,7 @@ export function TweetSearchTable({
 
   const handleHeaderClick = useCallback((columnId: string) => {
     if (!isTweetSortColumnId(columnId)) return;
-    setSort((current) => (
-      current.columnId === columnId
-        ? { columnId, direction: current.direction === "desc" ? "asc" : "desc" }
-        : { columnId, direction: "desc" }
-    ));
+    setSort((current) => nextHeaderSort(current, columnId, { firstDirection: "desc" }));
   }, []);
 
   const handleRootKeyDown = useCallback((
@@ -434,11 +431,7 @@ export function TweetSearchTable({
       void openTweetLinks();
       return true;
     }
-    if (!isPlainKey(event, "r")) return false;
-    event.preventDefault?.();
-    event.stopPropagation?.();
-    reload(true);
-    return true;
+    return handleRefreshKey(event, () => reload(true), { stopPropagation: true });
   }, [onFocusSearch, openTweetLinks, reload, selectedLinks.length]);
 
   const handleDetailKeyDown = useCallback((event: DataTableKeyEvent) => {
@@ -459,18 +452,17 @@ export function TweetSearchTable({
     _index: number,
     rowState: { selected: boolean },
   ): DataTableCell => {
-    const selectedColor = rowState.selected ? colors.selectedText : undefined;
     switch (column.id) {
       case "time":
-        return { text: formatRelativeShort(tweet.createdAt), color: selectedColor ?? colors.textDim };
+        return { text: formatTimeAgo(tweet.createdAt, { short: true }), color: colors.textDim };
       case "author":
         return {
           text: `@${tweet.author.userName || tweet.author.name}`,
-          color: selectedColor ?? colors.textBright,
+          color: colors.textBright,
           attributes: TextAttributes.BOLD,
         };
       case "text":
-        return { text: normalizeTweetCellText(tweet.text), color: selectedColor ?? colors.text };
+        return { text: normalizeTweetCellText(tweet.text), color: colors.text };
       case "tickers": {
         const tickers = tweetTickers(tweet);
         return {
@@ -479,16 +471,16 @@ export function TweetSearchTable({
             <TickerBadgeList
               symbols={tickers}
               width={column.width}
-              fallbackColor={selectedColor ?? colors.positive}
+              fallbackColor={rowState.selected ? colors.selectedText : colors.positive}
             />
           ),
-          color: selectedColor ?? colors.positive,
+          color: colors.positive,
         };
       }
       case "likes":
-        return { text: formatMetric(tweet.metrics.likes), color: selectedColor ?? colors.textDim };
+        return { text: formatMetric(tweet.metrics.likes), color: colors.textDim };
       case "views":
-        return { text: formatMetric(tweet.metrics.views), color: selectedColor ?? colors.textDim };
+        return { text: formatMetric(tweet.metrics.views), color: colors.textDim };
     }
   }, []);
 
@@ -550,6 +542,7 @@ export function TweetSearchTable({
       onHeaderClick={handleHeaderClick}
       getItemKey={(tweet) => tweet.id}
       renderCell={renderCell}
+      selectedTextOverridesCellColor
       emptyContent={emptyContent}
       emptyStateTitle={emptyStateTitle ?? "No tweets"}
       emptyStateHint={emptyStateHint ?? data?.query}

package/src/plugins/builtin/composite-plugins.ts

@@ -1,8 +1,4 @@
 import { cryptoBoardModule } from "./crypto-board";
-import {
-  attachFredSeriesPersistence,
-  resetFredSeriesPersistence,
-} from "../../data/fred-series";
 import { portfolioAnalyticsModule } from "./analytics";
 import { brokerManagerModule } from "./broker-manager";
 import { changelogModule } from "./changelog";
@@ -12,6 +8,7 @@ import { relativeRotationModule } from "./relative-rotation";
 import { equityScreenerModule } from "./equity-screener";
 import { correlationModule } from "./correlation";
 import { cdsModule } from "./cds";
+import { creditBoardsModule } from "./credit-boards";
 import { creditConditionsModule } from "./credit-conditions";
 import { marketValuationModule } from "./market-valuation";
 import { economicCalendarModule } from "./econ";
@@ -27,7 +24,7 @@ import { positionSizerModule } from "./kelly-sizer";
 import { layoutManagerModule } from "./layout-manager";
 import { marketMoversModule } from "./market-movers";
 import { volatilityModule } from "./volatility";
-import { composeBuiltinPlugin, type PluginModule } from "./plugin-module";
+import { composeBuiltinPlugin } from "./plugin-module";
 import { portfolioListModule } from "./portfolio-list";
 import { scannerModule } from "./scanner";
 import { sectorsModule } from "./sectors";
@@ -39,39 +36,87 @@ import { yieldCurveModule } from "./yield-curve";
 import { centralBankRatesModule } from "./central-bank-rates";
 import { moneyMarketsModule } from "./money-markets";
 import { ratePathModule } from "./rate-path";
+import { debtMaturitiesModule } from "./debt-maturities";
+import { revenueBreakdownModule } from "./revenue-breakdown";
+import { mnaModule } from "./mna";
+import { shortVolumeModule } from "./short-volume";
+import { socialMentionsModule } from "./social-mentions";
+import { timeSalesModule } from "./time-sales";
+import { estimateRevisionsModule } from "./estimate-revisions";
+import { chartComposerModule } from "./chart-composer";
+import { congressResearchModule } from "./congress-trades";
+import { dividendYieldModule } from "./dividend-yield";
+import { executivesModule } from "./executives";
+import { filingEventsModule } from "./filing-events";
+import { holdersModule } from "./holders";
+import { insiderModule } from "./insider";
+import { jobsModule } from "./jobs";
+import { optionsModule } from "./options";
+import { optionsScenarioModule } from "./options-scenario";
+import { optionsCalculatorModule } from "./options-calculator";
+import { volSurfaceModule } from "./vol-surface";
+import { realizedVolModule } from "./realized-vol";
+import { ivHistoryModule } from "./iv-history";
+import { backtestModule } from "./backtest";
+import { researchModule } from "./research";
+import { riskFactorsModule } from "./risk-factors";
+import { secModule } from "./sec";
+import { shortInterestModule } from "./short-interest";
+import { thirteenFModule } from "./thirteenf";
+import { tickerDetailModule } from "./ticker-detail";
+import { macroSharedResourcesModule } from "./macro-resources";
 import {
-  attachValuationPersistence,
-  resetValuationPersistence,
-} from "./market-valuation/cache";
-
-const macroSharedResourcesModule = {
-  setup(ctx) {
-    attachFredSeriesPersistence(ctx.persistence);
-    attachValuationPersistence(ctx.persistence);
-  },
-  dispose() {
-    resetFredSeriesPersistence();
-    resetValuationPersistence();
-  },
-} satisfies PluginModule;
+  applicationPluginMeta,
+  macroPluginMeta,
+  marketOverviewPluginMeta,
+  portfolioPluginMeta,
+  tickerResearchPluginMeta,
+} from "./builtin-plugin-meta";
 
 export const applicationPlugin = composeBuiltinPlugin({
-  id: "application",
-  name: "Application",
-  version: "1.0.0",
-  description: "Core layout, help, and release information.",
+  ...applicationPluginMeta,
   modules: [layoutManagerModule, pluginMarketplaceModule, helpModule, changelogModule, connectionsModule],
 });
 
 export const portfolioPlugin = composeBuiltinPlugin({
-  id: "portfolio",
-  name: "Portfolio",
-  version: "1.0.0",
-  description: "Portfolio and watchlist management, analytics, and position sizing.",
-  toggleable: true,
+  ...portfolioPluginMeta,
   modules: [portfolioListModule, portfolioAnalyticsModule, positionSizerModule],
 });
 
+export const tickerResearchPlugin = composeBuiltinPlugin({
+  ...tickerResearchPluginMeta,
+  modules: [
+    tickerDetailModule,
+    chartComposerModule,
+    congressResearchModule,
+    optionsModule,
+    optionsCalculatorModule,
+    optionsScenarioModule,
+    volSurfaceModule,
+    realizedVolModule,
+    ivHistoryModule,
+    backtestModule,
+    estimateRevisionsModule,
+    researchModule,
+    shortVolumeModule,
+    socialMentionsModule,
+    debtMaturitiesModule,
+    revenueBreakdownModule,
+    mnaModule,
+    dividendYieldModule,
+    holdersModule,
+    shortInterestModule,
+    timeSalesModule,
+    thirteenFModule,
+    secModule,
+    insiderModule,
+    jobsModule,
+    executivesModule,
+    riskFactorsModule,
+    filingEventsModule,
+  ],
+});
+
 export const brokerPlugin = composeBuiltinPlugin({
   id: "broker",
   name: "Broker",
@@ -82,11 +127,8 @@ export const brokerPlugin = composeBuiltinPlugin({
 });
 
 export const marketOverviewPlugin = composeBuiltinPlugin({
-  id: "market-overview",
-  name: "Market Overview",
-  version: "1.0.0",
+  ...marketOverviewPluginMeta,
   description: "Global indices, movers, scanners, sectors, FX, futures, and correlations.",
-  toggleable: true,
   modules: [
     correlationModule,
     relativeRotationModule,
@@ -105,11 +147,8 @@ export const marketOverviewPlugin = composeBuiltinPlugin({
 });
 
 export const macroPlugin = composeBuiltinPlugin({
-  id: "macro",
-  name: "Macro",
-  version: "1.0.0",
-  description: "Economic calendar, rates, volatility, credit spreads, single-name CDS, Treasury auctions, and earnings.",
-  toggleable: true,
+  ...macroPluginMeta,
+  description: "Economic calendar, rates, volatility, credit spreads, single-name, index and sovereign CDS, Treasury auctions, and earnings.",
   modules: [
     macroSharedResourcesModule,
     economicCalendarModule,
@@ -123,6 +162,7 @@ export const macroPlugin = composeBuiltinPlugin({
     creditConditionsModule,
     marketValuationModule,
     cdsModule,
+    creditBoardsModule,
     treasuryAuctionsModule,
     earningsModule,
     earningsCallsModule,

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

@@ -11,9 +11,11 @@ import {
   type DataTableKeyEvent,
   type StatItem,
 } from "../../../components";
+import { handleRefreshKey } from "../../../components/data-table/table-pane";
 import { useInlineTickerOpener } from "../../../state/hooks/inline-tickers";
 import { colors } from "../../../theme/colors";
-import { isPlainKey } from "../../../utils/keyboard";
+import { truncateWithEllipsis } from "../../../utils/text-wrap";
+import { nextHeaderSort } from "../../../utils/sort-values";
 import type {
   CloudCongressHousePayload,
   CloudCongressMemberPayload,
@@ -31,9 +33,7 @@ import {
   buildMemberTradeColumns,
   formatCongressReturn,
   formatLag,
-  nextSort,
   sortedTrades,
-  truncate,
   type LoadStatus,
   type TradeColumn,
   type TradeColumnId,
@@ -41,30 +41,7 @@ import {
 import { renderCongressTradeCell } from "./table";
 import { loadCongressHouse } from "./client";
 
-function DetailLine({
-  label,
-  value,
-  tone,
-  bold = false,
-}: {
-  label: string;
-  value: string;
-  tone?: "muted" | "value" | "positive" | "negative" | "warning";
-  bold?: boolean;
-}) {
-  const color = tone === "positive"
-    ? colors.positive
-    : tone === "negative"
-      ? colors.negative
-      : tone === "warning"
-        ? colors.warning
-        : tone === "value"
-          ? colors.textBright
-          : tone === "muted"
-            ? colors.textDim
-            : colors.text;
-  return <KeyValueRow label={label} value={value} labelWidth={16} color={color} emphasis={bold} />;
-}
+const DETAIL_ROW = { labelWidth: 16, emphasis: false } as const;
 
 export function TradeDetail({
   trade,
@@ -78,26 +55,26 @@ export function TradeDetail({
     <ScrollBox scrollY focusable={false} flexGrow={1} paddingX={1}>
       <Box flexDirection="column" width={lineWidth}>
         {/* The detail title already carries the member and ticker. */}
-        <DetailLine label="chamber" value={`${trade.chamber === "senate" ? "Senate" : "House"}${trade.stateDistrict ? ` · ${trade.stateDistrict}` : ""}`} tone="muted" />
-        <DetailLine label="party" value={trade.party ?? "--"} />
-        <DetailLine label="side" value={trade.transactionType} tone={trade.side === "BUY" ? "positive" : trade.side === "SELL" ? "negative" : trade.side === "OTHER" ? "muted" : undefined} />
-        <DetailLine label="asset" value={truncate(trade.assetName, Math.max(10, lineWidth - 16))} />
-        <DetailLine label="amount" value={trade.amount} tone="value" />
-        <DetailLine label="owner" value={trade.owner} />
-        <DetailLine label="tx return" value={formatCongressReturn(trade.returnSinceTx)} />
-        <DetailLine label="filed return" value={formatCongressReturn(trade.returnSinceFiling)} />
-        <DetailLine label="price as of" value={trade.returnAsOf ?? "--"} />
-        <DetailLine label="tx date" value={trade.transactionDate ?? "--"} />
-        <DetailLine label="notification" value={trade.notificationDate ?? "--"} />
-        <DetailLine label="filed" value={trade.filingDate} />
-        <DetailLine label="lag" value={`${formatLag(trade.lagDays)}${(trade.lagDays ?? 0) > 45 ? " (past 45 days)" : ""}`} tone={(trade.lagDays ?? 0) > 45 ? "warning" : undefined} />
-        {trade.filingStatus ? <DetailLine label="status" value={trade.filingStatus} /> : null}
-        {trade.subholdingOf ? <DetailLine label="subholding" value={truncate(trade.subholdingOf, Math.max(10, lineWidth - 16))} /> : null}
+        <KeyValueRow {...DETAIL_ROW} label="chamber" value={`${trade.chamber === "senate" ? "Senate" : "House"}${trade.stateDistrict ? ` · ${trade.stateDistrict}` : ""}`} tone="muted" />
+        <KeyValueRow {...DETAIL_ROW} label="party" value={trade.party ?? "--"} />
+        <KeyValueRow {...DETAIL_ROW} label="side" value={trade.transactionType} tone={trade.side === "BUY" ? "positive" : trade.side === "SELL" ? "negative" : trade.side === "OTHER" ? "muted" : undefined} />
+        <KeyValueRow {...DETAIL_ROW} label="asset" value={truncateWithEllipsis(trade.assetName, Math.max(10, lineWidth - 16))} />
+        <KeyValueRow {...DETAIL_ROW} label="amount" value={trade.amount} color={colors.textBright} />
+        <KeyValueRow {...DETAIL_ROW} label="owner" value={trade.owner} />
+        <KeyValueRow {...DETAIL_ROW} label="tx return" value={formatCongressReturn(trade.returnSinceTx)} />
+        <KeyValueRow {...DETAIL_ROW} label="filed return" value={formatCongressReturn(trade.returnSinceFiling)} />
+        <KeyValueRow {...DETAIL_ROW} label="price as of" value={trade.returnAsOf ?? "--"} />
+        <KeyValueRow {...DETAIL_ROW} label="tx date" value={trade.transactionDate ?? "--"} />
+        <KeyValueRow {...DETAIL_ROW} label="notification" value={trade.notificationDate ?? "--"} />
+        <KeyValueRow {...DETAIL_ROW} label="filed" value={trade.filingDate} />
+        <KeyValueRow {...DETAIL_ROW} label="lag" value={`${formatLag(trade.lagDays)}${(trade.lagDays ?? 0) > 45 ? " (past 45 days)" : ""}`} tone={(trade.lagDays ?? 0) > 45 ? "warning" : undefined} />
+        {trade.filingStatus ? <KeyValueRow {...DETAIL_ROW} label="status" value={trade.filingStatus} /> : null}
+        {trade.subholdingOf ? <KeyValueRow {...DETAIL_ROW} label="subholding" value={truncateWithEllipsis(trade.subholdingOf, Math.max(10, lineWidth - 16))} /> : null}
         {trade.description ? (
           <>
             <Text>{" "}</Text>
             <Text fg={colors.textDim}>description</Text>
-            <Text fg={colors.text}>{truncate(trade.description, lineWidth)}</Text>
+            <Text fg={colors.text}>{truncateWithEllipsis(trade.description, lineWidth)}</Text>
           </>
         ) : null}
       </Box>
@@ -258,39 +235,10 @@ export function MemberTradesDetail({
     if (selectedTrade?.sourceUrl) void rendererHost.openExternal(selectedTrade.sourceUrl);
   }, [rendererHost, selectedTrade?.sourceUrl]);
 
-  const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
-    if (isPlainKey(event, "n") && detailPayload && canLoadMoreCongress(detailPayload)) {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      loadMore();
-      return true;
-    }
-    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;
-    }
-    if (isPlainKey(event, "p") && previousYearRequest) {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      loadPreviousYear();
-      return true;
-    }
-    return false;
-  }, [detailPayload, loadMore, loadPreviousYear, openSelectedSource, openSelectedTicker, previousYearRequest, refresh, selectedTrade?.sourceUrl, selectedTrade?.ticker]);
+  // n, t, o and p are the footer hints below, which bind their own keys.
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => (
+    handleRefreshKey(event, refresh, { stopPropagation: true })
+  ), [refresh]);
 
   usePaneNoticeFooter({
     registrationId: `${CONGRESS_TRADES_PANE_ID}:member-notices`,
@@ -368,14 +316,13 @@ export function MemberTradesDetail({
         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",
-          ));
+          setSortPreference((current) => nextHeaderSort(current, columnId as TradeColumnId, {
+            firstDirection: columnId === "ticker" || columnId === "asset" || columnId === "side" || columnId === "owner" ? "asc" : "desc",
+          }));
         }}
         getItemKey={(trade) => trade.id}
         renderCell={renderCongressTradeCell}
+        selectedTextOverridesCellColor
         emptyStateTitle={emptyTitle}
         showHorizontalScrollbar={false}
         scrollRef={tradeScrollRef}

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

@@ -1,5 +1,5 @@
 import { usePaneFooter } from "../../../components";
-import { formatTimeAgo } from "../../../utils/format";
+import { formatTimeAgo } from "../../../utils/datetime-format";
 import type {
   CloudCongressHousePayload,
   CloudCongressTradePayload,