gloomberb 0.17.2 → 0.17.4

package/src/components/markdown-text.tsx

@@ -7,6 +7,7 @@ import type { InlineTickerCatalogEntry } from "../state/hooks/inline-tickers";
 import { colors } from "../theme/colors";
 import { displayWidth } from "../utils/format";
 import { useUiCapabilities } from "../ui";
+import { MARKDOWN_HEADING_RE, markdownListItem, parseInlineMarkdown, type MarkdownSegment } from "../utils/markdown";
 
 export interface MarkdownTextProps {
   text: string;
@@ -30,15 +31,9 @@ export interface MarkdownTextProps {
   onOpenLink?: (href: string) => void;
 }
 
-interface StyledSegment {
-  text: string;
-  bold?: boolean;
-  italic?: boolean;
-  dim?: boolean;
-  code?: boolean;
+/** A segment as drawn here: a heading or a table header has its own colour. */
+interface StyledSegment extends MarkdownSegment {
   color?: string;
-  /** Where the segment links to, when links are read. */
-  link?: string;
 }
 
 interface ParsedLine {
@@ -47,52 +42,12 @@ interface ParsedLine {
   indent?: number;
 }
 
-// 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>[\\`*_~#>[\]()-])|\[(?<linkLabel>[^\]]+)\]\((?<linkHref>[^)\s]+)\)|\*\*(?<bold>[^*]+)\*\*|(?<!\*)\*(?!\*)(?<italic>(?:[^*]|\*\*[^*]+\*\*)+?)\*(?!\*)|`(?<code>[^`]+)`|~~(?<strike>[^~]+)~~)/g;
-
-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, 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) {
-      segments.push({ text: match.groups.strike, dim: true });
-    }
-    cursor = match.index + match[0].length;
-  }
-  if (cursor < text.length) {
-    segments.push({ text: text.slice(cursor) });
-  }
-  return segments;
+function parseInline(text: string, links = false): StyledSegment[] {
+  return parseInlineMarkdown(text, { links });
 }
 
-const HEADING_RE = /^(#{1,3})\s+(.+)$/;
-
 function parseLine(line: string, links: boolean): ParsedLine {
-  // Headings
-  const headingMatch = line.match(HEADING_RE);
+  const headingMatch = line.match(MARKDOWN_HEADING_RE);
   if (headingMatch) {
     return {
       heading: true,
@@ -100,22 +55,18 @@ function parseLine(line: string, links: boolean): ParsedLine {
     };
   }
 
-  // List items
-  const listMatch = line.match(/^(\s*)([-*]|\d+\.)\s(.*)$/);
-  if (listMatch) {
-    const indent = listMatch[1]!.length;
-    const marker = listMatch[2]!;
-    const content = listMatch[3]!;
+  const item = markdownListItem(line);
+  if (item) {
     return {
-      indent,
+      indent: item.indent,
       segments: [
-        { text: `${marker} `, bold: true, color: colors.borderFocused },
-        ...parseInlineMarkdown(content, links),
+        { text: `${item.marker} `, bold: true, color: colors.borderFocused },
+        ...parseInline(item.text, links),
       ],
     };
   }
 
-  return { segments: parseInlineMarkdown(line, links) };
+  return { segments: parseInline(line, links) };
 }
 
 type TableAlign = "left" | "center" | "right";
@@ -176,7 +127,7 @@ function columnAlign(table: MarkdownTable, column: number): TableAlign {
   const explicit = table.align[column];
   if (explicit) return explicit;
   const values = table.rows
-    .map((row) => parseInlineMarkdown(row[column] ?? "").map((segment) => segment.text).join("").trim())
+    .map((row) => parseInline(row[column] ?? "").map((segment) => segment.text).join("").trim())
     .filter((value) => value !== "" && value !== "-" && value !== "\u2014");
   return values.length > 0 && values.every((value) => NUMERIC_CELL_RE.test(value)) ? "right" : "left";
 }
@@ -214,6 +165,28 @@ function parseMarkdownBlocks(text: string): MarkdownBlock[] {
   return blocks;
 }
 
+/**
+ * The links a text reads as, in reading order, for a reader's pane menu: the
+ * terminal cannot press part of a line.
+ */
+export function markdownLinks(text: string): Array<{ label: string; href: string }> {
+  const links: Array<{ label: string; href: string }> = [];
+  // A label with bold in it is several segments of one link.
+  const read = (segments: StyledSegment[]) => {
+    let previous: string | undefined;
+    for (const { text: part, link } of segments) {
+      if (link && link === previous) links[links.length - 1]!.label += part;
+      else if (link) links.push({ label: part, href: link });
+      previous = link;
+    }
+  };
+  for (const block of parseMarkdownBlocks(text)) {
+    if (block.kind === "line") read(parseLine(block.text, true).segments);
+    else for (const cell of [block.table.header, ...block.table.rows].flat()) read(parseInline(cell, true));
+  }
+  return links;
+}
+
 function segmentsWidth(segments: StyledSegment[]): number {
   return segments.reduce((total, segment) => total + displayWidth(segment.text), 0);
 }
@@ -374,7 +347,7 @@ function layoutTableRows(
 }
 
 function headerCell(text: string, links: boolean): StyledSegment[] {
-  return parseInlineMarkdown(text, links).map((segment) => ({ ...segment, bold: true, color: colors.textDim }));
+  return parseInline(text, links).map((segment) => ({ ...segment, bold: true, color: colors.textDim }));
 }
 
 /**
@@ -384,7 +357,7 @@ function headerCell(text: string, links: boolean): StyledSegment[] {
  */
 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 body = table.rows.map((row) => row.map((cell) => parseInline(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);
@@ -460,7 +433,8 @@ function SegmentSpan({ segment, wrap = false, onOpenLink }: {
   const attrs =
     (segment.bold ? TextAttributes.BOLD : 0) |
     (segment.italic ? TextAttributes.ITALIC : 0) |
-    (segment.dim ? TextAttributes.DIM : 0) |
+    // Struck text reads dim here.
+    (segment.strike ? 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.
@@ -627,7 +601,7 @@ export function MarkdownText({
         if (line.trim() === "") {
           // Under a heading set in its own style, the heading's margin is the space: it sits with what it names.
           const previous = blocks[index - 1];
-          if (nativePaneChrome && headingStyle && previous?.kind === "line" && HEADING_RE.test(previous.text)) return null;
+          if (nativePaneChrome && headingStyle && previous?.kind === "line" && MARKDOWN_HEADING_RE.test(previous.text)) return null;
           return nativePaneChrome && paragraphGap
             ? <Box key={index} flexShrink={0} style={{ height: paragraphGap }} />
             : <Text key={index}>{" "}</Text>;

package/src/components/market-board/index.tsx

@@ -84,13 +84,15 @@ export interface MarketBoardStackProps<T extends MarketBoardRow> {
 const FIT_STEPS = ["labelDetail", "history", "shortAsOf", "changeAsOf", "percentile"] as const;
 /** An as-of date without its year ("09-17"). */
 const SHORT_AS_OF_WIDTH = 5;
+/** The word a stale row's date carries, with its space: "2026-09-17 stale". */
+const STALE_WORD = " stale";
 
 function shortIsoDate(text: string): string {
   return /^\d{4}-\d{2}-\d{2}$/.test(text) ? text.slice(5) : text;
 }
 
 /** Fit the board to the pane rather than cut its right edge mid-value. */
-function fitBoardColumns(candidates: DataTableColumn[], width: number): { columns: DataTableColumn[]; shortAsOf: boolean } {
+function fitBoardColumns(candidates: DataTableColumn[], width: number, wordWidth: number): { columns: DataTableColumn[]; shortAsOf: boolean } {
   const withAsOfWidth = (list: DataTableColumn[], asOfWidth: number | null) => asOfWidth === null
     ? list
     : list.map((column) => column.id === "asOf" ? { ...column, width: asOfWidth } : column);
@@ -100,7 +102,7 @@ function fitBoardColumns(candidates: DataTableColumn[], width: number): { column
     if (getTableWidth(columns) <= width) break;
     if (step === "shortAsOf") {
       shortAsOf = true;
-      columns = withAsOfWidth(columns, SHORT_AS_OF_WIDTH);
+      columns = withAsOfWidth(columns, SHORT_AS_OF_WIDTH + wordWidth);
     } else {
       columns = columns.filter((column) => column.id !== step);
     }
@@ -134,6 +136,8 @@ export function MarketBoardStack<T extends MarketBoardRow>({ rows, width, height
     return compareSortValues(left, right, sort.direction);
   }) : rows, [rows, sort, extraColumns]);
   const open = rows.find((row) => row.id === openId);
+  // A stale row's date carries a word, so the column has room for both and the date is never cut.
+  const wordWidth = rows.some((row) => row.status === "stale") ? STALE_WORD.length : 0;
   const { columns, shortAsOf } = fitBoardColumns([
     { id: "label", label: labelHeader, width: labelWidth, align: "left" },
     ...(rows.some((row) => row.labelDetail !== undefined)
@@ -144,8 +148,8 @@ export function MarketBoardStack<T extends MarketBoardRow>({ rows, width, height
     ...(extraColumns?.map((item) => item.column) ?? []),
     { id: "percentile", label: percentileLabel, width: 8, align: "right" },
     { id: "history", label: "1Y", width: 14, align: "left" },
-    { id: "asOf", label: "AS OF", width: asOfWidth, align: "left" },
-  ], width);
+    { id: "asOf", label: "AS OF", width: asOfWidth + wordWidth, align: "left" },
+  ], width, wordWidth);
   const renderCell = (row: T, column: DataTableColumn): DataTableCell => {
     const extra = extraColumns?.find((item) => item.column.id === column.id);
     if (extra) return extra.renderCell(row);
@@ -159,8 +163,10 @@ export function MarketBoardStack<T extends MarketBoardRow>({ rows, width, height
     if (column.id === "percentile") return { text: row.percentileText ?? row.percentile?.toFixed(0) ?? "--", color: row.percentile != null && (row.percentile <= 10 || row.percentile >= 90) ? colors.warning : colors.textMuted };
     if (column.id === "history") return { text: "", content: <PriceSparkline priceHistory={row.history} width={column.width} period="1Y" trend="neutral" /> };
     const asOf = row.asOfText ?? row.asOf ?? "--";
-    // A narrow board drops the year; the export keeps the full date.
-    return { text: shortAsOf ? shortIsoDate(asOf) : asOf, ...(row.asOf ? { value: row.asOf } : {}),
+    const asOfText = shortAsOf ? shortIsoDate(asOf) : asOf;
+    // A narrow board drops the year; the export keeps the full date. The word
+    // stays with the color, so a stale row is not color alone.
+    return { text: row.status === "stale" ? `${asOfText}${STALE_WORD}` : asOfText, ...(row.asOf ? { value: row.asOf } : {}),
       color: row.status === "stale" ? colors.warning : colors.textDim };
   };
   return <DataTableStackView columns={columns} items={items} getItemKey={(row) => row.id} renderCell={renderCell}

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

@@ -1,6 +1,7 @@
 import { memo, useEffect, useMemo, useRef, useState, type CSSProperties } from "react";
 import { Box, Text, TextAttributes, useUiCapabilities, type BoxRenderable } from "../../ui";
 import { useLiveStretch } from "../../ui/live-stretch";
+import { useSettledLayoutSize } from "../../ui/resize-settle";
 import { blendHex } from "../../theme/colors";
 import {
   heatmapColorDistance,
@@ -91,9 +92,57 @@ export function buildHeatTreemapScene<T>(
   return buildMetricTreemapScene(items, canvas.width, canvas.height, canvas.options, previous);
 }
 
+export interface HeatTreemapLayout<T> {
+  scene: MetricTreemapScene<T>;
+  /** The box is being resized (`useSettledLayoutSize`): hand it to the surface, which then holds still. */
+  resizing: boolean;
+}
+
+interface ShownScene<T> {
+  key: string;
+  canvas: HeatTreemapCanvas;
+  items: readonly MetricTreemapItem<T>[];
+  scene: MetricTreemapScene<T>;
+}
+
+/**
+ * The scene a heat map shows in a `width` by `height` box (cells). Each
+ * layout is seeded with the scene on screen under the same `key` (a tab), so
+ * a refresh nudges tiles instead of reshuffling the board. On the desktop,
+ * while the box is being resized the scene on screen stretches with it and a
+ * refresh's new sizes wait: the board is laid out once, at the size the box
+ * settles on.
+ */
+export function useHeatTreemapScene<T>(
+  items: readonly MetricTreemapItem<T>[],
+  width: number,
+  height: number,
+  key = "",
+): HeatTreemapLayout<T> {
+  const { nativePaneChrome, cellWidthPx, cellHeightPx } = useUiCapabilities();
+  const layout = useSettledLayoutSize(width, height, { enabled: nativePaneChrome === true });
+  const canvas = useMemo(
+    () => heatTreemapCanvas(layout.width, layout.height, { nativePaneChrome, cellWidthPx, cellHeightPx }),
+    [cellHeightPx, cellWidthPx, layout.height, layout.width, nativePaneChrome],
+  );
+  const shownRef = useRef<ShownScene<T> | null>(null);
+  const scene = useMemo(() => {
+    const shown = shownRef.current?.key === key ? shownRef.current : null;
+    // While the box resizes, the scene on screen holds until it is laid out
+    // again, a refresh's new sizes with it: the board relays out once.
+    if (shown && shown.canvas === canvas && (layout.resizing || shown.items === items)) return shown.scene;
+    const next = buildHeatTreemapScene(items, canvas, shown?.scene);
+    shownRef.current = { key, canvas, items, scene: next };
+    return next;
+  }, [canvas, items, key, layout.resizing]);
+  return { scene, resizing: layout.resizing };
+}
+
 export interface HeatTreemapSurfaceProps<T> {
-  /** Geometry, from `buildHeatTreemapScene`; rebuilt only when sizes change. */
+  /** Geometry, from `useHeatTreemapScene`; rebuilt only when sizes change. */
   scene: MetricTreemapScene<T>;
+  /** From `useHeatTreemapScene`: while the box resizes, no tile glides, fades or pulses. */
+  resizing: boolean;
   /** Current colours and text, by id; they change with every tick. */
   items: readonly MetricTreemapItem<T>[];
   width: number;
@@ -223,7 +272,7 @@ const VERTICAL_LABEL_STYLE: CSSProperties = {
 
 const DomHeatTile = memo(function DomHeatTile({
   id, rect, canvasWidth, canvasHeight, gap, label, value, valueSuffix, background, foreground,
-  selected, reducedMotion, glide, pulseCount, events,
+  selected, reducedMotion, resizing, glide, pulseCount, events,
 }: {
   id: string;
   rect: TreemapRect;
@@ -237,6 +286,8 @@ const DomHeatTile = memo(function DomHeatTile({
   foreground: string;
   selected: boolean;
   reducedMotion: boolean;
+  resizing: boolean;
+  /** A relayout this render may slide the tile: false for one that came with a new size. */
   glide: boolean;
   pulseCount: number;
   events: SurfaceEvents;
@@ -248,16 +299,22 @@ const DomHeatTile = memo(function DomHeatTile({
   });
   // Where this tile sat before the last relayout, kept to slide it from there.
   const placedRef = useRef(rect);
-  const glideRef = useRef<{ dx: number; dy: number; count: number }>({ dx: 0, dy: 0, count: 0 });
+  const glideRef = useRef<{ dx: number; dy: number; count: number; playing: boolean }>({ dx: 0, dy: 0, count: 0, playing: false });
+  const allowGlide = glide && !resizing;
   if (placedRef.current !== rect) {
     const dx = placedRef.current.x - rect.x;
     const dy = placedRef.current.y - rect.y;
-    if (glide && (Math.abs(dx) >= 0.5 || Math.abs(dy) >= 0.5)) {
-      glideRef.current = { dx, dy, count: glideRef.current.count + 1 };
-    }
+    // A slide belongs to the relayout that moved the tile: a later render
+    // (a tick, a hover, the end of a resize) never plays it again.
+    glideRef.current = allowGlide && (Math.abs(dx) >= 0.5 || Math.abs(dy) >= 0.5)
+      ? { dx, dy, count: glideRef.current.count + 1, playing: true }
+      : { ...glideRef.current, playing: false };
     placedRef.current = rect;
+  } else if (resizing && glideRef.current.playing) {
+    // A resize stops a slide under way: the tile sits where its layout has it.
+    glideRef.current = { ...glideRef.current, playing: false };
   }
-  const motion = heatTileMotion({ reducedMotion, glide, glideCount: glideRef.current.count, pulseCount });
+  const motion = heatTileMotion({ reducedMotion, resizing, glide: glideRef.current.playing, glideCount: glideRef.current.count, pulseCount });
   const colors = useThemeColors();
   const ring = resolveHeatmapSelectionRing(colors);
   // The colour this tile showed before, kept to fade out over the new one.
@@ -274,10 +331,13 @@ const DomHeatTile = memo(function DomHeatTile({
     else if (visible) fadeRef.current = { from: shownRef.current, key: (fadeRef.current?.key ?? 0) + 1 };
     shownRef.current = background;
   }
+  // A resize ends a fade under way, and the pulses due meanwhile are dropped, not saved for later.
+  if (resizing) fadeRef.current = null;
   const fade = fadeRef.current;
   // A finished overlay leaves the DOM, so idle tiles carry no extra nodes.
   const [, setOverlayVersion] = useState(0);
   const pulseDoneRef = useRef(0);
+  if (resizing) pulseDoneRef.current = Math.max(pulseDoneRef.current, pulseCount);
   const pulsing = motion.pulseAnimation != null && pulseCount > pulseDoneRef.current;
   const style: CSSProperties = {
     position: "absolute",
@@ -491,7 +551,7 @@ function DomTooltip<T>({ state, itemsById, otherLines }: {
 const EMPTY_PULSES: ReadonlyMap<string, number> = new Map();
 
 function DomHeatTreemap<T>({
-  scene, items, width, height, selectedId, onSelect, onActivate, otherTooltip, otherSummary: summarizeOther,
+  scene, resizing, items, width, height, selectedId, onSelect, onActivate, otherTooltip, otherSummary: summarizeOther,
 }: HeatTreemapSurfaceProps<T>) {
   const reducedMotion = usePrefersReducedMotion();
   const colors = useThemeColors();
@@ -519,13 +579,14 @@ function DomHeatTreemap<T>({
     );
   }, [itemsById, reducedMotion, scene]);
 
-  // A resize relays out every tile; following the window with a glide would lag it.
+  // The layout a resize settles on comes in at once, as a chart or a table
+  // redraws at its new size: tiles slide only when sizes move at rest.
   const sizeKey = `${scene.width}x${scene.height}`;
-  const lastSizeRef = useRef(sizeKey);
-  const glide = lastSizeRef.current === sizeKey;
+  const restedRef = useRef({ sizeKey, resizing });
+  const glide = !resizing && !restedRef.current.resizing && restedRef.current.sizeKey === sizeKey;
   useEffect(() => {
-    lastSizeRef.current = sizeKey;
-  }, [sizeKey]);
+    restedRef.current = { sizeKey, resizing };
+  }, [resizing, sizeKey]);
 
   const gap = scene.width < NARROW_CANVAS_PX ? 0.5 : 1;
   const otherLines = useMemo(
@@ -603,6 +664,7 @@ function DomHeatTreemap<T>({
               foreground={tileColors.foreground}
               selected={tile.item.id === selectedId}
               reducedMotion={reducedMotion}
+              resizing={resizing}
               glide={glide}
               pulseCount={pulses.get(tile.item.id) ?? 0}
               events={events}
@@ -755,7 +817,7 @@ function TerminalHeatTreemap<T>({
  * calm tiles (ticker, then the move, as space allows), a continuous scale
  * from the theme's down colour to its up colour, and on the desktop a hover
  * tooltip, colour fades, a short pulse on a tile whose move jumps and a glide
- * when sizes change.
+ * when sizes change, none of them while the box is being resized.
  */
 export function HeatTreemapSurface<T>(props: HeatTreemapSurfaceProps<T>) {
   const { nativePaneChrome } = useUiCapabilities();

package/src/components/metric-treemap/heat-tiles.ts

@@ -240,15 +240,17 @@ export interface HeatTileMotion {
  * tile from its old place (its new size applies at once), a colour change
  * fades the old colour out over the new one, and a jump in the move flashes
  * once. `glideCount` alternates two keyframe names, which restarts the slide.
- * Reduced motion keeps every change instant.
+ * Reduced motion keeps every change instant, and so does a resize: while the
+ * box is changing size nothing on the board moves on its own.
  */
-export function heatTileMotion({ reducedMotion, glide, glideCount, pulseCount }: {
+export function heatTileMotion({ reducedMotion, resizing, glide, glideCount, pulseCount }: {
   reducedMotion: boolean;
+  resizing: boolean;
   glide: boolean;
   glideCount: number;
   pulseCount: number;
 }): HeatTileMotion {
-  if (reducedMotion) return {};
+  if (reducedMotion || resizing) return {};
   return {
     ...(glide && glideCount > 0
       ? { glideAnimation: `gloom-heat-glide-${glideCount % 2 === 0 ? "b" : "a"} ${GLIDE_MS}ms ease` }

package/src/components/metric-treemap/index.tsx

@@ -18,7 +18,7 @@ export {
   type MetricTreemapDirection,
   type MetricTreemapItem,
 } from "./layout";
-export { buildHeatTreemapScene, heatTreemapCanvas, HeatTreemapSurface } from "./heat-surface";
+export { buildHeatTreemapScene, heatTreemapCanvas, HeatTreemapSurface, useHeatTreemapScene } from "./heat-surface";
 export { formatHeatTileMove, settleTreemapLayoutItems } from "./heat-tiles";
 
 type PreventableMouseEvent = { preventDefault(): void };

package/src/components/reader/detail-reader.tsx

@@ -1,10 +1,10 @@
-import { forwardRef, useMemo } from "react";
-import { t } from "../../i18n";
+import { forwardRef, useCallback, useMemo } from "react";
+import { t, tf } from "../../i18n";
 import { hoverBg } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
-import { Box, Text, useUiCapabilities, type ScrollBoxRenderable } from "../../ui";
+import { Box, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../ui";
 import { wrapTextLines } from "../../utils/text-wrap";
-import { MarkdownText } from "../markdown-text";
+import { MarkdownText, markdownLinks, type MarkdownTextProps } from "../markdown-text";
 import { DetailScrollBody } from "../ui/detail-scroll-body";
 import { KeyValueRow } from "../ui/display";
 import { ExternalLink, usePaneLinkMenuEntry } from "../ui/external-link";
@@ -121,7 +121,7 @@ function NativeDetail({ meta, facts, body, bodyFormat, note }: DetailContentProp
         ) : null}
         {bodyFormat === "markdown" && body ? (
           <Box flexDirection="column" width="100%" style={MARKDOWN_STYLE}>
-            <MarkdownText text={body} paragraphGap={PARAGRAPH_GAP} headingStyle={READER_HEADING_STYLE} />
+            <MarkdownBody text={body} paragraphGap={PARAGRAPH_GAP} headingStyle={READER_HEADING_STYLE} />
           </Box>
         ) : blocks.map((block, index) => (
           <Box key={index} flexDirection="column">
@@ -140,6 +140,28 @@ function NativeDetail({ meta, facts, body, bodyFormat, note }: DetailContentProp
   );
 }
 
+/**
+ * Markdown whose `[label](url)` links open outside the app, as the reader's
+ * other links do. The terminal cannot press part of a line, so the pane menu
+ * lists each link there (inside a `PaneLinkMenu`).
+ */
+function MarkdownBody({ text, ...style }: Pick<MarkdownTextProps, "text" | "lineWidth" | "paragraphGap" | "headingStyle">) {
+  const rendererHost = useRendererHost();
+  const links = useMemo(() => markdownLinks(text), [text]);
+  const open = useCallback((href: string) => { void rendererHost.openExternal(href); }, [rendererHost]);
+  return (
+    <>
+      <MarkdownText text={text} onOpenLink={open} {...style} />
+      {links.map((link, index) => <LinkMenuEntry key={index} {...link} onOpen={open} />)}
+    </>
+  );
+}
+
+function LinkMenuEntry({ label, href, onOpen }: { label: string; href: string; onOpen: (href: string) => void }) {
+  usePaneLinkMenuEntry(`link:${href}`, tf("Open {label}", { label }), () => onOpen(href));
+  return null;
+}
+
 function FactValue({ fact }: { fact: DetailFact }) {
   const colors = useThemeColors();
   const { link } = fact;
@@ -167,7 +189,7 @@ function TerminalDetail({ width, meta, facts, body, bodyFormat, note }: DetailCo
     return (
       <Box flexDirection="column" width={lineWidth}>
         {metaLines.map((line, index) => <Text key={index} fg={colors.textMuted}>{line}</Text>)}
-        <MarkdownText text={body ?? ""} lineWidth={lineWidth} />
+        <MarkdownBody text={body ?? ""} lineWidth={lineWidth} />
       </Box>
     );
   }

package/src/components/ticker/badge/index.tsx

@@ -68,6 +68,8 @@ export function TickerBadge({
         // badges; the desktop leaves a hairline of row above and below.
         justifyContent={nativePaneChrome ? "center" : undefined}
         style={nativePaneChrome ? NATIVE_CHIP_STYLE : undefined}
+        role="button"
+        aria-label={symbol}
         data-gloom-context-menu-surface="true"
         onMouseOver={() => {
           onHoverStart?.();

package/src/components/ui/button.tsx

@@ -26,6 +26,14 @@ export interface ButtonProps {
   onPress?: () => void;
   variant?: ButtonVariant;
   disabled?: boolean;
+  /**
+   * The action it started is still running (a retry waiting for its answer).
+   * It reads as disabled and ignores presses, but keeps its key, so it does not
+   * change size and the key does not fall through to something else.
+   */
+  pending?: boolean;
+  /** What it says while pending, such as "Retrying...". Without it the label stays. */
+  pendingLabel?: string;
   active?: boolean;
   shortcut?: string;
   /**
@@ -86,9 +94,11 @@ export function Button({
   displayLabel,
   children,
   expanded,
-  onPress,
+  onPress: pressAction,
   variant = "secondary",
   disabled = false,
+  pending = false,
+  pendingLabel,
   active = false,
   shortcut,
   desktopShortcut,
@@ -100,17 +110,21 @@ export function Button({
   title,
 }: ButtonProps) {
   const colors = useThemeColors();
-  const label = t(rawLabel);
+  const label = t(pending && pendingLabel ? pendingLabel : rawLabel);
+  if (pending && pendingLabel) displayLabel = undefined;
+  // A pending press is ignored, but the button stays its scope's primary action.
+  const onPress = pressAction && pending ? () => {} : pressAction;
   const scopedShortcut = useScopedButtonAction(label, onPress, disabled);
   shortcut = shortcut ?? scopedShortcut;
+  const inert = disabled || pending;
   const remoteScope = useRemoteUiScope();
   useRemoteUiNode({
     role: "button",
     label,
-    disabled,
+    disabled: inert,
     actions: {
       press: () => {
-        if (!disabled) onPress?.();
+        if (!inert) onPress?.();
       },
     },
     metadata: { variant, active, shortcut, expanded, ...(remoteScope ? { scope: remoteScope } : {}) },
@@ -124,7 +138,8 @@ export function Button({
         expanded={expanded}
         onPress={onPress}
         variant={variant}
-        disabled={disabled}
+        disabled={inert}
+        pending={pending}
         active={active}
         shortcut={shortcut ?? desktopShortcut}
         title={title}
@@ -137,7 +152,7 @@ export function Button({
     );
   }
 
-  const palette = resolveButtonColors(variant, active, disabled, colors);
+  const palette = resolveButtonColors(variant, active, inert, colors);
 
   return (
     <Box
@@ -145,20 +160,20 @@ export function Button({
       height={height ?? 1}
       flexDirection="row"
       backgroundColor={palette.bg}
-      cursor={disabled ? "default" : "pointer"}
+      cursor={inert ? "default" : "pointer"}
       onMouseDown={(event: { preventDefault?: () => void; stopPropagation?: () => void }) => {
         if (stopPropagation) {
           event.preventDefault?.();
           event.stopPropagation?.();
         }
-        if (!disabled) onPress?.();
+        if (!inert) onPress?.();
       }}
     >
       {children ?? <Text fg={palette.fg} attributes={active ? TextAttributes.BOLD : 0}>
         {compact ? displayLabel ?? label : ` ${displayLabel ?? label} `}
       </Text>}
       {shortcut && (
-        <Text fg={disabled ? colors.textMuted : colors.textDim}>
+        <Text fg={inert ? colors.textMuted : colors.textDim}>
           {` ${shortcut}`}
         </Text>
       )}

package/src/components/ui/display.tsx

@@ -226,7 +226,12 @@ export function Divider({ width, height, orientation = "horizontal" }: DividerPr
       flexShrink={0}
       border={vertical ? ["left"] : ["top"]}
       borderColor={colors.border}
-      style={{ border: 0, [vertical ? "borderLeft" : "borderTop"]: `1px solid ${colors.border}` }}
+      style={{
+        border: 0,
+        [vertical ? "borderLeft" : "borderTop"]: `1px solid ${colors.border}`,
+        // A vertical rule given no height runs the height of the row it stands in.
+        ...(vertical && height === undefined ? { height: "auto", alignSelf: "stretch" } : {}),
+      }}
       role="separator"
       data-gloom-ui="divider"
     />

package/src/components/ui/external-link.tsx

@@ -98,11 +98,18 @@ function handleOpen(
   onOpen(url);
 }
 
+/** Desktop and web: a link inside a line of text runs and wraps with the line, rather than standing as a box of its own. */
+const INLINE_LINK_STYLE = { display: "inline", whiteSpace: "pre-wrap", overflowWrap: "anywhere" } as const;
+
 export function ExternalLinkText(
-  { url, label, color, onOpen = openUrl }: {
+  { url, label, color, attributes = 0, inline = false, onOpen = openUrl }: {
     url: string;
     label?: string;
     color?: string;
+    /** Marks drawn with the underline, such as the bold of a bold link. */
+    attributes?: number;
+    /** Flows inside a line of text on the desktop and the web. */
+    inline?: boolean;
     onOpen?: (url: string) => void;
   },
 ) {
@@ -128,8 +135,9 @@ export function ExternalLinkText(
   return (
     <Text
       fg={color ?? colors.textBright}
-      attributes={TextAttributes.UNDERLINE}
+      attributes={TextAttributes.UNDERLINE | attributes}
       cursor="pointer"
+      style={inline ? INLINE_LINK_STYLE : undefined}
       role="link"
       tabIndex={0}
       wrapText