gloomberb 0.16.3 → 0.16.5

package/src/components/sign-in-gate.tsx

@@ -11,13 +11,13 @@ import { useState } from "react";
 import { t } from "../i18n";
 import { useAppLanguage } from "../i18n/react";
 import { matchesKeyChord, parseKeyChord } from "../app/keybindings";
-import { AuthForm, authFormTitle } from "../plugins/builtin/cloud/auth-form";
-import type { AccountMode } from "../plugins/builtin/cloud/auth-model";
+import { AuthForm, authFormTitle } from "../account/auth-form";
+import type { AccountMode } from "../account/auth-model";
 import {
   DeviceSignInPanel,
   isDeviceSignInRetryKey,
   useDeviceSignIn,
-} from "../plugins/builtin/cloud/device-signin-dialog";
+} from "../account/device-signin-dialog";
 import { useShortcut, useViewport } from "../react/input";
 import { useThemeColors } from "../theme/theme-context";
 import { Box, Text } from "../ui";

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

@@ -29,6 +29,8 @@ 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;
@@ -83,6 +85,13 @@ export interface TickerListTableViewProps {
   rowMenuAccelerators?: Readonly<Record<string, string>>;
   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.
+   */
+  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;
 }
@@ -214,11 +223,24 @@ export function TickerListTableView({
   rowMenuAccelerators,
   emptyTitle = t("No tickers."),
   emptyHint,
+  onAddTicker,
+  addTickerShortcut,
   virtualize = true,
   overscan = 4,
 }: TickerListTableViewProps) {
   const commandBarShortcut = useCommandBarShortcut();
-  const resolvedEmptyHint = emptyHint ?? tf("Press {shortcut} to add one.", { shortcut: commandBarShortcut });
+  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 renderer = useRendererHost();
   const { showContextMenu } = useContextMenu();
   const { nativeContextMenu } = useUiCapabilities();
@@ -349,6 +371,7 @@ export function TickerListTableView({
       getRowVersion={getRowVersion}
       emptyStateTitle={emptyTitle}
       emptyStateHint={resolvedEmptyHint}
+      emptyContent={emptyContent}
       virtualize={virtualize}
       overscan={overscan}
       rootBefore={rootBefore}

package/src/components/ui/action-row.tsx

@@ -22,7 +22,8 @@ export function ActionRow({ label, children, expanded, active, disabled, fg, ...
   const foreground = disabled ? colors.textMuted : fg ?? (active ? colors.textBright : colors.text);
   return (
     <Button {...props} label={label} active={active} disabled={disabled} expanded={expanded} variant="plain" compact flush stopPropagation>
-      <Box flexDirection="row" width="100%" alignItems="center" gap={1}>
+      {/* A label of two lines reads from the left; a desktop button would centre the shorter one. */}
+      <Box flexDirection="row" width="100%" alignItems="center" gap={1} style={{ textAlign: "left" }}>
         {expanded !== undefined && <DisclosureMarker expanded={expanded} color={foreground} width={2} />}
         <Text fg={foreground} attributes={active ? TextAttributes.BOLD : 0}>{t(label)}</Text>
         {children}

package/src/components/ui/button.tsx

@@ -4,6 +4,7 @@ import { type ComponentType, type ReactNode } from "react";
 import type { ThemeColors } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
+import { displayWidth } from "../../utils/format";
 import { useRemoteUiNode, useRemoteUiScope } from "../../remote/semantic-tree";
 import { useScopedButtonAction } from "./action-scope";
 
@@ -27,6 +28,11 @@ export interface ButtonProps {
   disabled?: boolean;
   active?: boolean;
   shortcut?: string;
+  /**
+   * The key that presses it, as a keycap on the desktop and the web only: for
+   * a dialog button whose key the terminal names in the footer line instead.
+   */
+  desktopShortcut?: string;
   /** Tooltip, when it should say more than the label. */
   title?: string;
   width?: number;
@@ -66,6 +72,15 @@ function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled:
   }
 }
 
+/**
+ * Terminal cells a button takes: the padded label, then its key. For a row that
+ * has to know whether its buttons fit before it lays them out.
+ */
+export function terminalButtonColumns({ label, displayLabel, shortcut, compact = false }: Pick<ButtonProps, "label" | "displayLabel" | "shortcut" | "compact">): number {
+  const text = displayLabel ?? t(label);
+  return displayWidth(compact ? text : ` ${text} `) + (shortcut ? 1 + displayWidth(shortcut) : 0);
+}
+
 export function Button({
   label: rawLabel,
   displayLabel,
@@ -76,6 +91,7 @@ export function Button({
   disabled = false,
   active = false,
   shortcut,
+  desktopShortcut,
   width,
   height,
   compact = false,
@@ -110,7 +126,7 @@ export function Button({
         variant={variant}
         disabled={disabled}
         active={active}
-        shortcut={shortcut}
+        shortcut={shortcut ?? desktopShortcut}
         title={title}
         width={width}
         height={height}

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

@@ -1,9 +1,9 @@
 import { useEffect, useMemo, useState } from "react";
-import { Box, Text } from "../../ui";
+import { Box, Text, useUiHost } from "../../ui";
 import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
 import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
-import { DialogFrame } from "./frame";
+import { DialogFrame, fitDialogWidth } from "./frame";
 import { ListView, listCursorMove, type ListViewItem } from "./list-view";
 import { clampIndex } from "../../utils/math";
 
@@ -53,6 +53,7 @@ export function ChoiceDialog({
   bgColor,
 }: ChoiceDialogProps) {
   const colors = useThemeColors();
+  const desktop = useUiHost().kind === "desktop-web";
   const [index, setIndex] = useState(() =>
     clampIndex(getInitialChoiceIndex(choices, selectedChoiceId), choices.length, -1)
   );
@@ -90,7 +91,8 @@ export function ChoiceDialog({
 
   return (
     <DialogFrame title={title} footer={footer} showTitleDivider={false}>
-      <Box flexDirection="column" width={width}>
+      {/* Never wider than the dialog: the terminal's box is 60 columns, a phone narrower than the cells asked for. */}
+      <Box flexDirection="column" {...(desktop ? { style: { width: fitDialogWidth(width) } } : { width, maxWidth: "100%" })}>
         <ListView
           items={items}
           selectedIndex={selectedIndex}
@@ -105,7 +107,7 @@ export function ChoiceDialog({
           onActivate={(_, nextIndex) => activateChoice(choices[nextIndex])}
         />
         <Box height={1} />
-        <Text fg={colors.textDim} wrapText width={width}>{getChoiceDescription(selectedChoice)}</Text>
+        <Text fg={colors.textDim} wrapText>{getChoiceDescription(selectedChoice)}</Text>
       </Box>
     </DialogFrame>
   );

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

@@ -1,11 +1,12 @@
-import { useCallback, type ReactNode } from "react";
-import { Box, Text } from "../../ui";
+import { useCallback, useRef, type ReactNode } from "react";
+import { Box, Text, useUiHost } from "../../ui";
 import { colors } from "../../theme/colors";
 import { t, tf } from "../../i18n";
 import { type DialogApi, type PromptContext, useDialogKeyboard } from "../../ui/dialog";
 import { isPlainKey } from "../../utils/keyboard";
 import { Button, type ButtonVariant } from "./button";
-import { DialogFrame } from "./frame";
+import { DialogActions } from "./dialog-actions";
+import { DialogFrame, fitDialogWidth } from "./frame";
 
 export interface ConfirmDialogProps extends PromptContext<boolean> {
   title: string;
@@ -14,7 +15,10 @@ export interface ConfirmDialogProps extends PromptContext<boolean> {
   cancelLabel?: string;
   confirmVariant?: ButtonVariant;
   width?: number;
-  /** The key-hint line under the buttons; an empty string leaves it out. */
+  /**
+   * The terminal's key-hint line under the buttons; an empty string leaves it
+   * out, and the keys off the desktop buttons too.
+   */
   footer?: string;
   /** A line under the body: the work the confirm started, or why it failed. */
   status?: ReactNode;
@@ -27,6 +31,11 @@ export interface ConfirmDialogProps extends PromptContext<boolean> {
    * action, at the right. By default the action comes first, at the left.
    */
   formButtons?: boolean;
+  /**
+   * How long after opening Enter and `y` do not confirm, for a confirm that
+   * opens on its own while the person may be typing. Esc and `n` always answer.
+   */
+  keyGraceMs?: number;
 }
 
 export function ConfirmDialog({
@@ -42,7 +51,10 @@ export function ConfirmDialog({
   busy = false,
   onClose,
   formButtons = false,
+  keyGraceMs = 0,
 }: ConfirmDialogProps) {
+  const desktop = useUiHost().kind === "desktop-web";
+  const openedAt = useRef(Date.now());
   const confirm = useCallback(() => resolve(true), [resolve]);
   const cancel = useCallback(() => resolve(false), [resolve]);
 
@@ -61,6 +73,7 @@ export function ConfirmDialog({
     }
     if (event.name === "enter" || event.name === "return" || isPlainKey(event, "y")) {
       event.preventDefault();
+      if (Date.now() - openedAt.current < keyGraceMs) return;
       confirm();
       return;
     }
@@ -73,15 +86,19 @@ export function ConfirmDialog({
     if (event.name === "tab") event.preventDefault();
   }, { allowEditable: true });
 
-  const confirmButton = <Button label={confirmLabel} variant={confirmVariant} disabled={busy} onPress={confirm} />;
-  const cancelButton = <Button label={cancelLabel} variant="secondary" disabled={busy} onPress={cancel} />;
+  // The desktop shows the keys on the buttons instead of a footer line; a
+  // confirm with no key line keeps its buttons plain there too.
+  const keys = footer !== "";
+  const confirmButton = <Button label={confirmLabel} variant={confirmVariant} disabled={busy} desktopShortcut={keys ? "Enter" : undefined} onPress={confirm} />;
+  const cancelButton = <Button label={cancelLabel} variant="secondary" disabled={busy} desktopShortcut={keys ? "Esc" : undefined} onPress={cancel} />;
   return (
     <DialogFrame
       title={title}
       footer={footer ?? tf("Enter {action} · Esc cancel", { action: t(confirmLabel).toLowerCase() })}
+      desktopFooter={null}
       onClose={onClose}
     >
-      <Box flexDirection="column" width={width}>
+      <Box flexDirection="column" {...(desktop ? { style: { width: fitDialogWidth(width) } } : { width })}>
         {renderBody(body)}
         {status && (
           <>
@@ -90,17 +107,10 @@ export function ConfirmDialog({
           </>
         )}
         <Box height={1} />
-        {formButtons ? (
-          <Box flexDirection="row" gap={1} justifyContent="flex-end">
-            {cancelButton}
-            {confirmButton}
-          </Box>
-        ) : (
-          <Box flexDirection="row" gap={1}>
-            {confirmButton}
-            {cancelButton}
-          </Box>
-        )}
+        <DialogActions alignEnd={formButtons}>
+          {formButtons ? cancelButton : confirmButton}
+          {formButtons ? confirmButton : cancelButton}
+        </DialogActions>
       </Box>
     </DialogFrame>
   );

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

@@ -27,6 +27,8 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
   const renderer = useRendererHost();
   const propsRef = useRef(props);
   propsRef.current = props;
+  // The semantic snapshot can be taken every frame; the rows are rebuilt only when what they are drawn from changes.
+  const reportedRowsRef = useRef<{ source: readonly unknown[]; rows: ReturnType<typeof reportedRows> } | null>(null);
 
   useEffect(() => {
     if (!paneId || !renderer.saveTextFile) return;
@@ -90,6 +92,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>(
       columns: props.columns.map((column) => ({ id: column.id, label: column.label })),
       rowCount: props.items.length,
       selectedId: firstSelectedId(props),
+      ...(props.reportEveryRow ? { rows: cachedReportedRows(props, reportedRowsRef) } : {}),
     }),
   });
   // Header labels read the same in every table whatever case a pane wrote
@@ -119,6 +122,52 @@ function resolveTableIndex<T, C extends DataTableColumn>(
   return resolveRemoteItemIndex(input, props.items, { id: key, key });
 }
 
+/**
+ * Every row as a report reads it: the key, whether it is selected and each
+ * column's text, the same text the cells draw. Captured with the semantic
+ * snapshot, so a row scrolled out of the viewport still reaches the report.
+ * A section header sits in the first column and a time cell carries the
+ * instant behind its short text, as the capture of a drawn row reads them.
+ */
+function reportedRows<T, C extends DataTableColumn>(props: DataTableProps<T, C>) {
+  const normalize = (text: string) => text.replace(/\s+/g, " ").trim();
+  const first = props.columns[0];
+  return props.items.map((item, index) => {
+    const selected = props.isSelected(item, index);
+    const section = props.renderSectionHeader?.(item, index);
+    const cells = section
+      ? [{
+        ...(first ? { columnId: first.id } : {}),
+        columnLabel: first?.label ?? "Row",
+        text: normalize(section.action ? `${section.text} ${section.action.label}` : section.text),
+      }]
+      : props.columns.map((column) => {
+        const cell = props.renderCell(item, column, index, { selected });
+        return {
+          columnId: column.id,
+          columnLabel: column.label,
+          text: normalize(cell.text),
+          ...(cell.value instanceof Date && Number.isFinite(cell.value.getTime()) ? { instant: cell.value.toISOString() } : {}),
+        };
+      });
+    return { key: props.getItemKey(item, index), selected, cells: cells.filter((cell) => cell.text.length > 0) };
+  });
+}
+
+function cachedReportedRows<T, C extends DataTableColumn>(
+  props: DataTableProps<T, C>,
+  cache: { current: { source: readonly unknown[]; rows: ReturnType<typeof reportedRows> } | null },
+) {
+  const source = [props.items, props.columns, props.renderCell, props.isSelected, props.renderSectionHeader];
+  const cached = cache.current;
+  if (cached && cached.source.length === source.length && cached.source.every((value, index) => value === source[index])) {
+    return cached.rows;
+  }
+  const rows = reportedRows(props);
+  cache.current = { source, rows };
+  return rows;
+}
+
 function firstSelectedId<T, C extends DataTableColumn>(props: DataTableProps<T, C>): string | null {
   const index = props.items.findIndex((item, itemIndex) => props.isSelected(item, itemIndex));
   const item = props.items[index];

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

@@ -72,11 +72,14 @@ function OpenTuiDataTableRowInner<
   renderCell,
   renderSectionHeader,
   rowContextMenuSurface,
+  sectionWidth,
   selected,
   selectedTextOverridesCellColor,
 }: {
   /** Only compared by the row memo; see `getRowVersion`. */
   rowVersion?: unknown;
+  /** Columns of the row in view, which a section header's action keeps to. */
+  sectionWidth: number;
   colors: ReturnType<typeof useThemeColors>;
   columnGap: number;
   columnStarts: number[];
@@ -108,6 +111,7 @@ function OpenTuiDataTableRowInner<
   if (sectionHeader) {
     // A header the cursor can land on (a collapsible group) shows it like a row.
     const headerColor = sectionHeader.color ?? (selected ? colors.selectedText : colors.textBright);
+    const action = sectionHeader.action;
     return (
       <Box
         flexDirection="row"
@@ -125,12 +129,37 @@ function OpenTuiDataTableRowInner<
         {sectionHeader.expanded !== undefined && (
           <Text fg={headerColor}>{sectionHeader.expanded ? "\u25be " : "\u25b8 "}</Text>
         )}
-        <Text
-          attributes={sectionHeader.attributes ?? TextAttributes.BOLD}
-          fg={headerColor}
-        >
-          {sectionHeader.text}
-        </Text>
+        {action ? (
+          // Kept to the columns in view, so a table wider than its pane does not push the action out of sight.
+          <Box flexDirection="row" height={1} flexShrink={1} minWidth={0} width={Math.max(1, sectionWidth - horizontalPadding * 2)}>
+            <Text attributes={sectionHeader.attributes ?? TextAttributes.BOLD} fg={headerColor} wrapMode="none" truncate flexShrink={1} minWidth={0}>
+              {sectionHeader.text}
+            </Text>
+            <Box flexGrow={1} minWidth={1} />
+            <Box
+              flexShrink={0}
+              height={1}
+              cursor="pointer"
+              hoverBackgroundColor={selected ? undefined : hoverBg(colors)}
+              onMouseDown={(event: any) => {
+                // The action, not the header's own press (a group's collapse).
+                event.stopPropagation?.();
+                event.preventDefault?.();
+                focusPane();
+                action.onPress();
+              }}
+            >
+              <Text fg={selected ? colors.selectedText : colors.text}>{action.label}</Text>
+            </Box>
+          </Box>
+        ) : (
+          <Text
+            attributes={sectionHeader.attributes ?? TextAttributes.BOLD}
+            fg={headerColor}
+          >
+            {sectionHeader.text}
+          </Text>
+        )}
       </Box>
     );
   }
@@ -320,6 +349,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
   const horizontalScrollbarVisible = showHorizontalScrollbar
     && hasMeaningfulTableHorizontalOverflow(tableWidth, measuredViewportWidth, columnGap);
   const contentWidth = fillAvailableWidth ? measuredContentWidth : tableWidth;
+  const sectionWidth = measuredViewportWidth > 0 ? Math.min(contentWidth, measuredViewportWidth) : contentWidth;
   const displayColumns = useMemo(
     () => expandTableColumns(columns, contentWidth, columnGap, horizontalPadding),
     [columnGap, columns, contentWidth, horizontalPadding],
@@ -634,6 +664,7 @@ export function OpenTuiDataTable<T, C extends DataTableColumn = DataTableColumn>
                     renderSectionHeader={renderSectionHeader}
                     rowContextMenuSurface={rowContextMenuSurface}
                     rowVersion={getRowVersion?.(item, index)}
+                    sectionWidth={sectionWidth}
                     selected={isSelected(item, index)}
                     selectedTextOverridesCellColor={selectedTextOverridesCellColor}
                   />

package/src/components/ui/data-table/types.ts

@@ -58,9 +58,22 @@ export interface DataTableSectionHeader {
    * `onMouseDown` instead of `onActivate`.
    */
   expanded?: boolean;
+  /**
+   * A quiet control at the right end of the header that acts on the whole
+   * group, such as the preset its rows are set to. A header is not a stop for
+   * the cursor, so the pane gives the same action a key (a footer hint).
+   */
+  action?: {
+    /** What the control says, already translated: the group's current setting. */
+    label: string;
+    /** Desktop tooltip: what pressing it does. */
+    title?: string;
+    onPress: () => void;
+  };
 }
 
-export type DataTableScrollAlign = "nearest" | "center";
+/** Where `scrollToIndex` puts its row: the nearest edge, the middle, or the top of the viewport. */
+export type DataTableScrollAlign = "nearest" | "center" | "start";
 
 interface DataTableRowState {
   selected: boolean;
@@ -146,6 +159,12 @@ export interface DataTableProps<
   freezeFirstColumn?: boolean;
   /** Append export-only source records after the displayed table. */
   getExportMetadata?: () => readonly (readonly unknown[])[];
+  /**
+   * A rendered-view report (`gloomberb fn`) reads every row, not only those
+   * the viewport shows. For a bounded table a reader needs whole, such as an
+   * option chain's strike window; leave it off for long or paged lists.
+   */
+  reportEveryRow?: boolean;
   scrollToIndex?: number | null;
   scrollToIndexAlign?: DataTableScrollAlign;
   scrollToIndexVersion?: number;

package/src/components/ui/data-table/visible-range.ts

@@ -36,6 +36,8 @@ export function resolveDataTableScrollTop(
   let nextTop = currentTop;
   if (align === "center") {
     nextTop = targetIndex - Math.floor(visibleHeight / 2);
+  } else if (align === "start") {
+    nextTop = targetIndex;
   } else if (targetIndex < currentTop) {
     nextTop = targetIndex;
   } else if (targetIndex >= currentTop + visibleHeight) {

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

@@ -0,0 +1,64 @@
+import { type ComponentType, type ReactNode } from "react";
+import { Box, Text, useUiHost } from "../../ui";
+import { t } from "../../i18n";
+import { useThemeColors } from "../../theme/theme-context";
+import type { DialogDesktopFooter, DialogKeyHint } from "./frame";
+
+export interface DialogActionsProps {
+  /** The dialog's buttons. */
+  children: ReactNode;
+  /** The buttons sit at the right, as a form's Cancel and Submit do. */
+  alignEnd?: boolean;
+  /** Buttons that do not fit wrap to another row. */
+  wrap?: boolean;
+  /**
+   * Desktop and web: keys no button carries and a quiet note, across from
+   * the buttons. The terminal says these in the dialog's footer line.
+   */
+  hints?: DialogDesktopFooter;
+}
+
+/**
+ * The row of buttons that answers a dialog. On the desktop and the web the
+ * buttons show their keys and `hints` sit on the same row, so the dialog
+ * needs no key line under it.
+ */
+export function DialogActions({ children, alignEnd = false, wrap = false, hints }: DialogActionsProps) {
+  const HostDialogActions = useUiHost().DialogActions as ComponentType<DialogActionsProps> | undefined;
+  if (HostDialogActions) {
+    return <HostDialogActions alignEnd={alignEnd} wrap={wrap} hints={hints}>{children}</HostDialogActions>;
+  }
+  return (
+    <Box
+      flexDirection="row"
+      gap={1}
+      {...(alignEnd ? { justifyContent: "flex-end" as const } : {})}
+      {...(wrap ? { flexWrap: "wrap" as const } : {})}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export interface DialogHintsProps {
+  keys?: DialogKeyHint[];
+  note?: string;
+}
+
+/**
+ * Keys and a note for a dialog that has no button to put them on, such as a
+ * sign-in code waiting for a phone: keycaps on the desktop and the web, one
+ * muted line in the terminal.
+ */
+export function DialogHints({ keys = [], note }: DialogHintsProps) {
+  const colors = useThemeColors();
+  const HostDialogHints = useUiHost().DialogHints as ComponentType<DialogHintsProps> | undefined;
+  if (HostDialogHints) return <HostDialogHints keys={keys} note={note} />;
+  const parts = [...keys.map((hint) => `${hint.key} ${t(hint.label)}`), ...(note ? [t(note)] : [])];
+  if (parts.length === 0) return null;
+  return (
+    <Box height={1}>
+      <Text fg={colors.textMuted}>{parts.join(" · ")}</Text>
+    </Box>
+  );
+}

package/src/components/ui/display.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
 import { t } from "../../i18n";
-import { blendHex } from "../../theme/colors";
+import { blendHex, hoverBg } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { truncateToDisplayWidth } from "../../utils/format";
+import { usePaneLinkMenuEntry } from "./external-link";
 import { titleCase } from "./header-case";
 import { statToneColor, type StatTone } from "./stat-grid";
 
@@ -55,11 +56,24 @@ export interface KeyValueRowProps {
   width?: number;
   labelWidth?: number;
   emphasis?: boolean;
+  /**
+   * 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.
+   */
+  link?: { label: string; onOpen: () => void };
 }
 
 /** Aligned labels and values; a bounded row reserves room for an optional detail. */
-export function KeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true }: KeyValueRowProps) {
+export function KeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, link }: KeyValueRowProps) {
   const colors = useThemeColors();
+  usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
+  const target = link ? {
+    cursor: "pointer" as const,
+    hoverBackgroundColor: hoverBg(colors),
+    onMouseDown: (event?: { button?: number }) => { if ((event?.button ?? 0) === 0) link.onOpen(); },
+    "data-gloom-interactive": "true",
+    "data-gloom-label": link.label,
+  } : {};
   const rowWidth = width === undefined ? undefined : Math.max(0, Math.floor(width));
   const preferredLabelWidth = Math.max(0, labelWidth ?? (rowWidth === undefined ? 14 : Math.min(12, Math.max(8, Math.floor(rowWidth * 0.32)))));
   const labelColumns = rowWidth === undefined ? preferredLabelWidth : Math.min(preferredLabelWidth, Math.max(0, rowWidth - 1));
@@ -69,7 +83,7 @@ export function KeyValueRow({ label, value, detail, tone, color, width, labelWid
     : availableWidth;
   const detailWidth = availableWidth === undefined ? undefined : availableWidth - valueWidth!;
   return (
-    <Box height={1} width={rowWidth} flexDirection="row" overflow="hidden" data-gloom-ui="key-value-row">
+    <Box height={1} width={rowWidth} flexDirection="row" overflow="hidden" data-gloom-ui="key-value-row" {...target}>
       <Box width={labelColumns} flexShrink={0} overflow="hidden">
         <Text fg={colors.textDim}>{t(label)}</Text>
       </Box>

package/src/components/ui/frame.tsx

@@ -32,12 +32,45 @@ export function modalSurfaceStyle(colors: ThemeColors, options: ModalSurfaceOpti
   };
 }
 
+/** A key and what it does, drawn on the desktop and the web as a keycap and a word. */
+export interface DialogKeyHint {
+  /** As the terminal names it: "Enter", "Esc", "Shift+Enter", "Tab", "↑↓", "y". */
+  key: string;
+  /** What it does, short and lowercase; translated where it is drawn. */
+  label: string;
+}
+
+/**
+ * What a dialog's footer says on the desktop and the web. The buttons there
+ * carry their own keys, so this keeps only keys no button has and a quiet
+ * note, such as a deadline.
+ */
+export interface DialogDesktopFooter {
+  keys?: DialogKeyHint[];
+  /** After the keys; translated where it is drawn. */
+  note?: string;
+}
+
+/**
+ * Desktop and web: the width of a dialog body laid out `columns` cells wide,
+ * narrowed to fit a phone, where the fixed width would run past the edge.
+ */
+export function fitDialogWidth(columns: number): string {
+  return `min(calc(var(--cell-w) * ${columns}), calc(100vw - 80px))`;
+}
+
 export interface DialogFrameProps {
   title: string;
   /** Muted line under the title. */
   subtitle?: string;
   children: ReactNode;
+  /** The terminal's key line under the dialog. */
   footer?: string;
+  /**
+   * Desktop and web: what shows instead of `footer`; `null` shows nothing.
+   * Left out, `footer` shows there as one quiet line.
+   */
+  desktopFooter?: DialogDesktopFooter | null;
   showTitleDivider?: boolean;
   /** Adds a close button at the right of the title (desktop). Esc still closes every dialog. */
   onClose?: () => void;
@@ -48,14 +81,14 @@ export interface DialogFrameProps {
   shrinkable?: boolean;
 }
 
-export function DialogFrame({ title: rawTitle, subtitle, children, footer: rawFooter, showTitleDivider = false, onClose, shrinkable }: DialogFrameProps) {
+export function DialogFrame({ title: rawTitle, subtitle, children, footer: rawFooter, desktopFooter, showTitleDivider = false, onClose, shrinkable }: DialogFrameProps) {
   const title = t(rawTitle);
   const footer = rawFooter === undefined ? undefined : t(rawFooter);
   const colors = useThemeColors();
   const HostDialogFrame = useUiHost().DialogFrame as ComponentType<DialogFrameProps> | undefined;
   if (HostDialogFrame) {
     return (
-      <HostDialogFrame title={title} subtitle={subtitle} footer={footer} showTitleDivider={showTitleDivider} onClose={onClose} shrinkable={shrinkable}>
+      <HostDialogFrame title={title} subtitle={subtitle} footer={footer} desktopFooter={desktopFooter} showTitleDivider={showTitleDivider} onClose={onClose} shrinkable={shrinkable}>
         {children}
       </HostDialogFrame>
     );