gloomberb 0.17.3 → 0.17.5

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/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/confirm-dialog.tsx

@@ -36,6 +36,12 @@ export interface ConfirmDialogProps extends PromptContext<boolean> {
    * opens on its own while the person may be typing. Esc and `n` always answer.
    */
   keyGraceMs?: number;
+  /**
+   * What Enter answers. `cancel` is for an opt-in a stray Enter must not
+   * accept: Enter takes the cancel button, which is drawn as the primary one,
+   * and only `y` or the confirm button confirms.
+   */
+  defaultAction?: "confirm" | "cancel";
 }
 
 export function ConfirmDialog({
@@ -52,7 +58,9 @@ export function ConfirmDialog({
   onClose,
   formButtons = false,
   keyGraceMs = 0,
+  defaultAction = "confirm",
 }: ConfirmDialogProps) {
+  const enterCancels = defaultAction === "cancel";
   const desktop = useUiHost().kind === "desktop-web";
   const openedAt = useRef(Date.now());
   const confirm = useCallback(() => resolve(true), [resolve]);
@@ -71,7 +79,13 @@ export function ConfirmDialog({
       event.preventDefault();
       return;
     }
-    if (event.name === "enter" || event.name === "return" || isPlainKey(event, "y")) {
+    const enter = event.name === "enter" || event.name === "return";
+    if (enter && enterCancels) {
+      event.preventDefault();
+      cancel();
+      return;
+    }
+    if (enter || isPlainKey(event, "y")) {
       event.preventDefault();
       if (Date.now() - openedAt.current < keyGraceMs) return;
       confirm();
@@ -88,13 +102,25 @@ export function ConfirmDialog({
 
   // 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.
+  // One primary button, the one Enter answers.
   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} />;
+  const confirmButton = (
+    <Button
+      label={confirmLabel}
+      variant={enterCancels && confirmVariant === "primary" ? "secondary" : confirmVariant}
+      disabled={busy}
+      desktopShortcut={keys ? (enterCancels ? "Y" : "Enter") : undefined}
+      onPress={confirm}
+    />
+  );
+  const cancelButton = <Button label={cancelLabel} variant={enterCancels ? "primary" : "secondary"} disabled={busy} desktopShortcut={keys ? (enterCancels ? "Enter" : "Esc") : undefined} onPress={cancel} />;
+  const keyLine = enterCancels
+    ? tf("y {action} · Enter or Esc {cancel}", { action: t(confirmLabel).toLowerCase(), cancel: t(cancelLabel).toLowerCase() })
+    : tf("Enter {action} · Esc cancel", { action: t(confirmLabel).toLowerCase() });
   return (
     <DialogFrame
       title={title}
-      footer={footer ?? tf("Enter {action} · Esc cancel", { action: t(confirmLabel).toLowerCase() })}
+      footer={footer ?? keyLine}
       desktopFooter={null}
       onClose={onClose}
     >

package/src/components/ui/fields.tsx

@@ -48,6 +48,8 @@ export interface TextFieldProps {
   labelWidth?: number;
   value?: string;
   placeholder?: string;
+  /** The most characters it takes; typing and pasting stop there. */
+  maxLength?: number;
   focused?: boolean;
   width?: number;
   inputRef?: RefObject<InputRenderable | null>;
@@ -119,6 +121,7 @@ function TextFieldControl({
   active,
   value,
   placeholder,
+  maxLength,
   focused,
   width,
   inputRef,
@@ -163,6 +166,7 @@ function TextFieldControl({
         label={label}
         value={value}
         placeholder={placeholder}
+        maxLength={maxLength}
         focused={focused}
         width={width}
         inputRef={inputRef}
@@ -226,6 +230,7 @@ function TextFieldControl({
           value={value}
           selectable={!isPassword}
           placeholder={isPassword ? "" : placeholder}
+          {...(maxLength === undefined ? {} : { maxLength })}
           focused={focused}
           textColor={isPassword ? backgroundColor : textColor}
           placeholderColor={placeholderColor}

package/src/components/ui/index.ts

@@ -60,7 +60,7 @@ export type { TabsProps } from "./tabs";
 export { SegmentedControl } from "./toggle";
 export type { SegmentedControlProps } from "./toggle";
 export { EmptyState, PaneStatusBody, Notice, loadingText, unavailableText } from "./status";
-export type { EmptyStateProps, PaneStatusBodyProps, NoticeProps } from "./status";
+export type { EmptyStateProps, PaneStatusBodyProps, NoticeProps, StatusRetry } from "./status";
 export { Badge, BulletList, Divider, FigureList, KeyValueRow, Prose, READING_WIDTH, Section, SectionHeading } from "./display";
 export type {
   BadgeProps, BulletListProps, DividerProps, FigureListItem, FigureListProps, KeyValueRowProps, ProseProps, SectionProps,

package/src/components/ui/status.tsx

@@ -1,21 +1,153 @@
-import type { ReactNode } from "react";
+import { useEffect, useReducer, useRef, useState, type ReactNode } from "react";
 import { t, tf } from "../../i18n";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, useUiCapabilities } from "../../ui";
+import { formatRelativeAge } from "../../utils/datetime-format";
 import { Spinner } from "./loading";
 import { ButtonActionScope } from "./action-scope";
+import { Button } from "./button";
+
+/**
+ * Asking again from an empty or failed state. The state draws the button
+ * (first, so it answers Enter), keeps it busy while the check runs, and when
+ * the answer comes back the same, says when it checked: otherwise a press that
+ * changes nothing on screen looks like a press that did nothing.
+ */
+export interface StatusRetry {
+  /** Asks again. A returned promise keeps the button busy until it settles. */
+  onRetry: () => unknown;
+  /** "Retry", unless the check has a better verb, such as "Look again". */
+  label?: string;
+  /** The label while it runs: "Retrying..." for the default label. */
+  pendingLabel?: string;
+  /**
+   * The same check running from anywhere (the button, `r`, a timer), such as
+   * a resource's `loading`. Needed when the old answer stays on screen while
+   * it runs, as an uncovered company does.
+   */
+  pending?: boolean;
+  /** Said after "Checked just now." when an empty state comes back the same, such as "Still no careers system." */
+  unchanged?: string;
+}
 
 export interface EmptyStateProps {
   title: string;
   message?: string;
   hint?: string;
   actions?: ReactNode;
+  retry?: StatusRetry;
   status?: "empty" | "error";
 }
 
-export function EmptyState({ title, message, hint, actions, status = "empty" }: EmptyStateProps) {
+type ShownStatus = "empty" | "error" | null;
+
+interface RetryFeedback {
+  pending: boolean;
+  press: () => void;
+  /** When a check ended on the state it started from; null once anything else is shown. */
+  checkedAt: number | null;
+}
+
+function isThenable(value: unknown): value is PromiseLike<unknown> {
+  return !!value && typeof (value as PromiseLike<unknown>).then === "function";
+}
+
+/**
+ * A check is the button's own promise, `retry.pending`, or the body showing
+ * its spinner (`shown === "loading"`) once a retry has been offered. When one
+ * ends on the empty or failed state it started from, the answer did not change.
+ */
+function useRetryFeedback(retry: StatusRetry | undefined, shown: ShownStatus | "loading"): RetryFeedback {
+  const [, rerender] = useReducer((count: number) => count + 1, 0);
+  const [checkedAt, setCheckedAt] = useState<number | null>(null);
+  const inFlight = useRef(0);
+  const mounted = useRef(true);
+  const track = useRef<{ offered: boolean; checking: boolean; from: ShownStatus; last: ShownStatus }>({
+    offered: false, checking: false, from: null, last: null,
+  });
+  if (retry) track.current.offered = true;
+  const pending = inFlight.current > 0 || retry?.pending === true;
+  const checking = pending || shown === "loading";
+  const begin = () => {
+    const state = track.current;
+    if (state.checking) return;
+    state.checking = true;
+    state.from = state.last;
+  };
+
+  useEffect(() => {
+    mounted.current = true;
+    return () => { mounted.current = false; };
+  }, []);
+
+  // After every commit: a check that just ended either confirms the state on
+  // screen or clears the line, and anything else shown clears it. A body that
+  // never offered a retry skips all of it.
+  useEffect(() => {
+    const state = track.current;
+    if (!state.offered) return;
+    if (checking) {
+      begin();
+      return;
+    }
+    // `shown` is not "loading" here: that counts as checking.
+    if (state.checking) {
+      state.checking = false;
+      setCheckedAt(shown !== null && shown === state.from ? Date.now() : null);
+    } else if (shown !== state.last) {
+      setCheckedAt(null);
+    }
+    state.last = shown;
+  });
+
+  // "just now" turns into "2m ago" while the line stays up.
+  const shownCheckedAt = checking ? null : checkedAt;
+  useEffect(() => {
+    if (shownCheckedAt === null) return;
+    const timer = setInterval(rerender, 30_000);
+    return () => clearInterval(timer);
+  }, [shownCheckedAt]);
+
+  const press = () => {
+    if (!retry || pending) return;
+    const result = retry.onRetry();
+    if (!isThenable(result)) return;
+    begin();
+    inFlight.current += 1;
+    rerender();
+    const done = () => {
+      inFlight.current -= 1;
+      if (mounted.current) rerender();
+    };
+    result.then(done, done);
+  };
+
+  return { pending, press, checkedAt: shownCheckedAt };
+}
+
+function retryNote(retry: StatusRetry, status: "empty" | "error", checkedAt: number): string {
+  const age = formatRelativeAge(checkedAt, Math.max(checkedAt, Date.now()));
+  if (status === "error") return tf("Tried again {age}.", { age });
+  const checked = tf("Checked {age}.", { age });
+  return retry.unchanged ? `${checked} ${t(retry.unchanged)}` : checked;
+}
+
+export function EmptyState(props: EmptyStateProps) {
+  const feedback = useRetryFeedback(props.retry, props.retry ? props.status ?? "empty" : null);
+  return <EmptyStateBody {...props} feedback={feedback} />;
+}
+
+function EmptyStateBody({ title, message, hint, actions, retry, status = "empty", feedback }: EmptyStateProps & { feedback: RetryFeedback }) {
   const colors = useThemeColors();
   const { nativePaneChrome } = useUiCapabilities();
+  const retryButton = retry ? (
+    <Button
+      label={retry.label ?? "Retry"}
+      pendingLabel={retry.pendingLabel ?? (retry.label ? undefined : "Retrying...")}
+      pending={feedback.pending}
+      onPress={feedback.press}
+    />
+  ) : null;
   // Provider messages must wrap at narrow pane widths rather than lose their tail.
   return (
     <Box flexDirection="column" data-gloom-status={status} data-gloom-ui="empty-state">
@@ -23,11 +155,14 @@ export function EmptyState({ title, message, hint, actions, status = "empty" }:
       {message && <Box><Text fg={colors.textMuted} wrapText>{t(message)}</Text></Box>}
       {hint && <Box><Text fg={colors.textMuted} wrapText>{t(hint)}</Text></Box>}
       {/* Wraps in a narrow pane rather than clipping the second action; a terminal wraps without a blank row. */}
-      {actions && (
+      {(retryButton || actions) && (
         <Box flexDirection="row" flexWrap="wrap" gap={1} rowGap={nativePaneChrome ? undefined : 0} marginTop={1}>
-          <ButtonActionScope>{actions}</ButtonActionScope>
+          <ButtonActionScope>{retryButton}{actions}</ButtonActionScope>
         </Box>
       )}
+      {retry && feedback.checkedAt !== null && (
+        <Box><Text fg={colors.textMuted} wrapText>{retryNote(retry, status, feedback.checkedAt)}</Text></Box>
+      )}
     </Box>
   );
 }
@@ -68,6 +203,8 @@ export interface PaneStatusBodyProps {
   emptyTitle?: string;
   emptyMessage?: string;
   actions?: ReactNode;
+  /** Asking again from the error or empty state; see StatusRetry. */
+  retry?: StatusRetry;
   align?: "start" | "center";
   width?: number;
   height?: number;
@@ -85,12 +222,16 @@ export function PaneStatusBody({
   emptyTitle,
   emptyMessage,
   actions,
+  retry,
   align = "start",
   width,
   height,
   children,
 }: PaneStatusBodyProps) {
   const status = error ? "error" : loading ? "loading" : empty ? "empty" : null;
+  // Here rather than in the state, so a retry that shows the spinner while it
+  // runs still says it tried once the same failure is back.
+  const feedback = useRetryFeedback(retry, status);
   if (!status) return <>{children}</>;
   // Keyed so content that starts with a bare Box never reuses this padded node.
   return (
@@ -107,11 +248,13 @@ export function PaneStatusBody({
       data-gloom-ui="pane-status"
     >
       {status === "loading" ? <Spinner label={loadingLabel ?? loadingText(subject)} /> : (
-        <EmptyState
+        <EmptyStateBody
           status={status}
           title={status === "error" ? errorTitle ?? (subject ? unavailableText(subject) : error!) : emptyTitle ?? t("Nothing to show yet.")}
           message={status === "error" ? (errorTitle || subject ? error! : undefined) : emptyMessage}
           actions={actions}
+          retry={retry}
+          feedback={feedback}
         />
       )}
     </Box>

package/src/data/config/store/normalize.ts

@@ -27,6 +27,7 @@ import { isRecord } from "../../../utils/guards";
 import { debugLog } from "../../../utils/debug-log";
 import { DEFAULT_THEME, themes } from "../../../theme/themes";
 import { sanitizeStarPrompt } from "../../../app/star-prompt/model";
+import { sanitizeUpdatesConfig } from "../../../updater/channel";
 
 const configLog = debugLog.createLogger("config");
 const reportedUnknownThemes = new Set<string>();
@@ -106,6 +107,7 @@ export function normalizeLoadedConfig(
     ...withKeybindings(sanitizeKeybindings(candidate.keybindings)),
     ...withTelemetry(sanitizeTelemetry(candidate.telemetry)),
     ...withStarPrompt(sanitizeStarPrompt(candidate.starPrompt)),
+    ...withUpdates(sanitizeUpdatesConfig(candidate.updates)),
   };
 
   const needsSave =
@@ -169,6 +171,8 @@ export function normalizeConfigForSave(config: AppConfig): AppConfig {
   Object.assign(persisted, withTelemetry(sanitizeTelemetry(config.telemetry)));
   delete persisted.starPrompt;
   Object.assign(persisted, withStarPrompt(sanitizeStarPrompt(config.starPrompt)));
+  delete persisted.updates;
+  Object.assign(persisted, withUpdates(sanitizeUpdatesConfig(config.updates)));
 
   return persisted;
 }
@@ -185,6 +189,10 @@ function withStarPrompt(starPrompt: AppConfig["starPrompt"]): Pick<AppConfig, "s
   return starPrompt ? { starPrompt } : {};
 }
 
+function withUpdates(updates: AppConfig["updates"]): Pick<AppConfig, "updates"> {
+  return updates ? { updates } : {};
+}
+
 /** Only the switches that are set survive; an empty object is the same as none. */
 function sanitizeTelemetry(value: unknown): TelemetryConfig | undefined {
   if (!isRecord(value)) return undefined;

package/src/i18n/es.ts

@@ -70,6 +70,7 @@ export const es: Record<string, string> = {
   "Could not save this value.": "No se pudo guardar este valor.",
   "Could not apply that setting.": "No se pudo aplicar ese ajuste.",
   "Enter {action} · Esc cancel": "Enter {action} · Esc cancelar",
+  "y {action} · Enter or Esc {cancel}": "y {action} · Enter o Esc {cancel}",
   "Published {date}": "Publicado {date}",
   "Language": "Idioma",
   "Unsupported language": "Idioma no compatible",
@@ -151,6 +152,7 @@ export const es: Record<string, string> = {
   "Toggle Status Bar": "Alternar barra de estado",
   "Toggle Value Flashing": "Alternar parpadeo de valores",
   "Check for Updates": "Buscar actualizaciones",
+  "Release Channel": "Canal de versiones",
   "Crash Reports": "Informes de fallos",
   "Usage Counts": "Recuento de uso",
   "Change Theme": "Cambiar tema",