gloomberb 0.15.2 → 0.15.3

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

@@ -1,13 +1,14 @@
-import { Box, ScrollBox, Text, type InputRenderable, type ScrollBoxRenderable } from "../../../ui";
+import { Box, ScrollBox, Text, type ScrollBoxRenderable } from "../../../ui";
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
 import { useShortcut } from "../../../react/input";
 import { TextAttributes } from "../../../ui";
-import type { GloomPlugin, PaneProps } from "../../../types/plugin";
+import type { AppNotificationRequest, GloomPlugin, PaneProps } from "../../../types/plugin";
 import {
   DataTableStackView,
   isTableScrollNearEnd,
   QueryBar,
   usePaneFooter,
+  useQueryBarSearch,
   type DataTableCell,
   type DataTableColumn,
   type SelectControl,
@@ -17,29 +18,23 @@ import { usePluginAppActions } from "../../runtime";
 import { DEBUG_LOG_TEMPLATE_ID, DEBUG_PANE_ID, DEBUG_SOURCE_SETTING } from "./template";
 import { colors } from "../../../theme/colors";
 import { debugLog, type LogEntry, type LogLevel } from "../../../utils/debug-log";
-import { isPlainKey } from "../../../utils/keyboard";
-import { writeFileSync } from "fs";
-import { join } from "path";
-import { homedir } from "os";
+import { saveTextFileToDownloads } from "../../../utils/save-text-file";
 
-function exportDebugLogFile(options: {
-  filterLevel?: LogLevel | null;
-  filterSource?: string | null;
-}): { ok: true; filename: string } | { ok: false } {
+/** Writes the log (narrowed by the pane's filters, if any) to ~/Downloads and says where. */
+async function exportDebugLog(
+  notify: (notification: AppNotificationRequest) => unknown,
+  filter: { level?: LogLevel | null; source?: string | null } = {},
+): Promise<void> {
   const text = debugLog.exportAsText(
-    options.filterLevel || options.filterSource
-      ? { level: options.filterLevel ?? undefined, source: options.filterSource ?? undefined }
+    filter.level || filter.source
+      ? { level: filter.level ?? undefined, source: filter.source ?? undefined }
       : undefined,
   );
-  const downloadsDir = join(homedir(), "Downloads");
   const filename = `gloomberb-debug-${new Date().toISOString().slice(0, 19).replace(/:/g, "-")}.log`;
-  const filepath = join(downloadsDir, filename);
-
   try {
-    writeFileSync(filepath, text);
-    return { ok: true, filename };
+    notify({ body: `Exported to ${await saveTextFileToDownloads(filename, text)}`, type: "success" });
   } catch {
-    return { ok: false };
+    notify({ body: "Failed to export logs", type: "error" });
   }
 }
 
@@ -117,9 +112,7 @@ function DebugPane({ focused, width, height }: PaneProps) {
   // Persisted with the pane so a log opened for one plugin stays on that plugin.
   const [filterSource, setFilterSource] = usePaneSettingValue<string | null>(DEBUG_SOURCE_SETTING, null);
   const [query, setQuery] = useState("");
-  const [searching, setSearching] = useState(false);
-  const [searchFocus, setSearchFocus] = useState(0);
-  const searchInput = useRef<InputRenderable | null>(null);
+  const { active: searching, searchProps } = useQueryBarSearch();
   const levelControl = useRef<SelectControl>(null);
   const sourceControl = useRef<SelectControl>(null);
   const scrollRef = useRef<ScrollBoxRenderable | null>(null);
@@ -157,12 +150,7 @@ function DebugPane({ focused, width, height }: PaneProps) {
   }, [openEntry, openId]);
 
   const exportLogs = useCallback(() => {
-    const result = exportDebugLogFile({ filterLevel, filterSource });
-    if (result.ok) {
-      notify({ body: `Exported to ~/Downloads/${result.filename}`, type: "success" });
-      return;
-    }
-    notify({ body: "Failed to export logs", type: "error" });
+    void exportDebugLog(notify, { level: filterLevel, source: filterSource });
   }, [filterLevel, filterSource, notify]);
 
   const clearLogs = useCallback(() => {
@@ -180,10 +168,6 @@ function DebugPane({ focused, width, height }: PaneProps) {
     setAutoScroll(false);
     setSelectedId(visibleEntries[0] ? String(visibleEntries[0].id) : null);
   }, [visibleEntries]);
-  const focusSearch = useCallback(() => {
-    setSearching(true);
-    setSearchFocus((value) => value + 1);
-  }, []);
 
   // e/c/a are footer hints, which bind them exactly (no modifiers), so a copy
   // chord never clears the log.
@@ -191,8 +175,6 @@ function DebugPane({ focused, width, height }: PaneProps) {
     if (!focused || openId || searching || event.targetEditable || event.ctrl || event.meta || event.alt || event.super) return;
     if (event.name === "l") { event.preventDefault?.(); levelControl.current?.open(); return; }
     if (event.name === "s") { event.preventDefault?.(); sourceControl.current?.open(); return; }
-    // Plain `/` only: Shift+/ is `?`, which opens Help.
-    if (isPlainKey(event, "/")) { event.preventDefault?.(); focusSearch(); return; }
     // Top and end of the log; G also resumes following new entries. Some
     // terminals report Shift+G as an uppercase name.
     if (event.name === "g" && !event.shift) { event.preventDefault?.(); jumpTop(); return; }
@@ -229,11 +211,7 @@ function DebugPane({ focused, width, height }: PaneProps) {
               onChange: setQuery,
               placeholder: "message",
               focused,
-              active: searching,
-              onActiveChange: setSearching,
-              focusToken: searchFocus,
-              inputRef: searchInput,
-              onNavigateDown: () => setSearching(false),
+              ...searchProps,
             }}
             filters={[
               {
@@ -350,14 +328,7 @@ export const debugPlugin: GloomPlugin = {
       description: "Export debug logs to ~/Downloads",
       keywords: ["export", "debug", "log", "download", "save"],
       category: "config",
-      execute: () => {
-        const result = exportDebugLogFile({});
-        if (result.ok) {
-          ctx.notify({ body: `Exported to ~/Downloads/${result.filename}`, type: "success" });
-        } else {
-          ctx.notify({ body: "Failed to export logs", type: "error" });
-        }
-      },
+      execute: () => exportDebugLog((notification) => ctx.notify(notification)),
     });
 
   },

package/src/plugins/builtin/dividend-yield/client.ts

@@ -2,12 +2,12 @@ import type { ConnectionHealthRegistry } from "../../../core/connection-health";
 import { YahooHttpClient } from "../../../sources/yahoo-finance/http";
 import { deriveMarketState, financeRawNumber, mapYahooDividends } from "../../../sources/yahoo-finance/mappers";
 import { isTimestampStaleForExchangeSession } from "../../../market-data/market/freshness";
-import { fetchYahooChart } from "../../../sources/yahoo-finance/requests";
-import { getYahooSymbolsToTry } from "../../../sources/yahoo-finance/symbols";
-import type { QuoteSummaryResponse } from "../../../sources/yahoo-finance/types";
+import { fetchYahooChart, fetchYahooQuoteSummary } from "../../../sources/yahoo-finance/requests";
+import { getYahooSymbolsToTry, withYahooSymbols } from "../../../sources/yahoo-finance/symbols";
+import type { YahooQuoteSummaryResult } from "../../../sources/yahoo-finance/types";
 import type { DividendMetrics, DividendPayment } from "./types";
 import { resolveCurrencyUnit } from "../../../utils/currency-units";
-import { calendarYearsBefore } from "./calendar";
+import { calendarMonthsBefore } from "../../../utils/calendar-date";
 import { inferCadence, trailingCashAt } from "./trailing-cash";
 import { parsePublicTickerKey } from "../../../utils/exchanges";
 import { dividendPriceAsOf } from "./reference-price";
@@ -55,12 +55,7 @@ const EMPTY_DIVIDEND_FIELDS: QuoteSummaryDividendFields = {
   currency: null,
 };
 
-/**
- * Yahoo nests quote modules at quoteSummary.result[0], not the response root.
- */
-export function extractDividendFields(payload: unknown): QuoteSummaryDividendFields {
-  if (typeof payload !== "object" || payload === null) return { ...EMPTY_DIVIDEND_FIELDS };
-  const result = (payload as QuoteSummaryResponse).quoteSummary?.result?.[0];
+export function extractDividendFields(result: YahooQuoteSummaryResult | undefined): QuoteSummaryDividendFields {
   if (!result) return { ...EMPTY_DIVIDEND_FIELDS };
 
   const summaryDetail = result.summaryDetail;
@@ -135,15 +130,7 @@ export async function fetchDividendData(
     ? getYahooSymbolsToTry(symbol, exchange, { exactExchange: true })
     : exchange ? getYahooSymbolsToTry(symbol, exchange) : [symbol];
   if (symbols.length === 0) throw new Error(`Dividend source does not support the selected listing ${symbol}`);
-  let lastError: unknown;
-  for (const yahooSymbol of symbols) {
-    try {
-      return await fetchDividendDataForSymbol(yahooSymbol, currentPrice, currentPriceCurrency);
-    } catch (error) {
-      lastError = error;
-    }
-  }
-  throw lastError ?? new Error(`No dividend data found for ${symbol}`);
+  return withYahooSymbols(symbols, (yahooSymbol) => fetchDividendDataForSymbol(yahooSymbol, currentPrice, currentPriceCurrency));
 }
 
 async function fetchDividendDataForSymbol(
@@ -151,25 +138,18 @@ async function fetchDividendDataForSymbol(
   currentPrice: number | null,
   currentPriceCurrency?: string,
 ): Promise<DividendData> {
-  const quoteUrl =
-    `https://query1.finance.yahoo.com/v10/finance/quoteSummary/${encodeURIComponent(symbol)}`
-    + "?modules=summaryDetail,financialData,defaultKeyStatistics,calendarEvents";
-
   const [chartResult, quoteResult] = await Promise.allSettled([
     trackRequest("dividend-history", () =>
       fetchYahooChart(yahoo, symbol, "10y", "1mo"),
     ),
     trackRequest("quote-summary", () =>
-      yahoo.fetchJsonWithCrumb<QuoteSummaryResponse>(quoteUrl),
+      fetchYahooQuoteSummary(yahoo, symbol, "summaryDetail,financialData,defaultKeyStatistics,calendarEvents"),
     ),
   ]);
 
-  const summaryFailed = quoteResult.status === "rejected" || !!quoteResult.value?.quoteSummary?.error;
-  const quoteFields = quoteResult.status === "fulfilled" && !summaryFailed
-    ? extractDividendFields(quoteResult.value)
-    : null;
-  const summaryError = summaryFailed ? UNAVAILABLE_DIVIDEND_SUMMARY
-    : quoteFields && [quoteFields.exDividendDate, quoteFields.dividendDate]
+  const quoteFields = quoteResult.status === "fulfilled" ? extractDividendFields(quoteResult.value) : null;
+  const summaryError = !quoteFields ? UNAVAILABLE_DIVIDEND_SUMMARY
+    : [quoteFields.exDividendDate, quoteFields.dividendDate]
       .some((timestamp) => timestamp != null && reportedDividendDate(timestamp) === null)
       ? INVALID_DIVIDEND_SUMMARY_DATE : undefined;
 
@@ -296,8 +276,8 @@ export function repriceDividendMetrics(metrics: DividendMetrics, price: number |
 }
 
 function computeGrowth(payments: DividendPayment[], years: number, now: Date): number | null {
-  const priorEnd = calendarYearsBefore(now, years);
-  const priorStart = calendarYearsBefore(priorEnd, 1);
+  const priorEnd = calendarMonthsBefore(now, 12 * years);
+  const priorStart = calendarMonthsBefore(priorEnd, 12);
   // A new fund's partial first year is not a full-year growth baseline.
   if (!payments.some((payment) => payment.exDate <= priorStart)) return null;
   const recent = trailingCashAt(payments, now);
@@ -306,6 +286,6 @@ function computeGrowth(payments: DividendPayment[], years: number, now: Date): n
 }
 
 function inferFrequency(payments: DividendPayment[], now: Date): DividendMetrics["paymentFrequency"] {
-  if (!payments.some((payment) => payment.exDate > calendarYearsBefore(now, 1))) return null;
+  if (!payments.some((payment) => payment.exDate > calendarMonthsBefore(now, 12))) return null;
   return inferCadence(payments, now);
 }

package/src/plugins/builtin/dividend-yield/model.ts

@@ -2,9 +2,6 @@ import type { DataTableColumn } from "../../../components";
 import { compareSortValues, type SortDirection } from "../../../utils/sort-values";
 import type { DividendRow } from "./view";
 
-export { toDividendRows } from "./view";
-export type { DividendRow } from "./view";
-
 export type DividendColumnId = "exDate" | "amount" | "currency";
 export type DividendColumn = DataTableColumn & { id: DividendColumnId };
 
@@ -18,12 +15,17 @@ export const DEFAULT_SORT_PREFERENCE: DividendSortPreference = {
   direction: "desc",
 };
 
-/** The ex-date takes the room the fixed amount and currency leave; the kit adds the gutters. */
-export function buildDividendColumns(): DividendColumn[] {
+/**
+ * The amount sits beside its ex-date rather than across the pane. The currency
+ * column shows only when the payments mix currencies; otherwise the amount's
+ * own symbol says it.
+ */
+export function buildDividendColumns(rows: readonly Pick<DividendRow, "currency">[] = []): DividendColumn[] {
+  const mixed = new Set(rows.map((row) => row.currency)).size > 1;
   return [
-    { id: "exDate", label: "EX-DATE", width: 10, align: "left", flexGrow: 1 },
-    { id: "amount", label: "AMOUNT", width: 10, align: "right" },
-    { id: "currency", label: "CCY", width: 6, align: "left" },
+    { id: "exDate", label: "EX-DATE", width: 10, align: "left" },
+    { id: "amount", label: "AMOUNT", width: 12, align: "right" },
+    ...(mixed ? [{ id: "currency" as const, label: "CCY", width: 6, align: "left" as const }] : []),
   ];
 }
 
@@ -46,17 +48,3 @@ export function sortRows(
     sortPreference.direction,
   ));
 }
-
-export function nextSortPreference(
-  current: DividendSortPreference,
-  columnId: string,
-): DividendSortPreference {
-  const typedColumnId = columnId as DividendColumnId;
-  if (current.columnId !== typedColumnId) {
-    return { columnId: typedColumnId, direction: "desc" };
-  }
-  if (current.direction === "desc") {
-    return { columnId: typedColumnId, direction: "asc" };
-  }
-  return DEFAULT_SORT_PREFERENCE;
-}

package/src/plugins/builtin/dividend-yield/pane.tsx

@@ -1,10 +1,14 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import {
+  chartTableChromeRows,
+  ChartTableHeader,
+  chartTableLayout,
   DataTableView,
-  StatGrid,
-  StaticChartSurface,
+  scalarPoint,
+  spanAxisFormatter,
   statGridColumns,
-  statGridRows,
+  staticSeries,
+  useChartTableSelection,
   usePaneFooter,
   usePaneNoticeFooter,
   usePaneTicker,
@@ -12,28 +16,24 @@ import {
   type DataTableKeyEvent,
   type StatItem,
 } from "../../../components";
-import type { ProjectedChartPoint } from "../../../components/chart/core/data";
-import { resolveChartPalette } from "../../../components/chart/core/palette";
 import { useAsyncResource } from "../../../react/async-resource";
 import { colors, priceColor } from "../../../theme/colors";
-import { Box, ScrollBox, TextAttributes, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { TextAttributes, useUiCapabilities } from "../../../ui";
 import { displayWidth, formatCurrency, formatDistributionAmount, formatPercentRaw } from "../../../utils/format";
 import { resolveCurrencyUnit } from "../../../utils/currency-units";
-import { isPlainKey, isPlainKeyboardEvent } from "../../../utils/keyboard";
-import { handleRefreshKey, loadingErrorFooterInfo } from "../shared/table-pane";
+import { nextHeaderSort } from "../../../utils/sort-values";
+import { handleRefreshKey, loadingErrorFooterInfo } from "../../../components/data-table/table-pane";
 import { SignInWall } from "../cloud/auth-actions";
 import { isCloudSessionRequired, useResearchCloudSession } from "../shared/research-cloud-session";
 import { dividendReferencePrice, fetchDividendData, repriceDividendMetrics, type DividendData } from "./client";
 import { useTickerQuoteStream } from "../../../state/hooks/live-ticker-financials";
-import { buildTrailingCashChartPoints, formatDividendYield } from "./view";
+import { buildTrailingCashChartPoints, formatDividendYield, toDividendRows, type DividendRow } from "./view";
 import {
   DEFAULT_SORT_PREFERENCE,
   buildDividendColumns,
-  nextSortPreference,
   sortRows,
-  toDividendRows,
   type DividendColumn,
-  type DividendRow,
+  type DividendColumnId,
   type DividendSortPreference,
 } from "./model";
 import type { DividendMetrics } from "./types";
@@ -44,16 +44,6 @@ function formatRate(value: number | null, currency: string): string {
   return formatDistributionAmount(value, currency);
 }
 
-/** Axis ticks are interpolated levels: size decimals to the tick spacing, not the six kept for payments. */
-function cashAxisFractionDigits(points: readonly ProjectedChartPoint[]): number {
-  const values = points.map((point) => point.close).filter(Number.isFinite);
-  const range = values.length ? Math.max(...values) - Math.min(...values) : 0;
-  const level = values.length ? Math.max(...values.map(Math.abs)) : 0;
-  const spread = range > 0 ? range / 4 : level;
-  if (!(spread > 0)) return 2;
-  return Math.max(2, Math.min(6, Math.ceil(-Math.log10(spread))));
-}
-
 function formatGrowth(value: number | null): string {
   if (value == null) return "—";
   return formatPercentRaw(value * 100);
@@ -76,107 +66,58 @@ function formatFrequency(freq: DividendMetrics["paymentFrequency"]): string {
 }
 
 /**
- * The dividend figures over the history chart. Labels stay short so a narrow
- * terminal does not clip them. The latest ex-date is the table's first row, so
- * it shows only when there is no table. Three columns read trailing, forward
- * and schedule down the band; two read trailing beside forward.
+ * The dividend figures over the history chart, most important first so a
+ * short pane keeps the yields. Labels stay short so a narrow terminal does not
+ * clip them. The latest ex-date is the table's first row, so it shows only
+ * when there is no table.
  */
-function buildMetricItems(metrics: DividendMetrics, currency: string, hasHistory: boolean, columns: number): StatItem[] {
-  const item = {
-    ttmYield: { id: "ttm-yield", label: "TTM yield", value: formatDividendYield(metrics.trailingYield), color: priceColor(metrics.trailingYield ?? 0) },
-    fwdYield: { id: "forward-yield", label: "Fwd yield", value: formatDividendYield(metrics.forwardYield), color: priceColor(metrics.forwardYield ?? 0) },
-    ttmRate: { id: "ttm-rate", label: "TTM/share", value: formatRate(metrics.trailingRate, currency) },
-    fwdRate: { id: "forward-rate", label: "Fwd/share", value: formatRate(metrics.forwardRate, currency) },
-    growth1Y: { id: "growth-1y", label: "1Y growth", value: formatGrowth(metrics.growth1Y), color: priceColor(metrics.growth1Y ?? 0) },
-    cagr3Y: { id: "cagr-3y", label: "3Y CAGR", value: formatGrowth(metrics.growth3Y), color: priceColor(metrics.growth3Y ?? 0) },
-    payout: { id: "payout", label: "Payout", value: metrics.payoutRatio != null ? `${(metrics.payoutRatio * 100).toFixed(1)}%` : "—" },
-    cadence: { id: "cadence", label: "Cadence", value: formatFrequency(metrics.paymentFrequency) },
-    nextPay: { id: "next-pay", label: "Next pay", value: formatDate(metrics.nextPayDate) },
-  } satisfies Record<string, StatItem>;
+function buildMetricItems(metrics: DividendMetrics, currency: string, hasHistory: boolean, short: boolean): StatItem[] {
   const exDate: StatItem[] = metrics.nextExDividendDate
     ? [{ id: "next-ex", label: "Next ex", value: formatDate(metrics.nextExDividendDate) }]
     : hasHistory ? [] : [{ id: "last-ex", label: "Last ex", value: formatDate(metrics.lastExDividendDate) }];
-  return columns === 3
-    ? [item.ttmYield, item.fwdYield, item.payout, item.ttmRate, item.fwdRate, item.cadence, item.growth1Y, item.cagr3Y, item.nextPay, ...exDate]
-    : [item.ttmYield, item.fwdYield, item.ttmRate, item.fwdRate, item.growth1Y, item.cagr3Y, item.payout, item.cadence, ...exDate, item.nextPay];
+  return [
+    { id: "ttm-yield", label: short ? "TTM yld" : "TTM yield", value: formatDividendYield(metrics.trailingYield), color: priceColor(metrics.trailingYield ?? 0) },
+    { id: "forward-yield", label: short ? "Fwd yld" : "Fwd yield", value: formatDividendYield(metrics.forwardYield), color: priceColor(metrics.forwardYield ?? 0) },
+    { id: "ttm-rate", label: short ? "TTM/sh" : "TTM/share", value: formatRate(metrics.trailingRate, currency) },
+    { id: "forward-rate", label: short ? "Fwd/sh" : "Fwd/share", value: formatRate(metrics.forwardRate, currency) },
+    { id: "growth-1y", label: short ? "1Y chg" : "1Y growth", value: formatGrowth(metrics.growth1Y), color: priceColor(metrics.growth1Y ?? 0) },
+    { id: "cagr-3y", label: "3Y CAGR", value: formatGrowth(metrics.growth3Y), color: priceColor(metrics.growth3Y ?? 0) },
+    { id: "payout", label: "Payout", value: metrics.payoutRatio != null ? `${(metrics.payoutRatio * 100).toFixed(1)}%` : "—" },
+    { id: "cadence", label: "Cadence", value: formatFrequency(metrics.paymentFrequency) },
+    ...exDate,
+    { id: "next-pay", label: "Next pay", value: formatDate(metrics.nextPayDate) },
+  ];
 }
 
-function DividendSummary({
-  metrics,
-  currency,
-  hasHistory,
-  width,
-  height,
-  chartPoints,
-  scrollRef,
-  focused = false,
-}: {
-  metrics: DividendMetrics;
-  currency: string;
-  hasHistory: boolean;
-  width: number;
-  height: number;
-  chartPoints: ProjectedChartPoint[];
-  scrollRef: RefObject<ScrollBoxRenderable | null>;
-  focused?: boolean;
-}) {
-  const { nativePaneChrome } = useUiCapabilities();
-  // Up to three columns, and in the terminal no more than the labels can
-  // share: a label gets at most half its cell there.
-  const sample = buildMetricItems(metrics, currency, hasHistory, 2);
-  const labelChars = Math.max(...sample.map((item) => displayWidth(item.label)));
-  const columns = Math.min(3, statGridColumns(sample, width),
-    nativePaneChrome ? 3 : Math.max(1, Math.floor(width / (2 * (labelChars + 1) + 2))));
-  const metricItems = columns === 3 ? buildMetricItems(metrics, currency, hasHistory, 3) : sample;
-  const rowCount = statGridRows(metricItems, width, columns);
-  const chartHeight = chartPoints.length >= 2 ? 6 : 0;
-  // Keep the history header and three cash rows usable in a short pane.
-  const summaryHeight = Math.min(rowCount + chartHeight, Math.max(1, height - 4));
-  const palette = resolveChartPalette(colors, "positive");
-  const axisDigits = cashAxisFractionDigits(chartPoints);
-
-  return (
-    <ScrollBox ref={scrollRef} scrollY focusable={false} height={summaryHeight} flexShrink={0}>
-      <StatGrid items={metricItems} width={width} columns={columns} />
-      {chartPoints.length >= 2 && (
-        <Box flexDirection="column" paddingX={1} height={chartHeight} flexShrink={0}>
-          <StaticChartSurface
-            points={chartPoints}
-            width={Math.max(10, width - 2)}
-            height={chartHeight}
-            mode="step"
-            calendarSpaced
-            showTimeAxis
-            colors={palette}
-            yAxisLabel="TTM cash/share"
-            yAxisColor={colors.textDim}
-            formatYAxisValue={(value) => formatCurrency(value, currency, axisDigits)}
-            focused={focused}
-          />
-        </Box>
-      )}
-    </ScrollBox>
-  );
+/**
+ * The terminal grid gives a label at most half its cell; where the figures the
+ * kit keeps come out in columns narrower than that, the labels would clip.
+ */
+function labelsClip(items: readonly StatItem[], width: number): boolean {
+  if (items.length < 2) return false;
+  const columns = statGridColumns([...items], width);
+  const cell = Math.floor((width - 2 - 2 * (columns - 1)) / columns);
+  const labels = Math.max(...items.map((item) => displayWidth(item.label)));
+  return Math.floor(cell / 2) < labels + 1;
 }
 
+const rowKey = (row: DividendRow) => row.key;
+
 function renderCell(
   row: DividendRow,
   column: DividendColumn,
-  _index: number,
-  rowState: { selected: boolean },
 ): DataTableCell {
-  const selectedColor = rowState.selected ? colors.selectedText : undefined;
   switch (column.id) {
     case "exDate":
-      return { text: row.exDate, color: selectedColor ?? colors.textDim };
+      return { text: row.exDate, color: colors.textDim };
     case "amount":
       return {
         text: formatDistributionAmount(row.amount, row.currency),
-        color: selectedColor ?? colors.textBright,
+        color: colors.textBright,
         attributes: TextAttributes.BOLD,
       };
     case "currency":
-      return { text: row.currency, color: selectedColor ?? colors.textDim };
+      return { text: row.currency, color: colors.textDim };
   }
 }
 
@@ -184,6 +125,7 @@ export function DividendYieldPane({ focused, width, height, loadData = fetchDivi
   focused: boolean; width: number; height: number; loadData?: typeof fetchDividendData;
 }) {
   const { symbol, ticker, financials } = usePaneTicker();
+  const { nativePaneChrome } = useUiCapabilities();
   // Yields are repriced from the quote on every render, so streaming it is all
   // it takes for them to move with the stock. A yield to two decimals needs
   // about one update a second, not the fast lane of a price on screen.
@@ -194,9 +136,8 @@ export function DividendYieldPane({ focused, width, height, loadData = fetchDivi
   const quotePrice = financials?.quote?.price ?? null;
 
   const [sortPreference, setSortPreference] = useState<DividendSortPreference>(DEFAULT_SORT_PREFERENCE);
-  const [selectedIdx, setSelectedIdx] = useState(0);
-  const summaryScrollRef = useRef<ScrollBoxRenderable | null>(null);
-  useEffect(() => { summaryScrollRef.current?.scrollTo(0); }, [symbol]);
+  // Null follows the table's first row, including after a reload.
+  const [selectedKey, setSelectedKey] = useState<string | null>(null);
   // Ten years of history must not be refetched on every live price tick, so the
   // quote is read through a ref instead of being an effect dependency.
   const quoteRef = useRef({ price: quotePrice, currency: quoteCurrency });
@@ -213,7 +154,7 @@ export function DividendYieldPane({ focused, width, height, loadData = fetchDivi
   const historyData = data?.historyError && data.payments.length === 0 && lastHistory.current?.request === request
     ? lastHistory.current.data : data;
   const authWall = !data && isCloudSessionRequired(error);
-  useEffect(() => { if (updatedAt !== null) setSelectedIdx(0); }, [updatedAt]);
+  useEffect(() => { if (updatedAt !== null) setSelectedKey(null); }, [updatedAt]);
 
   const payments = historyData?.payments ?? [];
   const currency = data?.currency ?? payments[0]?.currency ?? resolveCurrencyUnit(ticker?.metadata.currency).currency;
@@ -250,32 +191,53 @@ export function DividendYieldPane({ focused, width, height, loadData = fetchDivi
   const metrics = data?.metrics ? repriceDividendMetrics(data.metrics, currentPrice) : undefined;
   const rows = useMemo(() => toDividendRows(payments), [payments]);
   const sortedRows = useMemo(() => sortRows(rows, sortPreference), [rows, sortPreference]);
-  const columns = useMemo(() => buildDividendColumns(), []);
+  const columns = useMemo(() => buildDividendColumns(rows), [rows]);
   const chartPoints = useMemo(
     () => data?.historyAvailable === false ? [] : buildTrailingCashChartPoints(payments),
     [data?.historyAvailable, payments],
   );
+  // A step through the kit, so an annual raise reads as a stair in the legend's units.
+  const series = useMemo(() => [staticSeries(
+    chartPoints.map((point) => scalarPoint(point.date, point.close)),
+    { id: "ttm-dividend", label: "TTM dividend", color: colors.positive, style: "step", calendarSpaced: true },
+  )], [chartPoints]);
+  const formatCash = useCallback((value: number) => formatDistributionAmount(value, currency), [currency]);
+  const formatCashAxis = useMemo(
+    () => spanAxisFormatter((value, digits) => formatCurrency(value, currency, Math.max(2, digits))),
+    [currency],
+  );
+  // Payments before the first full trailing year or after today have no point on the line.
+  const chartSpan = chartPoints.length >= 2
+    ? { first: chartPoints[0]!.date.getTime(), last: chartPoints.at(-1)!.date.getTime() } : null;
+  const rowDate = useCallback((row: DividendRow) => {
+    const time = Date.parse(`${row.exDate}T00:00:00Z`);
+    return chartSpan && time >= chartSpan.first && time <= chartSpan.last ? new Date(time) : null;
+  }, [chartSpan?.first, chartSpan?.last]);
+  const selectedId = sortedRows.some((row) => row.key === selectedKey) ? selectedKey : sortedRows[0]?.key ?? null;
+  const link = useChartTableSelection({
+    rows: sortedRows, getId: rowKey, getDate: rowDate, selectedId, onSelect: setSelectedKey, focused,
+  });
+  // The header row, plus the scrollbar row once the columns overflow the pane.
+  const tableChromeRows = chartTableChromeRows(columns, width);
+  const fullFigures = metrics ? buildMetricItems(metrics, currency, sortedRows.length > 0, false) : [];
+  const keptFigures = chartTableLayout({
+    width, height, figures: fullFigures, tableRows: sortedRows.length, tableChromeRows, chart: chartPoints.length >= 2 ? {} : null,
+  }).figures;
+  // The desktop grid never clips a label; the terminal shortens them rather than clip.
+  const figures = metrics && !nativePaneChrome && labelsClip(keptFigures, width)
+    ? buildMetricItems(metrics, currency, sortedRows.length > 0, true) : fullFigures;
 
   const handleHeaderClick = useCallback((columnId: string) => {
-    setSortPreference((current) => nextSortPreference(current, columnId));
+    setSortPreference((current) => nextHeaderSort(current, columnId as DividendColumnId, {
+      firstDirection: "desc",
+      resetTo: DEFAULT_SORT_PREFERENCE,
+    }));
   }, []);
 
-  const handleKeyDown = useCallback((event: DataTableKeyEvent) => {
-    if (isPlainKeyboardEvent(event) && (event.name === "pageup" || event.name === "pagedown")) {
-      const summary = summaryScrollRef.current;
-      const viewportHeight = summary?.viewport?.height ?? 0;
-      const max = Math.max(0, (summary?.scrollHeight ?? 0) - viewportHeight);
-      if (summary && max > 0) {
-        const delta = Math.max(1, viewportHeight - 1) * (event.name === "pageup" ? -1 : 1);
-        summary.scrollTo(Math.max(0, Math.min(max, summary.scrollTop + delta)));
-        event.preventDefault?.();
-        event.stopPropagation?.();
-        return true;
-      }
-    }
-    // Only a bare r refreshes; Cmd/Ctrl+Shift+R belongs to the window.
-    return isPlainKey(event, "r") && handleRefreshKey(event, refresh, { stopPropagation: true });
-  }, [refresh]);
+  // Only a bare r refreshes; Cmd/Ctrl+Shift+R belongs to the window.
+  const handleKeyDown = useCallback((event: DataTableKeyEvent) => (
+    handleRefreshKey(event, refresh, { stopPropagation: true })
+  ), [refresh]);
 
   const emptyTitle = !symbol
     ? "No ticker selected."
@@ -288,34 +250,26 @@ export function DividendYieldPane({ focused, width, height, loadData = fetchDivi
   return (
     <DataTableView<DividendRow, DividendColumn>
       focused={focused}
-      selection={{
-        kind: "index",
-        selectedIndex: sortedRows.length === 0 ? null : Math.min(selectedIdx, sortedRows.length - 1),
-        onChange: (index) => setSelectedIdx(index),
-      }}
+      selection={{ kind: "id", selectedId, getId: rowKey, onChange: (id) => setSelectedKey(id) }}
       onRootKeyDown={handleKeyDown}
       resetScrollKey={symbol}
       rootWidth={width}
       rootHeight={height}
-      rootBefore={metrics ? (
-        <DividendSummary
-          metrics={metrics}
-          currency={currency}
-          hasHistory={sortedRows.length > 0}
-          width={width}
-          height={height}
-          chartPoints={chartPoints}
-          scrollRef={summaryScrollRef}
-          focused={focused}
-        />
+      rootBefore={metrics || chartPoints.length >= 2 ? (
+        <ChartTableHeader width={width} height={height} tableRows={sortedRows.length} tableChromeRows={tableChromeRows}
+          figures={figures}
+          chart={chartPoints.length >= 2 ? {
+            series, formatValue: formatCash, formatAxisValue: formatCashAxis, remoteKind: "dividend-ttm-history", ...link,
+          } : null} />
       ) : undefined}
       columns={columns}
       items={sortedRows}
       sortColumnId={sortPreference.columnId}
       sortDirection={sortPreference.direction}
       onHeaderClick={handleHeaderClick}
-      getItemKey={(row) => row.key}
+      getItemKey={rowKey}
       renderCell={renderCell}
+      selectedTextOverridesCellColor
       emptyStateTitle={emptyTitle}
     />
   );