@gloom-sh/terminal 0.19.1 → 0.19.3

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

@@ -61,8 +61,23 @@ import {
   updateBuildoutFooterInfo,
 } from "./status";
 import { useBuildoutDataRuntime } from "../data-runtime";
+import { GEO_SCOPE_STATE_KEY } from "../../world-venue-map/scope";
+import type { GeoScope } from "../../world-venue-map/local-layers";
+import { boardRows, boardThemes, resolveBoardTheme, ThemeBoard, ThemeStats, themeStatRows, useThemeStepKeys } from "./themes";
 
 const BUILDOUT_UPGRADE_URL = "https://thebuildout.ai/pricing";
+/** How long the cursor rests on a company before linked panes follow it. */
+const CURSOR_PUBLISH_MS = 150;
+
+/** A symbol the rest of the app can open: the dataset writes some Asian listings by number alone. */
+function linkableTicker(value: string | null | undefined): string | null {
+  const symbol = tickerSymbol(value);
+  return symbol && /^[A-Z][A-Z0-9.-]*$/.test(symbol) ? symbol : null;
+}
+
+function sameScope(left: GeoScope | null, right: GeoScope | null): boolean {
+  return left?.key === right?.key && left?.label === right?.label;
+}
 
 /** A star a row's company or site did not take: said by its star cell, in full at the top of its detail. */
 const favoriteNoteKey = (row: BuildoutRow) => favoriteKey(row) ?? rowKey(row);
@@ -97,8 +112,11 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   const tableScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const favoriteBusyKeysRef = useRef<Set<string>>(new Set());
   const clearFavoriteNotesRef = useRef<() => void>(() => {});
-  const [activeTab, setActiveTab] = usePaneStateValue<BuildoutTabId>("activeTab", "companies");
+  const [activeTab, setActiveTab] = usePaneStateValue<BuildoutTabId>("activeTab", "themes");
   const [selectedList, setSelectedList] = useState<BuildoutList | null>(null);
+  const [themeSlug, setThemeSlug] = usePaneStateValue<string | null>("themeSlug", null);
+  const [, setCursorSymbol] = usePaneStateValue<string | null>("cursorSymbol", null);
+  const [, setGeoScope] = usePaneStateValue<GeoScope | null>(GEO_SCOPE_STATE_KEY, null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailRow, setDetailRow] = useState<BuildoutRow | null>(null);
   const [sort, setSort] = useState<SortPreference<BuildoutColumnId>>({ columnId: null, direction: "asc" });
@@ -126,7 +144,12 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     activeTab,
     onBeforeLoad: handleBeforeLoad,
     selectedList,
+    themeSlug,
   });
+  const themes = useMemo(() => (state.status === "ready" ? boardThemes(state.lists) : []), [state]);
+  const themeList = useMemo(() => resolveBoardTheme(themes, themeSlug), [themeSlug, themes]);
+  // The list whose companies the table shows: the board's theme, or the one opened from Companies.
+  const currentList = activeTab === "themes" ? themeList : selectedList;
   const favoriteToken = state.status === "ready" ? state.token : null;
   const canFavorite = favoriteToken != null;
 
@@ -146,25 +169,43 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   useEffect(() => {
     setSelectedIndex(0);
     setDetailRow(null);
-    const nextColumn: BuildoutColumnId | null = activeTab === "companies"
-      ? selectedList ? "marketCap" : null
+    const nextColumn: BuildoutColumnId | null = activeTab === "companies" || activeTab === "themes"
+      ? currentList ? "marketCap" : null
       : activeTab === "sites" ? "capture" : "time";
     setSort({ columnId: nextColumn, direction: defaultSortDirection(nextColumn) });
-  }, [activeTab, selectedList?.slug]);
+  }, [activeTab, currentList?.slug]);
 
   const rows = useMemo(
-    () => sortRows(activeRows(state, activeTab, selectedList), sort.columnId, sort.direction),
-    [activeTab, selectedList, sort, state],
+    () => sortRows(activeRows(state, activeTab, currentList), sort.columnId, sort.direction),
+    [activeTab, currentList, sort, state],
   );
   // Until the next star on that row, or a reload.
   const favoriteNotes = useRowNotes<BuildoutRow, string>(rows, { key: favoriteNoteKey });
   const { setNote: setFavoriteNote, noteFor: favoriteNoteFor } = favoriteNotes;
   clearFavoriteNotesRef.current = favoriteNotes.clearNotes;
   const columns = useMemo(
-    () => columnsForTab(activeTab, selectedList, canFavorite, width),
-    [activeTab, canFavorite, selectedList, width],
+    () => columnsForTab(activeTab, currentList, canFavorite, width),
+    [activeTab, canFavorite, currentList, width],
   );
   const selectedRow = rows[selectedIndex] ?? rows[0] ?? null;
+
+  // Panes linked to this one follow the company under the cursor, and a linked map can widen to the
+  // theme it belongs to. Off the company tabs both stay where they were.
+  const cursorCompany = detailRow?.kind === "company" ? detailRow.item : selectedRow?.kind === "company" ? selectedRow.item : null;
+  const cursorTicker = linkableTicker(cursorCompany?.ticker);
+  // Published once the cursor rests: arrowing down a theme would otherwise load every company it passes.
+  useEffect(() => {
+    if (!cursorTicker) return;
+    const timer = setTimeout(() => setCursorSymbol(cursorTicker), CURSOR_PUBLISH_MS);
+    return () => clearTimeout(timer);
+  }, [cursorTicker, setCursorSymbol]);
+  const companyTab = activeTab === "themes" || activeTab === "companies";
+  const themeScope = companyTab && currentList && currentList.slug !== "all" ? currentList : null;
+  useEffect(() => {
+    if (!companyTab) return;
+    const next: GeoScope | null = themeScope ? { key: `theme:${themeScope.slug}`, label: themeScope.name } : null;
+    setGeoScope((current) => (sameScope(current, next) ? current : next));
+  }, [companyTab, setGeoScope, themeScope?.name, themeScope?.slug]);
   // The table's cells carry their own badges; this catalog only serves the open
   // detail: its row's tickers, plus the loaded rows' tickers its text mentions.
   // Streaming every loaded row here would subscribe pages of symbols nobody sees.
@@ -226,8 +267,8 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   // The free tier sees the head of a list; the footer says so, the `$` hint
   // is the way out, and no count of what is hidden is drawn.
   const partialList = state.status === "ready"
-    && activeTab === "companies"
-    && !!selectedList
+    && companyTab
+    && !!currentList
     && !state.companies.loadingMore
     && !state.companies.hasMore
     && !state.companies.error
@@ -262,6 +303,10 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     setDetailRow(row);
   }, [openCompanyList]);
 
+  const selectTheme = useCallback((list: BuildoutList) => {
+    setThemeSlug(list.slug);
+  }, [setThemeSlug]);
+
   const updateFavorite = useCallback((key: string, starred: boolean) => {
     setState((current) => applyFavoriteToState(current, key, starred));
     setDetailRow((current) => (
@@ -328,23 +373,23 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   }, [chooseOpenTarget, favoriteBusyKey, favoriteTarget, favoriteTargetKey, openTargets.length, startUpgrade, state, toggleFavoriteRow]);
 
   usePaneFooter("buildout", () => ({
-    info: updateBuildoutFooterInfo(state, activeTab, selectedList, {
+    info: updateBuildoutFooterInfo(state, activeTab, currentList, {
       upgradeMessage,
       partialList,
       onUpgrade: startUpgrade,
       quoteFreshness: detailQuoteFreshness,
     }),
     hints: footerHints,
-  }), [activeTab, detailQuoteFreshness, footerHints, partialList, selectedList, startUpgrade, state, upgradeMessage]);
+  }), [activeTab, currentList, detailQuoteFreshness, footerHints, partialList, startUpgrade, state, upgradeMessage]);
 
-  const activePage = state.status === "ready" ? activeBuildoutPage(state, activeTab, selectedList) : null;
+  const activePage = state.status === "ready" ? activeBuildoutPage(state, activeTab, currentList) : null;
   const loadMoreActiveRows = useTableLoadMore(
     tableScrollRef,
     !!activePage && !activePage.loadingMore && !!activePage.hasMore && !activePage.error,
     () => {
       if (!activePage) return;
-      if (activeTab === "companies" && selectedList) {
-        void loadCompanies(selectedList, activePage.offset, true);
+      if (companyTab && currentList) {
+        void loadCompanies(currentList, activePage.offset, true);
       } else if (activeTab === "sites") {
         void loadSites(activePage.offset, true);
       } else if (activeTab === "intel") {
@@ -385,6 +430,8 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     toggleFavorite,
   }), [favoriteBusyKey, favoriteNoteFor, toggleFavorite]);
 
+  useThemeStepKeys({ themes, selectedSlug: themeList?.slug ?? null, enabled: focused && activeTab === "themes" && !detailRow, onSelect: selectTheme });
+
   const { strip: tabStrip, rows: tabRows } = usePaneTabs({
     tabs,
     activeValue: activeTab,
@@ -406,7 +453,12 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   }
 
   const listOpen = activeTab === "companies" && !!selectedList;
-  const tableHeight = Math.max(1, height - tabRows - (listOpen ? 1 : 0));
+  // Themes: the board, the theme in figures, then its companies; an open company takes the whole body.
+  const themesBody = activeTab === "themes" && !detailRow;
+  const bodyHeight = Math.max(1, height - tabRows);
+  const boardHeight = themesBody ? boardRows(bodyHeight) : 0;
+  const statHeight = themesBody ? themeStatRows(themeList, width) : 0;
+  const tableHeight = Math.max(1, bodyHeight - (listOpen ? 1 : 0) - boardHeight - statHeight);
   const table = (
     <DataTableStackView<BuildoutRow, BuildoutColumn>
       focused={focused}
@@ -430,7 +482,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
       selection={{
         kind: "index",
         selectedIndex,
-        onChange: (index) => setSelectedIndex(index),
+        onChange: setSelectedIndex,
       }}
       onActivate={activateRow}
       // The lists start unsorted, and every table sorts by its headers.
@@ -441,16 +493,35 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
       getItemKey={rowKey}
       renderCell={renderCell}
       selectedTextOverridesCellColor
-      emptyContent={renderBuildoutPageStatus(state, activeTab, selectedList)}
-      emptyStateTitle={selectedList ? "No companies" : "No rows"}
+      emptyContent={renderBuildoutPageStatus(state, activeTab, currentList)}
+      emptyStateTitle={currentList ? "No companies" : "No rows"}
       onRootKeyDown={handleRootKeyDown}
       onDetailKeyDown={handleDetailKeyDown}
       onBodyScrollActivity={loadMoreActiveRows}
       scrollRef={tableScrollRef}
-      resetScrollKey={`${activeTab}:${selectedList?.slug ?? "lists"}`}
+      resetScrollKey={`${activeTab}:${currentList?.slug ?? "lists"}`}
     />
   );
 
+  if (activeTab === "themes") {
+    return (
+      <Box flexDirection="column" width={width} height={height} overflow="hidden">
+        {tabStrip && <Box height={1}>{tabStrip}</Box>}
+        {boardHeight > 0 ? (
+          <ThemeBoard
+            themes={themes}
+            selectedSlug={themeList?.slug ?? null}
+            width={width}
+            height={boardHeight}
+            onSelect={selectTheme}
+          />
+        ) : null}
+        {themesBody ? <ThemeStats list={themeList} width={width} /> : null}
+        {table}
+      </Box>
+    );
+  }
+
   // Tabs on top; below them a list opened from Companies is a stack level with
   // the shared Back row, and a company opened from that list is the table's
   // own detail. The outer stack only listens while the inner detail is closed.

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

@@ -11,7 +11,7 @@ export function activeBuildoutPage(
   selectedList: BuildoutList | null,
 ) {
   if (state.status !== "ready") return null;
-  if (activeTab === "companies") return selectedList ? state.companies : null;
+  if (activeTab === "companies" || activeTab === "themes") return selectedList ? state.companies : null;
   if (activeTab === "sites") return state.sites;
   return state.intel;
 }

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

@@ -0,0 +1,110 @@
+import { useId, useMemo } from "react";
+import { MetricTreemapSurface, StatGrid, type MetricTreemapItem, type StatItem } from "../../../../components";
+import { statGridWithin } from "../../../../components/ui/stat-grid";
+import { useShortcut } from "../../../../react/input";
+import { priceColor } from "../../../../theme/colors";
+import { isPlainKey } from "../../../../utils/keyboard";
+import { metricNumber, moneyAmount, text } from "../format";
+import type { BuildoutList } from "../model/types";
+
+/** The board leaves the table at least this many rows, and draws only when it has this many itself. */
+const MIN_TABLE_ROWS = 8;
+const MIN_BOARD_ROWS = 6;
+
+/** The themes the board draws, largest first: the order the arrows step through. */
+export function boardThemes(lists: readonly BuildoutList[]): BuildoutList[] {
+  return lists
+    .filter((list) => list.slug !== "all")
+    .map((list, index) => ({ list, index, cap: moneyAmount(list.totalMarketCap) ?? 0 }))
+    .sort((left, right) => right.cap - left.cap || left.index - right.index)
+    .map(({ list }) => list);
+}
+
+/** The theme the board opens on: the one saved with the pane, else the largest. */
+export function resolveBoardTheme(themes: readonly BuildoutList[], slug: string | null): BuildoutList | null {
+  return themes.find((list) => list.slug === slug) ?? themes[0] ?? null;
+}
+
+/** Rows for the board in a Themes body of `height` rows; zero when the table needs them all. */
+export function boardRows(height: number): number {
+  const rows = Math.min(Math.floor(height * 0.46), height - MIN_TABLE_ROWS);
+  return rows >= MIN_BOARD_ROWS ? rows : 0;
+}
+
+/**
+ * Left and right step to the next theme by size, board or not; up and down
+ * stay with the companies table. Ahead of the pane's tabs, which take left and
+ * right as well; h and l still switch tabs.
+ */
+export function useThemeStepKeys({ themes, selectedSlug, enabled, onSelect }: {
+  themes: readonly BuildoutList[];
+  selectedSlug: string | null;
+  enabled: boolean;
+  onSelect: (list: BuildoutList) => void;
+}) {
+  const scope = useId();
+  const index = Math.max(0, themes.findIndex((list) => list.slug === selectedSlug));
+  useShortcut((event) => {
+    if (!enabled || themes.length === 0) return;
+    const step = isPlainKey(event, "left") ? -1 : isPlainKey(event, "right") ? 1 : 0;
+    if (!step) return;
+    event.preventDefault();
+    event.stopPropagation();
+    onSelect(themes[(index + step + themes.length) % themes.length]!);
+  }, { enabled, scope: `buildout-themes:${scope}` });
+}
+
+/** The selected theme in figures, between the board and its companies. */
+function themeStatItems(list: BuildoutList | null): StatItem[] {
+  if (!list) return [];
+  const returnColor = metricNumber(list.avgReturn1y);
+  const growthColor = metricNumber(list.avgSectorGrowth);
+  return [
+    { id: "theme", label: "Theme", value: list.name, detail: list.shortDescription ?? undefined, detailVariants: [""], wide: true },
+    { id: "companies", label: "Companies", value: text(list.companyCount) },
+    { id: "return", label: "1Y median", value: text(list.avgReturn1y), ...(returnColor == null ? {} : { color: priceColor(returnColor) }) },
+    { id: "growth", label: "Growth", value: text(list.avgSectorGrowth), ...(growthColor == null ? {} : { color: priceColor(growthColor) }) },
+    { id: "leaders", label: "Leaders", value: text(list.leaders) },
+  ];
+}
+
+export function themeStatRows(list: BuildoutList | null, width: number): number {
+  return statGridWithin(themeStatItems(list), width, 2).lines;
+}
+
+export function ThemeStats({ list, width }: { list: BuildoutList | null; width: number }) {
+  const { items } = statGridWithin(themeStatItems(list), width, 2);
+  return <StatGrid items={items} width={width} maxLines={2} />;
+}
+
+/**
+ * The themes as a board: each tile sized by the theme's market value and
+ * coloured by its companies' median one-year return.
+ */
+export function ThemeBoard({ themes, selectedSlug, width, height, onSelect }: {
+  themes: readonly BuildoutList[];
+  selectedSlug: string | null;
+  width: number;
+  height: number;
+  onSelect: (list: BuildoutList) => void;
+}) {
+  const items = useMemo<MetricTreemapItem<BuildoutList>[]>(() => themes.map((list) => ({
+    id: list.slug,
+    label: list.name,
+    weight: moneyAmount(list.totalMarketCap),
+    colorValue: metricNumber(list.avgReturn1y),
+    primaryText: list.avgReturn1y,
+    tooltip: [list.name, `${text(list.avgReturn1y)} 1Y median · ${text(list.totalMarketCap)} · ${text(list.companyCount)} companies`],
+    data: list,
+  })), [themes]);
+  return (
+    <MetricTreemapSurface
+      items={items}
+      width={width}
+      height={height}
+      selectedId={selectedSlug}
+      onSelect={(item) => onSelect(item.data)}
+      emptyStateTitle="No themes"
+    />
+  );
+}

package/src/plugins/builtin/buildout/table-model.ts

@@ -10,9 +10,10 @@ import type {
 } from "./model/types";
 import { dropColumnsToFit } from "../../../components/ui/table-layout";
 import type { SortDirection } from "../../../utils/sort-values";
-import { metricNumber, sourceDetailEntries, textOrNull, tickerSymbol } from "./format";
+import { LIST_TIER_ORDER, metricNumber, sourceDetailEntries, textOrNull, tickerSymbol } from "./format";
 
 export const tabs: Array<{ label: string; value: BuildoutTabId }> = [
+  { label: "Themes", value: "themes" },
   { label: "Companies", value: "companies" },
   { label: "Sites", value: "sites" },
   { label: "Intel", value: "intel" },
@@ -46,6 +47,17 @@ const companyColumns: BuildoutColumn[] = [
   { id: "employees", label: "Employees", width: 9, align: "right" },
 ];
 
+/** A theme's companies under its board: what each does in the theme, then the figures. */
+const themeCompanyColumns: BuildoutColumn[] = [
+  { id: "company", label: "Company", width: 26, align: "left", flexGrow: 2 },
+  { id: "listRole", label: "Role", width: 15, align: "left" },
+  { id: "listTier", label: "Tier", width: 9, align: "left" },
+  { id: "marketCap", label: "Mkt Cap", width: 10, align: "right" },
+  { id: "revenueGrowth", label: "Growth", width: 9, align: "right" },
+  { id: "return1y", label: "1Y", width: 8, align: "right" },
+];
+const THEME_COMPANY_DROP_ORDER: readonly BuildoutColumnId[] = ["listTier", "revenueGrowth", "listRole"];
+
 const siteColumns: BuildoutColumn[] = [
   { id: "site", label: "Site Name", width: 28, align: "left", flexGrow: 2 },
   // The default sort, so it sits where it is always on screen.
@@ -160,11 +172,16 @@ export function activeRows(
   selectedList: BuildoutList | null,
 ): BuildoutRow[] {
   if (state.status !== "ready") return [];
+  if (activeTab === "themes") {
+    return selectedList && state.companies.listSlug === selectedList.slug
+      ? state.companies.items.map((item) => ({ kind: "company", item }))
+      : [];
+  }
   if (activeTab === "companies") {
     if (!selectedList) {
       return state.lists.map((item) => ({ kind: "list", item }));
     }
-    return state.companies.items.map((item) => ({ kind: "company", item }));
+    return state.companies.listSlug === selectedList.slug ? state.companies.items.map((item) => ({ kind: "company", item })) : [];
   }
   if (activeTab === "sites") {
     return state.sites.items.map((item) => ({ kind: "site", item }));
@@ -190,6 +207,9 @@ export function columnsForTab(
   canFavorite: boolean,
   width: number,
 ): BuildoutColumn[] {
+  if (activeTab === "themes") {
+    return dropColumnsToFit(canFavorite ? [favoriteColumn, ...themeCompanyColumns] : themeCompanyColumns, width - 1, THEME_COMPANY_DROP_ORDER);
+  }
   if (activeTab === "companies") {
     const columns = selectedList
       ? canFavorite ? [favoriteColumn, ...companyColumns] : companyColumns
@@ -286,6 +306,10 @@ function sortValue(row: BuildoutRow, columnId: BuildoutColumnId): SortComparable
         return numberSort(company.return1y);
       case "employees":
         return numberSort(company.employeeCount);
+      case "listRole":
+        return stringSort(company.listRole);
+      case "listTier":
+        return numberSort(company.listTier && LIST_TIER_ORDER.includes(company.listTier) ? LIST_TIER_ORDER.indexOf(company.listTier) : null);
       default:
         return stringSort(rowTitle(row));
     }

package/src/plugins/builtin/builtin-plugin-meta.ts

@@ -163,3 +163,19 @@ export const earningsPluginMeta = {
   version: "1.0.0",
   toggleable: true,
 };
+
+export const fearGreedPluginMeta = {
+  id: "fear-greed",
+  name: "Fear & Greed",
+  version: "1.0.0",
+  description: "CNN Fear & Greed index with the seven indicator charts",
+  toggleable: true,
+};
+
+export const notesPluginMeta = {
+  id: "notes",
+  name: "Notes",
+  version: "2.0.0",
+  description: "Markdown notes on tickers and on their own, personal or shared with a team.",
+  toggleable: true,
+};

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

@@ -21,7 +21,7 @@ import {
   type CoveredIssuers,
   type InstrumentSearch,
 } from "./client";
-import { formatContract } from "../credit-boards/model";
+import { formatContract, levelKinds } from "../credit-boards/model";
 import {
   DEFAULT_TRADE_SORT,
   ISSUER_LIST_SORTS,
@@ -122,6 +122,8 @@ function dailySection(history: CdsSpreadHistory, days: number, name: string): He
   const from = latest ? new Date(Date.parse(`${latest}T00:00:00Z`) - days * 86_400_000).toISOString().slice(0, 10) : "";
   // A name quoted upfront lists each day's points beside its spread.
   const upfront = history.quote === "upfront";
+  const shown = history.points.filter((point) => point.date > from).reverse();
+  const kinds = levelKinds(shown, (point) => point.kind);
   return {
     title: "Daily",
     columns: [
@@ -136,8 +138,9 @@ function dailySection(history: CdsSpreadHistory, days: number, name: string): He
       }] : []),
       { key: "prints", header: "Prints", align: "right" as const },
       { key: "maturity", header: "Contract", format: (value: unknown) => formatContract(typeof value === "string" ? value : null) },
+      ...kinds.columns,
     ],
-    rows: history.points.filter((point) => point.date > from).reverse()
+    rows: shown
       .map((point) => ({
         day: point.date,
         spreadBp: point.spreadBp,
@@ -145,6 +148,7 @@ function dailySection(history: CdsSpreadHistory, days: number, name: string): He
         unit: upfront ? "pts" : "bp",
         prints: point.prints,
         maturity: point.maturity,
+        ...kinds.row(point),
       })),
     empty: "No daily 5Y levels.",
     symbol: name,
@@ -212,11 +216,14 @@ function spreadEntries(history: CdsSpreadHistory): HeadlessPaneEntry[] {
       : { lowBp: summary.range.low, highBp: summary.range.high, since: summary.range.since },
     formatted: `${formatSpreadRange(unit, summary.range)} since ${summary.range.since}`,
   } : null;
+  // A level that is the day's settlement price says so beside its date; one from trades says nothing.
+  const kind = summary.settlement ? [{ key: "kind", label: "Level", value: "settlement" }] : [];
   if (unit === "pts") {
     return [
       { key: "upfrontPts", label: "5Y upfront", value: summary.level, formatted: formatPoints(summary.level), unit: "pts" },
       { key: "couponBp", label: "Coupon", value: summary.couponBp, formatted: formatBp(summary.couponBp) },
       { key: "date", label: "Date", value: summary.date },
+      ...kind,
       { key: "change1wPts", label: "1W change", value: summary.change1w, formatted: formatPointsMove(summary.change1w), unit: "pts" },
       { key: "change1mPts", label: "1M change", value: summary.change1m, formatted: formatPointsMove(summary.change1m), unit: "pts" },
       ...(range ? [range] : []),
@@ -225,6 +232,7 @@ function spreadEntries(history: CdsSpreadHistory): HeadlessPaneEntry[] {
   return [
     { key: "spreadBp", label: "5Y spread", value: summary.level, formatted: formatBp(summary.level) },
     { key: "date", label: "Date", value: summary.date },
+    ...kind,
     { key: "change1wBp", label: "1W change", value: summary.change1w, formatted: formatSpreadMove(summary.change1w) },
     { key: "change1mBp", label: "1M change", value: summary.change1m, formatted: formatSpreadMove(summary.change1m) },
     ...(range ? [range] : []),

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

@@ -6,7 +6,7 @@ import type { TickerRecord } from "../../../types/ticker";
 import { formatCompact } from "../../../utils/format";
 import { compareSortValues, type SortPreference } from "../../../utils/sort-values";
 import { typoDistance } from "../../../utils/typo-distance";
-import { formatMove } from "../credit-boards/model";
+import { formatMove, SETTLEMENT_TEXT } from "../credit-boards/model";
 
 export const CDS_PANE_ID = "cds";
 
@@ -858,6 +858,8 @@ export interface CdsSpreadSummary {
   /** The latest level in that unit, and the New York trade date it is from. */
   level: number;
   date: string;
+  /** The level is that day's settlement price, not its trades. */
+  settlement: boolean;
   /** The same level in bp. */
   spreadBp: number;
   /** The running coupon of a name quoted upfront, bp. */
@@ -888,6 +890,7 @@ export function spreadSummary(line: CdsSpreadLine): CdsSpreadSummary | null {
     unit: upfront ? "pts" : "bp",
     level: upfront ? line.upfrontPts! : latest.spreadBp,
     date: latest.date,
+    settlement: latest.kind === "settlement",
     spreadBp: latest.spreadBp,
     couponBp: upfront ? line.couponBp : null,
     change1w: upfront ? line.change1WPts : line.change1W,
@@ -921,15 +924,16 @@ export function spreadFigures(line: CdsSpreadLine): StatItem[] {
   const summary = spreadSummary(line);
   if (!summary) return [];
   const { unit } = summary;
+  const dated = summary.settlement ? `${summary.date} · ${SETTLEMENT_TEXT}` : summary.date;
   return [
     unit === "pts"
       ? {
         id: "spread",
         label: "5Y upfront",
         value: formatPoints(summary.level),
-        detail: summary.couponBp == null ? summary.date : `${summary.date} · ${formatBp(summary.couponBp)} coupon`,
+        detail: summary.couponBp == null ? dated : `${dated} · ${formatBp(summary.couponBp)} coupon`,
       }
-      : { id: "spread", label: "5Y spread", value: formatBp(summary.level), detail: summary.date },
+      : { id: "spread", label: "5Y spread", value: formatBp(summary.level), detail: dated },
     ...(summary.change1w != null ? [{ id: "1w", label: "1W", value: formatQuotedMove(unit, summary.change1w) }] : []),
     ...(summary.change1m != null ? [{ id: "1m", label: "1M", value: formatQuotedMove(unit, summary.change1m) }] : []),
     ...(summary.range ? [{

package/src/plugins/builtin/central-bank-rates/index.tsx

@@ -1,12 +1,11 @@
 import type { PluginModule } from "../plugin-module";
 import { centralBankRatesCache } from "./client";
 import { centralBankRatesHeadless } from "./headless";
-import { CentralBankRatesPane } from "./pane";
 import { CENTRAL_BANK_SERIES } from "./series";
 
 export const centralBankRatesModule: PluginModule = {
   series: CENTRAL_BANK_SERIES,
-  panes: [{ id: "central-bank-rates", name: "Central Bank Rates", icon: "%", component: CentralBankRatesPane,
+  panes: [{ id: "central-bank-rates", name: "Central Bank Rates", icon: "%", get component(): typeof import("./pane").CentralBankRatesPane { const { CentralBankRatesPane } = require("./pane"); return CentralBankRatesPane; },
     defaultPosition: "right", defaultMode: "floating", defaultFloatingSize: { width: 108, height: 25 },
     tableExport: true, headless: centralBankRatesHeadless }],
   paneTemplates: [{

package/src/plugins/builtin/central-bank-rates/pane.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from "react";
 import { Box } from "../../../ui";
 import { useAsyncResource, useAutoRefresh, usePluginPaneState, useUpdatedAgo } from "../../../public/react";
 import { CompositeChart, MarketBoardStack, PaneStatusBody, usePaneNoticeFooter, usePaneStatusLinkFooter, type StatItem } from "../../../components";
+import { ageFooterSegment } from "../../../components/layout/pane/footer";
 import { colors } from "../../../theme/colors";
 import { isAccessDenied } from "../../../api-client/errors";
 import type { CentralBankRow } from "../../../api-client/central-bank-rates";
@@ -59,7 +60,7 @@ export function CentralBankRatesPane({ width, height, focused }: PaneProps) {
     notices: [...(data ? policyNotices(data) : []), ...(resource.data?.refreshError ? [resource.data.refreshError] : [])] });
   usePaneStatusLinkFooter({ registrationId: "central-bank-rates", focused, loading: resource.loading, error: resource.error,
     url: selected?.observation.sourceUrl ?? null, showOpenHint: true,
-    info: data && updatedAgo ? [{ id: "updated", parts: [{ text: updatedAgo, tone: "muted" as const }] }] : [],
+    info: data && updatedAgo ? [ageFooterSegment(updatedAgo)] : [],
     stale: !!data && resource.data?.stale,
   });
   return <Box width={width} height={height} flexDirection="column">

package/src/plugins/builtin/central-bank-rates/series.ts

@@ -1,6 +1,6 @@
 import type { SeriesDefinition } from "../../../series/types";
 import { CENTRAL_BANKS, centralBankNames } from "../../../utils/central-banks";
-import { cachedSeriesWarning } from "../shared/series-warning";
+import { cachedSeriesNote } from "../shared/series-warning";
 import { loadCentralBankRates } from "./client";
 import { policySeriesAttribution } from "./model";
 
@@ -24,12 +24,11 @@ export const CENTRAL_BANK_SERIES: readonly SeriesDefinition[] = CENTRAL_BANKS.ma
     const resource = await loadCentralBankRates();
     const row = resource.payload.rows.find((entry) => entry.id === bank.id);
     if (!row) throw new Error(`${bank.place} is not on the board right now.`);
-    const warning = cachedSeriesWarning(resource);
     // Cited as CBR cites the row: the BIS or FRED series and the bank that sets the rate.
     const attribution = policySeriesAttribution(row);
     return {
       points: row.history.map((point) => ({ date: point.date, value: point.value })),
-      ...(warning ? { warning } : {}),
+      ...cachedSeriesNote(resource),
       ...(attribution ? { attribution } : {}),
     };
   },

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

@@ -82,7 +82,8 @@ function ChangelogDetail({
   );
 }
 
-function ChangelogPane({ focused, width, height }: PaneProps) {
+/** The Changelog, as its own pane (CHG) and as ROADMAP's Changelog view. */
+export function ChangelogPane({ focused, width, height }: PaneProps) {
   const paneInstance = usePaneInstance();
   const requestedVersion = paneInstance?.params?.version ?? null;
   const [releases, setReleases] = useState<ChangelogRelease[]>(() => releaseCache.peek(RELEASES, { stale: true }) ?? []);
@@ -289,7 +290,7 @@ export const changelogModule: PluginModule = {
       name: "Changelog",
       icon: "L",
       component: ChangelogPane,
-      reportFreshness: { status: "not-a-feed", basis: "release notes" },
+      reportFreshness: { status: "not-a-feed", basis: "release notes", local: true },
       defaultPosition: "right",
       defaultMode: "floating",
       defaultFloatingSize: { width: 100, height: 32 },

package/src/plugins/builtin/chart-composer/cli-options.ts

@@ -11,6 +11,7 @@ import {
 } from "../../../time-series/spec";
 import type { ChartSeriesSpec, ChartSpec, SeriesPeriod } from "../../../time-series/types";
 import { yearToDateBaseDay } from "../../../market-data/market/year-to-date";
+import { readPriceWindow } from "../../../utils/price-window";
 
 const PRICE_CAPABILITIES = new Set(["price-chart", "intraday-price-chart", "price-comparison"]);
 
@@ -35,6 +36,13 @@ export function yearToDateWindow(spec: ChartSpec, now = Date.now()): { start: st
   return { start: starts.sort()[0] ?? `${Number(today.slice(0, 4)) - 1}-12-31`, end: today };
 }
 
+/** The shortest range whose history reaches back to `from`: 5Y for a window from 2022, ALL for one from 2019. */
+function rangeCovering(from: string, now = Date.now()): TimeRange {
+  const days = (now - Date.parse(`${from}T00:00:00Z`)) / 86_400_000;
+  const covering: Array<[TimeRange, number]> = [["1M", 31], ["3M", 92], ["6M", 183], ["1Y", 366], ["5Y", 5 * 366]];
+  return covering.find(([, span]) => days <= span)?.[0] ?? "ALL";
+}
+
 function chartResolution(options: HeadlessPaneOptionValues): ChartResolution | null {
   return parseChartResolution(options.chartResolution ?? options.resolution);
 }
@@ -77,6 +85,14 @@ export function applyChartComposerCapabilityOptions(
     };
   }
 
+  // --from and --to: those dates, each leg rebased at its first close in them, as YTD is from the prior year's last.
+  const window = capabilityId === "price-comparison"
+    ? readPriceWindow(typeof options.from === "string" ? options.from : undefined, typeof options.to === "string" ? options.to : undefined)
+    : null;
+  if (window) {
+    next = { ...next, viewport: { ...next.viewport, range: rangeCovering(window.from), dateWindow: { start: window.from, end: window.to } } };
+  }
+
   if (capabilityId === "price-chart" && options.extendedHours === true) {
     next = { ...next, viewport: { ...next.viewport, extendedHours: true } };
   }