gloomberb 0.4.1 → 0.5.0

package/src/plugins/builtin/ticker-detail/overview-tab.tsx

@@ -2,7 +2,7 @@ import { TextAttributes } from "@opentui/core";
 import { useTerminalDimensions } from "@opentui/react";
 import { useFxRatesMap } from "../../../market-data/hooks";
 import { useAppSelector } from "../../../state/app-context";
-import { colors, priceColor } from "../../../theme/colors";
+import { colors, priceColor, blendHex } from "../../../theme/colors";
 import {
   convertCurrency,
   formatCompact,
@@ -12,6 +12,7 @@ import {
   formatPercent,
   formatPercentRaw,
 } from "../../../utils/format";
+import { formatMarketCostWithCurrency, formatMarketPriceWithCurrency, formatMarketQuantity, formatSignedMarketPrice } from "../../../utils/market-format";
 import {
   exchangeShortName,
   marketStateColor,
@@ -19,11 +20,140 @@ import {
   quoteSourceLabel,
 } from "../../../utils/market-status";
 import { selectEffectiveExchangeRates } from "../../../utils/exchange-rate-map";
-import { EmptyState, FieldRow } from "../../../components";
+import { EmptyState } from "../../../components";
 import { ResolvedStockChart } from "../../../components/chart/stock-chart";
 import type { TickerFinancials } from "../../../types/financials";
 import type { TickerRecord } from "../../../types/ticker";
 
+// ─── Visual range bar ────────────────────────────────────────────────────────
+
+function RangeBar({
+  current,
+  low,
+  high,
+  label,
+  barWidth,
+  currency,
+  assetCategory,
+}: {
+  current: number;
+  low: number;
+  high: number;
+  label: string;
+  barWidth: number;
+  currency: string;
+  assetCategory?: string;
+}) {
+  const range = high - low;
+  if (range <= 0) return null;
+  const position = Math.max(0, Math.min(1, (current - low) / range));
+  const filledWidth = Math.max(1, Math.round(position * barWidth));
+  const emptyWidth = Math.max(0, barWidth - filledWidth);
+  const pctLabel = `${Math.round(position * 100)}%`;
+  const fillColor = blendHex(colors.negative, colors.positive, position);
+  const trackChar = "─";
+  const fillChar = "━";
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" height={1}>
+        <box width={12}>
+          <text fg={colors.textDim}>{label}</text>
+        </box>
+        <text fg={colors.textDim}>
+          {formatMarketPriceWithCurrency(low, currency, { assetCategory })}
+        </text>
+        <box marginLeft={1} marginRight={1} flexDirection="row">
+          <text fg={fillColor}>{fillChar.repeat(filledWidth)}</text>
+          <text fg={colors.border}>{trackChar.repeat(emptyWidth)}</text>
+        </box>
+        <text fg={colors.textDim}>
+          {formatMarketPriceWithCurrency(high, currency, { assetCategory })}
+        </text>
+        <box marginLeft={1}>
+          <text fg={fillColor}>{pctLabel}</text>
+        </box>
+      </box>
+    </box>
+  );
+}
+
+// ─── Volume bar ──────────────────────────────────────────────────────────────
+
+function VolumeBar({ volume, avgVolume, barWidth }: { volume: number; avgVolume: number; barWidth: number }) {
+  if (!volume || !avgVolume) return null;
+  const ratio = volume / avgVolume;
+  const maxRatio = Math.max(ratio, 1);
+  const volWidth = Math.max(1, Math.round((Math.min(ratio, maxRatio) / maxRatio) * barWidth));
+  const avgWidth = Math.max(1, Math.round((1 / maxRatio) * barWidth));
+  const ratioColor = ratio >= 2 ? colors.textBright : ratio >= 1 ? colors.text : colors.textDim;
+
+  return (
+    <box flexDirection="row" height={1}>
+      <box width={12}>
+        <text fg={colors.textDim}>Volume</text>
+      </box>
+      <text fg={colors.textDim}>{formatCompact(volume)}</text>
+      <box marginLeft={1} marginRight={1} flexDirection="row">
+        <text fg={ratioColor}>{"━".repeat(volWidth)}</text>
+        <text fg={colors.border}>{"─".repeat(Math.max(0, barWidth - volWidth))}</text>
+      </box>
+      <text fg={colors.textDim}>avg {formatCompact(avgVolume)}</text>
+      <box marginLeft={1}>
+        <text fg={ratioColor}>{ratio.toFixed(1)}x</text>
+      </box>
+    </box>
+  );
+}
+
+// ─── Two-column stat grid ────────────────────────────────────────────────────
+
+interface StatField {
+  label: string;
+  value: string;
+  valueColor?: string;
+}
+
+function StatGrid({ fields, width }: { fields: StatField[]; width: number }) {
+  const colWidth = Math.floor(width / 2);
+  const rows: Array<[StatField | null, StatField | null]> = [];
+  for (let i = 0; i < fields.length; i += 2) {
+    rows.push([fields[i] ?? null, fields[i + 1] ?? null]);
+  }
+
+  return (
+    <box flexDirection="column">
+      {rows.map((row, i) => (
+        <box key={i} flexDirection="row" height={1}>
+          {row.map((field, j) => {
+            if (!field) return <box key={j} width={colWidth} />;
+            return (
+              <box key={j} width={colWidth} flexDirection="row">
+                <box width={14}>
+                  <text fg={colors.textDim}>{field.label}</text>
+                </box>
+                <text fg={field.valueColor ?? colors.text}>{field.value}</text>
+              </box>
+            );
+          })}
+        </box>
+      ))}
+    </box>
+  );
+}
+
+// ─── Section header ──────────────────────────────────────────────────────────
+
+function SectionHeader({ title }: { title: string }) {
+  return (
+    <box height={1}>
+      <text attributes={TextAttributes.BOLD} fg={colors.textBright}>{title}</text>
+    </box>
+  );
+}
+
+// ─── Main component ──────────────────────────────────────────────────────────
+
 export function OverviewTab({
   width,
   symbol,
@@ -70,12 +200,82 @@ export function OverviewTab({
     routingVenue && routingVenue !== listingVenue ? `Route: ${routingVenue}` : "",
   ].filter((part) => part.length > 0);
 
-  const chartWidth = Math.max((width || Math.floor(termWidth * 0.5)) - 4, 20);
+  const contentWidth = Math.max((width || Math.floor(termWidth * 0.5)) - 4, 20);
+  const chartWidth = contentWidth;
+  const barWidth = Math.max(10, contentWidth - 50);
   const hasHistory = (financials?.priceHistory?.length ?? 0) > 2;
 
+  // Build the two-column stat grid
+  const stats: StatField[] = [];
+
+  if (quote?.marketCap) {
+    stats.push({ label: "Market Cap", value: formatCompactCurrency(toBase(quote.marketCap, quoteCurrency), baseCurrency) });
+  }
+  if (fundamentals?.sharesOutstanding) {
+    stats.push({ label: "Shares Out", value: formatCompact(fundamentals.sharesOutstanding) });
+  }
+  if (fundamentals?.trailingPE) {
+    stats.push({ label: "P/E (TTM)", value: formatNumber(fundamentals.trailingPE, 1) });
+  }
+  if (fundamentals?.forwardPE) {
+    stats.push({ label: "Fwd P/E", value: formatNumber(fundamentals.forwardPE, 1) });
+  }
+  if (fundamentals?.eps) {
+    stats.push({ label: "EPS", value: formatCurrency(fundamentals.eps, quoteCurrency) });
+  }
+  if (fundamentals?.pegRatio) {
+    stats.push({ label: "PEG", value: formatNumber(fundamentals.pegRatio, 2) });
+  }
+  if (fundamentals?.dividendYield != null) {
+    stats.push({ label: "Div Yield", value: formatPercent(fundamentals.dividendYield) });
+  }
+  if (fundamentals?.revenue) {
+    stats.push({ label: "Revenue", value: formatCompact(fundamentals.revenue) });
+  }
+  if (fundamentals?.netIncome) {
+    stats.push({ label: "Net Income", value: formatCompact(fundamentals.netIncome) });
+  }
+  if (fundamentals?.freeCashFlow) {
+    stats.push({ label: "FCF", value: formatCompact(fundamentals.freeCashFlow) });
+  }
+  if (fundamentals?.operatingMargin != null) {
+    stats.push({ label: "Op Margin", value: formatPercent(fundamentals.operatingMargin) });
+  }
+  if (fundamentals?.profitMargin != null) {
+    stats.push({ label: "Profit Marg", value: formatPercent(fundamentals.profitMargin) });
+  }
+  if (fundamentals?.revenueGrowth != null) {
+    stats.push({
+      label: "Rev Growth",
+      value: formatPercent(fundamentals.revenueGrowth),
+      valueColor: priceColor(fundamentals.revenueGrowth),
+    });
+  }
+  if (fundamentals?.return1Y != null) {
+    stats.push({
+      label: "1Y Return",
+      value: formatPercent(fundamentals.return1Y),
+      valueColor: priceColor(fundamentals.return1Y),
+    });
+  }
+  if (fundamentals?.return3Y != null) {
+    stats.push({
+      label: "3Y Return",
+      value: formatPercent(fundamentals.return3Y),
+      valueColor: priceColor(fundamentals.return3Y),
+    });
+  }
+  if (fundamentals?.enterpriseValue) {
+    stats.push({ label: "EV", value: formatCompact(fundamentals.enterpriseValue) });
+  }
+
+  // Bid/ask
+  const hasBidAsk = quote?.bid != null || quote?.ask != null;
+
   return (
     <scrollbox flexGrow={1} scrollY>
       <box flexDirection="column" paddingX={1} paddingBottom={1} gap={1}>
+        {/* Ticker header */}
         <box flexDirection="row">
           <text attributes={TextAttributes.BOLD} fg={colors.textBright}>
             {ticker.metadata.ticker}
@@ -86,9 +286,7 @@ export function OverviewTab({
             </text>
           )}
           {listingVenue && (
-            <text fg={colors.textDim}>
-              {" "}({listingVenue})
-            </text>
+            <text fg={colors.textDim}>{" "}({listingVenue})</text>
           )}
           {quote?.marketState && (
             <text fg={marketStateColor(quote.marketState)}>
@@ -97,26 +295,25 @@ export function OverviewTab({
           )}
         </box>
 
+        {/* Price block */}
         {quote && (
           <box flexDirection="column" gap={0}>
             <box flexDirection="row" gap={2}>
               <text attributes={TextAttributes.BOLD} fg={priceColor(quote.change)}>
-                {formatCurrency(quote.price, quote.currency)}
+                {formatMarketPriceWithCurrency(quote.price, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
               </text>
               <text fg={priceColor(quote.change)}>
-                {quote.change >= 0 ? "+" : ""}
-                {quote.change.toFixed(2)} ({formatPercentRaw(quote.changePercent)})
+                {formatSignedMarketPrice(quote.change, { assetCategory: ticker.metadata.assetCategory })} ({formatPercentRaw(quote.changePercent)})
               </text>
             </box>
             {(quote.marketState === "PRE" || quote.marketState === "PREPRE") && quote.preMarketPrice != null && (
               <box flexDirection="row" gap={2}>
                 <text fg={colors.textDim}>Pre-Market:</text>
                 <text fg={priceColor(quote.preMarketChange ?? 0)}>
-                  {formatCurrency(quote.preMarketPrice, quote.currency)}
+                  {formatMarketPriceWithCurrency(quote.preMarketPrice, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
                 </text>
                 <text fg={priceColor(quote.preMarketChange ?? 0)}>
-                  {(quote.preMarketChange ?? 0) >= 0 ? "+" : ""}
-                  {(quote.preMarketChange ?? 0).toFixed(2)} ({formatPercentRaw(quote.preMarketChangePercent ?? 0)})
+                  {formatSignedMarketPrice(quote.preMarketChange ?? 0, { assetCategory: ticker.metadata.assetCategory })} ({formatPercentRaw(quote.preMarketChangePercent ?? 0)})
                 </text>
               </box>
             )}
@@ -124,11 +321,10 @@ export function OverviewTab({
               <box flexDirection="row" gap={2}>
                 <text fg={colors.textDim}>After-Hours:</text>
                 <text fg={priceColor(quote.postMarketChange ?? 0)}>
-                  {formatCurrency(quote.postMarketPrice, quote.currency)}
+                  {formatMarketPriceWithCurrency(quote.postMarketPrice, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
                 </text>
                 <text fg={priceColor(quote.postMarketChange ?? 0)}>
-                  {(quote.postMarketChange ?? 0) >= 0 ? "+" : ""}
-                  {(quote.postMarketChange ?? 0).toFixed(2)} ({formatPercentRaw(quote.postMarketChangePercent ?? 0)})
+                  {formatSignedMarketPrice(quote.postMarketChange ?? 0, { assetCategory: ticker.metadata.assetCategory })} ({formatPercentRaw(quote.postMarketChangePercent ?? 0)})
                 </text>
               </box>
             )}
@@ -138,10 +334,42 @@ export function OverviewTab({
           </box>
         )}
 
+        {/* Range bars */}
+        {quote?.low != null && quote?.high != null && quote.high > quote.low && (
+          <RangeBar
+            current={quote.price}
+            low={quote.low}
+            high={quote.high}
+            label="Day Range"
+            barWidth={barWidth}
+            currency={quoteCurrency}
+            assetCategory={ticker.metadata.assetCategory}
+          />
+        )}
+        {quote?.low52w != null && quote?.high52w != null && quote.high52w > quote.low52w && (
+          <RangeBar
+            current={quote.price}
+            low={quote.low52w}
+            high={quote.high52w}
+            label="52W Range"
+            barWidth={barWidth}
+            currency={quoteCurrency}
+            assetCategory={ticker.metadata.assetCategory}
+          />
+        )}
+        {quote?.volume != null && fundamentals?.sharesOutstanding && (
+          <VolumeBar
+            volume={quote.volume}
+            avgVolume={Math.round((fundamentals.sharesOutstanding * 0.01) || quote.volume)}
+            barWidth={barWidth}
+          />
+        )}
+
+        {/* Chart */}
         {hasHistory && (
           <ResolvedStockChart
             width={chartWidth}
-            height={8}
+            height={10}
             focused={false}
             compact
             symbol={symbol}
@@ -150,78 +378,46 @@ export function OverviewTab({
           />
         )}
 
-        <box flexDirection="column">
-          <FieldRow
-            label="Market Cap"
-            value={quote?.marketCap ? formatCompactCurrency(toBase(quote.marketCap, quoteCurrency), baseCurrency) : "—"}
-          />
-          <FieldRow label="P/E (TTM)" value={fundamentals?.trailingPE ? formatNumber(fundamentals.trailingPE, 1) : "—"} />
-          <FieldRow label="Forward P/E" value={fundamentals?.forwardPE ? formatNumber(fundamentals.forwardPE, 1) : "—"} />
-          <FieldRow label="PEG Ratio" value={fundamentals?.pegRatio ? formatNumber(fundamentals.pegRatio, 2) : "—"} />
-          <FieldRow label="EPS" value={fundamentals?.eps ? formatCurrency(fundamentals.eps, quoteCurrency) : "—"} />
-          <FieldRow label="Div Yield" value={fundamentals?.dividendYield != null ? formatPercent(fundamentals.dividendYield) : "—"} />
-          <FieldRow label="Revenue" value={fundamentals?.revenue ? formatCompact(fundamentals.revenue) : "—"} />
-          <FieldRow label="Net Income" value={fundamentals?.netIncome ? formatCompact(fundamentals.netIncome) : "—"} />
-          <FieldRow label="FCF" value={fundamentals?.freeCashFlow ? formatCompact(fundamentals.freeCashFlow) : "—"} />
-          <FieldRow label="Op. Margin" value={fundamentals?.operatingMargin != null ? formatPercent(fundamentals.operatingMargin) : "—"} />
-          <FieldRow label="Profit Margin" value={fundamentals?.profitMargin != null ? formatPercent(fundamentals.profitMargin) : "—"} />
-          {(quote?.bid != null || quote?.ask != null) && (
-            <>
-              <FieldRow label="Bid" value={quote?.bid != null ? formatCurrency(quote.bid, quote.currency) : "—"} />
-              <FieldRow label="Ask" value={quote?.ask != null ? formatCurrency(quote.ask, quote.currency) : "—"} />
-              <FieldRow
-                label="Spread"
-                value={quote?.bid != null && quote?.ask != null ? formatCurrency(quote.ask - quote.bid, quote.currency) : "—"}
-              />
-            </>
-          )}
-          <FieldRow
-            label="52W Range"
-            value={quote?.low52w && quote?.high52w ? `${formatCurrency(quote.low52w, quoteCurrency)} - ${formatCurrency(quote.high52w, quoteCurrency)}` : "—"}
-          />
-          <FieldRow
-            label="1Y Return"
-            value={fundamentals?.return1Y != null ? formatPercent(fundamentals.return1Y) : "—"}
-            valueColor={fundamentals?.return1Y != null ? priceColor(fundamentals.return1Y) : undefined}
-          />
-          <FieldRow
-            label="3Y Return"
-            value={fundamentals?.return3Y != null ? formatPercent(fundamentals.return3Y) : "—"}
-            valueColor={fundamentals?.return3Y != null ? priceColor(fundamentals.return3Y) : undefined}
-          />
-        </box>
-
-        {description && (
-          <box flexDirection="column" paddingTop={1}>
-            <box height={1}>
-              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Description</text>
+        {/* Bid/Ask */}
+        {hasBidAsk && quote && (
+          <box flexDirection="row" height={1} gap={3}>
+            <box flexDirection="row">
+              <text fg={colors.textDim}>Bid: </text>
+              <text fg={colors.text}>
+                {quote.bid != null ? formatMarketPriceWithCurrency(quote.bid, quote.currency, { assetCategory: ticker.metadata.assetCategory }) : "—"}
+                {quote.bidSize != null ? ` ×${quote.bidSize}` : ""}
+              </text>
             </box>
-            <text fg={colors.text}>{description}</text>
+            <box flexDirection="row">
+              <text fg={colors.textDim}>Ask: </text>
+              <text fg={colors.text}>
+                {quote.ask != null ? formatMarketPriceWithCurrency(quote.ask, quote.currency, { assetCategory: ticker.metadata.assetCategory }) : "—"}
+                {quote.askSize != null ? ` ×${quote.askSize}` : ""}
+              </text>
+            </box>
+            {quote.bid != null && quote.ask != null && (
+              <box flexDirection="row">
+                <text fg={colors.textDim}>Spread: </text>
+                <text fg={colors.text}>
+                  {formatMarketPriceWithCurrency(quote.ask - quote.bid, quote.currency, { assetCategory: ticker.metadata.assetCategory })}
+                </text>
+              </box>
+            )}
           </box>
         )}
 
-        {(sector || industry || ticker.metadata.assetCategory || ticker.metadata.isin) && (
+        {/* Two-column stats grid */}
+        {stats.length > 0 && (
           <box flexDirection="column">
-            {ticker.metadata.assetCategory && (
-              <FieldRow label="Type" value={ticker.metadata.assetCategory} />
-            )}
-            {sector && (
-              <FieldRow label="Sector" value={sector} />
-            )}
-            {industry && (
-              <FieldRow label="Industry" value={industry} />
-            )}
-            {ticker.metadata.isin && (
-              <FieldRow label="ISIN" value={ticker.metadata.isin} />
-            )}
+            <SectionHeader title="Fundamentals" />
+            <StatGrid fields={stats} width={contentWidth} />
           </box>
         )}
 
+        {/* Positions */}
         {ticker.metadata.positions.length > 0 && (
           <box flexDirection="column">
-            <box height={1}>
-              <text attributes={TextAttributes.BOLD} fg={colors.textBright}>Positions</text>
-            </box>
+            <SectionHeader title="Positions" />
             {ticker.metadata.positions.map((position, index) => {
               const costBasis = position.shares * position.avgCost * (position.multiplier || 1);
               const positionCurrency = position.currency || quoteCurrency;
@@ -251,7 +447,7 @@ export function OverviewTab({
                   </box>
                   <box flexDirection="row" height={1}>
                     <text fg={colors.text}>
-                      {position.shares} {position.multiplier && position.multiplier > 1 ? "contracts" : "shares"} @ {formatCurrency(position.avgCost, positionCurrency)}
+                      {formatMarketQuantity(position.shares, { assetCategory: ticker.metadata.assetCategory, multiplier: position.multiplier })} {position.multiplier && position.multiplier > 1 ? "contracts" : "shares"} @ {formatMarketCostWithCurrency(position.avgCost, positionCurrency, { assetCategory: ticker.metadata.assetCategory, multiplier: position.multiplier })}
                       {" = "}{formatCurrency(costBasisBase, baseCurrency)}
                     </text>
                     {pnlText && (
@@ -260,7 +456,7 @@ export function OverviewTab({
                   </box>
                   {position.markPrice != null && (
                     <box flexDirection="row" height={1}>
-                      <text fg={colors.textDim}>Mark: {formatCurrency(position.markPrice, positionCurrency)}</text>
+                      <text fg={colors.textDim}>Mark: {formatMarketPriceWithCurrency(position.markPrice, positionCurrency, { assetCategory: ticker.metadata.assetCategory, multiplier: position.multiplier })}</text>
                       {marketValueBase != null && (
                         <text fg={colors.textDim}>{" "}Mkt Value: {formatCurrency(marketValueBase, baseCurrency)}</text>
                       )}
@@ -271,6 +467,46 @@ export function OverviewTab({
             })}
           </box>
         )}
+
+        {/* Sector / Industry / Type */}
+        {(sector || industry || ticker.metadata.assetCategory) && (
+          <box flexDirection="row" height={1} gap={3}>
+            {ticker.metadata.assetCategory && (
+              <box flexDirection="row">
+                <text fg={colors.textDim}>Type: </text>
+                <text fg={colors.text}>{ticker.metadata.assetCategory}</text>
+              </box>
+            )}
+            {sector && (
+              <box flexDirection="row">
+                <text fg={colors.textDim}>Sector: </text>
+                <text fg={colors.text}>{sector}</text>
+              </box>
+            )}
+            {industry && (
+              <box flexDirection="row">
+                <text fg={colors.textDim}>Industry: </text>
+                <text fg={colors.text}>{industry}</text>
+              </box>
+            )}
+          </box>
+        )}
+
+        {/* ISIN */}
+        {ticker.metadata.isin && (
+          <box flexDirection="row" height={1}>
+            <text fg={colors.textDim}>ISIN: </text>
+            <text fg={colors.text}>{ticker.metadata.isin}</text>
+          </box>
+        )}
+
+        {/* Description — last, collapsed */}
+        {description && (
+          <box flexDirection="column">
+            <SectionHeader title="Description" />
+            <text fg={colors.text}>{description}</text>
+          </box>
+        )}
       </box>
     </scrollbox>
   );

package/src/plugins/builtin/ticker-detail/quote-monitor.tsx

@@ -5,7 +5,8 @@ import { quoteSubscriptionTargetFromTicker } from "../../../market-data/request-
 import { usePaneTicker } from "../../../state/app-context";
 import { useQuoteStreaming } from "../../../state/use-quote-streaming";
 import { colors, priceColor } from "../../../theme/colors";
-import { formatCurrency, formatPercentRaw } from "../../../utils/format";
+import { formatPercentRaw } from "../../../utils/format";
+import { formatMarketPriceWithCurrency, formatSignedMarketPrice } from "../../../utils/market-format";
 import { getActiveQuoteDisplay } from "../../../utils/market-status";
 import { EmptyState } from "../../../components";
 
@@ -65,14 +66,11 @@ export function QuoteMonitorPane({ focused, width }: PaneProps) {
 
             <box flexDirection="column" alignItems={compact ? "flex-start" : "flex-end"}>
               <text attributes={TextAttributes.BOLD} fg={changeColor}>
-                {formatCurrency(display.price, currency)}
+                {formatMarketPriceWithCurrency(display.price, currency, { assetCategory: ticker.metadata.assetCategory })}
               </text>
               <box flexDirection="row" gap={1}>
                 <text fg={changeColor}>{formatPercentRaw(display.changePercent)}</text>
-                <text fg={changeColor}>
-                  {display.change > 0 ? "+" : ""}
-                  {display.change.toFixed(2)}
-                </text>
+                <text fg={changeColor}>{formatSignedMarketPrice(display.change, { assetCategory: ticker.metadata.assetCategory })}</text>
               </box>
             </box>
           </box>

package/src/plugins/builtin/ticker-detail-chart-tab-switch.test.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { createTestRenderer } from "@opentui/core/testing";
 import { createRoot } from "@opentui/react";
+import { DialogProvider } from "@opentui-ui/dialog/react";
 import { act, useReducer, type ReactElement } from "react";
 import {
   AppContext,
@@ -97,17 +98,19 @@ function DetailHarness({
   harnessDispatch = dispatch;
 
   return (
-    <AppContext value={{ state, dispatch }}>
-      <PaneInstanceProvider paneId={TEST_PANE_ID}>
-        <DetailPane
-          paneId={TEST_PANE_ID}
-          paneType="ticker-detail"
-          focused
-          width={90}
-          height={28}
-        />
-      </PaneInstanceProvider>
-    </AppContext>
+    <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+      <AppContext value={{ state, dispatch }}>
+        <PaneInstanceProvider paneId={TEST_PANE_ID}>
+          <DetailPane
+            paneId={TEST_PANE_ID}
+            paneType="ticker-detail"
+            focused
+            width={90}
+            height={28}
+          />
+        </PaneInstanceProvider>
+      </AppContext>
+    </DialogProvider>
   );
 }
 
@@ -174,7 +177,9 @@ describe("Ticker detail chart tab switching", () => {
     });
 
     await flushFrames();
-    expect(testSetup.captureCharFrame()).toContain("AAPL");
+    const chartTabFrame = testSetup.captureCharFrame();
+    expect(chartTabFrame).toContain("AAPL");
+    expect(chartTabFrame).toContain("[i]ndicators");
     expect(manager.surfaces.has("chart-surface:ticker-detail:test:full:base")).toBe(true);
 
     act(() => {

package/src/plugins/builtin/ticker-detail.test.tsx

@@ -586,12 +586,12 @@ describe("TickerDetailPane", () => {
     await flushFrame();
 
     const frame = testSetup.captureCharFrame();
-    expect(frame).toContain("€125.00");
+    expect(frame).toContain("€125");
     expect(frame).toContain("2.2B USD");
-    expect(frame).toContain("@ €100.00");
+    expect(frame).toContain("@ €100");
     expect(frame).toContain("= $1,100.00");
     expect(frame).toContain("P&L: +$275.00");
-    expect(frame).toContain("Mark: €125.00");
+    expect(frame).toContain("Mark: €125");
     expect(frame).toContain("Mkt Value: $1,375.00");
   });