gloomberb 0.9.6 → 0.9.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gloomberb",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "description": "Market research and portfolio tracker for the terminal",
   "module": "src/index.tsx",
   "type": "module",

package/src/pane-settings.test.ts

@@ -10,6 +10,7 @@ describe("pane settings helpers", () => {
 
     expect(portfolioPane?.settings).toMatchObject({
       collectionScope: "all",
+      viewMode: "table",
     });
     expect(portfolioPane?.settings?.columnIds).toEqual(DEFAULT_PORTFOLIO_COLUMN_IDS);
     expect(detailPane?.settings).toEqual({

package/src/plugins/builtin/portfolio-list/index.test.ts

@@ -1,11 +1,13 @@
 import { describe, expect, test } from "bun:test";
 import { createDefaultConfig } from "../../../types/config";
+import type { Quote, TickerFinancials } from "../../../types/financials";
 import type { BrokerAccount } from "../../../types/trading";
 import type { TickerRecord } from "../../../types/ticker";
 import type { PortfolioSummaryTotals } from "./metrics";
 import { buildPortfolioSummarySegments } from "./summary";
 import { portfolioListPlugin, shouldToggleCashMarginDrawer } from ".";
-import { selectStreamTickers } from "./pane/data";
+import { needsVisibleQuoteWatchdogRefresh, selectStreamTickers } from "./pane/data";
+import { buildPortfolioPaneSettingsDef, getPortfolioPaneSettings } from "./settings";
 
 function ticker(symbol: string): TickerRecord {
   return {
@@ -132,6 +134,43 @@ describe("selectStreamTickers", () => {
   });
 });
 
+describe("visible quote refresh predicates", () => {
+  function quote(overrides: Partial<Quote> = {}): Quote {
+    return {
+      symbol: "AAPL",
+      price: 125,
+      currency: "USD",
+      change: 5,
+      changePercent: 4.17,
+      lastUpdated: 1_700_000_000_000,
+      ...overrides,
+    };
+  }
+
+  function financials(quoteValue: Quote | undefined): TickerFinancials {
+    return {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: [],
+      quote: quoteValue,
+    };
+  }
+
+  test("refreshes visible quotes when the local stream timestamp is too old", () => {
+    const now = 1_700_000_120_000;
+    expect(needsVisibleQuoteWatchdogRefresh(
+      financials(quote({ lastUpdated: now, receivedAt: now - 61_000 })),
+      now,
+      60_000,
+    )).toBe(true);
+    expect(needsVisibleQuoteWatchdogRefresh(
+      financials(quote({ lastUpdated: now, receivedAt: now - 10_000 })),
+      now,
+      60_000,
+    )).toBe(false);
+  });
+});
+
 describe("portfolio list pane templates", () => {
   test("create panes with default all-collection settings", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-portfolio-list-template");
@@ -154,3 +193,15 @@ describe("portfolio list pane templates", () => {
     expect(portfolioInstance).toEqual({ params: { collectionId: "main" } });
   });
 });
+
+describe("portfolio list pane settings", () => {
+  test("exposes view mode only for portfolio collections", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-portfolio-list-settings");
+    const settings = getPortfolioPaneSettings({ viewMode: "grid" });
+    const portfolioFields = buildPortfolioPaneSettingsDef(config, settings, "main").fields.map((field) => field.key);
+    const watchlistFields = buildPortfolioPaneSettingsDef(config, settings, "watchlist").fields.map((field) => field.key);
+
+    expect(portfolioFields).toContain("viewMode");
+    expect(watchlistFields).not.toContain("viewMode");
+  });
+});

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

@@ -48,6 +48,7 @@ export const portfolioListPlugin: GloomPlugin = {
       settings: (context) => buildPortfolioPaneSettingsDef(
         context.config,
         getPortfolioPaneSettings(context.settings),
+        context.activeCollectionId,
       ),
     },
   ],

package/src/plugins/builtin/portfolio-list/pane/data.ts

@@ -5,11 +5,15 @@ import type { TickerFinancials } from "../../../../types/financials";
 import type { TickerRecord } from "../../../../types/ticker";
 import type { CollectionSortPreference } from "../../../../state/app/context";
 import { isQuoteStaleForCurrentSession } from "../../../../market-data/quotes/freshness";
+import { resolveQuoteAgeTimestamp } from "../../../../market-data/quotes/time";
 import { compareSortValues } from "../../../../utils/sort-values";
 import { getSortValue, type ColumnContext } from "../metrics";
 import type { ResolvedPortfolioAccountState } from "../summary";
 
-export const VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS = 5 * 60_000;
+export const VISIBLE_QUOTE_REFRESH_COOLDOWN_MS = 60_000;
+export const VISIBLE_QUOTE_STREAM_MAX_AGE_MS = 60_000;
+export const VISIBLE_QUOTE_STREAM_WATCHDOG_MS = 30_000;
+export const VISIBLE_SNAPSHOT_REFRESH_COOLDOWN_MS = 5 * 60_000;
 export const VISIBLE_FINANCIAL_WARMUP_DELAY_MS = 350;
 export const VISIBLE_SNAPSHOT_WARMUP_BATCH_LIMIT = 3;
 
@@ -40,6 +44,16 @@ export function needsVisibleQuoteWarmup(financials: TickerFinancials | undefined
   return !financials?.quote || isQuoteStaleForCurrentSession(financials.quote, now);
 }
 
+export function needsVisibleQuoteWatchdogRefresh(
+  financials: TickerFinancials | undefined,
+  now = Date.now(),
+  maxAgeMs = VISIBLE_QUOTE_STREAM_MAX_AGE_MS,
+): boolean {
+  if (needsVisibleQuoteWarmup(financials, now)) return true;
+  const quoteTimestamp = resolveQuoteAgeTimestamp(financials?.quote, now);
+  return quoteTimestamp == null || now - quoteTimestamp >= maxAgeMs;
+}
+
 export function needsVisibleSnapshotWarmup(
   ticker: TickerRecord,
   financials: TickerFinancials | undefined,

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

@@ -690,6 +690,13 @@ describe("PortfolioListPane cash and margin UI", () => {
   test("renders portfolio grid from portfolio table values and opens the selected ticker", async () => {
     const portfolioId = "broker:ibkr-flex:DU12345";
     const config = createPortfolioConfig(portfolioId, [createBrokerInstance("flex")]);
+    const instance = config.layout.instances.find((entry) => entry.instanceId === TEST_PANE_ID);
+    if (instance) {
+      instance.settings = {
+        ...(instance.settings ?? {}),
+        viewMode: "grid",
+      };
+    }
     const pinned: Array<{ symbol: string; options: { floating?: boolean; paneType?: string } | undefined }> = [];
     const runtime = createTestPluginRuntime({
       pinTicker: (symbol, options) => {
@@ -702,12 +709,6 @@ describe("PortfolioListPane cash and margin UI", () => {
         config={config}
         collectionId={portfolioId}
         runtime={runtime}
-        stateMutator={(state) => {
-          state.paneState[TEST_PANE_ID] = {
-            ...state.paneState[TEST_PANE_ID],
-            viewMode: "grid",
-          };
-        }}
       />,
       { width: 100, height: 12 },
     );
@@ -715,7 +716,6 @@ describe("PortfolioListPane cash and margin UI", () => {
     await flushFrame();
 
     const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("Grid");
     expect(frame).toContain("AAPL");
     expect(frame).toContain("1.3k");
     expect(frame).toContain("+4.17%");
@@ -728,6 +728,32 @@ describe("PortfolioListPane cash and margin UI", () => {
     expect(pinned).toEqual([{ symbol: "AAPL", options: { floating: true, paneType: TICKER_RESEARCH_PANE_ID } }]);
   });
 
+  test("keeps watchlists in table view when grid is saved on the pane", async () => {
+    const config = createManualCollectionConfig("watchlist");
+    const instance = config.layout.instances.find((entry) => entry.instanceId === TEST_PANE_ID);
+    if (instance) {
+      instance.settings = {
+        ...(instance.settings ?? {}),
+        viewMode: "grid",
+      };
+    }
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId="watchlist"
+        ticker={makeTicker({ portfolios: [], watchlists: ["watchlist"], positions: [] })}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("TICKER");
+    expect(frame).toContain("AAPL");
+  });
+
   test("keeps option avg cost on premium scale and multiplies quoted value by contract size", async () => {
     const portfolioId = "broker:ibkr-flex:DU12345";
     const optionTicker = "SPY  260619C00500000";
@@ -965,6 +991,88 @@ describe("PortfolioListPane cash and margin UI", () => {
     expect(frame).toContain("22.0");
   });
 
+  test("force-refreshes stale quote data for visible rows", async () => {
+    const config = createPortfolioConfigWithColumns(
+      "broker:ibkr-flex:DU12345",
+      ["ticker", "price", "day_pnl"],
+      [createBrokerInstance("flex")],
+    );
+    const staleQuote = makeQuote({
+      price: 120,
+      change: 0,
+      changePercent: 0,
+      marketState: "PRE",
+      lastUpdated: Date.now() - 24 * 60 * 60 * 1000,
+    });
+    const batchOptions: Array<{ forceRefresh?: boolean } | undefined> = [];
+    const provider: DataProvider = {
+      id: "test-provider",
+      name: "Test Provider",
+      async getTickerFinancials() {
+        return {
+          annualStatements: [],
+          quarterlyStatements: [],
+          priceHistory: [],
+          quote: staleQuote,
+        };
+      },
+      async getQuotesBatch(targets, options) {
+        batchOptions.push(options);
+        return targets.map((target) => ({
+          target,
+          quote: makeQuote({
+            symbol: target.symbol,
+            price: 126,
+            change: 6,
+            changePercent: 5,
+            marketState: "PRE",
+            preMarketPrice: 126,
+            preMarketChange: 6,
+            preMarketChangePercent: 5,
+          }),
+        }));
+      },
+      async getQuote(symbol) {
+        return makeQuote({ symbol, price: 126 });
+      },
+      async getExchangeRate() {
+        return 1;
+      },
+      async search() {
+        return [];
+      },
+      async getArticleSummary() {
+        return null;
+      },
+      async getPriceHistory() {
+        return [];
+      },
+      subscribeQuotes() {
+        return () => {};
+      },
+    };
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+
+    testSetup = await testRender(
+      <PortfolioHarness
+        config={config}
+        collectionId="broker:ibkr-flex:DU12345"
+        quote={staleQuote}
+      />,
+      { width: 100, height: 12 },
+    );
+
+    await flushFrame();
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 380));
+    });
+    await flushFrame();
+
+    expect(batchOptions.some((options) => options?.forceRefresh === true)).toBe(true);
+    expect(testSetup.captureCharFrame()).toContain("126");
+  });
+
   test("shows cached market cap on reopen for broker-linked rows", async () => {
     const dbPath = createTempDbPath("cached-reopen-market-cap");
     const persistence = new AppPersistence(dbPath);

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

@@ -13,6 +13,7 @@ import {
   useAppSelector,
   usePaneCollection,
   usePaneInstance,
+  usePaneSettingValue,
   usePaneStateValue,
   type CollectionSortPreference,
 } from "../../../../state/app/context";
@@ -33,6 +34,7 @@ import {
   resolveActiveCollectionId,
   resolveScopedCollectionEntries,
   resolveVisibleColumns,
+  type PortfolioViewMode,
 } from "../settings";
 import { useQuoteFlashMap } from "../../../../components/quote-flash";
 import { PortfolioTickerTable } from "../table";
@@ -50,8 +52,6 @@ import {
 import { usePortfolioPaneStreaming } from "./streaming";
 import { usePortfolioSupplementalData } from "./supplemental";
 
-type PortfolioViewMode = "table" | "grid";
-
 export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const { pinTicker } = usePluginTickerActions();
   const paneInstance = usePaneInstance();
@@ -68,7 +68,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   const [committedCursorSymbol, setCommittedCursorSymbol] = usePaneStateValue<string | null>("cursorSymbol", null);
   const [collectionSorts, setCollectionSorts] = usePaneStateValue<Record<string, CollectionSortPreference>>("collectionSorts", {});
   const [cashDrawerExpanded, setCashDrawerExpanded] = usePaneStateValue<boolean>("cashDrawerExpanded", false);
-  const [viewMode, setViewMode] = usePaneStateValue<PortfolioViewMode>("viewMode", "table");
+  const [, setViewMode] = usePaneSettingValue<PortfolioViewMode>("viewMode", "table");
 
   const [now, setNow] = useState(Date.now());
   const [streamWindow, setStreamWindow] = useState({ start: 0, end: 24 });
@@ -101,6 +101,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
       ? config.portfolios.find((portfolio) => portfolio.id === activeCollectionId) ?? null
       : null
   ), [activeCollectionId, config.portfolios, isPortfolioTab]);
+  const viewMode: PortfolioViewMode = isPortfolioTab ? paneSettings.viewMode : "table";
 
   const tickers = useMemo(
     () => getCollectionTickersFromConfig(config, tickersBySymbol, activeCollectionId),
@@ -178,8 +179,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
     ? (cashDrawerExpanded ? Math.min(6, Math.max(3, 2 + accountState.visibleCashBalances.length)) : 1)
     : 0;
   const showCollectionTabs = visibleCollections.length > 1;
-  const viewTabsHeight = 1;
-  const headerHeight = viewTabsHeight + (showCollectionTabs ? 1 : 0);
+  const headerHeight = showCollectionTabs ? 1 : 0;
   const drawerHeight = showCashDrawer
     ? Math.min(requestedDrawerHeight, Math.max(1, height - (headerHeight + 2)))
     : 0;
@@ -220,8 +220,9 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   }, [pinTicker]);
 
   const toggleViewMode = useCallback(() => {
+    if (!isPortfolioTab) return;
     setViewMode((current) => current === "table" ? "grid" : "table");
-  }, [setViewMode]);
+  }, [isPortfolioTab, setViewMode]);
 
   const handleRowActivate = useCallback((ticker: TickerRecord) => {
     flushCursorSymbol(ticker.metadata.ticker);
@@ -254,7 +255,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
       return true;
     }
 
-    if (key === "s") {
+    if (key === "s" && isPortfolioTab) {
       event.preventDefault?.();
       event.stopPropagation?.();
       toggleViewMode();
@@ -265,6 +266,7 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
   }, [
     cashDrawerExpanded,
     focused,
+    isPortfolioTab,
     openTickerFloating,
     safeSelectedIdx,
     setCashDrawerExpanded,
@@ -379,25 +381,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
 
   return (
     <Box flexDirection="column" width={width} height={height}>
-      <Box flexDirection="column" height={headerHeight}>
-        <Box flexDirection="row" height={1}>
-          <Box flexShrink={1} overflow="hidden">
-            <Tabs
-              tabs={[
-                { label: "Table", value: "table" },
-                { label: "Grid", value: "grid" },
-              ]}
-              activeValue={viewMode}
-              onSelect={(value) => setViewMode(value as PortfolioViewMode)}
-              compact
-              variant="bare"
-              focused={focused && !quickAddFocused}
-              keyboardNavigation={false}
-            />
-          </Box>
-        </Box>
-
-        {showCollectionTabs && (
+      {showCollectionTabs && (
+        <Box flexDirection="column" height={headerHeight}>
           <Box flexDirection="row" height={1}>
             <Box flexShrink={1} overflow="hidden">
               <Tabs
@@ -409,8 +394,8 @@ export function PortfolioListPane({ focused, width, height }: PaneProps) {
               />
             </Box>
           </Box>
-        )}
-      </Box>
+        </Box>
+      )}
 
       {viewMode === "table" ? (
         <PortfolioTickerTable

package/src/plugins/builtin/portfolio-list/pane/streaming.ts

@@ -5,10 +5,13 @@ import { useQuoteStreaming } from "../../../../state/hooks/quote-streaming";
 import type { TickerFinancials } from "../../../../types/financials";
 import type { TickerRecord } from "../../../../types/ticker";
 import {
-  VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS,
   VISIBLE_FINANCIAL_WARMUP_DELAY_MS,
+  VISIBLE_QUOTE_REFRESH_COOLDOWN_MS,
+  VISIBLE_QUOTE_STREAM_WATCHDOG_MS,
   VISIBLE_SNAPSHOT_WARMUP_BATCH_LIMIT,
+  VISIBLE_SNAPSHOT_REFRESH_COOLDOWN_MS,
   needsVisibleQuoteWarmup,
+  needsVisibleQuoteWatchdogRefresh,
   needsVisibleSnapshotWarmup,
   selectStreamTickers,
   visibleWarmupKey,
@@ -90,7 +93,7 @@ export function usePortfolioPaneStreaming({
       if (
         needsVisibleQuoteWarmup(financials, nowTimestamp)
         && !warmupInFlightRef.current.has(quoteKey)
-        && nowTimestamp - (warmupAttemptRef.current.get(quoteKey) ?? 0) >= VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS
+        && nowTimestamp - (warmupAttemptRef.current.get(quoteKey) ?? 0) >= VISIBLE_QUOTE_REFRESH_COOLDOWN_MS
       ) {
         quoteQueue.push(ticker);
         continue;
@@ -100,7 +103,7 @@ export function usePortfolioPaneStreaming({
       if (
         needsVisibleSnapshotWarmup(ticker, financials, visibleWarmupRequirements)
         && !warmupInFlightRef.current.has(snapshotKey)
-        && nowTimestamp - (warmupAttemptRef.current.get(snapshotKey) ?? 0) >= VISIBLE_FINANCIAL_REFRESH_COOLDOWN_MS
+        && nowTimestamp - (warmupAttemptRef.current.get(snapshotKey) ?? 0) >= VISIBLE_SNAPSHOT_REFRESH_COOLDOWN_MS
       ) {
         snapshotQueue.push(ticker);
       }
@@ -130,7 +133,7 @@ export function usePortfolioPaneStreaming({
       try {
         await Promise.allSettled([
           quoteEntries.length > 0
-            ? sharedCoordinator.loadQuotesBatch(quoteEntries.map((entry) => entry.instrument))
+            ? sharedCoordinator.loadQuotesBatch(quoteEntries.map((entry) => entry.instrument), { forceRefresh: true })
             : Promise.resolve(),
           snapshotEntries.length > 0
             ? sharedCoordinator.loadSnapshotsBatch(snapshotEntries.map((entry) => entry.instrument))
@@ -155,5 +158,52 @@ export function usePortfolioPaneStreaming({
     };
   }, [appActive, financialsMap, focused, sharedCoordinator, visibleFinancialTickers, visibleWarmupRequirements]);
 
+  useEffect(() => {
+    if (!appActive) return;
+    if (!focused) return;
+    if (!sharedCoordinator) return;
+
+    let cancelled = false;
+    const runWatchdog = async (): Promise<void> => {
+      const nowTimestamp = Date.now();
+      const quoteEntries = visibleFinancialTickers.flatMap((ticker) => {
+        const financials = financialsMap.get(ticker.metadata.ticker);
+        const key = visibleWarmupKey("quote", ticker);
+        if (
+          !needsVisibleQuoteWatchdogRefresh(financials, nowTimestamp)
+          || warmupInFlightRef.current.has(key)
+          || nowTimestamp - (warmupAttemptRef.current.get(key) ?? 0) < VISIBLE_QUOTE_REFRESH_COOLDOWN_MS
+        ) {
+          return [];
+        }
+        const instrument = instrumentFromTicker(ticker, ticker.metadata.ticker);
+        if (!instrument) return [];
+        warmupInFlightRef.current.add(key);
+        warmupAttemptRef.current.set(key, nowTimestamp);
+        return [{ key, instrument }];
+      });
+      if (quoteEntries.length === 0) return;
+
+      try {
+        await sharedCoordinator.loadQuotesBatch(quoteEntries.map((entry) => entry.instrument), { forceRefresh: true });
+      } catch {
+        // Best-effort watchdog for visible rows only.
+      } finally {
+        for (const entry of quoteEntries) {
+          warmupInFlightRef.current.delete(entry.key);
+        }
+      }
+    };
+
+    const intervalId = setInterval(() => {
+      if (!cancelled && mountedRef.current) void runWatchdog();
+    }, VISIBLE_QUOTE_STREAM_WATCHDOG_MS);
+
+    return () => {
+      cancelled = true;
+      clearInterval(intervalId);
+    };
+  }, [appActive, financialsMap, focused, sharedCoordinator, visibleFinancialTickers]);
+
   useQuoteStreaming(streamTargets);
 }

package/src/plugins/builtin/portfolio-list/settings.ts

@@ -3,11 +3,13 @@ import { DEFAULT_COLUMNS, DEFAULT_PORTFOLIO_COLUMN_IDS, type AppConfig, type Col
 import { PRICE_SPARKLINE_COLUMN_ID, PRICE_SPARKLINE_PERIOD_LABEL } from "../../../components/price-sparkline/view";
 
 type CollectionScope = "all" | "portfolios" | "watchlists" | "custom";
+export type PortfolioViewMode = "table" | "grid";
 
 export interface PortfolioPaneSettings {
   columnIds: string[];
   collectionScope: CollectionScope;
   visibleCollectionIds: string[];
+  viewMode: PortfolioViewMode;
   hideHeader: boolean;
   hideCash: boolean;
 }
@@ -95,11 +97,27 @@ const COLLECTION_SCOPE_OPTIONS: PaneSettingOption[] = [
     description: "Choose exactly which collections this pane should show.",
   },
 ];
+const VIEW_MODE_OPTIONS: PaneSettingOption[] = [
+  {
+    value: "table",
+    label: "Table",
+    description: "Show positions in the portfolio table.",
+  },
+  {
+    value: "grid",
+    label: "Grid",
+    description: "Show positions in the portfolio grid.",
+  },
+];
 
 function isCollectionScope(value: unknown): value is CollectionScope {
   return value === "all" || value === "portfolios" || value === "watchlists" || value === "custom";
 }
 
+function isPortfolioViewMode(value: unknown): value is PortfolioViewMode {
+  return value === "table" || value === "grid";
+}
+
 function filterCollectionEntries(entries: CollectionEntry[], settings: PortfolioPaneSettings): CollectionEntry[] {
   switch (settings.collectionScope) {
     case "portfolios":
@@ -142,6 +160,7 @@ export function getPortfolioPaneSettings(settings: Record<string, unknown> | und
     columnIds: columnIds.length > 0 ? columnIds : DEFAULT_PORTFOLIO_COLUMN_IDS,
     collectionScope: isCollectionScope(settings?.collectionScope) ? settings.collectionScope : "all",
     visibleCollectionIds,
+    viewMode: isPortfolioViewMode(settings?.viewMode) ? settings.viewMode : "table",
     hideHeader: settings?.hideHeader === true,
     hideCash: settings?.hideCash === true,
   };
@@ -218,9 +237,15 @@ export function resolveVisibleColumns(columnIds: string[], isPortfolioTab: boole
     .filter((column) => isPortfolioTab || !PORTFOLIO_ONLY_COLUMN_IDS.has(column.id));
 }
 
-export function buildPortfolioPaneSettingsDef(config: AppConfig, settings: PortfolioPaneSettings): PaneSettingsDef {
+export function buildPortfolioPaneSettingsDef(
+  config: AppConfig,
+  settings: PortfolioPaneSettings,
+  activeCollectionId?: string | null,
+): PaneSettingsDef {
   const collectionEntries = getCollectionEntries(config);
   const allCollectionOptions = resolveCollectionOptions(collectionEntries);
+  const activeCollectionIsPortfolio = !!activeCollectionId
+    && config.portfolios.some((portfolio) => portfolio.id === activeCollectionId);
 
   const fields: PaneSettingsDef["fields"] = [
     {
@@ -241,6 +266,15 @@ export function buildPortfolioPaneSettingsDef(config: AppConfig, settings: Portf
     },
   ];
 
+  if (activeCollectionIsPortfolio) {
+    fields.push({
+      key: "viewMode",
+      label: "View",
+      type: "select",
+      options: VIEW_MODE_OPTIONS,
+    });
+  }
+
   if (settings.collectionScope === "custom") {
     fields.push({
       key: "visibleCollectionIds",
@@ -266,6 +300,7 @@ export function buildPortfolioPaneSettingsDef(config: AppConfig, settings: Portf
       ...settings,
       columnIds: [...settings.columnIds],
       visibleCollectionIds: [...settings.visibleCollectionIds],
+      viewMode: settings.viewMode,
     },
     fields,
   };

package/src/types/config.ts

@@ -216,6 +216,7 @@ const DEFAULT_HOME_LAYOUT: LayoutConfig = {
         columnIds: [...DEFAULT_PORTFOLIO_COLUMN_IDS],
         collectionScope: "all",
         visibleCollectionIds: [],
+        viewMode: "table",
       },
       binding: { kind: "none" },
     },

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = "0.9.6";
+export const VERSION = "0.9.7";