gloomberb 0.4.1 → 0.5.0

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)
     : "…";

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

@@ -3,9 +3,11 @@ import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
 import { EmptyState } from "./ui";
 import { colors, hoverBg } from "../theme/colors";
 import type { ColumnConfig } from "../types/config";
-import type { TickerFinancials } from "../types/financials";
+import type { TickerFinancials, PricePoint } from "../types/financials";
 import type { TickerRecord } from "../types/ticker";
 import { padTo } from "../utils/format";
+import { renderChart, resolveChartPalette, type StyledContent } from "./chart/chart-renderer";
+import type { ProjectedChartPoint } from "./chart/chart-data";
 
 export interface TickerTableCell {
   text: string;
@@ -64,6 +66,7 @@ interface TickerListTableProps {
   onRowActivate?: (ticker: TickerRecord) => void;
   emptyTitle?: string;
   emptyHint?: string;
+  showSparklines?: boolean;
 }
 
 const TickerListHeader = memo(function TickerListHeader({
@@ -118,6 +121,38 @@ const TickerListHeader = memo(function TickerListHeader({
   );
 });
 
+function renderSparkline(priceHistory: PricePoint[]): StyledContent | null {
+  if (priceHistory.length < 5) return null;
+
+  const last20 = priceHistory.slice(-20);
+  const points: ProjectedChartPoint[] = last20.map((pt) => ({
+    date: pt.date,
+    open: pt.open ?? pt.close,
+    high: pt.high ?? pt.close,
+    low: pt.low ?? pt.close,
+    close: pt.close,
+    volume: pt.volume ?? 0,
+  }));
+
+  const first = last20[0]?.close ?? 0;
+  const last = last20[last20.length - 1]?.close ?? 0;
+  const trend = last >= first ? "positive" : "negative";
+  const palette = resolveChartPalette(colors, trend);
+
+  const result = renderChart(points, {
+    width: 10,
+    height: 1,
+    showVolume: false,
+    volumeHeight: 0,
+    cursorX: null,
+    cursorY: null,
+    mode: "line",
+    colors: palette,
+  });
+
+  return result.lines[0] ?? null;
+}
+
 const TickerListRow = memo(function TickerListRow({
   columns,
   ticker,
@@ -130,6 +165,8 @@ const TickerListRow = memo(function TickerListRow({
   setCursorSymbol,
   resolveCell,
   onRowActivate,
+  showSparklines,
+  priceHistory,
 }: {
   columns: ColumnConfig[];
   ticker: TickerRecord;
@@ -142,10 +179,16 @@ const TickerListRow = memo(function TickerListRow({
   setCursorSymbol: (symbol: string) => void;
   resolveCell: ResolveTickerTableCell;
   onRowActivate?: (ticker: TickerRecord) => void;
+  showSparklines?: boolean;
+  priceHistory?: PricePoint[];
 }) {
   const lastActivatedAtRef = useRef<number | null>(null);
   const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
 
+  const sparkline = showSparklines && priceHistory && priceHistory.length >= 5
+    ? renderSparkline(priceHistory)
+    : null;
+
   return (
     <box
       flexDirection="row"
@@ -182,6 +225,11 @@ const TickerListRow = memo(function TickerListRow({
           </box>
         );
       })}
+      {sparkline && (
+        <box width={12}>
+          <text content={sparkline} />
+        </box>
+      )}
     </box>
   );
 }, (previous, next) => (
@@ -196,6 +244,8 @@ const TickerListRow = memo(function TickerListRow({
   && previous.setCursorSymbol === next.setCursorSymbol
   && previous.resolveCell === next.resolveCell
   && previous.onRowActivate === next.onRowActivate
+  && previous.showSparklines === next.showSparklines
+  && previous.priceHistory === next.priceHistory
 ));
 
 export function TickerListTable({
@@ -218,6 +268,7 @@ export function TickerListTable({
   onRowActivate,
   emptyTitle = "No tickers.",
   emptyHint = "Press Ctrl+P to add one.",
+  showSparklines,
 }: TickerListTableProps) {
   const safeFlashSymbols = flashSymbols ?? new Map<string, QuoteFlashDirection>();
 
@@ -262,6 +313,8 @@ export function TickerListTable({
                 setCursorSymbol={setCursorSymbol}
                 resolveCell={resolveCell}
                 onRowActivate={onRowActivate}
+                showSparklines={showSparklines}
+                priceHistory={financialsMap.get(ticker.metadata.ticker)?.priceHistory}
               />
             );
           })

package/src/components/toggle-list.tsx

@@ -20,6 +20,7 @@ export interface ToggleListProps {
   flexGrow?: number;
   scrollable?: boolean;
   showSelectedDescription?: boolean;
+  rowIdPrefix?: string;
 }
 
 export function ToggleList({
@@ -32,6 +33,7 @@ export function ToggleList({
   flexGrow,
   scrollable,
   showSelectedDescription = true,
+  rowIdPrefix,
 }: ToggleListProps) {
   const listItems: ListViewItem[] = items.map((item) => ({
     id: item.id,
@@ -52,17 +54,28 @@ export function ToggleList({
       onActivate={(item) => {
         onToggle?.(item.id);
       }}
-      renderRow={(item, state) => {
+      renderRow={(item, state, index) => {
         const toggleItem = items.find((entry) => entry.id === item.id);
         const checked = toggleItem?.enabled ? "\u2713" : " ";
+        const activate = (event: any) => {
+          event.stopPropagation?.();
+          if (state.disabled) return;
+          onSelect?.(index);
+          onToggle?.(item.id);
+        };
         return (
-          <box flexDirection="row">
+          <box
+            id={rowIdPrefix ? `${rowIdPrefix}:${item.id}` : undefined}
+            flexDirection="row"
+            onMouseDown={activate}
+          >
             <text fg={state.selected ? colors.selectedText : colors.textDim}>
               {state.selected ? "\u25b8 " : "  "}
             </text>
             <text
               fg={state.selected ? colors.text : colors.textDim}
               attributes={state.selected ? TextAttributes.BOLD : 0}
+              onMouseDown={activate}
             >
               {`[${checked}] ${item.label}`}
             </text>