gloomberb 0.18.3 → 0.18.5

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

@@ -59,6 +59,7 @@ export function useOnboardingBrokerSync({
   importBrokerPositions,
   getConfig,
   createBrokerInstance,
+  enableBrokerInstance,
   onSynced,
   setEditingField,
   setPortfolioSub,
@@ -71,6 +72,7 @@ export function useOnboardingBrokerSync({
   /** The live config and profile creation, for the signed-in path that Add Broker shares. */
   getConfig: () => AppConfig;
   createBrokerInstance: (brokerType: string, label: string, values: Record<string, unknown>) => Promise<BrokerInstanceConfig>;
+  enableBrokerInstance: (instanceId: string) => Promise<void>;
   onSynced: (result: SyncBrokerInstanceResult, config: AppConfig) => void | Promise<void>;
   setEditingField: (editing: boolean) => void;
   setPortfolioSub: Dispatch<SetStateAction<PortfolioSub>>;
@@ -227,6 +229,7 @@ export function useOnboardingBrokerSync({
       const connected = await connectSignedInBrokerProfile(broker, {
         getConfig,
         createBrokerInstance,
+        enableBrokerInstance,
         syncBrokerInstance: (instanceId) => {
           if (brokerSyncAttemptRef.current === attemptId) showSyncing();
           return importInto(instanceId, attemptId, abortController.signal);
@@ -237,7 +240,7 @@ export function useOnboardingBrokerSync({
     } catch (error) {
       failSync(attemptId, error);
     }
-  }, [beginAttempt, createBrokerInstance, failSync, finishSync, getConfig, importInto, setEditingField, showSyncing]);
+  }, [beginAttempt, createBrokerInstance, enableBrokerInstance, failSync, finishSync, getConfig, importInto, setEditingField, showSyncing]);
 
   const syncSelectedBroker = useCallback(async (brokerValueOverrides?: Record<string, string>) => {
     const signedIn = brokerOptions.find((option) => option.id === selectedBrokerId)?.signedIn;

package/src/components/pane-settings-dialog/desktop.tsx

@@ -1,13 +1,13 @@
 import { Box, Text } from "../../ui";
 import { useEffect, useId, type ReactNode } from "react";
-import type { PaneSettingField } from "../../types/plugin";
+import type { PaneSettingField, PaneSettingRowNote } from "../../types/plugin";
 import { colors } from "../../theme/colors";
 import { SelectField, type SelectFieldHandle } from "../ui/select-field";
 import { Checkbox } from "../ui/checkbox";
 import { Button } from "../ui/button";
 import { Badge } from "../ui/display";
 import { DialogFrame } from "../ui/frame";
-import { isPaneSettingDisabled, summarizePaneSettingValue } from "./value";
+import { isPaneSettingDisabled, noteColor, summarizePaneSettingValue } from "./value";
 
 const DESKTOP_TEXT_STYLE = {
   letterSpacing: 0,
@@ -74,6 +74,7 @@ function DesktopSettingsRow({
   field,
   selected,
   currentValue,
+  note,
   onHover,
   onEdit,
   onSelectRef,
@@ -82,6 +83,8 @@ function DesktopSettingsRow({
   field: PaneSettingField;
   selected: boolean;
   currentValue: unknown;
+  /** What its action said on it: the state beside its button, the reason in place of its description. */
+  note: PaneSettingRowNote | null;
   onHover: () => void;
   onEdit: () => void;
   onSelectRef: (fieldKey: string, element: SelectFieldHandle | null) => void;
@@ -91,6 +94,7 @@ function DesktopSettingsRow({
   const disabled = isPaneSettingDisabled(field);
   const rowId = useFollowHighlight(selected);
   const summary = summarizePaneSettingValue(field, currentValue);
+  const description = note?.text ?? field.description;
   const control = field.type === "toggle" ? (
     <Checkbox label={field.label} displayLabel="" checked={currentValue === true} onChange={(checked) => onApply(field, checked)} />
   ) : field.type === "select" ? (
@@ -104,7 +108,10 @@ function DesktopSettingsRow({
     />
   ) : field.type === "action" ? (
     // The button says what pressing the row does, and presses it: the row's own press is not repeated.
-    <Button label={summary} variant="secondary" disabled={disabled} onPress={onEdit} stopPropagation />
+    <Box flexDirection="row" alignItems="center" gap={1}>
+      {note ? <Text fg={noteColor(note)} style={desktopText()}>{note.status}</Text> : null}
+      <Button label={summary} variant="secondary" disabled={disabled} onPress={onEdit} stopPropagation />
+    </Box>
   ) : (
     <Box flexDirection="row" alignItems="center" gap={1}>
       <Badge label={summary} />
@@ -116,7 +123,7 @@ function DesktopSettingsRow({
     <Box
       id={rowId}
       flexDirection="column"
-      minHeight={field.description ? undefined : 2}
+      minHeight={description ? undefined : 2}
       data-gloom-role="pane-setting-row"
       data-selected={selected ? "true" : "false"}
       backgroundColor={selected ? "var(--gloom-hover-fill)" : "transparent"}
@@ -143,9 +150,9 @@ function DesktopSettingsRow({
         </Box>
         {control}
       </Box>
-      {field.description && (
-        <Text fg={colors.textMuted} wrapText style={desktopText()}>
-          {field.description}
+      {description && (
+        <Text fg={note?.text ? noteColor(note) : colors.textMuted} wrapText style={desktopText()}>
+          {description}
         </Text>
       )}
     </Box>
@@ -156,6 +163,7 @@ function DesktopSettingsList({
   fields,
   selectedIndex,
   settings,
+  noteFor,
   onHover,
   onEdit,
   onSelectRef,
@@ -164,6 +172,7 @@ function DesktopSettingsList({
   fields: PaneSettingField[];
   selectedIndex: number;
   settings: Record<string, unknown>;
+  noteFor?: (field: PaneSettingField) => PaneSettingRowNote | null;
   onHover: (field: PaneSettingField, index: number) => void;
   onEdit: (field: PaneSettingField, index: number) => void;
   onSelectRef: (fieldKey: string, element: SelectFieldHandle | null) => void;
@@ -182,6 +191,7 @@ function DesktopSettingsList({
           field={field}
           selected={index === selectedIndex}
           currentValue={settings[field.key]}
+          note={noteFor?.(field) ?? null}
           onHover={() => onHover(field, index)}
           onEdit={() => onEdit(field, index)}
           onSelectRef={onSelectRef}
@@ -208,6 +218,7 @@ export function DesktopPaneSettingsDialogBody({
   fields,
   selectedIndex,
   settings,
+  noteFor,
   onHover,
   onEdit,
   onSelectRef,
@@ -218,6 +229,7 @@ export function DesktopPaneSettingsDialogBody({
   fields: PaneSettingField[];
   selectedIndex: number;
   settings: Record<string, unknown>;
+  noteFor?: (field: PaneSettingField) => PaneSettingRowNote | null;
   onHover: (field: PaneSettingField, index: number) => void;
   onEdit: (field: PaneSettingField, index: number) => void;
   onSelectRef: (fieldKey: string, element: SelectFieldHandle | null) => void;
@@ -237,6 +249,7 @@ export function DesktopPaneSettingsDialogBody({
           fields={fields}
           selectedIndex={selectedIndex}
           settings={settings}
+          noteFor={noteFor}
           onHover={onHover}
           onEdit={onEdit}
           onSelectRef={onSelectRef}

package/src/components/pane-settings-dialog/tui.tsx

@@ -1,12 +1,12 @@
 import { Box, Text } from "../../ui";
 import { t } from "../../i18n";
 import { TextAttributes } from "../../ui";
-import type { PaneSettingField } from "../../types/plugin";
+import type { PaneSettingField, PaneSettingRowNote } from "../../types/plugin";
 import { colors } from "../../theme/colors";
 import { useViewport } from "../../react/input";
 import { DialogFrame, ListView } from "../ui";
 import type { ListViewProps } from "../ui/list-view";
-import { isPaneSettingDisabled, summarizePaneSettingValue } from "./value";
+import { isPaneSettingDisabled, noteColor, summarizePaneSettingValue } from "./value";
 
 /** Terminal rows a settings dialog spends around its list: edge, frame, title, description. */
 const TUI_DIALOG_LIST_CHROME_ROWS = 11;
@@ -21,7 +21,10 @@ export function useTuiDialogListRows(): number {
  * for it scrolls to the cursor instead of running under the dialog's edge,
  * and the highlighted row's description sits under it.
  */
-export function TuiDialogList(props: ListViewProps) {
+export function TuiDialogList({ descriptionColor, ...props }: ListViewProps & {
+  /** The highlighted row's description in a tone: what its action ran into. */
+  descriptionColor?: (index: number) => string | undefined;
+}) {
   const maxRows = useTuiDialogListRows();
   const scrollable = props.items.length > maxRows;
   const description = props.selectedIndex >= 0 ? props.items[props.selectedIndex]?.description : undefined;
@@ -37,7 +40,7 @@ export function TuiDialogList(props: ListViewProps) {
         <>
           <Box height={1} />
           <Box>
-            <Text fg={colors.textDim}>{"    "}{t(description)}</Text>
+            <Text fg={descriptionColor?.(props.selectedIndex) ?? colors.textDim}>{"    "}{t(description)}</Text>
           </Box>
         </>
       )}
@@ -58,6 +61,7 @@ export function TuiPaneSettingsDialogBody({
   fields,
   selectedIndex,
   settings,
+  noteFor,
   onSelect,
   onActivate,
 }: {
@@ -65,26 +69,30 @@ export function TuiPaneSettingsDialogBody({
   fields: PaneSettingField[];
   selectedIndex: number;
   settings: Record<string, unknown>;
+  /** What an action said on its own row: its state in place of the row's value, its reason in place of the description. */
+  noteFor?: (field: PaneSettingField) => PaneSettingRowNote | null;
   onSelect: (index: number) => void;
   onActivate: (field: PaneSettingField | undefined) => void;
 }) {
+  const notes = fields.map((field) => noteFor?.(field) ?? null);
   return (
     <DialogFrame title={t(title)}>
       <TuiDialogList
-        items={fields.map((field) => ({
+        items={fields.map((field, index) => ({
           id: field.key,
           label: t(field.label),
-          description: field.description ? t(field.description) : field.description,
-          detail: summarizePaneSettingValue(field, settings[field.key]),
+          description: notes[index]?.text ?? (field.description ? t(field.description) : field.description),
+          detail: notes[index]?.status ?? summarizePaneSettingValue(field, settings[field.key]),
           disabled: isPaneSettingDisabled(field),
         }))}
+        descriptionColor={(index) => (notes[index]?.text ? noteColor(notes[index]) : undefined)}
         selectedIndex={selectedIndex}
         bgColor={colors.commandBg}
         onSelect={onSelect}
         onActivate={(_, index) => {
           onActivate(fields[index]);
         }}
-        renderRow={(item, rowState) => (
+        renderRow={(item, rowState, index) => (
           <Box flexDirection="row" justifyContent="space-between" width="100%">
             <Box flexDirection="row">
               <Text fg={rowState.selected ? colors.selectedText : colors.textDim}>
@@ -97,7 +105,7 @@ export function TuiPaneSettingsDialogBody({
                 {item.label}
               </Text>
             </Box>
-            <Text fg={colors.textMuted}>
+            <Text fg={noteColor(notes[index]) ?? colors.textMuted}>
               {item.detail}
             </Text>
           </Box>

package/src/components/pane-settings-dialog/value.ts

@@ -1,5 +1,6 @@
-import type { PaneSettingField } from "../../types/plugin";
+import type { PaneSettingField, PaneSettingRowNote } from "../../types/plugin";
 import { t } from "../../i18n";
+import { colors } from "../../theme/colors";
 
 export function isSpaceKey(event: { name?: string; sequence?: string }): boolean {
   return event.name === "space" || event.name === " " || event.sequence === " ";
@@ -10,6 +11,12 @@ export function isPaneSettingDisabled(field: PaneSettingField): boolean {
   return field.type === "action" && field.disabled === true;
 }
 
+/** A row note's tone, for its state and its reason. */
+export function noteColor(note: PaneSettingRowNote | null | undefined): string | undefined {
+  if (!note) return undefined;
+  return note.tone === "negative" ? colors.negative : colors.warning;
+}
+
 export function summarizePaneSettingValue(field: PaneSettingField, value: unknown): string {
   switch (field.type) {
     case "action":

package/src/components/pane-settings-dialog.tsx

@@ -1,7 +1,7 @@
 import { useUiCapabilities } from "../ui";
 import { type AlertContext, useDialog, useDialogKeyboard } from "../ui/dialog";
 import { useEffect, useRef, useState } from "react";
-import type { PaneSettingField } from "../types/plugin";
+import type { PaneSettingField, PaneSettingRowNote } from "../types/plugin";
 import type { PluginRegistry } from "../plugins/registry";
 import { isPlainKey } from "../utils/keyboard";
 import { openSelectField, type SelectFieldHandle } from "./ui/select-field";
@@ -20,6 +20,13 @@ import {
   TuiUnavailablePaneSettingsDialog,
 } from "./pane-settings-dialog/tui";
 import { isPaneSettingDisabled, isSpaceKey, stepPaneSettingSelect } from "./pane-settings-dialog/value";
+import { useRowNotes } from "./ui/row-notes";
+
+const fieldKey = (field: PaneSettingField) => field.key;
+/** What an action row shows of its own state: a note on it goes once that moves on (it connected elsewhere, say). */
+const actionRowSignature = (field: PaneSettingField) => (
+  field.type === "action" ? `${field.actionLabel ?? ""}\u0000${field.description ?? ""}\u0000${field.disabled === true}` : ""
+);
 
 interface PaneSettingsDialogContentProps extends AlertContext {
   paneId: string;
@@ -48,6 +55,11 @@ export function PaneSettingsDialogContent({
   });
   const [, setSettingsRevision] = useState(0);
   const desktopSelectRefs = useRef(new Map<string, SelectFieldHandle>());
+  // What an action said on its own row (setRowNote), while the dialog is open.
+  const { noteFor, setNote: setRowNote } = useRowNotes<PaneSettingField, PaneSettingRowNote>(fields, { key: fieldKey, signature: actionRowSignature });
+  const running = useRef(new Set<string>());
+  const mounted = useRef(true);
+  useEffect(() => () => { mounted.current = false; }, []);
 
   useEffect(() => {
     if (selectedIndex < fields.length) return;
@@ -68,24 +80,41 @@ export function PaneSettingsDialogContent({
   const openFieldEditor = async (field: PaneSettingField | undefined) => {
     if (!field || !descriptor) return;
     if (field.type === "action") {
-      if (field.disabled) return;
+      // A row whose action is still running is not run again.
+      if (field.disabled || running.current.has(field.key)) return;
       let closed = false;
       const close = () => {
         if (closed) return;
         closed = true;
         dismiss();
       };
-      await field.action({
-        ...descriptor.context,
-        surface: "pane-dialog",
-        close,
-        openCommandBar: (query) => {
-          close();
-          queueMicrotask(() => pluginRegistry.openCommandBar(query));
-        },
-        notify: (notification) => pluginRegistry.notify(notification),
-      });
-      if (!closed) setSettingsRevision((revision) => revision + 1);
+      running.current.add(field.key);
+      setRowNote(field.key, null);
+      try {
+        await field.action({
+          ...descriptor.context,
+          surface: "pane-dialog",
+          close,
+          openCommandBar: (query) => {
+            close();
+            queueMicrotask(() => pluginRegistry.openCommandBar(query));
+          },
+          notify: (notification) => pluginRegistry.notify(notification),
+          setRowNote: (note) => {
+            // The row is off screen once the dialog has closed, or once its field has left the settings (an
+            // account that disconnected and has nothing left to connect). The settings are read again here, as
+            // the action may have changed them since the dialog last drew.
+            if (closed || !mounted.current) return false;
+            const current = pluginRegistry.resolvePaneSettings(paneId)?.settingsDef.fields ?? [];
+            if (!current.some((entry) => entry.key === field.key)) return false;
+            setRowNote(field.key, note);
+            return true;
+          },
+        });
+      } finally {
+        running.current.delete(field.key);
+      }
+      if (!closed && mounted.current) setSettingsRevision((revision) => revision + 1);
       return;
     }
     const currentValue = descriptor.context.settings[field.key];
@@ -191,6 +220,7 @@ export function PaneSettingsDialogContent({
       fields={fields}
       selectedIndex={selectedIndex}
       settings={descriptor.context.settings}
+      noteFor={noteFor}
       onHover={(_field, index) => setSelectedIndex(index)}
       onSelectRef={setDesktopSelectRef}
       onEdit={(field, index) => {
@@ -208,6 +238,7 @@ export function PaneSettingsDialogContent({
       fields={fields}
       selectedIndex={selectedIndex}
       settings={descriptor.context.settings}
+      noteFor={noteFor}
       onSelect={setSelectedIndex}
       onActivate={(field) => {
         void openFieldEditor(field).catch(() => {});

package/src/components/sign-in-code-panel.tsx

@@ -42,7 +42,14 @@ export function desktopQrModulePx(modules: number, availablePx: number, cellHeig
 }
 
 interface SignInCodePanelProps {
+  /** The page the browser button opens. */
   url: string | null;
+  /**
+   * The link shown and drawn as the QR code, when it differs from `url`: a
+   * short link that leads to the same page. Null shows neither, for a page
+   * whose own address is too long to read or scan. Defaults to `url`.
+   */
+  link?: string | null;
   /**
    * A code to show under the QR code: Gloom's own sign-in compares it with
    * the page it opens. A broker connect shows none.
@@ -62,10 +69,10 @@ interface SignInCodePanelProps {
 
 /**
  * A browser hand-off: button, QR code, an optional short code, the URL, and a
- * live status. Used to sign in to Gloom and to connect a broker. Degrades by
- * height: the QR needs its full module grid in the terminal, so short
- * terminals drop decoration first and finally fall back to the URL (and code),
- * which works over SSH too. The desktop draws the QR as an image in whole
+ * live status. Used to sign in to Gloom, to connect a broker and to finish a
+ * Pro checkout. Degrades by height: the QR needs its full module grid in the
+ * terminal, so short terminals drop decoration first and finally fall back to
+ * the URL (and code), which works over SSH too. The desktop draws the QR as an image in whole
  * pixel modules, smaller when the rows run out.
  */
 export function SignInCodePanel(props: SignInCodePanelProps) {
@@ -86,17 +93,18 @@ export function SignInCodePanel(props: SignInCodePanelProps) {
       }} />
     )
     : null;
+  const link = props.link === undefined ? url : props.link;
   return desktop
-    ? <DesktopPanel {...props} button={button} />
-    : <TerminalPanel {...props} button={button} />;
+    ? <DesktopPanel {...props} link={link} button={button} />
+    : <TerminalPanel {...props} link={link} button={button} />;
 }
 
-type PanelBodyProps = SignInCodePanelProps & { button: React.ReactNode };
+type PanelBodyProps = Omit<SignInCodePanelProps, "link"> & { link: string | null; button: React.ReactNode };
 
 /** Laid out by the browser: a QR image in whole-pixel modules, the code as a figure. */
-function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
+function DesktopPanel({ link, code, status, height, button }: PanelBodyProps) {
   const { cellHeightPx = 18 } = useUiCapabilities();
-  const qr = useMemo(() => (url ? renderQrSvgDataUri(url) : null), [url]);
+  const qr = useMemo(() => (link ? renderQrSvgDataUri(link) : null), [link]);
   const besideQr = DESKTOP_ROWS_BESIDE_QR + (code ? DESKTOP_CODE_ROWS : 0);
   const modulePx = qr ? desktopQrModulePx(qr.modules, (height - besideQr) * cellHeightPx, cellHeightPx) : null;
   const qrPx = qr && modulePx ? modulePx * qr.modules : 0;
@@ -119,7 +127,7 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
           }}
         />
       )}
-      {url && !qrPx && (
+      {link && !qrPx && (
         <Box marginTop={1}>
           <Text fg={colors.textDim}>{t("Not enough room to draw the QR code.")}</Text>
         </Box>
@@ -129,9 +137,9 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
           <FigureText>{code}</FigureText>
         </Box>
       )}
-      {url && (
+      {link && (
         <Box marginTop={code ? 0 : 1} maxWidth="100%">
-          <Text fg={colors.textMuted} wrapText selectable style={{ textAlign: "center" }}>{url}</Text>
+          <Text fg={colors.textMuted} wrapText selectable style={{ textAlign: "center" }}>{link}</Text>
         </Box>
       )}
       <Box marginTop={1}>
@@ -142,16 +150,16 @@ function DesktopPanel({ url, code, status, height, button }: PanelBodyProps) {
 }
 
 /** Laid out in cells: half-block QR lines need their full grid, so short terminals drop rows first. */
-function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
-  const qrLines = useMemo(() => (url ? renderQrLines(url) : []), [url]);
+function TerminalPanel({ link, code, status, height, button }: PanelBodyProps) {
+  const qrLines = useMemo(() => (link ? renderQrLines(link) : []), [link]);
   // Reserve the browser button before fitting the QR, code, and status.
-  const contentHeight = height - (url ? 2 : 0);
+  const contentHeight = height - (button ? 2 : 0);
   const codeRows = code ? 1 : 0;
   const showQr = qrLines.length > 0 && contentHeight >= qrLines.length + codeRows + 1;
   const qrRows = showQr ? qrLines.length : 0;
   // A blank row before the code, the link and the status when there is room.
-  const spacious = showQr && contentHeight >= qrRows + codeRows * 2 + (url ? 2 : 0) + 2;
-  const showUrl = !!url && (!showQr || spacious || contentHeight >= qrRows + codeRows + 2);
+  const spacious = showQr && contentHeight >= qrRows + codeRows * 2 + (link ? 2 : 0) + 2;
+  const showUrl = !!link && (!showQr || spacious || contentHeight >= qrRows + codeRows + 2);
 
   return (
     <Box flexDirection="column" alignItems="center">
@@ -165,7 +173,7 @@ function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
           ))}
         </Box>
       )}
-      {!showQr && url && (
+      {!showQr && link && (
         <Box height={1}>
           <Text fg={colors.textDim}>{t("Not enough room to draw the QR code.")}</Text>
         </Box>
@@ -182,7 +190,7 @@ function TerminalPanel({ url, code, status, height, button }: PanelBodyProps) {
         <>
           {spacious && <Box height={1} />}
           <Box height={1}>
-            <Text fg={colors.textMuted}>{url}</Text>
+            <Text fg={colors.textMuted}>{link}</Text>
           </Box>
         </>
       )}

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

@@ -1,8 +1,9 @@
 import type { CSSProperties, ReactNode } from "react";
 import { Box, Text, useUiCapabilities } from "../../ui";
+import { hoverBg } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { displayWidth, padTo, truncateToDisplayWidth } from "../../utils/format";
-import { ExternalLinkText } from "./external-link";
+import { ExternalLinkText, usePaneLinkMenuEntry } from "./external-link";
 
 /** One column of a ColumnGrid. */
 export interface ColumnGridColumn {
@@ -20,9 +21,19 @@ export interface ColumnGridColumn {
   gapBefore?: number;
 }
 
+/**
+ * What a cell's text opens (a row's market, a security's DES): the text is the
+ * target, as a key-value row's value is, and inside a `PaneLinkMenu` the pane
+ * menu lists it as `label`, so the keyboard reaches what a click opens.
+ */
+export interface ColumnGridLink {
+  label: string;
+  onOpen: () => void;
+}
+
 /** Text the grid fits to its column (padded on the terminal, cut by CSS on the desktop), or content the column holds. */
 export type ColumnGridCell =
-  | { text: string; color?: string }
+  | { text: string; color?: string; link?: ColumnGridLink }
   | { content: ReactNode }
   | null;
 
@@ -76,6 +87,35 @@ function gridTemplate(columns: readonly ColumnGridColumn[]): { template: string;
   return { template: tracks.join(" "), gap: undefined, lines };
 }
 
+/** A link cell's pointer handling and its pane-menu entry; nothing for a plain cell. */
+function useLinkTarget(link: ColumnGridLink | undefined) {
+  const colors = useThemeColors();
+  usePaneLinkMenuEntry(link ? `column-grid:${link.label}` : null, link?.label ?? "", () => link?.onOpen());
+  return 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,
+  } : {};
+}
+
+/** A text cell that opens something, in the terminal: its padded text is the target. */
+function TerminalLinkCell({ text, color, link, width, align }: { text: string; color?: string; link: ColumnGridLink; width: number; align?: "left" | "right" }) {
+  const target = useLinkTarget(link);
+  return <Box width={width} flexDirection="row" {...target}><Text fg={color}>{padTo(text, width, align)}</Text></Box>;
+}
+
+/** A text cell that opens something, on the desktop and the web. */
+function NativeLinkCell({ text, color, link, column, place }: { text: string; color?: string; link: ColumnGridLink; column: ColumnGridColumn; place: CSSProperties }) {
+  const target = useLinkTarget(link);
+  return (
+    <Text fg={color} data-gloom-ui="column-grid-text" {...clipOf(text, column)} {...target} style={{ ...place, ...TEXT_BOX, textAlign: column.align ?? "left" }}>
+      {text}
+    </Text>
+  );
+}
+
 /**
  * Columns of single-line text that line up from row to row: a table of
  * figures under its header, or label and value pairs set in columns. The terminal lays the
@@ -83,7 +123,8 @@ function gridTemplate(columns: readonly ColumnGridColumn[]): { template: string;
  * them. The desktop and the web lay out one CSS grid whose tracks are counted
  * in characters, so the columns follow a resize to the pixel, every row and
  * the header share the same tracks, and text that does not fit ends in an
- * ellipsis instead of being cut to a count of cells.
+ * ellipsis instead of being cut to a count of cells. A text cell with a `link`
+ * opens it on a click and is listed in the pane menu.
  */
 export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
   const { nativePaneChrome } = useUiCapabilities();
@@ -98,7 +139,9 @@ export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
                 <Box key={index} flexDirection="row">
                   {column.gapBefore ? <Box width={column.gapBefore} /> : null}
                   {cell && "text" in cell
-                    ? <Text fg={cell.color}>{padTo(cell.text, column.width, column.align)}</Text>
+                    ? cell.link
+                      ? <TerminalLinkCell text={cell.text} color={cell.color} link={cell.link} width={column.width} align={column.align} />
+                      : <Text fg={cell.color}>{padTo(cell.text, column.width, column.align)}</Text>
                     : <Box width={column.width} flexDirection="row">{cell?.content}</Box>}
                 </Box>
               );
@@ -126,6 +169,7 @@ export function ColumnGrid({ columns, rows, width, role }: ColumnGridProps) {
             const cell = row[index] ?? null;
             if (!cell) return null;
             const place: CSSProperties = { gridColumn: lines[index], gridRow: rowIndex + 1 };
+            if ("text" in cell && cell.link) return <NativeLinkCell key={index} text={cell.text} color={cell.color} link={cell.link} column={column} place={place} />;
             return "text" in cell
               ? (
                 <Text