gloomberb 0.2.0 → 0.3.1

package/src/plugins/ibkr/index.test.tsx

@@ -0,0 +1,183 @@
+import { describe, expect, test } from "bun:test";
+import { createDefaultConfig, type AppConfig, type BrokerInstanceConfig } from "../../types/config";
+import type { CommandDef, GloomPluginContext, TickerAction } from "../../types/plugin";
+import type { TickerRecord } from "../../types/ticker";
+import { ibkrPlugin } from "./index";
+
+function createTicker(symbol: string): TickerRecord {
+  return {
+    metadata: {
+      ticker: symbol,
+      exchange: "NASDAQ",
+      currency: "USD",
+      name: symbol,
+      portfolios: [],
+      watchlists: [],
+      positions: [],
+      custom: {},
+      tags: [],
+    },
+  };
+}
+
+function createGatewayInstance(): BrokerInstanceConfig {
+  return {
+    id: "ibkr-paper",
+    brokerType: "ibkr",
+    label: "Paper",
+    connectionMode: "gateway",
+    config: { connectionMode: "gateway", gateway: { host: "127.0.0.1", port: 4002, clientId: 1 } },
+    enabled: true,
+  };
+}
+
+function createFlexInstance(): BrokerInstanceConfig {
+  return {
+    id: "ibkr-flex",
+    brokerType: "ibkr",
+    label: "Flex",
+    connectionMode: "flex",
+    config: { connectionMode: "flex", flex: { token: "token", queryId: "query" } },
+    enabled: true,
+  };
+}
+
+function createConfig(brokerInstances: BrokerInstanceConfig[] = []): AppConfig {
+  return {
+    ...createDefaultConfig("/tmp/gloomberb-test"),
+    brokerInstances,
+  };
+}
+
+function setupIbkrPlugin(config: AppConfig) {
+  const commands: CommandDef[] = [];
+  const tickerActions: TickerAction[] = [];
+  const toasts: string[] = [];
+  const switchedPanels: string[] = [];
+  const switchedTabs: string[] = [];
+  const tickers = new Map<string, TickerRecord>([["AAPL", createTicker("AAPL")]]);
+
+  const ctx = {
+    registerPane: () => {},
+    registerPaneTemplate: () => {},
+    registerCommand: (command: CommandDef) => { commands.push(command); },
+    registerColumn: () => {},
+    registerBroker: () => {},
+    registerDataProvider: () => {},
+    registerDetailTab: () => {},
+    registerShortcut: () => {},
+    registerTickerAction: (action: TickerAction) => { tickerActions.push(action); },
+    getData: () => null,
+    getTicker: (symbol: string) => tickers.get(symbol) ?? null,
+    getConfig: () => config,
+    persistence: {} as any,
+    storage: {} as any,
+    dataProvider: {} as any,
+    tickerRepository: {} as any,
+    log: {
+      info: () => {},
+      warn: () => {},
+      error: () => {},
+      debug: () => {},
+    },
+    resume: {
+      getState: () => null,
+      setState: () => {},
+      deleteState: () => {},
+      getPaneState: () => null,
+      setPaneState: () => {},
+      deletePaneState: () => {},
+    },
+    configState: {
+      get: () => null,
+      set: async () => {},
+      delete: async () => {},
+      keys: () => [],
+    },
+    createBrokerInstance: async () => { throw new Error("unused"); },
+    updateBrokerInstance: async () => {},
+    syncBrokerInstance: async () => {},
+    removeBrokerInstance: async () => {},
+    selectTicker: () => {},
+    switchPanel: (panel: "left" | "right") => { switchedPanels.push(panel); },
+    switchTab: (tabId: string) => { switchedTabs.push(tabId); },
+    openCommandBar: () => {},
+    showPane: () => {},
+    createPaneFromTemplate: () => {},
+    hidePane: () => {},
+    focusPane: () => {},
+    pinTicker: () => {},
+    on: () => () => {},
+    emit: () => {},
+    showWidget: () => {},
+    hideWidget: () => {},
+    showToast: (message: string) => { toasts.push(message); },
+  } satisfies GloomPluginContext;
+
+  void ibkrPlugin.setup?.(ctx);
+
+  return { commands, tickerActions, toasts, switchedPanels, switchedTabs, ticker: tickers.get("AAPL")! };
+}
+
+describe("IBKR trade entry points", () => {
+  test("registers an IBKR shortcut for the trading pane template", () => {
+    const template = ibkrPlugin.paneTemplates?.find((entry) => entry.id === "new-ibkr-trading-pane");
+
+    expect(template).toBeDefined();
+    expect(template?.shortcut?.prefix).toBe("IBKR");
+    expect(template?.canCreate?.({ config: createConfig() } as any)).toBe(false);
+    expect(template?.canCreate?.({ config: createConfig([createGatewayInstance()]) } as any)).toBe(true);
+  });
+
+  test("hides the Trade action when no IBKR gateway profile is configured", () => {
+    const { tickerActions, ticker } = setupIbkrPlugin(createConfig());
+    const tradeAction = tickerActions.find((action) => action.id === "ibkr-trade");
+
+    expect(tradeAction).toBeDefined();
+    expect(tradeAction?.filter?.(ticker)).toBe(false);
+  });
+
+  test("hides the Trade action and trading commands for flex-only setups", () => {
+    const { commands, tickerActions, ticker } = setupIbkrPlugin(createConfig([createFlexInstance()]));
+    const tradeAction = tickerActions.find((action) => action.id === "ibkr-trade");
+    const openTrading = commands.find((command) => command.id === "ibkr-open-trading");
+    const buySelected = commands.find((command) => command.id === "ibkr-buy-selected");
+    const sellSelected = commands.find((command) => command.id === "ibkr-sell-selected");
+
+    expect(tradeAction?.filter?.(ticker)).toBe(false);
+    expect(openTrading?.hidden?.()).toBe(true);
+    expect(buySelected?.hidden?.()).toBe(true);
+    expect(sellSelected?.hidden?.()).toBe(true);
+  });
+
+  test("allows the Trade action when a gateway profile exists", () => {
+    const { tickerActions, ticker } = setupIbkrPlugin(createConfig([createGatewayInstance()]));
+    const tradeAction = tickerActions.find((action) => action.id === "ibkr-trade");
+
+    expect(tradeAction?.filter?.(ticker)).toBe(true);
+  });
+
+  test("shows a clear message and does not navigate when Open Trading is executed without a gateway profile", async () => {
+    const { commands, switchedPanels, switchedTabs, toasts } = setupIbkrPlugin(createConfig());
+    const openTrading = commands.find((command) => command.id === "ibkr-open-trading");
+
+    expect(openTrading).toBeDefined();
+    await openTrading!.execute();
+
+    expect(toasts).toEqual(["Connect a Gateway / TWS IBKR profile first."]);
+    expect(switchedPanels).toHaveLength(0);
+    expect(switchedTabs).toHaveLength(0);
+  });
+
+  test("shows a clear message and does not navigate when the Trade action executes without a gateway profile", async () => {
+    const { tickerActions, ticker, switchedPanels, switchedTabs, toasts } = setupIbkrPlugin(createConfig());
+    const tradeAction = tickerActions.find((action) => action.id === "ibkr-trade");
+
+    expect(tradeAction).toBeDefined();
+    await tradeAction!.execute(ticker, null);
+
+    expect(toasts).toEqual(["Connect a Gateway / TWS IBKR profile first."]);
+    expect(switchedPanels).toHaveLength(0);
+    expect(switchedTabs).toHaveLength(0);
+  });
+});

package/src/plugins/ibkr/index.tsx

@@ -0,0 +1,153 @@
+import type { GloomPlugin, GloomPluginContext } from "../../types/plugin";
+import { ibkrBroker } from "./broker-adapter";
+import { buildPersistedIbkrGatewayConfig } from "./config";
+import { setResolvedIbkrGatewayListener } from "./gateway-service";
+import {
+  getTradeTicketState,
+  getTradingPaneState,
+  prefillTradeFromTicker,
+  removeBrokerInstanceFromTradingState,
+} from "./trading-state";
+import { getConfiguredIbkrGatewayInstances } from "./instance-selection";
+import { hasIbkrTradingProfiles } from "./trade-utils";
+import { TradeTab } from "./trade-tab";
+import { TradingPane } from "./trading-pane";
+
+export { hasIbkrTradingProfiles } from "./trade-utils";
+export { TradeTab } from "./trade-tab";
+
+let lastSelectedTickerSymbol: string | null = null;
+
+function ensureIbkrTradingProfile(ctx: GloomPluginContext): boolean {
+  if (hasIbkrTradingProfiles(ctx.getConfig())) return true;
+  ctx.showToast("Connect a Gateway / TWS IBKR profile first.", { type: "info" });
+  return false;
+}
+
+function openTradeForSymbol(
+  ctx: GloomPluginContext,
+  symbol: string,
+  action?: "BUY" | "SELL",
+) {
+  const ticker = ctx.getTicker(symbol);
+  if (!ticker) return;
+
+  if (action) {
+    prefillTradeFromTicker(ticker, action);
+  } else {
+    const current = getTradeTicketState(ticker.metadata.ticker, ticker);
+    prefillTradeFromTicker(ticker, current.draft.action || "BUY");
+  }
+
+  ctx.switchPanel("right");
+  ctx.switchTab("ibkr-trade");
+}
+
+export const ibkrPlugin: GloomPlugin = {
+  id: "ibkr",
+  name: "Interactive Brokers",
+  version: "1.0.0",
+  broker: ibkrBroker,
+  paneTemplates: [
+    {
+      id: "new-ibkr-trading-pane",
+      paneId: "ibkr-trading",
+      label: "New IBKR Trading Pane",
+      description: "Open another floating IBKR trading console",
+      keywords: ["new", "ibkr", "trading", "status", "orders", "pane"],
+      shortcut: { prefix: "IBKR" },
+      canCreate: (context) => getConfiguredIbkrGatewayInstances(context.config).length > 0,
+      createInstance: () => ({ placement: "floating" }),
+    },
+  ],
+
+  setup(ctx) {
+    ctx.log.info("IBKR plugin initializing");
+    setResolvedIbkrGatewayListener(async (instanceId, resolved) => {
+      if (!instanceId) return;
+      const instance = ctx.getConfig().brokerInstances.find((entry) => entry.id === instanceId);
+      if (!instance || instance.brokerType !== "ibkr") return;
+      const nextConfig = buildPersistedIbkrGatewayConfig(instance.config, resolved);
+      if (!nextConfig) return;
+      await ctx.updateBrokerInstance(instanceId, nextConfig);
+    });
+
+    ctx.registerPane({
+      id: "ibkr-trading",
+      name: "IBKR Console",
+      defaultPosition: "right",
+      defaultMode: "floating",
+      defaultFloatingSize: { width: 84, height: 20 },
+      component: TradingPane,
+    });
+
+    ctx.registerDetailTab({
+      id: "ibkr-trade",
+      name: "Trade",
+      order: 25,
+      component: TradeTab,
+    });
+
+    ctx.registerTickerAction({
+      id: "ibkr-trade",
+      label: "Trade",
+      keywords: ["trade", "buy", "sell", "ibkr"],
+      filter: () => hasIbkrTradingProfiles(ctx.getConfig()),
+      execute: async (ticker) => {
+        if (!ensureIbkrTradingProfile(ctx)) return;
+        openTradeForSymbol(ctx, ticker.metadata.ticker);
+      },
+    });
+
+    ctx.on("ticker:selected", ({ symbol }) => {
+      lastSelectedTickerSymbol = symbol;
+    });
+
+    ctx.on("config:changed", ({ config }) => {
+      const selectedInstanceId = getTradingPaneState().brokerInstanceId;
+      if (selectedInstanceId && !config.brokerInstances.some((instance) => instance.id === selectedInstanceId)) {
+        removeBrokerInstanceFromTradingState(selectedInstanceId);
+      }
+    });
+
+    ctx.registerCommand({
+      id: "ibkr-open-trading",
+      label: "Open Trading",
+      description: "Open the IBKR trade tab for the selected ticker",
+      keywords: ["ibkr", "trading", "orders", "trade", "ticker"],
+      category: "navigation",
+      hidden: () => !hasIbkrTradingProfiles(ctx.getConfig()),
+      execute: async () => {
+        if (!ensureIbkrTradingProfile(ctx)) return;
+        if (!lastSelectedTickerSymbol) return;
+        openTradeForSymbol(ctx, lastSelectedTickerSymbol);
+      },
+    });
+
+    ctx.registerCommand({
+      id: "ibkr-buy-selected",
+      label: "Buy Selected",
+      description: "Prefill the trading pane with a BUY ticket for the selected ticker",
+      keywords: ["buy", "trade", "order", "selected", "ibkr"],
+      category: "portfolio",
+      hidden: () => !hasIbkrTradingProfiles(ctx.getConfig()) || !lastSelectedTickerSymbol,
+      execute: async () => {
+        if (!ensureIbkrTradingProfile(ctx) || !lastSelectedTickerSymbol) return;
+        openTradeForSymbol(ctx, lastSelectedTickerSymbol, "BUY");
+      },
+    });
+
+    ctx.registerCommand({
+      id: "ibkr-sell-selected",
+      label: "Sell Selected",
+      description: "Prefill the trading pane with a SELL ticket for the selected ticker",
+      keywords: ["sell", "trade", "order", "selected", "ibkr"],
+      category: "portfolio",
+      hidden: () => !hasIbkrTradingProfiles(ctx.getConfig()) || !lastSelectedTickerSymbol,
+      execute: async () => {
+        if (!ensureIbkrTradingProfile(ctx) || !lastSelectedTickerSymbol) return;
+        openTradeForSymbol(ctx, lastSelectedTickerSymbol, "SELL");
+      },
+    });
+  },
+};

package/src/plugins/ibkr/instance-selection.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, test } from "bun:test";
+import { cloneLayout, CURRENT_CONFIG_VERSION, DEFAULT_LAYOUT, type AppConfig, type BrokerInstanceConfig } from "../../types/config";
+import { resolveIbkrTradingInstanceId, getLockedIbkrTradingInstanceId } from "./instance-selection";
+
+function createIbkrInstance(
+  id: string,
+  label: string,
+  connectionMode: "flex" | "gateway",
+  config: Record<string, unknown>,
+): BrokerInstanceConfig {
+  return {
+    id,
+    brokerType: "ibkr",
+    label,
+    connectionMode,
+    config: { connectionMode, ...config },
+    enabled: true,
+  };
+}
+
+function createConfig(overrides: Partial<AppConfig> = {}): AppConfig {
+  return {
+    dataDir: "",
+    configVersion: CURRENT_CONFIG_VERSION,
+    baseCurrency: "USD",
+    refreshIntervalMinutes: 30,
+    portfolios: [],
+    watchlists: [],
+    columns: [],
+    layout: cloneLayout(DEFAULT_LAYOUT),
+    layouts: [{ name: "Default", layout: cloneLayout(DEFAULT_LAYOUT) }],
+    activeLayoutIndex: 0,
+    brokerInstances: [],
+    plugins: [],
+    disabledPlugins: [],
+    theme: "amber",
+    chartPreferences: {
+      defaultRenderMode: "area",
+      renderer: "auto",
+    },
+    recentTickers: [],
+    ...overrides,
+  };
+}
+
+describe("IBKR trading instance selection", () => {
+  test("returns no trading instance when only flex profiles exist", () => {
+    const config = createConfig({
+      brokerInstances: [
+        createIbkrInstance("ibkr-default", "IBKR", "flex", {
+          flex: { token: "token", queryId: "query" },
+        }),
+      ],
+    });
+
+    expect(resolveIbkrTradingInstanceId(config, "", "ibkr-default")).toBeUndefined();
+  });
+
+  test("prefers a gateway profile over a flex profile when both exist", () => {
+    const config = createConfig({
+      brokerInstances: [
+        createIbkrInstance("ibkr-default", "IBKR", "flex", {
+          flex: { token: "token", queryId: "query" },
+        }),
+        createIbkrInstance("ibkr-paper", "Paper", "gateway", {
+          gateway: { host: "127.0.0.1", port: 4002, clientId: 1 },
+        }),
+      ],
+    });
+
+    expect(resolveIbkrTradingInstanceId(config, "", "ibkr-default")).toBe("ibkr-paper");
+  });
+
+  test("does not lock trading to a flex-backed portfolio", () => {
+    const config = createConfig({
+      portfolios: [{
+        id: "broker:ibkr-default:DU12345",
+        name: "DU12345",
+        currency: "USD",
+        brokerId: "ibkr",
+        brokerInstanceId: "ibkr-default",
+        brokerAccountId: "DU12345",
+      }],
+      brokerInstances: [
+        createIbkrInstance("ibkr-default", "IBKR", "flex", {
+          flex: { token: "token", queryId: "query" },
+        }),
+        createIbkrInstance("ibkr-paper", "Paper", "gateway", {
+          gateway: { host: "127.0.0.1", port: 4002, clientId: 1 },
+        }),
+      ],
+    });
+
+    expect(getLockedIbkrTradingInstanceId(config, "broker:ibkr-default:DU12345")).toBeUndefined();
+    expect(resolveIbkrTradingInstanceId(config, "broker:ibkr-default:DU12345")).toBe("ibkr-paper");
+  });
+
+  test("keeps trading locked to the active gateway-backed portfolio", () => {
+    const config = createConfig({
+      portfolios: [{
+        id: "broker:ibkr-paper:DU12345",
+        name: "DU12345",
+        currency: "USD",
+        brokerId: "ibkr",
+        brokerInstanceId: "ibkr-paper",
+        brokerAccountId: "DU12345",
+      }],
+      brokerInstances: [
+        createIbkrInstance("ibkr-paper", "Paper", "gateway", {
+          gateway: { host: "127.0.0.1", port: 4002, clientId: 1 },
+        }),
+        createIbkrInstance("ibkr-live", "Live", "gateway", {
+          gateway: { host: "127.0.0.1", port: 4001, clientId: 2 },
+        }),
+      ],
+    });
+
+    expect(getLockedIbkrTradingInstanceId(config, "broker:ibkr-paper:DU12345")).toBe("ibkr-paper");
+    expect(resolveIbkrTradingInstanceId(config, "broker:ibkr-paper:DU12345", "ibkr-live")).toBe("ibkr-paper");
+  });
+});

package/src/plugins/ibkr/instance-selection.ts

@@ -0,0 +1,36 @@
+import type { AppConfig, BrokerInstanceConfig } from "../../types/config";
+import { getBrokerInstance, getBrokerInstancesByType } from "../../utils/broker-instances";
+import { isGatewayConfigured, normalizeIbkrConfig } from "./config";
+
+export function isIbkrGatewayInstance(instance?: BrokerInstanceConfig): instance is BrokerInstanceConfig {
+  if (!instance || instance.brokerType !== "ibkr" || instance.enabled === false) return false;
+  const normalized = normalizeIbkrConfig(instance.config);
+  return normalized.connectionMode === "gateway" && isGatewayConfigured(instance.config);
+}
+
+export function getConfiguredIbkrGatewayInstances(config: AppConfig): BrokerInstanceConfig[] {
+  return getBrokerInstancesByType(config.brokerInstances, "ibkr").filter(isIbkrGatewayInstance);
+}
+
+export function getLockedIbkrTradingInstanceId(config: AppConfig, collectionId: string | null): string | undefined {
+  const activePortfolio = config.portfolios.find((portfolio) => portfolio.id === collectionId);
+  if (activePortfolio?.brokerId !== "ibkr" || !activePortfolio.brokerInstanceId) return undefined;
+  const instance = getBrokerInstance(config.brokerInstances, activePortfolio.brokerInstanceId);
+  return isIbkrGatewayInstance(instance) ? instance.id : undefined;
+}
+
+export function resolveIbkrTradingInstanceId(
+  config: AppConfig,
+  collectionId: string | null,
+  preferredInstanceId?: string,
+): string | undefined {
+  const lockedInstanceId = getLockedIbkrTradingInstanceId(config, collectionId);
+  if (lockedInstanceId) return lockedInstanceId;
+
+  const preferredInstance = getBrokerInstance(config.brokerInstances, preferredInstanceId);
+  if (isIbkrGatewayInstance(preferredInstance)) return preferredInstance.id;
+
+  const gatewayInstance = getConfiguredIbkrGatewayInstances(config)[0];
+  if (gatewayInstance) return gatewayInstance.id;
+  return undefined;
+}

package/src/plugins/ibkr/price-normalization.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, test } from "bun:test";
+import { getIbkrPriceDivisor, normalizeIbkrPriceValue } from "./price-normalization";
+
+describe("IBKR sub-unit price normalization", () => {
+  test("detects pence-priced LSE equities", () => {
+    expect(getIbkrPriceDivisor({
+      currency: "GBP",
+      exchange: "SMART",
+      primaryExch: "LSE",
+      secType: "STK",
+    })).toBe(100);
+
+    expect(getIbkrPriceDivisor({
+      currency: "USD",
+      exchange: "NASDAQ",
+      primaryExch: "NASDAQ",
+      secType: "STK",
+    })).toBe(1);
+  });
+
+  test("prefers contract price magnifier when available", () => {
+    expect(getIbkrPriceDivisor({
+      currency: "GBP",
+      exchange: "SMART",
+      primaryExch: "LSE",
+      secType: "STK",
+    }, {
+      priceMagnifier: 1000,
+      validExchanges: "SMART,LSE",
+    })).toBe(1000);
+  });
+
+  test("normalizes individual price values", () => {
+    expect(normalizeIbkrPriceValue(24.5, 100)).toBe(0.245);
+    expect(normalizeIbkrPriceValue(24.5, 1)).toBe(24.5);
+    expect(normalizeIbkrPriceValue(undefined, 100)).toBeUndefined();
+  });
+});

package/src/plugins/ibkr/price-normalization.ts

@@ -0,0 +1,59 @@
+interface IbkrPriceContractLike {
+  currency?: string;
+  exchange?: string;
+  primaryExch?: string;
+  secType?: string;
+}
+
+interface IbkrPriceDetailsLike {
+  priceMagnifier?: number;
+  validExchanges?: string;
+}
+
+const IBKR_SUB_UNIT_PRICE_RULES = [
+  { exchanges: new Set(["LSE"]), currency: "GBP", divisor: 100 },
+  { exchanges: new Set(["TASE"]), currency: "ILS", divisor: 100 },
+  { exchanges: new Set(["JSE"]), currency: "ZAR", divisor: 100 },
+] as const;
+
+function normalizeIbkrExchange(value?: string): string {
+  return (value ?? "").trim().toUpperCase();
+}
+
+function isSubUnitEligibleSecType(secType?: string): boolean {
+  const normalized = normalizeIbkrExchange(secType);
+  return normalized === "STK" || normalized === "ETF";
+}
+
+export function getIbkrPriceDivisor(
+  contract: IbkrPriceContractLike,
+  details?: IbkrPriceDetailsLike,
+): number {
+  if (!isSubUnitEligibleSecType(contract.secType)) return 1;
+
+  const magnifier = details?.priceMagnifier;
+  if (typeof magnifier === "number" && Number.isFinite(magnifier) && magnifier > 1) {
+    return magnifier;
+  }
+
+  const currency = normalizeIbkrExchange(contract.currency);
+  const exchanges = new Set([
+    normalizeIbkrExchange(contract.primaryExch),
+    normalizeIbkrExchange(contract.exchange),
+    ...(details?.validExchanges?.split(",").map((exchange) => normalizeIbkrExchange(exchange)) ?? []),
+  ]);
+
+  for (const rule of IBKR_SUB_UNIT_PRICE_RULES) {
+    if (currency !== rule.currency) continue;
+    if ([...exchanges].some((exchange) => rule.exchanges.has(exchange))) {
+      return rule.divisor;
+    }
+  }
+
+  return 1;
+}
+
+export function normalizeIbkrPriceValue(value: number | undefined, divisor: number): number | undefined {
+  if (value == null || !Number.isFinite(value) || divisor === 1) return value;
+  return value / divisor;
+}

package/src/plugins/ibkr/trade-badge.tsx

@@ -0,0 +1,27 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../theme/colors";
+import { getTradeTonePalette, type TradeTone } from "./trade-utils";
+
+interface TradeBadgeProps {
+  label: string;
+  value: string;
+  tone?: TradeTone;
+  onPress?: () => void;
+}
+
+export function TradeBadge({ label, value, tone = "neutral", onPress }: TradeBadgeProps) {
+  const palette = getTradeTonePalette(tone);
+
+  return (
+    <box
+      backgroundColor={palette.background}
+      paddingX={1}
+      marginRight={1}
+      marginBottom={1}
+      onMouseDown={onPress}
+    >
+      <text fg={colors.textDim}>{label}</text>
+      <text fg={palette.text} attributes={TextAttributes.BOLD}>{` ${value}`}</text>
+    </box>
+  );
+}