gloomberb 0.13.2 → 0.14.0

package/src/plugins/builtin/buildout/detail/intel.tsx

@@ -1,15 +1,10 @@
-import { Box, Text } from "../../../../ui";
+import { Badge } from "../../../../components";
 import { RemoteImage } from "../../../../components/ui";
 import { colors } from "../../../../theme/colors";
-import type { BuildoutRow } from "../model/types";
+import { Box, Text } from "../../../../ui";
 import { dateDetail, intelSourceDomains, tickerSymbol } from "../format";
-import {
-  InlineSources,
-  MarkdownBlock,
-  MetaBadge,
-  tickerBadges,
-  type InlineTickerCatalog,
-} from "./ui";
+import type { BuildoutRow } from "../model/types";
+import { InlineSources, MarkdownBlock, tickerBadges, type InlineTickerCatalog } from "./ui";
 
 type BuildoutIntel = Extract<BuildoutRow, { kind: "intel" }>["item"];
 
@@ -29,7 +24,7 @@ export function IntelDetail({
   return (
     <>
       <Box flexDirection="row" height={1} gap={1} overflow="hidden">
-        <MetaBadge label={item.type} />
+        {item.type?.trim() && <Badge label={item.type.trim().toUpperCase()} tone="accent" variant="solid" />}
         {item.publishedAt ? <Text fg={colors.textDim}>{dateDetail(item.publishedAt)}</Text> : null}
       </Box>
       {(item.companies?.length ?? 0) > 0 && (

package/src/plugins/builtin/buildout/detail/site.tsx

@@ -1,30 +1,12 @@
 import type { ReactNode } from "react";
-import { Box, Text } from "../../../../ui";
+import { Section } from "../../../../components";
 import { colors } from "../../../../theme/colors";
+import { Box, Text } from "../../../../ui";
+import { activityColor, activityLabel, dateShort, sourceDomains, truncate } from "../format";
 import type { BuildoutSite } from "../model/types";
-import {
-  activityColor,
-  activityLabel,
-  dateShort,
-  sourceDomains,
-  truncate,
-} from "../format";
-import {
-  booleanText,
-  dateCell,
-  metadataSpecs,
-  reportSectionText,
-} from "./values";
-import {
-  DetailSection,
-  DetailSpecGrid,
-  InlineSources,
-  MarkdownBlock,
-  SourceDetailLines,
-  tickerBadges,
-  type InlineTickerCatalog,
-} from "./ui";
 import { SiteSatelliteImages } from "./satellite-images";
+import { DetailSpecGrid, InlineSources, MarkdownBlock, SourceDetailLines, tickerBadges, type InlineTickerCatalog } from "./ui";
+import { booleanText, dateCell, metadataSpecs, reportSectionText } from "./values";
 
 export function SiteDetail({
   site,
@@ -79,7 +61,7 @@ export function SiteDetail({
       <MarkdownBlock text={site.description} width={bodyWidth} catalog={catalog} openTicker={openTicker} />
       <SiteSatelliteImages site={site} width={bodyWidth} height={height} />
       {(site.observations?.length ?? 0) > 0 ? (
-        <DetailSection title="Recent Captures" width={bodyWidth}>
+        <Section title="Recent Captures" width={bodyWidth}>
           {site.observations!.slice(0, 8).map((observation, index) => {
             const bounds = observation.captureBounds?.minLat != null && observation.captureBounds?.minLng != null
               ? `${observation.captureBounds.minLat.toFixed(3)}, ${observation.captureBounds.minLng.toFixed(3)}`
@@ -95,30 +77,30 @@ export function SiteDetail({
               </Text>
             );
           })}
-        </DetailSection>
+        </Section>
       ) : null}
       {specs.length > 0 ? (
-        <DetailSection title="Specs" width={bodyWidth}>
+        <Section title="Specs" width={bodyWidth}>
           <DetailSpecGrid width={bodyWidth} marginTop={0} items={specs} />
-        </DetailSection>
+        </Section>
       ) : null}
       {(site.projectReportSections?.length ?? 0) > 0 ? (
-        <DetailSection title="Project Report" width={bodyWidth}>
+        <Section title="Project Report" width={bodyWidth}>
           {site.projectReportSections!.map((section, index) => (
             <Box key={`${section.title ?? "section"}:${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
               {section.title ? <Text fg={colors.textDim}>{section.title}</Text> : null}
               <MarkdownBlock text={reportSectionText(section)} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
             </Box>
           ))}
-        </DetailSection>
+        </Section>
       ) : null}
       {site.researchReport ? (
-        <DetailSection title="Research" width={bodyWidth}>
+        <Section title="Research" width={bodyWidth}>
           <MarkdownBlock text={site.researchReport} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
-        </DetailSection>
+        </Section>
       ) : null}
       {(site.builders?.length ?? 0) > 0 ? (
-        <DetailSection title="Involved Companies" width={bodyWidth}>
+        <Section title="Involved Companies" width={bodyWidth}>
           {site.builders!.slice(0, 12).map((builder, index) => (
             <Box key={`${builder.companyName}-${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
               <Box flexDirection="row" height={1}>
@@ -135,7 +117,7 @@ export function SiteDetail({
               <MarkdownBlock text={builder.summary} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
             </Box>
           ))}
-        </DetailSection>
+        </Section>
       ) : null}
     </>
   );

package/src/plugins/builtin/buildout/detail/ui.tsx

@@ -1,12 +1,12 @@
-import type { ReactNode } from "react";
-import { Box, Text, TextAttributes } from "../../../../ui";
-import { Button, TickerBadgeList } from "../../../../components";
-import { ExternalLinkText } from "../../../../components/ui/external-link";
+import { SectionHeading, TickerBadgeList } from "../../../../components";
 import { MarkdownText } from "../../../../components/markdown-text";
-import { colors } from "../../../../theme/colors";
+import { Button } from "../../../../components/ui/button";
+import { ExternalLinkText } from "../../../../components/ui/external-link";
 import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
-import type { BuildoutCompany, BuildoutRelatedCompany, BuildoutSource } from "../model/types";
+import { colors } from "../../../../theme/colors";
+import { Box, Text } from "../../../../ui";
 import { domainFromUrl, text, textOrNull, tickerSymbol, truncate } from "../format";
+import type { BuildoutCompany, BuildoutRelatedCompany, BuildoutSource } from "../model/types";
 
 export type InlineTickerCatalog = Record<string, InlineTickerCatalogEntry>;
 
@@ -48,17 +48,6 @@ export function DetailSpecGrid({ items, width, marginTop = 1 }: { items: DetailS
   );
 }
 
-export function MetaBadge({ label, tone = "neutral" }: { label?: string | null; tone?: "neutral" | "warning" }) {
-  const value = textOrNull(label);
-  if (!value) return null;
-  const accent = tone === "warning" ? colors.warning : colors.borderFocused;
-  return (
-    <Box backgroundColor={accent} paddingX={1} height={1}>
-      <Text fg={colors.bg} attributes={TextAttributes.BOLD}>{value.toUpperCase()}</Text>
-    </Box>
-  );
-}
-
 export function InlineSources({ domains, width }: { domains: readonly string[]; width: number }) {
   if (domains.length === 0) return null;
   const label = "Sources: ";
@@ -70,23 +59,6 @@ export function InlineSources({ domains, width }: { domains: readonly string[];
   );
 }
 
-export function DetailSection({
-  title,
-  width,
-  children,
-}: {
-  title: string;
-  width: number;
-  children: ReactNode;
-}) {
-  return (
-    <Box marginTop={1} flexDirection="column" width={width}>
-      <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{truncate(title, width)}</Text>
-      {children}
-    </Box>
-  );
-}
-
 export function DetailListLine({
   label,
   values,
@@ -247,7 +219,6 @@ export function CompaniesUpgradeCta({
   if (hiddenCount <= 0) return null;
   const noun = hiddenCount === 1 ? "company" : "companies";
   const contentWidth = Math.max(20, width - 2);
-  const title = truncate(`${hiddenCount} more ${noun} available`, contentWidth).padEnd(contentWidth);
   const subtitle = truncate("Upgrade to unlock the full list and company profiles under $10B market cap.", contentWidth).padEnd(contentWidth);
   const note = (message ? truncate(message, contentWidth) : "").padEnd(contentWidth);
   return (
@@ -259,9 +230,7 @@ export function CompaniesUpgradeCta({
       backgroundColor={colors.panel}
       overflow="hidden"
     >
-      <Box height={1} width="100%" backgroundColor={colors.panel}>
-        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{title}</Text>
-      </Box>
+      <SectionHeading title={`${hiddenCount} more ${noun} available`} width={contentWidth} />
       <Box height={1} width="100%" backgroundColor={colors.panel}>
         <Text fg={colors.textDim}>{subtitle}</Text>
       </Box>
@@ -306,33 +275,25 @@ export function FavoriteCell({
   starred,
   busy,
   selected,
-  interactive = false,
   onPress,
 }: {
   starred: boolean;
   busy: boolean;
   selected: boolean;
-  interactive?: boolean;
   onPress?: () => void;
 }) {
-  const color = selected
-    ? colors.selectedText
-    : busy ? colors.textMuted : starred ? colors.warning : colors.textMuted;
   return (
-    <Box
+    <Button
+      label={starred ? "Remove favorite" : "Add favorite"}
+      displayLabel={busy ? "*" : starred ? "★" : "☆"}
       width={2}
-      height={1}
-      style={{ cursor: interactive && !busy ? "pointer" : "default" }}
-      onMouseDown={onPress ? (event: any) => {
-        event.preventDefault?.();
-        event.stopPropagation?.();
-        if (!busy) onPress();
-      } : undefined}
-    >
-      <Text fg={color} attributes={starred ? TextAttributes.BOLD : TextAttributes.NONE} selectable={false}>
-        {busy ? "*" : starred ? "★" : "☆"}
-      </Text>
-    </Box>
+      compact
+      variant="plain"
+      active={selected || starred}
+      disabled={busy || !onPress}
+      stopPropagation
+      onPress={onPress}
+    />
   );
 }
 

package/src/plugins/builtin/buildout/pane/header.tsx

@@ -1,5 +1,5 @@
-import { Box, Text, TextAttributes } from "../../../../ui";
-import { Tabs } from "../../../../components";
+import { Box, Text } from "../../../../ui";
+import { Button, Tabs } from "../../../../components";
 import { colors } from "../../../../theme/colors";
 import type {
   BuildoutList,
@@ -38,15 +38,7 @@ export function BuildoutPaneHeader({
       />
       {showCompanyListCrumb ? (
         <Box height={1} flexDirection="row" paddingX={1}>
-          <Box
-            style={{ cursor: "pointer" }}
-            onMouseDown={(event: any) => {
-              event.preventDefault();
-              onCloseCompanyList();
-            }}
-          >
-            <Text fg={colors.borderFocused} attributes={TextAttributes.BOLD}>{"< Lists"}</Text>
-          </Box>
+          <Button stopPropagation label="Lists" displayLabel="‹ Lists" variant="ghost" compact onPress={onCloseCompanyList} />
           <Text fg={colors.textMuted}>  /  </Text>
           <Text fg={colors.text}>{truncate(selectedList.name, Math.max(0, width - 14))}</Text>
         </Box>

package/src/plugins/builtin/buildout/pane/status.tsx

@@ -1,9 +1,4 @@
-import { Box } from "../../../../ui";
-import {
-  EmptyState,
-  Spinner,
-  type PaneFooterSegment,
-} from "../../../../components";
+import { PaneStatusBody, type PaneFooterSegment } from "../../../../components";
 import type {
   BuildoutList,
   BuildoutLoadState,
@@ -67,18 +62,8 @@ export function renderBuildoutPageStatus(
   const page = activeBuildoutPage(state, activeTab, selectedList);
   if (!page) return null;
   if (page.loadingMore && page.items.length === 0) {
-    return (
-      <Box width="100%" paddingX={1} paddingY={1}>
-        <Spinner label={`Loading ${selectedList?.name ?? activeTab}...`} />
-      </Box>
-    );
-  }
-  if (page.error) {
-    return (
-      <Box width="100%" paddingX={1} paddingY={1}>
-        <EmptyState title="Could not load rows." message={page.error} />
-      </Box>
-    );
+    return <PaneStatusBody loading loadingLabel={`Loading ${selectedList?.name ?? activeTab}...`} />;
   }
+  if (page.error) return <PaneStatusBody error={page.error} errorTitle="Could not load rows." />;
   return null;
 }

package/src/plugins/builtin/cds/headless.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import type { HeadlessPaneContext, HeadlessPaneLoadArgs } from "../../../types/plugin";
-import { createCdsHeadless } from "./headless";
+import { cdsHeadless, createCdsHeadless } from "./headless";
 import type { CdsActivity } from "./client";
 
 const activity: CdsActivity = {
@@ -10,7 +10,7 @@ const activity: CdsActivity = {
   trades: [{
     id: "1", issuer: "Oracle Corporation", issuerKey: "oracle", eventAt: 100,
     maturity: "2031-06-20", notional: 5_000_000, notionalCapped: false,
-    currency: "USD", couponBp: 100, spreadBp: 45, upfront: null, upfrontCurrency: null,
+    currency: "USD", couponBp: 100, spreadBp: 45, reportedSpread: 45, spreadNotation: "4", upfront: null, upfrontCurrency: null,
   }],
 };
 
@@ -27,4 +27,22 @@ describe("CDS headless model", () => {
     expect(market.rows).toEqual([expect.objectContaining({ issuer: "Oracle Corporation", trades: 1 })]);
     expect(ticker.rows).toEqual([expect.objectContaining({ id: "1", spreadBp: 45 })]);
   });
+
+  test("loads source notation through the default adapter without inventing monetary rates", async () => {
+    const trades = ["4", "1", "Other"].map((spreadNotation, index) => ({
+      disseminationId: String(index), originalDisseminationId: null, actionType: "NEWT",
+      executionTimestamp: "2026-09-11T14:00:00Z", eventTimestamp: "2026-09-11T15:00:00Z",
+      effectiveDate: null, expirationDate: null, maturityDate: "2031-06-20",
+      issuerName: "Oracle Corporation", underlierId: null, underlierIdSource: null,
+      upi: null, upiFisn: null, upiUnderlierName: null, notionalAmount: 5_000_000,
+      notionalCapped: true, notionalCurrency: "USD", fixedRate: 0.01,
+      reportedSpread: 250, spreadNotation, upfrontAmount: 0, upfrontCurrency: "USD",
+    }));
+    const result = await cdsHeadless.load(args("Oracle Corporation"), {
+      apiClient: { getCloudCds: async () => ({ source: "DTCC", asOf: null, trades }) },
+    } as unknown as HeadlessPaneContext);
+    expect(result.rows.map((row) => [row.spreadNotation, row.reportedSpread, row.spreadBp]))
+      .toEqual([["4", 250, 250], ["1", 250, null], ["Other", 250, null]]);
+    expect(result.rows.map((row) => [row.couponBp, row.upfront])).toEqual([[100, 0], [100, 0], [100, 0]]);
+  });
 });

package/src/plugins/builtin/cds/model.test.ts

@@ -47,10 +47,20 @@ describe("CDS spread units", () => {
     // Unlabelled raw values are decimals too, not percent.
     expect(spreadToBasisPoints(0.00256, null)).toBeCloseTo(25.6, 6);
     expect(spreadToBasisPoints(25.6, "BPS")).toBe(25.6);
+    expect(spreadToBasisPoints(250, "4")).toBe(250);
     expect(spreadToBasisPoints(25.6, "Basis points")).toBe(25.6);
     expect(spreadToBasisPoints(0.256, "Percentage")).toBeCloseTo(25.6, 6);
     expect(spreadToBasisPoints(null, "3")).toBeNull();
   });
+
+  test("withholds unsupported notation without confusing known zero or negative spreads", () => {
+    expect(["1", "Monetary amount", "Other", "basis unknown", "percent of price", "-4", "3-"].map((unit) =>
+      spreadToBasisPoints(2.5, unit))).toEqual([null, null, null, null, null, null, null]);
+    expect([0, -25].map((value) => spreadToBasisPoints(value, "4"))).toEqual([0, -25]);
+    expect(spreadToBasisPoints(Number.MAX_VALUE, "3")).toBeNull();
+    const [monetary] = normalizeCdsTrades([payload({ reportedSpread: 2.5, spreadNotation: "1" })]);
+    expect(monetary).toMatchObject({ reportedSpread: 2.5, spreadNotation: "1", spreadBp: null, couponBp: 100 });
+  });
 });
 
 describe("normalizeCdsTrades", () => {

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

@@ -8,9 +8,9 @@ export const CDS_PANE_ID = "cds";
 
 /**
  * Raw DTCC values are decimals: `Fixed rate-Leg 1 = 0.01` is a 100bp coupon and
- * `Spread-Leg 1 = 0.00256` under notation code "3" is 25.6bp. Only a report that
- * explicitly labels itself basis points or percent is read any other way. Both
- * conversions happen here and nowhere else.
+ * `Spread-Leg 1 = 0.00256` under notation code "3" is 25.6bp. Spread notation
+ * "4" is already basis points; "1" is monetary and cannot supply a bp rate.
+ * Conversions happen here and nowhere else.
  */
 const PERCENT_TO_BP = 100;
 const DECIMAL_TO_BP = 10_000;
@@ -30,6 +30,9 @@ export interface CdsTrade {
   couponBp: number | null;
   /** Only what the report carried. Never derived from upfront or coupon. */
   spreadBp: number | null;
+  /** Source inputs retained even when their notation cannot supply a bp rate. */
+  reportedSpread: number | null;
+  spreadNotation: string | null;
   upfront: number | null;
   upfrontCurrency: string | null;
 }
@@ -136,11 +139,16 @@ function preferredIssuerName(current: string, candidate: string): string {
 
 export function spreadToBasisPoints(value: number | null, notation: string | null): number | null {
   if (value == null || !Number.isFinite(value)) return null;
-  const unit = (notation ?? "").trim().toLowerCase();
-  if (unit.startsWith("bp") || unit.includes("basis")) return value;
-  if (unit.includes("percent") || unit === "%") return value * PERCENT_TO_BP;
-  // Notation code "3", textual "decimal", and an unlabelled raw value are all decimals.
-  return value * DECIMAL_TO_BP;
+  const unit = (notation ?? "").trim().toLowerCase().replace(/\s+/g, " ");
+  let multiplier: number;
+  if (["4", "bp", "bps", "basispoint", "basispoints", "basis point", "basis points"].includes(unit)) multiplier = 1;
+  else if (["%", "percent", "percentage"].includes(unit)) multiplier = PERCENT_TO_BP;
+  // Unlabelled values retain the existing raw-decimal feed contract. An explicit
+  // monetary or unknown unit must not silently inherit that fallback.
+  else if (["", "3", "decimal"].includes(unit)) multiplier = DECIMAL_TO_BP;
+  else return null;
+  const result = value * multiplier;
+  return Number.isFinite(result) ? result : null;
 }
 
 function couponToBasisPoints(fixedRate: number | null): number | null {
@@ -192,6 +200,8 @@ export function normalizeCdsTrades(trades: readonly CloudCdsTradePayload[]): Cds
       currency: trade.notionalCurrency,
       couponBp: couponToBasisPoints(trade.fixedRate),
       spreadBp: spreadToBasisPoints(trade.reportedSpread, trade.spreadNotation),
+      reportedSpread: trade.reportedSpread,
+      spreadNotation: trade.spreadNotation,
       upfront: trade.upfrontAmount,
       upfrontCurrency: trade.upfrontCurrency,
     });

package/src/plugins/builtin/cds/pane.test.tsx

@@ -18,7 +18,7 @@ const ACTIVITY: CdsActivity = {
   trades: normalizeCdsTrades([
     trade("1", "Oracle Corporation", "2026-08-25T10:00:00Z", { reportedSpread: 0.009, spreadNotation: "3" }),
     trade("2", "Oracle Corporation", "2026-08-25T12:00:00Z", { reportedSpread: null }),
-    trade("3", "Ford Motor Company", "2026-08-25T11:00:00Z", { reportedSpread: 0.025, spreadNotation: "3" }),
+    trade("3", "Ford Motor Company", "2026-08-25T11:00:00Z", { reportedSpread: 250, spreadNotation: "4" }),
   ]),
 };
 
@@ -104,7 +104,7 @@ describe("CdsPane", () => {
     await renderPane();
     const frame = setup!.captureCharFrame();
 
-    // Most active first, and the 250bp report stays 250bp while the percent one becomes 90bp.
+    // Most active first: numeric notation 4 stays 250bp; decimal notation 3 becomes 90bp.
     const oracle = frame.indexOf("Oracle Corporation");
     const ford = frame.indexOf("Ford Motor Company");
     expect(oracle).toBeGreaterThanOrEqual(0);

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

@@ -2,13 +2,12 @@ import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } fro
 import {
   DataTableStackView,
   DataTableView,
-  EmptyState,
-  Spinner,
-  usePaneTicker,
+  EmptyState, PaneStatusBody, usePaneTicker,
   type DataTableCell,
   type DataTableKeyEvent,
-  type PaneFooterSegment,
+  type PaneFooterSegment
 } from "../../../components";
+import { useAsyncResource } from "../../../react/async-resource";
 import { colors } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
 import { Box, Text, TextAttributes } from "../../../ui";
@@ -16,25 +15,25 @@ import { isPlainKey } from "../../../utils/keyboard";
 import { cycleSortPreference } from "../../../utils/sort-values";
 import { useAutoRefresh } from "../shared/auto-refresh";
 import { usePaneStatusFooter } from "../shared/pane-footer";
-import { loadCdsActivity, type CdsActivity, type CdsActivityLoader } from "./client";
+import { loadCdsActivity, type CdsActivityLoader } from "./client";
 import {
-  buildIssuerColumns,
-  buildTradeColumns,
   DEFAULT_ISSUER_SORT,
   DEFAULT_TRADE_SORT,
+  ISSUER_SORT_COLUMN_IDS,
+  TRADE_SORT_COLUMN_IDS,
+  buildIssuerColumns,
+  buildTradeColumns,
   formatAsOf,
   formatBp,
   formatEventTime,
   formatMaturity,
   formatNotional,
   formatUpfront,
-  ISSUER_SORT_COLUMN_IDS,
   nextSort,
   resolveIssuerQuery,
   sortIssuers,
   sortTrades,
   summarizeIssuers,
-  TRADE_SORT_COLUMN_IDS,
   tradesForIssuer,
   type CdsIssuerSummary,
   type CdsTrade,
@@ -71,6 +70,23 @@ function renderIssuerCell(
   }
 }
 
+// Table-shaped adapters live at module level so memoized rows keep their
+// identity between pane renders.
+const issuerKey = (row: CdsIssuerSummary) => row.key;
+const tradeKey = (trade: CdsTrade) => trade.id;
+const renderIssuerRow = (
+  row: CdsIssuerSummary,
+  column: IssuerColumn,
+  _index: number,
+  state: { selected: boolean },
+) => renderIssuerCell(row, column, state.selected);
+const renderTradeRow = (
+  trade: CdsTrade,
+  column: TradeColumn,
+  _index: number,
+  state: { selected: boolean },
+) => renderTradeCell(trade, column, state.selected);
+
 function renderTradeCell(row: CdsTrade, column: TradeColumn, selected: boolean): DataTableCell {
   const selectedColor = selected ? colors.selectedText : undefined;
   switch (column.id) {
@@ -139,8 +155,8 @@ function CdsTradeTable({
       sortColumnId={sort.columnId}
       sortDirection={sort.direction}
       onHeaderClick={(columnId) => onSort(columnId as TradeColumnId)}
-      getItemKey={(trade) => trade.id}
-      renderCell={(trade, column, _index, state) => renderTradeCell(trade, column, state.selected)}
+      getItemKey={tradeKey}
+      renderCell={renderTradeRow}
       emptyStateTitle="No reported trades."
     />
   );
@@ -163,40 +179,17 @@ export function CdsPane({
   const { symbol, ticker } = usePaneTicker();
   const issuerQuery = useMemo(() => resolveIssuerQuery(symbol, ticker), [symbol, ticker]);
 
-  const [activity, setActivity] = useState<CdsActivity | null>(null);
-  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading");
-  const [error, setError] = useState<string | null>(null);
-  const [fetchedAt, setFetchedAt] = useState<number | null>(null);
   const [issuerSort, setIssuerSort] = useState<IssuerSortPreference>(DEFAULT_ISSUER_SORT);
   const [tradeSort, setTradeSort] = useState<TradeSortPreference>(DEFAULT_TRADE_SORT);
   const [selectedIssuerKey, setSelectedIssuerKey] = useState<string | null>(null);
   const [selectedTradeId, setSelectedTradeId] = useState<string | null>(null);
   const [detailOpen, setDetailOpen] = useState(false);
-  const generation = useRef(0);
   // Held in a ref so an inline loader prop cannot turn every render into a fetch.
   const loadActivityRef = useRef(loadActivity);
   loadActivityRef.current = loadActivity;
 
-  const load = useCallback(() => {
-    generation.current += 1;
-    const current = generation.current;
-    setStatus((previous) => (previous === "loaded" ? "loaded" : "loading"));
-    setError(null);
-    loadActivityRef.current(issuerQuery)
-      .then((next) => {
-        if (generation.current !== current) return;
-        setActivity(next);
-        setStatus("loaded");
-        setFetchedAt(Date.now());
-      })
-      .catch((loadError: unknown) => {
-        if (generation.current !== current) return;
-        setError(loadError instanceof Error ? loadError.message : String(loadError));
-        setStatus("error");
-      });
-  }, [issuerQuery]);
-
-  useEffect(() => { load(); }, [load]);
+  const request = useCallback(() => loadActivityRef.current(issuerQuery), [issuerQuery]);
+  const { data: activity, status, error, updatedAt: fetchedAt, load } = useAsyncResource(request);
   useAutoRefresh(fetchedAt, load);
 
   const trades = activity?.trades ?? NO_TRADES;
@@ -268,9 +261,7 @@ export function CdsPane({
 
   if (status === "loading" && !activity) {
     return (
-      <Box width={width} height={height} justifyContent="center" alignItems="center">
-        <Spinner label="Loading CDS activity..." />
-      </Box>
+      <PaneStatusBody loading align="center" width={width} height={height} loadingLabel="Loading CDS activity..." />
     );
   }
   if (!activity) {
@@ -350,8 +341,8 @@ export function CdsPane({
       onHeaderClick={(columnId) => setIssuerSort((current) => (
         nextSort(current, columnId as IssuerColumnId, DEFAULT_ISSUER_SORT)
       ))}
-      getItemKey={(row) => row.key}
-      renderCell={(row, column, _index, state) => renderIssuerCell(row, column, state.selected)}
+      getItemKey={issuerKey}
+      renderCell={renderIssuerRow}
       emptyStateTitle={error ? "CDS activity unavailable." : "No reported single-name CDS trades."}
     />
   );

package/src/plugins/builtin/chart-composer/catalog-inventory.test.ts

@@ -6,7 +6,10 @@ import {
   filterCatalogRows,
   listStaticCatalogInventory,
   looksLikeCatalogTickerQuery,
+  resolveCatalogMarketSource,
 } from "./catalog-inventory";
+import { AssetDataRouter } from "../../../sources/provider-router";
+import { createTestDataProvider } from "../../../test-support/data-provider";
 
 const AAPL = { symbol: "AAPL", exchange: "NASDAQ", name: "Apple Inc." };
 const MSFT = { symbol: "MSFT", exchange: "NASDAQ", name: "Microsoft Corp." };
@@ -94,4 +97,18 @@ describe("data catalog inventory", () => {
       hint: "Press / to search.",
     });
   });
+
+  test("the market source names the provider a request reaches, never the transport carrying it", async () => {
+    const cloud = createTestDataProvider({ id: "gloomberb-cloud", name: "Gloom Cloud", priority: 100 });
+    const yahoo = createTestDataProvider({ id: "yahoo", name: "Yahoo Fallback", priority: 1000 });
+    expect(await resolveCatalogMarketSource(new AssetDataRouter(null, [yahoo, cloud]))).toBe("Gloom Cloud");
+    expect(await resolveCatalogMarketSource(new AssetDataRouter(null, [yahoo]))).toBe("Yahoo Fallback");
+    expect(await resolveCatalogMarketSource(new AssetDataRouter(null, []))).toBe("Market data");
+    // The desktop renderer holds a bridge to the Bun process, which answers for its router.
+    const bridge = { ...createTestDataProvider(), id: "desktop-backend", name: "Gloomberb Backend",
+      primaryMarketSourceName: async () => "Gloom Cloud" };
+    expect(await resolveCatalogMarketSource(bridge)).toBe("Gloom Cloud");
+    const broken = { ...bridge, primaryMarketSourceName: async () => { throw new Error("offline"); } };
+    expect(await resolveCatalogMarketSource(broken)).toBe("Market data");
+  });
 });