gloomberb 0.15.2 → 0.15.4

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

@@ -1,10 +1,9 @@
-import { useMemo, useState } from "react";
-import { CompositeChart } from "../../../components/chart/composite";
-import { blendHex, colors } from "../../../theme/colors";
-import { StatGrid, statGridRows, type StatItem } from "../../../components/ui";
-import { Box, Text } from "../../../ui";
+import { useMemo } from "react";
+import type { StatItem } from "../../../components/ui";
+import { Box } from "../../../ui";
 import { formatNumber } from "../../../utils/format";
-import { markerSeries, zoneSeriesFor } from "./chart-projection";
+import { SeriesDetailChart } from "../shared/series-detail-chart";
+import { valuationAxis, zoneSeriesFor } from "./chart-projection";
 import type { IndicatorViewModel } from "./view";
 import { ZoneColorScale } from "./zone-scale";
 
@@ -12,9 +11,6 @@ function formatTrillions(billions: number): string {
   return `${formatNumber(billions / 1000, 1)}T`;
 }
 
-const PANELS = [{ id: "main" }];
-const AXIS_WIDTH = 8;
-const MIN_CHART_ROWS = 8;
 /** Zone words, the bar, and its ticks. */
 const ZONE_SCALE_ROWS = 3;
 
@@ -36,8 +32,6 @@ export function IndicatorDetail({
 }) {
   const indicator = view.indicator;
   const levels = indicator.input.kind === "ratio" ? indicator.input.levels : undefined;
-  const [userViewport, setUserViewport] = useState<{ start: Date; end: Date } | null>(null);
-  const chartWidth = Math.max(24, width);
 
   const stats = useMemo<StatItem[]>(() => [
     ...(levels && view.current.numeratorBillions != null && view.current.denominatorBillions != null
@@ -56,90 +50,39 @@ export function IndicatorDetail({
     { id: "ath", label: "ATH", value: indicator.formatValue(view.allTimeHigh.ratio), detail: view.allTimeHigh.date },
     { id: "atl", label: "ATL", value: indicator.formatValue(view.allTimeLow.ratio), detail: view.allTimeLow.date },
   ], [indicator, levels, view]);
-  const statRows = statGridRows(stats, width);
   const showZoneScale = view.current.ratio != null && !!view.zone;
-  const chartHeight = Math.max(
-    MIN_CHART_ROWS,
-    height - statRows - (showZoneScale ? ZONE_SCALE_ROWS : 0),
-  );
 
   const visible = view.chart.sourcePoints;
-  const series = useMemo(() => {
-    const zones = zoneSeriesFor(indicator, visible);
-    const markers = [
-      indicator.reference
-        ? markerSeries(
-          indicator,
-          "reference",
-          indicator.reference.label,
-          indicator.reference.value,
-          colors.textDim,
-          visible,
-        )
-        : null,
-      markerSeries(
-        indicator,
-        "mean",
-        "mean",
-        view.mean,
-        blendHex(colors.textDim, colors.bg, 0.35),
-        visible,
-      ),
-    ].filter((entry) => entry != null);
-    return [...markers, ...zones];
-  }, [indicator, view.mean, visible]);
-
-  // One clean entry instead of a row per valuation band.
-  const legendSeries = useMemo(
-    () => series.filter((entry) => entry.id === "reference" || entry.id === "mean"),
-    [series],
-  );
-
-  const viewport = useMemo(() => {
-    if (userViewport) return userViewport;
-    if (visible.length < 2) return undefined;
-    return { start: new Date(visible[0]!.date), end: new Date(visible.at(-1)!.date) };
-  }, [userViewport, visible]);
+  // One line per valuation band, so the chart carries the zone colours.
+  const zones = useMemo(() => zoneSeriesFor(indicator, visible), [indicator, visible]);
 
   return (
-    <Box flexDirection="column" width={width}>
-      <StatGrid items={stats} width={width} />
-      {view.chart.points.length >= 2 ? (
-        <>
-          {showZoneScale ? (
-            // A value scale, not the chart's time axis: it takes the pane inset
-            // like the legend under it rather than guessing the axis width.
-            <Box width={chartWidth} paddingX={1} overflow="hidden">
-              <ZoneColorScale
-                indicator={indicator}
-                value={view.current.ratio!}
-                width={Math.max(1, chartWidth - 2)}
-                markerColor={view.zone!.color}
-              />
-            </Box>
-          ) : null}
-          <CompositeChart
-            series={series}
-            legendSeries={legendSeries}
-            panels={PANELS}
-            width={chartWidth}
-            height={chartHeight}
-            focused={focused}
-            interactive
-            axisWidth={AXIS_WIDTH}
-            showLegend
-            viewport={viewport}
-            viewportResetKey={`${indicator.id}:${view.range}`}
-            onViewportChange={setUserViewport}
-            formatValue={(value) => indicator.formatValue(value)}
-            emptyMessage="Not enough chart data"
+    <SeriesDetailChart
+      stats={stats}
+      width={width}
+      height={height}
+      focused={focused}
+      points={visible}
+      drawable={view.chart.points.length >= 2}
+      lines={zones}
+      axis={valuationAxis(indicator)}
+      mean={view.mean}
+      reference={indicator.reference}
+      resetKey={`${indicator.id}:${view.range}`}
+      formatValue={indicator.formatValue}
+      aboveChartRows={showZoneScale ? ZONE_SCALE_ROWS : 0}
+      aboveChart={showZoneScale ? (chartWidth) => (
+        // A value scale, not the chart's time axis: it takes the pane inset
+        // like the legend under it rather than guessing the axis width.
+        <Box width={chartWidth} paddingX={1} overflow="hidden">
+          <ZoneColorScale
+            indicator={indicator}
+            value={view.current.ratio!}
+            width={Math.max(1, chartWidth - 2)}
+            markerColor={view.zone!.color}
           />
-        </>
-      ) : (
-        <Box height={chartHeight} justifyContent="center" alignItems="center">
-          <Text fg={colors.textMuted}>Not enough chart data</Text>
         </Box>
-      )}
-    </Box>
+      ) : undefined}
+    />
   );
 }

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

@@ -2,19 +2,17 @@ import type {
   HeadlessBundleResult,
   HeadlessPaneDefinition,
   HeadlessPaneEntry,
-  HeadlessPaneLoadArgs,
 } from "../../../types/plugin";
 import { formatNumber } from "../../../utils/format";
 import {
   createValuationSeriesLoader,
   loadValuationBundle,
-  type ValuationSeriesLoader,
 } from "./client";
 import type { ValuationRangeId } from "./defs";
 import { DEFAULT_INDICATOR_ID, INDICATORS, resolveIndicatorArg } from "./indicators";
 import { createCloudSourceDeps } from "./sources";
+import { formatSigma } from "../shared/trend";
 import {
-  formatSigma,
   selectValuationViews,
   type IndicatorViewModel,
   type ValuationBundle,
@@ -120,56 +118,38 @@ export function projectValuationHeadlessBundle(
   };
 }
 
-export interface MarketValuationHeadlessDependencies {
-  loadBundle(args: HeadlessPaneLoadArgs, loader: ValuationSeriesLoader): Promise<ValuationBundle>;
-}
-
-const defaultDependencies: MarketValuationHeadlessDependencies = {
-  loadBundle: (args, loader) => {
+export const marketValuationHeadless: HeadlessPaneDefinition<"bundle"> = {
+  shape: "bundle",
+  argument: {
+    kind: "free-text",
+    placeholder: "indicator",
+    description: "Optional valuation indicator id, label, or prefix.",
+    optional: true,
+  },
+  options: [{
+    key: "range",
+    description: "History window used by the selected indicator view.",
+    type: "enum",
+    values: [{ value: "10Y" }, { value: "25Y" }, { value: "ALL", aliases: ["all"] }],
+    defaultValue: "25Y",
+  }],
+  describe: (args) => `Market Valuation | ${String(args.options.range)}`,
+  async load(args, ctx) {
     const requested = typeof args.argument === "string" ? resolveIndicatorArg(args.argument) : null;
-    return loadValuationBundle({
-      loader,
+    if (args.argument && !requested) {
+      throw new Error(
+        `Unknown valuation indicator "${String(args.argument)}". Use one of: ${INDICATORS.map(({ id }) => id).join(", ")}.`,
+      );
+    }
+    const range = args.options.range as ValuationRangeId;
+    const bundle = await loadValuationBundle({
+      loader: createValuationSeriesLoader(createCloudSourceDeps(ctx.apiClient)),
       ...(requested ? { indicators: [requested] } : {}),
     });
+    return projectValuationHeadlessBundle(
+      bundle,
+      range,
+      requested?.id ?? DEFAULT_INDICATOR_ID,
+    );
   },
 };
-
-export function createMarketValuationHeadless(
-  dependencies: MarketValuationHeadlessDependencies = defaultDependencies,
-): HeadlessPaneDefinition<"bundle"> {
-  return {
-    shape: "bundle",
-    argument: {
-      kind: "free-text",
-      placeholder: "indicator",
-      description: "Optional valuation indicator id, label, or prefix.",
-      optional: true,
-    },
-    options: [{
-      key: "range",
-      description: "History window used by the selected indicator view.",
-      type: "enum",
-      values: [{ value: "10Y" }, { value: "25Y" }, { value: "ALL", aliases: ["all"] }],
-      defaultValue: "25Y",
-    }],
-    describe: (args) => `Market Valuation | ${String(args.options.range)}`,
-    async load(args, ctx) {
-      const requested = typeof args.argument === "string" ? resolveIndicatorArg(args.argument) : null;
-      if (args.argument && !requested) {
-        throw new Error(
-          `Unknown valuation indicator "${String(args.argument)}". Use one of: ${INDICATORS.map(({ id }) => id).join(", ")}.`,
-        );
-      }
-      const range = args.options.range as ValuationRangeId;
-      const loader = createValuationSeriesLoader(createCloudSourceDeps(ctx.apiClient));
-      const bundle = await dependencies.loadBundle(args, loader);
-      return projectValuationHeadlessBundle(
-        bundle,
-        range,
-        requested?.id ?? DEFAULT_INDICATOR_ID,
-      );
-    },
-  };
-}
-
-export const marketValuationHeadless = createMarketValuationHeadless();

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

@@ -1,11 +1,11 @@
 import type { PluginModule } from "../plugin-module";
+import { valuationCache } from "./cache";
 import { createValuationChartSeriesCapability } from "./chart-series";
 import { INDICATORS, resolveIndicatorArg } from "./indicators";
 import { marketValuationHeadless } from "./headless";
 import { MarketValuationPane } from "./pane";
 import { buildValuationSettingsDef, VALUATION_DEFAULTS } from "./settings";
 
-export { marketValuationHeadless } from "./headless";
 
 const MARKET_VALUATION_PANE_ID = "market-valuation";
 
@@ -58,6 +58,10 @@ export const marketValuationModule: PluginModule = {
       argPlaceholder: "indicator",
       argKind: "text",
       argOptional: true,
+      argOptions: () => INDICATORS.map((indicator) => ({
+        value: indicator.id,
+        label: `${indicator.label} (${indicator.shortLabel})`,
+      })),
     },
     headless: marketValuationHeadless,
     // No wizard: VAL opens straight into the pane, where the summary rows swap
@@ -70,4 +74,10 @@ export const marketValuationModule: PluginModule = {
       };
     },
   }],
+  setup(ctx) {
+    valuationCache.attach(ctx.persistence);
+  },
+  dispose() {
+    valuationCache.reset();
+  },
 };

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

@@ -1,40 +1,32 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import { useMemo } from "react";
 import {
-  DataTableView,
-  PaneStatusBody, QueryBar, type DataTableCell,
+  PaneStatusBody, type DataTableCell,
   type DataTableColumn,
-  type DataTableKeyEvent,
-  type DataTableSelectionChangeReason,
   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, useUiCapabilities, 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 { useAutoRefresh } from "../../../react/auto-refresh";
+import { usePaneStatusFooter } from "../../../components/layout/pane/status-footer";
+import { SeriesListDetail, useSeriesList } from "../shared/series-list-detail";
 import { getCachedValuationBundle, loadValuationBundle } from "./client";
 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 } from "../shared/trend";
 import {
-  formatSigma,
   selectValuationViews,
   type IndicatorViewModel
 } from "./view";
 
 const loadBundle = (force: boolean) => loadValuationBundle({ force });
 
-/** Below this the detail sits under the table instead of beside it. */
-const SPLIT_MIN_WIDTH = 108;
 const LIST_WIDTH = 46;
-/** The range strip names the key that picks each range. */
+/** The range strip names the key that picks each range: 1, 2 and 3, as the chart's range keys do. */
 const RANGE_VIEW_OPTIONS = RANGE_OPTIONS.map((option, index) => ({ ...option, hint: String(index + 1) }));
 
 type ColumnId = "name" | "value" | "zone" | "percentile" | "sigma";
@@ -97,27 +89,6 @@ function cellsFor(row: IndicatorRow): Record<ColumnId, DataTableCell> {
   };
 }
 
-/**
- * The table commits keyboard moves by index after a short delay. When a filter
- * changes the rows in between, that index lands on a different indicator, and
- * honouring it would silently rewrite the persisted setting as the user types.
- * Pointer and activation commits are explicit, so they are always honoured.
- */
-export function shouldPersistSelection({
-  id,
-  reason,
-  selectionOnScreen,
-  knownIds,
-}: {
-  id: string;
-  reason: DataTableSelectionChangeReason;
-  selectionOnScreen: boolean;
-  knownIds: readonly string[];
-}): boolean {
-  if (!knownIds.includes(id)) return false;
-  return reason !== "keyboard" || selectionOnScreen;
-}
-
 export function MarketValuationPane({ focused, width, height }: PaneProps) {
   const [indicatorId, setIndicatorId] = usePaneSettingValue<string>(
     "indicator",
@@ -126,49 +97,8 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
   const [range, setRange] = usePaneSettingValue<ValuationRangeId>("range", VALUATION_DEFAULTS.range);
   const resource = useAsyncResource(loadBundle, { initialData: () => getCachedValuationBundle() });
   const { data: bundle, load, reload: refresh, updatedAt: lastUpdated } = resource;
-  const { nativePaneChrome } = useUiCapabilities();
-  const [query, setQuery] = useState("");
-  const [searchFocused, setSearchFocused] = useState(false);
-  const [searchFocusToken, setSearchFocusToken] = useState(0);
-  const searchInputRef = useRef<InputRenderable | null>(null);
   useAutoRefresh(lastUpdated, load);
 
-  const focusSearch = useCallback(() => {
-    setSearchFocused(true);
-    setSearchFocusToken((current) => current + 1);
-  }, []);
-  const blurSearch = useCallback(() => setSearchFocused(false), []);
-
-  const handlePaneKey = useCallback((event: DataTableKeyEvent): boolean => {
-    if (isPlainKey(event, "/")) {
-      stopSearchFocusNavigation(event);
-      focusSearch();
-      return true;
-    }
-    if (isPlainKey(event, "r")) {
-      stopSearchFocusNavigation(event);
-      refresh();
-      return true;
-    }
-    return false;
-  }, [focusSearch, refresh]);
-
-  useShortcut((event) => {
-    if (!focused || searchFocused || event.targetEditable || event.defaultPrevented) return;
-    if (isPlainKey(event, "r")) {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      refresh();
-      return;
-    }
-    // 1, 2 and 3 pick the history range, as the chart's range keys do.
-    const picked = RANGE_VIEW_OPTIONS.find((option) => isPlainKey(event, option.hint));
-    if (!picked) return;
-    event.preventDefault?.();
-    event.stopPropagation?.();
-    setRange(picked.value);
-  });
-
   const views = useMemo(
     () => (bundle ? selectValuationViews(bundle, range) : []),
     [bundle, range],
@@ -180,29 +110,18 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
         .some((prefix) => entry.startsWith(`${prefix}:`))) ?? null;
     return view || error ? [{ indicator, view, error }] : [];
   }) : [], [bundle, views]);
-  const normalizedQuery = query.trim().toLowerCase();
-  const visible = useMemo(
-    () => 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 = rows.find((row) => row.indicator.id === indicatorId) ?? rows[0] ?? null;
+  const list = useSeriesList({
+    focused,
+    items: rows,
+    getId: indicatorKey,
+    matchesQuery,
+    selectedId: indicatorId,
+    onSelect: setIndicatorId,
+    reload: refresh,
+    range: { value: range, options: RANGE_VIEW_OPTIONS, onChange: setRange },
+  });
+  const { selected } = list;
   const selectedView = selected?.view;
-  const selectionOnScreen = visible.some((view) => view.indicator.id === selected?.indicator.id);
-
-  const chooseIndicator = useCallback((
-    id: string,
-    reason: DataTableSelectionChangeReason,
-  ) => {
-    if (!shouldPersistSelection({
-      id,
-      reason,
-      selectionOnScreen,
-      knownIds: rows.map((row) => row.indicator.id),
-    })) return;
-    setIndicatorId(id);
-  }, [selectionOnScreen, setIndicatorId, rows]);
 
   const basisErrors = new Set(INDICATORS.flatMap((indicator) => {
     const reason = indicatorUnavailableReason(indicator);
@@ -249,86 +168,25 @@ export function MarketValuationPane({ focused, width, height }: PaneProps) {
     );
   }
 
-  const split = width >= SPLIT_MIN_WIDTH;
-  const listWidth = split ? Math.min(LIST_WIDTH, Math.floor(width * 0.4)) : width;
-  const detailWidth = split ? width - listWidth : width;
-  // The terminal scroller draws its bar in the last column; the detail stays clear of it.
-  const detailContentWidth = Math.max(1, detailWidth - (nativePaneChrome ? 0 : 1));
-  const columns = buildColumns(listWidth, !split);
-  // Everything under the query bar. The split table fills it to the footer.
-  const bodyHeight = Math.max(1, height - 1);
-  // Stacked: header plus every row, and one more line for the horizontal scrollbar.
-  const tableHeight = split
-    ? Math.max(3, bodyHeight)
-    : Math.min(visible.length + 2, Math.max(3, height - 12));
-  // The stacked table consumes rows outside the detail scroll viewport.
-  const detailHeight = split ? bodyHeight : Math.max(1, bodyHeight - tableHeight);
-
-  const list = (
-    <Box flexDirection="column" width={listWidth} flexShrink={0}>
-      <Box flexDirection="column" width={listWidth} height={tableHeight} flexShrink={0} overflow="hidden">
-        <DataTableView<IndicatorRow, Column>
-          focused={focused && !searchFocused}
-          rootWidth={listWidth}
-          rootHeight={tableHeight}
-          columns={columns}
-          items={visible}
-          sortColumnId={null}
-          sortDirection="asc"
-          selection={{
-            kind: "id",
-            selectedId: selected.indicator.id,
-            getId: (view) => view.indicator.id,
-            onChange: (id, _item, _index, reason) => chooseIndicator(String(id), reason),
-          }}
-          onRootKeyDown={handlePaneKey}
-          getItemKey={indicatorKey}
-          renderCell={renderIndicatorCell}
-          emptyStateTitle={normalizedQuery ? "No indicator matches." : error ?? "No indicators."}
-        />
-      </Box>
-    </Box>
-  );
-
-  const detail = (
-    <Box flexDirection="column" flexGrow={1} width={detailWidth} height={detailHeight} overflow="hidden">
-      <ScrollBox height={detailHeight} scrollY focusable={false}>
-        {selectedView ? <IndicatorDetail
-          view={selectedView}
-          width={detailContentWidth}
-          height={detailHeight}
-          focused={focused && !searchFocused}
-        /> : (
-          <PaneStatusBody
-            error={selected.error ?? "No data."}
-            errorTitle={`${selected.indicator.label} unavailable`}
-          />
-        )}
-      </ScrollBox>
-    </Box>
-  );
-
   return (
-    <Box flexDirection="column" width={width} height={height}>
-      <QueryBar
-        width={width}
-        search={{
-          value: query,
-          onChange: setQuery,
-          placeholder: "filter indicators",
-          focused,
-          active: searchFocused,
-          onActiveChange: (active) => active ? focusSearch() : blurSearch(),
-          focusToken: searchFocusToken,
-          inputRef: searchInputRef,
-          debounceMs: 80,
-        }}
-        view={{ value: range, options: RANGE_VIEW_OPTIONS, onChange: (value: string) => setRange(value as ValuationRangeId) }}
-      />
-      <Box flexDirection={split ? "row" : "column"} flexGrow={1} overflow="hidden">
-        {list}
-        {detail}
-      </Box>
-    </Box>
+    <SeriesListDetail
+      list={list}
+      width={width}
+      height={height}
+      focused={focused}
+      listWidth={LIST_WIDTH}
+      searchPlaceholder="filter indicators"
+      columns={buildColumns}
+      rows={list.visible}
+      getRowId={indicatorKey}
+      renderCell={renderIndicatorCell}
+      emptyStateTitle={list.normalizedQuery ? "No indicator matches." : error ?? "No indicators."}
+      renderDetail={(size) => selectedView ? <IndicatorDetail view={selectedView} {...size} /> : (
+        <PaneStatusBody
+          error={selected.error ?? "No data."}
+          errorTitle={`${selected.indicator.label} unavailable`}
+        />
+      )}
+    />
   );
 }

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

@@ -8,8 +8,7 @@ import {
   type ValuationRangeId,
   type ZoneHit,
 } from "./defs";
-import { sigmaVsTrend, trendAt, type TrendFit } from "./trend";
-import { formatNumber } from "../../../utils/format";
+import { fitTrend, sigmaVsTrend, trendAt, type TrendFit } from "../shared/trend";
 
 const MS_PER_DAY = 86_400_000;
 
@@ -25,6 +24,11 @@ export interface IndicatorBuild {
   sourceStale?: boolean;
 }
 
+/** The trend through an indicator's ratios, in the model its measure calls for. */
+export function fitIndicatorTrend(indicator: IndicatorDef, points: readonly RatioPoint[]): TrendFit {
+  return fitTrend(points.map((point) => ({ date: point.date, value: point.ratio })), indicator.trendModel);
+}
+
 export interface ValuationBundle {
   builds: IndicatorBuild[];
   errors: string[];
@@ -32,11 +36,6 @@ export interface ValuationBundle {
   sources?: Record<string, import("./series").ValuationSourceMetadata>;
 }
 
-export function formatSigma(sigma: number | null): string {
-  if (sigma == null || !Number.isFinite(sigma)) return "--";
-  return `${sigma > 0 ? "+" : ""}${formatNumber(sigma, 1)}σ`;
-}
-
 export interface IndicatorViewModel {
   indicator: IndicatorDef;
   range: ValuationRangeId;

package/src/plugins/builtin/market-valuation/zone-scale/index.tsx

@@ -1,4 +1,4 @@
-import { useUiHost } from "../../../../ui";
+import { useUiCapabilities } from "../../../../ui";
 import { DesktopZoneColorScale } from "./desktop";
 import type { ZoneScaleProps } from "./model";
 import { TerminalZoneColorScale } from "./terminal";
@@ -6,7 +6,7 @@ import { TerminalZoneColorScale } from "./terminal";
 export type { ZoneScaleProps } from "./model";
 
 export function ZoneColorScale(props: ZoneScaleProps) {
-  return useUiHost().kind === "desktop-web"
+  return useUiCapabilities().nativePaneChrome === true
     ? <DesktopZoneColorScale {...props} />
     : <TerminalZoneColorScale {...props} />;
 }