@gloom-sh/terminal 0.18.5 → 0.19.1

package/src/components/command-bar/workflow/collection-actions.ts

@@ -36,7 +36,7 @@ import { resolvePortfolioTotalsCurrency } from "../../../portfolio/totals-curren
 import { createBaseConverter } from "../../../cli/base-converter";
 import { heldCurrencyUnit } from "../../../utils/currency-units";
 import { positionCostTermsPrefill } from "./portfolio-position";
-import { wholeUnitQuantityProblem } from "../../../portfolio/position-quantity";
+import { ambiguousQuantityProblem } from "../../../portfolio/position-quantity";
 import type { CommandBarFieldValue } from "./types";
 import type { WorkflowStringValues } from "./broker";
 import { coerceFieldString } from "../helpers";
@@ -259,8 +259,8 @@ export function createCommandBarCollectionWorkflowActions(options: {
       // Negative for a short; zero is no position. A future counts contracts, and the messages say so.
       const quantityLabel = positionQuantityLabel(ticker);
       const shares = readTypedNumber(coerceFieldString(values.shares), quantityLabel);
-      // 1.250 on a listing held in whole lots could be 1,250 as well, and asks the same way.
-      const lots = wholeUnitQuantityProblem(coerceFieldString(values.shares).trim(), ticker, { label: quantityLabel });
+      // 1.250 could be 1,250 as well, and asks the same way.
+      const lots = ambiguousQuantityProblem(coerceFieldString(values.shares).trim(), ticker, { label: quantityLabel });
       if (lots) throw new Error(lots);
       const sharesError = validatePositionShares(shares, quantityLabel);
       if (sharesError) {

package/src/components/layout/pane/capture-stamp.ts

@@ -28,10 +28,10 @@ export function usePaneCaptureStamp(paneId: string): string | null {
 
 export function captureStampFooter(footer: CombinedPaneFooter, text: string | null): CombinedPaneFooter {
   if (!text) return footer;
-  // Set apart from what the pane says about its data, which may itself be a time.
+  // The footer sets it apart from what the pane says about its data, which may itself be a time.
   const segment: PaneFooterSegment = {
     id: "capture-stamp",
-    parts: [...(footer.info.length > 0 ? [{ text: "· ", tone: "muted" as const }] : []), { text, tone: "label" }],
+    parts: [{ text, tone: "label" }],
   };
   return {
     ...footer,

package/src/components/layout/pane/footer/index.tsx

@@ -11,7 +11,9 @@ import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { nativePaneFooterRows } from "../sizing";
 import {
   EMPTY_FOOTER,
+  PANE_FOOTER_SEPARATOR,
   fitPaneFooterInfo,
+  separatesPaneFooterSegments,
   hasPaneFooterContent,
   layoutPaneFooterHintRow,
   totalHintsWidth,
@@ -22,6 +24,7 @@ import {
 } from "./model";
 
 export {
+  companyDataFooterSegment,
   datesPaneData,
   DELAYED_SEGMENT,
   delayedFooterSegment,
@@ -267,6 +270,7 @@ function FooterContent({
   // A segment with shorter forms takes the longest that fits beside the hints, gaps and terminal keys included.
   const keysWidth = nativePaneChrome ? 0 : footer.info.reduce((total, segment) => total + terminalSegmentKey(segment, focused).length, 0);
   const info = infoWidth != null ? fitPaneFooterInfo(footer.info, infoWidth - keysWidth, { besideHints: hasHints }) : footer.info;
+  const lastTextIndex = info.findLastIndex((segment) => !segment.icon);
 
   if (!hasInfo && !hasHints) {
     return <Box flexGrow={1} height={1} />;
@@ -291,12 +295,24 @@ function FooterContent({
           flexShrink={1}
           {...(infoWidth != null ? { width: infoWidth } : {})}
         >
-          {info.map((segment, index) => (
-            // An icon is a few cells that mean nothing cut: the text beside it gives way first.
-            <Box key={segment.id} flexDirection="row" flexShrink={segment.icon ? 0 : undefined} marginRight={index === info.length - 1 ? 0 : 1}>
-              <SegmentView segment={segment} focused={focused} />
-            </Box>
-          ))}
+          {info.map((segment, index) => {
+            // Every pane's segments are set apart the same way, so two never read as one sentence.
+            const separated = index > 0 && separatesPaneFooterSegments(info[index - 1]!, segment);
+            return (
+              <Box
+                key={segment.id}
+                flexDirection="row"
+                overflow="hidden"
+                // A row too narrow cuts from its end: the last text segment gives way, then the row clips the
+                // one before it. An icon is a few cells that mean nothing cut, and earlier text says more.
+                flexShrink={!segment.icon && index === lastTextIndex ? 1 : 0}
+                marginLeft={index > 0 && !separated ? 1 : 0}
+              >
+                {separated && <Box flexShrink={0}><Text fg={colors.textMuted}>{PANE_FOOTER_SEPARATOR}</Text></Box>}
+                <SegmentView segment={segment} focused={focused} />
+              </Box>
+            );
+          })}
         </Box>
       )}
       {hasHints && (

package/src/components/layout/pane/footer/model.ts

@@ -1,5 +1,6 @@
 import type { ContextMenuItem } from "../../../../types/context-menu";
-import { t } from "../../../../i18n";
+import { t, tf } from "../../../../i18n";
+import { type CompanyFrom, companyFromLabel } from "../../../../types/company-from";
 import { clipToDisplayWidth, displayWidth } from "../../../../utils/format";
 import { formatShortDate } from "../../../../utils/datetime-format";
 import { getShortcutHintWidth } from "../../../ui/shortcut-hint";
@@ -44,8 +45,9 @@ export interface PaneFooterSegment {
    */
   quoteStatus?: boolean;
   /**
-   * The segment says what the rows leave out (releases a filter hides), which
-   * a picture of the rows cannot: a `gloom shot` keeps it, as it keeps a
+   * The segment says what the rows leave out (releases a filter hides), or
+   * whose they are (a receipt's company data from its home line), which a
+   * picture of the rows cannot: a `gloom shot` keeps it, as it keeps a
    * warning.
    */
   capture?: boolean;
@@ -117,6 +119,26 @@ export function savedCopyFooterSegment(id: string, savedAt: number, now = Date.n
   };
 }
 
+/**
+ * The footer's one form for company data a pane shows from another listing
+ * of the company: a receipt or a foreign line (SKHY, HY9H in Frankfurt) reads
+ * its home line's news, filings or holders, `company data from 000660 KRX`.
+ * Null when the data is the listing's own.
+ */
+export function companyDataFooterSegment(from: CompanyFrom | null | undefined): PaneFooterSegment | null {
+  if (!from) return null;
+  const listing = companyFromLabel(from);
+  const text = tf("company data from {listing}", { listing });
+  return {
+    id: "company-data",
+    title: from.name ? `${text} (${from.name})` : text,
+    // A capture of the rows keeps it: the picture cannot say whose they are.
+    capture: true,
+    parts: [{ text, tone: "muted" }],
+    variants: [[{ text: tf("from {listing}", { listing }), tone: "muted" }]],
+  };
+}
+
 /** A pane whose market data is all delayed, by no one figure: the clock alone, its tooltip saying so. */
 export const DELAYED_SEGMENT: PaneFooterSegment = delayedFooterSegment({ id: "delayed", detail: "Delayed market data" });
 
@@ -202,6 +224,25 @@ const INFO_FLOOR_CHARS = 10;
 const WARNING_FLOOR_CHARS = 24;
 const HINT_GAP = 1;
 
+/**
+ * What the footer draws between two info segments, muted, as a status draws
+ * between its own parts ("Newest story Mon 14:23 · 12h delayed"): two
+ * segments side by side never read as one sentence ("company data from PBR ·
+ * as of 2026-06-30"). An icon (`⚠[!]`, `◷15m`) is a mark, not a phrase: a
+ * column sets it apart.
+ */
+export const PANE_FOOTER_SEPARATOR = " · ";
+const SEPARATOR_WIDTH = displayWidth(PANE_FOOTER_SEPARATOR);
+
+/** Whether the footer draws {@link PANE_FOOTER_SEPARATOR} between two adjacent segments, else a one-column gap. */
+export function separatesPaneFooterSegments(before: Pick<PaneFooterSegment, "icon">, after: Pick<PaneFooterSegment, "icon">): boolean {
+  return !before.icon && !after.icon;
+}
+
+function segmentGapWidth(before: PaneFooterSegment, after: PaneFooterSegment): number {
+  return separatesPaneFooterSegments(before, after) ? SEPARATOR_WIDTH : 1;
+}
+
 function paneHintWidth(hint: Pick<PaneHint, "key" | "label">, prefix = ""): number {
   return getShortcutHintWidth(hint.key, hint.label, prefix);
 }
@@ -216,15 +257,12 @@ function infoTextWidth(segments: readonly PaneFooterSegment[]): number {
     const text = segment.parts.reduce((sum, part, partIndex) => (
       sum + (partIndex > 0 ? 1 : 0) + displayWidth(part.text)
     ), 0);
-    return total + (index > 0 ? 1 : 0) + text;
+    return total + (index > 0 ? segmentGapWidth(segments[index - 1]!, segment) : 0) + text;
   }, 0);
 }
 
-/**
- * The info segments as they fit `width`: segments with `variants` step down
- * together, one variant at a time, until the row fits or none is left.
- */
-export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number, { besideHints = true }: { besideHints?: boolean } = {}): PaneFooterSegment[] {
+/** Segments with `variants` step down together, one variant at a time, until they fit or none is left. */
+function stepDownTogether(info: PaneFooterSegment[], width: number): PaneFooterSegment[] {
   const stages = Math.max(0, ...info.map((segment) => segment.variants?.length ?? 0));
   let fitted = info;
   for (let stage = 0; stage < stages && infoTextWidth(fitted) > width; stage += 1) {
@@ -237,20 +275,50 @@ export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number, { be
       } : segment;
     });
   }
-  // A trailing status cut mid-word reads as part of the hints beside it ("quote 12h t[x] put"): one that does not
-  // fit ends in an ellipsis a column short of them, or is left out when less than half of it would show. A
-  // warning, an icon or a pressable segment stays as it is, clipped by the row if it must be. With no hints beside it
-  // (a pane picture's footer), the row clips it, so a frame that fits its own status line sees it overflow.
-  while (besideHints && fitted.length > 1 && infoTextWidth(fitted) > width) {
+  return fitted;
+}
+
+/**
+ * A trailing status cut mid-word reads as part of the hints beside it ("quote
+ * 12h t[x] put"): one that does not fit ends in an ellipsis a column short of
+ * them, or is left out when less than half of it would show, until the row
+ * fits or `keep` segments are left. A warning, an icon or a pressable segment
+ * stays as it is, clipped by the row if it must be.
+ */
+function trimTrailing(info: PaneFooterSegment[], width: number, keep: number): PaneFooterSegment[] {
+  let fitted = info;
+  while (fitted.length > keep && infoTextWidth(fitted) > width) {
     const last = fitted.at(-1)!;
     if (last.icon || last.onPress || last.parts.some((part) => part.tone === "warning" || part.tone === "negative")) break;
-    const room = width - infoTextWidth(fitted.slice(0, -1)) - 2;
+    // After the separator, a column short of the hints.
+    const room = width - infoTextWidth(fitted.slice(0, -1)) - segmentGapWidth(fitted.at(-2)!, last) - 1;
     if (room * 2 >= infoTextWidth([last])) return [...fitted.slice(0, -1), clipSegment(last, room)];
     fitted = fitted.slice(0, -1);
   }
   return fitted;
 }
 
+/**
+ * The info segments as they fit `width`: segments with `variants` step down
+ * together, one variant at a time, until the row fits or none is left; beside
+ * the hints, the trailing status that still does not fit is then cut or left
+ * out (trimTrailing). A status after every segment with shorter forms gives
+ * way first, before any of them shortens: a pane puts what goes first last
+ * (an update time after a note that explains the row in hand).
+ *
+ * With no hints beside it (a pane picture's footer), the row clips the rest,
+ * so a frame that fits its own status line sees it overflow.
+ */
+export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number, { besideHints = true }: { besideHints?: boolean } = {}): PaneFooterSegment[] {
+  if (!besideHints) return stepDownTogether(info, width);
+  const lastWithVariants = info.findLastIndex((segment) => (segment.variants?.length ?? 0) > 0);
+  if (lastWithVariants >= 0 && lastWithVariants < info.length - 1 && infoTextWidth(info) > width) {
+    const trimmed = trimTrailing(info, width, lastWithVariants + 1);
+    if (infoTextWidth(trimmed) <= width) return trimmed;
+  }
+  return trimTrailing(stepDownTogether(info, width), width, 1);
+}
+
 /** A segment cut to `width` behind an ellipsis, each part keeping its tone; the full text stays as its title. */
 function clipSegment(segment: PaneFooterSegment, width: number): PaneFooterSegment {
   const full = segment.parts.map((part) => part.text).join(" ");

package/src/components/layout/pane/status-footer.ts

@@ -1,5 +1,7 @@
-import { useMemo } from "react";
-import { usePaneFooter, type PaneFooterSegment, type PaneHint } from "./footer";
+import { useId, useMemo } from "react";
+import { companyDataFooterSegment, usePaneFooter, type PaneFooterSegment, type PaneHint } from "./footer";
+import type { CompanyFrom } from "../../../types/company-from";
+import { useAppLanguage } from "../../../i18n/react";
 import { useExternalLinkFooter } from "../../use-external-link-footer";
 import { loadingErrorFooterInfo } from "../../data-table/table-pane";
 
@@ -28,6 +30,37 @@ function buildPaneStatusInfo({
   return [...info, ...(stale ? [STALE_SEGMENT] : []), ...loadingErrorFooterInfo(loading, error)];
 }
 
+/**
+ * Where the company data note sits: after the warning indicator (-10) and
+ * before the pane's own status (0 and the ticker quote's -1), so it leads what
+ * the pane says about its data and a narrow footer cuts that status first.
+ */
+const COMPANY_DATA_ORDER = -5;
+
+/**
+ * A company pane on a receipt or a foreign line that shows its company's data
+ * from the home line says which: `company data from 000660 KRX · as of
+ * 2026-06-30`, before the pane's own status (after a warning). Nothing when
+ * the data is the listing's own. Every company pane registers it here, so it
+ * reads, looks and sits the same in each.
+ */
+export function useCompanyDataFooter(companyFrom: CompanyFrom | null | undefined, enabled = true) {
+  const language = useAppLanguage();
+  const segment = useMemo(() => companyDataFooterSegment(companyFrom), [
+    language,
+    companyFrom?.symbol,
+    companyFrom?.exchange,
+    companyFrom?.name,
+  ]);
+  // Its own registration, so a view nested in a pane (13D/G under holders) never clears the pane's.
+  const id = useId();
+  usePaneFooter(
+    `company-data:${id}`,
+    () => enabled && segment ? { order: COMPANY_DATA_ORDER, info: [segment] } : null,
+    [enabled, segment],
+  );
+}
+
 export function usePaneStatusFooter({
   registrationId,
   loading = false,

package/src/components/layout/status-widget-space.ts

@@ -53,6 +53,15 @@ export function usePublishStatusWidgetRoom(columns: number): void {
   }, []);
 }
 
+/**
+ * Extra columns the other widgets claim, for a widget that sizes itself to
+ * what they leave rather than run into them.
+ */
+export function useOtherStatusWidgetClaims(id: string): number {
+  const others = () => claimedColumns() - (claims.get(id) ?? 0);
+  return useSyncExternalStore(subscribe, others, others);
+}
+
 /** The columns the widgets can use, as the status bar last published them. */
 export function useStatusWidgetRoom(): number {
   return useSyncExternalStore(subscribe, () => room, () => room);

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

@@ -421,7 +421,10 @@ export function OnboardingWizard(props: OnboardingWizardProps) {
             {persistenceError}
           </Text>
         ) : null}
-        <OnboardingActions hint={portfolioSub === "positions" && desktop ? tf("Later: {shortcut}, then AP.", { shortcut: commandBarShortcut }) : undefined}>
+        <OnboardingActions hint={portfolioSub === "positions" && desktop
+          // The step needs one ticker; once it has one, more can be added later.
+          ? positionCount === 0 ? t("Add one ticker to continue.") : tf("Later: {shortcut}, then AP.", { shortcut: commandBarShortcut })
+          : undefined}>
           {portfolioSub === "positions" ? (
             <>
               {brokerOptions.length > 0 && positionCount > 0 ? (

package/src/components/onboarding/portfolio-step/positions-panel.tsx

@@ -279,6 +279,17 @@ function TuiFieldRow({
   );
 }
 
+/**
+ * The line under the form: what Enter does, and how the step goes on. It
+ * needs one ticker, and while a field has the keyboard Enter adds, so Esc
+ * comes first.
+ */
+function positionsHint(editing: boolean, count: number): string {
+  if (!editing && count > 0) return tf("Enter continues · a adds another{broker}", { broker: "" });
+  const enter = editing ? t("Enter: next field, then add") : t("Enter to add a ticker");
+  return `${enter} · ${count > 0 ? t("Esc, then Enter: continue") : t("Add one ticker to continue")}`;
+}
+
 /** The size held: negative for a short. */
 function SignedNumberField(props: ComponentProps<typeof NumberField>) {
   return <NumberField {...props} allowNegative />;
@@ -302,13 +313,7 @@ function TuiPositionsPanel({ state, inputRef, editing, selectedSymbol, shortcut
         ) : state.submitting ? (
           <Text fg={colors.textDim}>{t("adding...")}</Text>
         ) : (
-          <Text fg={colors.textMuted}>
-            {editing
-              ? t("Enter: next field, then add.")
-              : state.positions.length > 0
-                ? tf("Enter continues · a adds another{broker}", { broker: "" })
-                : t("Enter to add a ticker.")}
-          </Text>
+          <Text fg={colors.textMuted}>{positionsHint(editing, state.positions.length)}</Text>
         )}
       </Box>
       <Box height={1} />

package/src/components/onboarding/wizard-broker-sync.ts

@@ -160,7 +160,6 @@ export function useOnboardingBrokerSync({
     draftConfig?: AppConfig,
   ) => importBrokerPositions(instanceId, undefined, {
     config: draftConfig,
-    persistResolvedBrokerConfig: true,
     signal,
     onCommitStart: () => {
       if (brokerSyncAttemptRef.current !== attemptId) return;

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

@@ -12,7 +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 { ambiguousQuantityProblem } 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";
@@ -292,8 +292,8 @@ 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 });
+        // 1.250 could be 1,250 as well, and asks as 1,250 does.
+        const lots = ambiguousQuantityProblem(current.shares.trim(), ticker, { label: quantityLabel });
         if (lots) {
           setFieldIdx(1);
           setError(lots);

package/src/components/ticker/list-table-view.tsx

@@ -29,11 +29,11 @@ import type { QuoteFlashDirection } from "../quote-flash";
 import { objectVersion } from "../../utils/object-version";
 import { getCompletedRegularSessionDisplay } from "../../market-data/market/status";
 import { usePaneFooter } from "../layout/pane/footer";
-import { Button } from "../ui/button";
-import { PaneStatusBody } from "../ui/status";
 
 export interface TickerTableCell {
   text: string;
+  /** Muted context after `text`, shown whole only when both fit on one line. */
+  note?: string;
   color?: string;
   /** The full-precision number behind a rounded `text`, which exports and rendered-view reports keep. */
   value?: number | null;
@@ -97,11 +97,10 @@ export interface TickerListTableViewProps {
   emptyTitle?: string;
   emptyHint?: string;
   /**
-   * Starts the pane's add-ticker flow. Given, the empty table offers a
-   * "+ ticker" button for it and says so before the key.
+   * The pane's own key for adding a ticker, which the empty table names. The
+   * command bar's key when absent. The pane shows its add control once, in its
+   * own row, so the empty table points at the key and offers no second one.
    */
-  onAddTicker?: () => void;
-  /** The pane's key for the same flow, named after the click. The command bar's key when absent. */
   addTickerShortcut?: string;
   virtualize?: boolean;
   overscan?: number;
@@ -235,24 +234,12 @@ export function TickerListTableView({
   rowMenuAccelerators,
   emptyTitle = t("No tickers."),
   emptyHint,
-  onAddTicker,
   addTickerShortcut,
   virtualize = true,
   overscan = 4,
 }: TickerListTableViewProps) {
   const commandBarShortcut = useCommandBarShortcut();
-  const addLabel = `+ ${t("ticker")}`;
-  const resolvedEmptyHint = emptyHint ?? (onAddTicker
-    ? tf("Click {button} to add one, or press {shortcut}.", { button: addLabel, shortcut: addTickerShortcut ?? commandBarShortcut })
-    : tf("Press {shortcut} to add one.", { shortcut: commandBarShortcut }));
-  const emptyContent = onAddTicker ? (
-    <PaneStatusBody
-      empty
-      emptyTitle={emptyTitle}
-      emptyMessage={resolvedEmptyHint}
-      actions={<Button label="Add ticker" displayLabel={addLabel} compact onPress={onAddTicker} />}
-    />
-  ) : undefined;
+  const resolvedEmptyHint = emptyHint ?? tf("Press {shortcut} to add one.", { shortcut: addTickerShortcut ?? commandBarShortcut });
   const renderer = useRendererHost();
   const { showContextMenu } = useContextMenu();
   const { nativeContextMenu } = useUiCapabilities();
@@ -293,11 +280,12 @@ export function TickerListTableView({
       };
     }
 
-    const { text, color, onPress, value, backgroundColor } = resolveCellRef.current.resolve(column, ticker, financials);
+    const { text, note, color, onPress, value, backgroundColor } = resolveCellRef.current.resolve(column, ticker, financials);
     const shouldFlash = flashSymbolsRef.current.has(ticker.metadata.ticker)
       && flashesOnQuoteTick(column.id, financials?.quote);
     return {
       text,
+      ...(note ? { note } : {}),
       ...(value !== undefined ? { value } : {}),
       color: color || (rowState.selected ? colors.selectedText : undefined),
       attributes: shouldFlash ? TextAttributes.DIM : TextAttributes.NONE,
@@ -395,7 +383,6 @@ export function TickerListTableView({
       getRowVersion={getRowVersion}
       emptyStateTitle={emptyTitle}
       emptyStateHint={resolvedEmptyHint}
-      emptyContent={emptyContent}
       virtualize={virtualize}
       overscan={overscan}
       rootBefore={rootBefore}

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

@@ -6,10 +6,13 @@ import { t } from "../../i18n";
 import { DialogFrame, fitDialogWidth } from "./frame";
 import { ListView, listCursorMove, type ListViewItem } from "./list-view";
 import { clampIndex } from "../../utils/math";
+import { withChoiceGroupHeadings } from "./choice-groups";
 
 export interface ChoiceDialogChoice {
   id: string;
   label: string;
+  /** Heading for consecutive choices in the same group. */
+  group?: string;
   description?: string;
   detail?: string;
   disabled?: boolean;
@@ -31,10 +34,10 @@ function getChoiceDescription(choice: ChoiceDialogChoice | undefined): string {
   return choice?.description ?? "";
 }
 
-function getInitialChoiceIndex(choices: ChoiceDialogChoice[], selectedChoiceId: string | undefined): number {
+function getInitialChoiceIndex(choices: ListViewItem[], selectedChoiceId: string | undefined): number {
   if (!selectedChoiceId) return choices.findIndex((choice) => !choice.disabled);
-  const selectedIndex = choices.findIndex((choice) => choice.id === selectedChoiceId);
-  return selectedIndex >= 0 ? selectedIndex : 0;
+  const selectedIndex = choices.findIndex((choice) => choice.id === selectedChoiceId && choice.kind !== "heading");
+  return selectedIndex >= 0 ? selectedIndex : choices.findIndex((choice) => choice.kind !== "heading");
 }
 
 function choiceDialogWidth(title: string, choices: ChoiceDialogChoice[]): number {
@@ -42,6 +45,7 @@ function choiceDialogWidth(title: string, choices: ChoiceDialogChoice[]): number
     title.length,
     ...choices.map((choice) => choice.label.length + (choice.detail ? choice.detail.length + 4 : 0)),
     ...choices.map((choice) => getChoiceDescription(choice).length),
+    ...choices.map((choice) => choice.group?.length ?? 0),
   );
   return Math.max(34, Math.min(76, contentWidth + 4));
 }
@@ -56,27 +60,28 @@ export function ChoiceDialog({
 }: ChoiceDialogProps) {
   const colors = useThemeColors();
   const desktop = useUiHost().kind === "desktop-web";
-  const [index, setIndex] = useState(() =>
-    clampIndex(getInitialChoiceIndex(choices, selectedChoiceId), choices.length, -1)
-  );
-  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) => ({
+  const items = useMemo<ListViewItem[]>(() => withChoiceGroupHeadings(choices.map((choice) => ({
     id: choice.id,
     label: choice.label,
+    group: choice.group,
     description: getChoiceDescription(choice),
     detail: choice.detail,
     disabled: choice.disabled,
     color: choice.color,
-  })), [choices]);
+  }))), [choices]);
+  const [index, setIndex] = useState(() =>
+    clampIndex(getInitialChoiceIndex(items, selectedChoiceId), items.length, -1)
+  );
+  const selectedIndex = clampIndex(index, items.length, -1);
+  const selectedChoice = selectedIndex >= 0 ? items[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 width = useMemo(() => choiceDialogWidth(title, choices), [choices, title]);
 
   useEffect(() => {
-    selectIndex(clampIndex(cursor.current, choices.length, -1));
-  }, [choices.length]);
+    selectIndex(clampIndex(cursor.current, items.length, -1));
+  }, [items.length]);
 
   const activateChoice = (choice: ChoiceDialogChoice | undefined) => {
     if (!choice || choice.disabled) return;
@@ -87,9 +92,9 @@ export function ChoiceDialog({
     event.stopPropagation();
     const move = listCursorMove(event, MAX_VISIBLE_CHOICE_ROWS - 1);
     if (move) {
-      selectIndex(move(choices, cursor.current));
+      selectIndex(move(items, cursor.current));
     } else if (event.name === "enter" || event.name === "return") {
-      activateChoice(choices[clampIndex(cursor.current, choices.length, -1)]);
+      activateChoice(items[clampIndex(cursor.current, items.length, -1)]);
     } else if (event.name === "escape") {
       resolve("");
     }
@@ -110,7 +115,7 @@ export function ChoiceDialog({
           scrollable={items.length > MAX_VISIBLE_CHOICE_ROWS}
           selectOnHover
           onSelect={selectIndex}
-          onActivate={(_, nextIndex) => activateChoice(choices[nextIndex])}
+          onActivate={activateChoice}
         />
         <Box height={1} />
         <Text fg={colors.textDim} wrapText>{getChoiceDescription(selectedChoice)}</Text>

package/src/components/ui/choice-groups.ts

@@ -0,0 +1,18 @@
+interface ChoiceGroupHeading {
+  id: string;
+  label: string;
+  kind: "heading";
+  disabled: true;
+}
+
+/** Label each contiguous group without changing the order or identity of its choices. */
+export function withChoiceGroupHeadings<T extends { group?: string }>(choices: readonly T[]): Array<T | ChoiceGroupHeading> {
+  let previousGroup: string | undefined;
+  return choices.flatMap((choice, index): Array<T | ChoiceGroupHeading> => {
+    const heading = choice.group && choice.group !== previousGroup
+      ? { id: `\u0000group:${index}`, label: choice.group, kind: "heading" as const, disabled: true as const }
+      : null;
+    previousGroup = choice.group;
+    return heading ? [heading, choice] : [choice];
+  });
+}

package/src/components/ui/data-table/opentui/index.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, ScrollBox, Text, TextAttributes, useNativeRenderer } from "../../../../ui";
+import { Box, ScrollBox, Span, Text, TextAttributes, useNativeRenderer } from "../../../../ui";
 import { hoverBg } from "../../../../theme/colors";
 import { useThemeColors } from "../../../../theme/theme-context";
 import { usePaneInstance } from "../../../../state/app/context";
@@ -12,7 +12,6 @@ import { EmptyState } from "../../status";
 import { observeScrollBoxContentSize, observeScrollBoxViewportSize } from "../../../../renderers/opentui/scrollbox-layout";
 import {
   expandTableColumns,
-  fitTableCellText,
   fitTableHeaderText,
   getTableWidth,
   hasMeaningfulTableHorizontalOverflow,
@@ -30,6 +29,7 @@ import { useFocusOwningPane, useVisibleRangeEmitter } from "../hooks";
 import { useStableColumns } from "../stable-columns";
 import {
   cutColumnText,
+  fitColumnCellText,
   resolveDataTableColumnClips,
   resolveDataTableVisibleWindow,
   resolveMoreColumnsHint,
@@ -212,10 +212,8 @@ function OpenTuiDataTableRowInner<
         const shownWidth = clip ? clip.width : column.width - inset;
         // Cut text is fitted to what shows; a number the edge cuts stays blank in its own place,
         // and its cell keeps its background and its press.
-        const shownText = clip
-          ? cutColumnText(cell.text, column.align, column.width, clip, (text, width) => fitTableCellText(text, width, column.align))
-          : shownWidth > 0 ? fitTableCellText(cell.text, shownWidth, column.align) : "";
-        const contentCut = clip !== null && column.align === "right" && shownText.trim() === "";
+        const fitted = fitColumnCellText(cell.text, clip ? column.width : shownWidth, column.align, clip, cell.note);
+        const contentCut = clip !== null && column.align === "right" && fitted.text.trim() === "";
         return (
           <Box
             key={column.id}
@@ -255,7 +253,11 @@ function OpenTuiDataTableRowInner<
                   ? colors.selectedText
                   : cell.color ?? colors.text}
               >
-                {`${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${shownText}${frozen ? " ".repeat(columnGap) : ""}`}
+                {fitted.note ? <>
+                  {`${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${fitted.text}`}
+                  <Span fg={colors.textDim} attributes={TextAttributes.NONE}>{fitted.note}</Span>
+                  {`${fitted.padding ?? ""}${frozen ? " ".repeat(columnGap) : ""}`}
+                </> : `${frozen ? " ".repeat(horizontalPadding) : ""}${" ".repeat(inset)}${fitted.text}${frozen ? " ".repeat(columnGap) : ""}`}
               </Text>
             )}
           </Box>