gloomberb 0.18.1 → 0.18.2

package/src/components/layout/pane/footer/index.tsx

@@ -5,7 +5,7 @@ import { t } from "../../../../i18n";
 import { ShortcutHint } from "../../../ui/shortcut-hint";
 import { Button } from "../../../ui/button";
 import { ChoiceDialog } from "../../../ui/choice-dialog";
-import { IconButton } from "../../../ui/icon";
+import { Icon, IconButton } from "../../../ui/icon";
 import { useRemoteUiNode } from "../../../../remote/semantic-tree";
 import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { nativePaneFooterRows } from "../sizing";
@@ -23,7 +23,10 @@ import {
 
 export {
   datesPaneData,
+  DELAYED_SEGMENT,
+  delayedFooterSegment,
   hasPaneFooterContent,
+  splitDelayedStatus,
   type CombinedPaneFooter,
   type PaneFooterPressEvent,
   type PaneFooterSegment,
@@ -105,6 +108,21 @@ function SegmentView({ segment, focused }: { segment: PaneFooterSegment; focused
     else stopMouseEvent(event);
   };
 
+  if (nativePaneChrome && segment.icon && !segment.onPress) {
+    // A status, not a control: the icon button's box, with its detail on hover.
+    return (
+      <Box
+        role="img"
+        aria-label={label}
+        title={segment.title ?? label}
+        data-gloom-role="pane-footer-icon"
+        data-icon={segment.icon}
+      >
+        <Icon name={segment.icon} size={14} color={segment.disabled ? colors.textMuted : footerToneColor(segment.parts[0] ?? { text: "" })} />
+      </Box>
+    );
+  }
+
   if (nativePaneChrome && segment.icon) {
     return (
       <IconButton
@@ -247,7 +265,7 @@ function FooterContent({
     : undefined;
   // A segment with shorter forms takes the longest that fits beside the hints, gaps and terminal keys included.
   const keysWidth = nativePaneChrome ? 0 : footer.info.reduce((total, segment) => total + terminalSegmentKey(segment, focused).length, 0);
-  const info = infoWidth != null ? fitPaneFooterInfo(footer.info, infoWidth - keysWidth) : footer.info;
+  const info = infoWidth != null ? fitPaneFooterInfo(footer.info, infoWidth - keysWidth, { besideHints: hasHints }) : footer.info;
 
   if (!hasInfo && !hasHints) {
     return <Box flexGrow={1} height={1} />;
@@ -273,7 +291,8 @@ function FooterContent({
           {...(infoWidth != null ? { width: infoWidth } : {})}
         >
           {info.map((segment, index) => (
-            <Box key={segment.id} flexDirection="row" marginRight={index === info.length - 1 ? 0 : 1}>
+            // An icon is a few cells that mean nothing cut: the text beside it gives way first.
+            <Box key={segment.id} flexDirection="row" flexShrink={segment.icon ? 0 : undefined} marginRight={index === info.length - 1 ? 0 : 1}>
               <SegmentView segment={segment} focused={focused} />
             </Box>
           ))}

package/src/components/layout/pane/footer/model.ts

@@ -1,6 +1,6 @@
 import type { ContextMenuItem } from "../../../../types/context-menu";
 import { t } from "../../../../i18n";
-import { displayWidth } from "../../../../utils/format";
+import { clipToDisplayWidth, displayWidth } from "../../../../utils/format";
 import { getShortcutHintWidth } from "../../../ui/shortcut-hint";
 
 export interface PaneFooterRegistration {
@@ -23,8 +23,11 @@ export interface PaneFooterRegistration {
 export interface PaneFooterSegment {
   id: string;
   parts: PaneFooterPart[];
-  /** Desktop affordance; parts retain the terminal representation. */
-  icon?: "warning";
+  /**
+   * Desktop affordance; parts retain the terminal representation. `clock` is
+   * data a source delivers late: build it with {@link delayedFooterSegment}.
+   */
+  icon?: "warning" | "clock";
   /**
    * The segment only dates the pane's data (`as of 2026-10-05`). A `gloomberb
    * shot` whose status line already dates that data leaves it out, so the
@@ -52,6 +55,68 @@ export interface PaneFooterSegment {
   disabled?: boolean;
 }
 
+/** The terminal's mark for data that arrives late, as quote ages carry it (`◷15s`). */
+const DELAYED_FOOTER_GLYPH = "◷";
+
+/**
+ * The footer's one form for data a source delivers late: a yellow clock with
+ * `detail` in its tooltip on the desktop, and the clock with the delay
+ * (`◷15m`) in the terminal, which has no tooltip, so it takes a few cells
+ * rather than a phrase. `onPress` makes it a button, such as an upgrade.
+ */
+export function delayedFooterSegment({
+  id,
+  detail,
+  delay,
+  onPress,
+  quoteStatus,
+}: {
+  id: string;
+  /** What is late and by how much, in words: the tooltip and the accessible name. */
+  detail: string;
+  /** How late, when known (`15m`, `12h`); the terminal draws it after the clock. */
+  delay?: string;
+  onPress?: () => void;
+  quoteStatus?: boolean;
+}): PaneFooterSegment {
+  return {
+    id,
+    icon: "clock",
+    label: detail,
+    title: detail,
+    parts: [{ text: `${DELAYED_FOOTER_GLYPH}${delay ?? ""}`, tone: "warning" }],
+    ...(onPress ? { onPress } : {}),
+    ...(quoteStatus ? { quoteStatus } : {}),
+  };
+}
+
+/** A pane whose market data is all delayed, by no one figure: the clock alone, its tooltip saying so. */
+export const DELAYED_SEGMENT: PaneFooterSegment = delayedFooterSegment({ id: "delayed", detail: "Delayed market data" });
+
+/** A status that opens with how late its data is: `15m delayed`, `mixed real-time and delayed`, `delayed`. */
+const DELAYED_LEAD = /^(\d+[smhd] delayed|mixed real-time and delayed|delayed)(?: · |$)/;
+
+/**
+ * A status segment whose text opens with how late its data is (`15m delayed ·
+ * as of 14:47 UTC`) as the footer's clock (see {@link delayedFooterSegment})
+ * and the rest of its text; any other segment as it is.
+ */
+export function splitDelayedStatus(segment: PaneFooterSegment): PaneFooterSegment[] {
+  const [first, ...more] = segment.parts;
+  const match = first ? DELAYED_LEAD.exec(first.text) : null;
+  if (!first || !match) return [segment];
+  const lead = match[1]!;
+  const clock = delayedFooterSegment({
+    id: `${segment.id}-delay`,
+    detail: lead,
+    delay: /^\d/.test(lead) ? lead.slice(0, lead.indexOf(" ")) : undefined,
+    quoteStatus: segment.quoteStatus,
+  });
+  const rest = first.text.slice(match[0].length);
+  const parts = rest ? [{ ...first, text: rest }, ...more] : more;
+  return parts.length ? [clock, { ...segment, parts }] : [clock];
+}
+
 /** Whether the segment only dates the pane's data: marked `asOf`, or reading `as of <date>`. */
 export function datesPaneData(segment: Pick<PaneFooterSegment, "asOf" | "parts">): boolean {
   return segment.asOf ?? /^as of\b/i.test(segment.parts[0]?.text ?? "");
@@ -127,7 +192,7 @@ function infoTextWidth(segments: readonly PaneFooterSegment[]): number {
  * The info segments as they fit `width`: segments with `variants` step down
  * together, one variant at a time, until the row fits or none is left.
  */
-export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number): PaneFooterSegment[] {
+export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number, { besideHints = true }: { besideHints?: boolean } = {}): PaneFooterSegment[] {
   const stages = Math.max(0, ...info.map((segment) => segment.variants?.length ?? 0));
   let fitted = info;
   for (let stage = 0; stage < stages && infoTextWidth(fitted) > width; stage += 1) {
@@ -140,9 +205,39 @@ export function fitPaneFooterInfo(info: PaneFooterSegment[], width: number): Pan
       } : segment;
     });
   }
+  // A trailing status cut mid-word reads as part of the hints beside it ("quote 12h t[x] put"): one that does not
+  // fit ends in an ellipsis a column short of them, or is left out when less than half of it would show. A
+  // warning, an icon or a pressable segment stays as it is, clipped by the row if it must be. With no hints beside it
+  // (a pane picture's footer), the row clips it, so a frame that fits its own status line sees it overflow.
+  while (besideHints && fitted.length > 1 && infoTextWidth(fitted) > width) {
+    const last = fitted.at(-1)!;
+    if (last.icon || last.onPress || last.parts.some((part) => part.tone === "warning" || part.tone === "negative")) break;
+    const room = width - infoTextWidth(fitted.slice(0, -1)) - 2;
+    if (room * 2 >= infoTextWidth([last])) return [...fitted.slice(0, -1), clipSegment(last, room)];
+    fitted = fitted.slice(0, -1);
+  }
   return fitted;
 }
 
+/** A segment cut to `width` behind an ellipsis, each part keeping its tone; the full text stays as its title. */
+function clipSegment(segment: PaneFooterSegment, width: number): PaneFooterSegment {
+  const full = segment.parts.map((part) => part.text).join(" ");
+  const clipped = clipToDisplayWidth(full, width);
+  if (clipped === full) return segment;
+  const body = clipped.slice(0, -1);
+  const parts: PaneFooterPart[] = [];
+  let offset = 0;
+  for (const part of segment.parts) {
+    if (offset >= body.length) break;
+    parts.push({ ...part, text: body.slice(offset, offset + part.text.length) });
+    offset += part.text.length + 1;
+  }
+  const last = parts.at(-1);
+  if (!last) return { ...segment, title: segment.title ?? full, parts: [{ ...segment.parts[0]!, text: clipped }] };
+  parts[parts.length - 1] = { ...last, text: `${last.text}…` };
+  return { ...segment, title: segment.title ?? full, parts };
+}
+
 function moreControl(budget: number): { label: string; width: number } {
   const label = t("More");
   const width = displayWidth(label) + 2;

package/src/components/layout/pane/header-tabs.tsx

@@ -63,10 +63,24 @@ export function NestedPaneTabs({ children }: { children: ReactNode }) {
   return <PaneHeaderTabsContext.Provider value={null}>{children}</PaneHeaderTabsContext.Provider>;
 }
 
+/** One id per artwork element, so a strip redraws when a tab's `leading` is a new element and not otherwise. */
+const leadingIds = new WeakMap<object, number>();
+let nextLeadingId = 1;
+function leadingSignature(leading: ReactNode): string | number {
+  if (leading === undefined || leading === null) return "";
+  if (typeof leading !== "object") return String(leading);
+  let id = leadingIds.get(leading);
+  if (id === undefined) {
+    id = nextLeadingId++;
+    leadingIds.set(leading, id);
+  }
+  return id;
+}
+
 function registrationSignature(registration: PaneHeaderTabsRegistration | null): string {
   if (!registration) return "";
   return JSON.stringify([
-    registration.tabs.map((tab) => [tab.value, tab.label, tab.disabled === true, !!tab.onClose, tab.fg ?? "", tab.reorderable !== false]),
+    registration.tabs.map((tab) => [tab.value, tab.label, tab.disabled === true, !!tab.onClose, tab.fg ?? "", tab.reorderable !== false, leadingSignature(tab.leading)]),
     registration.activeValue,
     registration.focused === true,
     registration.keyboardNavigation !== false,

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

@@ -7,6 +7,7 @@ import { useThemeColors } from "../../theme/theme-context";
 import { t } from "../../i18n";
 import { Button, ListView, type ListViewItem } from "../ui";
 import type { ButtonProps } from "../ui/button";
+import { ListRowLines } from "../ui/list-row-lines";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../layout/titlebar-overlay";
 
 /**
@@ -525,17 +526,14 @@ export function OnboardingChoiceList({
       selectOnHover
       renderRow={(item, state) => (
         <Box flexDirection="row" alignItems="center" width="100%" minWidth={0}>
-          <Box flexDirection="column" flexGrow={1} minWidth={0}>
-            <Text
-              fg={state.selected ? colors.textBright : colors.text}
-              attributes={state.selected ? TextAttributes.BOLD : 0}
-              wrapText
-            >
-              {item.label}
-            </Text>
-            {item.description ? (
-              <Text fg={colors.textMuted} wrapText>{item.description}</Text>
-            ) : null}
+          <Box flexDirection="row" flexGrow={1} minWidth={0}>
+            <ListRowLines
+              label={item.label}
+              description={item.description}
+              leading={item.leading}
+              labelColor={state.selected ? colors.textBright : colors.text}
+              labelBold={state.selected}
+            />
           </Box>
           {item.detail ? (
             <Text fg={colors.borderFocused} attributes={TextAttributes.BOLD} style={{ marginLeft: 10 }}>

package/src/components/onboarding/use-onboarding-broker-form.ts

@@ -1,4 +1,5 @@
 import {
+  createElement,
   useCallback,
   useEffect,
   useMemo,
@@ -16,6 +17,7 @@ import { tf } from "../../i18n";
 import type { useAppLanguage } from "../../i18n/react";
 import type { PluginRegistry } from "../../plugins/registry";
 import type { ListViewItem } from "../ui";
+import { LogoMark } from "../ui/logo-mark";
 import type { PortfolioSub } from "./onboarding-steps";
 import { brokerSetupGuideUrl } from "./portfolio-step/broker-setup-panel";
 import type { useOnboardingBrokerSync } from "./wizard-broker-sync";
@@ -42,14 +44,15 @@ export function useOnboardingBrokerFields({
     (): BrokerOption[] => getConnectableBrokerOptions(buildBrokerDirectory({
       signedIn: signedInBrokers,
       adapters: pluginRegistry.brokers.values(),
-    })),
-    [pluginRegistry.brokers, signedInBrokers],
+    }), pluginRegistry.getBrokerLogo),
+    [pluginRegistry.brokers, pluginRegistry.getBrokerLogo, signedInBrokers],
   );
   const brokerChoices = useMemo<ListViewItem[]>(() => brokerOptions.map((broker) => ({
     id: broker.id,
     label: tf("Connect {broker}", { broker: broker.name }),
     // A broker offered two ways shows which way each choice connects.
     description: broker.methodLabel ?? tf("Import positions from {broker}", { broker: broker.name }),
+    leading: createElement(LogoMark, { src: broker.logo, name: broker.name, size: "lead" }),
   })), [brokerOptions, language]);
   const activeBrokerFields = useMemo((): BrokerConfigField[] => {
     if (!selectedBrokerId) return [];

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

@@ -1,4 +1,5 @@
 import { brokerMethodLabel, type BrokerDirectoryEntry } from "../../brokers/directory";
+import { brokerDirectoryLogo, type BrokerPluginLogo } from "../../brokers/logos";
 import type { SignedInBroker } from "../../brokers/signed-in/client";
 import type { BrokerAdapter, BrokerPosition } from "../../types/broker";
 import type { AppConfig, OnboardingProgress, OnboardingStage } from "../../types/config";
@@ -47,19 +48,25 @@ export type BrokerOption = {
   name: string;
   /** How this choice connects, when the same broker is also offered another way. */
   methodLabel?: string;
+  /** The broker's logo for the desktop and the web (brokers/logos.ts); null draws its initial. */
+  logo?: string | null;
 } & (
   | { adapter: BrokerAdapter; signedIn?: undefined }
   | { signedIn: SignedInBroker; adapter?: undefined }
 );
 
-export function getConnectableBrokerOptions(directory: readonly BrokerDirectoryEntry[]): BrokerOption[] {
+export function getConnectableBrokerOptions(
+  directory: readonly BrokerDirectoryEntry[],
+  pluginLogo: BrokerPluginLogo = () => null,
+): BrokerOption[] {
   const options: BrokerOption[] = [];
   for (const entry of directory) {
+    const logo = brokerDirectoryLogo(entry, pluginLogo);
     for (const method of entry.methods) {
       const methodLabel = entry.methods.length > 1 ? brokerMethodLabel(entry, method) : undefined;
       options.push(method.kind === "signed-in"
-        ? { id: `signed-in:${method.broker.id}`, name: entry.name, methodLabel, signedIn: method.broker }
-        : { id: method.adapter.id, name: method.adapter.name, methodLabel, adapter: method.adapter });
+        ? { id: `signed-in:${method.broker.id}`, name: entry.name, methodLabel, logo, signedIn: method.broker }
+        : { id: method.adapter.id, name: method.adapter.name, methodLabel, logo, adapter: method.adapter });
     }
   }
   return options;

package/src/components/ui/button.tsx

@@ -13,9 +13,10 @@ import { useScopedButtonAction } from "./action-scope";
  * still reads as a control next to a primary one. `plain` is text that happens
  * to be clickable: no border, no fill. Anything shaped like a row, a table
  * cell, a status bar chip or a link is `plain` — a box drawn around it reads as
- * a control nested in the surface instead of part of it.
+ * a control nested in the surface instead of part of it. Use `quiet` for text
+ * actions that also need a filled selection/focus state without a frame.
  */
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "plain";
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "plain" | "quiet";
 
 export interface ButtonProps {
   label: string;
@@ -25,6 +26,8 @@ export interface ButtonProps {
   expanded?: boolean;
   onPress?: () => void;
   variant?: ButtonVariant;
+  /** Semantic fill for a primary action, retained while keyboard focused. */
+  tone?: "positive" | "negative" | "neutral" | "warning";
   disabled?: boolean;
   /**
    * The action it started is still running (a retry waiting for its answer).
@@ -56,13 +59,15 @@ export interface ButtonProps {
   stopPropagation?: boolean;
 }
 
-function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean, colors: ThemeColors): { bg?: string; fg: string } {
+function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean, colors: ThemeColors, tone?: ButtonProps["tone"]): { bg?: string; fg: string } {
+  if (variant === "quiet") return { bg: active ? colors.selected : undefined, fg: disabled ? colors.textMuted : active ? colors.textBright : colors.textDim };
   if (variant === "plain") {
     return { fg: disabled ? colors.textMuted : active ? colors.textBright : colors.textDim };
   }
   if (disabled) {
     return { bg: colors.panel, fg: colors.textMuted };
   }
+  if (tone && variant === "primary") return { bg: colors[tone], fg: colors.bg };
   if (active) {
     return { bg: colors.selected, fg: colors.selectedText };
   }
@@ -96,6 +101,7 @@ export function Button({
   expanded,
   onPress: pressAction,
   variant = "secondary",
+  tone,
   disabled = false,
   pending = false,
   pendingLabel,
@@ -138,6 +144,7 @@ export function Button({
         expanded={expanded}
         onPress={onPress}
         variant={variant}
+        tone={tone}
         disabled={inert}
         pending={pending}
         active={active}
@@ -152,7 +159,7 @@ export function Button({
     );
   }
 
-  const palette = resolveButtonColors(variant, active, inert, colors);
+  const palette = resolveButtonColors(variant, active, inert, colors, tone);
 
   return (
     <Box

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { Box, Text, useUiHost } from "../../ui";
 import { type PromptContext, useDialogKeyboard } from "../../ui/dialog";
 import { useThemeColors } from "../../theme/theme-context";
@@ -61,6 +61,9 @@ export function ChoiceDialog({
   );
   const selectedIndex = clampIndex(index, choices.length, -1);
   const selectedChoice = selectedIndex >= 0 ? choices[selectedIndex] : undefined;
+  // Terminal input can deliver navigation and Enter before React renders.
+  const cursor = useRef(selectedIndex);
+  const selectIndex = (next: number) => { cursor.current = next; setIndex(next); };
   const items = useMemo<ListViewItem[]>(() => choices.map((choice) => ({
     id: choice.id,
     label: choice.label,
@@ -72,7 +75,7 @@ export function ChoiceDialog({
   const width = useMemo(() => choiceDialogWidth(title, choices), [choices, title]);
 
   useEffect(() => {
-    setIndex((current) => clampIndex(current, choices.length, -1));
+    selectIndex(clampIndex(cursor.current, choices.length, -1));
   }, [choices.length]);
 
   const activateChoice = (choice: ChoiceDialogChoice | undefined) => {
@@ -84,9 +87,9 @@ export function ChoiceDialog({
     event.stopPropagation();
     const move = listCursorMove(event, MAX_VISIBLE_CHOICE_ROWS - 1);
     if (move) {
-      setIndex((current) => move(choices, current));
+      selectIndex(move(choices, cursor.current));
     } else if (event.name === "enter" || event.name === "return") {
-      activateChoice(selectedChoice);
+      activateChoice(choices[clampIndex(cursor.current, choices.length, -1)]);
     } else if (event.name === "escape") {
       resolve("");
     }
@@ -106,7 +109,7 @@ export function ChoiceDialog({
           height={Math.min(Math.max(items.length, 1), MAX_VISIBLE_CHOICE_ROWS)}
           scrollable={items.length > MAX_VISIBLE_CHOICE_ROWS}
           selectOnHover
-          onSelect={setIndex}
+          onSelect={selectIndex}
           onActivate={(_, nextIndex) => activateChoice(choices[nextIndex])}
         />
         <Box height={1} />

package/src/components/ui/display.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { t } from "../../i18n";
 import { blendHex, hoverBg } from "../../theme/colors";
+import { blendForContrast, higherContrast } from "../../theme/color-utils";
 import { useThemeColors } from "../../theme/theme-context";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../ui";
 import { truncateToDisplayWidth } from "../../utils/format";
@@ -62,6 +63,7 @@ export interface KeyValueRowProps {
   width?: number;
   labelWidth?: number;
   emphasis?: boolean;
+  align?: "left" | "right";
   /**
    * Opens what the value names (a security's DES, a function): the whole row is the target, and inside a
    * `PaneLinkMenu` the pane menu lists it as `link.label`, so the keyboard reaches what a click opens.
@@ -118,7 +120,7 @@ export function KeyValueRow(props: KeyValueRowProps) {
  * width in characters, the value and detail taking the rest of the row and
  * clipped in CSS where they run out of it.
  */
-function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, link }: KeyValueRowProps) {
+function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link }: KeyValueRowProps) {
   const colors = useThemeColors();
   usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
   const target = link ? {
@@ -137,7 +139,7 @@ function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidt
       <Text
         fg={color ?? statToneColor(tone, colors) ?? colors.text}
         attributes={emphasis ? TextAttributes.BOLD : undefined}
-        style={{ ...NATIVE_CLIP_STYLE, flex: detail ? "0 1 auto" : "1 1 auto" }}
+        style={{ ...NATIVE_CLIP_STYLE, flex: detail ? "0 1 auto" : "1 1 auto", textAlign: align }}
       >
         {value}
       </Text>
@@ -146,7 +148,7 @@ function NativeKeyValueRow({ label, value, detail, tone, color, width, labelWidt
   );
 }
 
-function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, link }: KeyValueRowProps) {
+function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWidth, emphasis = true, align = "left", link }: KeyValueRowProps) {
   const colors = useThemeColors();
   usePaneLinkMenuEntry(link ? `key-value:${label}:${value}` : null, link?.label ?? "", () => link?.onOpen());
   const target = link ? {
@@ -169,7 +171,7 @@ function TerminalKeyValueRow({ label, value, detail, tone, color, width, labelWi
       <Box width={labelColumns} flexShrink={0} overflow="hidden">
         <Text fg={colors.textDim}>{t(label)}</Text>
       </Box>
-      <Box width={valueWidth} flexShrink={0} overflow="hidden">
+      <Box width={valueWidth} flexShrink={0} overflow="hidden" alignItems={align === "right" ? "flex-end" : undefined}>
         <Text fg={color ?? statToneColor(tone, colors) ?? colors.text} attributes={emphasis ? TextAttributes.BOLD : undefined}>
           {valueWidth === undefined ? value : truncateToDisplayWidth(value, valueWidth)}
         </Text>
@@ -207,10 +209,13 @@ export function Badge({ label, tone = "neutral", color, variant = "subtle" }: Ba
   const accent = color ?? (tone === "neutral" ? colors.textDim : tone === "accent" ? colors.borderFocused : colors[tone]);
   const solid = variant === "solid";
   const neutral = solid && tone === "neutral" && !color;
+  const background = neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, BADGE_TINT);
+  const baseForeground = neutral ? colors.selectedText : solid ? colors.bg : accent;
+  const foreground = blendForContrast(baseForeground, background, higherContrast("#000000", "#ffffff", background), 4.5);
   const chip = (
-    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={neutral ? colors.selected : solid ? accent : blendHex(colors.bg, accent, BADGE_TINT)}
+    <Box height={nativePaneChrome ? undefined : 1} paddingX={1} backgroundColor={background}
       data-gloom-ui="badge" justifyContent={nativePaneChrome ? "center" : undefined} style={nativePaneChrome ? NATIVE_BADGE_STYLE : undefined}>
-      <Text fg={neutral ? colors.selectedText : solid ? colors.bg : accent} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{t(label)}</Text>
+      <Text fg={foreground} attributes={TextAttributes.BOLD} style={nativePaneChrome ? NATIVE_BADGE_TEXT_STYLE : undefined}>{t(label)}</Text>
     </Box>
   );
   return nativePaneChrome ? <Box height={1} flexShrink={0} justifyContent="center">{chip}</Box> : chip;