gloomberb 0.5.1 → 0.6.0

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

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act } from "react";
-import { testRender } from "@opentui/react/test-utils";
+import { testRender } from "../renderers/opentui/test-utils";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import { PaneTemplateTextareaStep } from "./pane-template-wizard";
 

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

@@ -1,6 +1,7 @@
+import { Box, Text, Textarea } from "../ui";
 import { useEffect, useRef, useState } from "react";
-import type { InputRenderable, TextareaRenderable } from "@opentui/core";
-import { useDialogKeyboard, type AlertContext, type PromptContext } from "@opentui-ui/dialog/react";
+import { type InputRenderable, type TextareaRenderable } from "../ui";
+import { type AlertContext, type PromptContext, useDialogKeyboard } from "../ui/dialog";
 import type { WizardStep } from "../types/plugin";
 import { colors } from "../theme/colors";
 import { DialogFrame, ListView, TextField } from "./ui";
@@ -19,13 +20,13 @@ export function PaneTemplateInfoStep({
 
   return (
     <DialogFrame title={step.label} footer="Press Enter to continue">
-      <box flexDirection="column">
+      <Box flexDirection="column">
         {step.body?.map((line, index) => (
-          <box key={`${step.key}:${index}`} height={1}>
-            <text fg={colors.textDim}>{line || " "}</text>
-          </box>
+          <Box key={`${step.key}:${index}`} height={1}>
+            <Text fg={colors.textDim}>{line || " "}</Text>
+          </Box>
         ))}
-      </box>
+      </Box>
     </DialogFrame>
   );
 }
@@ -46,13 +47,13 @@ export function PaneTemplateInputStep({
       title={step.label}
       footer={step.defaultValue ? `Press Enter to use ${step.defaultValue}` : "Enter to continue"}
     >
-      <box flexDirection="column">
+      <Box flexDirection="column">
         {step.body?.map((line, index) => (
-          <box key={`${step.key}:${index}`} height={1}>
-            <text fg={colors.textDim}>{line || " "}</text>
-          </box>
+          <Box key={`${step.key}:${index}`} height={1}>
+            <Text fg={colors.textDim}>{line || " "}</Text>
+          </Box>
         ))}
-        <box height={1} />
+        <Box height={1} />
         <TextField
           inputRef={inputRef}
           value={value}
@@ -65,7 +66,7 @@ export function PaneTemplateInputStep({
             if (submitted) resolve(submitted);
           }}
         />
-      </box>
+      </Box>
     </DialogFrame>
   );
 }
@@ -103,21 +104,21 @@ export function PaneTemplateTextareaStep({
       title={step.label}
       footer="Ctrl+S save · Esc cancel"
     >
-      <box flexDirection="column" flexGrow={1}>
+      <Box flexDirection="column" flexGrow={1}>
         {step.body?.map((line, index) => (
-          <box key={`${step.key}:${index}`} height={1}>
-            <text fg={colors.textDim}>{line || " "}</text>
-          </box>
+          <Box key={`${step.key}:${index}`} height={1}>
+            <Text fg={colors.textDim}>{line || " "}</Text>
+          </Box>
         ))}
-        <box height={1} />
-        <box
+        <Box height={1} />
+        <Box
           flexGrow={1}
           minHeight={8}
           border
           borderColor={colors.border}
           backgroundColor={colors.panel}
         >
-          <textarea
+          <Textarea
             ref={textareaRef}
             initialValue={step.defaultValue ?? ""}
             placeholder={step.placeholder || ""}
@@ -128,23 +129,23 @@ export function PaneTemplateTextareaStep({
             flexGrow={1}
             wrapText
           />
-        </box>
-        <box height={1} />
-        <box flexDirection="row" gap={1}>
-          <box
+        </Box>
+        <Box height={1} />
+        <Box flexDirection="row" gap={1}>
+          <Box
             backgroundColor={colors.selected}
             onMouseDown={commit}
           >
-            <text fg={colors.selectedText}>{` Save `}</text>
-          </box>
-          <box
+            <Text fg={colors.selectedText}>{` Save `}</Text>
+          </Box>
+          <Box
             backgroundColor={colors.panel}
             onMouseDown={() => resolve("")}
           >
-            <text fg={colors.text}>{` Cancel `}</text>
-          </box>
-        </box>
-      </box>
+            <Text fg={colors.text}>{` Cancel `}</Text>
+          </Box>
+        </Box>
+      </Box>
     </DialogFrame>
   );
 }
@@ -177,13 +178,13 @@ export function PaneTemplateSelectStep({
 
   return (
     <DialogFrame title={step.label} footer="Use ↑↓ to choose · enter to select · esc to cancel">
-      <box flexDirection="column">
+      <Box flexDirection="column">
         {step.body?.map((line, index) => (
-          <box key={`${step.key}:${index}`} height={1}>
-            <text fg={colors.textDim}>{line || " "}</text>
-          </box>
+          <Box key={`${step.key}:${index}`} height={1}>
+            <Text fg={colors.textDim}>{line || " "}</Text>
+          </Box>
         ))}
-        <box height={1} />
+        <Box height={1} />
         <ListView
           items={options.map((option) => ({
             id: option.value,
@@ -194,7 +195,7 @@ export function PaneTemplateSelectStep({
           onSelect={setSelectedIndex}
           onActivate={(item) => resolve(item.id)}
         />
-      </box>
+      </Box>
     </DialogFrame>
   );
 }

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

@@ -1,7 +1,8 @@
+import { Box, Text } from "../ui";
 import { useState, useRef, useEffect } from "react";
-import { TextAttributes } from "@opentui/core";
-import type { InputRenderable } from "@opentui/core";
-import { useDialogKeyboard, type PromptContext } from "@opentui-ui/dialog/react";
+import { TextAttributes } from "../ui";
+import { type InputRenderable } from "../ui";
+import { type PromptContext, useDialogKeyboard } from "../ui/dialog";
 import type { Quote } from "../types/financials";
 import { colors } from "../theme/colors";
 import { formatMarketPrice } from "../utils/market-format";
@@ -139,9 +140,9 @@ export function PriceSelectorDialog({
           : "Type a price · Enter confirm · ↑ or Tab back to presets · Esc cancel"
       }
     >
-      <box flexDirection="column">
-        <text fg={colors.textDim}>{formatMarketContext(quote, assetCategory)}</text>
-        <box height={1} />
+      <Box flexDirection="column">
+        <Text fg={colors.textDim}>{formatMarketContext(quote, assetCategory)}</Text>
+        <Box height={1} />
 
         {presets.length > 0 && (
           <>
@@ -160,31 +161,31 @@ export function PriceSelectorDialog({
               renderRow={(item, state) => {
                 const preset = presets.find((entry) => entry.label === item.id);
                 return (
-                  <box flexDirection="row">
-                    <text fg={state.selected ? colors.selectedText : colors.textDim}>
+                  <Box flexDirection="row">
+                    <Text fg={state.selected ? colors.selectedText : colors.textDim}>
                       {state.selected ? "▸ " : "  "}
-                    </text>
-                    <text fg={state.selected ? colors.text : colors.textDim} attributes={state.selected ? TextAttributes.BOLD : 0}>
+                    </Text>
+                    <Text fg={state.selected ? colors.text : colors.textDim} attributes={state.selected ? TextAttributes.BOLD : 0}>
                       {padTo(item.label, presetWidth)}
-                    </text>
-                    <text fg={state.selected ? colors.text : colors.textMuted}>
+                    </Text>
+                    <Text fg={state.selected ? colors.text : colors.textMuted}>
                       {preset ? formatMarketPrice(preset.value, { assetCategory }) : ""}
-                    </text>
+                    </Text>
                     {preset?.detail && (
-                      <text fg={colors.textDim}>{`  ${preset.detail}`}</text>
+                      <Text fg={colors.textDim}>{`  ${preset.detail}`}</Text>
                     )}
-                  </box>
+                  </Box>
                 );
               }}
             />
-            <box height={1} />
+            <Box height={1} />
           </>
         )}
 
-        <box flexDirection="row" onMouseDown={() => { setMode("input"); setIndex(CUSTOM_INDEX); }}>
-          <text fg={mode === "input" ? colors.text : colors.textDim}>
+        <Box flexDirection="row" onMouseDown={() => { setMode("input"); setIndex(CUSTOM_INDEX); }}>
+          <Text fg={mode === "input" ? colors.text : colors.textDim}>
             {mode === "input" ? "▸ " : "  "}Custom:{" "}
-          </text>
+          </Text>
           <NumberField
             inputRef={inputRef}
             focused={mode === "input"}
@@ -193,8 +194,8 @@ export function PriceSelectorDialog({
             onChange={setCustomValue}
             onSubmit={(submittedValue) => resolve(submittedValue.trim())}
           />
-        </box>
-      </box>
+        </Box>
+      </Box>
     </DialogFrame>
   );
 }

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

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { Box, Text, TextAttributes } from "../ui";
+import { colors } from "../theme/colors";
+import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
+import { TickerBadge } from "./ticker-badge";
+
+export interface TickerBadgeListProps {
+  symbols: readonly string[];
+  width: number;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  fallbackColor?: string;
+  openTicker: (symbol: string) => void;
+}
+
+export function TickerBadgeList({
+  symbols,
+  width,
+  catalog,
+  fallbackColor = colors.textBright,
+  openTicker,
+}: TickerBadgeListProps) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+
+  return (
+    <Box flexDirection="row" width={width} height={1} overflow="hidden">
+      {symbols.map((symbol) => {
+        const entry = catalog[symbol];
+        if (entry?.status === "missing") {
+          return (
+            <Box key={symbol} paddingRight={1} flexShrink={0}>
+              <Text fg={fallbackColor} attributes={TextAttributes.BOLD}>{symbol}</Text>
+            </Box>
+          );
+        }
+
+        return (
+          <TickerBadge
+            key={symbol}
+            symbol={symbol}
+            status="ready"
+            quote={entry?.quote ?? null}
+            hovered={hoveredSymbol === symbol}
+            onHoverStart={() => setHoveredSymbol(symbol)}
+            onHoverEnd={() => {
+              setHoveredSymbol((current) => (current === symbol ? null : current));
+            }}
+            onOpen={openTicker}
+          />
+        );
+      })}
+    </Box>
+  );
+}

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

@@ -1,6 +1,6 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act } from "react";
-import { testRender } from "@opentui/react/test-utils";
+import { testRender } from "../renderers/opentui/test-utils";
 import { TickerBadgeText } from "./ticker-badge-text";
 import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
 
@@ -115,6 +115,49 @@ describe("TickerBadgeText", () => {
     expect(frame).toContain("TSLA -5%");
   });
 
+  test("wraps long text chunks at word boundaries", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Demand/supply unit economics move with ASML orders"
+        lineWidth={18}
+        catalog={{}}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 20, height: 5 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Demand/supply");
+    expect(frame).toContain("economics");
+    expect(frame.split("\n").filter((line) => line.trim()).length).toBeGreaterThan(1);
+  });
+
+  test("renders hard line breaks as separate rows", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text={"First $TSLA line\nSecond line"}
+        lineWidth={60}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 60, height: 5 },
+    );
+
+    await testSetup.renderOnce();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const firstRow = lines.findIndex((line) => line.includes("First"));
+    const secondRow = lines.findIndex((line) => line.includes("Second line"));
+
+    expect(firstRow).toBeGreaterThanOrEqual(0);
+    expect(secondRow).toBeGreaterThan(firstRow);
+    expect(lines[firstRow]).toContain("TSLA -5%");
+  });
+
   test("opens detected links without trailing punctuation when clicked", async () => {
     const opened: string[] = [];
     testSetup = await testRender(

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

@@ -1,8 +1,10 @@
+import { Box, Text } from "../ui";
 import { useState } from "react";
 import { TickerBadge } from "./ticker-badge";
 import { ExternalLinkText, openUrl } from "./ui";
 import { tokenizeInlineContent } from "../utils/inline-content-tokenizer";
 import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
+import { displayWidth } from "../utils/format";
 
 export interface TickerBadgeTextProps {
   text: string;
@@ -13,6 +15,30 @@ export interface TickerBadgeTextProps {
   openLink?: (url: string) => void;
 }
 
+function splitLongTextSegment(value: string, lineWidth: number): string[] {
+  if (displayWidth(value) <= lineWidth) return [value];
+
+  const chunks: string[] = [];
+  let current = "";
+  for (const char of Array.from(value)) {
+    const next = `${current}${char}`;
+    if (current && displayWidth(next) > lineWidth) {
+      chunks.push(current);
+      current = char;
+      continue;
+    }
+    current = next;
+  }
+  if (current) chunks.push(current);
+  return chunks;
+}
+
+function splitTextForWrap(value: string, lineWidth: number): string[] {
+  const width = Math.max(1, lineWidth);
+  const segments = value.match(/\S+\s*|\s+/g) ?? [value];
+  return segments.flatMap((segment) => splitLongTextSegment(segment, width));
+}
+
 export function TickerBadgeText({
   text,
   lineWidth,
@@ -22,52 +48,66 @@ export function TickerBadgeText({
   openLink = openUrl,
 }: TickerBadgeTextProps) {
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
-  const tokens = tokenizeInlineContent(text);
+  const lines = text.split("\n");
 
   return (
-    <box
-      flexDirection="row"
-      flexWrap="wrap"
+    <Box
+      flexDirection="column"
       width={lineWidth}
     >
-      {tokens.map((token, index) => {
-        if (token.kind === "text") {
-          if (!token.value) return null;
-          return <text key={`text:${index}`} fg={textColor}>{token.value}</text>;
-        }
+      {lines.map((line, lineIndex) => {
+        if (!line) return <Box key={`line:${lineIndex}`} height={1} />;
+
+        return (
+          <Box
+            key={`line:${lineIndex}`}
+            flexDirection="row"
+            flexWrap="wrap"
+            width={lineWidth}
+          >
+            {tokenizeInlineContent(line).map((token, index) => {
+              if (token.kind === "text") {
+                if (!token.value) return null;
+                return splitTextForWrap(token.value, lineWidth).map((part, partIndex) => (
+                  <Text key={`text:${lineIndex}:${index}:${partIndex}`} fg={textColor}>{part}</Text>
+                ));
+              }
 
-        if (token.kind === "link") {
-          return (
-            <ExternalLinkText
-              key={`link:${index}`}
-              url={token.url}
-              label={token.value}
-              color={textColor}
-              onOpen={openLink}
-            />
-          );
-        }
+              if (token.kind === "link") {
+                return (
+                  <ExternalLinkText
+                    key={`link:${lineIndex}:${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>;
-        }
+              const entry = catalog[token.symbol];
+              if (!entry || entry.status === "missing") {
+                return <Text key={`raw:${lineIndex}:${index}`} fg={textColor}>{token.value}</Text>;
+              }
 
-        return (
-          <TickerBadge
-            key={`badge:${index}:${token.symbol}`}
-            symbol={token.symbol}
-            status={entry.status}
-            quote={entry.quote}
-            hovered={hoveredSymbol === token.symbol}
-            onHoverStart={() => setHoveredSymbol(token.symbol)}
-            onHoverEnd={() => {
-              setHoveredSymbol((current) => (current === token.symbol ? null : current));
-            }}
-            onOpen={openTicker}
-          />
+              return (
+                <TickerBadge
+                  key={`badge:${lineIndex}:${index}:${token.symbol}`}
+                  symbol={token.symbol}
+                  status={entry.status}
+                  quote={entry.quote}
+                  hovered={hoveredSymbol === token.symbol}
+                  onHoverStart={() => setHoveredSymbol(token.symbol)}
+                  onHoverEnd={() => {
+                    setHoveredSymbol((current) => (current === token.symbol ? null : current));
+                  }}
+                  onOpen={openTicker}
+                />
+              );
+            })}
+          </Box>
         );
       })}
-    </box>
+    </Box>
   );
 }

package/src/components/ticker-badge.tsx

@@ -1,5 +1,7 @@
-import { TextAttributes } from "@opentui/core";
+import { Box, Text, useTickerContextMenu, useUiCapabilities } from "../ui";
+import { TextAttributes } from "../ui";
 import { colors, priceColor } from "../theme/colors";
+import { getSharedRegistry } from "../plugins/registry";
 import { formatMarketPriceWithCurrency } from "../utils/market-format";
 import type { Quote } from "../types/financials";
 
@@ -48,6 +50,15 @@ export function TickerBadge({
   onHoverEnd,
   onOpen,
 }: TickerBadgeProps) {
+  const registry = getSharedRegistry();
+  const { nativeContextMenu } = useUiCapabilities();
+  const ticker = typeof registry?.getTickerFn === "function" ? registry.getTickerFn(symbol) : null;
+  const financials = typeof registry?.getDataFn === "function" ? registry.getDataFn(symbol) : null;
+  const openTickerContextMenu = useTickerContextMenu({
+    ticker,
+    financials,
+    onOpen,
+  });
   const tone = status === "ready" && quote ? priceColor(quote.changePercent) : colors.borderFocused;
   const label = hovered && quote
     ? `${symbol} ${formatMarketPriceWithCurrency(quote.price, quote.currency, { minimumFractionDigits: 2 })}`
@@ -62,10 +73,11 @@ export function TickerBadge({
   const interactive = status === "ready";
 
   return (
-    <box paddingRight={1}>
-      <box
+    <Box paddingRight={1} flexShrink={0}>
+      <Box
         paddingX={1}
         backgroundColor={backgroundColor}
+        data-gloom-context-menu-surface="true"
         onMouseOver={() => {
           onHoverStart?.();
         }}
@@ -73,16 +85,25 @@ export function TickerBadge({
           onHoverEnd?.();
         }}
         onMouseDown={(event: any) => {
+          if (event.button === 2) {
+            if (nativeContextMenu !== true) {
+              void openTickerContextMenu(event);
+            }
+            return;
+          }
           event.stopPropagation?.();
           event.preventDefault?.();
           if (!interactive) return;
           onOpen(symbol);
         }}
+        onContextMenu={(event: any) => {
+          void openTickerContextMenu(event);
+        }}
       >
-        <text fg={color} attributes={TextAttributes.BOLD}>
+        <Text fg={color} attributes={TextAttributes.BOLD}>
           {text}
-        </text>
-      </box>
-    </box>
+        </Text>
+      </Box>
+    </Box>
   );
 }