gloomberb 0.9.2 → 0.9.3

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

@@ -6,6 +6,7 @@ import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../../
 import { PaneFooterBar, PaneFooterProvider } from "../../../components/layout/pane/footer";
 import {
   AppContext,
+  type AppAction,
   createInitialState,
   PaneInstanceProvider,
 } from "../../../state/app/context";
@@ -13,7 +14,7 @@ import { Box } from "../../../ui";
 import { cloneLayout, createDefaultConfig } from "../../../types/config";
 import { createTestPluginRuntime } from "../../../test-support/plugin-runtime";
 import type { DataProvider } from "../../../types/data-provider";
-import type { TickerFinancials } from "../../../types/financials";
+import type { PricePoint, TickerFinancials } from "../../../types/financials";
 import type { PluginRegistry } from "../../registry";
 import { PluginRenderProvider, type PluginRuntimeAccess } from "../../runtime";
 import { setSharedMarketDataForTests, setSharedRegistryForTests } from "../../registry";
@@ -30,6 +31,12 @@ let root: ReturnType<typeof createRoot> | undefined;
 let sharedCoordinator: MarketDataCoordinator | null = null;
 const actEnvironment = globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean };
 
+interface ComparisonHarnessOptions {
+  dispatch?: (action: AppAction) => void;
+  focused?: boolean;
+  focusedPaneId?: string | null;
+}
+
 function makeTicker(symbol: string, currency: string): TickerRecord {
   return {
     metadata: {
@@ -90,6 +97,13 @@ function makeDatedFinancials(symbol: string, currency: string, closes: Array<[st
   };
 }
 
+function makeDatedPriceHistory(closes: Array<[string, number]>): PricePoint[] {
+  return 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",
@@ -139,6 +153,30 @@ function createDatedProvider(financialsBySymbol: Record<string, TickerFinancials
   return provider;
 }
 
+function createRangeAwareDatedProvider({
+  fullHistoryBySymbol,
+  shortHistoryBySymbol,
+}: {
+  fullHistoryBySymbol: Record<string, Array<[string, number]>>;
+  shortHistoryBySymbol: Record<string, Array<[string, number]>>;
+}): DataProvider {
+  const financialsBySymbol = Object.fromEntries(
+    Object.entries(shortHistoryBySymbol).map(([symbol, history]) => [
+      symbol,
+      makeDatedFinancials(symbol, "USD", history),
+    ]),
+  );
+  const provider = createDatedProvider(financialsBySymbol);
+  const resolveHistory = (symbol: string, range: string) => makeDatedPriceHistory(
+    range === "5Y"
+      ? fullHistoryBySymbol[symbol] ?? shortHistoryBySymbol[symbol] ?? []
+      : shortHistoryBySymbol[symbol] ?? [],
+  );
+  provider.getPriceHistory = async (symbol, _exchange, range) => resolveHistory(symbol, range);
+  provider.getPriceHistoryForResolution = async (symbol, _exchange, range) => resolveHistory(symbol, range);
+  return provider;
+}
+
 function createRegistrySpy(spy: { selected: string[]; focused: string[] }): PluginRegistry {
   return {
     selectTicker: (symbol: string) => { spy.selected.push(symbol); },
@@ -171,7 +209,13 @@ function createComparisonHarness(
   tickers: TickerRecord[],
   financials: Array<[string, TickerFinancials]>,
   runtime: PluginRuntimeAccess,
+  options: ComparisonHarnessOptions = {},
 ) {
+  const {
+    dispatch = () => {},
+    focused = true,
+    focusedPaneId = focused ? TEST_PANE_ID : null,
+  } = options;
   const config = createDefaultConfig("/tmp/gloomberb-compare");
   const layout = {
     dockRoot: { kind: "pane" as const, instanceId: TEST_PANE_ID },
@@ -189,7 +233,7 @@ function createComparisonHarness(
     layouts: [{ name: "Default", layout: cloneLayout(layout) }],
   };
   const state = createInitialState(nextConfig);
-  state.focusedPaneId = TEST_PANE_ID;
+  state.focusedPaneId = focusedPaneId;
   state.tickers = new Map(tickers.map((ticker) => [ticker.metadata.ticker, ticker]));
   state.financials = new Map(financials);
 
@@ -202,7 +246,7 @@ function createComparisonHarness(
   }) => ReactElement;
 
   return (
-    <AppContext value={{ state, dispatch: () => {} }}>
+    <AppContext value={{ state, dispatch }}>
       <PaneInstanceProvider paneId={TEST_PANE_ID}>
         <PluginRenderProvider pluginId="comparison-chart" runtime={runtime}>
           <PaneFooterProvider>
@@ -211,11 +255,11 @@ function createComparisonHarness(
                 <ComparisonPane
                   paneId={TEST_PANE_ID}
                   paneType="comparison-chart"
-                  focused
+                  focused={focused}
                   width={120}
                   height={19}
                 />
-                <PaneFooterBar footer={footer} focused width={120} />
+                <PaneFooterBar footer={footer} focused={focused} width={120} />
               </Box>
             )}
           </PaneFooterProvider>
@@ -241,13 +285,14 @@ async function mountComparisonHarness(
   tickers: TickerRecord[],
   financials: Array<[string, TickerFinancials]>,
   spy: { selected: string[]; focused: string[]; settings?: string[] } = { selected: [], focused: [] },
+  options: ComparisonHarnessOptions = {},
 ) {
   actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
   testSetup = await createTestRenderer({ width: 120, height: 20 });
   root = createRoot(testSetup.renderer);
   await act(async () => {
     root!.render(
-      createComparisonHarness(settings, tickers, financials, createRuntimeSpy(spy)),
+      createComparisonHarness(settings, tickers, financials, createRuntimeSpy(spy), options),
     );
     await Promise.resolve();
     await new Promise((resolve) => setTimeout(resolve, 0));
@@ -399,6 +444,85 @@ describe("comparisonChartPlugin", () => {
     expect(frame).toMatch(/MSFT\s+0\.00%/);
   });
 
+  test("focuses the pane when an unfocused comparison plot is clicked", async () => {
+    const dispatched: AppAction[] = [];
+    const provider = createProvider({
+      AAPL: [100, 102, 104],
+      MSFT: [200, 202, 204],
+    }, {
+      AAPL: "USD",
+      MSFT: "USD",
+    });
+    setSharedMarketDataForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    await mountComparisonHarness({
+      axisMode: "percent",
+      symbols: ["AAPL", "MSFT"],
+      symbolsText: "AAPL, MSFT",
+    }, [
+      makeTicker("AAPL", "USD"),
+      makeTicker("MSFT", "USD"),
+    ], [
+      ["AAPL", makeFinancials("AAPL", "USD", [100, 102, 104])],
+      ["MSFT", makeFinancials("MSFT", "USD", [200, 202, 204])],
+    ], { selected: [], focused: [] }, {
+      dispatch: (action) => { dispatched.push(action); },
+      focused: false,
+      focusedPaneId: "ticker-detail:main",
+    });
+
+    await flushFrames();
+    await act(async () => {
+      await testSetup!.mockMouse.click(20, 8);
+      await testSetup!.renderOnce();
+    });
+
+    expect(dispatched).toContainEqual({ type: "FOCUS_PANE", paneId: TEST_PANE_ID });
+  });
+
+  test("keeps fixed return horizons independent from the selected chart range", async () => {
+    const shortHistory = {
+      AAPL: [["2025-01-02", 180], ["2026-01-02", 200]],
+      MSFT: [["2025-01-02", 300], ["2026-01-02", 330]],
+    } satisfies Record<string, Array<[string, number]>>;
+    const fullHistory = {
+      AAPL: [["2021-01-02", 100], ["2023-01-02", 150], ["2025-01-02", 180], ["2026-01-02", 200]],
+      MSFT: [["2021-01-02", 220], ["2023-01-02", 270], ["2025-01-02", 300], ["2026-01-02", 330]],
+    } satisfies Record<string, Array<[string, number]>>;
+    const provider = createRangeAwareDatedProvider({
+      fullHistoryBySymbol: fullHistory,
+      shortHistoryBySymbol: shortHistory,
+    });
+    setSharedMarketDataForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    await mountComparisonHarness({
+      axisMode: "percent",
+      rangePreset: "1Y",
+      chartResolution: "1d",
+      symbols: ["AAPL", "MSFT"],
+      symbolsText: "AAPL, MSFT",
+    }, [
+      makeTicker("AAPL", "USD"),
+      makeTicker("MSFT", "USD"),
+    ], [
+      ["AAPL", makeDatedFinancials("AAPL", "USD", shortHistory.AAPL)],
+      ["MSFT", makeDatedFinancials("MSFT", "USD", shortHistory.MSFT)],
+    ]);
+
+    await flushFrames(8);
+
+    const frame = testSetup!.captureCharFrame();
+    expect(frame).toContain("5Y");
+    expect(frame).toMatch(/> AAPL\s+\+11\.11%[^\n]*\+100\.00%/);
+    expect(frame).toMatch(/MSFT\s+\+10\.00%[^\n]*\+50\.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]]),

package/src/plugins/builtin/news/wire/read-state.ts

@@ -1,55 +1,32 @@
 import { useCallback, useMemo } from "react";
 import { usePluginState } from "../../../runtime";
+import {
+  DEFAULT_MAX_READ_IDS,
+  markReadId,
+  normalizeReadIds,
+  sameStringArray,
+} from "../../shared/read-state";
 
 export interface NewsReadState {
   articleIds: string[];
 }
 
 const NEWS_READ_STATE_SCHEMA_VERSION = 1;
-export const MAX_READ_ARTICLE_IDS = 2_000;
+export const MAX_READ_ARTICLE_IDS = DEFAULT_MAX_READ_IDS;
 
 const READ_STATE_KEY = "read-articles";
 const EMPTY_READ_STATE: NewsReadState = { articleIds: [] };
 
-function normalizeArticleId(articleId: string): string {
-  return articleId.trim();
-}
-
-function sameStringArray(left: string[], right: string[]): boolean {
-  if (left.length !== right.length) return false;
-  return left.every((value, index) => value === right[index]);
-}
-
 export function normalizeNewsReadState(state: NewsReadState): NewsReadState {
-  const seen = new Set<string>();
-  const articleIds: string[] = [];
-
-  for (const rawId of state.articleIds) {
-    if (typeof rawId !== "string") continue;
-    const articleId = normalizeArticleId(rawId);
-    if (!articleId || seen.has(articleId)) continue;
-    seen.add(articleId);
-    articleIds.push(articleId);
-    if (articleIds.length >= MAX_READ_ARTICLE_IDS) break;
-  }
-
-  return { articleIds };
+  return { articleIds: normalizeReadIds(state.articleIds, MAX_READ_ARTICLE_IDS) };
 }
 
 export function markNewsArticleRead(
   state: NewsReadState,
   articleId: string,
 ): NewsReadState {
-  const normalizedId = normalizeArticleId(articleId);
   const current = normalizeNewsReadState(state).articleIds;
-  if (!normalizedId) {
-    return sameStringArray(current, state.articleIds) ? state : { articleIds: current };
-  }
-
-  const articleIds = [
-    normalizedId,
-    ...current.filter((currentId) => currentId !== normalizedId),
-  ].slice(0, MAX_READ_ARTICLE_IDS);
+  const articleIds = markReadId(current, articleId, MAX_READ_ARTICLE_IDS);
 
   return sameStringArray(articleIds, state.articleIds) ? state : { articleIds };
 }

package/src/plugins/builtin/portfolio-list/cli/portfolio-command.ts

@@ -1,4 +1,5 @@
 import { saveConfig } from "../../../../data/config/store";
+import { countCollectionTickers } from "../../../../cli/helpers";
 import { resolveTickerForCli } from "../../../../cli/ticker-resolution";
 import { cliStyles, renderStat } from "../../../../utils/cli-output";
 import { formatMarketCostWithCurrency, formatMarketQuantity } from "../../../../market-data/market/format";
@@ -17,6 +18,28 @@ import { parseFiniteNumber, requireManualPortfolio } from "./shared";
 async function listCollections(ctx: CliCommandContext) {
   const { config, store, persistence } = await ctx.initConfigData();
   const tickers = await store.loadAllTickers();
+  if (ctx.cliOptions.format !== "text") {
+    ctx.printResult({
+      data: {
+        portfolios: config.portfolios.map((portfolio) => ({
+          id: portfolio.id,
+          name: portfolio.name,
+          currency: portfolio.currency,
+          brokerId: portfolio.brokerId ?? "",
+          brokerInstanceId: portfolio.brokerInstanceId ?? "",
+          brokerAccountId: portfolio.brokerAccountId ?? "",
+          tickerCount: countCollectionTickers(tickers, "portfolios", portfolio.id),
+        })),
+        watchlists: config.watchlists.map((watchlist) => ({
+          id: watchlist.id,
+          name: watchlist.name,
+          tickerCount: countCollectionTickers(tickers, "watchlists", watchlist.id),
+        })),
+      },
+    });
+    persistence.close();
+    return;
+  }
   console.log(renderCollectionOverview(config, tickers));
   persistence.close();
 }

package/src/plugins/builtin/portfolio-list/cli/watchlist-command.ts

@@ -129,6 +129,23 @@ async function removeTickerFromWatchlist(watchlistName: string, symbol: string,
 async function listWatchlists(ctx: CliCommandContext) {
   const { config, store, persistence } = await ctx.initConfigData();
   const tickers = await store.loadAllTickers();
+  const rows = config.watchlists.map((watchlist) => ({
+    id: watchlist.id,
+    name: watchlist.name,
+    tickerCount: countCollectionTickers(tickers, "watchlists", watchlist.id),
+  }));
+
+  if (ctx.cliOptions.format !== "text") {
+    ctx.printResult({ data: rows }, {
+      columns: [
+        { key: "name", header: "Watchlist" },
+        { key: "id", header: "ID" },
+        { key: "tickerCount", header: "Tickers", align: "right" },
+      ],
+    });
+    persistence.close();
+    return;
+  }
 
   console.log(renderSection("Watchlists"));
   if (config.watchlists.length === 0) {
@@ -143,10 +160,10 @@ async function listWatchlists(ctx: CliCommandContext) {
       { header: "ID" },
       { header: "Tickers", align: "right" },
     ],
-    config.watchlists.map((watchlist) => [
+    rows.map((watchlist) => [
       watchlist.name,
       watchlist.id,
-      String(countCollectionTickers(tickers, "watchlists", watchlist.id)),
+      String(watchlist.tickerCount),
     ]),
   ));
   persistence.close();

package/src/plugins/builtin/portfolio-list/pane/index.tsx

@@ -363,7 +363,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
                 activeValue={activeCollectionId}
                 onSelect={handleCollectionSelect}
                 compact
-                focused={focused}
+                focused={focused && !quickAddFocused}
               />
             </Box>
           </Box>

package/src/plugins/builtin/portfolio-list/quick-add/index.tsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, Input, Text, type InputRenderable } from "../../../../ui";
 import { useShortcut } from "../../../../react/input";
 import { useAppDispatch, useAppSelector } from "../../../../state/app/context";
+import { useAppInputCapture } from "../../../../state/app/input-capture";
 import { getSharedRegistry } from "../../../registry";
 import { usePluginAppActions } from "../../../runtime";
 import { colors, priceColor } from "../../../../theme/colors";
@@ -102,6 +103,7 @@ export function QuickAddTickerInput({
   const [inputValue, setInputValue] = useState("");
   const [validation, setValidation] = useState<QuickAddValidation>(IDLE_VALIDATION);
   const [submitting, setSubmitting] = useState(false);
+  useAppInputCapture(inputFocused && focused);
 
   const focusInput = useCallback(() => {
     if (!focused) return;
@@ -122,13 +124,6 @@ export function QuickAddTickerInput({
     onFocusChange?.(inputFocused && focused);
   }, [focused, inputFocused, onFocusChange]);
 
-  useEffect(() => {
-    if (inputFocused && focused) {
-      dispatch({ type: "SET_INPUT_CAPTURED", captured: true });
-      return () => dispatch({ type: "SET_INPUT_CAPTURED", captured: false });
-    }
-  }, [dispatch, focused, inputFocused]);
-
   useEffect(() => {
     if (!focused && inputFocused) {
       blurInput();

package/src/plugins/builtin/shared/read-state.ts

@@ -0,0 +1,43 @@
+export const DEFAULT_MAX_READ_IDS = 2_000;
+
+function normalizeReadId(readId: unknown): string {
+  return typeof readId === "string" ? readId.trim() : "";
+}
+
+export function sameStringArray(left: readonly string[], right: readonly string[]): boolean {
+  if (left.length !== right.length) return false;
+  return left.every((value, index) => value === right[index]);
+}
+
+export function normalizeReadIds(
+  readIds: readonly unknown[] | undefined,
+  maxIds = DEFAULT_MAX_READ_IDS,
+): string[] {
+  const seen = new Set<string>();
+  const normalizedIds: string[] = [];
+
+  for (const rawId of readIds ?? []) {
+    const readId = normalizeReadId(rawId);
+    if (!readId || seen.has(readId)) continue;
+    seen.add(readId);
+    normalizedIds.push(readId);
+    if (normalizedIds.length >= maxIds) break;
+  }
+
+  return normalizedIds;
+}
+
+export function markReadId(
+  readIds: readonly unknown[] | undefined,
+  readId: string,
+  maxIds = DEFAULT_MAX_READ_IDS,
+): string[] {
+  const normalizedId = normalizeReadId(readId);
+  const current = normalizeReadIds(readIds, maxIds);
+  if (!normalizedId) return current;
+
+  return [
+    normalizedId,
+    ...current.filter((currentId) => currentId !== normalizedId),
+  ].slice(0, maxIds);
+}

package/src/plugins/builtin/substack/article-detail.test.tsx

@@ -0,0 +1,10 @@
+import { describe, expect, test } from "bun:test";
+import { resolveArticleImageSize } from "./article-detail";
+
+describe("Substack article image sizing", () => {
+  test("uses extra detail pane room without shrinking compact panes", () => {
+    expect(resolveArticleImageSize(40)).toEqual({ width: 40, height: 12 });
+    expect(resolveArticleImageSize(86)).toEqual({ width: 86, height: 15 });
+    expect(resolveArticleImageSize(220)).toEqual({ width: 152, height: 26 });
+  });
+});

package/src/plugins/builtin/substack/article-detail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, type RefObject } from "react";
+import { memo, useCallback, useMemo, type RefObject } from "react";
 import { Box, ScrollBox, Text, TextAttributes, useRendererHost, type ScrollBoxRenderable } from "../../../ui";
 import { Spinner } from "../../../components";
 import { RemoteImage } from "../../../components/ui";
@@ -38,6 +38,25 @@ function wrappedTextProps(width: number) {
   } as const;
 }
 
+const ARTICLE_IMAGE_MAX_WIDTH = 152;
+const ARTICLE_IMAGE_MAX_HEIGHT = 26;
+const ARTICLE_IMAGE_MIN_HEIGHT = 6;
+const ARTICLE_IMAGE_LEGACY_HEIGHT_CAP = 14;
+
+export function resolveArticleImageSize(lineWidth: number) {
+  const safeLineWidth = Math.max(1, Math.floor(lineWidth));
+  const width = Math.min(safeLineWidth, ARTICLE_IMAGE_MAX_WIDTH);
+  const legacyHeight = Math.min(ARTICLE_IMAGE_LEGACY_HEIGHT_CAP, Math.floor(width * 0.32));
+  const expandedHeight = Math.floor(width * 0.18);
+  return {
+    width,
+    height: Math.max(ARTICLE_IMAGE_MIN_HEIGHT, Math.min(
+      ARTICLE_IMAGE_MAX_HEIGHT,
+      Math.max(legacyHeight, expandedHeight),
+    )),
+  };
+}
+
 function normalizedTwitterUsername(username: string | null | undefined): string | null {
   const normalized = username?.trim().replace(/^@/, "") ?? "";
   return /^[A-Za-z0-9_]{1,15}$/.test(normalized) ? normalized : null;
@@ -251,7 +270,7 @@ function ArticleBlockView({
   }
 }
 
-function ArticleRichContent({
+const ArticleRichContent = memo(function ArticleRichContent({
   blocks,
   fallbackText,
   fallbackImageUrls,
@@ -269,14 +288,20 @@ function ArticleRichContent({
   imageHeight: number;
 }) {
   const rendererHost = useRendererHost();
-  const resolvedBlocks = blocks.length > 0
-    ? blocks
-    : [
-      ...(fallbackText ? [{ type: "paragraph" as const, text: fallbackText }] : []),
-      ...fallbackImageUrls.map((url): SubstackContentBlock => ({ type: "image", url, alt: articleTitle })),
-    ];
-  const tickerText = resolvedBlocks.map(articleBlockText).filter(Boolean).join("\n");
-  const { catalog, openTicker } = useInlineTickers([tickerText], { liveQuotes: false });
+  const resolvedBlocks = useMemo(() => (
+    blocks.length > 0
+      ? blocks
+      : [
+        ...(fallbackText ? [{ type: "paragraph" as const, text: fallbackText }] : []),
+        ...fallbackImageUrls.map((url): SubstackContentBlock => ({ type: "image", url, alt: articleTitle })),
+      ]
+  ), [articleTitle, blocks, fallbackImageUrls, fallbackText]);
+  const tickerText = useMemo(
+    () => resolvedBlocks.map(articleBlockText).filter(Boolean).join("\n"),
+    [resolvedBlocks],
+  );
+  const tickerTexts = useMemo(() => [tickerText], [tickerText]);
+  const { catalog, openTicker } = useInlineTickers(tickerTexts, { liveQuotes: false });
   const openLink = useCallback((url: string) => {
     void rendererHost.openExternal(url);
   }, [rendererHost]);
@@ -307,9 +332,9 @@ function ArticleRichContent({
       ))}
     </Box>
   );
-}
+});
 
-export function ArticleDetail({
+export const ArticleDetail = memo(function ArticleDetail({
   article,
   detail,
   width,
@@ -331,8 +356,7 @@ export function ArticleDetail({
   const blocks = resolved?.contentBlocks ?? [];
   const fallbackImageUrls = resolved?.imageUrls.length ? resolved.imageUrls : article.imageUrls;
   const lineWidth = Math.max(1, width - 2);
-  const imageWidth = Math.min(lineWidth, 86);
-  const imageHeight = Math.max(6, Math.min(14, Math.floor(imageWidth * 0.32)));
+  const { width: imageWidth, height: imageHeight } = resolveArticleImageSize(lineWidth);
 
   return (
     <ScrollBox ref={scrollRef} scrollY focusable={false} flexGrow={1} paddingX={1}>
@@ -356,4 +380,4 @@ export function ArticleDetail({
       </Box>
     </ScrollBox>
   );
-}
+});

package/src/plugins/builtin/substack/article-stack.tsx

@@ -24,6 +24,7 @@ export function SubstackArticleStack({
   detailOpen,
   selectedArticle,
   selectedArticleId,
+  readArticleIds,
   detailContent,
   activePublication,
   activeFeedState,
@@ -45,6 +46,7 @@ export function SubstackArticleStack({
   detailOpen: boolean;
   selectedArticle: SubstackArticleSummary | null;
   selectedArticleId: string | null;
+  readArticleIds: ReadonlySet<string>;
   detailContent: ReactNode;
   activePublication: SubstackPublication | null;
   activeFeedState: ActiveFeedState;
@@ -78,7 +80,9 @@ export function SubstackArticleStack({
         return {
           text: article.title,
           color: selectedColor ?? colors.text,
-          attributes: TextAttributes.BOLD,
+          attributes: readArticleIds.has(article.id)
+            ? TextAttributes.NONE
+            : TextAttributes.BOLD,
         };
       case "read":
         return {
@@ -86,7 +90,7 @@ export function SubstackArticleStack({
           color: selectedColor ?? colors.textDim,
         };
     }
-  }, []);
+  }, [readArticleIds]);
 
   const bodyAfter = activePublication && sortedRows.length > 0 && (activeFeedState.loading || activeFeedState.loadingMore) ? (
     <Box height={1} paddingX={1}>

package/src/plugins/builtin/substack/feed-tabs.tsx

@@ -1,3 +1,4 @@
+import { memo, useMemo } from "react";
 import { Box } from "../../../ui";
 import { Tabs } from "../../../components";
 import { tabIdForPublication } from "./table";
@@ -7,7 +8,7 @@ import {
 } from "./types";
 import { tabLabel } from "./pane-state";
 
-export function SubstackFeedTabs({
+export const SubstackFeedTabs = memo(function SubstackFeedTabs({
   subscriptions,
   activeTab,
   focused,
@@ -20,16 +21,18 @@ export function SubstackFeedTabs({
   detailOpen: boolean;
   onSelect: (tabId: string) => void;
 }) {
+  const tabs = useMemo(() => [
+    { label: "Feed", value: SUBSTACK_FEED_TAB_ID },
+    ...subscriptions.map((publication) => ({
+      label: tabLabel(publication.name),
+      value: tabIdForPublication(publication),
+    })),
+  ], [subscriptions]);
+
   return (
     <Box height={1}>
       <Tabs
-        tabs={[
-          { label: "Feed", value: SUBSTACK_FEED_TAB_ID },
-          ...subscriptions.map((publication) => ({
-            label: tabLabel(publication.name),
-            value: tabIdForPublication(publication),
-          })),
-        ]}
+        tabs={tabs}
         activeValue={activeTab}
         onSelect={onSelect}
         compact
@@ -38,4 +41,4 @@ export function SubstackFeedTabs({
       />
     </Box>
   );
-}
+});

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

@@ -58,6 +58,7 @@ import {
   type LoadState,
   type PublicationFeedState,
 } from "./pane-state";
+import { useSubstackReadState } from "./read-state";
 
 const PUBLICATION_LOAD_MORE_THRESHOLD_ROWS = 8;
 
@@ -74,6 +75,7 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
     columnId: "published",
     direction: "desc",
   });
+  const { readArticleIds, markArticleRead } = useSubstackReadState();
   const homeFetchGenRef = useRef(0);
   const publicationFetchGenRef = useRef<Record<string, number>>({});
   const detailFetchGenRef = useRef(0);
@@ -206,12 +208,12 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
     loadPublication(activePublication, false);
   }, [activePublication, activePublicationTabId, loadPublication, publicationFeeds]);
 
-  const activeFeedState = activeFeedStateFromSources({
+  const activeFeedState = useMemo(() => activeFeedStateFromSources({
     activePublication,
     activePublicationTabId,
     publicationFeeds,
     home,
-  });
+  }), [activePublication, activePublicationTabId, home, publicationFeeds]);
 
   const loadMoreActivePublicationRows = useCallback(() => {
     if (!activePublication || !activePublicationTabId || detailOpen) return;
@@ -335,8 +337,9 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
 
   const openSelectedArticle = useCallback(() => {
     if (!selectedArticle?.url) return;
+    markArticleRead(selectedArticle.id);
     void rendererHost.openExternal(selectedArticle.url);
-  }, [rendererHost, selectedArticle]);
+  }, [markArticleRead, rendererHost, selectedArticle]);
 
   const handleLogin = useCallback((nextAuth: SubstackAuthState) => {
     setAuth(nextAuth);
@@ -477,7 +480,9 @@ export function SubstackPane({ focused, width, height }: PaneProps) {
         selectedArticle={selectedArticle}
         detailContent={detailContent}
         selectedArticleId={selectedArticleId}
+        readArticleIds={readArticleIds}
         onActivate={(article) => {
+          markArticleRead(article.id);
           setSelectedArticleId(article.id, { immediate: true });
           setDetailOpen(true);
         }}