gloomberb 0.16.4 → 0.16.6

package/src/components/layout/shell/shortcuts.ts

@@ -1,12 +1,15 @@
 import type { KeyEventLike } from "../../../react/input";
 import {
+  advertisedChord,
   getDefaultKeybindings,
   isPaneKeybindingAction,
   matchKeybinding,
   menuAcceleratorFor,
+  serializeKeyChord,
   type CoreKeybindingActionId,
   type ResolvedKeybindings,
 } from "../../../app/keybindings";
+import type { ShortcutDisplayMode } from "../../../utils/shortcut-labels";
 
 export type PaneManagementShortcut =
   | "menu"
@@ -18,6 +21,7 @@ export type PaneManagementShortcut =
   | "copy-screenshot"
   | "export-csv"
   | "share"
+  | "ask"
   | "close"
   | "close-all-floating"
   | "layout-gallery"
@@ -35,6 +39,7 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
   "pane-screenshot": "copy-screenshot",
   "pane-export-csv": "export-csv",
   "pane-share": "share",
+  "pane-ask": "ask",
   "pane-close": "close",
   "close-floating-panes": "close-all-floating",
   "layout-gallery": "layout-gallery",
@@ -44,13 +49,22 @@ const PANE_ACTION_TO_SHORTCUT: Partial<Record<CoreKeybindingActionId, PaneManage
 };
 
 export type PaneManagementAccelerators = Record<
-  "menu" | "settings" | "fullscreen" | "newLayout" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "close"
+  "menu" | "settings" | "fullscreen" | "newLayout" | "toggleFloating" | "popOut" | "copyScreenshot" | "exportCsv" | "share" | "ask" | "close"
   | "closeAllFloating" | "layoutGallery" | "gridlockAll" | "windowMode" | "windowResizeMode",
   string | undefined
 >;
 
-/** Menu accelerators for the pane actions, read from the same table the keys are. */
-export function paneManagementAccelerators(keybindings: ResolvedKeybindings): PaneManagementAccelerators {
+/**
+ * Menu accelerators for the pane actions, read from the same table the keys
+ * are. A native menu only takes chords on the platform modifier; the terminal
+ * menu shows Ask Gloom on the chord a terminal delivers (Alt+A), not on
+ * Ctrl+Shift+A, which many terminals keep for themselves.
+ */
+export function paneManagementAccelerators(
+  keybindings: ResolvedKeybindings,
+  mode: ShortcutDisplayMode = "platform",
+): PaneManagementAccelerators {
+  const terminalAsk = mode === "terminal" ? advertisedChord(keybindings, "pane-ask", "terminal") : null;
   return {
     menu: menuAcceleratorFor(keybindings, "pane-menu"),
     settings: menuAcceleratorFor(keybindings, "pane-settings"),
@@ -61,6 +75,7 @@ export function paneManagementAccelerators(keybindings: ResolvedKeybindings): Pa
     copyScreenshot: menuAcceleratorFor(keybindings, "pane-screenshot"),
     exportCsv: menuAcceleratorFor(keybindings, "pane-export-csv"),
     share: menuAcceleratorFor(keybindings, "pane-share"),
+    ask: terminalAsk ? serializeKeyChord(terminalAsk) : menuAcceleratorFor(keybindings, "pane-ask"),
     close: menuAcceleratorFor(keybindings, "pane-close"),
     closeAllFloating: menuAcceleratorFor(keybindings, "close-floating-panes"),
     layoutGallery: menuAcceleratorFor(keybindings, "layout-gallery"),
@@ -101,7 +116,9 @@ export function inputCaptureAllowsPaneManagementShortcut(
   // A screenshot does not edit the field that captured input. Keep it available
   // from composers (ASKG, chat, etc.) on both desktop modifier layouts.
   if (shortcut === "copy-screenshot") return event.ctrl || event.meta || event.super === true;
-  if (shortcut === "toggle-fullscreen" || shortcut === "new-layout") return event.meta || event.super === true;
+  // Command chords are never text. Alt+A and Ctrl+Shift+A edit a terminal
+  // field (line start), so a field that has the keyboard keeps them there.
+  if (shortcut === "toggle-fullscreen" || shortcut === "new-layout" || shortcut === "ask") return event.meta || event.super === true;
   if (shortcut !== "close" && shortcut !== "close-all-floating") return false;
   return event.meta || event.super || event.targetEditable !== true;
 }

package/src/components/layout/shell/terminal-pointer-runtime.ts

@@ -37,6 +37,8 @@ interface UseShellTerminalPointerRuntimeOptions {
     rect: LayoutBounds,
     event?: { preventDefault?: () => void; stopPropagation?: () => void },
   ) => void;
+  /** The header's `?`: the pane's entry in DOCS. */
+  openPaneDocs: (paneId: string) => void;
   paneMap: Map<string, ResolvedPane>;
   selectWindowModePane: (paneId: string) => void;
   setHoveredMenuItemId: Dispatch<SetStateAction<string | null>>;
@@ -77,6 +79,7 @@ export function useShellTerminalPointerRuntime({
   restoreFullscreen,
   menuState,
   openPaneMenu,
+  openPaneDocs,
   paneMap,
   selectWindowModePane,
   setHoveredMenuItemId,
@@ -211,6 +214,16 @@ export function useShellTerminalPointerRuntime({
           event.preventDefault();
           return;
         }
+        if (relativeY === 0
+          && headerAreas.helpStart != null
+          && headerAreas.actionStart != null
+          && relativeX >= headerAreas.helpStart
+          && relativeX < headerAreas.actionStart) {
+          openPaneDocs(paneId);
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
         if (!transientFocusActive && relativeX >= rect.width - 2 && relativeY >= rect.height - 1) {
           startDrag({
             type: "float-resize",
@@ -302,6 +315,16 @@ export function useShellTerminalPointerRuntime({
           event.preventDefault();
           return;
         }
+        if (relativeY === 0
+          && headerAreas.helpStart != null
+          && headerAreas.actionStart != null
+          && relativeX >= headerAreas.helpStart
+          && relativeX < headerAreas.actionStart) {
+          openPaneDocs(leaf.instanceId);
+          event.stopPropagation();
+          event.preventDefault();
+          return;
+        }
         if (relativeY === 0 && transientFocusActive) {
           event.stopPropagation();
           event.preventDefault();
@@ -341,6 +364,7 @@ export function useShellTerminalPointerRuntime({
     restoreFullscreen,
     menuState,
     openPaneMenu,
+    openPaneDocs,
     paneMap,
     selectWindowModePane,
     setHoveredMenuItemId,

package/src/components/markdown-text.tsx

@@ -6,6 +6,7 @@ import { tokenizeTickerText } from "../tickers/tokenizer";
 import type { InlineTickerCatalogEntry } from "../state/hooks/inline-tickers";
 import { colors } from "../theme/colors";
 import { displayWidth } from "../utils/format";
+import { useUiCapabilities } from "../ui";
 
 export interface MarkdownTextProps {
   text: string;
@@ -13,6 +14,12 @@ export interface MarkdownTextProps {
   catalog?: Record<string, InlineTickerCatalogEntry>;
   textColor?: string;
   openTicker?: (symbol: string) => void;
+  /**
+   * Reads `[label](href)` as a link: the label drawn underlined, and on the
+   * desktop and the web a click hands `href` here. Without it a link stays
+   * the text it was written as.
+   */
+  onOpenLink?: (href: string) => void;
 }
 
 interface StyledSegment {
@@ -22,6 +29,8 @@ interface StyledSegment {
   dim?: boolean;
   code?: boolean;
   color?: string;
+  /** Where the segment links to, when links are read. */
+  link?: string;
 }
 
 interface ParsedLine {
@@ -33,24 +42,31 @@ interface ParsedLine {
 // A backslash escapes the punctuation markdown would read ("\\*" is a star), and
 // an italic span may hold a bold one ("*covers **96%** of value*").
 const INLINE_RE =
-  /(\\(?<escaped>[\\`*_~#>[\]()-])|\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>(?:[^*]|\*\*[^*]+\*\*)+?)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
+  /(\\(?<escaped>[\\`*_~#>[\]()-])|\[(?<linkLabel>[^\]]+)\]\((?<linkHref>[^)\s]+)\)|\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>(?:[^*]|\*\*[^*]+\*\*)+?)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
 
-function parseInlineMarkdown(text: string): StyledSegment[] {
+function parseInlineMarkdown(text: string, links = false): StyledSegment[] {
   const segments: StyledSegment[] = [];
   let cursor = 0;
 
   const pattern = new RegExp(INLINE_RE.source, "g");
   let match: RegExpExecArray | null;
   while ((match = pattern.exec(text)) !== null) {
+    if (match.groups?.linkHref != null && !links) {
+      // Not reading links: the bracket is text, and what is inside it still styles.
+      pattern.lastIndex = match.index + 1;
+      continue;
+    }
     if (match.index > cursor) {
       segments.push({ text: text.slice(cursor, match.index) });
     }
     if (match.groups?.escaped != null) {
       segments.push({ text: match.groups.escaped });
+    } else if (match.groups?.linkHref != null) {
+      for (const inner of parseInlineMarkdown(match.groups.linkLabel ?? "", false)) segments.push({ ...inner, link: match.groups.linkHref });
     } else if (match.groups?.bold != null) {
       segments.push({ text: match.groups.bold, bold: true });
     } else if (match.groups?.italic != null) {
-      for (const inner of parseInlineMarkdown(match.groups.italic)) segments.push({ ...inner, italic: true });
+      for (const inner of parseInlineMarkdown(match.groups.italic, links)) segments.push({ ...inner, italic: true });
     } else if (match.groups?.code != null) {
       segments.push({ text: match.groups.code, code: true });
     } else if (match.groups?.strike != null) {
@@ -64,7 +80,7 @@ function parseInlineMarkdown(text: string): StyledSegment[] {
   return segments;
 }
 
-function parseLine(line: string): ParsedLine {
+function parseLine(line: string, links: boolean): ParsedLine {
   // Headings
   const headingMatch = line.match(/^(#{1,3})\s+(.+)$/);
   if (headingMatch) {
@@ -84,12 +100,12 @@ function parseLine(line: string): ParsedLine {
       indent,
       segments: [
         { text: `${marker} `, bold: true, color: colors.borderFocused },
-        ...parseInlineMarkdown(content),
+        ...parseInlineMarkdown(content, links),
       ],
     };
   }
 
-  return { segments: parseInlineMarkdown(line) };
+  return { segments: parseInlineMarkdown(line, links) };
 }
 
 type TableAlign = "left" | "center" | "right";
@@ -347,8 +363,8 @@ function layoutTableRows(
   return lines;
 }
 
-function headerCell(text: string): StyledSegment[] {
-  return parseInlineMarkdown(text).map((segment) => ({ ...segment, bold: true, color: colors.textDim }));
+function headerCell(text: string, links: boolean): StyledSegment[] {
+  return parseInlineMarkdown(text, links).map((segment) => ({ ...segment, bold: true, color: colors.textDim }));
 }
 
 /**
@@ -356,9 +372,9 @@ function headerCell(text: string): StyledSegment[] {
  * the columns gets one record per row instead: the first cell as a title, then
  * each other column as a labelled field.
  */
-function layoutMarkdownTable(table: MarkdownTable, lineWidth?: number): TableLine[] {
-  const header = table.header.map(headerCell);
-  const body = table.rows.map((row) => row.map((cell) => parseInlineMarkdown(cell)));
+function layoutMarkdownTable(table: MarkdownTable, lineWidth?: number, links = false): TableLine[] {
+  const header = table.header.map((cell) => headerCell(cell, links));
+  const body = table.rows.map((row) => row.map((cell) => parseInlineMarkdown(cell, links)));
   const align = table.header.map((_, column) => columnAlign(table, column));
   const widths = tableColumnWidths([header, ...body], lineWidth);
   if (widths) return layoutTableRows([header, ...body], widths, align);
@@ -396,7 +412,12 @@ function wrappedInlineTextStyle() {
   } as const;
 }
 
-function SegmentSpan({ segment, wrap = false }: { segment: StyledSegment; wrap?: boolean }) {
+function SegmentSpan({ segment, wrap = false, onOpenLink }: {
+  segment: StyledSegment;
+  wrap?: boolean;
+  onOpenLink?: (href: string) => void;
+}) {
+  const { nativePaneChrome } = useUiCapabilities();
   const wrapProps = wrap
     ? {
         wrapText: true,
@@ -411,12 +432,28 @@ function SegmentSpan({ segment, wrap = false }: { segment: StyledSegment; wrap?:
   const attrs =
     (segment.bold ? TextAttributes.BOLD : 0) |
     (segment.italic ? TextAttributes.ITALIC : 0) |
-    (segment.dim ? TextAttributes.DIM : 0);
+    (segment.dim ? TextAttributes.DIM : 0) |
+    (segment.link ? TextAttributes.UNDERLINE : 0);
+  const href = segment.link;
+  // The terminal cannot press part of a line; there the pane menu lists links.
+  const linkProps = href && onOpenLink && nativePaneChrome
+    ? {
+        role: "link",
+        style: { ...(wrap ? wrappedInlineTextStyle() : {}), cursor: "pointer" },
+        onMouseDown: (event: { button?: number; preventDefault?: () => void; stopPropagation?: () => void }) => {
+          if (event.button !== undefined && event.button !== 0) return;
+          event.preventDefault?.();
+          event.stopPropagation?.();
+          onOpenLink(href);
+        },
+      }
+    : {};
   return (
     <Span
-      fg={segment.color ?? undefined}
+      fg={segment.color ?? (href ? colors.textBright : undefined)}
       attributes={attrs || undefined}
       {...wrapProps}
+      {...linkProps}
     >
       {segment.text}
     </Span>
@@ -431,6 +468,7 @@ function MarkdownLine({
   openTicker,
   hoveredSymbol,
   onHover,
+  onOpenLink,
 }: {
   parsed: ParsedLine;
   lineWidth?: number;
@@ -439,6 +477,7 @@ function MarkdownLine({
   openTicker: (symbol: string) => void;
   hoveredSymbol: string | null;
   onHover: (symbol: string | null) => void;
+  onOpenLink?: (href: string) => void;
 }) {
   const indent = parsed.indent ?? 0;
   const indentStr = indent > 0 ? " ".repeat(indent) : "";
@@ -463,7 +502,7 @@ function MarkdownLine({
       <Text fg={textColor} {...textWrapProps}>
         {indentStr}
         {parsed.segments.map((segment, i) => (
-          <SegmentSpan key={i} segment={segment} wrap={shouldWrap} />
+          <SegmentSpan key={i} segment={segment} wrap={shouldWrap} onOpenLink={onOpenLink} />
         ))}
       </Text>
     );
@@ -487,7 +526,7 @@ function MarkdownLine({
                   ? { wrapText: true, wrapMode: "word", style: wrappedTextStyle() }
                   : {})}
               >
-                <SegmentSpan segment={{ ...segment, text: token.value }} wrap={shouldWrap} />
+                <SegmentSpan segment={{ ...segment, text: token.value }} wrap={shouldWrap} onOpenLink={onOpenLink} />
               </Text>
             );
           }
@@ -501,7 +540,7 @@ function MarkdownLine({
                   ? { wrapText: true, wrapMode: "word", style: wrappedTextStyle() }
                   : {})}
               >
-                <SegmentSpan segment={{ ...segment, text: token.value }} wrap={shouldWrap} />
+                <SegmentSpan segment={{ ...segment, text: token.value }} wrap={shouldWrap} onOpenLink={onOpenLink} />
               </Text>
             );
           }
@@ -528,7 +567,9 @@ export function MarkdownText({
   catalog = {},
   textColor = colors.text,
   openTicker = () => {},
+  onOpenLink,
 }: MarkdownTextProps) {
+  const links = onOpenLink !== undefined;
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
   const blocks = parseMarkdownBlocks(text);
 
@@ -538,10 +579,10 @@ export function MarkdownText({
         if (block.kind === "table") {
           return (
             <Box key={index} flexDirection="column">
-              {layoutMarkdownTable(block.table, lineWidth).map((line, lineIndex) => (
+              {layoutMarkdownTable(block.table, lineWidth, links).map((line, lineIndex) => (
                 <Text key={lineIndex} fg={textColor}>
                   {line.map((segment, segmentIndex) => (
-                    <SegmentSpan key={segmentIndex} segment={segment} />
+                    <SegmentSpan key={segmentIndex} segment={segment} onOpenLink={onOpenLink} />
                   ))}
                 </Text>
               ))}
@@ -552,7 +593,7 @@ export function MarkdownText({
         if (line.trim() === "") {
           return <Text key={index}>{" "}</Text>;
         }
-        const parsed = parseLine(line);
+        const parsed = parseLine(line, links);
         return (
           <MarkdownLine
             key={index}
@@ -563,6 +604,7 @@ export function MarkdownText({
             openTicker={openTicker}
             hoveredSymbol={hoveredSymbol}
             onHover={setHoveredSymbol}
+            onOpenLink={onOpenLink}
           />
         );
       })}

package/src/components/metric-treemap/heat-surface.tsx

@@ -1,5 +1,6 @@
 import { memo, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
-import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
+import { Box, Text, TextAttributes, useUiCapabilities, type BoxRenderable } from "../../ui";
+import { useLiveStretch } from "../../ui/live-stretch";
 import { blendHex } from "../../theme/colors";
 import {
   heatmapColorDistance,
@@ -532,9 +533,15 @@ function DomHeatTreemap<T>({
     [otherTooltip, scene.other],
   );
   const other = scene.other;
+  // Tiles sit at percentages of the map, so while a resize has the pane ahead
+  // of this size the map takes the size it will have and they follow by CSS.
+  // On the desktop the map takes the box it sits in by CSS where it can.
+  const rootRef = useRef<BoxRenderable | null>(null);
+  useLiveStretch(rootRef, width, height);
 
   return (
     <Box
+      ref={rootRef}
       width={width}
       height={height}
       style={{ position: "relative", backgroundColor: colors.bg, overflow: "hidden" }}

package/src/components/onboarding/account-step/form-panel.tsx

@@ -3,7 +3,7 @@ import { Box, Text, TextAttributes, useUiCapabilities, type InputRenderable } fr
 import { colors } from "../../../theme/colors";
 import { t } from "../../../i18n";
 import { TextField } from "../../ui";
-import type { AccountMode, AccountSubmitError } from "../../../plugins/builtin/cloud/auth-model";
+import type { AccountMode, AccountSubmitError } from "../../../account/auth-model";
 import { ONBOARDING_DESKTOP } from "../onboarding-frame";
 
 function TuiFieldRow({

package/src/components/onboarding/account-step/index.tsx

@@ -3,7 +3,7 @@ import type { InputRenderable } from "../../../ui";
 import { AccountFormPanel } from "./form-panel";
 import { AccountQrPanel } from "./qr-panel";
 import { AccountSignedInPanel } from "./signed-in-panel";
-import type { AccountOutcome, AccountSub, AccountSubmitError } from "../../../plugins/builtin/cloud/auth-model";
+import type { AccountOutcome, AccountSub, AccountSubmitError } from "../../../account/auth-model";
 
 export interface AccountStepProps {
   sub: AccountSub;

package/src/components/onboarding/account-step/qr-panel.tsx

@@ -7,7 +7,7 @@ import {
   DeviceSignInPanel,
   isDeviceSignInRetryKey,
   useDeviceSignIn,
-} from "../../../plugins/builtin/cloud/device-signin-dialog";
+} from "../../../account/device-signin-dialog";
 
 /**
  * QR device sign-in inside the onboarding account step. The controller starts

package/src/components/onboarding/account-step/signed-in-panel.tsx

@@ -1,7 +1,7 @@
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../../ui";
 import { colors } from "../../../theme/colors";
 import { t, tf } from "../../../i18n";
-import type { AccountOutcome } from "../../../plugins/builtin/cloud/auth-model";
+import type { AccountOutcome } from "../../../account/auth-model";
 
 export function AccountSignedInPanel({ outcome }: { outcome: AccountOutcome | null }) {
   const email = outcome?.email ?? "";

package/src/components/onboarding/onboarding-keyboard.ts

@@ -5,7 +5,7 @@ import { useShortcut, type KeyEventLike } from "../../react/input";
 import { matchKeybinding, matchesKeybindingAction, type ResolvedKeybindings } from "../../app/keybindings";
 import { isPlainKey } from "../../utils/keyboard";
 import { isCopyShortcut, isPasteShortcut } from "../../utils/selection-clipboard";
-import type { CloudBillingInterval } from "../../plugins/builtin/account-management/model";
+import type { CloudBillingInterval } from "../../account/billing";
 import type { usePlanAccess } from "../../api-client/plan-access";
 import type { ListViewItem } from "../ui";
 import type { PortfolioSub } from "./onboarding-steps";

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

@@ -19,8 +19,8 @@ import { useThemeColors } from "../../theme/theme-context";
 import { t, tf } from "../../i18n";
 import { useAppLanguage } from "../../i18n/react";
 import type { PluginRegistry } from "../../plugins/registry";
-import { formatCloudPrice, monthsFreeYearly } from "../../plugins/builtin/account-management/model";
-import { proStepCopy, proStepRealtimeTitle } from "../../plugins/builtin/cloud/upgrade-dialog";
+import { formatCloudPrice, monthsFreeYearly } from "../../account/billing";
+import { proStepCopy, proStepRealtimeTitle } from "../../account/upgrade-dialog";
 import { Button, SegmentedControl, terminalButtonColumns } from "../ui";
 import { AccountStep, PortfolioStep } from "./onboarding-steps";
 import {

package/src/components/onboarding/use-onboarding-upgrade.ts

@@ -3,10 +3,10 @@ import { apiClient } from "../../api-client";
 import type { AppConfig, OnboardingProgress, OnboardingStage } from "../../types/config";
 import { useAppActive } from "../../state/app/activity";
 import { chatController } from "../../plugins/builtin/chat/controller";
-import type { CloudBillingInterval } from "../../plugins/builtin/account-management/model";
-import { loadUpgradeOffer, type UpgradeOffer } from "../../plugins/builtin/cloud/upgrade-dialog";
+import type { CloudBillingInterval } from "../../account/billing";
+import { loadUpgradeOffer, type UpgradeOffer } from "../../account/upgrade-dialog";
 import { useCloudUpgradeAction } from "../../plugins/builtin/shared/cloud-upgrade";
-import { useUpgradePersonalization } from "../../plugins/builtin/cloud/upgrade-personalization";
+import { useUpgradePersonalization } from "../../account/upgrade-personalization";
 import { usePlanAccess } from "../../api-client/plan-access";
 
 export function useOnboardingUpgrade({

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

@@ -6,8 +6,8 @@ import {
   type AccountOutcome,
   type AccountSub,
   type AccountSubmitError,
-} from "../../plugins/builtin/cloud/auth-model";
-import { useEmailAuthAttempt } from "../../plugins/builtin/cloud/email-auth-attempt";
+} from "../../account/auth-model";
+import { useEmailAuthAttempt } from "../../account/email-auth-attempt";
 
 const onboardingLog = debugLog.createLogger("onboarding");
 

package/src/components/pane-template-wizard.tsx

@@ -5,7 +5,7 @@ import { type PromptContext } from "../ui/dialog";
 import type { WizardStep } from "../types/plugin";
 import { colors } from "../theme/colors";
 import { DialogFrame, TextField } from "./ui";
-import { t } from "../i18n";
+import { t, tf } from "../i18n";
 
 export function PaneTemplateInputStep({
   resolve,
@@ -26,6 +26,14 @@ export function PaneTemplateInputStep({
         : step.required === false
           ? "Enter to keep the default"
           : "Enter to continue"}
+      desktopFooter={{
+        keys: [{
+          key: "Enter",
+          label: step.defaultValue
+            ? tf("use {value}", { value: step.defaultValue })
+            : step.required === false ? "keep the default" : "continue",
+        }],
+      }}
     >
       <Box flexDirection="column">
         {step.body?.map((line, index) => (

package/src/components/price-selector-dialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Text } from "../ui";
+import { Box, Text, useUiHost } from "../ui";
 import { useState, useRef, useEffect } from "react";
 import { TextAttributes } from "../ui";
 import { type InputRenderable } from "../ui";
@@ -80,6 +80,7 @@ export function PriceSelectorDialog({
   quote,
   assetCategory,
 }: PromptContext<string> & PriceSelectorDialogProps) {
+  const desktop = useUiHost().kind === "desktop-web";
   const presets = buildPresets(quote);
   const [index, setIndex] = useState(0);
   const [mode, setMode] = useState<"list" | "input">(presets.length > 0 ? "list" : "input");
@@ -140,9 +141,17 @@ export function PriceSelectorDialog({
           ? "↑↓ or hover to choose · Enter/click select · Tab or ↓ for custom · Esc cancel"
           : "Type a price · Enter confirm · ↑ or Tab back to presets · Esc cancel"
       }
+      // The pointer picks a row or the field there, and the close button stands for Esc.
+      desktopFooter={{
+        keys: mode === "list"
+          ? [{ key: "↑↓", label: "choose" }, { key: "Enter", label: "select" }]
+          : [{ key: "Enter", label: "confirm" }, ...(presets.length > 0 ? [{ key: "Up", label: "presets" }] : [])],
+      }}
+      onClose={() => resolve("")}
     >
       <Box flexDirection="column">
-        <Text fg={colors.textDim}>{formatMarketContext(quote, assetCategory)}</Text>
+        {/* A phone wraps the quote line; the terminal keeps it on one row. */}
+        <Text fg={colors.textDim} {...(desktop ? { wrapText: true } : {})}>{formatMarketContext(quote, assetCategory)}</Text>
         <Box height={1} />
 
         {presets.length > 0 && (