@gloom-sh/terminal 0.19.1 → 0.19.3

package/src/components/onboarding/wizard-model.ts

@@ -19,9 +19,63 @@ const LEGACY_STAGES: Partial<Record<OnboardingStage, OnboardingStage>> = {
 };
 
 export function getOnboardingProgress(config: AppConfig): OnboardingProgress {
-  const progress = config.onboardingProgress ?? { version: 1, stage: "portfolio" };
-  const stage = LEGACY_STAGES[progress.stage];
-  return stage ? { ...progress, stage } : progress;
+  const saved = config.onboardingProgress ?? { version: 1, stage: "portfolio" };
+  const legacy = LEGACY_STAGES[saved.stage];
+  const progress = legacy ? { ...saved, stage: legacy } : saved;
+  // Older builds sent Back from Gloom Cloud to the portfolio after the
+  // workspace was built; such a profile resumes on the workspace.
+  return isOnboardingStageFinished(progress, progress.stage) ? { ...progress, stage: "research" } : progress;
+}
+
+/** Stages the wizard reaches only once the workspace is built. */
+const WORKSPACE_STAGES: ReadonlySet<OnboardingStage> = new Set(["research", "account", "upgrade", "ready"]);
+
+/**
+ * Whether the workspace is built around a holding: the portfolio and desk
+ * steps are finished. Older builds saved no desks, so a later stage with a
+ * holding counts too.
+ */
+export function isOnboardingWorkspaceBuilt(progress: OnboardingProgress): boolean {
+  return !!progress.tickerSymbol && (Array.isArray(progress.desks) || WORKSPACE_STAGES.has(progress.stage));
+}
+
+/**
+ * A step that is done for good: the portfolio and desk steps once the
+ * workspace is built (building twice would add every desk twice), and Pro
+ * for an account that has it. The wizard shows them as done and never asks
+ * them again.
+ */
+function isOnboardingStageFinished(progress: OnboardingProgress, stage: OnboardingStage, pro = false): boolean {
+  if (stage === "upgrade") return pro;
+  return (stage === "portfolio" || stage === "desks") && isOnboardingWorkspaceBuilt(progress);
+}
+
+/**
+ * Where Back (and Esc) goes: the step the user came from, passing over any
+ * that is finished for good (`pro`: the account has Pro). With no way back
+ * recorded (the app restarted on this step), the step before it in the
+ * flow. `visited` is the stages the user came through, oldest first; what
+ * comes back is what is left of it. Null when the step has no way back.
+ */
+export function previousOnboardingStage(
+  progress: OnboardingProgress,
+  visited: readonly OnboardingStage[],
+  { pro = false }: { pro?: boolean } = {},
+): { stage: OnboardingStage; visited: OnboardingStage[] } | null {
+  for (let index = visited.length - 1; index >= 0; index -= 1) {
+    const stage = visited[index]!;
+    if (stage !== progress.stage && !isOnboardingStageFinished(progress, stage, pro)) {
+      return { stage, visited: visited.slice(0, index) };
+    }
+  }
+  const stage: OnboardingStage | null = progress.stage === "account"
+    ? isOnboardingWorkspaceBuilt(progress) ? "research" : "portfolio"
+    : progress.stage === "upgrade"
+      ? "account"
+      : progress.stage === "ready"
+        ? progress.accountStatus === "signed-in" && !pro ? "upgrade" : "account"
+        : null;
+  return stage ? { stage, visited: [] } : null;
 }
 
 export function withOnboardingProgress(

package/src/components/onboarding/wizard-positions.ts

@@ -302,7 +302,7 @@ export function useOnboardingPositions({
         const costBasis = avgCost ?? result.quote?.price;
         if (costBasis === undefined || costBasis === null || !Number.isFinite(costBasis)) {
           setFieldIdx(2);
-          setError(t("No live price yet. Enter the average cost."));
+          setError(t("No price yet. Enter the average cost."));
           return false;
         }
         // A future is entered in contracts, sized by its terms; a cost typed as corn is quoted counts cents.

package/src/components/ui/delayed-mark.tsx

@@ -0,0 +1,56 @@
+import { Box, Text, useUiCapabilities } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+import { tf } from "../../i18n";
+import { displayWidth } from "../../utils/format";
+import { ICON_GLYPHS, Icon } from "./icon";
+
+/** The terminal's form of the mark: the clock and the delay, as the pane footer draws it (`◷15m`). */
+function delayedMarkText(minutes: number): string {
+  return `${ICON_GLYPHS.clock}${minutes}m`;
+}
+
+/** The delay the mark spells out after its clock: `15m`. */
+function delayedMarkDelay(minutes: number): string {
+  return `${minutes}m`;
+}
+
+/**
+ * Cells the mark takes: `◷15m` in the terminal; on the desktop and the web the
+ * clock icon and its gap (12px and 4px, three cells at the narrowest cell) and `15m`.
+ */
+export function delayedMarkWidth(minutes: number, nativePaneChrome: boolean): number {
+  return nativePaneChrome ? 3 + displayWidth(delayedMarkDelay(minutes)) : displayWidth(delayedMarkText(minutes));
+}
+
+/**
+ * The one mark for a price shown late, beside the price: what the pane
+ * footer's clock is for a pane's data (`delayedFooterSegment`), for a price
+ * outside a footer (the header's SPY, the status bar, a quote's headline).
+ * It reads without hovering: a yellow clock and the delay (`15m`) in the dim
+ * tone of the meta text around it on the desktop and the web, `◷15m` in the
+ * terminal, with `15m delayed` in its tooltip. Callers decide when a price is
+ * late with `freeQuoteDelayMinutes` (or `useFreeQuoteDelay`); it draws nothing else.
+ */
+export function DelayedMark({ minutes }: { minutes: number }) {
+  const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
+  const detail = tf("{delay} delayed", { delay: `${minutes}m` });
+  if (!nativePaneChrome) {
+    return <Text fg={colors.warning} flexShrink={0} selectable={false} aria-label={detail}>{delayedMarkText(minutes)}</Text>;
+  }
+  return (
+    <Box
+      role="img"
+      aria-label={detail}
+      title={detail}
+      flexShrink={0}
+      flexDirection="row"
+      alignItems="center"
+      data-gloom-role="delayed-mark"
+      style={{ gap: "var(--gloom-space-xs)" }}
+    >
+      <Icon name="clock" color={colors.warning} />
+      <Text fg={colors.textDim} selectable={false}>{delayedMarkDelay(minutes)}</Text>
+    </Box>
+  );
+}

package/src/components/ui/display.tsx

@@ -214,8 +214,18 @@ export interface BadgeProps {
 export const NATIVE_BADGE_STYLE = { height: "calc(100% - 2px)", borderRadius: "var(--gloom-radius-sm)" };
 /** How far a subtle chip's fill is tinted toward its tone. */
 export const BADGE_TINT = 0.28;
-const NATIVE_BADGE_TEXT_STYLE = { fontWeight: "var(--gloom-weight-regular)" };
 const NATIVE_ICON_BADGE_STYLE = { ...NATIVE_BADGE_STYLE, gap: "var(--gloom-space-xs)" };
+const NATIVE_BADGE_TEXT_STYLE = { fontWeight: "var(--gloom-weight-regular)" };
+/**
+ * A label with lowercase letters has them in the middle of the chip,
+ * wherever the font puts them in its line: the line is cut to x-height and
+ * baseline, and that is what the chip centres. Centred whole, SF Mono's
+ * lowercase sit a pixel and a half low. An icon centres in the chip, so it
+ * reads on the letters' line. A label in capitals and digits keeps the
+ * whole line, as ticker chips do; a browser without `text-box` keeps it too.
+ */
+const NATIVE_LOWERCASE_BADGE_TEXT_STYLE = { ...NATIVE_BADGE_TEXT_STYLE, textBox: "trim-both ex alphabetic" };
+const LOWERCASE = /\p{Ll}/u;
 
 export function Badge({ label, tone = "neutral", color, variant = "subtle", icon, translate = true }: BadgeProps) {
   const colors = useThemeColors();
@@ -233,11 +243,12 @@ export function Badge({ label, tone = "neutral", color, variant = "subtle", icon
   const chip = (
     <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={background}
       data-gloom-ui="badge" {...(nativeIcon ? { flexDirection: "row", alignItems: "center" } as const : {})}
-      justifyContent={nativePaneChrome && !icon ? "center" : undefined}
-      style={nativePaneChrome ? icon ? NATIVE_ICON_BADGE_STYLE : NATIVE_BADGE_STYLE : undefined}>
-      {nativeIcon ? <Icon name={nativeIcon} color={foreground} /> : null}
+      justifyContent={nativePaneChrome && !nativeIcon ? "center" : undefined}
+      style={nativePaneChrome ? nativeIcon ? NATIVE_ICON_BADGE_STYLE : NATIVE_BADGE_STYLE : undefined}>
+      {nativeIcon ? <Icon name={nativeIcon} color={foreground} fullHeight /> : null}
       {shown || !nativeIcon ? (
-        <Text fg={foreground} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{shown}</Text>
+        <Text fg={foreground} attributes={TextAttributes.BOLD}
+          style={nativePaneChrome ? LOWERCASE.test(text) ? NATIVE_LOWERCASE_BADGE_TEXT_STYLE : NATIVE_BADGE_TEXT_STYLE : undefined}>{shown}</Text>
       ) : null}
     </Box>
   );

package/src/components/ui/external-link.tsx

@@ -3,7 +3,7 @@ import { Box, Text } from "../../ui";
 import { TextAttributes } from "../../ui";
 import { tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
-import { safeExternalUrl } from "../../utils/external-url";
+import { safeExternalUrl, systemOpenCommand } from "../../utils/external-url";
 import { linkContextMenuItems, useContextMenu, useRendererHost, useUiCapabilities } from "../../ui";
 import type { ContextMenuItem } from "../../types/context-menu";
 import { usePaneMenuItems } from "../layout/pane/footer/registration";
@@ -20,11 +20,8 @@ export function openUrl(rawUrl: string) {
 
   if (typeof Bun !== "undefined" && typeof Bun.spawn === "function") {
     const platform = typeof process !== "undefined" ? process.platform : "linux";
-    const command = platform === "darwin"
-      ? ["open", url]
-      : platform === "win32"
-        ? ["cmd", "/c", "start", "", url]
-        : ["xdg-open", url];
+    const command = systemOpenCommand(url, platform);
+    if (!command) return;
     // Spawning throws when the opener is not installed (no xdg-open on
     // minimal Linux and WSL); a link that does nothing beats a crash.
     try {

package/src/components/ui/icon.tsx

@@ -94,13 +94,19 @@ export interface IconProps {
   /** Pixel size on the desktop; the terminal draws one glyph. */
   size?: number;
   color?: string;
+  /**
+   * Desktop: takes its row's full height and draws in the middle of it. A
+   * box centred in a row an odd number of pixels taller lands on a whole
+   * pixel, half a pixel off; the drawing inside the box does not.
+   */
+  fullHeight?: boolean;
 }
 
 /** One glyph from the app's icon set. */
-export function Icon({ name, size = 12, color }: IconProps) {
+export function Icon({ name, size = 12, color, fullHeight }: IconProps) {
   const colors = useThemeColors();
   const HostIcon = useUiHost().Icon as ComponentType<IconProps> | undefined;
-  if (HostIcon) return <HostIcon name={name} size={size} color={color} />;
+  if (HostIcon) return <HostIcon name={name} size={size} color={color} fullHeight={fullHeight} />;
   return <Text fg={color ?? colors.textDim} selectable={false}>{ICON_GLYPHS[name]}</Text>;
 }
 
@@ -132,6 +138,11 @@ export interface IconButtonProps {
   size?: number;
   /** Keep the press from also reaching a row or header behind the button. */
   stopPropagation?: boolean;
+  /**
+   * A few characters after the icon, in a muted tone, for a status that must
+   * read without hovering (a delay's `15m`). The label stays the accessible name.
+   */
+  text?: string;
 }
 
 /**
@@ -151,6 +162,7 @@ export function IconButton({
   disabled = false,
   size = 12,
   stopPropagation = true,
+  text,
 }: IconButtonProps) {
   const colors = useThemeColors();
   const label = t(rawLabel);
@@ -176,6 +188,7 @@ export function IconButton({
         disabled={disabled}
         size={size}
         stopPropagation={stopPropagation}
+        text={text}
       />
     );
   }
@@ -195,7 +208,7 @@ export function IconButton({
     >
       {/* Pressed takes the colour the desktop and the terminal pane header give an active toggle. */}
       <Text fg={disabled ? colors.textMuted : color ?? (pressed ? colors.warning : colors.textDim)} selectable={false}>
-        {` ${ICON_GLYPHS[icon]} `}
+        {` ${ICON_GLYPHS[icon]}${text ?? ""} `}
       </Text>
     </Box>
   );

package/src/components/ui/logo-mark.tsx

@@ -23,15 +23,16 @@ const LETTER_STYLE: Record<LogoMarkSize, CSSProperties> = {
 };
 
 export interface LogoMarkProps {
-  /** The logo, an image URL; without one, or when it fails to load, the tile shows `name`'s initial. */
+  /** The logo, an image URL; without one, while it loads and when it fails to load, the tile shows `name`'s initial. */
   src?: string | null;
   /** What the logo stands for, such as a broker. Only its initial is drawn; the label beside it names it. */
   name: string;
   size?: LogoMarkSize;
   /**
-   * Draws the logo on a white plate. Company and coin logos are made for a
-   * light page: a black mark on a clear field (XRP's) would vanish on a dark
-   * theme, while a logo that fills its square covers the plate.
+   * Draws the logo on a white plate once it has loaded, never behind the
+   * initial. Company and coin logos are made for a light page: a black mark
+   * on a clear field (XRP's) would vanish on a dark theme, while a logo that
+   * fills its square covers the plate.
    */
   plate?: boolean;
 }
@@ -59,9 +60,11 @@ export function LogoMark({ src, name, size = "row", plate = false }: LogoMarkPro
       src={src ?? undefined}
       alt=""
       objectFit="cover"
+      fallbackWhileLoading
+      imageBackground={plate ? LOGO_PLATE : undefined}
       aria-hidden="true"
       data-gloom-role="logo-mark"
-      style={{ width: tile.side, height: tile.side, flexShrink: 0, borderRadius: tile.radius, ...(plate ? { background: LOGO_PLATE } : {}) }}
+      style={{ width: tile.side, height: tile.side, flexShrink: 0, borderRadius: tile.radius }}
     >
       <Box width="100%" height="100%" alignItems="center" justifyContent="center" backgroundColor={colors.border}>
         <Text fg={colors.textBright} attributes={TextAttributes.BOLD} style={LETTER_STYLE[size]}>

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

@@ -2,7 +2,7 @@ import { t } from "../../i18n";
 import type { ThemeColors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
-import { displayWidth, truncateToDisplayWidth } from "../../utils/format";
+import { clipToDisplayWidth, displayWidth, padTo, truncateToDisplayWidth } from "../../utils/format";
 import { SplitBar, type SplitBarPart } from "./split-bar";
 
 export type StatTone = "neutral" | "positive" | "negative" | "warning" | "accent" | "muted";
@@ -49,6 +49,13 @@ export interface StatGridProps {
   width: number;
   /** Fixed column count; by default as many as the widest item allows, up to 4, balanced over the rows. */
   columns?: number;
+  /**
+   * The most lines the grid takes. A whole-row cell too narrow for its value
+   * and detail wraps onto a second line, the detail under the value; with
+   * `maxLines` only the leading such cells the lines leave room for do, and
+   * the rest keep one line, cut (`statGridRows` counts the same).
+   */
+  maxLines?: number;
 }
 
 const MAX_COLUMNS = 4;
@@ -102,9 +109,207 @@ function layoutRows(items: StatItem[], columns: number): StatItem[][] {
   return rows;
 }
 
-/** Rows a StatGrid takes, so panes can size what sits below it. */
-export function statGridRows(items: StatItem[], width: number, columns?: number): number {
-  return layoutRows(items, Math.max(1, columns ?? statGridColumns(items, width))).length;
+/** What a grid's cells share: the label column, the inner width and one cell's width, in terminal cells. */
+function gridGeometry(items: StatItem[], width: number, columns: number, nativePaneChrome: boolean) {
+  const labels = labelChars(items);
+  const innerWidth = Math.max(1, width - (nativePaneChrome ? 0 : 2));
+  const cellWidth = Math.max(8, Math.floor((innerWidth - CELL_GAP * (columns - 1)) / columns));
+  const widestValue = Math.max(0, ...items.filter((item) => !item.wide).map((item) => displayWidth(item.value)));
+  return { labels, innerWidth, cellWidth, widestValue };
+}
+
+/**
+ * The label's column in a cell `width` wide: it grows into what the grid's
+ * widest value leaves, and never gets less than half the cell, so one long
+ * value cannot cut every label in a grid with a fixed column count.
+ */
+function cellLabelWidth(width: number, labels: number, widestValue: number): number {
+  return Math.min(labels + 1, Math.max(4, Math.floor(width * 0.5), width - widestValue - 1));
+}
+
+/** Cells a split bar takes after a value that leaves `room` in its column; none when too few to read. */
+function splitBarCells(room: number): number {
+  return room >= 4 ? Math.min(SPLIT_BAR_CELLS, room) : 0;
+}
+
+const MONTH = "(?:Jan(?:uary)?|Feb(?:ruary)?|Mar(?:ch)?|Apr(?:il)?|May|June?|July?|Aug(?:ust)?|Sep(?:t(?:ember)?)?|Oct(?:ober)?|Nov(?:ember)?|Dec(?:ember)?)\\.?";
+/** A date, time or day count in a cell: `2026-10-29`, `18:00`, `Dec 9`, `30 Sep`, `Dec '26`, `2026`, `in 40 days`, `3d ago`. */
+const DATED = new RegExp([
+  "\\d{4}-\\d{2}",
+  "\\b\\d{1,2}:\\d{2}\\b",
+  `\\b${MONTH} (?:'\\d{2}|\\d{1,4})\\b`,
+  `\\b\\d{1,2} ${MONTH}(?![a-z])`,
+  "\\b(?:19|20)\\d{2}\\b",
+  "\\bin \\d+ ?(?:d|days?|wks?|weeks?|mo|months?)\\b",
+  "\\b\\d+ ?(?:d|h|m|min|days?|hours?) ago\\b",
+].join("|"));
+
+/** `text` cut to `room` after its last whole word that fits, behind a `…`; mid-word only when its first word does not fit. */
+function clipWords(text: string, room: number): string {
+  if (displayWidth(text) <= room) return text;
+  const words = text.split(" ");
+  for (let count = words.length - 1; count > 0; count--) {
+    const kept = `${words.slice(0, count).join(" ")}…`;
+    if (displayWidth(kept) <= room) return kept;
+  }
+  return clipToDisplayWidth(text, room);
+}
+
+/**
+ * `text` cut to `width` without cutting a date: its ` · ` parts that have none
+ * give way first, from the last, cut short at a word and then to a `…` that
+ * says something is left out; then the words before a part's date
+ * (`1,561,837 shares… 16:02:15.123`). Only dates too wide for the width are
+ * cut at their end.
+ */
+function cutKeepingDates(text: string, width: number): string {
+  const parts = text.split(" · ");
+  const joined = () => parts.join(" · ");
+  const roomFor = (index: number) => width - (displayWidth(joined()) - displayWidth(parts[index]!));
+  for (let index = parts.length - 1; index >= 0 && displayWidth(joined()) > width; index--) {
+    const part = parts[index]!;
+    if (DATED.test(part)) continue;
+    const room = roomFor(index);
+    if (room >= 4) parts[index] = clipWords(part, room);
+    else if (parts[index + 1] !== "…" && part !== "…") parts[index] = "…";
+    else parts.splice(index, 1);
+  }
+  for (let index = parts.length - 1; index >= 0 && displayWidth(joined()) > width; index--) {
+    const part = parts[index]!;
+    const at = part.search(DATED);
+    if (at <= 0) continue;
+    const date = part.slice(at);
+    const room = roomFor(index) - displayWidth(date) - 1;
+    parts[index] = room >= 4 ? `${clipWords(part.slice(0, at).trimEnd(), room)} ${date}` : date;
+  }
+  return truncateToDisplayWidth(joined(), width);
+}
+
+/**
+ * `text` on at most two lines no wider than `width`: broken after the ` · `
+ * parts that fit the first, else at its last space that does; the second line
+ * is cut where it has no date (cutKeepingDates).
+ */
+function twoLines(text: string, width: number): string[] {
+  const parts = text.split(" · ");
+  let first = "";
+  let taken = 0;
+  for (; taken < parts.length; taken++) {
+    const next = first ? `${first} · ${parts[taken]}` : parts[taken]!;
+    if (displayWidth(next) > width) break;
+    first = next;
+  }
+  let rest = parts.slice(taken).join(" · ");
+  if (!first) {
+    // The first part alone is wider than a line: it breaks at a space, or is cut.
+    const words = parts[0]!.split(" ");
+    let count = 0;
+    while (count < words.length && displayWidth(words.slice(0, count + 1).join(" ")) <= width) count++;
+    first = count ? words.slice(0, count).join(" ") : truncateToDisplayWidth(words[0]!, width);
+    rest = [words.slice(Math.max(1, count)).join(" "), ...parts.slice(1)].filter(Boolean).join(" · ");
+  }
+  return rest ? [first, cutKeepingDates(rest, width)] : [first];
+}
+
+/** A whole-row cell on its two lines (wrapStatCell). */
+interface WrappedStatCell {
+  /** The value: one line, or both when it is wider than its column and the detail gives way. */
+  value: string[];
+  /** Cells of the split bar after the value on the first line; 0 for none. */
+  bar: number;
+  /** The detail on the second line, or null. */
+  detail: string | null;
+}
+
+/** Lines a wrapped cell takes: its value, then its detail. */
+const WRAPPED_CELL_LINES = 2;
+
+/**
+ * A whole-row cell (a `wide` item, or any cell of a one-column grid) that does
+ * not fit one line, on two: the value and its split bar on the first, and the
+ * detail on the second, in the longest form that fits, else cut where it has
+ * no date. A value wider than its column takes both lines, its bar after the
+ * first where it has room, when the detail can go (there is none, the pane
+ * offers an empty form, or it has no date); with a dated detail the value is
+ * cut instead, as a date is never what gives way.
+ * Null when the cell fits one line as it is, with the detail form that fits
+ * beside the value (an empty form counts: the pane chose to show none). Worked
+ * out in terminal cells for both renderers, so the grid's rows are the same
+ * count on each.
+ */
+function wrapStatCell(item: StatItem, width: number, labelWidth: number): WrappedStatCell | null {
+  const valueWidth = Math.max(1, width - labelWidth);
+  const valueCells = displayWidth(item.value);
+  const forms = item.detail ? [item.detail, ...(item.detailVariants ?? [])] : [];
+  const shown = forms.filter(Boolean);
+  const detailLine = () => shown.find((form) => displayWidth(form) <= valueWidth) ?? cutKeepingDates(shown.at(-1)!, valueWidth);
+  if (valueCells <= valueWidth) {
+    const bar = item.split ? splitBarCells(valueWidth - valueCells - 1) : 0;
+    const detailRoom = valueWidth - valueCells - (bar ? bar + 1 : 0) - 2;
+    const shortest = sizingDetail(item);
+    if (!shortest || (detailRoom > 1 && displayWidth(shortest) <= detailRoom)) return null;
+    return { value: [item.value], bar, detail: detailLine() };
+  }
+  const detailCanGo = shown.length === 0 || shown.length < forms.length || !shown.some((form) => DATED.test(form));
+  if (detailCanGo) {
+    const value = twoLines(item.value, valueWidth);
+    return { value, bar: item.split ? splitBarCells(valueWidth - displayWidth(value[0]!) - 1) : 0, detail: null };
+  }
+  return { value: [cutKeepingDates(item.value, valueWidth)], bar: 0, detail: detailLine() };
+}
+
+/** A laid-out row's one cell, wrapped, when it spans the row and does not fit one line (wrapStatCell). */
+function wrappedRow(row: StatItem[], columns: number, geometry: ReturnType<typeof gridGeometry>): WrappedStatCell | null {
+  const item = row[0];
+  if (!item || row.length > 1 || (!item.wide && columns > 1)) return null;
+  const width = item.wide ? geometry.innerWidth : geometry.cellWidth;
+  return wrapStatCell(item, width, cellLabelWidth(width, geometry.labels, geometry.widestValue));
+}
+
+/**
+ * The grid's rows and which of them wrap: every whole-row cell too narrow for
+ * one line, in order, while the grid stays within `maxLines`; past that a cell
+ * keeps its one line, cut. Decided in terminal cells on both renderers, so a
+ * pane sizes the same rows on each.
+ */
+function planStatGrid(items: StatItem[], width: number, columns: number, maxLines = Number.POSITIVE_INFINITY) {
+  const rows = layoutRows(items, columns);
+  const geometry = gridGeometry(items, width, columns, false);
+  let spare = maxLines - rows.length;
+  const wrapped = rows.map((row) => {
+    if (spare < WRAPPED_CELL_LINES - 1) return null;
+    const cell = wrappedRow(row, columns, geometry);
+    if (cell) spare -= WRAPPED_CELL_LINES - 1;
+    return cell;
+  });
+  const lines = rows.length + wrapped.filter(Boolean).length * (WRAPPED_CELL_LINES - 1);
+  return { rows, wrapped, lines };
+}
+
+/**
+ * Rows a StatGrid takes, so panes can size what sits below it: a whole-row
+ * cell that wraps counts both its lines. With `maxLines`, the grid drawn with
+ * the same `maxLines`.
+ */
+export function statGridRows(items: StatItem[], width: number, columns?: number, { maxLines }: { maxLines?: number } = {}): number {
+  return planStatGrid(items, width, Math.max(1, columns ?? statGridColumns(items, width)), maxLines).lines;
+}
+
+/**
+ * The leading items that fit a band of `maxLines`, in whole rows: as many rows
+ * as there are lines, and the rows they leave for a whole-row cell to wrap
+ * into (`maxLines` on the grid, which `lines` counts).
+ */
+export function statGridWithin(items: StatItem[], width: number, maxLines: number, columns?: number): { items: StatItem[]; lines: number } {
+  if (maxLines < 1 || items.length === 0) return { items: [], lines: 0 };
+  const resolved = Math.max(1, columns ?? statGridColumns(items, width));
+  const shown = layoutRows(items, resolved).slice(0, maxLines).flat();
+  return { items: shown, lines: statGridRows(shown, width, resolved, { maxLines }) };
+}
+
+/** A label in its column, cut and padded by terminal cells, so a wide character keeps the values aligned. */
+function labelText(label: string, labelWidth: number): string {
+  return padTo(truncateToDisplayWidth(label, labelWidth - 1), labelWidth);
 }
 
 /**
@@ -114,16 +319,13 @@ export function statGridRows(items: StatItem[], width: number, columns?: number)
  * hairline-split cells, so the top of the pane reads as one piece of chrome;
  * the terminal draws aligned text columns.
  */
-export function StatGrid({ items, width, columns: columnsProp }: StatGridProps) {
+export function StatGrid({ items, width, columns: columnsProp, maxLines }: StatGridProps) {
   const colors = useThemeColors();
   const { nativePaneChrome } = useUiCapabilities();
   if (items.length === 0) return null;
   const columns = Math.max(1, columnsProp ?? statGridColumns(items, width));
-  const rows = layoutRows(items, columns);
-  const labels = labelChars(items);
-  const innerWidth = Math.max(1, width - (nativePaneChrome ? 0 : 2));
-  const cellWidth = Math.max(8, Math.floor((innerWidth - CELL_GAP * (columns - 1)) / columns));
-  const widestValue = Math.max(0, ...items.filter((item) => !item.wide).map((item) => displayWidth(item.value)));
+  const { rows, wrapped: wrapping, lines: lineCount } = planStatGrid(items, width, columns, maxLines);
+  const { labels, innerWidth, cellWidth, widestValue } = gridGeometry(items, width, columns, !!nativePaneChrome);
 
   const toneColor = (item: StatItem): string =>
     item.color || (statToneColor(item.tone, colors) ?? (nativePaneChrome ? colors.textBright : colors.text));
@@ -132,25 +334,66 @@ export function StatGrid({ items, width, columns: columnsProp }: StatGridProps)
     <Box
       flexDirection="column"
       paddingX={nativePaneChrome ? 0 : 1}
-      height={rows.length}
+      height={lineCount}
       flexShrink={0}
       data-gloom-role="stat-grid"
       style={nativePaneChrome ? { "--stat-label-w": `${labels}ch`, "--stat-columns": String(columns) } : undefined}
     >
-      {rows.map((row, rowIndex) => (
+      {rows.map((row, rowIndex) => {
+        const wrapped = wrapping[rowIndex];
+        if (wrapped) {
+          const item = row[0]!;
+          const label = t(item.label);
+          const width = item.wide ? innerWidth : cellWidth;
+          const labelWidth = cellLabelWidth(width, labels, widestValue);
+          const [firstValue, ...moreValue] = wrapped.value;
+          return (
+            <Box key={rowIndex} height={WRAPPED_CELL_LINES} flexDirection="row" data-gloom-role="stat-grid-row">
+              <Box
+                key={item.id ?? `${rowIndex}:0`}
+                width={nativePaneChrome ? undefined : width}
+                height={WRAPPED_CELL_LINES}
+                flexDirection="row"
+                overflow="hidden"
+                data-gloom-role="stat-grid-cell"
+                data-wide={item.wide ? "true" : undefined}
+                data-wrapped="true"
+                data-gloom-stat-id={item.id}
+              >
+                <Text fg={colors.textDim} data-gloom-role="stat-grid-label">
+                  {nativePaneChrome ? label : labelText(label, labelWidth)}
+                </Text>
+                <Box flexDirection="column" flexGrow={1} minWidth={0}>
+                  <Box height={1} flexDirection="row">
+                    <Text fg={toneColor(item)} attributes={TextAttributes.BOLD} data-gloom-role="stat-grid-value">{firstValue}</Text>
+                    {item.split && wrapped.bar ? (
+                      <Box marginLeft={nativePaneChrome ? 0 : 1} flexShrink={nativePaneChrome ? 1 : 0} style={nativePaneChrome ? { minWidth: 0 } : undefined}>
+                        <SplitBar parts={item.split} width={nativePaneChrome ? SPLIT_BAR_CELLS : wrapped.bar} />
+                      </Box>
+                    ) : null}
+                  </Box>
+                  {moreValue.map((line, index) => (
+                    <Text key={`value:${index}`} fg={toneColor(item)} attributes={TextAttributes.BOLD} data-gloom-role="stat-grid-value">{line}</Text>
+                  ))}
+                  {wrapped.detail != null ? (
+                    <Text fg={colors.textDim} data-gloom-role="stat-grid-detail">{wrapped.detail}</Text>
+                  ) : null}
+                </Box>
+              </Box>
+            </Box>
+          );
+        }
+        return (
         <Box key={rowIndex} height={1} flexDirection="row" gap={nativePaneChrome ? 0 : CELL_GAP} data-gloom-role="stat-grid-row">
           {row.map((item, index) => {
             const label = t(item.label);
             const width = item.wide ? innerWidth : cellWidth;
-            // The label grows into what the grid's widest value leaves, and
-            // never gets less than half the cell, so one long value cannot cut
-            // every label in a grid with a fixed column count.
-            const labelWidth = Math.min(labels + 1, Math.max(4, Math.floor(width * 0.5), width - widestValue - 1));
+            const labelWidth = cellLabelWidth(width, labels, widestValue);
             const valueWidth = Math.max(1, width - labelWidth);
             const value = nativePaneChrome ? item.value : truncateToDisplayWidth(item.value, valueWidth);
             // The bar shows only whole enough to read; the value never gives way to it.
             const barRoom = valueWidth - displayWidth(value) - 1;
-            const barCells = !item.split ? 0 : nativePaneChrome ? SPLIT_BAR_CELLS : barRoom >= 4 ? Math.min(SPLIT_BAR_CELLS, barRoom) : 0;
+            const barCells = !item.split ? 0 : nativePaneChrome ? SPLIT_BAR_CELLS : splitBarCells(barRoom);
             const detailWidth = valueWidth - displayWidth(value) - (barCells ? barCells + 1 : 0) - 2;
             // The desktop cell has no gap between cells: its label column, inset and gaps take the room
             // (measured short, as a cell is wider than a character, so a form that fits is never clipped).
@@ -177,7 +420,7 @@ export function StatGrid({ items, width, columns: columnsProp }: StatGridProps)
                   : undefined}
               >
                 <Text fg={colors.textDim} data-gloom-role="stat-grid-label">
-                  {nativePaneChrome ? label : truncateToDisplayWidth(label, labelWidth - 1).padEnd(labelWidth)}
+                  {nativePaneChrome ? label : labelText(label, labelWidth)}
                 </Text>
                 <Text fg={toneColor(item)} attributes={TextAttributes.BOLD} data-gloom-role="stat-grid-value">{value}</Text>
                 {item.split && barCells ? (
@@ -192,7 +435,8 @@ export function StatGrid({ items, width, columns: columnsProp }: StatGridProps)
             );
           })}
         </Box>
-      ))}
+        );
+      })}
     </Box>
   );
 }

package/src/core/app-services.ts

@@ -10,8 +10,17 @@ import { createAppRuntime } from "./app-runtime";
 
 export type AppServices = ReturnType<typeof createAppServices>;
 
-export function createAppServices({ config, plugins, externalPlugins }: AppServicesFactoryOptions) {
-  const persistence = new AppPersistence(join(config.dataDir, ".gloomberb-cache.db"));
+interface AppServicesOptions extends AppServicesFactoryOptions {
+  /**
+   * Runs where the user waits on it (the terminal, the desktop app), so no
+   * database statement waits on another program's lock (data/sqlite/access.ts).
+   * A command sets it to false and waits instead.
+   */
+  interactive?: boolean;
+}
+
+export function createAppServices({ config, plugins, externalPlugins, interactive = true }: AppServicesOptions) {
+  const persistence = new AppPersistence(join(config.dataDir, ".gloomberb-cache.db"), { interactive });
   const tickerRepository = new TickerRepository(persistence.tickers);
   const providerRouter = new AssetDataRouter(null, [], persistence.resources, connectionHealth);
   const runtime = createAppRuntime({