gloomberb 0.13.2 → 0.14.0

package/src/plugins/builtin/market-valuation/pane.tsx

@@ -1,78 +1,57 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import {
   DataTableView,
   EmptyState,
-  InputSearchBar,
-  SegmentedControl,
-  Spinner,
-  type DataTableCell,
+  InputSearchBar, PaneStatusBody, SegmentedControl, type DataTableCell,
   type DataTableColumn,
   type DataTableKeyEvent,
   type DataTableSelectionChangeReason,
-  type PaneFooterSegment,
+  type PaneFooterSegment
 } from "../../../components";
+import { useAsyncResource } from "../../../react/async-resource";
 import { useShortcut } from "../../../react/input";
 import { usePaneSettingValue } from "../../../state/app/context";
 import { colors } from "../../../theme/colors";
 import type { PaneProps } from "../../../types/plugin";
-import { Box, ScrollBox, Text, type InputRenderable } from "../../../ui";
+import { Box, ScrollBox, type InputRenderable } from "../../../ui";
 import { formatNumber } from "../../../utils/format";
 import { isPlainKey } from "../../../utils/keyboard";
 import { stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
 import { useAutoRefresh } from "../shared/auto-refresh";
 import { usePaneStatusFooter } from "../shared/pane-footer";
 import { getCachedValuationBundle, loadValuationBundle } from "./client";
-import { shortZoneLabel, type ValuationRangeId } from "./defs";
+import { indicatorSeries, indicatorUnavailableReason, shortZoneLabel, type IndicatorDef, type ValuationRangeId } from "./defs";
 import { IndicatorDetail } from "./detail";
+import { INDICATORS } from "./indicators";
 import { RANGE_OPTIONS, VALUATION_DEFAULTS } from "./settings";
 import {
   formatSigma,
   selectValuationViews,
-  type IndicatorViewModel,
-  type ValuationBundle,
+  type IndicatorViewModel
 } from "./view";
 
 /** Below this the detail sits under the table instead of beside it. */
+const loadBundle = (force: boolean) => loadValuationBundle({ force });
+
 const SPLIT_MIN_WIDTH = 108;
 const LIST_WIDTH = 46;
 
-type LoadState =
-  | { status: "idle" }
-  | { status: "loading"; previous: ValuationBundle | null }
-  | { status: "ready"; bundle: ValuationBundle }
-  | { status: "error"; message: string; previous: ValuationBundle | null };
-
 type ColumnId = "name" | "value" | "zone" | "percentile" | "sigma";
 interface Column extends DataTableColumn { id: ColumnId }
 
-function bundleOf(state: LoadState): ValuationBundle | null {
-  switch (state.status) {
-    case "idle":
-      return null;
-    case "loading":
-    case "error":
-      return state.previous;
-    case "ready":
-      return state.bundle;
-    default: {
-      const _exhaustive: never = state;
-      return _exhaustive;
-    }
-  }
+interface IndicatorRow {
+  indicator: IndicatorDef;
+  view: IndicatorViewModel | null;
+  error: string | null;
 }
 
-function initialLoadState(): LoadState {
-  const cached = getCachedValuationBundle();
-  return cached ? { status: "ready", bundle: cached } : { status: "idle" };
-}
-
-function matchesQuery(view: IndicatorViewModel, query: string): boolean {
+function matchesQuery(row: IndicatorRow, query: string): boolean {
   if (!query) return true;
   const haystack = [
-    view.indicator.label,
-    view.indicator.shortLabel,
-    view.indicator.description,
-    view.zone.label,
+    row.indicator.label,
+    row.indicator.shortLabel,
+    row.indicator.description,
+    row.view?.zone?.label,
   ].join(" ").toLowerCase();
   return query.split(/\s+/).every((token) => haystack.includes(token));
 }
@@ -94,14 +73,29 @@ function buildColumns(width: number, stacked: boolean): Column[] {
   ];
 }
 
-function cellsFor(view: IndicatorViewModel): Record<ColumnId, DataTableCell> {
+// Stable table adapters so memoized rows survive pane re-renders.
+const indicatorKey = (row: IndicatorRow) => row.indicator.id;
+const renderIndicatorCell = (row: IndicatorRow, column: Column) => cellsFor(row)[column.id];
+const noop = () => {};
+
+function cellsFor(row: IndicatorRow): Record<ColumnId, DataTableCell> {
+  const view = row.view;
+  if (!view || view.current.ratio == null || !view.zone) {
+    return {
+      name: { text: row.indicator.shortLabel, color: colors.textBright },
+      value: { text: "--", color: colors.textDim },
+      zone: { text: "Unavailable", color: colors.warning },
+      percentile: { text: "--", color: colors.textDim },
+      sigma: { text: "--", color: colors.textDim },
+    };
+  }
   return {
     name: { text: view.indicator.shortLabel, color: colors.textBright },
     value: { text: view.indicator.formatValue(view.current.ratio), color: view.zone.color },
     zone: { text: shortZoneLabel(view.zone.id), color: view.zone.color },
     // Restated so a high number always means expensive, whichever way the
     // underlying measure runs, otherwise the column cannot be read down.
-    percentile: { text: formatNumber(view.richPercentile, 0), color: colors.text },
+    percentile: { text: view.richPercentile == null ? "--" : formatNumber(view.richPercentile, 0), color: colors.text },
     sigma: { text: formatSigma(view.richSigma), color: colors.textMuted },
   };
 }
@@ -133,35 +127,13 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
     VALUATION_DEFAULTS.indicator,
   );
   const [range, setRange] = usePaneSettingValue<ValuationRangeId>("range", VALUATION_DEFAULTS.range);
-  const [state, setState] = useState<LoadState>(initialLoadState);
-  const [lastUpdated, setLastUpdated] = useState<number | null>(null);
+  const resource = useAsyncResource(loadBundle, { initialData: () => getCachedValuationBundle() });
+  const { data: bundle, load, reload: refresh, updatedAt: lastUpdated } = resource;
   const [query, setQuery] = useState("");
   const [searchFocused, setSearchFocused] = useState(false);
   const [searchFocusToken, setSearchFocusToken] = useState(0);
   const searchInputRef = useRef<InputRenderable | null>(null);
-  const generation = useRef(0);
-
-  const load = useCallback(async () => {
-    const current = ++generation.current;
-    setState((previous) => ({ status: "loading", previous: bundleOf(previous) }));
-    try {
-      const next = await loadValuationBundle();
-      if (generation.current !== current) return;
-      setState({ status: "ready", bundle: next });
-      setLastUpdated(Date.now());
-    } catch (error) {
-      if (generation.current !== current) return;
-      setState((previous) => ({
-        status: "error",
-        message: error instanceof Error ? error.message : String(error),
-        previous: bundleOf(previous),
-      }));
-    }
-  }, []);
-
-  useEffect(() => { void load(); }, [load]);
-  const refresh = useCallback(() => { void load(); }, [load]);
-  useAutoRefresh(lastUpdated, refresh);
+  useAutoRefresh(lastUpdated, load);
 
   const focusSearch = useCallback(() => {
     setSearchFocused(true);
@@ -190,19 +162,26 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
     refresh();
   });
 
-  const bundle = bundleOf(state);
   const views = useMemo(
     () => (bundle ? selectValuationViews(bundle, range) : []),
     [bundle, range],
   );
+  const rows = useMemo<IndicatorRow[]>(() => bundle ? INDICATORS.flatMap((indicator) => {
+    const view = views.find((entry) => entry.indicator.id === indicator.id) ?? null;
+    const error = indicatorUnavailableReason(indicator)
+      ?? bundle.errors.find((entry) => [indicator.label, ...indicatorSeries(indicator).map((def) => def.key)]
+        .some((prefix) => entry.startsWith(`${prefix}:`))) ?? null;
+    return view || error ? [{ indicator, view, error }] : [];
+  }) : [], [bundle, views]);
   const normalizedQuery = query.trim().toLowerCase();
   const visible = useMemo(
-    () => views.filter((view) => matchesQuery(view, normalizedQuery)),
-    [normalizedQuery, views],
+    () => rows.filter((row) => matchesQuery(row, normalizedQuery)),
+    [normalizedQuery, rows],
   );
   // Filtering narrows the list, but the detail keeps showing the chosen indicator
   // until the user picks another, so typing never blanks the chart.
-  const selected = views.find((view) => view.indicator.id === indicatorId) ?? views[0] ?? null;
+  const selected = rows.find((row) => row.indicator.id === indicatorId) ?? rows[0] ?? null;
+  const selectedView = selected?.view;
   const selectionOnScreen = visible.some((view) => view.indicator.id === selected?.indicator.id);
 
   const chooseIndicator = useCallback((
@@ -213,46 +192,52 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
       id,
       reason,
       selectionOnScreen,
-      knownIds: views.map((view) => view.indicator.id),
+      knownIds: rows.map((row) => row.indicator.id),
     })) return;
     setIndicatorId(id);
-  }, [selectionOnScreen, setIndicatorId, views]);
+  }, [selectionOnScreen, setIndicatorId, rows]);
 
-  const error = state.status === "error" ? state.message : bundle?.errors[0] ?? null;
+  const basisErrors = new Set(INDICATORS.flatMap((indicator) => {
+    const reason = indicatorUnavailableReason(indicator);
+    return reason ? [`${indicator.label}: ${reason}`] : [];
+  }));
+  const sourceError = bundle?.errors.find((entry) => !basisErrors.has(entry));
+  const unavailableCount = bundle?.errors.filter((entry) => basisErrors.has(entry)).length ?? 0;
+  const bodyError = resource.error ?? sourceError ?? null;
+  const error = bodyError ?? selected?.error
+    ?? (unavailableCount ? `${unavailableCount} unavailable` : null);
   const footerInfo = useMemo<PaneFooterSegment[]>(() => {
-    if (!selected) return [];
+    if (!selectedView) return [];
     const info: PaneFooterSegment[] = [
-      { id: "as-of", parts: [{ text: `as of ${selected.asOf}`, tone: "muted" }] },
-      { id: "delayed", parts: [{ text: "delayed", tone: "muted" }] },
+      { id: "as-of", parts: [{ text: `as of ${selectedView.asOf}`, tone: "muted" }] },
+      ...(width >= 80 ? [{ id: "delayed", parts: [{ text: "delayed", tone: "muted" as const }] }] : []),
     ];
-    if (selected.observationStale) {
+    if (selectedView.observationStale) {
       info.push({ id: "stale", parts: [{ text: "STALE", tone: "warning", bold: true }] });
     }
     if (normalizedQuery) {
       info.push({ id: "filter", parts: [{ text: `filter: ${normalizedQuery}`, tone: "value" }] });
     }
     return info;
-  }, [normalizedQuery, selected]);
+  }, [normalizedQuery, selectedView, width]);
 
   usePaneStatusFooter({
     registrationId: "market-valuation",
-    loading: state.status === "loading",
-    error,
+    loading: resource.loading,
+    error: error && !selectedView ? "Unavailable" : error,
     info: footerInfo,
   });
 
-  if (!bundle && state.status !== "error") {
+  if (!bundle && resource.error === null) {
     return (
-      <Box width={width} height={height} justifyContent="center" alignItems="center">
-        <Spinner label="Loading market valuation..." />
-      </Box>
+      <PaneStatusBody loading align="center" width={width} height={height} loadingLabel="Loading market valuation..." />
     );
   }
 
   if (!selected) {
     return (
       <Box width={width} height={height} padding={1} flexDirection="column" gap={1}>
-        <EmptyState title="Market valuation unavailable." message={error ?? undefined} />
+        <EmptyState status={error ? "error" : "empty"} title="Market valuation unavailable." message={error ?? undefined} />
       </Box>
     );
   }
@@ -265,6 +250,9 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
   const tableHeight = split
     ? Math.max(3, height - 2)
     : Math.min(visible.length + 2, Math.max(3, height - 12));
+  // The stacked table consumes rows outside the detail scroll viewport.
+  const bodyHeight = Math.max(1, height);
+  const detailHeight = split ? bodyHeight : Math.max(1, bodyHeight - tableHeight - 1);
 
   const list = (
     <Box flexDirection="column" width={listWidth} flexShrink={0}>
@@ -282,7 +270,7 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
         onQueryChange={setQuery}
       />
       <Box flexDirection="column" width={listWidth} height={tableHeight} flexShrink={0} overflow="hidden">
-        <DataTableView<IndicatorViewModel, Column>
+        <DataTableView<IndicatorRow, Column>
           focused={focused && !searchFocused}
           rootWidth={listWidth}
           rootHeight={tableHeight}
@@ -296,10 +284,10 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
             getId: (view) => view.indicator.id,
             onChange: (id, _item, _index, reason) => chooseIndicator(String(id), reason),
           }}
-          onHeaderClick={() => {}}
+          onHeaderClick={noop}
           onRootKeyDown={handlePaneKey}
-          getItemKey={(view) => view.indicator.id}
-          renderCell={(view, column) => cellsFor(view)[column.id]}
+          getItemKey={indicatorKey}
+          renderCell={renderIndicatorCell}
           emptyStateTitle={normalizedQuery ? "No indicator matches." : error ?? "No indicators."}
         />
       </Box>
@@ -307,7 +295,7 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
   );
 
   const detail = (
-    <Box flexDirection="column" flexGrow={1} width={detailWidth} overflow="hidden">
+    <Box flexDirection="column" flexGrow={1} width={detailWidth} height={detailHeight} overflow="hidden">
       <Box flexDirection="row" height={1} paddingX={1} overflow="hidden" justifyContent="flex-end">
         <SegmentedControl
           options={RANGE_OPTIONS}
@@ -315,14 +303,18 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
           onChange={(value) => setRange(value as ValuationRangeId)}
         />
       </Box>
-      <ScrollBox flexGrow={1} scrollY focusable={false}>
+      <ScrollBox height={Math.max(1, detailHeight - 1)} scrollY focusable={false}>
         <Box flexDirection="column" paddingBottom={1}>
-          <IndicatorDetail
-            view={selected}
+          {selectedView ? <IndicatorDetail
+            view={selectedView}
             width={detailWidth}
             height={Math.max(12, height - (split ? 3 : tableHeight + 3))}
             focused={focused && !searchFocused}
-          />
+          /> : (
+            <Box flexDirection="column" padding={1} gap={1}>
+              <EmptyState status="error" title={`${selected.indicator.label} unavailable`} message={selected.error ?? undefined} />
+            </Box>
+          )}
         </Box>
       </ScrollBox>
     </Box>
@@ -334,11 +326,6 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
         {list}
         {detail}
       </Box>
-      {error ? (
-        <Box height={1} paddingX={1} overflow="hidden">
-          <Text fg={colors.warning}>{error}</Text>
-        </Box>
-      ) : null}
     </Box>
   );
 }

package/src/plugins/builtin/market-valuation/series.ts

@@ -1,3 +1,5 @@
+import type { SeriesCacheMetadata, SeriesProviderMetadata } from "../shared/series-cache";
+
 export type SeriesProvenance = "fred" | "market" | "shiller";
 
 export interface DatedObservation {
@@ -5,8 +7,23 @@ export interface DatedObservation {
   value: number | null;
 }
 
-export interface DatedSeries {
+export type ValuationSourceMetadata = Partial<SeriesCacheMetadata> & { provenance: SeriesProvenance; provider?: SeriesProviderMetadata };
+
+export interface DatedSeries extends Partial<SeriesCacheMetadata> {
   seriesId: string;
   observations: DatedObservation[];
+  provider?: SeriesProviderMetadata;
   provenance: SeriesProvenance;
 }
+
+/** FRED/Shiller observations are calendar dates, not permissive JS timestamps. */
+export function validateObservationDates(observations: readonly DatedObservation[]): void {
+  for (const observation of observations) {
+    const { date } = observation;
+    const time = typeof date === "string" ? Date.parse(date) : Number.NaN;
+    if (!/^\d{4}-\d{2}-\d{2}$/.test(date) || !Number.isFinite(time)
+      || new Date(time).toISOString().slice(0, 10) !== date) {
+      throw new Error(`Invalid observation date: ${date}`);
+    }
+  }
+}

package/src/plugins/builtin/market-valuation/sources.ts

@@ -2,6 +2,7 @@ import { apiClient } from "../../../api-client";
 import type { CloudShillerPayload } from "../../../api-client";
 import type { SeriesDef, ShillerField } from "./defs";
 import type { DatedObservation, DatedSeries } from "./series";
+import type { SeriesCacheInput } from "../shared/series-cache";
 
 /**
  * Every leg goes through the Gloom Cloud proxy. Earlier revisions reached Yahoo and
@@ -9,7 +10,7 @@ import type { DatedObservation, DatedSeries } from "./series";
  * since both are blocked there by CORS and the worker's connect-src policy.
  */
 export interface ValuationSourceDeps {
-  loadFred: (seriesId: string, limit: number) => Promise<DatedObservation[]>;
+  loadFred: (seriesId: string, limit: number) => Promise<DatedObservation[] | SeriesCacheInput>;
   loadMarketHistory: (
     symbol: string,
     exchange: string,
@@ -49,9 +50,50 @@ export function historyToObservations(
   return observations;
 }
 
+type FredLoad = DatedObservation[] | SeriesCacheInput;
+
+function fredObservations(loaded: FredLoad): DatedObservation[] {
+  return Array.isArray(loaded) ? loaded : loaded.observations;
+}
+
+function fredProvider(loaded: FredLoad): SeriesCacheInput["provider"] | undefined {
+  return Array.isArray(loaded) ? undefined : loaded.provider;
+}
+
+/**
+ * Adds legs on their shared dates. The result carries the oldest fetch time and
+ * is stale if any leg is, so freshness never looks better than the worst input.
+ */
+export function sumFredSeries(legs: readonly FredLoad[]): SeriesCacheInput {
+  if (legs.length === 0) throw new Error("No series to sum");
+  const valuesByDate = new Map<string, number[]>();
+  for (const leg of legs) {
+    for (const obs of fredObservations(leg)) {
+      if (typeof obs.value !== "number" || !Number.isFinite(obs.value)) continue;
+      const values = valuesByDate.get(obs.date) ?? [];
+      values.push(obs.value);
+      valuesByDate.set(obs.date, values);
+    }
+  }
+  const observations: DatedObservation[] = [];
+  for (const [date, values] of valuesByDate) {
+    if (values.length !== legs.length) continue;
+    observations.push({ date, value: values.reduce((sum, value) => sum + value, 0) });
+  }
+  observations.sort((a, b) => a.date.localeCompare(b.date));
+  if (observations.length === 0) throw new Error("Summed series share no observation dates");
+  const providers = legs.map(fredProvider).filter((provider): provider is NonNullable<typeof provider> => !!provider);
+  if (providers.length === 0) return { observations };
+  const fetchedAt = providers.map((provider) => provider.fetchedAt).filter((value): value is string => !!value).sort()[0] ?? null;
+  const staleFlags = providers.map((provider) => provider.stale);
+  const stale = staleFlags.some((flag) => flag === true) ? true : staleFlags.every((flag) => flag === false) ? false : null;
+  return { observations, provider: { fetchedAt, stale } };
+}
+
 export function provenanceFor(def: SeriesDef): DatedSeries["provenance"] {
   switch (def.source.kind) {
     case "fred":
+    case "fred-sum":
       return "fred";
     case "market-history":
       return "market";
@@ -67,20 +109,32 @@ export function provenanceFor(def: SeriesDef): DatedSeries["provenance"] {
 export function createSourceLoader(deps: ValuationSourceDeps) {
   // One Shiller fetch serves every column the registry asks for.
   let shillerRequest: Promise<CloudShillerPayload> | null = null;
-  const shiller = () => (shillerRequest ??= deps.loadShiller().catch((error) => {
-    shillerRequest = null;
-    throw error;
-  }));
+  const shiller = () => {
+    if (shillerRequest) return shillerRequest;
+    const request = deps.loadShiller().finally(() => {
+      if (shillerRequest === request) shillerRequest = null;
+    });
+    shillerRequest = request;
+    return request;
+  };
 
   return async (def: SeriesDef): Promise<DatedSeries> => {
     const source = def.source;
     switch (source.kind) {
-      case "fred":
+      case "fred": {
+        const loaded = await deps.loadFred(source.seriesId, source.limit);
         return {
           seriesId: def.key,
-          observations: await deps.loadFred(source.seriesId, source.limit),
+          ...(Array.isArray(loaded) ? { observations: loaded } : loaded),
           provenance: "fred",
         };
+      }
+      case "fred-sum": {
+        const legs = await Promise.all(
+          source.seriesIds.map((seriesId) => deps.loadFred(seriesId, source.limit)),
+        );
+        return { seriesId: def.key, ...sumFredSeries(legs), provenance: "fred" };
+      }
       case "market-history":
         return {
           seriesId: def.key,
@@ -91,12 +145,15 @@ export function createSourceLoader(deps: ValuationSourceDeps) {
           ),
           provenance: "market",
         };
-      case "shiller":
+      case "shiller": {
+        const payload = await shiller();
         return {
           seriesId: def.key,
-          observations: shillerObservations(await shiller(), source.field),
+          observations: shillerObservations(payload, source.field),
+          provider: { fetchedAt: providerTimestamp(payload.fetchedAt), stale: null },
           provenance: "shiller",
         };
+      }
       default: {
         const _exhaustive: never = source;
         return _exhaustive;
@@ -110,11 +167,18 @@ export type ValuationCloudClient = Pick<
   "getCloudFredSeries" | "getCloudHistory" | "getCloudShiller"
 >;
 
+function providerTimestamp(value: unknown): string | null {
+  return typeof value === "string" && Number.isFinite(Date.parse(value)) ? value : null;
+}
+
 export function createCloudSourceDeps(client: ValuationCloudClient): ValuationSourceDeps {
   return {
     loadFred: async (seriesId, limit) => {
       const data = await client.getCloudFredSeries(seriesId, { limit, sortOrder: "desc" });
-      return data.observations;
+      return { observations: data.observations, provider: {
+        fetchedAt: providerTimestamp(data.fetchedAt),
+        stale: typeof data.stale === "boolean" ? data.stale : null,
+      } };
     },
     loadMarketHistory: async (symbol, exchange, startDate) => {
       const response = await client.getCloudHistory(symbol, exchange, {

package/src/plugins/builtin/market-valuation/trend.ts

@@ -1,4 +1,4 @@
-import type { RatioPoint } from "./align";
+import { isUsableRatio, type RatioPoint } from "./align";
 import type { IndicatorDef } from "./defs";
 
 const MS_PER_DAY = 86_400_000;
@@ -24,9 +24,7 @@ export function fitTrend(
   points: readonly RatioPoint[],
   model: "log" | "linear" = "log",
 ): TrendFit {
-  const usable = model === "log"
-    ? points.filter((p) => p.ratio > 0 && Number.isFinite(p.ratio))
-    : points.filter((p) => Number.isFinite(p.ratio));
+  const usable = points.filter(isUsableRatio).filter((p) => model !== "log" || p.ratio > 0);
   const empty: TrendFit = { model, alpha: 0, beta: 0, sigma: 0, originMs: 0 };
   if (usable.length === 0) return empty;
 

package/src/plugins/builtin/market-valuation/view.ts

@@ -1,4 +1,4 @@
-import { vintageLabel, type RatioPoint, type ValuationSeries } from "./align";
+import { isUsableRatio, vintageLabel, type RatioPoint, type ValuationSeries } from "./align";
 import { meanRatio, projectChart, type ValuationChartProjection } from "./chart-projection";
 import {
   RANGE_WINDOWS_MS,
@@ -22,15 +22,18 @@ export interface IndicatorBuild {
   indicator: IndicatorDef;
   series: ValuationSeries;
   trend: TrendFit;
+  sourceStale?: boolean;
 }
 
 export interface ValuationBundle {
   builds: IndicatorBuild[];
   errors: string[];
-  fetchedAt: number;
+  fetchedAt: number | null;
+  sources?: Record<string, import("./series").ValuationSourceMetadata>;
 }
 
-export function formatSigma(sigma: number): string {
+export function formatSigma(sigma: number | null): string {
+  if (sigma == null || !Number.isFinite(sigma)) return "--";
   return `${sigma > 0 ? "+" : ""}${formatNumber(sigma, 1)}σ`;
 }
 
@@ -38,20 +41,20 @@ export interface IndicatorViewModel {
   indicator: IndicatorDef;
   range: ValuationRangeId;
   current: RatioPoint;
-  zone: ZoneHit;
+  zone: ZoneHit | null;
   /** Raw fit deviation, in the indicator's own direction. */
-  sigmaVsTrend: number;
+  sigmaVsTrend: number | null;
   /** Deviation restated so positive always means expensive. */
-  richSigma: number;
+  richSigma: number | null;
   /** Share of history this market was cheaper than, so 100 is the richest ever. */
-  richPercentile: number;
+  richPercentile: number | null;
   trendNow: number;
   mean: number;
   vintageLabel: string | null;
   ratioOneYearAgo: number | null;
   allTimeHigh: Extreme;
   allTimeLow: Extreme;
-  percentile: number;
+  percentile: number | null;
   chart: ValuationChartProjection;
   asOf: string;
   observationStale: boolean;
@@ -64,16 +67,15 @@ function parseDateMs(date: string): number {
 export function sliceByRange(
   points: readonly RatioPoint[],
   range: ValuationRangeId,
-  nowMs: number = Date.parse(points.at(-1)!.date),
+  nowMs: number = Date.parse(points.at(-1)?.date ?? ""),
 ): RatioPoint[] {
   const window = RANGE_WINDOWS_MS[range];
   if (window == null) return [...points];
   const cutoff = nowMs - window;
-  const sliced = points.filter((p) => parseDateMs(p.date) >= cutoff);
-  return sliced.length >= 2 ? sliced : [...points];
+  return points.filter((p) => parseDateMs(p.date) >= cutoff && parseDateMs(p.date) <= nowMs);
 }
 
-function findExtreme(points: readonly RatioPoint[], pick: "high" | "low"): Extreme {
+function findExtreme(points: readonly (RatioPoint & { ratio: number })[], pick: "high" | "low"): Extreme {
   let best = points[0]!;
   for (const p of points) {
     if (pick === "high" ? p.ratio > best.ratio : p.ratio < best.ratio) best = p;
@@ -96,36 +98,37 @@ export function projectView(
   opts: { nowMs?: number } = {},
 ): IndicatorViewModel {
   const { indicator, series, trend } = build;
-  const points = series.points;
-  const current = points[points.length - 1]!;
+  const history = series.points;
+  const points = history.filter(isUsableRatio);
+  const current = history.at(-1)!;
   const nowMs = opts.nowMs ?? Date.now();
-  const visible = sliceByRange(points, range);
+  const visible = sliceByRange(history, range);
   const mean = meanRatio(points);
-  const atOrBelow = points.filter((p) => p.ratio <= current.ratio).length;
-  const percentile = points.length === 0 ? 0 : (100 * atOrBelow) / points.length;
-  const sigma = sigmaVsTrend(trend, current.ratio, current.date);
+  const atOrBelow = points.filter((p) => current.ratio != null && p.ratio <= current.ratio).length;
+  const percentile = current.ratio == null ? null : (100 * atOrBelow) / points.length;
+  const sigma = current.ratio == null ? null : sigmaVsTrend(trend, current.ratio, current.date);
   const expensiveUp = higherIsExpensive(indicator);
 
   return {
     indicator,
     range,
     current,
-    zone: classifyZone(indicator, current.ratio),
+    zone: current.ratio == null ? null : classifyZone(indicator, current.ratio),
     sigmaVsTrend: sigma,
-    richSigma: expensiveUp ? sigma : -sigma,
-    richPercentile: expensiveUp ? percentile : 100 - percentile,
+    richSigma: sigma == null ? null : expensiveUp ? sigma : -sigma,
+    richPercentile: percentile == null ? null : expensiveUp ? percentile : 100 - percentile,
     trendNow: trendAt(trend, current.date),
     mean,
     vintageLabel: indicator.input.kind === "ratio" && indicator.input.levels
       ? vintageLabel(indicator.input.levels.denominatorLabel, series.vintageDate)
       : null,
-    ratioOneYearAgo: ratioOneYearAgo(points, current.date),
+    ratioOneYearAgo: ratioOneYearAgo(history, current.date),
     allTimeHigh: findExtreme(points, "high"),
     allTimeLow: findExtreme(points, "low"),
     percentile,
     chart: projectChart(indicator, visible, mean),
     asOf: current.date,
-    observationStale: nowMs - parseDateMs(current.date) > indicator.staleAfterMs,
+    observationStale: build.sourceStale === true || nowMs - parseDateMs(current.date) > indicator.staleAfterMs,
   };
 }