gloomberb 0.4.0 → 0.5.0

package/src/components/layout/shell.tsx

@@ -19,6 +19,7 @@ import {
   resolveFloating,
   simulateDrop,
   swapPanes,
+  type DockDividerLayout,
   type DockLeafLayout,
   type DropTarget,
   type FloatingRect,
@@ -38,6 +39,7 @@ import { PANE_HEADER_ACTION, PANE_HEADER_CLOSE } from "./pane-header";
 import { getNativeSurfaceManager, type NativeOccluder, type NativePaneLayer } from "../chart/native/surface-manager";
 import { FloatingPaneWrapper } from "./floating-pane";
 import { PaneWrapper } from "./pane";
+import { getPaneBodyHeight } from "./pane-sizing";
 
 interface ShellProps {
   pluginRegistry: PluginRegistry;
@@ -777,8 +779,8 @@ export function Shell({ pluginRegistry }: ShellProps) {
           event.preventDefault();
           return;
         }
-        event.stopPropagation();
-        event.preventDefault();
+        // Focus floating panes without consuming body clicks so child controls
+        // can act on the same initial mouse interaction.
         return;
       }
 
@@ -836,8 +838,8 @@ export function Shell({ pluginRegistry }: ShellProps) {
           event.preventDefault();
           return;
         }
-        event.stopPropagation();
-        event.preventDefault();
+        // Focus docked panes without consuming body clicks so embedded widgets
+        // receive the first click instead of requiring a second one.
         return;
       }
 
@@ -984,6 +986,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
         if (!pane) return null;
         const focused = state.focusedPaneId === leaf.instanceId && (!overlayOpen || menuState?.paneId === leaf.instanceId);
         const showActions = focused || hoveredPaneId === leaf.instanceId || menuState?.paneId === leaf.instanceId;
+        const bodyHeight = getPaneBodyHeight(leaf.rect.height);
         return (
           <box
             key={`dock:${leaf.instanceId}`}
@@ -1007,7 +1010,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
                   paneType={pane.instance.paneId}
                   focused={focused}
                   width={leaf.rect.width}
-                  height={leaf.rect.height - 1}
+                  height={bodyHeight}
                 />
               </PaneInstanceProvider>
             </PaneWrapper>
@@ -1019,6 +1022,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
         const preview = dragFloatingRect?.paneId === pane.instance.instanceId ? dragFloatingRect.rect : pane.floating!;
         const focused = state.focusedPaneId === pane.instance.instanceId && (!overlayOpen || menuState?.paneId === pane.instance.instanceId);
         const showActions = focused || hoveredPaneId === pane.instance.instanceId || menuState?.paneId === pane.instance.instanceId;
+        const bodyHeight = getPaneBodyHeight(preview.height);
         return (
           <FloatingPaneWrapper
             key={`float:${pane.instance.instanceId}`}
@@ -1038,7 +1042,7 @@ export function Shell({ pluginRegistry }: ShellProps) {
                 paneType={pane.instance.paneId}
                 focused={focused}
                 width={preview.width}
-                height={preview.height - 1}
+                height={bodyHeight}
                 close={() => handleFloatingClose(pane.instance.instanceId)}
               />
             </PaneInstanceProvider>

package/src/components/layout/status-bar.test.tsx

@@ -1,7 +1,8 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { testRender } from "@opentui/react/test-utils";
 import { AppContext, createInitialState } from "../../state/app-context";
-import { cloneLayout, createDefaultConfig } from "../../types/config";
+import { cloneLayout, createDefaultConfig, type LayoutConfig } from "../../types/config";
+import type { AppNotificationRequest } from "../../types/plugin";
 import { StatusBar } from "./status-bar";
 import { setSharedRegistryForTests } from "../../plugins/registry";
 
@@ -89,13 +90,13 @@ describe("StatusBar", () => {
 
     const actions: Array<{ type: string }> = [];
     let updatedLayout = null as ReturnType<typeof cloneLayout> | null;
-    const toasts: string[] = [];
+    const notifications: AppNotificationRequest[] = [];
 
     setSharedRegistryForTests({
       getLayoutFn: () => state.config.layout,
       getTermSizeFn: () => ({ width: 120, height: 40 }),
-      updateLayoutFn: (layout) => { updatedLayout = layout; },
-      showToastFn: (message: string) => { toasts.push(message); },
+      updateLayoutFn: (layout: LayoutConfig) => { updatedLayout = layout; },
+      notify: (notification: AppNotificationRequest) => { notifications.push(notification); },
       Slot: () => null,
     } as any);
 
@@ -119,8 +120,16 @@ describe("StatusBar", () => {
     await testSetup.renderOnce();
 
     expect(updatedLayout?.floating).toHaveLength(0);
-    expect(toasts).toEqual(["Retiled all panes"]);
+    expect(notifications).toHaveLength(1);
+    expect(notifications[0]).toMatchObject({
+      body: "Retiled all panes",
+      type: "success",
+      action: { label: "Revert" },
+    });
     expect(actions).toContainEqual({ type: "DISMISS_GRIDLOCK_TIP" });
+
+    notifications[0]!.action!.onClick();
+    expect(actions).toContainEqual({ type: "UNDO_LAYOUT" });
   });
 
   test("auto-dismisses the gridlock tip after its timeout", async () => {
@@ -136,7 +145,7 @@ describe("StatusBar", () => {
     const originalSetTimeout = globalThis.setTimeout;
     const originalClearTimeout = globalThis.clearTimeout;
 
-    globalThis.setTimeout = ((callback: TimerHandler, delay?: number) => {
+    globalThis.setTimeout = ((callback: Parameters<typeof setTimeout>[0], delay?: number) => {
       timers.push({ callback: typeof callback === "function" ? callback : null, delay });
       return 1 as unknown as ReturnType<typeof setTimeout>;
     }) as typeof setTimeout;
@@ -146,7 +155,7 @@ describe("StatusBar", () => {
       getLayoutFn: () => state.config.layout,
       getTermSizeFn: () => ({ width: 120, height: 40 }),
       updateLayoutFn: () => {},
-      showToastFn: () => {},
+      notify: () => {},
       Slot: () => null,
     } as any);
 

package/src/components/layout/status-bar.tsx

@@ -10,6 +10,7 @@ import {
 } from "../../utils/market-status";
 import { getSharedRegistry } from "../../plugins/registry";
 import { gridlockAllPanes } from "../../plugins/pane-manager";
+import { notifyGridlockComplete } from "../../plugins/gridlock-notification";
 
 const GRIDLOCK_TIP_DURATION_MS = 60_000;
 
@@ -60,7 +61,9 @@ export function StatusBar() {
     if (!registry) return;
     const { width, height } = registry.getTermSizeFn();
     registry.updateLayoutFn(gridlockAllPanes(registry.getLayoutFn(), { x: 0, y: 0, width, height }));
-    registry.showToastFn("Retiled all panes", { type: "success" });
+    notifyGridlockComplete(registry.notify.bind(registry), () => {
+      dispatch({ type: "UNDO_LAYOUT" });
+    });
     dispatch({ type: "DISMISS_GRIDLOCK_TIP" });
   };
 

package/src/components/markdown-editor.tsx

@@ -129,6 +129,7 @@ export function MarkdownEditor({
       placeholderColor={colors.textDim}
       backgroundColor={focused ? colors.panel : colors.bg}
       flexGrow={1}
+      wrapText
     />
   );
 }

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

@@ -3,15 +3,12 @@ import { useDialog, useDialogKeyboard, type AlertContext } from "@opentui-ui/dia
 import { useEffect, useRef, useState } from "react";
 import type {
   PaneSettingField,
-  PaneSettingOption,
-  PaneSettingOrderedMultiSelectField,
   PaneSettingTextField,
 } from "../types/plugin";
 import type { PluginRegistry } from "../plugins/registry";
 import { useAppState } from "../state/app-context";
 import { colors } from "../theme/colors";
-import { ToggleList } from "./toggle-list";
-import { Button, DialogFrame, ListView, TextField } from "./ui";
+import { Button, DialogFrame, ListView, MultiSelectDialogContent, TextField } from "./ui";
 
 interface PaneSettingsDialogContentProps extends AlertContext {
   paneId: string;
@@ -56,37 +53,6 @@ function coerceSelectedValues(value: unknown): string[] {
     : [];
 }
 
-function toggleSelectedValue(currentValues: string[], value: string): string[] {
-  return currentValues.includes(value)
-    ? currentValues.filter((entry) => entry !== value)
-    : [...currentValues, value];
-}
-
-function moveSelectedValue(
-  field: PaneSettingOrderedMultiSelectField,
-  currentValues: string[],
-  selectedOption: string,
-  direction: "up" | "down",
-): string[] {
-  if (!currentValues.includes(selectedOption)) return currentValues;
-
-  const optionValueSet = new Set(field.options.map((option) => option.value));
-  const ordered = currentValues.filter((value) => optionValueSet.has(value));
-  const index = ordered.indexOf(selectedOption);
-  if (index < 0) return currentValues;
-
-  const targetIndex = direction === "up"
-    ? Math.max(0, index - 1)
-    : Math.min(ordered.length - 1, index + 1);
-  if (targetIndex === index) return currentValues;
-
-  const next = [...ordered];
-  const [entry] = next.splice(index, 1);
-  next.splice(targetIndex, 0, entry!);
-  const unknownValues = currentValues.filter((value) => !optionValueSet.has(value));
-  return [...next, ...unknownValues];
-}
-
 function SelectFieldDialog({
   dismiss,
   dialogId,
@@ -116,7 +82,7 @@ function SelectFieldDialog({
   return (
     <DialogFrame
       title={field.label}
-      footer="Use ↑↓ to choose · enter to apply · esc to close"
+      footer="Use ↑↓ to choose · enter to apply · esc cancel"
     >
       <ListView
         items={field.options.map((option) => ({
@@ -175,7 +141,7 @@ function TextFieldDialog({
   return (
     <DialogFrame
       title={field.label}
-      footer="Enter to apply · esc to close"
+      footer="Enter to apply · esc cancel"
     >
       <box flexDirection="column" gap={1}>
         <TextField
@@ -216,121 +182,16 @@ function MultiSelectFieldDialog({
   currentValue: unknown;
   onApply: (value: string[]) => Promise<void>;
 }) {
-  const optionByValue = new Map(field.options.map((option) => [option.value, option]));
-  const [selectedValues, setSelectedValues] = useState(() => coerceSelectedValues(currentValue));
-  const knownSelectedValues = selectedValues.filter((value) => optionByValue.has(value));
-  const orderedOptions = field.options;
-  const [selectedOptionId, setSelectedOptionId] = useState(orderedOptions[0]?.value ?? "");
-  const selectedIndex = Math.max(0, orderedOptions.findIndex((option) => option.value === selectedOptionId));
-  const selectedOptionValue = orderedOptions[selectedIndex]?.value ?? "";
-  const selectedValueOrder = knownSelectedValues.indexOf(selectedOptionValue);
-  const canMoveUp = field.type === "ordered-multi-select" && selectedValueOrder > 0;
-  const canMoveDown = field.type === "ordered-multi-select"
-    && selectedValueOrder >= 0
-    && selectedValueOrder < knownSelectedValues.length - 1;
-
-  useEffect(() => {
-    setSelectedValues(coerceSelectedValues(currentValue));
-  }, [currentValue]);
-
-  useEffect(() => {
-    if (orderedOptions.some((option) => option.value === selectedOptionId)) return;
-    setSelectedOptionId(orderedOptions[0]?.value ?? "");
-  }, [orderedOptions, selectedOptionId]);
-
-  const toggleItems = orderedOptions.map((option) => {
-    const order = knownSelectedValues.indexOf(option.value);
-    const orderDescription = field.type === "ordered-multi-select" && order >= 0
-      ? `Order ${order + 1} of ${knownSelectedValues.length}.`
-      : null;
-
-    return {
-      id: option.value,
-      label: option.label,
-      enabled: selectedValues.includes(option.value),
-      description: [option.description, orderDescription].filter((entry): entry is string => !!entry).join(" "),
-    };
-  });
-  const listHeight = Math.min(12, Math.max(6, toggleItems.length));
-
-  const applySelectedValues = async (nextValues: string[]) => {
-    const previousValues = selectedValues;
-    setSelectedValues(nextValues);
-    try {
-      await onApply(nextValues);
-    } catch (error) {
-      setSelectedValues(previousValues);
-      throw error;
-    }
-  };
-
-  const toggleOption = async (option: PaneSettingOption | undefined) => {
-    if (!option) return;
-    await applySelectedValues(toggleSelectedValue(selectedValues, option.value));
-  };
-
-  const moveOption = async (direction: "up" | "down") => {
-    if (field.type !== "ordered-multi-select") return;
-    const option = orderedOptions[selectedIndex];
-    if (!option) return;
-    await applySelectedValues(moveSelectedValue(field, selectedValues, option.value, direction));
-  };
-
-  useDialogKeyboard((event) => {
-    event.stopPropagation();
-    if (event.name === "up" || event.name === "k") {
-      const nextIndex = Math.max(0, selectedIndex - 1);
-      setSelectedOptionId(orderedOptions[nextIndex]?.value ?? selectedOptionId);
-    } else if (event.name === "down" || event.name === "j") {
-      const nextIndex = Math.min(orderedOptions.length - 1, selectedIndex + 1);
-      setSelectedOptionId(orderedOptions[nextIndex]?.value ?? selectedOptionId);
-    }
-    else if (isSpaceKey(event)) {
-      void toggleOption(orderedOptions[selectedIndex]).catch(() => {});
-    } else if (event.name === "[" && field.type === "ordered-multi-select") {
-      void moveOption("up").catch(() => {});
-    } else if (event.name === "]" && field.type === "ordered-multi-select") {
-      void moveOption("down").catch(() => {});
-    } else if (event.name === "enter" || event.name === "return") {
-      dismiss();
-    } else if (event.name === "escape") {
-      dismiss();
-    }
-  }, dialogId);
-
   return (
-    <DialogFrame
+    <MultiSelectDialogContent
+      dismiss={dismiss}
+      dialogId={dialogId}
       title={field.label}
-      footer={field.type === "ordered-multi-select"
-        ? "space toggle · [ ] reorder · enter done"
-        : "space toggle · enter done"}
-    >
-      <box flexDirection="column" gap={1}>
-        <ToggleList
-          items={toggleItems}
-          selectedIdx={selectedIndex}
-          bgColor={colors.commandBg}
-          height={listHeight}
-          scrollable
-          showSelectedDescription={false}
-          onSelect={(index) => setSelectedOptionId(orderedOptions[index]?.value ?? selectedOptionId)}
-          onToggle={(id) => {
-            setSelectedOptionId(id);
-            void toggleOption(optionByValue.get(id)).catch(() => {});
-          }}
-        />
-        <box flexDirection="row" gap={1}>
-          <Button label="Toggle" variant="secondary" onPress={() => { void toggleOption(orderedOptions[selectedIndex]).catch(() => {}); }} />
-          {field.type === "ordered-multi-select" && (
-            <>
-              <Button label="Move Up" variant="ghost" disabled={!canMoveUp} onPress={() => { void moveOption("up").catch(() => {}); }} />
-              <Button label="Move Down" variant="ghost" disabled={!canMoveDown} onPress={() => { void moveOption("down").catch(() => {}); }} />
-            </>
-          )}
-          <Button label="Done" variant="primary" onPress={dismiss} />
-        </box>
-      </box>
-    </DialogFrame>
+      options={field.options}
+      selectedValues={coerceSelectedValues(currentValue)}
+      onChange={onApply}
+      ordered={field.type === "ordered-multi-select"}
+    />
   );
 }
 
@@ -415,7 +276,7 @@ export function PaneSettingsDialogContent({
 
   if (!descriptor) {
     return (
-      <DialogFrame title="Pane Settings" footer="Press esc to close">
+      <DialogFrame title="Pane Settings" footer="Press esc to cancel">
         <text fg={colors.textDim}>This pane is no longer configurable.</text>
       </DialogFrame>
     );
@@ -424,7 +285,7 @@ export function PaneSettingsDialogContent({
   const title = descriptor.settingsDef.title ?? `${descriptor.paneDef.name} Settings`;
 
   return (
-    <DialogFrame title={title} footer="Use ↑↓ to choose · enter to edit · esc to close">
+    <DialogFrame title={title} footer="Use ↑↓ to choose · enter to edit · esc cancel">
       <ListView
         items={fields.map((field) => ({
           id: field.key,

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

@@ -126,6 +126,7 @@ export function PaneTemplateTextareaStep({
             placeholderColor={colors.textDim}
             backgroundColor={colors.panel}
             flexGrow={1}
+            wrapText
           />
         </box>
         <box height={1} />

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

@@ -4,6 +4,7 @@ import type { InputRenderable } from "@opentui/core";
 import { useDialogKeyboard, type PromptContext } from "@opentui-ui/dialog/react";
 import type { Quote } from "../types/financials";
 import { colors } from "../theme/colors";
+import { formatMarketPrice } from "../utils/market-format";
 import { DialogFrame, ListView, NumberField } from "./ui";
 import { padTo } from "../utils/format";
 
@@ -17,6 +18,7 @@ export interface PriceSelectorDialogProps {
   label: string;
   currentValue?: number;
   quote?: Quote;
+  assetCategory?: string;
 }
 
 function buildPresets(quote: Quote | undefined): PricePreset[] {
@@ -46,20 +48,22 @@ function buildPresets(quote: Quote | undefined): PricePreset[] {
   return presets;
 }
 
-function formatMarketContext(quote: Quote | undefined): string {
+function formatMarketContext(quote: Quote | undefined, assetCategory?: string): string {
   if (!quote) return "No quote data available";
   const parts: string[] = [];
-  parts.push(`Last ${quote.price.toFixed(2)}`);
+  parts.push(`Last ${formatMarketPrice(quote.price, { assetCategory })}`);
   if (quote.bid != null) {
-    const bidStr = quote.bidSize != null ? `Bid ${quote.bid.toFixed(2)} × ${quote.bidSize}` : `Bid ${quote.bid.toFixed(2)}`;
+    const bidValue = formatMarketPrice(quote.bid, { assetCategory });
+    const bidStr = quote.bidSize != null ? `Bid ${bidValue} × ${quote.bidSize}` : `Bid ${bidValue}`;
     parts.push(bidStr);
   }
   if (quote.ask != null) {
-    const askStr = quote.askSize != null ? `Ask ${quote.ask.toFixed(2)} × ${quote.askSize}` : `Ask ${quote.ask.toFixed(2)}`;
+    const askValue = formatMarketPrice(quote.ask, { assetCategory });
+    const askStr = quote.askSize != null ? `Ask ${askValue} × ${quote.askSize}` : `Ask ${askValue}`;
     parts.push(askStr);
   }
   if (quote.bid != null && quote.ask != null) {
-    parts.push(`Spd ${(quote.ask - quote.bid).toFixed(2)}`);
+    parts.push(`Spd ${formatMarketPrice(quote.ask - quote.bid, { assetCategory })}`);
   }
   return parts.join(" · ");
 }
@@ -72,6 +76,7 @@ export function PriceSelectorDialog({
   label,
   currentValue,
   quote,
+  assetCategory,
 }: PromptContext<string> & PriceSelectorDialogProps) {
   const presets = buildPresets(quote);
   const [index, setIndex] = useState(0);
@@ -135,7 +140,7 @@ export function PriceSelectorDialog({
       }
     >
       <box flexDirection="column">
-        <text fg={colors.textDim}>{formatMarketContext(quote)}</text>
+        <text fg={colors.textDim}>{formatMarketContext(quote, assetCategory)}</text>
         <box height={1} />
 
         {presets.length > 0 && (
@@ -163,7 +168,7 @@ export function PriceSelectorDialog({
                       {padTo(item.label, presetWidth)}
                     </text>
                     <text fg={state.selected ? colors.text : colors.textMuted}>
-                      {preset?.value.toFixed(2) ?? ""}
+                      {preset ? formatMarketPrice(preset.value, { assetCategory }) : ""}
                     </text>
                     {preset?.detail && (
                       <text fg={colors.textDim}>{`  ${preset.detail}`}</text>

package/src/components/ticker-badge-text.test.tsx

@@ -96,6 +96,56 @@ describe("TickerBadgeText", () => {
     expect(opened).toEqual(["TSLA"]);
   });
 
+  test("renders inline links alongside ticker badges", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Read https://example.com while watching $TSLA"
+        lineWidth={60}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 60, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("https://example.com");
+    expect(frame).toContain("TSLA -5%");
+  });
+
+  test("opens detected links without trailing punctuation when clicked", async () => {
+    const opened: string[] = [];
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Read https://example.com/story."
+        lineWidth={60}
+        catalog={{}}
+        textColor="#ffffff"
+        openTicker={() => {}}
+        openLink={(url) => opened.push(url)}
+      />,
+      { width: 60, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const row = lines.findIndex((line) => line.includes("https://example.com/story."));
+    const col = lines[row]?.indexOf("https://example.com/story") ?? -1;
+
+    expect(row).toBeGreaterThanOrEqual(0);
+    expect(col).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(col + 1, row);
+      await testSetup!.renderOnce();
+    });
+
+    expect(opened).toEqual(["https://example.com/story"]);
+  });
+
   test("shows the current price when the badge is hovered", async () => {
     testSetup = await testRender(
       <TickerBadgeText

package/src/components/ticker-badge-text.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { TickerBadge } from "./ticker-badge";
-import { tokenizeTickerText } from "../utils/ticker-tokenizer";
+import { ExternalLinkText, openUrl } from "./ui";
+import { tokenizeInlineContent } from "../utils/inline-content-tokenizer";
 import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
 
 export interface TickerBadgeTextProps {
@@ -9,6 +10,7 @@ export interface TickerBadgeTextProps {
   catalog: Record<string, InlineTickerCatalogEntry>;
   textColor: string;
   openTicker: (symbol: string) => void;
+  openLink?: (url: string) => void;
 }
 
 export function TickerBadgeText({
@@ -17,9 +19,10 @@ export function TickerBadgeText({
   catalog,
   textColor,
   openTicker,
+  openLink = openUrl,
 }: TickerBadgeTextProps) {
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
-  const tokens = tokenizeTickerText(text);
+  const tokens = tokenizeInlineContent(text);
 
   return (
     <box
@@ -33,6 +36,18 @@ export function TickerBadgeText({
           return <text key={`text:${index}`} fg={textColor}>{token.value}</text>;
         }
 
+        if (token.kind === "link") {
+          return (
+            <ExternalLinkText
+              key={`link:${index}`}
+              url={token.url}
+              label={token.value}
+              color={textColor}
+              onOpen={openLink}
+            />
+          );
+        }
+
         const entry = catalog[token.symbol];
         if (!entry || entry.status === "missing") {
           return <text key={`raw:${index}`} fg={textColor}>{token.value}</text>;

package/src/components/ticker-badge.tsx

@@ -1,6 +1,6 @@
 import { TextAttributes } from "@opentui/core";
 import { colors, priceColor } from "../theme/colors";
-import { formatCurrency } from "../utils/format";
+import { formatMarketPriceWithCurrency } from "../utils/market-format";
 import type { Quote } from "../types/financials";
 
 export interface TickerBadgeProps {
@@ -50,7 +50,7 @@ export function TickerBadge({
 }: TickerBadgeProps) {
   const tone = status === "ready" && quote ? priceColor(quote.changePercent) : colors.borderFocused;
   const label = hovered && quote
-    ? `${symbol} ${formatCurrency(quote.price, quote.currency)}`
+    ? `${symbol} ${formatMarketPriceWithCurrency(quote.price, quote.currency, { minimumFractionDigits: 2 })}`
     : status === "ready" && quote
     ? formatBadgeChange(quote.changePercent)
     : "…";