gloomberb 0.2.0 → 0.3.1

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

@@ -0,0 +1,199 @@
+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 { WizardStep } from "../types/plugin";
+import { colors } from "../theme/colors";
+import { DialogFrame, ListView, TextField } from "./ui";
+
+export function PaneTemplateInfoStep({
+  dismiss,
+  dialogId,
+  step,
+}: AlertContext & { step: WizardStep }) {
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "return" || event.name === "enter" || event.name === "escape") {
+      dismiss();
+    }
+  }, dialogId);
+
+  return (
+    <DialogFrame title={step.label} footer="Press Enter to continue">
+      <box flexDirection="column">
+        {step.body?.map((line, index) => (
+          <box key={`${step.key}:${index}`} height={1}>
+            <text fg={colors.textDim}>{line || " "}</text>
+          </box>
+        ))}
+      </box>
+    </DialogFrame>
+  );
+}
+
+export function PaneTemplateInputStep({
+  resolve,
+  step,
+}: PromptContext<string> & { step: WizardStep }) {
+  const inputRef = useRef<InputRenderable>(null);
+  const [value, setValue] = useState(step.defaultValue ?? "");
+
+  useEffect(() => {
+    inputRef.current?.focus?.();
+  }, []);
+
+  return (
+    <DialogFrame
+      title={step.label}
+      footer={step.defaultValue ? `Press Enter to use ${step.defaultValue}` : "Enter to continue"}
+    >
+      <box flexDirection="column">
+        {step.body?.map((line, index) => (
+          <box key={`${step.key}:${index}`} height={1}>
+            <text fg={colors.textDim}>{line || " "}</text>
+          </box>
+        ))}
+        <box height={1} />
+        <TextField
+          inputRef={inputRef}
+          value={value}
+          placeholder={step.placeholder || ""}
+          type={step.type === "password" ? "password" : "text"}
+          focused
+          onChange={setValue}
+          onSubmit={(submittedValue) => {
+            const submitted = submittedValue.trim() || step.defaultValue || "";
+            if (submitted) resolve(submitted);
+          }}
+        />
+      </box>
+    </DialogFrame>
+  );
+}
+
+export function PaneTemplateTextareaStep({
+  resolve,
+  step,
+  dialogId,
+}: PromptContext<string> & { step: WizardStep }) {
+  const textareaRef = useRef<TextareaRenderable>(null);
+
+  useEffect(() => {
+    textareaRef.current?.focus?.();
+  }, []);
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "escape") {
+      resolve("");
+      return;
+    }
+    if (event.ctrl && event.name === "s") {
+      const submitted = textareaRef.current?.editBuffer.getText().trim() || step.defaultValue || "";
+      if (submitted) resolve(submitted);
+    }
+  }, dialogId);
+
+  const commit = () => {
+    const submitted = textareaRef.current?.editBuffer.getText().trim() || step.defaultValue || "";
+    if (submitted) resolve(submitted);
+  };
+
+  return (
+    <DialogFrame
+      title={step.label}
+      footer="Ctrl+S save · Esc cancel"
+    >
+      <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 height={1} />
+        <box
+          flexGrow={1}
+          minHeight={8}
+          border
+          borderColor={colors.border}
+          backgroundColor={colors.panel}
+        >
+          <textarea
+            ref={textareaRef}
+            initialValue={step.defaultValue ?? ""}
+            placeholder={step.placeholder || ""}
+            focused
+            textColor={colors.text}
+            placeholderColor={colors.textDim}
+            backgroundColor={colors.panel}
+            flexGrow={1}
+          />
+        </box>
+        <box height={1} />
+        <box flexDirection="row" gap={1}>
+          <box
+            backgroundColor={colors.selected}
+            onMouseDown={commit}
+          >
+            <text fg={colors.selectedText}>{` Save `}</text>
+          </box>
+          <box
+            backgroundColor={colors.panel}
+            onMouseDown={() => resolve("")}
+          >
+            <text fg={colors.text}>{` Cancel `}</text>
+          </box>
+        </box>
+      </box>
+    </DialogFrame>
+  );
+}
+
+export function PaneTemplateSelectStep({
+  resolve,
+  step,
+  dialogId,
+}: PromptContext<string> & { step: WizardStep }) {
+  const options = step.options ?? [];
+  const [selectedIndex, setSelectedIndex] = useState(() => {
+    const defaultIndex = step.defaultValue
+      ? options.findIndex((option) => option.value === step.defaultValue)
+      : -1;
+    return defaultIndex >= 0 ? defaultIndex : 0;
+  });
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+    if (event.name === "up" || event.name === "k") {
+      setSelectedIndex((index) => Math.max(0, index - 1));
+    } else if (event.name === "down" || event.name === "j") {
+      setSelectedIndex((index) => Math.min(options.length - 1, index + 1));
+    } else if (event.name === "return" || event.name === "enter") {
+      resolve(options[selectedIndex]?.value ?? "");
+    } else if (event.name === "escape") {
+      resolve("");
+    }
+  }, dialogId);
+
+  return (
+    <DialogFrame title={step.label} footer="Use ↑↓ to choose · enter to select · esc to cancel">
+      <box flexDirection="column">
+        {step.body?.map((line, index) => (
+          <box key={`${step.key}:${index}`} height={1}>
+            <text fg={colors.textDim}>{line || " "}</text>
+          </box>
+        ))}
+        <box height={1} />
+        <ListView
+          items={options.map((option) => ({
+            id: option.value,
+            label: option.label,
+          }))}
+          selectedIndex={selectedIndex}
+          bgColor={colors.commandBg}
+          onSelect={setSelectedIndex}
+          onActivate={(item) => resolve(item.id)}
+        />
+      </box>
+    </DialogFrame>
+  );
+}

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

@@ -0,0 +1,195 @@
+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 type { Quote } from "../types/financials";
+import { colors } from "../theme/colors";
+import { DialogFrame, ListView, NumberField } from "./ui";
+import { padTo } from "../utils/format";
+
+interface PricePreset {
+  label: string;
+  value: number;
+  detail?: string;
+}
+
+export interface PriceSelectorDialogProps {
+  label: string;
+  currentValue?: number;
+  quote?: Quote;
+}
+
+function buildPresets(quote: Quote | undefined): PricePreset[] {
+  if (!quote) return [];
+  const presets: PricePreset[] = [];
+  if (quote.bid != null && quote.bid > 0) {
+    presets.push({ label: "Bid", value: quote.bid, detail: quote.bidSize != null ? `× ${quote.bidSize}` : undefined });
+  }
+  if (quote.ask != null && quote.ask > 0) {
+    presets.push({ label: "Ask", value: quote.ask, detail: quote.askSize != null ? `× ${quote.askSize}` : undefined });
+  }
+  if (quote.price > 0) {
+    presets.push({ label: "Last", value: quote.price });
+  }
+  if (quote.mark != null && quote.mark > 0) {
+    presets.push({ label: "Mark", value: quote.mark });
+  }
+  if (quote.high != null && quote.high > 0) {
+    presets.push({ label: "High", value: quote.high });
+  }
+  if (quote.low != null && quote.low > 0) {
+    presets.push({ label: "Low", value: quote.low });
+  }
+  if (quote.previousClose != null && quote.previousClose > 0) {
+    presets.push({ label: "Prev Close", value: quote.previousClose });
+  }
+  return presets;
+}
+
+function formatMarketContext(quote: Quote | undefined): string {
+  if (!quote) return "No quote data available";
+  const parts: string[] = [];
+  parts.push(`Last ${quote.price.toFixed(2)}`);
+  if (quote.bid != null) {
+    const bidStr = quote.bidSize != null ? `Bid ${quote.bid.toFixed(2)} × ${quote.bidSize}` : `Bid ${quote.bid.toFixed(2)}`;
+    parts.push(bidStr);
+  }
+  if (quote.ask != null) {
+    const askStr = quote.askSize != null ? `Ask ${quote.ask.toFixed(2)} × ${quote.askSize}` : `Ask ${quote.ask.toFixed(2)}`;
+    parts.push(askStr);
+  }
+  if (quote.bid != null && quote.ask != null) {
+    parts.push(`Spd ${(quote.ask - quote.bid).toFixed(2)}`);
+  }
+  return parts.join(" · ");
+}
+
+const CUSTOM_INDEX = -1;
+
+export function PriceSelectorDialog({
+  resolve,
+  dialogId,
+  label,
+  currentValue,
+  quote,
+}: PromptContext<string> & PriceSelectorDialogProps) {
+  const presets = buildPresets(quote);
+  const [index, setIndex] = useState(0);
+  const [mode, setMode] = useState<"list" | "input">(presets.length > 0 ? "list" : "input");
+  const [customValue, setCustomValue] = useState("");
+  const inputRef = useRef<InputRenderable>(null);
+
+  useEffect(() => {
+    if (mode === "input") inputRef.current?.focus();
+  }, [mode]);
+
+  useDialogKeyboard((event) => {
+    event.stopPropagation();
+
+    if (event.name === "escape") {
+      resolve("");
+      return;
+    }
+
+    if (mode === "list") {
+      if (event.name === "up" || event.name === "k") {
+        setIndex((current) => Math.max(0, current - 1));
+      } else if (event.name === "down" || event.name === "j") {
+        if (index < presets.length - 1) {
+          setIndex((current) => current + 1);
+        } else {
+          setMode("input");
+          setIndex(CUSTOM_INDEX);
+        }
+      } else if (event.name === "return") {
+        if (presets[index]) {
+          resolve(String(presets[index].value));
+        }
+      } else if (event.name === "tab") {
+        setMode("input");
+        setIndex(CUSTOM_INDEX);
+      } else if (event.sequence && /^[0-9.]$/.test(event.sequence)) {
+        setMode("input");
+        setIndex(CUSTOM_INDEX);
+        setCustomValue(event.sequence);
+      }
+    } else {
+      if (event.name === "up" || (event.name === "tab" && presets.length > 0)) {
+        setMode("list");
+        setIndex(presets.length - 1);
+      } else if (event.name === "return") {
+        resolve(customValue.trim());
+      }
+    }
+  }, dialogId);
+
+  const presetWidth = 12;
+
+  return (
+    <DialogFrame
+      title={label}
+      footer={
+        mode === "list"
+          ? "↑↓ or hover to choose · Enter/click select · Tab or ↓ for custom · Esc cancel"
+          : "Type a price · Enter confirm · ↑ or Tab back to presets · Esc cancel"
+      }
+    >
+      <box flexDirection="column">
+        <text fg={colors.textDim}>{formatMarketContext(quote)}</text>
+        <box height={1} />
+
+        {presets.length > 0 && (
+          <>
+            <ListView
+              items={presets.map((preset) => ({
+                id: preset.label,
+                label: preset.label,
+              }))}
+              selectedIndex={mode === "list" ? index : -1}
+              bgColor={colors.bg}
+              onSelect={(nextIndex) => {
+                setMode("list");
+                setIndex(nextIndex);
+              }}
+              onActivate={(_, nextIndex) => resolve(String(presets[nextIndex]?.value ?? ""))}
+              renderRow={(item, state) => {
+                const preset = presets.find((entry) => entry.label === item.id);
+                return (
+                  <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}>
+                      {padTo(item.label, presetWidth)}
+                    </text>
+                    <text fg={state.selected ? colors.text : colors.textMuted}>
+                      {preset?.value.toFixed(2) ?? ""}
+                    </text>
+                    {preset?.detail && (
+                      <text fg={colors.textDim}>{`  ${preset.detail}`}</text>
+                    )}
+                  </box>
+                );
+              }}
+            />
+            <box height={1} />
+          </>
+        )}
+
+        <box flexDirection="row" onMouseDown={() => { setMode("input"); setIndex(CUSTOM_INDEX); }}>
+          <text fg={mode === "input" ? colors.text : colors.textDim}>
+            {mode === "input" ? "▸ " : "  "}Custom:{" "}
+          </text>
+          <NumberField
+            inputRef={inputRef}
+            focused={mode === "input"}
+            value={customValue}
+            placeholder={currentValue != null ? String(currentValue) : "type a price"}
+            onChange={setCustomValue}
+            onSubmit={(submittedValue) => resolve(submittedValue.trim())}
+          />
+        </box>
+      </box>
+    </DialogFrame>
+  );
+}

package/src/components/spinner.tsx

@@ -0,0 +1,2 @@
+export { Spinner } from "./ui/loading";
+export type { SpinnerProps } from "./ui/loading";

package/src/components/tab-bar.tsx

@@ -0,0 +1,17 @@
+import { Tabs } from "./ui/tabs";
+
+export interface Tab {
+  label: string;
+  value: string;
+}
+
+export interface TabBarProps {
+  tabs: Tab[];
+  activeValue: string;
+  onSelect: (value: string) => void;
+  compact?: boolean;
+}
+
+export function TabBar({ tabs, activeValue, onSelect, compact }: TabBarProps) {
+  return <Tabs tabs={tabs} activeValue={activeValue} onSelect={onSelect} compact={compact} />;
+}

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

@@ -0,0 +1,160 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { testRender } from "@opentui/react/test-utils";
+import { TickerBadgeText } from "./ticker-badge-text";
+import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+});
+
+function makeCatalogEntry(overrides?: Partial<InlineTickerCatalogEntry>): InlineTickerCatalogEntry {
+  return {
+    status: "ready",
+    ticker: null,
+    quote: {
+      symbol: "TSLA",
+      price: 250,
+      currency: "USD",
+      change: -12.5,
+      changePercent: -5,
+      lastUpdated: Date.now(),
+    },
+    ...overrides,
+  };
+}
+
+describe("TickerBadgeText", () => {
+  test("renders live ticker badges when quote data exists", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Watching $TSLA now"
+        lineWidth={40}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 40, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    expect(testSetup.captureCharFrame()).toContain("TSLA -5%");
+  });
+
+  test("falls back to the raw token when resolution failed", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Watching $TSLA now"
+        lineWidth={40}
+        catalog={{ TSLA: makeCatalogEntry({ status: "missing", quote: null }) }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 40, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("$TSLA");
+    expect(frame).not.toContain("TSLA -5%");
+  });
+
+  test("opens the ticker detail pane when a badge is clicked", async () => {
+    const opened: string[] = [];
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Watching $TSLA now"
+        lineWidth={40}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={(symbol) => opened.push(symbol)}
+      />,
+      { width: 40, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const row = lines.findIndex((line) => line.includes("TSLA -5%"));
+    const col = lines[row]?.indexOf("TSLA -5%") ?? -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(["TSLA"]);
+  });
+
+  test("shows the current price when the badge is hovered", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Watching $TSLA now"
+        lineWidth={40}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 40, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const row = lines.findIndex((line) => line.includes("TSLA -5%"));
+    const col = lines[row]?.indexOf("TSLA -5%") ?? -1;
+
+    expect(row).toBeGreaterThanOrEqual(0);
+    expect(col).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(col + 1, row);
+      await testSetup!.renderOnce();
+    });
+
+    expect(testSetup.captureCharFrame()).toContain("TSLA $250.00");
+  });
+
+  test("restores the change label when the mouse leaves the badge", async () => {
+    testSetup = await testRender(
+      <TickerBadgeText
+        text="Watching $TSLA now"
+        lineWidth={40}
+        catalog={{ TSLA: makeCatalogEntry() }}
+        textColor="#ffffff"
+        openTicker={() => {}}
+      />,
+      { width: 40, height: 4 },
+    );
+
+    await testSetup.renderOnce();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const row = lines.findIndex((line) => line.includes("TSLA -5%"));
+    const col = lines[row]?.indexOf("TSLA -5%") ?? -1;
+
+    expect(row).toBeGreaterThanOrEqual(0);
+    expect(col).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.moveTo(col + 1, row);
+      await testSetup!.renderOnce();
+      await testSetup!.mockMouse.moveTo(0, 3);
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("TSLA -5%");
+    expect(frame).not.toContain("TSLA $250.00");
+  });
+});

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

@@ -0,0 +1,58 @@
+import { useState } from "react";
+import { TickerBadge } from "./ticker-badge";
+import { tokenizeTickerText } from "../utils/ticker-tokenizer";
+import type { InlineTickerCatalogEntry } from "../state/use-inline-tickers";
+
+export interface TickerBadgeTextProps {
+  text: string;
+  lineWidth: number;
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  textColor: string;
+  openTicker: (symbol: string) => void;
+}
+
+export function TickerBadgeText({
+  text,
+  lineWidth,
+  catalog,
+  textColor,
+  openTicker,
+}: TickerBadgeTextProps) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+  const tokens = tokenizeTickerText(text);
+
+  return (
+    <box
+      flexDirection="row"
+      flexWrap="wrap"
+      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>;
+        }
+
+        const entry = catalog[token.symbol];
+        if (!entry || entry.status === "missing") {
+          return <text key={`raw:${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}
+          />
+        );
+      })}
+    </box>
+  );
+}