gloomberb 0.18.0 → 0.18.2

package/src/components/onboarding/onboarding-frame.tsx

@@ -7,6 +7,7 @@ import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
 import { Button, ListView, type ListViewItem } from "../ui";
 import type { ButtonProps } from "../ui/button";
+import { ListRowLines } from "../ui/list-row-lines";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../layout/titlebar-overlay";
 
 /**
@@ -525,17 +526,14 @@ export function OnboardingChoiceList({
       selectOnHover
       renderRow={(item, state) => (
         <Box flexDirection="row" alignItems="center" width="100%" minWidth={0}>
-          <Box flexDirection="column" flexGrow={1} minWidth={0}>
-            <Text
-              fg={state.selected ? colors.textBright : colors.text}
-              attributes={state.selected ? TextAttributes.BOLD : 0}
-              wrapText
-            >
-              {item.label}
-            </Text>
-            {item.description ? (
-              <Text fg={colors.textMuted} wrapText>{item.description}</Text>
-            ) : null}
+          <Box flexDirection="row" flexGrow={1} minWidth={0}>
+            <ListRowLines
+              label={item.label}
+              description={item.description}
+              leading={item.leading}
+              labelColor={state.selected ? colors.textBright : colors.text}
+              labelBold={state.selected}
+            />
           </Box>
           {item.detail ? (
             <Text fg={colors.borderFocused} attributes={TextAttributes.BOLD} style={{ marginLeft: 10 }}>

package/src/components/onboarding/use-onboarding-broker-form.ts

@@ -1,4 +1,5 @@
 import {
+  createElement,
   useCallback,
   useEffect,
   useMemo,
@@ -16,6 +17,7 @@ import { tf } from "../../i18n";
 import type { useAppLanguage } from "../../i18n/react";
 import type { PluginRegistry } from "../../plugins/registry";
 import type { ListViewItem } from "../ui";
+import { LogoMark } from "../ui/logo-mark";
 import type { PortfolioSub } from "./onboarding-steps";
 import { brokerSetupGuideUrl } from "./portfolio-step/broker-setup-panel";
 import type { useOnboardingBrokerSync } from "./wizard-broker-sync";
@@ -42,14 +44,15 @@ export function useOnboardingBrokerFields({
     (): BrokerOption[] => getConnectableBrokerOptions(buildBrokerDirectory({
       signedIn: signedInBrokers,
       adapters: pluginRegistry.brokers.values(),
-    })),
-    [pluginRegistry.brokers, signedInBrokers],
+    }), pluginRegistry.getBrokerLogo),
+    [pluginRegistry.brokers, pluginRegistry.getBrokerLogo, signedInBrokers],
   );
   const brokerChoices = useMemo<ListViewItem[]>(() => brokerOptions.map((broker) => ({
     id: broker.id,
     label: tf("Connect {broker}", { broker: broker.name }),
     // A broker offered two ways shows which way each choice connects.
     description: broker.methodLabel ?? tf("Import positions from {broker}", { broker: broker.name }),
+    leading: createElement(LogoMark, { src: broker.logo, name: broker.name, size: "lead" }),
   })), [brokerOptions, language]);
   const activeBrokerFields = useMemo((): BrokerConfigField[] => {
     if (!selectedBrokerId) return [];

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

@@ -1,4 +1,5 @@
 import { brokerMethodLabel, type BrokerDirectoryEntry } from "../../brokers/directory";
+import { brokerDirectoryLogo, type BrokerPluginLogo } from "../../brokers/logos";
 import type { SignedInBroker } from "../../brokers/signed-in/client";
 import type { BrokerAdapter, BrokerPosition } from "../../types/broker";
 import type { AppConfig, OnboardingProgress, OnboardingStage } from "../../types/config";
@@ -47,19 +48,25 @@ export type BrokerOption = {
   name: string;
   /** How this choice connects, when the same broker is also offered another way. */
   methodLabel?: string;
+  /** The broker's logo for the desktop and the web (brokers/logos.ts); null draws its initial. */
+  logo?: string | null;
 } & (
   | { adapter: BrokerAdapter; signedIn?: undefined }
   | { signedIn: SignedInBroker; adapter?: undefined }
 );
 
-export function getConnectableBrokerOptions(directory: readonly BrokerDirectoryEntry[]): BrokerOption[] {
+export function getConnectableBrokerOptions(
+  directory: readonly BrokerDirectoryEntry[],
+  pluginLogo: BrokerPluginLogo = () => null,
+): BrokerOption[] {
   const options: BrokerOption[] = [];
   for (const entry of directory) {
+    const logo = brokerDirectoryLogo(entry, pluginLogo);
     for (const method of entry.methods) {
       const methodLabel = entry.methods.length > 1 ? brokerMethodLabel(entry, method) : undefined;
       options.push(method.kind === "signed-in"
-        ? { id: `signed-in:${method.broker.id}`, name: entry.name, methodLabel, signedIn: method.broker }
-        : { id: method.adapter.id, name: method.adapter.name, methodLabel, adapter: method.adapter });
+        ? { id: `signed-in:${method.broker.id}`, name: entry.name, methodLabel, logo, signedIn: method.broker }
+        : { id: method.adapter.id, name: method.adapter.name, methodLabel, logo, adapter: method.adapter });
     }
   }
   return options;

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

@@ -12,6 +12,7 @@ import {
 } from "../../portfolio/mutations";
 import { isFuturesTicker } from "../../portfolio/futures-positions";
 import { loadFuturesEntrySize } from "../../portfolio/futures-terms";
+import { wholeUnitQuantityProblem } from "../../portfolio/position-quantity";
 import { useAppDispatch, useAppSelector, useAppStateRef } from "../../state/app/context";
 import { saveConfigImmediately } from "../../state/config-save-scheduler";
 import { resolveTickerSearch, upsertTickerFromSearchResult, type ResolvedTickerSearch } from "../../tickers/search";
@@ -291,6 +292,13 @@ export function useOnboardingPositions({
       if (shares === null) {
         nextTicker = addTickerToPortfolio(ticker, portfolioId).ticker;
       } else {
+        // 1.250 on a listing held in whole lots could be 1,250 as well, and asks as 1,250 does.
+        const lots = wholeUnitQuantityProblem(current.shares.trim(), ticker, { label: quantityLabel });
+        if (lots) {
+          setFieldIdx(1);
+          setError(lots);
+          return false;
+        }
         const costBasis = avgCost ?? result.quote?.price;
         if (costBasis === undefined || costBasis === null || !Number.isFinite(costBasis)) {
           setFieldIdx(2);

package/src/components/ui/button.tsx

@@ -13,9 +13,10 @@ import { useScopedButtonAction } from "./action-scope";
  * still reads as a control next to a primary one. `plain` is text that happens
  * to be clickable: no border, no fill. Anything shaped like a row, a table
  * cell, a status bar chip or a link is `plain` — a box drawn around it reads as
- * a control nested in the surface instead of part of it.
+ * a control nested in the surface instead of part of it. Use `quiet` for text
+ * actions that also need a filled selection/focus state without a frame.
  */
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "plain";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "plain" | "quiet";
 
 export interface ButtonProps {
   label: string;
@@ -25,6 +26,8 @@ export interface ButtonProps {
   expanded?: boolean;
   onPress?: () => void;
   variant?: ButtonVariant;
+  /** Semantic fill for a primary action, retained while keyboard focused. */
+  tone?: "positive" | "negative" | "neutral" | "warning";
   disabled?: boolean;
   /**
    * The action it started is still running (a retry waiting for its answer).
@@ -56,13 +59,15 @@ export interface ButtonProps {
   stopPropagation?: boolean;
 }
 
-function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean, colors: ThemeColors): { bg?: string; fg: string } {
+function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean, colors: ThemeColors, tone?: ButtonProps["tone"]): { bg?: string; fg: string } {
+  if (variant === "quiet") return { bg: active ? colors.selected : undefined, fg: disabled ? colors.textMuted : active ? colors.textBright : colors.textDim };
   if (variant === "plain") {
     return { fg: disabled ? colors.textMuted : active ? colors.textBright : colors.textDim };
   }
   if (disabled) {
     return { bg: colors.panel, fg: colors.textMuted };
   }
+  if (tone && variant === "primary") return { bg: colors[tone], fg: colors.bg };
   if (active) {
     return { bg: colors.selected, fg: colors.selectedText };
   }
@@ -96,6 +101,7 @@ export function Button({
   expanded,
   onPress: pressAction,
   variant = "secondary",
+  tone,
   disabled = false,
   pending = false,
   pendingLabel,
@@ -138,6 +144,7 @@ export function Button({
         expanded={expanded}
         onPress={onPress}
         variant={variant}
+        tone={tone}
         disabled={inert}
         pending={pending}
         active={active}
@@ -152,7 +159,7 @@ export function Button({
     );
   }
 
-  const palette = resolveButtonColors(variant, active, inert, colors);
+  const palette = resolveButtonColors(variant, active, inert, colors, tone);
 
   return (
     <Box

package/src/components/ui/choice-dialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useUiHost } from "../../ui";
 import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
 import { useThemeColors } from "../../theme/theme-context";
@@ -61,6 +61,9 @@ export function ChoiceDialog({
   );
   const selectedIndex = clampIndex(index, choices.length, -1);
   const selectedChoice = selectedIndex >= 0 ? choices[selectedIndex] : undefined;
+  // Terminal input can deliver navigation and Enter before React renders.
+  const cursor = useRef(selectedIndex);
+  const selectIndex = (next: number) => { cursor.current = next; setIndex(next); };
   const items = useMemo<ListViewItem[]>(() => choices.map((choice) => ({
     id: choice.id,
     label: choice.label,
@@ -72,7 +75,7 @@ export function ChoiceDialog({
   const width = useMemo(() => choiceDialogWidth(title, choices), [choices, title]);
 
   useEffect(() => {
-    setIndex((current) => clampIndex(current, choices.length, -1));
+    selectIndex(clampIndex(cursor.current, choices.length, -1));
   }, [choices.length]);
 
   const activateChoice = (choice: ChoiceDialogChoice | undefined) => {
@@ -84,9 +87,9 @@ export function ChoiceDialog({
     event.stopPropagation();
     const move = listCursorMove(event, MAX_VISIBLE_CHOICE_ROWS - 1);
     if (move) {
-      setIndex((current) => move(choices, current));
+      selectIndex(move(choices, cursor.current));
     } else if (event.name === "enter" || event.name === "return") {
-      activateChoice(selectedChoice);
+      activateChoice(choices[clampIndex(cursor.current, choices.length, -1)]);
     } else if (event.name === "escape") {
       resolve("");
     }
@@ -106,7 +109,7 @@ export function ChoiceDialog({
           height={Math.min(Math.max(items.length, 1), MAX_VISIBLE_CHOICE_ROWS)}
           scrollable={items.length > MAX_VISIBLE_CHOICE_ROWS}
           selectOnHover
-          onSelect={setIndex}
+          onSelect={selectIndex}
           onActivate={(_, nextIndex) => activateChoice(choices[nextIndex])}
         />
         <Box height={1} />

package/src/components/ui/display.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { t } from "../../i18n";
 import { blendHex, hoverBg } from "../../theme/colors";
+import { blendForContrast, higherContrast } from "../../theme/color-utils";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { truncateToDisplayWidth } from "../../utils/format";
@@ -62,6 +63,7 @@ export interface KeyValueRowProps {
   width?: number;
   labelWidth?: number;
   emphasis?: boolean;
+  align?: "left" | "right";
   /**
    * Opens what the value names (a security's DES, a function): the whole row is the target, and inside a
    * `PaneLinkMenu` the pane menu lists it as `link.label`, so the keyboard reaches what a click opens.
@@ -118,7 +120,7 @@ export function KeyValueRow(props: KeyValueRowProps) {
  * width in characters, the value and detail taking the rest of the row and
  * clipped in CSS where they run out of it.
  */
-function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, link }: KeyValueRowProps) {
+function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link }: KeyValueRowProps) {
   const colors = useThemeColors();
   usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
   const target = link ? {
@@ -137,7 +139,7 @@ function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidt
       <Text
         fg={color ?? statToneColor(tone, colors) ?? colors.text}
         attributes={emphasis ? TextAttributes.BOLD : undefined}
-        style={{ ...NATIVE_CLIP_STYLE, flex: detail ? "0 1 auto" : "1 1 auto" }}
+        style={{ ...NATIVE_CLIP_STYLE, flex: detail ? "0 1 auto" : "1 1 auto", textAlign: align }}
       >
         {value}
       </Text>
@@ -146,7 +148,7 @@ function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidt
   );
 }
 
-function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, link }: KeyValueRowProps) {
+function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link }: KeyValueRowProps) {
   const colors = useThemeColors();
   usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
   const target = link ? {
@@ -169,7 +171,7 @@ function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWi
       <Box width={labelColumns} flexShrink={0} overflow="hidden">
         <Text fg={colors.textDim}>{t(label)}</Text>
       </Box>
-      <Box width={valueWidth} flexShrink={0} overflow="hidden">
+      <Box width={valueWidth} flexShrink={0} overflow="hidden" alignItems={align === "right" ? "flex-end" : undefined}>
         <Text fg={color ?? statToneColor(tone, colors) ?? colors.text} attributes={emphasis ? TextAttributes.BOLD : undefined}>
           {valueWidth === undefined ? value : truncateToDisplayWidth(value, valueWidth)}
         </Text>
@@ -207,10 +209,13 @@ export function Badge({ label, tone = "neutral", color, variant = "subtle" }: Ba
   const accent = color ?? (tone === "neutral" ? colors.textDim : tone === "accent" ? colors.borderFocused : colors[tone]);
   const solid = variant === "solid";
   const neutral = solid && tone === "neutral" && !color;
+  const background = neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, BADGE_TINT);
+  const baseForeground = neutral ? colors.selectedText : solid ? colors.bg : accent;
+  const foreground = blendForContrast(baseForeground, background, higherContrast("#000000", "#ffffff", background), 4.5);
   const chip = (
-    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, BADGE_TINT)}
+    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={background}
       data-gloom-ui="badge" justifyContent={nativePaneChrome ? "center" : undefined} style={nativePaneChrome ? NATIVE_BADGE_STYLE : undefined}>
-      <Text fg={neutral ? colors.selectedText : solid ? colors.bg : accent} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{t(label)}</Text>
+      <Text fg={foreground} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{t(label)}</Text>
     </Box>
   );
   return nativePaneChrome ? <Box height={1} flexShrink={0} justifyContent="center">{chip}</Box> : chip;

package/src/components/ui/fields.tsx

@@ -1,10 +1,12 @@
 import { Box, Input, Span, Text, TextAttributes, useUiCapabilities, useUiHost } from "../../ui";
-import { useEffect, useRef, useState, type ComponentType, type RefObject } from "react";
+import { useEffect, useLayoutEffect, 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";
+import { Button } from "./button";
+import { stepNumber } from "./number-step";
 
 export interface FieldLabelProps {
   label: string;
@@ -35,6 +37,8 @@ export function FieldLabel({ label, active = false, width, maxWidth }: FieldLabe
 
 export interface TextFieldProps {
   label?: string;
+  /** Accessible name when the visible label is rendered separately. */
+  accessibleLabel?: 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
@@ -51,6 +55,7 @@ export interface TextFieldProps {
   /** The most characters it takes; typing and pasting stop there. */
   maxLength?: number;
   focused?: boolean;
+  disabled?: boolean;
   width?: number;
   inputRef?: RefObject<InputRenderable | null>;
   onChange?: (value: string) => void;
@@ -60,7 +65,8 @@ export interface TextFieldProps {
   type?: "text" | "password" | "date" | "email";
   /** DOM autofill hint, e.g. "email" or "current-password"; terminal hosts ignore it. */
   autoComplete?: string;
-  variant?: "default" | "plain";
+  /** Well is a quiet filled field with an underline only while focused. */
+  variant?: "default" | "plain" | "well";
   /**
    * `comfortable` is the form-page size on the DOM renderer: a taller field
    * with a tight label gap, for dialogs a user fills in rather than dense pane
@@ -117,7 +123,7 @@ function InlineTextField({ label = "", labelWidth = 0, active, width, hint, onMo
     <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} />
+        <TextFieldControl {...props} accessibleLabel={props.accessibleLabel ?? label} width={inputWidth} onMouseDown={onMouseDown} />
       </Box>
       {hint ? (
         <Box paddingLeft={labelWidth + 1}>
@@ -130,11 +136,13 @@ function InlineTextField({ label = "", labelWidth = 0, active, width, hint, onMo
 
 function TextFieldControl({
   label,
+  accessibleLabel,
   active,
   value,
   placeholder,
   maxLength,
   focused,
+  disabled = false,
   width,
   inputRef,
   onChange,
@@ -152,20 +160,20 @@ function TextFieldControl({
   onKeyDown,
 }: TextFieldProps) {
   const colors = useThemeColors();
-  backgroundColor ??= colors.bg;
+  backgroundColor ??= variant === "well" ? colors.panel : colors.bg;
   textColor ??= colors.text;
   placeholderColor ??= colors.textDim;
   useRemoteUiNode({
     role: "text-field",
-    label: label ?? placeholder,
+    label: accessibleLabel ?? label ?? placeholder,
     actions: {
       setValue: (input) => {
         const nextValue = remoteStringValue(input);
-        onChange?.(nextValue);
+        if (!disabled) onChange?.(nextValue);
       },
       submit: (input) => {
         const nextValue = remoteStringValue(input, value ?? "");
-        onSubmit?.(nextValue);
+        if (!disabled) onSubmit?.(nextValue);
       },
       blur: () => onBlur?.(value ?? ""),
     },
@@ -176,10 +184,12 @@ function TextFieldControl({
     return (
       <HostTextField
         label={label}
+        accessibleLabel={accessibleLabel}
         value={value}
         placeholder={placeholder}
         maxLength={maxLength}
-        focused={focused}
+        focused={focused && !disabled}
+        disabled={disabled}
         width={width}
         inputRef={inputRef}
         onChange={onChange}
@@ -233,6 +243,7 @@ function TextFieldControl({
         </Box>
       )}
       <Box height={1} onMouseDown={() => {
+        if (disabled) return;
         onMouseDown?.();
         resolvedInputRef.current?.focus?.();
       }}>
@@ -243,16 +254,20 @@ function TextFieldControl({
           selectable={!isPassword}
           placeholder={isPassword ? "" : placeholder}
           {...(maxLength === undefined ? {} : { maxLength })}
-          focused={focused}
+          focused={focused && !disabled}
           textColor={isPassword ? backgroundColor : textColor}
           placeholderColor={placeholderColor}
           backgroundColor={backgroundColor}
           selectionBg={isPassword ? backgroundColor : undefined}
           selectionFg={isPassword ? backgroundColor : undefined}
           showCursor={!isPassword}
-          onKeyDown={onKeyDown}
+          onKeyDown={(event: Parameters<NonNullable<TextFieldProps["onKeyDown"]>>[0]) => {
+            if (disabled) { event.preventDefault(); event.stopPropagation(); return; }
+            onKeyDown?.(event);
+          }}
           onCursorChange={() => syncCursorOffset()}
           onInput={(nextValue: string) => {
+            if (disabled) return;
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
@@ -262,12 +277,12 @@ function TextFieldControl({
             // the form has since cleared and swapped out still blurs when the
             // next one takes focus, and passing its old text on would put it
             // back into the cleared draft.
-            if (nextValue === currentValueRef.current) return;
+            if (disabled || nextValue === currentValueRef.current) return;
             currentValueRef.current = nextValue;
             syncCursorOffset(nextValue);
             onChange?.(nextValue);
           }}
-          onSubmit={() => onSubmit?.(currentValueRef.current)}
+          onSubmit={() => { if (!disabled) onSubmit?.(currentValueRef.current); }}
           onBlur={() => onBlur?.(currentValueRef.current)}
         />
         {isPassword && (
@@ -321,6 +336,10 @@ function sanitizeNumberInput(value: string, allowDecimal: boolean, allowNegative
 export interface NumberFieldProps extends Omit<TextFieldProps, "onChange" | "onSubmit" | "onBlur"> {
   allowDecimal?: boolean;
   allowNegative?: boolean;
+  /** Opt-in shared minus/plus, pointer wheel and Up/Down stepping. Not an exchange tick unless the caller supplies one. */
+  step?: number;
+  min?: number;
+  max?: number;
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
   onBlur?: (value: string) => void;
@@ -332,14 +351,75 @@ export function NumberField({
   onChange,
   onSubmit,
   onBlur,
+  step,
+  min,
+  max,
   ...props
 }: NumberFieldProps) {
-  return (
-    <TextField
-      {...props}
-      onChange={(nextValue) => onChange?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-      onSubmit={(nextValue) => onSubmit?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-      onBlur={(nextValue) => onBlur?.(sanitizeNumberInput(nextValue, allowDecimal, allowNegative))}
-    />
-  );
+  const colors = useThemeColors();
+  const native = useUiCapabilities().nativePaneChrome;
+  const well = props.variant === "well";
+  const valueRef = useRef(props.value ?? "");
+  valueRef.current = props.value ?? "";
+  const localInput = useRef<InputRenderable | null>(null);
+  const inputRef = props.inputRef ?? localInput;
+  const stepping = step !== undefined;
+  const pendingCursor = useRef<number | undefined>(undefined);
+  useLayoutEffect(() => {
+    const cursor = pendingCursor.current, input = inputRef.current;
+    if (cursor === undefined || !input) return;
+    pendingCursor.current = undefined;
+    const offset = Math.min(cursor, (props.value ?? "").length);
+    if (input.setCursorOffset) input.setCursorOffset(offset);
+    else input.cursorOffset = offset;
+  }, [props.value, inputRef]);
+  const change = (value: string) => {
+    if (props.disabled) return;
+    valueRef.current = value;
+    onChange?.(value);
+  };
+  const next = (direction: 1 | -1) => step === undefined ? undefined : stepNumber(valueRef.current, direction, step, min ?? (allowNegative ? undefined : 0), max);
+  const advance = (direction: 1 | -1) => {
+    if (props.disabled) return;
+    const value = next(direction);
+    if (value === undefined) return;
+    // Restore after the controlled value commits, not before the DOM input updates.
+    pendingCursor.current = inputRef.current?.cursorOffset;
+    change(value);
+  };
+  const field = <TextField
+    {...props}
+    variant={stepping && well ? "plain" : props.variant}
+    backgroundColor={well ? colors.panel : props.backgroundColor}
+    label={stepping ? undefined : props.label}
+    accessibleLabel={props.accessibleLabel ?? props.label}
+    inputRef={inputRef}
+    width={stepping && props.width !== undefined ? Math.max(6, props.width - 8) : props.width}
+    onChange={(value) => change(sanitizeNumberInput(value, allowDecimal, allowNegative))}
+    onSubmit={(value) => { if (!props.disabled) onSubmit?.(sanitizeNumberInput(value, allowDecimal, allowNegative)); }}
+    onBlur={(value) => { if (!props.disabled) onBlur?.(sanitizeNumberInput(value, allowDecimal, allowNegative)); }}
+    onKeyDown={(event) => {
+      if (stepping && (event.name === "up" || event.name === "down")) {
+        event.preventDefault(); event.stopPropagation(); advance(event.name === "up" ? 1 : -1); return;
+      }
+      props.onKeyDown?.(event);
+    }}
+  />;
+  if (!stepping) return field;
+  const name = props.accessibleLabel ?? props.label ?? "value";
+  return <Box flexDirection="column" width={props.width}>
+    {props.label ? <FieldLabel label={props.label} active={props.active} /> : null}
+    <Box flexDirection="row" alignItems="center" gap={1} backgroundColor={well ? colors.panel : undefined}
+      // An outline says the well takes typing even before it has focus.
+      style={native && well ? { borderRadius: "var(--gloom-radius-sm)", paddingLeft: 6, boxShadow: props.focused ? `inset 0 0 0 1px ${colors.borderFocused}, inset 0 -2px ${colors.borderFocused}` : `inset 0 0 0 1px ${colors.border}` } : undefined}
+      onMouseScroll={(event: { scroll?: { direction?: string }; preventDefault(): void; stopPropagation(): void }) => {
+      if (props.disabled || !["up", "down"].includes(event.scroll?.direction ?? "")) return;
+      event.preventDefault(); event.stopPropagation();
+      advance(event.scroll?.direction === "up" ? 1 : -1);
+    }}>
+      {field}
+      <Button label={`Decrease ${name}`} displayLabel="-" variant={well ? "plain" : undefined} width={3} compact disabled={props.disabled || next(-1) === undefined} onPress={() => { inputRef.current?.focus?.(); advance(-1); }} />
+      <Button label={`Increase ${name}`} displayLabel="+" variant={well ? "plain" : undefined} width={3} compact disabled={props.disabled || next(1) === undefined} onPress={() => { inputRef.current?.focus?.(); advance(1); }} />
+    </Box>
+  </Box>;
 }

package/src/components/ui/icon.tsx

@@ -36,7 +36,9 @@ export type IconName =
   | "ask"
   | "bot"
   | "team"
-  | "pro";
+  | "pro"
+  | "clock"
+  | "edit";
 
 /** Terminal glyph for each icon; the desktop host draws SVG. */
 export const ICON_GLYPHS: Record<IconName, string> = {
@@ -79,6 +81,9 @@ export const ICON_GLYPHS: Record<IconName, string> = {
   bot: "⍠",
   team: "◉",
   pro: "◊",
+  // Time, for data that arrives late (a delayed quote).
+  clock: "◷",
+  edit: "✎",
 };
 
 export interface IconProps {

package/src/components/ui/list-row-lines.tsx

@@ -0,0 +1,87 @@
+import type { CSSProperties, ReactNode } from "react";
+import { Box, Text, TextAttributes } from "../../ui";
+import { useThemeColors } from "../../theme/theme-context";
+
+/**
+ * Each line's height, in its own type: room for the font's ascent and descent,
+ * so a line's letters sit inside its box in every engine, without relying on
+ * `text-box` trimming (WebKit before 18.2 ignores it). Half of the space
+ * above and below the letters also separates the name from the line under it.
+ */
+const LINE_HEIGHT = 1.2;
+
+/** Room above and below a line for accents and descenders that reach past it. */
+const INK_ROOM = "0.3em";
+
+/**
+ * The line clips for the ellipsis, and WebKit clips both ways whatever the
+ * other axis says, so the clip box reaches past the line by padding, and an
+ * equal negative margin keeps the line where it was.
+ */
+const LINE_STYLE = {
+  display: "block",
+  minWidth: 0,
+  maxWidth: "100%",
+  lineHeight: LINE_HEIGHT,
+  overflow: "hidden",
+  paddingBlock: INK_ROOM,
+  marginBlock: `calc(-1 * ${INK_ROOM})`,
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+} as CSSProperties;
+
+/**
+ * The art beside the two lines (a `LogoMark` of size `lead`) is a square
+ * exactly as tall as the two lines, in their type, so the name and the line
+ * under it always sit within its height, the block centred on it.
+ */
+const LEADING_STYLE: CSSProperties = {
+  flexShrink: 0,
+  fontSize: "var(--gloom-type-ui)",
+  width: `${2 * LINE_HEIGHT}em`,
+  height: `${2 * LINE_HEIGHT}em`,
+};
+
+export interface ListRowLinesProps {
+  label: string;
+  /** The muted line under the label, such as how a broker connects. */
+  description?: string;
+  /** Art before the lines, such as a broker's logo. Decoration: hidden from assistive technology. */
+  leading?: ReactNode;
+  /** The label's colour; the theme's text colour by default. */
+  labelColor?: string;
+  /** The label in bold, as a selected row's. */
+  labelBold?: boolean;
+}
+
+/**
+ * A desktop and web list row's name with one muted line under it, and its
+ * logo before them, the block centred in the row. Every two-line row with
+ * art uses it (`ListView`'s `rowDescriptions`, the first-run guide's list),
+ * so the lines sit on the logo the same way everywhere.
+ */
+export function ListRowLines({ label, description, leading, labelColor, labelBold = false }: ListRowLinesProps) {
+  const colors = useThemeColors();
+  return (
+    <Box
+      flexDirection="row"
+      alignItems="center"
+      minWidth={0}
+      flexShrink={1}
+      data-gloom-role="list-row-lines"
+      style={{ gap: "var(--gloom-space-sm)", fontSize: "var(--gloom-type-ui)" }}
+    >
+      {leading !== undefined && (
+        <Box aria-hidden="true" data-gloom-role="list-row-leading" style={LEADING_STYLE}>
+          {leading}
+        </Box>
+      )}
+      <Box flexDirection="column" minWidth={0} flexShrink={1}>
+        <Text fg={labelColor ?? colors.text} attributes={labelBold ? TextAttributes.BOLD : 0} style={LINE_STYLE}>
+          {label}
+        </Text>
+        {description ? <Text fg={colors.textMuted} style={LINE_STYLE}>{description}</Text> : null}
+      </Box>
+    </Box>
+  );
+}