gloomberb 0.8.1 → 0.9.0

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

@@ -0,0 +1,111 @@
+import type {
+  SubstackArticleSummary,
+  SubstackColumn,
+  SubstackPublication,
+  SubstackSortColumnId,
+  SubstackSortDirection,
+} from "./types";
+import { publicationKey } from "./normalize";
+import { timestamp } from "./utils";
+
+export function isSubstackSortColumnId(value: string): value is SubstackSortColumnId {
+  return value === "published" || value === "publication" || value === "title" || value === "read";
+}
+
+export function nextSubstackSort(
+  current: { columnId: SubstackSortColumnId; direction: SubstackSortDirection },
+  columnId: SubstackSortColumnId,
+): { columnId: SubstackSortColumnId; direction: SubstackSortDirection } {
+  if (current.columnId === columnId) {
+    return { columnId, direction: current.direction === "desc" ? "asc" : "desc" };
+  }
+  return {
+    columnId,
+    direction: columnId === "title" || columnId === "publication" ? "asc" : "desc",
+  };
+}
+
+export function sortedSubstackArticles(
+  articles: SubstackArticleSummary[],
+  sort: { columnId: SubstackSortColumnId; direction: SubstackSortDirection },
+): SubstackArticleSummary[] {
+  const direction = sort.direction === "asc" ? 1 : -1;
+  return [...articles].sort((a, b) => {
+    let result = 0;
+    switch (sort.columnId) {
+      case "published":
+        result = timestamp(a.publishedAt) - timestamp(b.publishedAt);
+        break;
+      case "publication":
+        result = (a.publicationName ?? "").localeCompare(b.publicationName ?? "");
+        break;
+      case "title":
+        result = a.title.localeCompare(b.title);
+        break;
+      case "read":
+        result = a.readMinutes - b.readMinutes;
+        break;
+    }
+    return result === 0 ? timestamp(b.publishedAt) - timestamp(a.publishedAt) : result * direction;
+  });
+}
+
+export function formatPublishedAt(value: string | null): string {
+  if (!value) return "-";
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "-";
+  const now = new Date();
+  const sameYear = date.getFullYear() === now.getFullYear();
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    ...(sameYear ? {} : { year: "2-digit" as const }),
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
+  return `${datePart} ${timePart}`;
+}
+
+export function formatReadTime(minutes: number): string {
+  return `${Math.max(1, Math.ceil(minutes))}m`;
+}
+
+export function formatWordCount(words: number): string {
+  if (words >= 1000) return `${(words / 1000).toFixed(words >= 10_000 ? 0 : 1)}k words`;
+  return `${Math.max(0, Math.round(words))} words`;
+}
+
+export function buildSubstackColumns(width: number, includePublication: boolean): SubstackColumn[] {
+  const publishedWidth = 13;
+  const readWidth = 5;
+  const publicationWidth = includePublication ? Math.max(12, Math.min(21, Math.floor(width * 0.18))) : 0;
+  const fixed = publishedWidth + readWidth + publicationWidth;
+  const titleWidth = Math.max(18, width - fixed - 4);
+  const columns: SubstackColumn[] = [
+    { id: "published", label: "Published", width: publishedWidth, align: "left" },
+  ];
+  if (includePublication) {
+    columns.push({ id: "publication", label: "Publication", width: publicationWidth, align: "left" });
+  }
+  columns.push(
+    { id: "title", label: "Title", width: titleWidth, align: "left", flexGrow: 1 },
+    { id: "read", label: "Read", width: readWidth, align: "right" },
+  );
+  return columns;
+}
+
+export function tabIdForPublication(publication: SubstackPublication): string {
+  return `pub:${publicationKey(publication)}`;
+}
+
+export function publicationFromTabId(
+  tabId: string,
+  publications: SubstackPublication[],
+): SubstackPublication | null {
+  if (!tabId.startsWith("pub:")) return null;
+  const key = tabId.slice(4);
+  return publications.find((publication) => publicationKey(publication) === key) ?? null;
+}

package/src/plugins/builtin/substack/types.ts

@@ -0,0 +1,71 @@
+import type { DataTableColumn } from "../../../components";
+
+export const SUBSTACK_PANE_ID = "substack";
+export const SUBSTACK_PLUGIN_ID = "substack";
+export const SUBSTACK_FEED_TAB_ID = "feed";
+
+export interface SubstackPublication {
+  id: string;
+  name: string;
+  subdomain: string | null;
+  baseUrl: string | null;
+  description: string | null;
+  logoUrl: string | null;
+  latestPublishedAt: string | null;
+}
+
+export interface ExtractedArticleContent {
+  text: string;
+  blocks: SubstackContentBlock[];
+  imageUrls: string[];
+  linkUrls: string[];
+  wordCount: number;
+  readMinutes: number;
+}
+
+export type SubstackContentBlock =
+  | { type: "heading"; text: string; level: number }
+  | { type: "paragraph"; text: string }
+  | { type: "quote"; text: string }
+  | { type: "listItem"; text: string }
+  | { type: "image"; url: string; alt: string | null }
+  | {
+    type: "embed";
+    kind: "tweet";
+    text: string;
+    url: string | null;
+    username: string | null;
+    authorName: string | null;
+    dateLabel: string | null;
+    imageUrls: string[];
+  }
+  | { type: "embed"; kind: "link" | "media"; text: string; url: string | null }
+  | { type: "divider" };
+
+export interface SubstackArticleSummary {
+  id: string;
+  title: string;
+  publicationId: string | null;
+  publicationName: string | null;
+  publicationSubdomain: string | null;
+  publicationBaseUrl: string | null;
+  url: string | null;
+  slug: string | null;
+  publishedAt: string | null;
+  subtitle: string | null;
+  previewText: string | null;
+  bodyHtml: string | null;
+  imageUrls: string[];
+  wordCount: number;
+  readMinutes: number;
+}
+
+export interface SubstackArticleDetail extends SubstackArticleSummary {
+  contentText: string;
+  contentBlocks: SubstackContentBlock[];
+  linkUrls: string[];
+}
+
+export type SubstackSortColumnId = "published" | "publication" | "title" | "read";
+export type SubstackSortDirection = "asc" | "desc";
+export type SubstackColumn = DataTableColumn & { id: SubstackSortColumnId };

package/src/plugins/builtin/substack/utils.ts

@@ -0,0 +1,131 @@
+import { decodeHtmlEntities } from "../../../utils/html-entities";
+import { normalizedHttpUrl } from "../../../utils/url";
+
+export type JsonRecord = Record<string, unknown>;
+
+function isRecord(value: unknown): value is JsonRecord {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+export function asRecord(value: unknown): JsonRecord | null {
+  return isRecord(value) ? value : null;
+}
+
+export function stringValue(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const trimmed = decodeHtmlEntities(value).replace(/\s+/g, " ").trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+export function rawStringValue(value: unknown): string | null {
+  if (typeof value !== "string") return null;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+}
+
+function numberValue(value: unknown): number | null {
+  if (typeof value === "number" && Number.isFinite(value)) return value;
+  if (typeof value === "string" && value.trim()) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  return null;
+}
+
+export function firstString(record: JsonRecord | null, keys: string[]): string | null {
+  if (!record) return null;
+  for (const key of keys) {
+    const value = stringValue(record[key]);
+    if (value) return value;
+  }
+  return null;
+}
+
+export function firstRawString(record: JsonRecord | null, keys: string[]): string | null {
+  if (!record) return null;
+  for (const key of keys) {
+    const value = rawStringValue(record[key]);
+    if (value) return value;
+  }
+  return null;
+}
+
+export function firstNumber(record: JsonRecord | null, keys: string[]): number | null {
+  if (!record) return null;
+  for (const key of keys) {
+    const value = numberValue(record[key]);
+    if (value != null) return value;
+  }
+  return null;
+}
+
+export function firstValue(record: JsonRecord | null, keys: string[]): unknown {
+  if (!record) return null;
+  for (const key of keys) {
+    if (record[key] != null) return record[key];
+  }
+  return null;
+}
+
+export function firstRecord(...values: unknown[]): JsonRecord | null {
+  for (const value of values) {
+    const record = asRecord(value);
+    if (record) return record;
+  }
+  return null;
+}
+
+export function parseDateIso(value: unknown): string | null {
+  if (value == null) return null;
+  if (typeof value === "number" && Number.isFinite(value)) {
+    const ms = value > 10_000_000_000 ? value : value * 1000;
+    const date = new Date(ms);
+    return Number.isNaN(date.getTime()) ? null : date.toISOString();
+  }
+  if (typeof value !== "string" || !value.trim()) return null;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? null : date.toISOString();
+}
+
+export function normalizeUrl(value: unknown, baseUrl?: string | null): string | null {
+  const raw = rawStringValue(value);
+  if (!raw) return null;
+  const direct = normalizedHttpUrl(raw);
+  if (direct) return direct;
+  if (!baseUrl) return null;
+  try {
+    const resolved = new URL(raw, baseUrl);
+    return normalizedHttpUrl(resolved.toString());
+  } catch {
+    return null;
+  }
+}
+
+export function uniqueStrings(values: Array<string | null | undefined>): string[] {
+  const seen = new Set<string>();
+  const result: string[] = [];
+  for (const value of values) {
+    if (!value || seen.has(value)) continue;
+    seen.add(value);
+    result.push(value);
+  }
+  return result;
+}
+
+export function timestamp(value: string | null | undefined): number {
+  if (!value) return 0;
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? 0 : date.getTime();
+}
+
+export function maxIso(a: string | null, b: string | null): string | null {
+  if (!a) return b;
+  if (!b) return a;
+  return timestamp(a) >= timestamp(b) ? a : b;
+}
+
+export function extractAttribute(tag: string, name: string): string | null {
+  const pattern = new RegExp(`\\b${name}\\s*=\\s*(?:"([^"]*)"|'([^']*)'|([^\\s>]+))`, "i");
+  const match = tag.match(pattern);
+  return rawStringValue(match?.[1] ?? match?.[2] ?? match?.[3] ?? null);
+}

package/src/plugins/builtin/thirteenf/pane.tsx

@@ -344,9 +344,13 @@ export function ThirteenFPane({ focused, width, height }: PaneProps) {
         ) : (
           <Box flexGrow={1} />
         )}
-        selectedIndex={selectedIndex}
-        onSelectIndex={(_index, row) => setSelectedId(row.id)}
-        onActivateIndex={(_index, row) => openDetail(row)}
+        selection={{
+          kind: "id",
+          selectedId,
+          getId: (row) => row.id,
+          onChange: (id) => setSelectedId(id),
+        }}
+        onActivate={openDetail}
         onRootKeyDown={handleRootKeyDown}
         rootWidth={width}
         rootBefore={rootBefore}
@@ -365,9 +369,6 @@ export function ThirteenFPane({ focused, width, height }: PaneProps) {
           ));
         }}
         getItemKey={(row) => row.id}
-        isSelected={(row) => row.id === selectedId}
-        onSelect={(row) => setSelectedId(row.id)}
-        onActivate={openDetail}
         renderCell={renderBrowserCell}
         emptyStateTitle={emptyTitle}
         showHorizontalScrollbar={false}
@@ -625,11 +626,13 @@ function FundDetailView({
           ) : (
             <Box flexGrow={1} />
           )}
-          selectedIndex={selectedFilingIndex}
-          onSelectIndex={(_index, row) => setFilingSelectedId(row.id)}
-          onActivateIndex={(_index, row) => {
-            openFilingInPane(row);
+          selection={{
+            kind: "id",
+            selectedId: filingSelectedId,
+            getId: (row) => row.id,
+            onChange: (id) => setFilingSelectedId(id),
           }}
+          onActivate={openFilingInPane}
           onDetailKeyDown={(event) => {
             if (event.name !== "o" || !openFiling?.url) return false;
             event.preventDefault?.();
@@ -648,11 +651,6 @@ function FundDetailView({
             columnId === "period" || columnId === "filed" ? "desc" : "desc",
           ))}
           getItemKey={(row) => row.id}
-          isSelected={(row) => row.id === filingSelectedId}
-          onSelect={(row) => setFilingSelectedId(row.id)}
-          onActivate={(row) => {
-            openFilingInPane(row);
-          }}
           renderCell={renderTimelineCell}
           emptyStateTitle="No 13F filings."
           showHorizontalScrollbar={false}
@@ -660,8 +658,12 @@ function FundDetailView({
       ) : (
         <DataTableView<FundHoldingRow, FundHoldingColumn>
           focused={focused}
-          selectedIndex={selectedHoldingIndex}
-          onSelectIndex={(_index, row) => setHoldingSelectedId(row.id)}
+          selection={{
+            kind: "id",
+            selectedId: holdingSelectedId,
+            getId: (row) => row.id,
+            onChange: (id) => setHoldingSelectedId(id),
+          }}
           rootWidth={width}
           columns={buildHoldingColumns(width)}
           items={visibleHoldingRows}
@@ -675,8 +677,6 @@ function FundDetailView({
             ));
           }}
           getItemKey={(row) => row.id}
-          isSelected={(row) => row.id === holdingSelectedId}
-          onSelect={(row) => setHoldingSelectedId(row.id)}
           onActivate={(row) => {
             if (row.ticker) pinTicker(row.ticker, { floating: true, paneType: TICKER_RESEARCH_PANE_ID });
           }}
@@ -795,9 +795,13 @@ function FilingDetailView({
     <Box flexDirection="column" width={width} flexGrow={1} overflow="hidden">
       <DataTableView<FilingPositionRow, FilingPositionColumn>
         focused={focused}
-        selectedIndex={selectedPositionIndex}
-        onSelectIndex={(_index, row) => setSelectedPositionId(row.id)}
-        onActivateIndex={(_index, row) => openPositionTicker(row)}
+        selection={{
+          kind: "id",
+          selectedId: selectedPositionId,
+          getId: (row) => row.id,
+          onChange: (id) => setSelectedPositionId(id),
+        }}
+        onActivate={openPositionTicker}
         onRootKeyDown={handlePositionKeyDown}
         rootWidth={width}
         rootBefore={summary}
@@ -814,9 +818,6 @@ function FilingDetailView({
           ));
         }}
         getItemKey={(row) => row.id}
-        isSelected={(row) => row.id === selectedPositionId}
-        onSelect={(row) => setSelectedPositionId(row.id)}
-        onActivate={openPositionTicker}
         renderCell={renderFilingPositionCell}
         emptyStateTitle={emptyTitle}
         showHorizontalScrollbar={false}

package/src/plugins/builtin/ticker-detail/data-panes/fundamental-graph/content.tsx

@@ -137,8 +137,11 @@ export function FundamentalGraphContent({
       <StaticBarChartSurface width={width} height={chartHeight} series={chartSeries} />
       <DataTableView<FundamentalGraphRow, FundamentalColumn>
         focused={focused}
-        selectedIndex={boundedSelectedIdx}
-        onSelectIndex={(index) => setSelectedIdx(index)}
+        selection={{
+          kind: "index",
+          selectedIndex: boundedSelectedIdx,
+          onChange: (index) => setSelectedIdx(index),
+        }}
         onRootKeyDown={handleKeyDown}
         rootWidth={width}
         rootHeight={tableHeight}
@@ -148,8 +151,6 @@ export function FundamentalGraphContent({
         sortDirection="asc"
         onHeaderClick={() => {}}
         getItemKey={(row) => row.key}
-        isSelected={(_row, index) => index === boundedSelectedIdx}
-        onSelect={(_row, index) => setSelectedIdx(index)}
         renderCell={renderCell}
         emptyStateTitle={loading ? "Loading fundamentals..." : "No graph data"}
       />

package/src/plugins/builtin/ticker-detail/data-panes/historical-prices.tsx

@@ -172,8 +172,11 @@ export function HistoricalPricesPane({ focused, width, height }: PaneProps) {
   return (
     <DataTableView<HistoricalPriceRow, HistoryColumn>
       focused={focused}
-      selectedIndex={boundedSelectedIdx}
-      onSelectIndex={(index) => setSelectedIdx(index)}
+      selection={{
+        kind: "index",
+        selectedIndex: boundedSelectedIdx,
+        onChange: (index) => setSelectedIdx(index),
+      }}
       onRootKeyDown={handleKeyDown}
       rootWidth={width}
       rootHeight={height}
@@ -183,8 +186,6 @@ export function HistoricalPricesPane({ focused, width, height }: PaneProps) {
       sortDirection="desc"
       onHeaderClick={() => {}}
       getItemKey={(row) => row.key}
-      isSelected={(_row, index) => index === boundedSelectedIdx}
-      onSelect={(_row, index) => setSelectedIdx(index)}
       renderCell={renderCell}
       emptyStateTitle={loading ? "Loading historical prices..." : "No historical prices"}
     />

package/src/plugins/builtin/ticker-detail/data-panes/provider-search.tsx

@@ -121,9 +121,12 @@ export function ProviderSearchPane({ focused, width, height }: PaneProps) {
   return (
     <DataTableView<InstrumentSearchResult, DataTableColumn & { id: "symbol" | "name" | "exchange" | "type" }>
       focused={focused}
-      selectedIndex={boundedSelectedIdx}
-      onSelectIndex={(index) => setSelectedIdx(index)}
-      onActivateIndex={(_index, row) => openResult(row)}
+      selection={{
+        kind: "index",
+        selectedIndex: boundedSelectedIdx,
+        onChange: (index) => setSelectedIdx(index),
+      }}
+      onActivate={(row) => openResult(row)}
       onRootKeyDown={handleKeyDown}
       rootWidth={width}
       rootHeight={height}
@@ -133,8 +136,6 @@ export function ProviderSearchPane({ focused, width, height }: PaneProps) {
       sortDirection="asc"
       onHeaderClick={() => {}}
       getItemKey={(row, index) => `${row.providerId}:${row.symbol}:${row.exchange}:${row.type}:${index}`}
-      isSelected={(_row, index) => index === boundedSelectedIdx}
-      onSelect={(_row, index) => setSelectedIdx(index)}
       renderCell={renderCell}
       emptyStateTitle={state.loading ? "Searching..." : query ? "No search results" : "No search query"}
     />

package/src/plugins/builtin/ticker-detail/financials/tab.tsx

@@ -380,19 +380,21 @@ export function ResolvedFinancialsTab({
         bodyScrollId={bodyScrollId}
         columns={columns}
         items={rows}
-        selectedIndex={effectiveSelectedIndex}
-        onSelectIndex={(_index, row) => {
-          setSelectedRowId(row.id);
+        selection={{
+          kind: "id",
+          selectedId: selectedRowId,
+          getId: (row) => row.id,
+          onChange: (_id, row, _index, reason) => {
+            setSelectedRowId(row.id);
+            if (reason === "pointer" && row.kind === "group" && row.toggleable) {
+              toggleGroup(row.id);
+            }
+          },
         }}
         sortColumnId={null}
         sortDirection="desc"
         onHeaderClick={() => {}}
         getItemKey={(row) => row.id}
-        isSelected={(_row, index) => index === effectiveSelectedIndex}
-        onSelect={(row) => {
-          setSelectedRowId(row.id);
-          if (row.kind === "group" && row.toggleable) toggleGroup(row.id);
-        }}
         onActivate={(row) => {
           if (row.kind === "group" && row.toggleable) toggleGroup(row.id);
         }}

package/src/plugins/builtin/ticker-detail/index.test.tsx

@@ -41,6 +41,7 @@ let detailHarnessState: ReturnType<typeof createInitialState> | null = null;
 let sharedCoordinator: MarketDataCoordinator | null = null;
 
 const runtime = createTestPluginRuntime();
+const TICKER_TAB_SETTLE_MS = 160;
 
 const DetailPane = tickerDetailPlugin.panes![0]!.component as (props: {
   paneId: string;
@@ -160,7 +161,7 @@ function setOptionsProvider(provider: DataProvider | undefined): void {
   setSharedMarketDataCoordinator(sharedCoordinator);
 }
 
-function makeRegistry(): PluginRegistry {
+function makeRegistry(options: { stubFundamentalGraphs?: boolean } = {}): PluginRegistry {
   const stubTab = (_props: { width: number; height: number; focused: boolean; onCapture: (capturing: boolean) => void }) => (
     <text>stub</text>
   );
@@ -168,6 +169,10 @@ function makeRegistry(): PluginRegistry {
   tickerDetailPlugin.setup?.({
     registerTickerResearchTab: (tab: TickerResearchTabDef) => tickerResearchTabs.set(tab.id, tab),
   } as any);
+  if (options.stubFundamentalGraphs) {
+    const tab = tickerResearchTabs.get("fundamental-graphs");
+    if (tab) tickerResearchTabs.set(tab.id, { ...tab, component: stubTab });
+  }
   for (const tab of [
     ["ibkr-trade", {
       id: "ibkr-trade",
@@ -280,6 +285,13 @@ async function flushFrame() {
   });
 }
 
+async function settleTickerTabCommit() {
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, TICKER_TAB_SETTLE_MS));
+    await testSetup!.renderOnce();
+  });
+}
+
 async function clickFrameText(text: string) {
   const lines = testSetup!.captureCharFrame().split("\n");
   const row = lines.findIndex((line) => line.includes(text));
@@ -482,7 +494,7 @@ describe("TickerResearchPane", () => {
   });
 
   test("lets ticker detail tab arrows leave the embedded financials tab", async () => {
-    setSharedRegistryForTests(makeRegistry());
+    setSharedRegistryForTests(makeRegistry({ stubFundamentalGraphs: true }));
     setOptionsProvider(createProvider(false));
 
     testSetup = await testRender(
@@ -506,6 +518,7 @@ describe("TickerResearchPane", () => {
     });
     await flushFrame();
 
+    await settleTickerTabCommit();
     expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("fundamental-graphs");
 
     await act(async () => {
@@ -514,6 +527,7 @@ describe("TickerResearchPane", () => {
     });
     await flushFrame();
 
+    await settleTickerTabCommit();
     expect(detailHarnessState?.paneState[TEST_PANE_ID]?.activeTabId).toBe("financials");
   });
 

package/src/plugins/builtin/ticker-detail/index.tsx

@@ -146,6 +146,7 @@ export const tickerDetailPlugin: GloomPlugin = {
       label: "Ticker Research",
       description: "Open another research pane for the selected ticker or current collection",
       keywords: ["new", "ticker", "research", "detail", "pane", "inspector"],
+      shortcut: { prefix: "T", argPlaceholder: "ticker", argKind: "ticker" },
       canCreate: (context) => context.activeTicker !== null || context.activeCollectionId !== null,
       createInstance: (context) => (
         context.activeTicker

package/src/plugins/builtin/ticker-detail/pane.tsx

@@ -14,6 +14,7 @@ import { useQuoteStreaming } from "../../../state/hooks/quote-streaming";
 import { getCollectionName, getCollectionTickerCount } from "../../../state/selectors";
 import { getSharedRegistry } from "../../registry";
 import { EmptyState, PaneFooterScope, Tabs } from "../../../components";
+import { useThrottledCommitValue } from "../../../react/use-throttled-commit-value";
 import { resolveOptionsTarget } from "../../../utils/options";
 import {
   buildVisibleTickerResearchTabs,
@@ -21,6 +22,8 @@ import {
   resolveLockedTabId,
 } from "./settings";
 
+const TICKER_RESEARCH_TAB_COMMIT_DELAY_MS = 120;
+
 function sameStringSet(left: Set<string>, right: Set<string>): boolean {
   if (left.size !== right.size) return false;
   for (const value of left) {
@@ -79,7 +82,16 @@ export function TickerResearchPane({ focused, width, height }: PaneProps) {
   useQuoteStreaming(streamingTargets);
 
   const { collectionId } = usePaneCollection();
-  const [activeTabId, setActiveTabId] = usePaneStateValue<string>("activeTabId", "overview");
+  const [committedActiveTabId, setCommittedActiveTabId] = usePaneStateValue<string>("activeTabId", "overview");
+  const {
+    value: activeTabId,
+    setValue: setActiveTabId,
+  } = useThrottledCommitValue(
+    committedActiveTabId,
+    setCommittedActiveTabId,
+    TICKER_RESEARCH_TAB_COMMIT_DELAY_MS,
+    { commitPendingOnUnmount: true },
+  );
   const [pluginCaptured, setPluginCaptured] = useState(false);
   const [mountedTabIds, setMountedTabIds] = useState<Set<string>>(() => new Set());
   const paneSettings = getTickerResearchPaneSettings(paneInstance?.settings);

package/src/plugins/builtin/world-indices/index.tsx

@@ -162,10 +162,16 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
   return (
     <DataTableView<WorldIndexTableRow, WorldIndexColumn>
       focused={focused}
-      selectedIndex={activeFlatIdx}
+      selection={{
+        kind: "id",
+        selectedId: selectedSymbol,
+        getId: (row) => row.type === "row" ? row.entry.symbol : `header-${row.region}`,
+        onChange: (_id, row, index) => {
+          if (row.type === "row") selectFlatIndex(index);
+        },
+      }}
       isNavigable={(row) => row.type === "row"}
-      onSelectIndex={selectFlatIndex}
-      onActivateIndex={(index) => openSelected(index)}
+      onActivate={(_row, index) => openSelected(index)}
       rootWidth={width}
       rootHeight={height}
       columns={columns}
@@ -174,9 +180,6 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
       sortDirection={sortPreference.direction}
       onHeaderClick={handleHeaderClick}
       getItemKey={(row) => row.type === "header" ? `header-${row.region}` : row.entry.symbol}
-      isSelected={(row) => row.type === "row" && row.entry.symbol === selectedSymbol}
-      onSelect={(_row, index) => selectFlatIndex(index)}
-      onActivate={(_row, index) => openSelected(index)}
       renderSectionHeader={(row) => row.type === "header"
         ? { text: REGION_LABELS[row.region] }
         : null}

package/src/plugins/catalog-ui.ts

@@ -2,6 +2,7 @@ import type { GloomPlugin } from "../types/plugin";
 import { portfolioListPlugin } from "./builtin/portfolio-list";
 import { newsPlugin } from "./builtin/news";
 import { notesPlugin } from "./builtin/notes";
+import { substackPlugin } from "./builtin/substack";
 import { aiPlugin } from "./builtin/ai";
 import { gloomberbCloudPlugin } from "./builtin/cloud";
 import { changelogPlugin } from "./builtin/changelog";
@@ -26,6 +27,7 @@ export const uiBuiltinPlugins: GloomPlugin[] = [
   ibkrPlugin,
   layoutManagerPlugin,
   newsPlugin,
+  substackPlugin,
   notesPlugin,
   aiPlugin,
   changelogPlugin,