@gloom-sh/terminal 0.0.0-stage → 0.19.0

package/src/plugins/builtin/members/breadth-pane.tsx

@@ -0,0 +1,82 @@
+import { useCallback, useMemo } from "react";
+import type { BreadthDay } from "../../../api-client/members";
+import { ChartTableHeader, DataTableView, PaneStatusBody, QueryBar, useChartTableSelection, usePaneNoticeFooter, usePaneStatusFooter, type DataTableColumn } from "../../../components";
+import { staticSeries } from "../../../components/chart/static/series";
+import { fitChartTableColumns } from "../../../components/chart-table/layout";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { useAsyncResource, useAutoRefresh, usePaneVisible, usePluginPaneState } from "../../../public/react";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PaneProps } from "../../../types/plugin";
+import { cachedBreadth, loadBreadth } from "./client";
+import { useLiveSessionRefresh } from "../shared/volatility/live-session";
+import { decimal } from "./model";
+
+const percent = (value: number | null) => value == null ? "--" : `${value.toFixed(1)}%`;
+const CHARTS = [{ value: "adLine", label: "A/D line" }, { value: "ma200", label: "Above 200D" }, { value: "ma50", label: "Above 50D" }, { value: "ma20", label: "Above 20D" }];
+type Metric = "adLine" | "ma200" | "ma50" | "ma20";
+const dateOf = (row: BreadthDay) => new Date(`${row.date}T00:00:00Z`);
+const keyOf = (row: BreadthDay) => row.date;
+const valueOf = (row: BreadthDay, metric: Metric) => metric === "adLine" ? row.adLine : row[metric].percent;
+const COLUMNS: DataTableColumn[] = [
+  { id: "date", label: "Date", width: 12, align: "left" },
+  ...["advances", "declines", "unchanged", "ma20", "ma50", "ma200", "newHighs", "newLows", "coverage"].map((id, index) => ({
+    id, label: ["Adv", "Dec", "Unch", ">20D %", ">50D %", ">200D %", "52W high", "52W low", "A/D covered"][index]!, width: index === 8 ? 13 : 10, flexGrow: 1, align: "right" as const,
+  })),
+];
+
+export function Breadth({ fund, width, height, focused, active }: Pick<PaneProps, "width" | "height" | "focused"> & { fund: string; active: boolean }) {
+  const colors = useThemeColors();
+  const visible = usePaneVisible();
+  const resource = useAsyncResource(useCallback((force: boolean) => loadBreadth(fund, force), [fund]), { initialData: useCallback(() => cachedBreadth(fund), [fund]) });
+  const data = resource.data?.payload;
+  const latest = data?.latest;
+  const [metric, setMetric] = usePluginPaneState<Metric>("breadth:metric", "adLine");
+  const [selected, setSelected] = usePluginPaneState<string | null>(`breadth:selected:${fund}`, null);
+  const history = useMemo(() => data ? [...data.history, ...(data.basis === "intraday" && data.latest ? [data.latest] : [])] : [], [data]);
+  const rows = useMemo(() => [...history].reverse(), [history]);
+  const columns = useMemo(() => fitChartTableColumns(COLUMNS, width, ["unchanged", "ma20", "ma50", "coverage"]), [width]);
+  const series = useMemo(() => [staticSeries(history.map(row => ({ date: dateOf(row), observedAt: new Date(row.asOf), value: valueOf(row, metric) })), {
+    id: `breadth-${metric}`, label: metric === "adLine" ? "Cumulative advances − declines" : `% above ${metric.slice(2)}-day average`,
+    color: colors.warning, calendarSpaced: true,
+  })], [history, metric, colors.warning]);
+  const link = useChartTableSelection({ rows, getId: keyOf, getDate: dateOf, selectedId: selected ?? latest?.date ?? null, onSelect: setSelected, focused });
+  // The resource keeps a failed load as its error (stale, and a warning below), so this refresh never rejects.
+  const sessionOpen = useLiveSessionRefresh(() => resource.load(true), data?.access === "realtime" ? 15_000 : 60_000, active && visible, resource.updatedAt).live;
+  useAutoRefresh(resource.updatedAt, () => { if (active && visible && !sessionOpen) void resource.load(data?.basis === "intraday"); });
+  usePaneRefreshKey(() => void resource.reload(), { focused, enabled: active });
+  usePaneStatusFooter({ registrationId: "members:breadth", loading: !!data && resource.loading,
+    stale: !!data && (data.stale || resource.data!.stale || !!resource.error), info: latest ? [
+      { id: "as-of", asOf: true, parts: [{ text: `${data?.basis === "intraday" ? data.access === "realtime" ? "live" : "15m delayed" : "close"} ${latest.date}`, tone: "muted" }] },
+      { id: "coverage", parts: [{ text: `A/D ${latest.advanceDeclineEligible}/${latest.memberCount}`, tone: latest.advanceDeclineEligible < latest.memberCount * 0.8 ? "warning" : "muted" }] },
+    ] : [] });
+  usePaneNoticeFooter({ registrationId: "members:breadth-notices", focused, notices: [
+    ...(resource.error || resource.data?.refreshError ? [resource.error ?? resource.data!.refreshError!] : []),
+    ...(latest && [latest.advanceDeclineEligible, latest.ma20.eligible, latest.ma50.eligible, latest.ma200.eligible, latest.highLowEligible].some(n => n < latest.memberCount * 0.8)
+      ? [`Partial coverage: A/D ${latest.advanceDeclineEligible}, 20D ${latest.ma20.eligible}, 50D ${latest.ma50.eligible}, 200D ${latest.ma200.eligible}, 52W ${latest.highLowEligible} of ${latest.memberCount} members. Missing windows are excluded.`] : []),
+  ] });
+  return <PaneStatusBody subject="fund breadth" loading={!data && resource.loading} error={!data ? resource.error : null}
+    empty={!!data && !latest} emptyTitle="Breadth is awaiting daily price history.">
+    {data && latest && <DataTableView<BreadthDay> items={rows} columns={columns} rootWidth={width} rootHeight={height} focused={focused}
+      getItemKey={keyOf} selection={{ kind: "id", selectedId: selected ?? latest.date, getId: keyOf, onChange: id => setSelected(String(id)) }}
+      sortColumnId="date" sortDirection="desc" freezeFirstColumn emptyStateTitle="No daily breadth history."
+      renderCell={(row, column) => {
+        if (column.id === "date") return { text: row.date };
+        if (column.id === "coverage") return { text: `${row.advanceDeclineEligible}/${row.memberCount}` };
+        if (column.id === "ma20" || column.id === "ma50" || column.id === "ma200") return { text: percent(row[column.id].percent), value: row[column.id].percent };
+        const value = row[column.id as "advances"];
+        const eligible = column.id === "newHighs" || column.id === "newLows" ? row.highLowEligible : row.advanceDeclineEligible;
+        return { text: eligible ? decimal(value, 0) : "--", value: eligible ? value : null,
+          color: column.id === "advances" || column.id === "newHighs" ? colors.positive : column.id === "declines" || column.id === "newLows" ? colors.negative : colors.text };
+      }}
+      rootBefore={<ChartTableHeader width={width} height={height} tableRows={rows.length} tableColumns={columns}
+        query={<QueryBar width={width} meta="History uses current members (survivorship bias)." filters={[{ kind: "select", id: "chart", label: "History", value: metric, options: CHARTS, onChange: value => setMetric(value as Metric) }]} />}
+        figures={[
+          { label: "Adv / Dec", value: latest.advanceDeclineEligible ? `${latest.advances} / ${latest.declines}` : "--", detail: `${latest.unchanged} unchanged` },
+          ...([20, 50, 200] as const).map(window => ({ label: `Above ${window}D`, value: percent(latest[`ma${window}`].percent), detail: `${latest[`ma${window}`].eligible}/${latest.memberCount} covered` })),
+          { label: "52W high / low", value: latest.highLowEligible ? `${latest.newHighs} / ${latest.newLows}` : "--", detail: `${latest.highLowEligible}/${latest.memberCount} covered` },
+        ]}
+        chart={{ series, ...link, formatValue: metric === "adLine" ? value => decimal(value, 0) : percent,
+          formatAxisValue: metric === "adLine" ? value => decimal(value, 0) : percent, remoteKind: "member-breadth", empty: "History is awaiting sufficient daily bars." }} />}
+    />}
+  </PaneStatusBody>;
+}

package/src/plugins/builtin/members/client.ts

@@ -0,0 +1,68 @@
+import { apiClient } from "../../../api-client";
+import { ApiRequestError } from "../../../api-client/errors";
+import type { FundMembersPayload, FundChangesPayload, MemberFundsPayload, FundBreadthPayload } from "../../../api-client/members";
+import { createPluginCache } from "../../../data/plugin-cache";
+import { companyNameCase } from "../../../tickers/company-name";
+import { cachedCloudResource, loadCloudResource, unavailableOnServer } from "../shared/cloud-resource";
+import { coveredFund, notCoveredMessage } from "./model";
+const policy = { staleMs: 60_000, expireMs: 2 * 60 * 60_000 };
+export const fundListCache = createPluginCache<MemberFundsPayload>({ kind: "member-funds", source: "gloom-cloud", schemaVersion: 1, policy });
+export const fundMembersCache = createPluginCache<FundMembersPayload>({ kind: "fund-members", source: "gloom-cloud", schemaVersion: 1, policy });
+export const fundChangesCache = createPluginCache<FundChangesPayload>({ kind: "fund-changes", source: "gloom-cloud", schemaVersion: 1, policy });
+export const fundBreadthCache = createPluginCache<FundBreadthPayload>({ kind: "fund-breadth", source: "gloom-cloud", schemaVersion: 1, policy });
+type Client = Pick<typeof apiClient, "getMemberFunds" | "getFundMembers" | "getFundChanges">;
+const number = (value: unknown) => value === null || typeof value === "number" && Number.isFinite(value);
+function validateMembers(data: FundMembersPayload) {
+  if (!data?.fund?.ticker || !Number.isFinite(Date.parse(data.asOf)) || !Array.isArray(data.members)
+    || !data.members.every((row) => typeof row.id === "string" && typeof row.name === "string" && [row.weight, row.price, row.changePercent, row.return1WPercent, row.return1MPercent, row.returnYtdPercent, row.contribution].every(number))
+    || !data.aggregate || !number(data.aggregate.sum)) throw new Error("Unreadable fund holdings response");
+  // A holdings file writes every name in capitals; the pane, the report and a watchlist made from it read them as other panes do.
+  return { ...data, members: data.members.map((row) => ({ ...row, name: companyNameCase(row.name) })) };
+}
+function validateChanges(data: FundChangesPayload) {
+  if (!data?.fund?.ticker || !Array.isArray(data.changes) || !data.changes.every((row) => typeof row.id === "string" && typeof row.reason === "string" && Array.isArray(row.estimates))) throw new Error("Unreadable fund changes response");
+  return data;
+}
+function validateFunds(data: MemberFundsPayload) {
+  if (!data || !Array.isArray(data.funds) || !data.funds.every((fund) => typeof fund.ticker === "string" && typeof fund.name === "string")) throw new Error("Unreadable covered funds response");
+  return data;
+}
+const UNAVAILABLE = "Fund members are not available on this server yet.";
+async function fetchPayload<T>(fetcher: () => Promise<T>, validate: (data: T) => T) {
+  try { return validate(await fetcher()); } catch (error) { throw unavailableOnServer(error, UNAVAILABLE); }
+}
+/**
+ * A 404 for one fund means either an uncovered fund or a server without the route, and the two read the
+ * same. The covered list tells them apart: a fund missing from a readable list is not covered; a list
+ * that cannot be read, or that holds the fund, leaves the server-side message.
+ */
+async function fetchFundPayload<T>(fund: string, fetcher: () => Promise<T>, validate: (data: T) => T, client: Client, unavailable = UNAVAILABLE) {
+  try { return validate(await fetcher()); } catch (error) {
+    if (error instanceof ApiRequestError && error.status === 404) {
+      const funds = await fetchFunds(client).then((payload) => payload.funds, () => []);
+      if (funds.length && !coveredFund(funds, fund)) throw new Error(notCoveredMessage(fund, funds));
+    }
+    throw unavailableOnServer(error, unavailable);
+  }
+}
+export const fetchFunds = (client: Client = apiClient) => fetchPayload(() => client.getMemberFunds(), validateFunds);
+export const fetchMembers = (fund: string, client: Client = apiClient) => fetchFundPayload(fund, () => client.getFundMembers(fund), validateMembers, client);
+export const fetchChanges = (fund: string, client: Client = apiClient) => fetchFundPayload(fund, () => client.getFundChanges(fund), validateChanges, client);
+export const cachedFunds = () => cachedCloudResource(fundListCache, "list", validateFunds);
+export const loadFunds = (force = false) => loadCloudResource(fundListCache, "list", () => fetchFunds(), { force, validate: validateFunds });
+export const cachedMembers = (fund: string) => cachedCloudResource(fundMembersCache, fund, validateMembers);
+export const loadMembers = (fund: string, force = false) => loadCloudResource(fundMembersCache, fund, () => fetchMembers(fund), { force, validate: validateMembers });
+export const cachedChanges = (fund: string) => cachedCloudResource(fundChangesCache, fund, validateChanges);
+export const loadChanges = (fund: string, force = false) => loadCloudResource(fundChangesCache, fund, () => fetchChanges(fund), { force, validate: validateChanges });
+
+function validateBreadth(data: FundBreadthPayload) {
+  const row = (value: FundBreadthPayload["history"][number]) => value && /^\d{4}-\d{2}-\d{2}$/.test(value.date)
+    && [value.memberCount, value.observed, value.advances, value.declines, value.unchanged, value.advanceDeclineEligible, value.newHighs, value.newLows, value.highLowEligible].every(n => Number.isInteger(n) && n >= 0)
+    && [value.ma20, value.ma50, value.ma200].every(m => m && Number.isInteger(m.eligible) && m.eligible >= 0 && Number.isInteger(m.above) && m.above >= 0 && m.above <= m.eligible && number(m.percent))
+    && number(value.adLine);
+  if (!data?.fund?.ticker || !Array.isArray(data.history) || !data.history.every(row) || (data.latest !== null && !row(data.latest))) throw new Error("Unreadable fund breadth response");
+  return data;
+}
+export const fetchBreadth = (fund: string, client: Client & Pick<typeof apiClient, "getFundBreadth"> = apiClient) => fetchFundPayload(fund, () => client.getFundBreadth(fund), validateBreadth, client, "Fund breadth is not available on this server yet.");
+export const cachedBreadth = (fund: string) => cachedCloudResource(fundBreadthCache, fund, validateBreadth);
+export const loadBreadth = (fund: string, force = false) => loadCloudResource(fundBreadthCache, fund, () => fetchBreadth(fund), { force, validate: validateBreadth });

package/src/plugins/builtin/members/headless.ts

@@ -0,0 +1,54 @@
+import type { HeadlessPaneColumn, HeadlessPaneDefinition } from "../../../types/plugin";
+import { fetchBreadth, fetchChanges, fetchFunds, fetchMembers } from "./client";
+import { canonicalFund, changeReason, coverageText, decimal, DEFAULT_SORT, holdingsCaveats, holdingsSourceText, memberRows, membersFeed, percent } from "./model";
+const columns: HeadlessPaneColumn[] = [
+  { key: "symbol", header: "Ticker" }, { key: "name", header: "Name" },
+  { key: "weight", header: "Weight %", align: "right", format: (value) => value == null ? "--" : decimal(Number(value) * 100) },
+  { key: "shares", header: "Shares", align: "right", format: (value) => decimal(value as number | null, 0) },
+  { key: "price", header: "Price $", align: "right", format: (value) => decimal(value as number | null) },
+  ...["changePercent", "return1WPercent", "return1MPercent", "returnYtdPercent"].map((key, i) => ({ key, header: ["1D", "1W", "1M", "YTD"][i]!, align: "right" as const, format: (value: unknown) => percent(value as number | null) })),
+];
+export const membersHeadless: HeadlessPaneDefinition<"rows"> = {
+  shape: "rows", argument: { kind: "free-text", optional: true, placeholder: "fund", description: "Covered fund or index alias; omit for the fund list." },
+  options: [{ key: "tab", type: "enum", values: [{ value: "members" }, { value: "movers" }, { value: "changes" }, { value: "breadth" }], defaultValue: "members", description: "Members, movers, changes or daily breadth." }],
+  discovery: { aliases: ["MEMB", "MRR", "IMOV"], limitations: ["ETF holdings, with file dates.", "Member prices are real-time with Pro and fifteen minutes delayed otherwise; partial 1D coverage.", "Nasdaq-100 is not covered.", "Breadth history uses current members (survivorship bias)."] },
+  describe: (args) => args.rawArgument ? `MEMB ${args.rawArgument}` : "Index and ETF members",
+  async load(args, context) {
+    const input = args.symbols[0] ?? args.rawArgument ?? "";
+    if (!input) return { freshness: { status: "not-a-feed", basis: "fund holdings files" }, rows: (await fetchFunds(context.apiClient)).funds.map((fund) => ({ ...fund })), columns: [{ key: "ticker", header: "Fund" }, { key: "name", header: "Index" }, { key: "asOf", header: "Holdings as of" }] };
+    const fund = canonicalFund(input);
+    if (args.options.tab === "breadth") {
+      const data = await fetchBreadth(fund, context.apiClient);
+      return { freshness: { status: data.stale ? "stale" : data.basis === "intraday" ? data.access === "realtime" ? "live" : "delayed" : "not-a-feed", basis: data.basis === "intraday" ? "regular session" : "daily closes", delayMinutes: 15 },
+        rows: [...data.history, ...(data.basis === "intraday" && data.latest ? [data.latest] : [])].reverse().map(row => ({ ...row, above20: row.ma20.percent, above50: row.ma50.percent, above200: row.ma200.percent })),
+        columns: [{ key: "date", header: "Date" }, ...["advances", "declines", "unchanged", "above20", "above50", "above200", "newHighs", "newLows", "adLine", "advanceDeclineEligible", "memberCount"].map((key, index) => ({ key, header: ["Adv", "Dec", "Unch", ">20D %", ">50D %", ">200D %", "52W high", "52W low", "A/D line", "A/D covered", "Members"][index]!, align: "right" as const }))],
+        complete: !data.stale && !!data.latest && data.latest.advanceDeclineEligible === data.latest.memberCount,
+        metadata: { ...data, history: undefined, notices: ["Breadth history uses current members (survivorship bias).", "History uses daily closes; percentages exclude members without the full window. 52-week records strictly break the prior 252 sessions' high/low."] } };
+    }
+    if (args.options.tab === "changes") {
+      const data = await fetchChanges(fund, context.apiClient);
+      return { freshness: { status: "not-a-feed", basis: "index changes" }, rows: data.changes.map((row) => ({ ...row, reason: changeReason(row) })), columns: [{ key: "effectiveDate", header: "Effective" }, { key: "added", header: "Added" }, { key: "removed", header: "Removed" }, { key: "daysToGo", header: "In days", align: "right" }, { key: "reason", header: "Reason" }],
+        complete: data.available && !data.stale, metadata: { ...data, changes: undefined } };
+    }
+    const data = await fetchMembers(fund, context.apiClient);
+    const movers = args.options.tab === "movers";
+    const rows = memberRows(data.members, movers ? "movers" : "members", "", DEFAULT_SORT).flatMap((row) => row.kind === "item" ? [{ ...row.item }] : []);
+    // Member prices are the pane's quotes: real-time for a Pro account, 15 minutes delayed otherwise. As in the
+    // pane, the fund's snapshot says whether it is stale; the members' own flags are not what the pane reads.
+    const live = data.access === "realtime";
+    // Outside the regular session a Pro account's members are the session's close, not a live feed: the report
+    // is as of that close and says no feed, as the pane's footer names the close instead of "live".
+    const feed = membersFeed(data.access, Date.now());
+    const closed = feed.kind === "close";
+    const status = data.stale ? { status: "stale" as const, delayMinutes: 15 } : closed ? {} : { status: live ? "live" as const : "delayed" as const, delayMinutes: 15 };
+    return { freshness: { ...status, ignoreStaleFlags: true }, rows, columns: movers ? [...columns.slice(0, 3), { key: "contribution", header: "Contrib. pp", align: "right", format: (value) => percent(value as number | null, "", 3) }] : columns,
+      complete: !data.stale && data.aggregate.fresh1D === data.aggregate.total,
+      unavailableSymbols: data.members.flatMap((row) => row.symbol && row.changePercent === null ? [row.symbol] : []),
+      metadata: { fund: data.fund, asOf: data.asOf, ...(closed ? { sessionExchange: "NYSE", observedAt: new Date(feed.closedAt).toISOString() } : {}), snapshotAsOf: data.snapshotAsOf, aggregate: data.aggregate, stale: data.stale, notices: [
+        holdingsSourceText(input, data),
+        // The pane's coverage figure, and once what the table's dashes mean instead of leaving them bare.
+        [coverageText(data.aggregate), data.aggregate.fresh1D < data.aggregate.total ? `1D -- means no fresh ${live ? "" : "delayed "}quote; those holdings are not counted` : ""].filter(Boolean).join(" | "),
+        ...holdingsCaveats(data, movers),
+      ] } };
+  },
+};

package/src/plugins/builtin/members/index.tsx

@@ -0,0 +1,20 @@
+import type { GloomPlugin } from "../../../types/plugin";
+import { fundBreadthCache, fundChangesCache, fundListCache, fundMembersCache } from "./client";
+import { membersHeadless } from "./headless";
+import { MembersPane } from "./pane";
+import { membersTitle, TABS } from "./model";
+export const membersPlugin: GloomPlugin = {
+  id: "members", name: "Index and ETF members", version: "1.0.0", description: "ETF holdings, member returns, contributions, breadth and index changes", toggleable: true,
+  setup(ctx) { fundBreadthCache.attach(ctx.persistence); fundListCache.attach(ctx.persistence); fundMembersCache.attach(ctx.persistence); fundChangesCache.attach(ctx.persistence); },
+  dispose() { fundBreadthCache.reset(); fundListCache.reset(); fundMembersCache.reset(); fundChangesCache.reset(); },
+  panes: [{ id: "members", name: "Index and ETF members", icon: "M", component: MembersPane, tickerFollower: true,
+    defaultPosition: "right", defaultMode: "floating", defaultFloatingSize: { width: 132, height: 32 }, tableExport: true,
+    settings: { fields: [{ key: "tab", label: "View", type: "select", options: TABS }] } }],
+  paneTemplates: [{ id: "members-pane", paneId: "members", label: "Index and ETF members", description: "ETF holdings, member returns, daily contributions, breadth and index changes.",
+    keywords: ["members", "index", "ETF", "holdings", "weights", "rebalance", "breadth", "advancers", "decliners", "MRR", "IMOV"],
+    shortcut: { prefix: "MEMB", argKind: "text", argPlaceholder: "fund", argOptional: true, openWithoutArg: true }, headless: membersHeadless,
+    createInstance: (_context, options) => { const symbol = (options?.arg ?? options?.symbol)?.trim().toUpperCase();
+      return { placement: "floating", title: membersTitle(symbol ?? ""),
+        ...(symbol ? { binding: { kind: "fixed", symbol } } : {}), settings: { tab: options?.values?.tab ?? "members" } }; },
+  }],
+};

package/src/plugins/builtin/members/model.ts

@@ -0,0 +1,115 @@
+import type { FundChange, FundMember, FundMembersPayload, MemberFundsPayload } from "../../../api-client/members";
+import type { DataTableColumn } from "../../../components";
+import { buildSectionedRows, type SectionedRow } from "../../../components/data-table/sections";
+import { getTableWidth } from "../../../components/ui/table-layout";
+import { isRegularSessionTime, latestRegularSessionClose } from "../../../market-data/market/freshness";
+import { compareSortValues, type SortPreference } from "../../../utils/sort-values";
+import { closeLabel } from "../themes/model";
+export type MembersTab = "members" | "movers" | "changes" | "breadth";
+export const TABS = [{ value: "members", label: "Members" }, { value: "movers", label: "Movers" }, { value: "changes", label: "Changes" }, { value: "breadth", label: "Breadth" }];
+export const isTab = (value: unknown): value is MembersTab => TABS.some((tab) => tab.value === value);
+const COVERED = [{ ticker: "IVV", name: "S&P 500" }, { ticker: "IJH", name: "S&P 400" }, { ticker: "IJR", name: "S&P 600" }, { ticker: "IWM", name: "Russell 2000" }, { ticker: "IWB", name: "Russell 1000" }];
+/** Symbols the app reads as a covered fund before asking the server, which knows its own aliases too. */
+const LOCAL_ALIASES: Record<string, string> = { SPX: "IVV", "^SPX": "IVV", SPY: "IVV", "^GSPC": "IVV", "^MID": "IJH", SP400: "IJH", "^SP400": "IJH", "^SML": "IJR", SP600: "IJR", "^SP600": "IJR", RUT: "IWM", "^RUT": "IWM", RUI: "IWB", "^RUI": "IWB" };
+const requestedSymbol = (input: string) => input.split(":")[0]!.trim().toUpperCase();
+export function canonicalFund(input: string) { const symbol = requestedSymbol(input); return LOCAL_ALIASES[symbol] ?? symbol; }
+/** The covered fund the user asked for, by ticker or by an alias such as SPX, or undefined when it is not covered. */
+export function coveredFund(funds: MemberFundsPayload["funds"], input: string) {
+  const symbol = canonicalFund(input);
+  return funds.find((fund) => fund.ticker === symbol || fund.aliases.some((alias) => alias.toUpperCase() === symbol));
+}
+/** Every symbol that opens this fund: the server's aliases and the app's own. */
+function fundAliases(fund: MemberFundsPayload["funds"][number]) {
+  const local = Object.entries(LOCAL_ALIASES).flatMap(([alias, ticker]) => ticker === fund.ticker ? [alias] : []);
+  return [...new Set([...fund.aliases.map((alias) => alias.toUpperCase()), ...local])].filter((alias) => alias !== fund.ticker);
+}
+export function notCoveredMessage(input: string, funds: MemberFundsPayload["funds"]) {
+  const covered = funds.map((fund) => { const aliases = fundAliases(fund); return aliases.length ? `${fund.ticker} (${aliases.join(", ")})` : fund.ticker; });
+  return `${requestedSymbol(input)} is not a covered fund. Covered: ${covered.join(", ")}.`;
+}
+/** "Partial 1D 334/504 · 91.5% wt": how many holdings have a fresh 1D return, and their share of the fund. */
+export function coverageText(aggregate: FundMembersPayload["aggregate"], short = false) {
+  const partial = aggregate.fresh1D < aggregate.total;
+  return `${partial && !short ? "Partial " : ""}1D ${aggregate.fresh1D}/${aggregate.total} · ${decimal(aggregate.coveredWeight * 100, 1)}% wt`;
+}
+/**
+ * What a fund's member quotes are, as read at `readAt`. A Pro account's are live while the regular US session
+ * trades; outside it the server prices the members from the last completed session, so they are that session's
+ * close (`Fri 23 Oct close`), as THEM names it, never live. Everyone else's are 15 minutes delayed, in or out of
+ * a session. Hours that cannot be told read as live.
+ */
+export function membersFeed(access: FundMembersPayload["access"], readAt: number): { kind: "live" | "delayed" } | { kind: "close"; date: string; closedAt: number; label: string } {
+  if (access !== "realtime") return { kind: "delayed" };
+  const close = isRegularSessionTime("NYSE", readAt) === false ? latestRegularSessionClose("NYSE", readAt) : null;
+  return close ? { kind: "close", date: close.date, closedAt: close.close, label: closeLabel(close.date) } : { kind: "live" };
+}
+/** "S&P 500, IVV holdings as of 2026-10-08 (for SPY)": the holdings file the members come from. */
+export function holdingsSourceText(input: string, data: Pick<FundMembersPayload, "fund" | "asOf">) {
+  const requested = requestedSymbol(input);
+  return `${data.fund.name}, ${data.fund.ticker} holdings as of ${data.asOf.slice(0, 10)}${requested && requested !== data.fund.ticker ? ` (for ${requested})` : ""}`;
+}
+/** Caveats about a fund's holdings and returns, shared by the pane's notices and the text report. */
+export function holdingsCaveats(data: FundMembersPayload, movers: boolean) {
+  return [
+    ...(data.quotesUnavailable ? ["Member returns and current prices are unavailable. Dated holdings remain available."] : []),
+    ...(movers && data.aggregate.fundReturn === null ? ["Fund 1D is unavailable; the difference cannot be calculated."] : []),
+    ...(movers && data.aggregate.withinTolerance === false ? [`The covered contribution sum differs from the fund by ${percent(data.aggregate.residual, " pp")}.`] : []),
+    ...(data.excludedDerivatives ? [`${data.excludedDerivatives} derivative positions are excluded from these share holdings.`] : []),
+  ];
+}
+export function membersTitle(input: string) {
+  const requested = input.split(":")[0]!.trim().toUpperCase();
+  const fund = canonicalFund(requested);
+  const definition = COVERED.find((item) => item.ticker === fund);
+  return definition ? `${definition.name}, ${fund} holdings${requested !== fund ? ` (${requested})` : ""}`
+    : requested ? `MEMB ${requested}` : "Index and ETF members";
+}
+export const DEFAULT_SORT: SortPreference<string> = { columnId: "weight", direction: "desc" };
+/** A signed figure; one that rounds to zero is unsigned (0.00, never +0.00 or -0.00). */
+export function percent(value: number | null, suffix = "%", digits = 2) {
+  if (value == null || !Number.isFinite(value)) return "--";
+  const fixed = value.toFixed(digits);
+  if (!/[1-9]/.test(fixed)) return `${fixed.replace("-", "")}${suffix}`;
+  return `${value > 0 ? "+" : ""}${fixed}${suffix}`;
+}
+export const decimal = (value: number | null, digits = 2) => value == null || !Number.isFinite(value) ? "--" : value.toLocaleString("en-US", { minimumFractionDigits: digits, maximumFractionDigits: digits });
+export function sortMembers(rows: readonly FundMember[], sort: SortPreference<string>) {
+  return [...rows].sort((a, b) => compareSortValues(a[sort.columnId as keyof FundMember] as number | string | null,
+    b[sort.columnId as keyof FundMember] as number | string | null, sort.direction) || a.id.localeCompare(b.id));
+}
+export function memberRows(rows: readonly FundMember[], tab: MembersTab, query: string, sort: SortPreference<string>): SectionedRow<FundMember>[] {
+  const needle = query.trim().toLowerCase();
+  const filtered = rows.filter((row) => `${row.symbol ?? ""} ${row.name} ${row.sector ?? ""}`.toLowerCase().includes(needle));
+  if (tab !== "movers") return sortMembers(filtered, sort).map((item) => ({ kind: "item", key: item.id, item }));
+  const ranked = sortMembers(filtered.filter((row) => row.contribution !== null), { columnId: "contribution", direction: "desc" });
+  return buildSectionedRows([
+    { label: "Contributors", items: ranked.filter((row) => row.contribution! > 0).slice(0, 10) },
+    { label: "Detractors", items: ranked.filter((row) => row.contribution! < 0).reverse().slice(0, 10) },
+  ], (row) => row.id);
+}
+const column = (id: string, label: string, width: number, align: "left" | "right" = "right"): DataTableColumn => ({ id, label, width, align });
+function fit(columns: DataTableColumn[], width: number, drops: string[]) {
+  for (const id of drops) { if (getTableWidth(columns) <= width) break; columns = columns.filter((col) => col.id !== id); }
+  const flexible = columns.find((col) => col.id === "name" || col.id === "reason") ?? columns[0]!;
+  flexible.width = Math.max(6, flexible.width + Math.max(0, width - getTableWidth(columns)));
+  flexible.flexGrow = 1;
+  return columns;
+}
+export function memberColumns(width: number, movers = false): DataTableColumn[] {
+  const compact = width < 50;
+  return fit([column("symbol", "Ticker", 8, "left"), column("name", "Name", 22, "left"),
+    column("weight", compact ? "Wt. %" : "Weight %", compact ? 7 : 10), ...(movers ? [column("contribution", compact ? "pp" : "Contrib. pp", compact ? 7 : 13)] : []),
+    ...(!movers ? [column("shares", "Shares", 14), column("price", "Price $", 11)] : []),
+    column("changePercent", "1D", compact ? 8 : 9), ...(!movers ? [column("return1WPercent", "1W", 9), column("return1MPercent", "1M", 9), column("returnYtdPercent", "YTD", 9), column("sector", "Sector", 22, "left")] : [])], width,
+    ["sector", "shares", "returnYtdPercent", "return1MPercent", "return1WPercent", "price", "name"]);
+}
+export function changeColumns(width: number) {
+  const compact = width < 50;
+  return fit([column("effectiveDate", compact ? "Date" : "Effective", compact ? 10 : 12, "left"), column("daysToGo", compact ? "In" : "In days", compact ? 4 : 9), column("added", "Added", compact ? 7 : 8, "left"), column("removed", "Removed", 9, "left"), column("estimate", "Est. ADV days", 15), column("reason", "Reason", 28, "left")], width, ["estimate", "reason"]);
+}
+export const changeLabel = (row: FundChange) => row.added && row.removed ? `${row.added} replaces ${row.removed}`
+  : row.added ? `${row.added} added` : row.removed ? `${row.removed} removed` : "Index announcement";
+export function changeReason(row: FundChange) {
+  if (row.kind !== "announcement" || row.reason !== row.headline || !row.added && !row.removed) return row.reason;
+  return row.added && row.removed ? "Index replacement" : row.added ? "Index addition" : "Index deletion";
+}

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

@@ -0,0 +1,205 @@
+import { Breadth } from "./breadth-pane";
+import { useCallback, useMemo, useRef, useState } from "react";
+import type { FundChange, FundMember } from "../../../api-client/members";
+import { delayedFooterSegment, DataTableStackView, DataTableView, DetailScrollBody, EmptyState, KeyValueRow, PaneFooterScope, PaneStatusBody, Prose, QueryBar, StatGrid,
+  isSectionedItemRow, renderSectionedRowHeader, useExternalLinkFooter, usePaneNoticeFooter, usePaneStatusFooter, usePaneTabs, useQueryBarSearch,
+  type DataTableCell, type DataTableColumn, type PaneFooterSegment, type SectionedRow } from "../../../components";
+import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
+import { useAsyncResource, useAutoRefresh, usePaneInstance, usePaneTickerIdentity, usePaneTitle, usePluginPaneState, usePluginTickerActions } from "../../../public/react";
+import { shownPriceColor } from "../../../theme/colors";
+import { useThemeColors } from "../../../theme/theme-context";
+import type { PaneProps } from "../../../types/plugin";
+import { Box, type ScrollBoxRenderable } from "../../../ui";
+import { nextHeaderSort, type SortPreference } from "../../../utils/sort-values";
+import { isPlainArrowUp, stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
+import { useMembersMenu, type MemberList } from "../shared/members-menu";
+import { cachedChanges, cachedFunds, cachedMembers, loadChanges, loadFunds, loadMembers } from "./client";
+import { canonicalFund, changeColumns, changeLabel, changeReason, coverageText, coveredFund, decimal, DEFAULT_SORT, holdingsCaveats, isTab, memberColumns, memberRows, membersFeed, membersTitle, notCoveredMessage, percent, TABS, type MembersTab } from "./model";
+
+type ViewProps = Pick<PaneProps, "width" | "height" | "focused"> & { fund: string; active: boolean };
+const rowKey = (row: SectionedRow<FundMember>) => row.key;
+/** How often live members are worth checking again: the server renews their prices every 15 seconds. */
+const LIVE_MEMBERS_REFRESH_MS = 15_000;
+
+function Holdings({ fund, tab, width, height, focused, active }: ViewProps & { tab: MembersTab }) {
+  const colors = useThemeColors();
+  const { pinTicker } = usePluginTickerActions();
+  const resource = useAsyncResource(useCallback((force: boolean) => loadMembers(fund, force), [fund]), { initialData: useCallback(() => cachedMembers(fund), [fund]) });
+  const data = resource.data?.payload;
+  const [sort, setSort] = usePluginPaneState<SortPreference<string>>(`sort:${fund}`, DEFAULT_SORT);
+  const [selected, setSelected] = usePluginPaneState<string | null>(`member:${fund}`, null);
+  const [query, setQuery] = useState("");
+  const search = useQueryBarSearch();
+  const movers = tab === "movers";
+  const rows = useMemo(() => memberRows(data?.members ?? [], tab, query, sort), [data, tab, query, sort]);
+  const columns = useMemo(() => memberColumns(width, movers), [width, movers]);
+  // Movers is a ranked slice of the fund, not its members, so the entries stay on the Members tab.
+  const memberList = useMemo((): MemberList | null => {
+    if (!data || tab !== "members") return null;
+    const typed = query.trim();
+    return { title: fund, watchlistName: typed ? `${fund} ${typed}` : `${fund} members`,
+      search: typed ? { query: typed, total: data.members.filter((row) => row.symbol).length } : null,
+      members: rows.flatMap((row) => isSectionedItemRow(row) && row.item.symbol ? [{ symbol: row.item.symbol, name: row.item.name }] : []) };
+  }, [data, fund, query, rows, tab]);
+  useMembersMenu("members:members-menu", memberList);
+  // A Pro account's members are priced from the server's live read, renewed every 15 seconds.
+  const live = data?.access === "realtime";
+  useAutoRefresh(resource.updatedAt, () => { if (active) void resource.load(live); }, { intervalMs: live ? LIVE_MEMBERS_REFRESH_MS : null });
+  usePaneRefreshKey(() => void resource.reload(), { focused, enabled: active && !search.active });
+  const info = useMemo<PaneFooterSegment[]>(() => {
+    if (!data) return [];
+    // Outside the regular session a Pro account's members are the session's close, so the footer names it, not "live".
+    const feed = membersFeed(data.access, resource.updatedAt ?? Date.now());
+    const feedText = feed.kind === "close" ? feed.label : feed.kind === "live" ? "live" : "15m delayed";
+    const dates = [...new Set(data.members.flatMap((row) => row.changePercent !== null && row.dailyAsOf ? [row.dailyAsOf.slice(0, 10)] : []))].sort();
+    const date = dates.length === 1 ? dates[0] : dates.length ? `${dates[0]} to ${dates.at(-1)}` : data.fundDailyAsOf?.slice(0, 10);
+    // The close names its own date, so a quote date that is the same day is not said twice.
+    const dateSaid = feed.kind === "close" && dates.length === 1 && dates[0] === feed.date;
+    const partial = data.aggregate.fresh1D < data.aggregate.total;
+    return [
+      { id: "coverage", parts: [{ text: coverageText(data.aggregate, width < 60), tone: partial ? "warning" : "muted" }] },
+      // A capture's status line says the quotes' date and delay too; it does not say returns are unavailable.
+      ...(data.quotesUnavailable
+        ? [{ id: "quote-date", title: `${date ?? "Quote date unavailable"} · ${feedText} · holdings ${data.asOf}`, parts: [{ text: "returns unavailable", tone: "muted" as const }] }]
+        : [
+          feed.kind === "live" ? { id: "quote-live", quoteStatus: true, parts: [{ text: "live", tone: "positive" as const }] }
+            : feed.kind === "close" ? { id: "quote-close", title: `${feed.label} · holdings ${data.asOf}`, quoteStatus: true, parts: [{ text: feed.label, tone: "muted" as const }] }
+            : delayedFooterSegment({ id: "quote-delay", detail: "15m delayed", delay: "15m", quoteStatus: true }),
+          ...(date && !dateSaid ? [{ id: "quote-date", title: `${date} · ${feedText} · holdings ${data.asOf}`, quoteStatus: true,
+            parts: [{ text: width < 60 && dates.length === 1 ? date.slice(5) : date, tone: "muted" as const }] }] : []),
+        ]),
+      ...(width >= 60 ? [{ id: "holdings-date", asOf: true, parts: [{ text: `holdings ${data.asOf}`, tone: "muted" as const }] }] : []),
+    ];
+  }, [data, resource.updatedAt, width]);
+  usePaneStatusFooter({ registrationId: "members:status", loading: !!data && resource.loading,
+    stale: !!data && (data.stale || resource.data!.stale || !!resource.error), info });
+  usePaneNoticeFooter({ registrationId: "members:notices", focused, notices: [
+    ...(resource.error || resource.data?.refreshError ? [resource.error ?? resource.data!.refreshError!] : []),
+    ...(data && data.aggregate.fresh1D < data.aggregate.total ? [`Fresh 1D: ${data.aggregate.fresh1D}/${data.aggregate.total} holdings, ${decimal(data.aggregate.coveredWeight * 100, 1)}% of whole-fund weight. Missing returns are excluded.`] : []),
+    ...(data ? holdingsCaveats(data, movers) : []),
+  ] });
+  const renderCell = useCallback((item: SectionedRow<FundMember>, column: DataTableColumn): DataTableCell => {
+    if (!isSectionedItemRow(item)) return { text: "" };
+    const row = item.item;
+    if (column.id === "symbol") return { text: row.symbol ?? "--", color: colors.textBright };
+    if (column.id === "name" || column.id === "sector") return { text: row[column.id] ?? "--", color: colors.text };
+    if (column.id === "weight") return { text: row.weight == null ? "--" : decimal(row.weight * 100), value: row.weight == null ? null : row.weight * 100 };
+    if (column.id === "shares") return { text: decimal(row.shares, 0), value: row.shares };
+    if (column.id === "price") return { text: decimal(row.price), value: row.price };
+    const value = row[column.id as "changePercent"];
+    const digits = column.id === "contribution" ? 3 : 2;
+    return { text: percent(value, column.id === "contribution" ? "" : "%", digits), value, color: value === null ? colors.textMuted : shownPriceColor(value, digits, colors) };
+  }, [colors]);
+  return <PaneStatusBody subject="fund holdings" loading={!data && resource.loading} error={!data ? resource.error : null}>
+    {data && <DataTableView<SectionedRow<FundMember>> items={rows} columns={columns} rootWidth={width} rootHeight={height} focused={focused && !search.active}
+      rootBefore={<Box flexDirection="column"><QueryBar width={width} search={{ value: query, onChange: setQuery, placeholder: "ticker, name or sector", focused, ...search.searchProps }} />
+        {movers && <StatGrid width={width} items={[
+          { label: "Covered contrib.", value: percent(data.aggregate.sum, " pp"), color: shownPriceColor(data.aggregate.sum ?? 0, 2, colors) },
+          { label: `${fund} 1D`, value: percent(data.aggregate.fundReturn), color: shownPriceColor(data.aggregate.fundReturn ?? 0, 2, colors) },
+          { label: "Difference", value: percent(data.aggregate.residual, " pp"), tone: data.aggregate.withinTolerance === false ? "warning" : "muted" },
+        ]} />}</Box>}
+      selection={{ kind: "id", selectedId: selected, getId: rowKey, onChange: (id) => setSelected(String(id)) }} getItemKey={rowKey}
+      isNavigable={isSectionedItemRow} renderSectionHeader={renderSectionedRowHeader}
+      sortColumnId={movers ? null : sort.columnId} sortDirection={sort.direction}
+      onHeaderClick={movers ? undefined : (id) => setSort((previous) => nextHeaderSort(previous, id, { firstDirection: (key) => ["symbol", "name", "sector"].includes(key) ? "asc" : "desc", resetTo: DEFAULT_SORT }))}
+      onSortChange={movers ? undefined : (columnId, direction) => setSort({ columnId, direction })}
+      onRootKeyDown={(event, context) => { if (context.selectedIndex <= 0 && isPlainArrowUp(event)) { stopSearchFocusNavigation(event); search.focus(); return true; } return false; }}
+      onActivate={(row) => { if (isSectionedItemRow(row) && row.item.symbol) pinTicker(row.item.symbol, { floating: true, instrument: null }); }}
+      renderCell={renderCell} selectedTextOverridesCellColor resetScrollKey={`${tab}:${query}`} emptyStateTitle={query ? "No matching holdings." : movers ? "No covered movers." : "No holdings."} />}
+  </PaneStatusBody>;
+}
+
+function Changes({ fund, width, height, focused, active }: ViewProps) {
+  const colors = useThemeColors();
+  const resource = useAsyncResource(useCallback((force: boolean) => loadChanges(fund, force), [fund]), { initialData: useCallback(() => cachedChanges(fund), [fund]) });
+  const data = resource.data?.payload;
+  const [selected, setSelected] = usePluginPaneState<string | null>(`change:${fund}`, null);
+  const [opened, setOpened] = usePluginPaneState<string | null>(`opened:${fund}`, null);
+  const detail = data?.changes.find((row) => row.id === opened);
+  const selectedRow = detail ?? data?.changes.find((row) => row.id === selected) ?? data?.changes[0];
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  useAutoRefresh(resource.updatedAt, () => { if (active) void resource.load(); });
+  usePaneRefreshKey(() => void resource.reload(), { focused, enabled: active });
+  useExternalLinkFooter({ registrationId: "members:source", focused, url: selectedRow?.url });
+  usePaneStatusFooter({ registrationId: "members:changes", loading: !!data && resource.loading, stale: !!data && (data.stale || resource.data!.stale || !!resource.error),
+    info: data?.asOf ? [{ id: "updated", parts: [{ text: `as of ${data.asOf.slice(0, 10)}`, tone: "muted" }] }] : [] });
+  usePaneNoticeFooter({ registrationId: "members:changes-notices", focused, notices: resource.error || resource.data?.refreshError ? [resource.error ?? resource.data!.refreshError!] : [] });
+  const renderCell = useCallback((row: FundChange, column: DataTableColumn): DataTableCell => {
+    if (column.id === "effectiveDate") return { text: row.effectiveDate ?? "--" };
+    if (column.id === "daysToGo") return { text: row.daysToGo === null ? "--" : `${row.daysToGo}${column.label === "In" ? "d" : ""}`, value: row.daysToGo, color: row.daysToGo === null ? colors.textMuted : colors.warning, keepColorWhenSelected: row.daysToGo !== null };
+    if (column.id === "added") return { text: row.added ?? "--", color: colors.positive };
+    if (column.id === "removed") return { text: row.removed ?? "--", color: colors.negative };
+    if (column.id === "estimate") { const value = row.estimates.length === 1 ? row.estimates[0]!.days : null; return { text: percent(value, ""), value }; }
+    return { text: changeReason(row), color: colors.text };
+  }, [colors]);
+  return <PaneStatusBody subject="index changes" loading={!data && resource.loading} error={!data ? resource.error : null}>
+    {data && !data.available ? <EmptyState title="Index changes are not covered for this fund." /> : data && <DataTableStackView<FundChange>
+      rootWidth={width} rootHeight={height} focused={focused} columns={changeColumns(width)} items={data.changes}
+      getItemKey={(row) => row.id} selection={{ kind: "id", selectedId: selected, getId: (row) => row.id, onChange: (id) => setSelected(String(id)) }}
+      onActivate={(row) => setOpened(row.id)} sortColumnId={null} sortDirection="desc" renderCell={renderCell} selectedTextOverridesCellColor
+      detailOpen={!!detail} onBack={() => setOpened(null)} detailTitle={detail ? changeLabel(detail) : undefined} detailScrollRef={scrollRef}
+      detailContent={detail && <DetailScrollBody ref={scrollRef} resetScrollKey={detail.id}>
+        <KeyValueRow label="Effective" value={detail.effectiveDate ?? "Not confirmed"} />
+        {detail.announcedAt && <KeyValueRow label="Announced" value={detail.announcedAt.slice(0, 10)} />}
+        {detail.headline && <Prose text={detail.headline} width={Math.max(8, width - 4)} />}
+        {detail.reason !== detail.headline && <Prose text={detail.reason} width={Math.max(8, width - 4)} />}
+        {detail.estimates.map((estimate) => <KeyValueRow key={estimate.symbol} label={`${estimate.symbol} est. ADV days`} labelWidth={24} value={percent(estimate.days, "")} />)}
+        {!!detail.estimates.length && <KeyValueRow label="Holdings as of" labelWidth={24} value={detail.estimates[0]!.asOf} />}
+        {!!detail.estimates.length && <Prose text={data.estimateLabel} width={Math.max(8, width - 4)} />}
+        {detail.kind === "history" && data.attribution && <Prose text={data.attribution.text} width={Math.max(8, width - 4)} />}
+      </DetailScrollBody>} emptyStateTitle="No stored index changes." />}
+  </PaneStatusBody>;
+}
+
+function FundView({ fund, ...props }: Pick<PaneProps, "width" | "height" | "focused"> & { fund: string }) {
+  const instance = usePaneInstance();
+  const initial = isTab(instance?.settings?.tab) ? instance.settings.tab : "members";
+  const [storedTab, setTab] = usePluginPaneState<MembersTab>("tab", initial);
+  const tab = isTab(storedTab) ? storedTab : "members";
+  const holdings = tab === "members" || tab === "movers";
+  const [visited, setVisited] = useState({ holdings, changes: tab === "changes", breadth: tab === "breadth" });
+  const selectTab = (value: string) => { if (isTab(value)) { setTab(value); setVisited((previous) => ({ holdings: previous.holdings || value === "members" || value === "movers", changes: previous.changes || value === "changes", breadth: previous.breadth || value === "breadth" })); } };
+  const { strip, rows } = usePaneTabs({ tabs: TABS, activeValue: tab, onSelect: selectTab, focused: props.focused, compact: true, variant: "bare" });
+  const height = Math.max(1, props.height - rows);
+  return <Box width={props.width} height={props.height} flexDirection="column">
+    {strip}
+    {visited.holdings && <Box visible={holdings} flexGrow={1} flexBasis={0} overflow="hidden"><PaneFooterScope active={holdings}>
+      <Holdings fund={fund} {...props} height={height} tab={tab} active={holdings} focused={props.focused && holdings} />
+    </PaneFooterScope></Box>}
+    {visited.breadth && <Box visible={tab === "breadth"} flexGrow={1} flexBasis={0} overflow="hidden"><PaneFooterScope active={tab === "breadth"}>
+      <Breadth fund={fund} {...props} height={height} active={tab === "breadth"} focused={props.focused && tab === "breadth"} />
+    </PaneFooterScope></Box>}
+    {visited.changes && <Box visible={tab === "changes"} flexGrow={1} flexBasis={0} overflow="hidden"><PaneFooterScope active={tab === "changes"}>
+      <Changes fund={fund} {...props} height={height} active={tab === "changes"} focused={props.focused && tab === "changes"} />
+    </PaneFooterScope></Box>}
+  </Box>;
+}
+function FundPicker({ width, height, focused, choose }: Pick<PaneProps, "width" | "height" | "focused"> & { choose: (fund: string) => void }) {
+  const resource = useAsyncResource(loadFunds, { initialData: cachedFunds });
+  const [selected, setSelected] = useState<string | null>(null);
+  usePaneRefreshKey(() => void resource.reload(), { focused });
+  usePaneStatusFooter({ registrationId: "members:picker", loading: resource.loading && !!resource.data, stale: resource.data?.stale });
+  return <PaneStatusBody subject="covered funds" loading={!resource.data && resource.loading} error={!resource.data ? resource.error : null}>
+    {resource.data && <DataTableView items={resource.data.payload.funds} emptyStateTitle="No covered funds." rootWidth={width} rootHeight={height} focused={focused}
+      columns={[{ id: "ticker", label: "Fund", align: "left", width: 8 }, { id: "name", label: "Index", align: "left", width: 24, flexGrow: 1 }, { id: "asOf", label: "Holdings as of", align: "left", width: 16 }]}
+      getItemKey={(row) => row.ticker} selection={{ kind: "id", selectedId: selected, getId: (row) => row.ticker, onChange: (id) => setSelected(String(id)) }}
+      onActivate={(row) => choose(row.ticker)} sortColumnId={null} sortDirection="asc" renderCell={(row, col) => ({ text: String(row[col.id as "ticker"] ?? "--") })} />}
+  </PaneStatusBody>;
+}
+type FundPaneProps = Pick<PaneProps, "width" | "height" | "focused"> & { fund: string; requested: string };
+/** The covered list is the server's, so a fund it adds opens without an app update. A list that cannot be read leaves the fund's own load to report the failure. */
+function CoveredFund({ fund, requested, ...props }: FundPaneProps) {
+  const resource = useAsyncResource(loadFunds, { initialData: cachedFunds });
+  const funds = resource.data?.payload.funds;
+  if (funds?.length && !coveredFund(funds, fund)) return <PaneStatusBody empty emptyTitle={notCoveredMessage(requested, funds)} />;
+  return <FundView key={fund} fund={fund} {...props} />;
+}
+export function MembersPane(props: PaneProps) {
+  const { symbol } = usePaneTickerIdentity();
+  const [chosen, choose] = usePluginPaneState("fund", "");
+  const requested = symbol ?? chosen;
+  const fund = canonicalFund(requested);
+  usePaneTitle(membersTitle(requested));
+  if (!fund) return <FundPicker {...props} choose={choose} />;
+  return <CoveredFund fund={fund} requested={requested} {...props} />;
+}