gloomberb 0.15.2 → 0.15.4

package/src/components/ui/field-ring.ts

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useMemo, useRef, type RefObject } from "react";
+import { useShortcut } from "../../react/input";
+import type { BoxRenderable, ScrollBoxRenderable } from "../../ui";
+import { isPlainKey } from "../../utils/keyboard";
+import { afterLayout, revealInScrollBox } from "./reveal-in-scroll-box";
+
+export interface FieldRingOptions<Id extends string> {
+  /** The fields in Tab order. */
+  ids: readonly Id[];
+  activeId: Id | null;
+  onActivate: (id: Id) => void;
+  /** Keys reach the ring only while this is true, e.g. while the pane has focus. */
+  enabled: boolean;
+  /**
+   * Shortcut scope, shared with the form's own keys. The ring runs in the
+   * "before" phase, so it sees Tab ahead of the app's pane cycling.
+   */
+  scope: string;
+  /**
+   * Past either end Tab lets go, so the next Tab moves to the next pane and
+   * the form never traps the keyboard; j/k and the arrows stop there. With
+   * `wrap` both go round instead.
+   */
+  wrap?: boolean;
+  /** j/k and the arrows go round past either end even when Tab lets go. */
+  wrapArrows?: boolean;
+  /**
+   * What Enter or Space does on a field that is not taking text: a button
+   * presses, a checkbox toggles. A function is read when the key arrives.
+   */
+  actions?: Partial<Record<Id, () => void>> | ((id: Id) => (() => void) | null | undefined);
+  /** Scrolls the field the keyboard moved to into view; pointer moves leave the scroll alone. */
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+}
+
+export interface FieldRing<Id extends string> {
+  /** Ref for a field's outer box, so the ring can scroll it into view. Stable per id. */
+  nodeRef: (id: Id) => (node: BoxRenderable | null) => void;
+}
+
+function step<Id>(ids: readonly Id[], current: Id | null, delta: 1 | -1, wrap: boolean): Id | undefined {
+  const index = current === null ? -1 : ids.indexOf(current);
+  if (index < 0) return wrap && delta < 0 ? ids[ids.length - 1] : ids[0];
+  const next = index + delta;
+  if (wrap) return ids[(next + ids.length) % ids.length];
+  return ids[Math.max(0, Math.min(ids.length - 1, next))];
+}
+
+/**
+ * The keyboard ring of a form: Tab and Shift+Tab, j/k and the arrows walk
+ * `ids`, Enter and Space fire the active field's action, and a field the
+ * keyboard reaches below the fold scrolls into view. Keys that type into a
+ * text field (j, k, Space, Enter) stay with the field.
+ */
+export function useFieldRing<Id extends string>(options: FieldRingOptions<Id>): FieldRing<Id> {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+  // Where the ring is, ahead of the render that shows it, so a key that
+  // repeats faster than the pane renders still moves one field per press.
+  const currentRef = useRef(options.activeId);
+  currentRef.current = options.activeId;
+  const nodes = useRef(new Map<Id, BoxRenderable>());
+  const refs = useRef(new Map<Id, (node: BoxRenderable | null) => void>());
+  const revealRef = useRef(false);
+
+  const move = useCallback((next: Id | undefined) => {
+    if (next === undefined) return;
+    if (next !== currentRef.current) revealRef.current = true;
+    currentRef.current = next;
+    optionsRef.current.onActivate(next);
+  }, []);
+
+  useShortcut((event) => {
+    const { ids, wrap = false, wrapArrows = wrap, actions } = optionsRef.current;
+    const activeId = currentRef.current;
+    const consume = () => {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+    };
+    if (event.name === "tab" && !event.ctrl && !event.meta && !event.alt && !event.super) {
+      const delta = event.shift ? -1 : 1;
+      const index = activeId === null ? -1 : ids.indexOf(activeId);
+      const next = wrap
+        ? step(ids, activeId, delta, true)
+        : index < 0 && delta < 0 ? undefined : ids[index + delta];
+      if (next === undefined) return;
+      consume();
+      move(next);
+      return;
+    }
+    if (event.targetEditable) return;
+    if (isPlainKey(event, "down", "j", "up", "k")) {
+      consume();
+      move(step(ids, activeId, isPlainKey(event, "down", "j") ? 1 : -1, wrapArrows));
+      return;
+    }
+    if (activeId !== null && isPlainKey(event, "enter", "return", "space")) {
+      const action = typeof actions === "function" ? actions(activeId) : actions?.[activeId];
+      if (!action) return;
+      consume();
+      action();
+    }
+  }, { allowEditable: true, phase: "before", scope: options.scope, enabled: options.enabled });
+
+  const { activeId, scrollRef } = options;
+  useEffect(() => {
+    if (!revealRef.current || activeId === null) return;
+    revealRef.current = false;
+    return afterLayout(() => revealInScrollBox(scrollRef?.current ?? null, nodes.current.get(activeId) ?? null));
+  }, [activeId, scrollRef]);
+
+  const nodeRef = useCallback((id: Id) => {
+    let ref = refs.current.get(id);
+    if (!ref) {
+      ref = (node: BoxRenderable | null) => {
+        if (node) nodes.current.set(id, node);
+        else nodes.current.delete(id);
+      };
+      refs.current.set(id, ref);
+    }
+    return ref;
+  }, []);
+
+  return useMemo(() => ({ nodeRef }), [nodeRef]);
+}

package/src/components/ui/fields.tsx

@@ -1,12 +1,51 @@
-import { Box, Input, Span, Text, useUiHost } from "../../ui";
+import { Box, Input, Span, Text, TextAttributes, useUiCapabilities, useUiHost } from "../../ui";
 import { useEffect, useRef, useState, type ComponentType, type RefObject } from "react";
 import { type InputRenderable } from "../../ui";
 import { useThemeColors } from "../../theme/theme-context";
 import { useRemoteUiNode } from "../../remote/semantic-tree";
 import { remoteStringValue } from "../../remote/semantic-helpers";
+import { truncateWithEllipsis } from "../../utils/text-wrap";
+
+export interface FieldLabelProps {
+  label: string;
+  /** The form's current field. */
+  active?: boolean;
+  /** A label column this wide: the label is cut to fit and the column keeps its width. */
+  width?: number;
+  /** Cuts the label to fit without reserving a column. */
+  maxWidth?: number;
+}
+
+/**
+ * A form field's label. The active field's label is bright and bold. The
+ * terminal also marks it with "> " (and indents the others to match) because
+ * its input shows only a cursor; the desktop control draws a focus ring.
+ */
+export function FieldLabel({ label, active = false, width, maxWidth }: FieldLabelProps) {
+  const colors = useThemeColors();
+  const { nativePaneChrome } = useUiCapabilities();
+  const text = nativePaneChrome ? label : `${active ? "> " : "  "}${label}`;
+  const fit = width ?? maxWidth;
+  return (
+    <Text width={width} fg={active ? colors.textBright : colors.textDim} attributes={active ? TextAttributes.BOLD : 0}>
+      {fit === undefined ? text : truncateWithEllipsis(text, fit)}
+    </Text>
+  );
+}
 
 export interface TextFieldProps {
   label?: string;
+  /**
+   * The form's current field, in a form that walks its fields with the
+   * keyboard. The terminal marks its label with "> " and indents the other
+   * labels to match; the desktop field's focus ring already shows it.
+   */
+  active?: boolean;
+  /**
+   * Puts the label in a column this wide beside the input rather than above
+   * it, as a FieldLabel. `width` is then the whole row.
+   */
+  labelWidth?: number;
   value?: string;
   placeholder?: string;
   focused?: boolean;
@@ -45,8 +84,31 @@ function maskPassword(value: string): string {
   return PASSWORD_MASK_CHAR.repeat(value.length);
 }
 
-export function TextField({
+export function TextField(props: TextFieldProps) {
+  return props.labelWidth === undefined ? <TextFieldControl {...props} /> : <InlineTextField {...props} />;
+}
+
+function InlineTextField({ label = "", labelWidth = 0, active, width, hint, onMouseDown, ...props }: TextFieldProps) {
+  const colors = useThemeColors();
+  const inputWidth = width === undefined ? undefined : Math.max(8, width - labelWidth - 1);
+  return (
+    <Box flexDirection="column" width={width}>
+      <Box height={1} flexDirection="row" alignItems="center" gap={1} onMouseDown={onMouseDown}>
+        <FieldLabel label={label} active={active} width={labelWidth} />
+        <TextFieldControl {...props} width={inputWidth} onMouseDown={onMouseDown} />
+      </Box>
+      {hint ? (
+        <Box paddingLeft={labelWidth + 1}>
+          <Text fg={colors.textMuted} wrapText width={inputWidth}>{hint}</Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+function TextFieldControl({
   label,
+  active,
   value,
   placeholder,
   focused,
@@ -143,7 +205,7 @@ export function TextField({
     <Box flexDirection="column">
       {label && (
         <Box height={1}>
-          <Text fg={placeholderColor}>{label}</Text>
+          <Text fg={placeholderColor}>{active === undefined ? label : `${active ? "> " : "  "}${label}`}</Text>
         </Box>
       )}
       <Box height={1} onMouseDown={() => {

package/src/components/ui/index.ts

@@ -28,21 +28,27 @@ export { NumberPromptDialog } from "./number-prompt-dialog";
 export { SelectButton } from "./select-button";
 export type { SelectButtonOption, SelectButtonProps, SelectControl } from "./select-button";
 
-export { TextField, NumberField } from "./fields";
-export { QueryBar } from "./query-bar";
+export { FieldLabel, TextField, NumberField } from "./fields";
+export { useFieldRing } from "./field-ring";
+export type { FieldRing, FieldRingOptions } from "./field-ring";
+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 type { StatGridProps, StatItem } from "./stat-grid";
-export type { QueryBarProps, QueryBarFilter, QueryBarMultiFilter, QueryBarSearch, QueryBarSelectFilter, QueryBarTextFilter, QueryBarToggleFilter, QueryBarView } from "./query-bar";
-export type { TextFieldProps, NumberFieldProps } from "./fields";
+export type { SplitBarPart } from "./split-bar";
+export type { QueryBarProps, QueryBarFilter, QueryBarMultiFilter, QueryBarSearch, QueryBarSearchFocus, QueryBarSelectFilter, QueryBarTextFilter, QueryBarToggleFilter, QueryBarView } from "./query-bar";
+export type { FieldLabelProps, TextFieldProps, NumberFieldProps } from "./fields";
 
 export { getMessageComposerBlockHeight, MessageComposer } from "./message-composer";
 
 export { DialogFrame } from "./frame";
 export type { DialogFrameProps } from "./frame";
-export { ConfirmDialog } from "./confirm-dialog";
+export { ConfirmDialog, confirmDialog } from "./confirm-dialog";
+export type { ConfirmDialogOptions } from "./confirm-dialog";
 export { ChoiceDialog } from "./choice-dialog";
+export { TextPromptDialog } from "./text-prompt-dialog";
+export type { TextPromptDialogProps } from "./text-prompt-dialog";
 export type { ChoiceDialogChoice } from "./choice-dialog";
 export { Tabs } from "./tabs";
 export type { TabsProps } from "./tabs";
@@ -50,8 +56,11 @@ export { SegmentedControl } from "./toggle";
 export type { SegmentedControlProps } from "./toggle";
 export { EmptyState, PaneStatusBody, Notice, loadingText, unavailableText } from "./status";
 export type { EmptyStateProps, PaneStatusBodyProps, NoticeProps } from "./status";
-export { Badge, Divider, KeyValueRow, Prose, Section, SectionHeading } from "./display";
-export type { BadgeProps, DividerProps, KeyValueRowProps, ProseProps, SectionProps, SectionHeadingProps } from "./display";
+export { Badge, BulletList, Divider, FigureList, KeyValueRow, Prose, READING_WIDTH, Section, SectionHeading } from "./display";
+export type {
+  BadgeProps, BulletListProps, DividerProps, FigureListItem, FigureListProps, KeyValueRowProps, ProseProps, SectionProps,
+  SectionHeadingProps,
+} from "./display";
 export { InlineQuickAddRow } from "./inline-quick-add";
 export type { InlineQuickAddRowProps } from "./inline-quick-add";
 
@@ -59,5 +68,7 @@ export { ExternalLink, ExternalLinkText, openUrl, PaneLinkMenu, usePaneLinkMenuE
 export { ButtonActionScope } from "./action-scope";
 export { RemoteImage } from "./remote-image";
 export { PageStackView } from "./page-stack-view";
+export { DetailScrollBody } from "./detail-scroll-body";
+export type { DetailScrollBodyProps } from "./detail-scroll-body";
 
 export { Spinner } from "./loading";

package/src/components/ui/multi-select/dialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Text, useUiHost } from "../../../ui";
+import { Box, Text, useUiCapabilities } from "../../../ui";
 import { TextAttributes } from "../../../ui";
 import { useShortcut, useViewport } from "../../../react/input";
 import { type AlertContext, useDialog, useDialogKeyboard } from "../../../ui/dialog";
@@ -215,7 +215,7 @@ export function MultiSelectDialogContent({
   idPrefix,
   rowAction,
 }: MultiSelectDialogContentProps) {
-  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const optionByValue = useMemo(() => new Map(options.map((option) => [option.value, option])), [options]);
   const [selectedValues, setSelectedValues] = useState(() => normalizeDialogSelectedValues(options, selectedValuesProp, ordered));
   const [displayValues, setDisplayValues] = useState(() => getMultiSelectDisplayValues(options, selectedValuesProp, ordered));
@@ -394,7 +394,7 @@ function MultiSelectDialogButtonInner({
   onOpenChange,
   rowAction,
 }: MultiSelectDialogButtonProps, ref: ForwardedRef<MultiSelectDialogButtonHandle>) {
-  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const dialog = useDialog();
   const triggerMouseDownRef = useRef(false);
   const [popoverOpen, setPopoverOpen] = useState(false);

package/src/components/ui/page-stack-view.tsx

@@ -14,7 +14,9 @@ export interface PageStackViewProps {
   rootContent: ReactNode;
   detailContent: ReactNode;
   detailTitle?: string;
+  /** @deprecated Omit it; the back control will always read "Back". */
   backLabel?: string;
+  /** @deprecated Omit it; stack headers will not draw a trailing hint. */
   backHint?: string;
 }
 

package/src/components/ui/prose.tsx

@@ -154,3 +154,55 @@ export function Prose({
     ),
   );
 }
+
+/**
+ * The widest a paragraph runs. On a wide pane a full-width line is over two
+ * hundred characters, which the eye loses on the way back.
+ */
+export const READING_WIDTH = 100;
+
+export interface BulletListProps {
+  items: string[];
+  width: number;
+  color?: string;
+}
+
+/** One bulleted paragraph per item, later lines indented under the text. */
+export function BulletList({ items, width, color }: BulletListProps) {
+  return items.map((item, index) => (
+    <Prose key={`${index}-${item}`} text={item} width={width} color={color} prefix="• " />
+  ));
+}
+
+export interface FigureListItem {
+  value: string;
+  label: string;
+  note?: string;
+}
+
+export interface FigureListProps {
+  figures: FigureListItem[];
+  width: number;
+  /** The value column is as wide as the longest value, within these bounds. */
+  minValueWidth?: number;
+  maxValueWidth?: number;
+}
+
+/** Figures one per line, value first, so the column of numbers is what the eye reads. */
+export function FigureList({ figures, width, minValueWidth = 0, maxValueWidth = 18 }: FigureListProps) {
+  const colors = useThemeColors();
+  const valueWidth = Math.min(
+    maxValueWidth,
+    Math.max(minValueWidth, ...figures.map((figure) => figure.value.length)),
+  );
+  return figures.map((figure) => (
+    <Prose
+      key={`${figure.label}-${figure.value}`}
+      text={[figure.label, figure.note].filter(Boolean).join(", ")}
+      width={width}
+      color={colors.textDim}
+      prefix={`${figure.value.padEnd(valueWidth)}  `}
+      prefixColor={colors.textBright}
+    />
+  ));
+}

package/src/components/ui/query-bar.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useMemo, useRef, useState, type ComponentType, type ReactNode, type Ref, type RefObject } from "react";
 import { Box, Text, useUiHost, type InputRenderable } from "../../ui";
 import type { HostQueryBarItem, HostQueryBarProps } from "../../ui/host";
+import { assignRef } from "../../react/assign-ref";
 import { useRemoteUiNode } from "../../remote/semantic-tree";
 import { useThemeColors } from "../../theme/theme-context";
 import { InputSearchBar } from "../input-search-bar";
@@ -173,12 +174,6 @@ function TerminalChoiceStrip({
   );
 }
 
-function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
-  if (!ref) return;
-  if (typeof ref === "function") ref(value);
-  else (ref as { current: T | null }).current = value;
-}
-
 function isNarrowing(filter: QueryBarFilter): boolean {
   if (filter.kind === "text") return filter.value.trim().length > 0;
   if (filter.kind === "toggle") return filter.value !== (filter.defaultValue ?? false);
@@ -186,6 +181,34 @@ function isNarrowing(filter: QueryBarFilter): boolean {
   return filter.defaultValue !== undefined && filter.value !== filter.defaultValue;
 }
 
+export interface QueryBarSearchFocus {
+  /** The search field owns the keyboard; the pane's own keys wait. */
+  active: boolean;
+  /** Hands the keyboard to the field, again if it already has it. */
+  focus: () => void;
+  /** Gives the keyboard back to the pane. */
+  blur: () => void;
+  /** Spread into `QueryBar`'s `search` beside `value`, `onChange`, `placeholder` and `focused`. */
+  searchProps: Pick<QueryBarSearch, "active" | "onActiveChange" | "focusToken" | "inputRef">;
+}
+
+/**
+ * Whether a pane's `QueryBar` search owns the keyboard. `/` already focuses
+ * it through the bar, so a pane binds `/` itself only to add a condition.
+ */
+export function useQueryBarSearch(): QueryBarSearchFocus {
+  const [active, setActive] = useState(false);
+  const [focusToken, setFocusToken] = useState(0);
+  const inputRef = useRef<InputRenderable | null>(null);
+  const focus = useCallback(() => {
+    setActive(true);
+    setFocusToken((token) => token + 1);
+  }, []);
+  const blur = useCallback(() => setActive(false), []);
+  const onActiveChange = useCallback((next: boolean) => (next ? focus() : blur()), [blur, focus]);
+  return { active, focus, blur, searchProps: { active, onActiveChange, focusToken, inputRef } };
+}
+
 /**
  * The one row above a list that narrows or reorders it: search, filters, a view
  * switch. Every pane with query controls uses it, so they read and behave the
@@ -453,9 +476,14 @@ export function QueryBar({ width, search, filters = [], view, meta }: QueryBarPr
         <Box onMouseDown={resetAll} cursor="pointer"><Text fg={colors.textDim}>clear</Text></Box>
       )}
       {(view || meta) && <Box flexGrow={1} />}
-      {meta && <Text fg={colors.textMuted}>{meta}</Text>}
+      {/* Context gives way before the controls when the row runs short. */}
+      {meta && (
+        <Box flexShrink={1} minWidth={0} height={1} overflow="hidden">
+          <Text fg={colors.textMuted} wrapMode="none" truncate flexShrink={1} minWidth={0}>{meta}</Text>
+        </Box>
+      )}
       {view && (
-        <>
+        <Box flexShrink={view.options.length > TERMINAL_SEGMENT_LIMIT ? 1 : 0} minWidth={0}>
           <TerminalChoiceStrip
             options={view.options.map((option) => ({ value: option.value, label: option.label, hint: option.hint, disabled: option.disabled }))}
             value={view.value}
@@ -463,7 +491,7 @@ export function QueryBar({ width, search, filters = [], view, meta }: QueryBarPr
             focused={view.focused}
             shortcutScope={view.shortcutScope}
           />
-        </>
+        </Box>
       )}
     </Box>
   );

package/src/components/ui/reveal-in-scroll-box.ts

@@ -0,0 +1,34 @@
+import type { BoxRenderable, ScrollBoxRenderable } from "../../ui";
+
+/**
+ * Scrolls the least distance that brings `node` inside `scrollBox`'s viewport,
+ * so the control the keyboard just moved to is on screen. The desktop measures
+ * pixel rects; the terminal compares absolute cell rows with the viewport's.
+ */
+export function revealInScrollBox(scrollBox: ScrollBoxRenderable | null, node: BoxRenderable | null): void {
+  if (!scrollBox || !node) return;
+  const boxRect = scrollBox.getBoundingClientRect?.();
+  const nodeRect = node.getBoundingClientRect?.();
+  if (boxRect && nodeRect && scrollBox.scrollToPixels && typeof scrollBox.scrollTopPx === "number" && scrollBox.viewportPx) {
+    const top = scrollBox.scrollTopPx + nodeRect.y - boxRect.y;
+    const bottom = top + nodeRect.height;
+    const viewport = scrollBox.viewportPx.height;
+    if (top < scrollBox.scrollTopPx) scrollBox.scrollToPixels(Math.max(0, top));
+    else if (bottom > scrollBox.scrollTopPx + viewport) scrollBox.scrollToPixels(Math.max(0, Math.min(top, bottom - viewport)));
+    return;
+  }
+  const viewport = scrollBox.viewport as { y?: unknown; height: number } | undefined;
+  if (typeof node.y !== "number" || typeof viewport?.y !== "number" || viewport.height <= 0) return;
+  const offset = node.y - viewport.y;
+  const height = Math.max(1, node.height ?? 1);
+  if (offset < 0) scrollBox.scrollTo(Math.max(0, scrollBox.scrollTop + offset));
+  else if (offset + height > viewport.height) {
+    scrollBox.scrollTo(Math.max(0, scrollBox.scrollTop + Math.min(offset, offset + height - viewport.height)));
+  }
+}
+
+/** Runs once the host has laid out the change that moved the keyboard. */
+export function afterLayout(callback: () => void): () => void {
+  const timer = setTimeout(callback, 0);
+  return () => clearTimeout(timer);
+}

package/src/components/ui/select-button.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useImperativeHandle, useRef, type Ref } from "react";
 import { useRemoteUiNode } from "../../remote/semantic-tree";
 import { useThemeColors } from "../../theme/theme-context";
-import { Box, Text, TextAttributes, useUiHost } from "../../ui";
+import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { type PromptContext, useDialog } from "../../ui/dialog";
 import { ChoiceDialog } from "./choice-dialog";
 import { SelectField, openSelectField, type SelectFieldHandle } from "./select-field";
@@ -72,7 +72,7 @@ export function SelectButton<T extends string = string>({
   controlRef,
 }: SelectButtonProps<T>) {
   const colors = useThemeColors();
-  const isDesktopWeb = useUiHost().kind === "desktop-web";
+  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
   const dialog = useDialog();
   const current = options.find((option) => option.value === value);
   const selectFieldRef = useRef<SelectFieldHandle | null>(null);

package/src/components/ui/split-bar.tsx

@@ -0,0 +1,69 @@
+import { Box, Text, useUiCapabilities } from "../../ui";
+
+/** One part of a whole drawn by `SplitBar`. */
+export interface SplitBarPart {
+  id: string;
+  value: number;
+  color: string;
+}
+
+/**
+ * Terminal cells per part: proportional, at least one for every part above
+ * zero so a small one still shows, trimmed from the largest when the floors
+ * overshoot the width.
+ */
+export function splitBarCells(values: readonly number[], width: number): number[] {
+  const sum = values.reduce((total, value) => total + (value > 0 ? value : 0), 0);
+  if (sum <= 0 || width <= 0) return values.map(() => 0);
+  const cells = values.map((value) => (value > 0 ? Math.max(1, Math.round((value / sum) * width)) : 0));
+  let total = cells.reduce((a, b) => a + b, 0);
+  while (total > width) {
+    const largest = cells.indexOf(Math.max(...cells));
+    if (cells[largest]! <= 1) break;
+    cells[largest] = cells[largest]! - 1;
+    total -= 1;
+  }
+  return cells;
+}
+
+/**
+ * Parts of a whole as one bar: a pay mix, a Buy/Hold/Sell split. The terminal
+ * draws block runs; the desktop draws real elements, so a part can be thinner
+ * than a cell.
+ */
+export function SplitBar({ parts, width }: { parts: readonly SplitBarPart[]; width: number }) {
+  const isDesktopWeb = useUiCapabilities().nativePaneChrome === true;
+  const shown = parts.filter((part) => part.value > 0);
+  const sum = shown.reduce((total, part) => total + part.value, 0);
+  if (sum <= 0 || width <= 0) return null;
+  if (isDesktopWeb) {
+    return (
+      <Box
+        height={1}
+        flexDirection="row"
+        alignItems="center"
+        flexShrink={1}
+        width={width}
+        data-gloom-role="split-bar"
+        // It gives way to the text beside it in a narrow row, down to a stub.
+        style={{ height: "9px", minWidth: "16px", borderRadius: "2px", overflow: "hidden" }}
+      >
+        {shown.map((part) => (
+          <Box
+            key={part.id}
+            backgroundColor={part.color}
+            style={{ width: `${((part.value / sum) * 100).toFixed(2)}%`, height: "100%", minWidth: "2px" }}
+          />
+        ))}
+      </Box>
+    );
+  }
+  const cells = splitBarCells(shown.map((part) => part.value), width);
+  return (
+    <Box height={1} flexDirection="row" flexShrink={0}>
+      {shown.map((part, index) => (
+        <Text key={part.id} fg={part.color}>{"█".repeat(cells[index]!)}</Text>
+      ))}
+    </Box>
+  );
+}