gloomberb 0.17.0 → 0.17.2

package/src/components/ui/column-grid.tsx

@@ -0,0 +1,206 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Box, Text, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+import { displayWidth, padTo, truncateToDisplayWidth } from "../../utils/format";
+import { ExternalLinkText } from "./external-link";
+
+/** One column of a ColumnGrid. */
+export interface ColumnGridColumn {
+  /** Cells the terminal gives the column, from the caller's own cell math. */
+  width: number;
+  /**
+   * On the desktop and the web the column takes an equal share of the room the
+   * fixed columns leave, and never less than this many characters. Without it
+   * the column holds `width` characters there too.
+   */
+  growFrom?: number;
+  /** Where the column's text sits; a number column is right-aligned. */
+  align?: "left" | "right";
+  /** Space before the column: cells on the terminal, characters on the desktop. */
+  gapBefore?: number;
+}
+
+/** Text the grid fits to its column (padded on the terminal, cut by CSS on the desktop), or content the column holds. */
+export type ColumnGridCell =
+  | { text: string; color?: string }
+  | { content: ReactNode }
+  | null;
+
+export interface ColumnGridProps {
+  columns: readonly ColumnGridColumn[];
+  /** Rows of cells, one per column. A header is the first row. */
+  rows: ReadonlyArray<ReadonlyArray<ColumnGridCell>>;
+  /** The terminal's width for the grid, in cells. The desktop fills its box. */
+  width?: number;
+  /** Names the grid for the pane chrome checks (`data-gloom-role`). */
+  role?: string;
+}
+
+/**
+ * Desktop text, in a box that takes what its track gives it. Whether its track
+ * can be narrower than the text is `clipOf`'s to say; where it can, the text
+ * carries `data-gloom-clip` and styles.css clips it, without a scroll container
+ * where the engine has `overflow: clip`, and ends it in an ellipsis.
+ */
+const TEXT_BOX: CSSProperties = { display: "block", minWidth: 0 };
+const CLIPPED = { "data-gloom-clip": "text" } as const;
+
+/**
+ * The clip a cell's text gets: a fixed column is as wide as its characters at
+ * every frame, but a growing column can fall to `growFrom` characters at any
+ * frame of a resize, between two catch-ups, however far the pointer moved. Text
+ * longer than that is clipped, so a cell never draws outside its track.
+ */
+function clipOf(text: string, column: ColumnGridColumn): typeof CLIPPED | undefined {
+  return displayWidth(text) > (column.growFrom ?? column.width) ? CLIPPED : undefined;
+}
+
+/**
+ * The grid's tracks as CSS: characters for fixed columns, an equal share for
+ * growing ones. Gaps that are all alike are the grid's column gap; otherwise
+ * each gap is a track of its own, which no cell sits in.
+ */
+function gridTemplate(columns: readonly ColumnGridColumn[]): { template: string; gap: string | undefined; lines: number[] } {
+  const track = (column: ColumnGridColumn) => column.growFrom != null ? `minmax(${column.growFrom}ch, 1fr)` : `${column.width}ch`;
+  const gaps = columns.slice(1).map((column) => column.gapBefore ?? 0);
+  if ((columns[0]?.gapBefore ?? 0) === 0 && gaps.every((gap) => gap === gaps[0])) {
+    return { template: columns.map(track).join(" "), gap: gaps[0] ? `${gaps[0]}ch` : undefined, lines: columns.map((_, index) => index + 1) };
+  }
+  const tracks: string[] = [];
+  const lines: number[] = [];
+  for (const column of columns) {
+    if (column.gapBefore) tracks.push(`${column.gapBefore}ch`);
+    tracks.push(track(column));
+    lines.push(tracks.length);
+  }
+  return { template: tracks.join(" "), gap: undefined, lines };
+}
+
+/**
+ * Columns of single-line text that line up from row to row: a table of
+ * figures under its header, or label and value pairs set in columns. The terminal lays the
+ * columns out at the whole cells the caller worked out, as text padded to
+ * them. The desktop and the web lay out one CSS grid whose tracks are counted
+ * in characters, so the columns follow a resize to the pixel, every row and
+ * the header share the same tracks, and text that does not fit ends in an
+ * ellipsis instead of being cut to a count of cells.
+ */
+export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
+  const { nativePaneChrome } = useUiCapabilities();
+  if (!nativePaneChrome) {
+    return (
+      <Box flexDirection="column" width={width} data-gloom-role={role}>
+        {rows.map((row, rowIndex) => (
+          <Box key={rowIndex} flexDirection="row" height={1}>
+            {columns.map((column, index) => {
+              const cell = row[index] ?? null;
+              return (
+                <Box key={index} flexDirection="row">
+                  {column.gapBefore ? <Box width={column.gapBefore} /> : null}
+                  {cell && "text" in cell
+                    ? <Text fg={cell.color}>{padTo(cell.text, column.width, column.align)}</Text>
+                    : <Box width={column.width} flexDirection="row">{cell?.content}</Box>}
+                </Box>
+              );
+            })}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  const { template, gap, lines } = gridTemplate(columns);
+  return (
+    <Box
+      data-gloom-ui="column-grid"
+      data-gloom-role={role}
+      // A row is one line of text, as tall as the text's own line: rows of a set
+      // height spare the browser sizing them again on every frame of a resize.
+      // The grid clips what its tracks put past its edge (columns that cannot shrink under a pane that does).
+      data-gloom-clip="box"
+      style={{ display: "grid", gridTemplateColumns: template, gridAutoRows: "var(--cell-h)", ...(gap ? { columnGap: gap } : {}) }}
+    >
+      {rows.map((row, rowIndex) => (
+        <Box key={rowIndex} data-gloom-ui="column-grid-row" style={{ display: "contents" }}>
+          {columns.map((column, index) => {
+            const cell = row[index] ?? null;
+            if (!cell) return null;
+            const place: CSSProperties = { gridColumn: lines[index], gridRow: rowIndex + 1 };
+            return "text" in cell
+              ? (
+                <Text
+                  key={index}
+                  fg={cell.color}
+                  data-gloom-ui="column-grid-text"
+                  {...clipOf(cell.text, column)}
+                  style={{ ...place, ...TEXT_BOX, textAlign: column.align ?? "left" }}
+                >
+                  {cell.text}
+                </Text>
+              )
+              : <Box key={index} flexDirection="row" data-gloom-ui="column-grid-cell" style={{ ...place, minWidth: 0 }}>{cell.content}</Box>;
+          })}
+        </Box>
+      ))}
+    </Box>
+  );
+}
+
+export interface ColumnGridPairProps {
+  label: string;
+  /** Cells, and on the desktop characters, the label takes. */
+  labelWidth: number;
+  /** The terminal's cells for label and value together. */
+  width: number;
+  value: string;
+  valueColor?: string;
+  /** Muted context after the value, already chosen to fit. */
+  detail?: string;
+  /** The value opens this address. */
+  url?: string;
+}
+
+/**
+ * A label and its value in one ColumnGrid cell: the label at a fixed width,
+ * the value right-aligned in the rest and cut from its end when it is too
+ * long, and its muted detail after it. The detail gives way before the value.
+ */
+export function ColumnGridPair({ label, labelWidth, width, value, valueColor, detail, url }: ColumnGridPairProps) {
+  const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
+  const color = valueColor ?? colors.text;
+  if (!nativePaneChrome) {
+    const valueWidth = Math.max(1, width - labelWidth);
+    const shown = truncateToDisplayWidth(value, valueWidth);
+    return (
+      <>
+        <Box width={labelWidth} overflow="hidden">
+          <Text fg={colors.textDim}>{label}</Text>
+        </Box>
+        <Box flexDirection="row" width={valueWidth} justifyContent="flex-end" overflow="hidden">
+          {url ? <ExternalLinkText url={url} label={shown} color={color} /> : <Text fg={color}>{shown}</Text>}
+          {detail ? <Text fg={colors.textDim}>{` ${detail}`}</Text> : null}
+        </Box>
+      </>
+    );
+  }
+  // The value's box can fall to nothing at any frame of a resize (the columns hold their labels, not their
+  // values), so its text and detail are clipped, the detail first. A link is clipped by its box, from its end.
+  return (
+    <>
+      <Text
+        fg={colors.textDim}
+        {...(displayWidth(label) > labelWidth ? { "data-gloom-clip": "box" } : {})}
+        style={{ flexGrow: 0, flexShrink: 0, flexBasis: `${labelWidth}ch`, display: "block" }}
+      >
+        {label}
+      </Text>
+      <Box flexDirection="row" justifyContent="flex-end" flexGrow={1} flexShrink={1} flexBasis={0} {...(url ? { "data-gloom-clip": "box" } : {})}>
+        {url
+          ? <ExternalLinkText url={url} label={value} color={color} />
+          : <Text fg={color} {...CLIPPED} style={{ ...TEXT_BOX, flexShrink: 1 }}>{value}</Text>}
+        {detail ? <Text fg={colors.textDim} {...CLIPPED} style={{ ...TEXT_BOX, flexShrink: 1000 }}>{` ${detail}`}</Text> : null}
+      </Box>
+    </>
+  );
+}

package/src/components/ui/display.tsx

@@ -20,14 +20,20 @@ export interface SectionHeadingProps {
 
 export function SectionHeading({ title, marginTop = 0, width, wrap = false }: SectionHeadingProps) {
   const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
   // English reads in title case; a translation keeps its own casing.
   const translated = t(title);
   const text = translated === title ? titleCase(title) : translated;
   return (
     <Box height={wrap ? undefined : 1} marginTop={marginTop} width={width} overflow="hidden" data-gloom-ui="section-heading">
-      <Text fg={colors.textBright} attributes={TextAttributes.BOLD} wrapText={wrap}>
-        {wrap || width === undefined ? text : truncateToDisplayWidth(text, width)}
-      </Text>
+      {nativePaneChrome && !wrap ? (
+        // The desktop cuts a long heading where its box ends, not at a count of columns.
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD} style={{ ...NATIVE_CLIP_STYLE, flex: "1 1 auto" }}>{text}</Text>
+      ) : (
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD} wrapText={wrap}>
+          {wrap || width === undefined ? text : truncateToDisplayWidth(text, width)}
+        </Text>
+      )}
     </Box>
   );
 }
@@ -70,6 +76,37 @@ export interface KeyValueRowProps {
  */
 export const NATIVE_CLIP_STYLE = { display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "pre" } as const;
 
+export interface ClippedTextProps {
+  text: string;
+  /** The terminal's room for the text, in cells. */
+  width: number;
+  fg?: string;
+  attributes?: number;
+  /** How the text sits in a row on the desktop: by default it gives way to its siblings. */
+  flex?: string;
+  /** Kept whole before the text in both renderers (an indent, a separator). */
+  lead?: string;
+  /** How the terminal cuts it; the caller's own cut keeps its frames as they were. */
+  cut?: (text: string, width: number) => string;
+  /** The desktop wraps it onto more lines instead (a message, a description); the terminal still cuts it. */
+  wrap?: boolean;
+}
+
+/**
+ * One line of text cut where its room ends: in the terminal at `width` cells,
+ * on the desktop and the web by CSS at its box's edge, or wrapped there with
+ * `wrap`. Its box (or its row, with the siblings that keep their room) has to
+ * bound it there.
+ */
+export function ClippedText({ text, width, fg, attributes, flex = "0 1 auto", lead = "", cut = truncateToDisplayWidth, wrap = false }: ClippedTextProps) {
+  const { nativePaneChrome } = useUiCapabilities();
+  const ink = { ...(fg === undefined ? {} : { fg }), ...(attributes === undefined ? {} : { attributes }) };
+  if (!nativePaneChrome) return <Text {...ink}>{`${lead}${cut(text, width)}`}</Text>;
+  return wrap
+    ? <Text {...ink} wrapText style={{ minWidth: 0, flex }}>{`${lead}${text}`}</Text>
+    : <Text {...ink} style={{ ...NATIVE_CLIP_STYLE, flex }}>{`${lead}${text}`}</Text>;
+}
+
 /** Aligned labels and values; a bounded row reserves room for an optional detail. */
 export function KeyValueRow(props: KeyValueRowProps) {
   const { nativePaneChrome } = useUiCapabilities();

package/src/components/ui/fill.ts

@@ -0,0 +1,8 @@
+/**
+ * Box props for what sits under a pane's header zone (tabs, query bar,
+ * figures) on the desktop and the web: it takes the space left in its column
+ * by flex and ends at the pane footer. The terminal counts the rows left
+ * instead; there a bar is one row, but on the desktop a chrome bar is taller
+ * than a row (`--chrome-h`), so a body given those rows overruns the pane.
+ */
+export const FILL_REST = { flexGrow: 1, flexShrink: 1, flexBasis: 0, minHeight: 0 } as const;

package/src/components/ui/index.ts

@@ -35,6 +35,8 @@ export { QueryBar, useQueryBarSearch } from "./query-bar";
 export { FieldGrid, GridFieldView, fieldGridColumns, fieldGridRows } from "./field-grid";
 export type { FieldGridProps, GridField } from "./field-grid";
 export { StatGrid, statGridColumns, statGridRows } from "./stat-grid";
+export { ColumnGrid, ColumnGridPair } from "./column-grid";
+export type { ColumnGridCell, ColumnGridColumn, ColumnGridPairProps, ColumnGridProps } from "./column-grid";
 export type { StatGridProps, StatItem } from "./stat-grid";
 export { RatioBar } from "./ratio-bar";
 export type { RatioBarProps } from "./ratio-bar";

package/src/layout-marketplace/gallery.tsx

@@ -11,8 +11,8 @@ import { useAppDispatch, useAppSelector } from "../state/app/context";
 import { useDialog, useDialogState, type PromptContext } from "../ui/dialog";
 import { useRendererHost, useUiCapabilities } from "../ui";
 import { apiClient, type TeamSummary } from "../api-client";
-import { requestAuthDialog } from "../plugins/builtin/cloud/auth-dialog";
-import { teamStore } from "../plugins/builtin/cloud/team/store";
+import { requestAuthDialog } from "../account/auth-dialog";
+import { teamStore } from "../team/store";
 import { usePlanAccess } from "../api-client/plan-access";
 import { getMarketplaceHost } from "../plugins/marketplace/store";
 import { rememberLayoutRequirements } from "../components/layout/missing-pane";

package/src/layout-marketplace/linked-sync.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import { apiClient } from "../api-client";
 import { rememberLayoutRequirements } from "../components/layout/missing-pane";
 import type { PluginRegistry } from "../plugins/registry";
-import { teamStore } from "../plugins/builtin/cloud/team/store";
+import { teamStore } from "../team/store";
 import { useAppDispatch, useAppSelector } from "../state/app/context";
 import { decideLinkedAction, linkedLayoutStatus, linkedLayoutUpdates, originFromEntry } from "./linked";
 import { materializeMarketplaceLayout } from "../shares/portable-layout";

package/src/market-data/market/freshness.ts

@@ -50,6 +50,7 @@ const REGULAR_OPEN_MINUTES: Record<string, number> = {
   FWB: 8 * 60,
   SWX: 9 * 60,
   VIE: 9 * 60,
+  WBDM: 9 * 60,
   OSL: 9 * 60,
   ICEX: 9 * 60 + 30,
   WSE: 9 * 60,
@@ -89,6 +90,8 @@ const REGULAR_CLOSE_MINUTES: Record<string, number> = {
   JPX: 15 * 60 + 30, HKEX: 16 * 60 + 10, TWSE: 14 * 60 + 30, TPEX: 14 * 60 + 30,
   NSE: 16 * 60, BSE: 16 * 60, ASX: 16 * 60 + 15, SGX: 17 * 60 + 20, KRX: 16 * 60, KOSDAQ: 16 * 60,
   NZX: 17 * 60, SSE: 15 * 60 + 30, SZSE: 15 * 60 + 30,
+  // The Vienna MTF's ETPs and notes trade in continuous auctions to 17:30, with no closing auction.
+  WBDM: 17 * 60 + 30,
   BMV: 15 * 60 + 10, B3: 18 * 60 + 30, BYMA: 17 * 60 + 10, JSE: 17 * 60 + 15,
   // Monday to Thursday: trading at last ends 17:30, after the closing auction.
   // Not later: a complete 5-minute copy ends with its 17:09 bar, which must

package/src/market-data/published-apac-sessions.ts

@@ -1,5 +1,5 @@
-// Published full-day closures (weekend dates omitted) for Asia-Pacific venues and EGX,
-// not a holiday-rule engine. A year a venue has not published is unknown, not
+// Published full-day closures (weekend dates omitted) for Asia-Pacific venues, EGX and Wiener
+// Boerse, not a holiday-rule engine. A year a venue has not published is unknown, not
 // open: every weekday of it reads as a session. Half-day sessions (HKEX and
 // SGX eves, ASX's 14:10 closes) are not modelled. Checked 2026-10-09:
 // KRX, also KOSDAQ: http://open.krx.co.kr/contents/MKD/01/0110/01100305/MKD01100305.jsp
@@ -9,6 +9,9 @@
 //   (some moved, as its list warns), and on National Day, 16 and 17 Dec. Its week is Sunday to Thursday.
 // HKEX: https://www.hkex.com.hk/-/media/HKEX-Market/Services/Circulars-and-Notices/Participant-and-Members-Circulars/SEHK/2025/ce_SEHK_CT_075_2025.pdf
 //   and https://www.hkex.com.hk/-/media/HKEX-Market/Services/Circulars-and-Notices/Participant-and-Members-Circulars/SEHK/2026/ce_SEHK_CT_077_2026.pdf
+// Wiener Boerse closes its main market (VIE) and the Vienna MTF (WBDM) on its stock exchange holidays,
+//   and trades on Austria's other public holidays:
+//   https://www.wienerborse.at/uploads/u/cms/files/trading/stock-exchange-holidays-2026-en.pdf (and -2027-en.pdf)
 // SGX closes on Singapore's gazetted public holidays, one on a Sunday moving to the Monday:
 //   https://www.sgx.com/stock-exchange/trading and https://www.mom.gov.sg/employment-practices/public-holidays
 // MSX closes on the holidays its site lists (msx.om exchange holidays, read 10 Oct 2026).
@@ -28,6 +31,11 @@ const KRX_CLOSURES: Record<number, readonly string[]> = {
   ],
 };
 
+const WIENER_BOERSE_CLOSURES: Record<number, readonly string[]> = {
+  2026: ["01-01", "04-03", "04-06", "05-01", "10-26", "12-24", "12-25", "12-31"],
+  2027: ["01-01", "03-26", "03-29", "10-26", "12-24", "12-31"],
+};
+
 const TWSE_CLOSURES: Record<number, readonly string[]> = {
   2026: [
     "01-01", "02-12", "02-13", "02-16", "02-17", "02-18", "02-19", "02-20", "02-27",
@@ -61,6 +69,8 @@ export const PUBLISHED_APAC_CLOSURES: Readonly<Record<string, Record<number, rea
     2026: ["01-01", "02-17", "02-18", "04-03", "05-01", "05-27", "06-01", "08-10", "11-09", "12-25"],
     2027: ["01-01", "02-08", "03-10", "03-26", "05-17", "05-20", "08-09", "10-28"],
   },
+  VIE: WIENER_BOERSE_CLOSURES,
+  WBDM: WIENER_BOERSE_CLOSURES,
   MSX: {
     2026: ["01-15", "01-18", "03-19", "03-22", "03-23", "05-26", "05-27", "05-28", "06-18", "08-27", "11-25", "11-26"],
   },

package/src/market-data/quotes/screener-live-quotes.ts

@@ -5,7 +5,7 @@ import { buildQuoteKey, resolveEntryData } from "../selectors";
 import type { QueryEntry } from "../result-types";
 import { resolveCurrencyUnit } from "../../utils/currency-units";
 import { isFiniteNumber } from "../../utils/guards";
-import { getCompletedRegularSessionDisplay, getTradedSessionMoveDisplay, type ExtendedSession } from "../market/status";
+import { getCompletedRegularSessionDisplay, getTradedSessionMoveDisplay, type ActiveQuoteDisplay, type ExtendedSession } from "../market/status";
 import { quoteTradingDay } from "./day-range";
 
 const STREAM_FRESHNESS_MS = 2 * 60_000;
@@ -172,15 +172,32 @@ function overlaySessionQuote<T extends ScreenerQuoteRow>(row: T, quote: Quote):
   };
 }
 
-function overlayRegularSessionQuote<T extends ScreenerQuoteRow>(row: T, quote: Quote, completedSessionDate: string | null): T {
+/** The regular session as a board reads it from one quote (getRegularSessionQuoteDisplay). */
+export type RegularSessionQuoteDisplay = ActiveQuoteDisplay & (
+  | { completed: false }
+  /** The completed session's close and move, and its date when the quote can say it. */
+  | { completed: true; closedSession: string | null }
+);
+
+/**
+ * What a board that headlines only the regular session reads from a quote
+ * (the `regularSession` overlay): the live quote while the session trades,
+ * then the completed session's close and its move. Null when the quote
+ * leaves the row as it was: outside the session without a close it can name,
+ * or, on a board of `completedSessionDate`, a quote that is no news for it.
+ */
+export function getRegularSessionQuoteDisplay(
+  quote: Quote,
+  completedSessionDate: string | null = null,
+): RegularSessionQuoteDisplay | null {
   const state = quote.marketState;
   if (state == null || state === "REGULAR") {
     // On a board of a completed session, only a session that trades after it is news.
     if (completedSessionDate) {
       const day = state === "REGULAR" ? quoteTradingDay(quote) : null;
-      if (day == null || day <= completedSessionDate) return row;
+      if (day == null || day <= completedSessionDate) return null;
     }
-    return overlayQuote(row, quote);
+    return { price: quote.price, change: quote.change, changePercent: quote.changePercent, completed: false };
   }
   const display = getCompletedRegularSessionDisplay(quote);
   const closeDate = quote.regularCloseSessionDate;
@@ -190,14 +207,21 @@ function overlayRegularSessionQuote<T extends ScreenerQuoteRow>(row: T, quote: Q
     || !isFiniteNumber(display.changePercent)
     || (completedSessionDate != null && closeDate != null && closeDate < completedSessionDate)
   ) {
-    return row;
+    return null;
   }
+  return { ...display, completed: true, closedSession: closeDate ?? quoteTradingDay(quote) };
+}
+
+function overlayRegularSessionQuote<T extends ScreenerQuoteRow>(row: T, quote: Quote, completedSessionDate: string | null): T {
+  const display = getRegularSessionQuoteDisplay(quote, completedSessionDate);
+  if (!display) return row;
+  if (!display.completed) return overlayQuote(row, quote);
   return {
     ...overlayQuote(row, quote),
     price: display.price,
     change: isFiniteNumber(display.change) ? display.change : null,
-    changePercent: display.changePercent,
-    regularChangePercent: display.changePercent,
+    changePercent: display.changePercent ?? null,
+    regularChangePercent: display.changePercent ?? null,
   };
 }
 

package/src/plugins/builtin/account-management/form-components.tsx

@@ -15,6 +15,7 @@ import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import type { SelectControl } from "../../../components/ui/select-button";
 import type { ProfileAnalyticsPreview } from "./model";
 import { t } from "../../../i18n";
+import { ClippedText } from "../../../components/ui/display";
 
 export function accountFieldLabelWidth(width: number) {
   const preferred = width >= 28 ? 16 : Math.max(10, Math.floor(width * 0.42));
@@ -132,16 +133,12 @@ export function PublicAnalyticsGroup({
           const valueWidth = Math.max(1, metricWidth - labelTextWidth - 1);
           return (
             <Box key={metric.id} width={metricWidth} height={1} flexDirection="row" gap={1}>
-              <Text fg={colors.textDim}>{truncateWithEllipsis(metric.label, labelTextWidth)}</Text>
-              <Text fg={metricColor(metric.tone)} attributes={TextAttributes.BOLD}>
-                {truncateWithEllipsis(metric.value, valueWidth)}
-              </Text>
+              <ClippedText fg={colors.textDim} text={metric.label} width={labelTextWidth} cut={truncateWithEllipsis} />
+              <ClippedText fg={metricColor(metric.tone)} attributes={TextAttributes.BOLD} text={metric.value} width={valueWidth} cut={truncateWithEllipsis} />
             </Box>
           );
         }) : detail ? (
-          <Text fg={colors.textMuted}>
-            {truncateWithEllipsis(detail, detailWidth)}
-          </Text>
+          <ClippedText fg={colors.textMuted} text={detail} width={detailWidth} cut={truncateWithEllipsis} />
         ) : null}
       </Box>
       {metrics.length === 0 && displayPreview.subtitle ? (

package/src/plugins/builtin/account-management/password-dialog.tsx

@@ -1,13 +1,14 @@
 import { useCallback, useState } from "react";
 import { Button, TextField } from "../../../components";
 import { DialogFrame } from "../../../components/ui/frame";
-import { Box, Text } from "../../../ui";
+import { Box } from "../../../ui";
 import { useDialogKeyboard, type AlertContext } from "../../../ui/dialog";
 import { colors } from "../../../theme/colors";
 import { isPlainKey } from "../../../utils/keyboard";
 import { truncateWithEllipsis } from "../../../utils/text-wrap";
 import { t } from "../../../i18n";
 import { MIN_ACCOUNT_PASSWORD_LENGTH } from "../../../account/auth-model";
+import { ClippedText } from "../../../components/ui/display";
 
 type PasswordDialogField = "current" | "new" | "confirm";
 
@@ -111,7 +112,7 @@ export function PasswordChangeDialog({
           onChange={setConfirmPassword}
           onSubmit={() => { void submit(); }}
         />
-        {error ? <Text fg={colors.negative}>{truncateWithEllipsis(error, fieldWidth)}</Text> : null}
+        {error ? <ClippedText fg={colors.negative} text={error} width={fieldWidth} cut={truncateWithEllipsis} wrap /> : null}
         <Box flexDirection="row" justifyContent="flex-end">
           <Button
             label={submitting ? t("Changing...") : t("Update Password")}

package/src/plugins/builtin/backtest/pane.tsx

@@ -22,7 +22,8 @@ import { usePaneRefreshKey } from "../../../components/data-table/table-pane";
 import { usePaneInstanceId, usePaneSettingValue, usePluginAppActions, usePluginPaneState } from "../../../public/react";
 import { useThemeColors } from "../../../theme/theme-context";
 import type { PaneProps } from "../../../types/plugin";
-import { Box } from "../../../ui";
+import { Box, useUiCapabilities } from "../../../ui";
+import { FILL_REST } from "../../../components/ui/fill";
 import { useAutoRefresh } from "../../../react/auto-refresh";
 import { loadBacktestHistory } from "./client";
 import { runBacktest, type BacktestResult, type BacktestTrade } from "./engine";
@@ -146,6 +147,7 @@ export function BacktestPane({ width, height, focused }: PaneProps) {
   }), [history.loading, result, view, paneId, symbol]);
 
   const { strip: tabStrip, rows: tabRows } = usePaneTabs(symbol ? { tabs: TABS, activeValue: view, onSelect: setView, focused, dense: true } : null);
+  const { nativePaneChrome } = useUiCapabilities();
   if (!symbol) return <EmptyState title="Select a ticker." hint="Open BT with a symbol, for example BT AAPL." />;
   const bodyHeight = Math.max(4, height - 1 - tabRows);
   const wide = width - SUMMARY_WIDTH - 1 >= MIN_WIDE_CHART_COLS;
@@ -187,7 +189,9 @@ export function BacktestPane({ width, height, focused }: PaneProps) {
     />
   );
   return (
-    <Box width={width} height={height} flexDirection="column">
+    // On the desktop the pane's box fills the pane by flex, so what fills it
+    // follows the pane's frame by CSS, the chart beside the metrics too.
+    <Box width={width} flexDirection="column" {...(nativePaneChrome ? FILL_REST : { height })}>
       {tabStrip}
       <QueryBar
         width={width}
@@ -242,7 +246,9 @@ export function BacktestPane({ width, height, focused }: PaneProps) {
             emptyStateTitle="No trades in this window."
           />
         ) : wide ? (
-          <Box flexDirection="row" width={width} height={bodyHeight}>
+          // The desktop's query bar is taller than a row: the chart and the
+          // metrics take what is left under it, down to the pane footer.
+          <Box flexDirection="row" width={width} {...(nativePaneChrome ? FILL_REST : { height: bodyHeight })}>
             {chart(width - SUMMARY_WIDTH - 1, bodyHeight)}
             <Box width={1} />
             {summaryTable(SUMMARY_WIDTH, bodyHeight)}

package/src/plugins/builtin/buildout/detail/company.tsx

@@ -1,11 +1,12 @@
 import { Section, TickerBadgeList } from "../../../../components";
+import { ClippedText } from "../../../../components/ui/display";
 import { formatMarketPriceWithCurrency, liveQuoteFormatOptions } from "../../../../market-data/market/format";
 import { useInlineTickerQuote } from "../../../../state/hooks/inline-tickers";
 import { useTickerQuoteStream } from "../../../../state/hooks/live-ticker-financials";
 import { colors } from "../../../../theme/colors";
 import type { Quote } from "../../../../types/financials";
 import type { TickerRecord } from "../../../../types/ticker";
-import { Box, Text } from "../../../../ui";
+import { Box } from "../../../../ui";
 import { formatCompact } from "../../../../utils/format";
 import { truncateWithEllipsis } from "../../../../utils/text-wrap";
 import { activityLabel, criticalityColor, dateShort, metricColor, metricNumber, textOrNull, tickerSymbol } from "../format";
@@ -249,7 +250,7 @@ export function CompanyDetail({
             ].filter(Boolean);
             return (
               <Box key={`${site.name}-${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
-                <Text fg={colors.textMuted}>{truncateWithEllipsis(parts.join(" - "), bodyWidth)}</Text>
+                <ClippedText fg={colors.textMuted} text={parts.join(" - ")} width={bodyWidth} cut={truncateWithEllipsis} />
                 {site.involvementSummary ? (
                   <MarkdownBlock text={site.involvementSummary} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
                 ) : null}
@@ -262,7 +263,7 @@ export function CompanyDetail({
         <Section title="Recent Intel" width={bodyWidth}>
           {company.intelligence!.slice(0, 5).map((item, index) => (
             <Box key={`${item.headline ?? "intel"}:${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
-              <Text fg={colors.textDim}>{truncateWithEllipsis(`${dateShort(item.publishedAt)} ${item.headline ?? ""}`, bodyWidth)}</Text>
+              <ClippedText fg={colors.textDim} text={`${dateShort(item.publishedAt)} ${item.headline ?? ""}`} width={bodyWidth} cut={truncateWithEllipsis} />
               <MarkdownBlock text={item.content} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
             </Box>
           ))}