gloomberb 0.17.0 → 0.17.2

package/src/plugins/builtin/supply-chain/flow.tsx

@@ -4,7 +4,8 @@ import type { SupplyRole, SupplyRow } from "../../../api-client/supply-chain";
 import { Box, ChartSurface, Span, Text, TextAttributes, useUiCapabilities } from "../../../ui";
 import { useShortcut } from "../../../react/input";
 import { isPlainKey } from "../../../utils/keyboard";
-import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
+import { displayWidth } from "../../../utils/format";
+import { ClippedText } from "../../../components/ui/display";
 import { blendHex } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
 import { useStaticChartBitmapSize } from "../../../components/chart/composite/bitmap";
@@ -201,10 +202,10 @@ export function SupplyFlow({ rows, symbol, focusName, focusId, width, height, fo
       onPress={() => selectNode(node)} onHover={(on) => setHovered(on ? node.id : null)} />)}
     {geometry.groupRow !== null ? <Box position="absolute" top={geometry.groupRow} left={1} width={width - 2} flexDirection="row" overflow="hidden">
       <Box width={RELATED_LABEL_CELLS} flexShrink={0}><Text fg={colors.textDim}>Groups</Text></Box>
-      <Text fg={colors.textDim}>{truncateToDisplayWidth(geometry.groups.map((row) => {
+      <ClippedText fg={colors.textDim} text={geometry.groups.map((row) => {
         const share = shareParts(row, focusId);
         return `${counterpartyLabel(row)}${share ? ` ${share.value} ${share.basis}` : ""}`;
-      }).join("  ·  "), width - RELATED_LABEL_CELLS - 3)}</Text>
+      }).join("  ·  ")} width={width - RELATED_LABEL_CELLS - 3} />
     </Box> : null}
     {legend ? <Box position="absolute" top={geometry.legendRow} left={1} width={width - 2} flexDirection="row" gap={2} overflow="hidden">
       {legend.map((entry) => <Box key={entry.id} flexDirection="row" gap={1} flexShrink={0}>
@@ -253,7 +254,7 @@ function FocusCard({ symbol, name, x, y, width, height, desktop }: { symbol: str
     backgroundColor={desktop ? colors.panel : undefined} border={!desktop} borderStyle="rounded" borderColor={colors.textMuted}
     style={desktop ? { border: `1px solid ${blendHex(colors.bg, colors.textBright, 0.35)}`, borderRadius: 6, boxShadow: `0 0 0 3px ${blendHex(colors.bg, colors.textBright, 0.06)}` } : undefined}>
     <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{symbol}</Text>
-    {showName ? <Text fg={colors.textDim}>{truncateToDisplayWidth(name!, width - 4)}</Text> : null}
+    {showName ? <ClippedText fg={colors.textDim} text={name!} width={width - 4} /> : null}
   </Box>;
 }
 
@@ -275,13 +276,15 @@ function FlowCard({ node, focusId, desktop, active, onPress, onHover }: {
     style={desktop ? { borderLeft: `3px ${node.more ? "dotted" : "solid"} ${node.more ? blendHex(colors.bg, accent, 0.5) : accent}`, borderRadius: 3, paddingLeft: 6, cursor: "pointer",
       boxShadow: active ? `inset 0 0 0 1px ${blendHex(colors.bg, accent, 0.6)}` : undefined } : undefined}
     onMouseDown={onPress} onMouseOver={() => onHover(true)} onMouseOut={() => onHover(false)} data-gloom-role="supply-flow-node">
-    <Box flexDirection="row" height={1} overflow="hidden">
+    {/* The ticker shows only beside the whole name. On the desktop that is CSS: the row wraps, one line shows, and a ticker that does not fit goes to the hidden line. */}
+    <Box flexDirection="row" height={1} overflow="hidden" style={desktop ? { flexWrap: "wrap" } : undefined}>
       {!desktop ? <Text fg={node.more ? colors.textMuted : accent}>▍</Text> : null}
-      <Text fg={active && !desktop ? colors.selectedText : titleColor} attributes={company ? TextAttributes.BOLD : 0}>{truncateToDisplayWidth(name, nameWidth)}</Text>
-      {ticker && displayWidth(name) + displayWidth(ticker) + 1 <= inner ? <Text fg={colors.textDim}>{` ${ticker}`}</Text> : null}
+      <ClippedText fg={active && !desktop ? colors.selectedText : titleColor} attributes={company ? TextAttributes.BOLD : 0} text={name} width={nameWidth} />
+      {ticker && (desktop || displayWidth(name) + displayWidth(ticker) + 1 <= inner)
+        ? <Text fg={colors.textDim} style={desktop ? { flex: "0 0 auto" } : undefined}>{` ${ticker}`}</Text> : null}
     </Box>
     {metric ? <Box height={1} paddingLeft={desktop ? 0 : 1} overflow="hidden">
-      <Text fg={active && !desktop ? colors.selectedText : colors.textDim}>{truncateToDisplayWidth(metric, inner - (desktop ? 0 : 1))}</Text>
+      <ClippedText fg={active && !desktop ? colors.selectedText : colors.textDim} text={metric} width={inner - (desktop ? 0 : 1)} />
     </Box> : null}
   </Box>;
 }
@@ -289,13 +292,12 @@ function FlowCard({ node, focusId, desktop, active, onPress, onHover }: {
 function FlowChip({ node, desktop, active, onPress, onHover }: { node: PositionedNode; desktop: boolean; active: boolean; onPress: () => void; onHover: (on: boolean) => void }) {
   const colors = useThemeColors();
   const accent = node.role ? ROLE_COLORS[node.role] : colors.textMuted;
-  const label = truncateToDisplayWidth(flowChipLabel(node), node.width - 2);
   const background = active ? blendHex(colors.bg, accent, desktop ? 0.32 : 0.45) : node.more ? undefined : blendHex(colors.bg, accent, 0.14);
-  const text = <Text fg={node.more ? colors.textDim : active ? colors.textBright : accent}>{label}</Text>;
+  const text = <ClippedText fg={node.more ? colors.textDim : active ? colors.textBright : accent} text={flowChipLabel(node)} width={node.width - 2} />;
   return <Box position="absolute" left={node.x} top={node.y} width={node.width} height={1} justifyContent={desktop ? "center" : undefined}
     onMouseDown={onPress} onMouseOver={() => onHover(true)} onMouseOut={() => onHover(false)} data-gloom-role="supply-flow-chip">
     {/* The desktop chip leaves a hairline of row above and below, like ticker chips. */}
-    {desktop ? <Box paddingX={1} backgroundColor={background} justifyContent="center" style={{ height: "calc(100% - 4px)", borderRadius: 3, cursor: "pointer" }}>{text}</Box>
+    {desktop ? <Box paddingX={1} minWidth={0} backgroundColor={background} justifyContent="center" style={{ height: "calc(100% - 4px)", borderRadius: 3, cursor: "pointer" }}>{text}</Box>
       : <Box paddingX={1} height={1} backgroundColor={background}>{text}</Box>}
   </Box>;
 }
@@ -317,7 +319,7 @@ function FlowTooltip({ node, focusId, width, desktop, anchor }: { node: Position
     flexDirection="column" paddingX={1} backgroundColor={colors.panel} border={!desktop} borderColor={ROLE_COLORS[row.role]}
     style={desktop ? { border: `1px solid ${blendHex(colors.bg, ROLE_COLORS[row.role], 0.7)}`, borderRadius: 4, boxShadow: "0 6px 18px rgba(0,0,0,0.45)", zIndex: 20, pointerEvents: "none" } : undefined}
     data-gloom-role="supply-flow-tooltip">
-    <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{truncateToDisplayWidth(counterpartyLabel(row), tooltipWidth - 2)}</Text>
-    {lines.map((line, index) => <Text key={index} fg={index === 0 ? colors.text : colors.textDim}>{truncateToDisplayWidth(line, tooltipWidth - 2)}</Text>)}
+    <ClippedText fg={colors.textBright} attributes={TextAttributes.BOLD} text={counterpartyLabel(row)} width={tooltipWidth - 2} />
+    {lines.map((line, index) => <ClippedText key={index} fg={index === 0 ? colors.text : colors.textDim} text={line} width={tooltipWidth - 2} />)}
   </Box>;
 }

package/src/plugins/builtin/supply-chain/graph.tsx

@@ -8,7 +8,8 @@ import { useThemeColors } from "../../../theme/theme-context";
 import { useShortcut } from "../../../react/input";
 import { useScrollBoxLayout } from "../../../components/use-scrollbox-layout";
 import { isPlainKey } from "../../../utils/keyboard";
-import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
+import { displayWidth } from "../../../utils/format";
+import { ClippedText } from "../../../components/ui/display";
 import { useStaticChartBitmapSize } from "../../../components/chart/composite/bitmap";
 import { drawLine, fillOpaque, parseHex } from "../../../components/chart/native/raster/primitives";
 import { entityLabel, graphNodes } from "./graph-model";
@@ -137,7 +138,8 @@ export function SupplyGraph({ data, width, height, focused, selectedId, selected
         const tickerWidth = node.entity.ticker ? displayWidth(node.entity.ticker) + 3 : 0;
         const showTicker = company && tickerWidth > 0 && inner >= tickerWidth + 5;
         const prefix = collapsed.includes(node.entity.id) ? "+ " : "";
-        const name = truncateToDisplayWidth(prefix + (showTicker ? node.entity.name : entityLabel(node.entity)), inner - (showTicker ? tickerWidth : 0));
+        const name = prefix + (showTicker ? node.entity.name : entityLabel(node.entity));
+        const nameWidth = inner - (showTicker ? tickerWidth : 0);
         const relation = kind ?? (node.related ? `${node.hops > 1 ? "via " : ""}${role}` : role);
         const confidence = `${Math.round((node.path?.confidence ?? 0) * 100)}%`;
         const detail = node.hops ? `${node.hops}H · ${relation}${inner >= displayWidth(relation ?? "") + 12 ? ` · ${confidence}` : ""}` : showTicker ? "Focus company" : node.entity.name;
@@ -150,10 +152,10 @@ export function SupplyGraph({ data, width, height, focused, selectedId, selected
             <Box flexDirection="column" width="100%">
               <Box flexDirection="row" height={1} gap={desktop ? 1 : 0} overflow="hidden">
                 {!desktop ? <Text fg={accent}>▍</Text> : null}
-                <Text fg={active && !desktop ? colors.selectedText : company ? colors.textBright : colors.textDim} attributes={company ? TextAttributes.BOLD : 0}>{name}</Text>
+                <ClippedText fg={active && !desktop ? colors.selectedText : company ? colors.textBright : colors.textDim} attributes={company ? TextAttributes.BOLD : 0} text={name} width={nameWidth} />
                 {showTicker ? desktop ? <Badge label={node.entity.ticker!} tone="accent" /> : <Text fg={active ? colors.selectedText : colors.textDim}>{` ${node.entity.ticker}`}</Text> : null}
               </Box>
-              <Box height={1} paddingLeft={desktop ? 0 : 1} overflow="hidden"><Text fg={active && !desktop ? colors.selectedText : colors.textDim}>{truncateToDisplayWidth(detail, inner)}</Text></Box>
+              <Box height={1} paddingLeft={desktop ? 0 : 1} overflow="hidden"><ClippedText fg={active && !desktop ? colors.selectedText : colors.textDim} text={detail} width={inner} /></Box>
             </Box>
           </Button>
         </Box>;

package/src/plugins/builtin/supply-chain/pane.tsx

@@ -8,6 +8,7 @@ import {
   Badge, buildSectionedRows, DataTableView, EmptyState, isSectionedItemRow, PageStackView, renderSectionedRowHeader, PaneStatusBody, QueryBar, StatGrid, statGridRows, usePaneNoticeFooter,
   usePaneStatusFooter, usePaneTabs, type DataTableCell, type DataTableColumn, type PaneHint, type SectionedRow, type StatItem,
 } from "../../../components";
+import { ClippedText } from "../../../components/ui/display";
 import { RatioBar } from "../../../components/ui/ratio-bar";
 import { getTableWidth } from "../../../components/ui/table-layout";
 import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
@@ -16,7 +17,7 @@ import { usePaneTickerIdentity } from "../../../state/hooks/pane-ticker";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
 import { Box, Text, TextAttributes, useRendererHost, useUiCapabilities } from "../../../ui";
-import { displayWidth, truncateToDisplayWidth } from "../../../utils/format";
+import { displayWidth } from "../../../utils/format";
 import { SignInWall } from "../cloud/auth-actions";
 import { CLOUD_PLAN_KEY, useCloudUpgradeAction } from "../shared/cloud-upgrade";
 import { useOpenDescription } from "../shared/open-description";
@@ -241,13 +242,15 @@ function SupplyView({ symbol, width, height, focused }: Pick<PaneProps, "width"
       case "name": {
         const company = counterpartyKind(row) === "company";
         // The kind label never gives way to a long cohort name; a column too narrow for the name says it in one word.
+        // The desktop always says it in one word: the Role column beside it names the role, and the name takes the room.
         const full = counterpartyKindLabel(row);
-        const kind = full && displayWidth(counterpartyLabel(row)) + displayWidth(full) + 4 <= column.width ? full : counterpartyKindLabel(row, true);
+        const kind = !desktop && full && displayWidth(counterpartyLabel(row)) + displayWidth(full) + 4 <= column.width ? full : counterpartyKindLabel(row, true);
         const ticker = !columns.some((entry) => entry.id === "ticker") ? row.counterparty.ticker : null;
         const room = Math.max(8, column.width - (kind ? displayWidth(kind) + 4 : 0) - (ticker ? displayWidth(ticker) + 1 : 0));
-        return { text: cellText(row, "name"), content: <Box flexDirection="row" height={1} gap={ticker ? 1 : 2} overflow="hidden">
-          <Text fg={ink ?? (company ? colors.textBright : colors.textDim)}>{truncateToDisplayWidth(counterpartyLabel(row), room)}</Text>
-          {ticker ? <Text fg={ink ?? colors.textDim}>{ticker}</Text> : null}
+        // On the desktop the name gives way at the column's edge by CSS and the ticker and kind keep their room.
+        return { text: cellText(row, "name"), content: <Box flexDirection="row" height={1} gap={ticker ? 1 : 2} overflow="hidden" {...(desktop ? { flexShrink: 1, minWidth: 0 } : {})}>
+          <ClippedText fg={ink ?? (company ? colors.textBright : colors.textDim)} text={counterpartyLabel(row)} width={room} />
+          {ticker ? <Text fg={ink ?? colors.textDim} style={desktop ? { flex: "0 0 auto" } : undefined}>{ticker}</Text> : null}
           {kind ? desktop ? <Badge label={kind} /> : <Text fg={ink ?? colors.textMuted}>{kind}</Text> : null}
         </Box> };
       }

package/src/plugins/builtin/ticker-detail/financials/aggregation.ts

@@ -1,5 +1,6 @@
-import type { FinancialStatement } from "../../../../types/financials";
+import type { EarningsField, FinancialStatement } from "../../../../types/financials";
 import { completeAvailability, statementFieldAvailability } from "../../../../utils/financial-statements";
+import { hasStatementGap } from "../../../../utils/statement-gaps";
 
 export type FinancialPeriod = "annual" | "quarterly";
 
@@ -91,6 +92,8 @@ const FLOW_KEYS = new Set<string>([
   "effectOfExchangeRateChanges",
 ]);
 
+const EARNINGS_KEYS = ["basicEps", "eps"] as const satisfies readonly EarningsField[];
+
 const BALANCE_KEYS = new Set<string>([
   "totalAssets",
   "currentAssets",
@@ -195,7 +198,17 @@ function aggregateQuarterlyStatements(
     const availableAt = completeAvailability(sources.map((source) => statementFieldAvailability(source, key)));
     if (availableAt) availability[key] = availableAt;
   };
+  // A quarter that declares an EPS line unavailable, or whose EPS share basis
+  // is unresolved, leaves the year's EPS unknown even when it still carries a
+  // number: the sum is withheld and the aggregate says why, as a quarter would.
+  const unresolvedEps = statements.find((statement) => statement.epsBasis?.status === "unresolved");
+  const gapped = EARNINGS_KEYS.filter((key) => statements.some((statement) => hasStatementGap(statement, key)));
+  if (gapped.length > 0) aggregate.unavailableEarnings = [...gapped];
+  if (unresolvedEps) aggregate.epsBasis = unresolvedEps.epsBasis;
+  const withheld = new Set<string>(gapped);
+  if (unresolvedEps) withheld.add("eps");
   for (const key of FLOW_KEYS) {
+    if (withheld.has(key)) continue;
     const values = statements
       .map((statement) => (statement as unknown as Record<string, unknown>)[key])
       .filter((value): value is number => typeof value === "number" && Number.isFinite(value));

package/src/plugins/builtin/ticker-detail/financials/ratios.ts

@@ -63,8 +63,9 @@ interface RatioInputDef {
   /** A flow over the period. Quarterly columns multiply it by four. */
   annualized?: boolean;
   /**
-   * A flow over a year: quarterly columns read the trailing four quarters
-   * (TTM), and show "< 4 quarters" rather than annualize a short history.
+   * A flow over a year (leverage and valuation ratios): quarterly columns read
+   * the trailing four quarters (TTM), and show "< 4 quarters" rather than
+   * annualize a short history.
    */
   trailing?: boolean;
   /** A shorter name for quarterly columns, so the label, TTM and its unit fit the label column. */
@@ -189,7 +190,7 @@ const flow = (label: string, read: BalanceLine, operator?: RatioInputDef["operat
   label, operator, format: "money", annualized: true, value: ({ statement }) => reported(read(statement)),
 });
 
-/** A flow a leverage ratio reads over a year: the trailing four quarters in a quarterly column. */
+/** A flow a ratio reads over a year: the trailing four quarters in a quarterly column. */
 const trailingFlow = (
   label: string,
   read: BalanceLine,
@@ -474,7 +475,8 @@ export const RATIO_TABS: RatioTabDef[] = [
         format: "multiple",
         inputs: [
           { label: "Price", format: "perShare", value: ({ price }) => price },
-          { label: "Diluted EPS", operator: "÷", format: "perShare", annualized: true, value: dilutedEps },
+          // The summed quarters withhold EPS as a quarter does, when one has a gap or an unresolved basis.
+          { label: "Diluted EPS", operator: "÷", format: "perShare", trailing: true, value: dilutedEps },
         ],
         compute: ([price, eps]) => over(price!, eps!),
       },
@@ -484,7 +486,7 @@ export const RATIO_TABS: RatioTabDef[] = [
         format: "multiple",
         inputs: [
           { label: "Enterprise Value", format: "money", value: enterpriseValue },
-          flow("EBITDA", line("ebitda"), "÷"),
+          trailingFlow("EBITDA", line("ebitda"), "÷"),
         ],
         // A negative enterprise value makes the multiple meaningless too.
         compute: ([value, ebitda]) => (value! > 0 ? over(value!, ebitda!) : "not-meaningful"),
@@ -493,7 +495,7 @@ export const RATIO_TABS: RatioTabDef[] = [
         id: "ps",
         label: "P/S",
         format: "multiple",
-        inputs: [{ label: "Market Cap", format: "money", value: marketCap }, flow("Revenue", revenue, "÷")],
+        inputs: [{ label: "Market Cap", format: "money", value: marketCap }, trailingFlow("Revenue", revenue, "÷")],
         compute: ([cap, sales]) => over(cap!, sales!),
       },
       {
@@ -511,7 +513,7 @@ export const RATIO_TABS: RatioTabDef[] = [
         label: "FCF Yield",
         format: "percent",
         signed: true,
-        inputs: [flow("Free Cash Flow", freeCashFlow), { label: "Market Cap", operator: "÷", format: "money", value: marketCap }],
+        inputs: [trailingFlow("Free Cash Flow", freeCashFlow), { label: "Market Cap", operator: "÷", format: "money", value: marketCap }],
         compute: ([cash, cap]) => over(cash!, cap!),
       },
     ],

package/src/plugins/builtin/ticker-detail/headless.ts

@@ -1,4 +1,4 @@
-import { FINANCIAL_VINTAGE_NOTICE } from "../../../utils/financial-statements";
+import { FINANCIAL_VINTAGE_NOTICE, statementHistoryNotes } from "../../../utils/financial-statements";
 import { hasValidQuoteObservationTime } from "../../../market-data/quotes/freshness";
 import { EXTENDED_SESSION_LABELS, getQuoteSessionFields, type ExtendedSession } from "../../../market-data/market/status";
 import type { HeadlessPaneColumn, HeadlessPaneDefinition } from "../../../types/headless";
@@ -107,6 +107,8 @@ export const financialStatementsHeadless: HeadlessPaneDefinition<"rows"> = {
     return {
       rows, columns, unavailableSymbols: rows.length ? [] : [symbol],
       ...(!hasRequestedStatements ? { errors: [`${symbol}: No ${requestedPeriod} financial statement coverage.`] } : {}),
+      // The report closes with how far back its periods go, and how to read further.
+      notes: statementHistoryNotes(requestedPeriod, dates.map(({ date }) => date), symbol),
       metadata: {
         symbol, name: financials.quote?.name ?? symbol, currency: statementCurrency ?? null, unit: table?.unit ?? null, quoteCurrency: financials.quote?.currency ?? null,
         statement: table?.subTab.key ?? options.statement, statementLabel: table?.subTab.name ?? null,
@@ -177,6 +179,7 @@ async function loadRatioReport(
     rows, columns, unavailableSymbols: rows.length ? [] : [symbol],
     ...(!hasRequestedStatements ? { errors: [`${symbol}: No ${period} financial statement coverage.`] } : {}),
     ...(tab.key === "valuation" && hasRequestedStatements && !history?.length ? { complete: false } : {}),
+    notes: statementHistoryNotes(period, dates.map(({ date }) => date), symbol),
     metadata: {
       symbol, name: financials.quote?.name ?? symbol, currency: statementCurrency ?? null,
       quoteCurrency: financials.quote?.currency ?? null,

package/src/plugins/builtin/ticker-detail/overview/components.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
-import { ExternalLinkText, RangeTrack, usePaneLinkMenuEntry } from "../../../../components";
+import { ColumnGrid, ColumnGridPair, RangeTrack, usePaneLinkMenuEntry, type ColumnGridCell, type ColumnGridColumn } from "../../../../components";
 import { t, tf } from "../../../../i18n";
 import { formatMarketPriceWithCurrency, liveQuoteFormatOptions, type MarketFormatOptions } from "../../../../market-data/market/format";
 import { colors, hoverBg, priceColor } from "../../../../theme/colors";
 import type { Quote } from "../../../../types/financials";
-import { Box, Text } from "../../../../ui";
-import { displayWidth, formatNumber, padTo, truncateToDisplayWidth } from "../../../../utils/format";
+import { Box, Text, useUiCapabilities } from "../../../../ui";
+import { displayWidth, formatNumber, truncateToDisplayWidth } from "../../../../utils/format";
 import type { OverviewFunctionLink, PositionTableRow, StatField } from "./types";
 import { portfolioPnlLabel } from "../../../../portfolio/position-metrics";
 
@@ -17,6 +17,8 @@ const RANGE_ENDPOINT_WIDTH = 11;
 /** Shortest track worth drawing; below it the label shortens. */
 const RANGE_MIN_TRACK_WIDTH = 6;
 const POSITION_COLUMN_GAP = 1;
+/** The account column never gets narrower than this. */
+const ACCOUNT_MIN_WIDTH = 8;
 
 interface PositionColumn {
   key: keyof Omit<PositionTableRow, "pnlValue" | "pnlBasis" | "quantityUnit">;
@@ -105,27 +107,24 @@ export function CompactRangeBar({
   );
 }
 
-function BookRow({
-  label,
-  value,
-  width,
-  valueColor,
-}: {
-  label: string;
-  value: string;
-  width: number;
-  valueColor: string;
-}) {
-  return (
-    <Box flexDirection="row" height={1} width={width}>
-      <Text fg={colors.textDim}>{padTo(label, BOOK_LABEL_WIDTH)}</Text>
-      {/* Right-aligned, so a size changing length does not slide the price. */}
-      <Text fg={valueColor}>{padTo(value, Math.max(0, width - BOOK_LABEL_WIDTH), "right")}</Text>
-    </Box>
-  );
+/** The quote book's columns: its labels, then the value right-aligned in the rest. */
+function bookColumns(width: number): ColumnGridColumn[] {
+  return [
+    { width: BOOK_LABEL_WIDTH },
+    // Right-aligned, so a size changing length does not slide the price.
+    { width: Math.max(0, width - BOOK_LABEL_WIDTH), growFrom: 0, align: "right" },
+  ];
 }
 
-export function QuoteBook({ quote, assetCategory, width }: { quote: Quote; assetCategory?: string; width: number }) {
+export function QuoteBook({ quote, assetCategory, width, desktopWidth }: {
+  quote: Quote;
+  assetCategory?: string;
+  /** Cells on the terminal. */
+  width: number;
+  /** The desktop's width for the book, in CSS. */
+  desktopWidth?: string;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
   // Bid, ask and spread keep the instrument's decimals on every tick ($224.58 / $224.60 / $0.02).
   const priceOptions = liveQuoteFormatOptions(quote, quote.currency, assetCategory);
   const bidPrice = quote.bid != null ? formatMarketPriceWithCurrency(quote.bid, quote.currency, priceOptions) : "—";
@@ -140,12 +139,20 @@ export function QuoteBook({ quote, assetCategory, width }: { quote: Quote; asset
     spreadText = `${formatMarketPriceWithCurrency(spread, quote.currency, priceOptions)}${spreadPercent}`;
   }
 
+  const row = (label: string, value: string, color: string): ColumnGridCell[] => [{ text: label, color: colors.textDim }, { text: value, color }];
   return (
-    <Box flexDirection="column" width={width} flexShrink={0}>
-      {/* Neutral: a red ask would read as a loss. */}
-      <BookRow label={t("Bid")} value={bidText} width={width} valueColor={colors.textBright} />
-      <BookRow label={t("Ask")} value={askText} width={width} valueColor={colors.textBright} />
-      <BookRow label={t("Spr")} value={spreadText} width={width} valueColor={colors.textDim} />
+    <Box flexDirection="column" width={nativePaneChrome ? undefined : width} flexShrink={0} style={nativePaneChrome ? { width: desktopWidth } : undefined}>
+      <ColumnGrid
+        columns={bookColumns(width)}
+        width={width}
+        role="quote-book"
+        rows={[
+          // Neutral: a red ask would read as a loss.
+          row(t("Bid"), bidText, colors.textBright),
+          row(t("Ask"), askText, colors.textBright),
+          row(t("Spr"), spreadText, colors.textDim),
+        ]}
+      />
     </Box>
   );
 }
@@ -192,9 +199,12 @@ function LinkedStatCell({
 }) {
   // The pane menu lists each function once, so the keyboard reaches what a click opens.
   usePaneLinkMenuEntry(`function:${link.templateId}`, tf("Open {label}", { label: t(link.name) }), () => onOpen(link));
+  const { nativePaneChrome } = useUiCapabilities();
   return (
     <Box
-      width={width}
+      width={nativePaneChrome ? undefined : width}
+      flexGrow={nativePaneChrome ? 1 : undefined}
+      style={nativePaneChrome ? { minWidth: 0 } : undefined}
       flexDirection="row"
       hoverBackgroundColor={hoverBg()}
       onMouseDown={(event?: { button?: number }) => {
@@ -223,65 +233,64 @@ export function FundamentalsGrid({
   /** Opens a figure's research function; without it figures are plain. */
   onOpenLink?: (link: OverviewFunctionLink) => void;
 }) {
+  const { nativePaneChrome } = useUiCapabilities();
   const columnCount = columns ?? fundamentalsGridColumns(width);
   const availableWidth = width - STAT_COLUMN_GAP * (columnCount - 1);
   const baseColWidth = Math.floor(availableWidth / columnCount);
   const extraWidth = availableWidth - baseColWidth * columnCount;
   const colWidths = Array.from({ length: columnCount }, (_, index) => baseColWidth + (index === columnCount - 1 ? extraWidth : 0));
-  const rows: Array<Array<StatField | null>> = [];
+  // Equal columns on the desktop too, sharing the pane's width there.
+  // A column never gets narrower than its labels, so a label cannot reach the next column.
+  const gridColumns: ColumnGridColumn[] = colWidths.map((colWidth, index) => ({
+    width: colWidth,
+    growFrom: gridLabelWidth(colWidth),
+    gapBefore: index > 0 ? STAT_COLUMN_GAP : 0,
+  }));
+  const rows: ColumnGridCell[][] = [];
   for (let i = 0; i < fields.length; i += columnCount) {
-    rows.push(Array.from({ length: columnCount }, (_, offset) => fields[i + offset] ?? null));
+    rows.push(Array.from({ length: columnCount }, (_, offset): ColumnGridCell => {
+      const field = fields[i + offset];
+      if (!field) return null;
+      const colWidth = colWidths[offset] ?? baseColWidth;
+      const labelWidth = gridLabelWidth(colWidth);
+      const valueWidth = Math.max(1, colWidth - labelWidth);
+      // A long value (an industry, a SIC title) is cut from the end, never from the label side.
+      const value = truncateToDisplayWidth(field.value, valueWidth);
+      const detailRoom = valueWidth - displayWidth(value) - 1;
+      const details = typeof field.detail === "string" ? [field.detail] : field.detail ?? [];
+      // A cut "in 4..." misleads; a title cut to "Semicond..." still names it.
+      const detail = details.find((text) => displayWidth(text) <= detailRoom)
+        ?? (field.clipDetail && details[0] && detailRoom >= 4 ? truncateToDisplayWidth(details[0], detailRoom) : "");
+      const content = (
+        <ColumnGridPair
+          label={t(field.label)}
+          labelWidth={labelWidth}
+          width={colWidth}
+          value={field.value}
+          valueColor={field.valueColor}
+          detail={detail || undefined}
+          url={field.url}
+        />
+      );
+      return {
+        content: field.link && onOpenLink
+          ? <LinkedStatCell link={field.link} width={colWidth} onOpen={onOpenLink}>{content}</LinkedStatCell>
+          : (
+            <Box
+              width={nativePaneChrome ? undefined : colWidth}
+              flexGrow={nativePaneChrome ? 1 : undefined}
+              flexDirection="row"
+              data-gloom-ui="key-value-row"
+              style={nativePaneChrome ? { minWidth: 0 } : undefined}
+            >
+              {content}
+            </Box>
+          ),
+      };
+    }));
   }
 
-  return (
-    <Box flexDirection="column">
-      {rows.map((row, i) => (
-        <Box key={i} flexDirection="row" height={1}>
-          {row.map((field, j) => {
-            const colWidth = colWidths[j] ?? baseColWidth;
-            if (!field) {
-              return (
-                <Box key={j} flexDirection="row">
-                  {j > 0 && <Box width={STAT_COLUMN_GAP} />}
-                  <Box width={colWidth} />
-                </Box>
-              );
-            }
-            const labelWidth = gridLabelWidth(colWidth);
-            const valueWidth = Math.max(1, colWidth - labelWidth);
-            // A long value (an industry, a SIC title) is cut from the end, never from the label side.
-            const value = truncateToDisplayWidth(field.value, valueWidth);
-            const detailRoom = valueWidth - displayWidth(value) - 1;
-            const details = typeof field.detail === "string" ? [field.detail] : field.detail ?? [];
-            // A cut "in 4..." misleads; a title cut to "Semicond..." still names it.
-            const detail = details.find((text) => displayWidth(text) <= detailRoom)
-              ?? (field.clipDetail && details[0] && detailRoom >= 4 ? truncateToDisplayWidth(details[0], detailRoom) : "");
-            const content = (
-              <>
-                <Box width={labelWidth} overflow="hidden">
-                  <Text fg={colors.textDim}>{t(field.label)}</Text>
-                </Box>
-                <Box flexDirection="row" width={valueWidth} justifyContent="flex-end" overflow="hidden">
-                  {field.url
-                    ? <ExternalLinkText url={field.url} label={value} color={field.valueColor ?? colors.text} />
-                    : <Text fg={field.valueColor ?? colors.text}>{value}</Text>}
-                  {detail ? <Text fg={colors.textDim}>{` ${detail}`}</Text> : null}
-                </Box>
-              </>
-            );
-            return (
-              <Box key={j} flexDirection="row">
-                {j > 0 && <Box width={STAT_COLUMN_GAP} />}
-                {field.link && onOpenLink
-                  ? <LinkedStatCell link={field.link} width={colWidth} onOpen={onOpenLink}>{content}</LinkedStatCell>
-                  : <Box width={colWidth} flexDirection="row" data-gloom-ui="key-value-row">{content}</Box>}
-              </Box>
-            );
-          })}
-        </Box>
-      ))}
-    </Box>
-  );
+  return <ColumnGrid columns={gridColumns} rows={rows} role="fundamentals-grid" />;
 }
 
 const POSITION_COLUMNS: readonly PositionColumn[] = [
@@ -301,36 +310,28 @@ function createPositionColumns(width: number, hasFaceQuantity: boolean): Positio
   }));
   const fixedWidth = columns.reduce((sum, column) => sum + column.width, 0) + POSITION_COLUMN_GAP * (columns.length - 1);
   const accountColumn = columns[0]!;
-  accountColumn.width = Math.max(8, width - fixedWidth);
+  accountColumn.width = Math.max(ACCOUNT_MIN_WIDTH, width - fixedWidth);
   return columns;
 }
 
 export function PositionTable({ rows, width }: { rows: PositionTableRow[]; width: number }) {
   const columns = createPositionColumns(width, rows.some(row => row.quantityUnit === "face"));
   const pnlLabel = portfolioPnlLabel(rows.map((row) => row.pnlBasis));
+  const gridColumns: ColumnGridColumn[] = columns.map((column, index) => ({
+    width: column.width,
+    align: column.align,
+    gapBefore: index > 0 ? POSITION_COLUMN_GAP : 0,
+    // The account takes what the figures leave, on the desktop too.
+    ...(column.key === "account" ? { growFrom: ACCOUNT_MIN_WIDTH } : {}),
+  }));
+  const header: ColumnGridCell[] = columns.map((column) => ({
+    text: t(column.key === "pnl" ? pnlLabel : column.label),
+    color: colors.textDim,
+  }));
+  const body = rows.map((row): ColumnGridCell[] => columns.map((column) => ({
+    text: row[column.key],
+    color: column.color?.(row) ?? (column.key === "account" ? colors.textBright : colors.text),
+  })));
 
-  return (
-    <Box flexDirection="column" width={width}>
-      <Box flexDirection="row" height={1}>
-        {columns.map((column, index) => (
-          <Box key={column.key} flexDirection="row">
-            {index > 0 && <Box width={POSITION_COLUMN_GAP} />}
-            <Text fg={colors.textDim}>{padTo(t(column.key === "pnl" ? pnlLabel : column.label), column.width, column.align)}</Text>
-          </Box>
-        ))}
-      </Box>
-      {rows.map((row, rowIndex) => (
-        <Box key={rowIndex} flexDirection="row" height={1}>
-          {columns.map((column, index) => (
-            <Box key={column.key} flexDirection="row">
-              {index > 0 && <Box width={POSITION_COLUMN_GAP} />}
-              <Text fg={column.color?.(row) ?? (column.key === "account" ? colors.textBright : colors.text)}>
-                {padTo(row[column.key], column.width, column.align)}
-              </Text>
-            </Box>
-          ))}
-        </Box>
-      ))}
-    </Box>
-  );
+  return <ColumnGrid columns={gridColumns} rows={[header, ...body]} width={width} role="position-table" />;
 }

package/src/plugins/builtin/ticker-detail/overview/model.ts

@@ -23,7 +23,7 @@ import { getPortfolioPositionMetrics, getPortfolioQuoteDisplay, resolvePortfolio
 import { liveDividendYield, liveForwardPE, liveMarketCapitalization, liveTrailingPE } from "../../portfolio-list/live-valuation";
 import { atRegularSessionPrice } from "../../../../market-data/quotes/regular-session-valuation";
 import { formatReportedMoney } from "../../../../utils/reported-money";
-import { fundamentalsCurrency, fundamentalsEpsCurrency, reportedEnterpriseValue } from "../../../../utils/fundamentals";
+import { enterpriseValueCheck, fundamentalsCurrency, fundamentalsEpsCurrency, reportedEnterpriseValue } from "../../../../utils/fundamentals";
 import { formatShortDate } from "../../../../utils/datetime-format";
 import { safeExternalUrl } from "../../../../utils/external-url";
 
@@ -188,7 +188,14 @@ export function buildOverviewStats({
   if (fundamentals?.unavailableFields?.includes("enterpriseValue")) {
     stats.push({ label: "EV", value: "—" });
   } else if (enterpriseValue != null) {
-    stats.push({ label: "EV", value: formatCompactCurrency(enterpriseValue, quoteCurrency) });
+    // More than 5% from market cap + debt - cash: the provider's, with the computed figure where it fits.
+    const check = enterpriseValueCheck(fundamentals);
+    const computed = check?.status === "differs" && check.computed != null ? formatCompact(check.computed) : undefined;
+    stats.push({
+      label: "EV",
+      value: formatCompactCurrency(enterpriseValue, quoteCurrency),
+      detail: computed ? [`provider vs ${computed}`, "provider"] : undefined,
+    });
   }
   if (finite(fundamentals?.beta)) {
     stats.push({ label: "Beta", value: formatNumber(fundamentals.beta, 2), link: RELATIONSHIP_GRAPH });