gloomberb 0.2.0 → 0.3.2

package/src/components/ticker-badge.tsx

@@ -0,0 +1,88 @@
+import { TextAttributes } from "@opentui/core";
+import { colors, priceColor } from "../theme/colors";
+import { formatCurrency } from "../utils/format";
+import type { Quote } from "../types/financials";
+
+export interface TickerBadgeProps {
+  symbol: string;
+  status: "loading" | "ready";
+  quote: Quote | null;
+  hovered?: boolean;
+  onHoverStart?: () => void;
+  onHoverEnd?: () => void;
+  onOpen: (symbol: string) => void;
+}
+
+function blendHex(base: string, accent: string, ratio: number): string {
+  const parse = (hex: string) => {
+    const value = hex.replace("#", "");
+    return [
+      parseInt(value.slice(0, 2), 16),
+      parseInt(value.slice(2, 4), 16),
+      parseInt(value.slice(4, 6), 16),
+    ] as const;
+  };
+  const [br, bg, bb] = parse(base);
+  const [ar, ag, ab] = parse(accent);
+  const mix = (left: number, right: number) => Math.round(left + (right - left) * ratio)
+    .toString(16)
+    .padStart(2, "0");
+  return `#${mix(br, ar)}${mix(bg, ag)}${mix(bb, ab)}`;
+}
+
+function formatBadgeChange(changePercent: number): string {
+  const rounded = Math.round(changePercent * 10) / 10;
+  const normalized = Object.is(rounded, -0) ? 0 : rounded;
+  if (normalized === 0) return "0%";
+  const abs = Math.abs(normalized);
+  const body = Number.isInteger(abs) ? abs.toFixed(0) : abs.toFixed(1);
+  return `${normalized > 0 ? "+" : "-"}${body}%`;
+}
+
+export function TickerBadge({
+  symbol,
+  status,
+  quote,
+  hovered = false,
+  onHoverStart,
+  onHoverEnd,
+  onOpen,
+}: TickerBadgeProps) {
+  const tone = status === "ready" && quote ? priceColor(quote.changePercent) : colors.borderFocused;
+  const label = hovered && quote
+    ? `${symbol} ${formatCurrency(quote.price, quote.currency)}`
+    : status === "ready" && quote
+    ? formatBadgeChange(quote.changePercent)
+    : "…";
+  const text = hovered && quote ? label : `${symbol} ${label}`;
+  const color = hovered ? colors.textBright : tone;
+  const backgroundColor = hovered
+    ? blendHex(colors.bg, tone, 0.42)
+    : blendHex(colors.bg, tone, 0.18);
+  const interactive = status === "ready";
+
+  return (
+    <box paddingRight={1}>
+      <box
+        paddingX={1}
+        backgroundColor={backgroundColor}
+        onMouseOver={() => {
+          onHoverStart?.();
+        }}
+        onMouseOut={() => {
+          onHoverEnd?.();
+        }}
+        onMouseDown={(event: any) => {
+          event.stopPropagation?.();
+          event.preventDefault?.();
+          if (!interactive) return;
+          onOpen(symbol);
+        }}
+      >
+        <text fg={color} attributes={TextAttributes.BOLD}>
+          {text}
+        </text>
+      </box>
+    </box>
+  );
+}

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

@@ -0,0 +1,188 @@
+import { useRef, type RefObject } from "react";
+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 { TickerRecord } from "../types/ticker";
+import { padTo } from "../utils/format";
+
+export interface TickerTableCell {
+  text: string;
+  color?: string;
+}
+
+export type QuoteFlashDirection = "up" | "down" | "flat";
+
+const FLASHABLE_QUOTE_COLUMN_IDS = new Set([
+  "price",
+  "change",
+  "change_pct",
+  "bid",
+  "ask",
+  "spread",
+  "ext_hours",
+  "market_cap",
+  "mkt_value",
+  "pnl",
+  "pnl_pct",
+]);
+
+function resolveQuoteFlashColor(direction: QuoteFlashDirection, fallbackColor: string): string {
+  switch (direction) {
+    case "up":
+      return colors.positive;
+    case "down":
+      return colors.negative;
+    default:
+      return fallbackColor === colors.textDim ? colors.text : colors.textBright;
+  }
+}
+
+export function TickerListTable({
+  columns,
+  tickers,
+  cursorSymbol,
+  hoveredIdx,
+  setHoveredIdx,
+  setCursorSymbol,
+  resolveCell,
+  financialsMap,
+  headerScrollRef,
+  scrollRef,
+  syncHeaderScroll,
+  onBodyScrollActivity,
+  flashSymbols,
+  sortColumnId,
+  sortDirection,
+  onHeaderClick,
+  onRowActivate,
+  emptyTitle = "No tickers.",
+  emptyHint = "Press Ctrl+P to add one.",
+}: {
+  columns: ColumnConfig[];
+  tickers: TickerRecord[];
+  cursorSymbol: string | null;
+  hoveredIdx: number | null;
+  setHoveredIdx: (index: number | null) => void;
+  setCursorSymbol: (symbol: string) => void;
+  resolveCell: (column: ColumnConfig, ticker: TickerRecord, financials: TickerFinancials | undefined) => TickerTableCell;
+  financialsMap: Map<string, TickerFinancials>;
+  headerScrollRef?: RefObject<ScrollBoxRenderable | null>;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
+  syncHeaderScroll?: () => void;
+  onBodyScrollActivity?: () => void;
+  flashSymbols?: Map<string, QuoteFlashDirection>;
+  sortColumnId?: string | null;
+  sortDirection?: "asc" | "desc";
+  onHeaderClick?: (columnId: string) => void;
+  onRowActivate?: (ticker: TickerRecord) => void;
+  emptyTitle?: string;
+  emptyHint?: string;
+}) {
+  const safeFlashSymbols = flashSymbols ?? new Map<string, QuoteFlashDirection>();
+  const lastActivatedRef = useRef<{ symbol: string; at: number } | null>(null);
+
+  return (
+    <>
+      <scrollbox
+        ref={headerScrollRef}
+        height={1}
+        scrollX
+        focusable={false}
+      >
+        <box flexDirection="row" height={1} paddingX={1}>
+          {columns.map((column) => {
+            const isSorted = sortColumnId === column.id;
+            const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
+            const labelText = column.label + indicator;
+            return (
+              <box
+                key={column.id}
+                width={column.width + 1}
+                onMouseDown={onHeaderClick ? (event) => {
+                  event.preventDefault();
+                  onHeaderClick(column.id);
+                } : undefined}
+              >
+                <text attributes={TextAttributes.BOLD} fg={isSorted ? colors.text : colors.textDim}>
+                  {padTo(labelText, column.width, column.align)}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+      </scrollbox>
+
+      <scrollbox
+        ref={scrollRef}
+        flexGrow={1}
+        scrollX
+        scrollY
+        focusable={false}
+        onMouseDown={syncHeaderScroll ? () => queueMicrotask(syncHeaderScroll) : undefined}
+        onMouseUp={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
+        onMouseDrag={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
+        onMouseScroll={onBodyScrollActivity ? () => queueMicrotask(onBodyScrollActivity) : undefined}
+      >
+        {tickers.length === 0 ? (
+          <box paddingX={1} paddingY={1}>
+            <EmptyState title={emptyTitle} hint={emptyHint} />
+          </box>
+        ) : (
+          tickers.map((ticker, index) => {
+            const isSelected = ticker.metadata.ticker === cursorSymbol;
+            const isHovered = index === hoveredIdx && !isSelected;
+            const financials = financialsMap.get(ticker.metadata.ticker);
+            const rowBg = isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg;
+            const flashDirection = safeFlashSymbols.get(ticker.metadata.ticker);
+
+            return (
+              <box
+                key={ticker.metadata.ticker}
+                flexDirection="row"
+                height={1}
+                paddingX={1}
+                backgroundColor={rowBg}
+                onMouseMove={() => setHoveredIdx(index)}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  setCursorSymbol(ticker.metadata.ticker);
+                  if (!onRowActivate) return;
+                  const now = Date.now();
+                  const last = lastActivatedRef.current;
+                  if (last?.symbol === ticker.metadata.ticker && now - last.at <= 350) {
+                    lastActivatedRef.current = null;
+                    onRowActivate(ticker);
+                    return;
+                  }
+                  lastActivatedRef.current = {
+                    symbol: ticker.metadata.ticker,
+                    at: now,
+                  };
+                }}
+              >
+                {columns.map((column) => {
+                  const { text, color } = resolveCell(column, ticker, financials);
+                  const baseFg = color || (isSelected ? colors.selectedText : colors.text);
+                  const shouldFlash = flashDirection != null && FLASHABLE_QUOTE_COLUMN_IDS.has(column.id);
+                  const cellFg = shouldFlash
+                    ? resolveQuoteFlashColor(flashDirection, baseFg)
+                    : baseFg;
+
+                  return (
+                    <box key={column.id} width={column.width + 1}>
+                      <text fg={cellFg}>
+                        {padTo(text, column.width, column.align)}
+                      </text>
+                    </box>
+                  );
+                })}
+              </box>
+            );
+          })
+        )}
+      </scrollbox>
+    </>
+  );
+}

package/src/components/toggle-list.tsx

@@ -0,0 +1,74 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../theme/colors";
+import { ListView, type ListViewItem } from "./ui/list-view";
+
+export interface ToggleListItem {
+  id: string;
+  label: string;
+  enabled: boolean;
+  description?: string;
+}
+
+export interface ToggleListProps {
+  items: ToggleListItem[];
+  selectedIdx: number;
+  onToggle?: (id: string) => void;
+  onSelect?: (idx: number) => void;
+  /** Background color for non-selected rows (defaults to colors.bg) */
+  bgColor?: string;
+  height?: number;
+  flexGrow?: number;
+  scrollable?: boolean;
+  showSelectedDescription?: boolean;
+}
+
+export function ToggleList({
+  items,
+  selectedIdx,
+  onToggle,
+  onSelect,
+  bgColor,
+  height,
+  flexGrow,
+  scrollable,
+  showSelectedDescription = true,
+}: ToggleListProps) {
+  const listItems: ListViewItem[] = items.map((item) => ({
+    id: item.id,
+    label: item.label,
+    description: item.description,
+  }));
+
+  return (
+    <ListView
+      items={listItems}
+      selectedIndex={selectedIdx}
+      bgColor={bgColor ?? colors.bg}
+      showSelectedDescription={showSelectedDescription}
+      height={height}
+      flexGrow={flexGrow}
+      scrollable={scrollable}
+      onSelect={onSelect}
+      onActivate={(item) => {
+        onToggle?.(item.id);
+      }}
+      renderRow={(item, state) => {
+        const toggleItem = items.find((entry) => entry.id === item.id);
+        const checked = toggleItem?.enabled ? "\u2713" : " ";
+        return (
+          <box flexDirection="row">
+            <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}
+            >
+              {`[${checked}] ${item.label}`}
+            </text>
+          </box>
+        );
+      }}
+    />
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,77 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../theme/colors";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+
+export interface ButtonProps {
+  label: string;
+  onPress?: () => void;
+  variant?: ButtonVariant;
+  disabled?: boolean;
+  active?: boolean;
+  shortcut?: string;
+  width?: number;
+}
+
+function resolveButtonColors(variant: ButtonVariant, active: boolean, disabled: boolean) {
+  if (disabled) {
+    return { bg: colors.panel, fg: colors.textMuted };
+  }
+  if (active) {
+    return { bg: colors.selected, fg: colors.selectedText };
+  }
+
+  switch (variant) {
+    case "primary":
+      return { bg: colors.borderFocused, fg: colors.bg };
+    case "danger":
+      return { bg: colors.negative, fg: colors.bg };
+    case "ghost":
+      return { bg: colors.bg, fg: colors.textDim };
+    case "secondary":
+    default:
+      return { bg: colors.panel, fg: colors.text };
+  }
+}
+
+export function Button({
+  label,
+  onPress,
+  variant = "secondary",
+  disabled = false,
+  active = false,
+  shortcut,
+  width,
+}: ButtonProps) {
+  const palette = resolveButtonColors(variant, active, disabled);
+
+  return (
+    <box
+      width={width}
+      height={1}
+      flexDirection="row"
+      backgroundColor={palette.bg}
+      onMouseDown={() => {
+        if (!disabled) onPress?.();
+      }}
+    >
+      <text fg={palette.fg} attributes={active ? TextAttributes.BOLD : 0}>
+        {` ${label} `}
+      </text>
+      {shortcut && (
+        <text fg={disabled ? colors.textMuted : colors.textDim}>
+          {` ${shortcut}`}
+        </text>
+      )}
+    </box>
+  );
+}
+
+export interface IconButtonProps extends Omit<ButtonProps, "label"> {
+  icon: string;
+  label?: string;
+}
+
+export function IconButton({ icon, label, ...props }: IconButtonProps) {
+  return <Button label={label ? `${icon} ${label}` : icon} {...props} />;
+}

package/src/components/ui/data-table.tsx

@@ -0,0 +1,210 @@
+import { useMemo, useState, type RefObject } from "react";
+import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
+import { colors, hoverBg } from "../../theme/colors";
+import type { ColumnConfig } from "../../types/config";
+import { padTo } from "../../utils/format";
+import { EmptyState } from "./status";
+
+export type DataTableColumn = Pick<
+  ColumnConfig,
+  "id" | "label" | "width" | "align"
+>;
+
+export interface DataTableCell {
+  text: string;
+  color?: string;
+  onMouseDown?: (event: any) => void;
+}
+
+export interface DataTableProps<
+  T,
+  C extends DataTableColumn = DataTableColumn,
+> {
+  columns: C[];
+  items: T[];
+  sortColumnId: string | null;
+  sortDirection: "asc" | "desc";
+  onHeaderClick: (columnId: string) => void;
+  headerScrollRef: RefObject<ScrollBoxRenderable | null>;
+  scrollRef: RefObject<ScrollBoxRenderable | null>;
+  syncHeaderScroll: () => void;
+  onBodyScrollActivity: () => void;
+  hoveredIdx: number | null;
+  setHoveredIdx: (index: number | null) => void;
+  getItemKey: (item: T, index: number) => string;
+  isSelected: (item: T, index: number) => boolean;
+  onSelect: (item: T, index: number) => void;
+  renderCell: (
+    item: T,
+    column: C,
+    index: number,
+    rowState: { selected: boolean; hovered: boolean },
+  ) => DataTableCell;
+  emptyStateTitle: string;
+  emptyStateHint?: string;
+  virtualize?: boolean;
+  overscan?: number;
+}
+
+export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
+  columns,
+  items,
+  sortColumnId,
+  sortDirection,
+  onHeaderClick,
+  headerScrollRef,
+  scrollRef,
+  syncHeaderScroll,
+  onBodyScrollActivity,
+  hoveredIdx,
+  setHoveredIdx,
+  getItemKey,
+  isSelected,
+  onSelect,
+  renderCell,
+  emptyStateTitle,
+  emptyStateHint,
+  virtualize = false,
+  overscan = 3,
+}: DataTableProps<T, C>) {
+  const [scrollVersion, setScrollVersion] = useState(0);
+  const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
+  const viewportHeight = virtualize
+    ? (scrollRef.current?.viewport?.height ?? Math.min(items.length, 16))
+    : items.length;
+  const startIndex = virtualize ? Math.max(scrollTop - overscan, 0) : 0;
+  const endIndex = virtualize
+    ? Math.min(startIndex + viewportHeight + overscan * 2, items.length)
+    : items.length;
+  const visibleItems = useMemo(
+    () => items.slice(startIndex, endIndex),
+    [endIndex, items, scrollVersion, startIndex],
+  );
+
+  const handleBodyScrollActivity = () => {
+    if (virtualize) {
+      setScrollVersion((current) => current + 1);
+    }
+    onBodyScrollActivity();
+  };
+
+  return (
+    <>
+      <scrollbox ref={headerScrollRef} height={1} scrollX focusable={false}>
+        <box flexDirection="row" height={1} paddingX={1}>
+          {columns.map((column) => {
+            const isSorted = sortColumnId === column.id;
+            const indicator = isSorted
+              ? sortDirection === "asc"
+                ? " ▲"
+                : " ▼"
+              : "";
+            const labelText = padTo(
+              column.label + indicator,
+              column.width,
+              column.align,
+            );
+            return (
+              <box
+                key={column.id}
+                width={column.width + 1}
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  onHeaderClick(column.id);
+                }}
+              >
+                <text
+                  attributes={TextAttributes.BOLD}
+                  fg={isSorted ? colors.text : colors.textDim}
+                >
+                  {labelText}
+                </text>
+              </box>
+            );
+          })}
+        </box>
+      </scrollbox>
+
+      <scrollbox
+        ref={scrollRef}
+        flexGrow={1}
+        scrollX
+        scrollY
+        focusable={false}
+        onMouseDown={() => queueMicrotask(syncHeaderScroll)}
+        onMouseUp={() => queueMicrotask(handleBodyScrollActivity)}
+        onMouseDrag={() => queueMicrotask(handleBodyScrollActivity)}
+        onMouseScroll={() => queueMicrotask(handleBodyScrollActivity)}
+      >
+        {items.length === 0 ? (
+          <box paddingX={1} paddingY={1}>
+            <EmptyState title={emptyStateTitle} hint={emptyStateHint} />
+          </box>
+        ) : (
+          <>
+            {virtualize && startIndex > 0 && <box height={startIndex} />}
+            {visibleItems.map((item, visibleIndex) => {
+              const index = startIndex + visibleIndex;
+              const selected = isSelected(item, index);
+              const hovered = hoveredIdx === index && !selected;
+              const rowBg = selected
+                ? colors.selected
+                : hovered
+                  ? hoverBg()
+                  : colors.bg;
+
+              return (
+                <box
+                  key={getItemKey(item, index)}
+                  flexDirection="row"
+                  height={1}
+                  paddingX={1}
+                  backgroundColor={rowBg}
+                  onMouseMove={() => setHoveredIdx(index)}
+                  onMouseDown={(event) => {
+                    event.preventDefault();
+                    onSelect(item, index);
+                  }}
+                >
+                  {columns.map((column) => {
+                    const cell = renderCell(item, column, index, {
+                      selected,
+                      hovered,
+                    });
+                    return (
+                      <box
+                        key={column.id}
+                        width={column.width + 1}
+                        onMouseDown={(event) => {
+                          if (cell.onMouseDown) {
+                            cell.onMouseDown(event);
+                            return;
+                          }
+                          event.preventDefault();
+                          event.stopPropagation?.();
+                          onSelect(item, index);
+                        }}
+                      >
+                        <text
+                          fg={
+                            cell.color ??
+                            (selected ? colors.selectedText : colors.text)
+                          }
+                        >
+                          {padTo(cell.text, column.width, column.align)}
+                        </text>
+                      </box>
+                    );
+                  })}
+                </box>
+              );
+            })}
+            {virtualize && endIndex < items.length && (
+              <box height={Math.max(items.length - endIndex, 0)} />
+            )}
+          </>
+        )}
+      </scrollbox>
+    </>
+  );
+}

package/src/components/ui/external-link.tsx

@@ -0,0 +1,22 @@
+import { TextAttributes } from "@opentui/core";
+import { exec } from "child_process";
+import { colors } from "../../theme/colors";
+
+export function openUrl(url: string) {
+  const cmd = process.platform === "darwin"
+    ? `open "${url}"`
+    : process.platform === "win32"
+      ? `start "" "${url}"`
+      : `xdg-open "${url}"`;
+  exec(cmd, { stdio: "ignore" } as any);
+}
+
+export function ExternalLink({ url, label }: { url: string; label?: string }) {
+  return (
+    <box height={1} onMouseDown={() => openUrl(url)}>
+      <text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>
+        {label ?? url}
+      </text>
+    </box>
+  );
+}