gloomberb 0.4.0 → 0.5.0

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({
@@ -86,7 +89,13 @@ const TickerListHeader = memo(function TickerListHeader({
       scrollX
       focusable={false}
     >
-      <box flexDirection="row" height={1} paddingX={1}>
+      <box
+        flexDirection="row"
+        height={1}
+        width="100%"
+        paddingX={1}
+        backgroundColor={colors.panel}
+      >
         {columns.map((column) => {
           const isSorted = sortColumnId === column.id;
           const indicator = isSorted ? (sortDirection === "asc" ? " \u25B2" : " \u25BC") : "";
@@ -95,6 +104,7 @@ const TickerListHeader = memo(function TickerListHeader({
             <box
               key={column.id}
               width={column.width + 1}
+              backgroundColor={colors.panel}
               onMouseDown={onHeaderClick ? (event) => {
                 event.preventDefault();
                 onHeaderClick(column.id);
@@ -111,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,
@@ -123,6 +165,8 @@ const TickerListRow = memo(function TickerListRow({
   setCursorSymbol,
   resolveCell,
   onRowActivate,
+  showSparklines,
+  priceHistory,
 }: {
   columns: ColumnConfig[];
   ticker: TickerRecord;
@@ -135,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"
@@ -175,6 +225,11 @@ const TickerListRow = memo(function TickerListRow({
           </box>
         );
       })}
+      {sparkline && (
+        <box width={12}>
+          <text content={sparkline} />
+        </box>
+      )}
     </box>
   );
 }, (previous, next) => (
@@ -189,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({
@@ -211,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>();
 
@@ -255,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>

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

@@ -1,7 +1,8 @@
-import { useMemo, useState, type RefObject } from "react";
+import { useCallback, useEffect, 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 { useAppDispatch, usePaneInstance } from "../../state/app-context";
 import { padTo } from "../../utils/format";
 import { useDoubleClickActivation } from "../use-double-click-activation";
 import { EmptyState } from "./status";
@@ -14,9 +15,17 @@ export type DataTableColumn = Pick<
 export interface DataTableCell {
   text: string;
   color?: string;
+  attributes?: number;
   onMouseDown?: (event: any) => void;
 }
 
+export interface DataTableSectionHeader {
+  text: string;
+  color?: string;
+  backgroundColor?: string;
+  attributes?: number;
+}
+
 export interface DataTableProps<
   T,
   C extends DataTableColumn = DataTableColumn,
@@ -42,10 +51,15 @@ export interface DataTableProps<
     index: number,
     rowState: { selected: boolean; hovered: boolean },
   ) => DataTableCell;
+  renderSectionHeader?: (
+    item: T,
+    index: number,
+  ) => DataTableSectionHeader | null;
   emptyStateTitle: string;
   emptyStateHint?: string;
   virtualize?: boolean;
   overscan?: number;
+  showHorizontalScrollbar?: boolean;
 }
 
 interface DataTableRowPointerTarget<T> {
@@ -70,11 +84,15 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
   onSelect,
   onActivate,
   renderCell,
+  renderSectionHeader,
   emptyStateTitle,
   emptyStateHint,
   virtualize = false,
   overscan = 3,
+  showHorizontalScrollbar = true,
 }: DataTableProps<T, C>) {
+  const dispatch = useAppDispatch();
+  const paneInstanceId = usePaneInstance()?.instanceId ?? null;
   const [scrollVersion, setScrollVersion] = useState(0);
   const scrollTop = virtualize ? (scrollRef.current?.scrollTop ?? 0) : 0;
   const viewportHeight = virtualize
@@ -106,11 +124,36 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
     }
     onBodyScrollActivity();
   };
+  const focusPane = useCallback(() => {
+    if (!paneInstanceId) return;
+    dispatch({ type: "FOCUS_PANE", paneId: paneInstanceId });
+  }, [dispatch, paneInstanceId]);
+
+  useEffect(() => {
+    if (headerScrollRef.current) {
+      headerScrollRef.current.horizontalScrollBar.visible = false;
+      if (!showHorizontalScrollbar) {
+        headerScrollRef.current.scrollLeft = 0;
+      }
+    }
+    if (scrollRef.current) {
+      scrollRef.current.horizontalScrollBar.visible = showHorizontalScrollbar;
+      if (!showHorizontalScrollbar) {
+        scrollRef.current.scrollLeft = 0;
+      }
+    }
+  }, [columns.length, headerScrollRef, items.length, scrollRef, showHorizontalScrollbar]);
 
   return (
     <>
-      <scrollbox ref={headerScrollRef} height={1} scrollX focusable={false}>
-        <box flexDirection="row" height={1} paddingX={1}>
+      <scrollbox ref={headerScrollRef} height={1} scrollX={showHorizontalScrollbar} focusable={false}>
+        <box
+          flexDirection="row"
+          height={1}
+          width="100%"
+          paddingX={1}
+          backgroundColor={colors.panel}
+        >
           {columns.map((column) => {
             const isSorted = sortColumnId === column.id;
             const indicator = isSorted
@@ -127,7 +170,9 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
               <box
                 key={column.id}
                 width={column.width + 1}
+                backgroundColor={colors.panel}
                 onMouseDown={(event) => {
+                  focusPane();
                   event.preventDefault();
                   onHeaderClick(column.id);
                 }}
@@ -147,10 +192,13 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
       <scrollbox
         ref={scrollRef}
         flexGrow={1}
-        scrollX
+        scrollX={showHorizontalScrollbar}
         scrollY
         focusable={false}
-        onMouseDown={() => queueMicrotask(syncHeaderScroll)}
+        onMouseDown={() => {
+          focusPane();
+          queueMicrotask(syncHeaderScroll);
+        }}
         onMouseUp={() => queueMicrotask(handleBodyScrollActivity)}
         onMouseDrag={() => queueMicrotask(handleBodyScrollActivity)}
         onMouseScroll={() => queueMicrotask(handleBodyScrollActivity)}
@@ -164,6 +212,32 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
             {virtualize && startIndex > 0 && <box height={startIndex} />}
             {visibleItems.map((item, visibleIndex) => {
               const index = startIndex + visibleIndex;
+              const sectionHeader = renderSectionHeader?.(item, index) ?? null;
+
+              if (sectionHeader) {
+                return (
+                  <box
+                    key={getItemKey(item, index)}
+                    flexDirection="row"
+                    height={1}
+                    width="100%"
+                    paddingX={1}
+                    backgroundColor={sectionHeader.backgroundColor ?? colors.bg}
+                    onMouseDown={(event) => {
+                      focusPane();
+                      event.preventDefault();
+                    }}
+                  >
+                    <text
+                      attributes={sectionHeader.attributes ?? TextAttributes.BOLD}
+                      fg={sectionHeader.color ?? colors.textBright}
+                    >
+                      {sectionHeader.text}
+                    </text>
+                  </box>
+                );
+              }
+
               const selected = isSelected(item, index);
               const hovered = hoveredIdx === index && !selected;
               const rowBg = selected
@@ -181,6 +255,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
                   backgroundColor={rowBg}
                   onMouseMove={() => setHoveredIdx(index)}
                   onMouseDown={(event) => {
+                    focusPane();
                     event.preventDefault();
                     handleRowMouseDown(getItemKey(item, index), {
                       item,
@@ -198,6 +273,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
                         key={column.id}
                         width={column.width + 1}
                         onMouseDown={(event) => {
+                          focusPane();
                           if (cell.onMouseDown) {
                             cell.onMouseDown(event);
                             return;
@@ -211,6 +287,7 @@ export function DataTable<T, C extends DataTableColumn = DataTableColumn>({
                         }}
                       >
                         <text
+                          attributes={cell.attributes ?? TextAttributes.NONE}
                           fg={
                             cell.color ??
                             (selected ? colors.selectedText : colors.text)

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

@@ -1,22 +1,59 @@
 import { TextAttributes } from "@opentui/core";
-import { exec } from "child_process";
+import { spawn } from "child_process";
 import { colors } from "../../theme/colors";
 
 export function openUrl(url: string) {
-  const cmd = process.platform === "darwin"
-    ? `open "${url}"`
+  if (!url.trim()) return;
+
+  const child = process.platform === "darwin"
+    ? spawn("open", [url], { detached: true, stdio: "ignore" })
     : process.platform === "win32"
-      ? `start "" "${url}"`
-      : `xdg-open "${url}"`;
-  exec(cmd, { stdio: "ignore" } as any);
+      ? spawn("cmd", ["/c", "start", "", url], { detached: true, stdio: "ignore" })
+      : spawn("xdg-open", [url], { detached: true, stdio: "ignore" });
+
+  child.unref();
+}
+
+function handleOpen(
+  url: string,
+  onOpen: (url: string) => void,
+  event?: { preventDefault?: () => void; stopPropagation?: () => void },
+) {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  onOpen(url);
+}
+
+export function ExternalLinkText(
+  { url, label, color = colors.textBright, onOpen = openUrl }: {
+    url: string;
+    label?: string;
+    color?: string;
+    onOpen?: (url: string) => void;
+  },
+) {
+  return (
+    <text
+      fg={color}
+      attributes={TextAttributes.UNDERLINE}
+      onMouseDown={(event: any) => handleOpen(url, onOpen, event)}
+    >
+      {label ?? url}
+    </text>
+  );
 }
 
-export function ExternalLink({ url, label }: { url: string; label?: string }) {
+export function ExternalLink(
+  { url, label, color, onOpen }: {
+    url: string;
+    label?: string;
+    color?: string;
+    onOpen?: (url: string) => void;
+  },
+) {
   return (
-    <box height={1} onMouseDown={() => openUrl(url)}>
-      <text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>
-        {label ?? url}
-      </text>
+    <box height={1}>
+      <ExternalLinkText url={url} label={label} color={color} onOpen={onOpen} />
     </box>
   );
 }

package/src/components/ui/fields.tsx

@@ -82,6 +82,7 @@ export function TextField({
           ref={resolvedInputRef}
           width={width}
           value={value}
+          selectable={!isPassword}
           placeholder={isPassword ? "" : placeholder}
           focused={focused}
           textColor={isPassword ? backgroundColor : textColor}
@@ -115,7 +116,7 @@ export function TextField({
               resolvedInputRef.current?.focus?.();
             }}
           >
-            <text fg={maskedTextColor}>
+            <text fg={maskedTextColor} selectable={false}>
               {maskedBefore}
               {focused && (
                 <span bg={maskedTextColor} fg={backgroundColor}>{maskedCursorChar}</span>

package/src/components/ui/index.ts

@@ -6,6 +6,7 @@ export type {
   DataTableCell,
   DataTableColumn,
   DataTableProps,
+  DataTableSectionHeader,
 } from "./data-table";
 
 export { Tabs } from "./tabs";
@@ -14,6 +15,12 @@ export type { TabItem, TabsProps } from "./tabs";
 export { Button, IconButton } from "./button";
 export type { ButtonProps, ButtonVariant, IconButtonProps } from "./button";
 
+export { MultiSelectChips } from "./multi-select-chips";
+export type { MultiSelectChipsProps, MultiSelectChipOption } from "./multi-select-chips";
+export { MultiSelectDialogButton, MultiSelectDialogContent } from "./multi-select-dialog";
+export type { MultiSelectDialogButtonProps, MultiSelectDialogContentProps } from "./multi-select-dialog";
+export type { MultiSelectOption } from "./multi-select";
+
 export { Checkbox, Switch, RadioGroup, SegmentedControl } from "./toggle";
 export type {
   CheckboxProps,
@@ -42,7 +49,7 @@ export type {
 export { Section, FieldRow, DialogFrame } from "./frame";
 export type { SectionProps, FieldRowProps, DialogFrameProps } from "./frame";
 
-export { ExternalLink, openUrl } from "./external-link";
+export { ExternalLink, ExternalLinkText, openUrl } from "./external-link";
 export { PageStackView } from "./page-stack-view";
 
 export { Spinner, ProgressBar, SkeletonRow, LoadingBlock } from "./loading";

package/src/components/ui/multi-select-chips.tsx

@@ -0,0 +1,69 @@
+import { TextAttributes } from "@opentui/core";
+import { colors } from "../../theme/colors";
+import { toggleMultiSelectValue, type MultiSelectOption } from "./multi-select";
+
+export type MultiSelectChipOption = MultiSelectOption;
+
+export interface MultiSelectChipsProps {
+  label?: string;
+  options: MultiSelectChipOption[];
+  selectedValues: string[];
+  onChange?: (values: string[]) => void;
+  disabled?: boolean;
+  emptyLabel?: string;
+  idPrefix?: string;
+}
+
+export function MultiSelectChips({
+  label,
+  options,
+  selectedValues,
+  onChange,
+  disabled = false,
+  emptyLabel = "No options",
+  idPrefix,
+}: MultiSelectChipsProps) {
+  const selectedSet = new Set(selectedValues);
+
+  return (
+    <box flexDirection="row" height={1} gap={1}>
+      {label && <text fg={colors.textDim}>{`${label}:`}</text>}
+      {options.length === 0 && <text fg={colors.textMuted}>{emptyLabel}</text>}
+      {options.map((option) => {
+        const selected = selectedSet.has(option.value);
+        const optionDisabled = disabled || option.disabled;
+        const bg = selected ? colors.selected : colors.panel;
+        const fg = optionDisabled
+          ? colors.textMuted
+          : selected
+            ? colors.selectedText
+            : colors.textDim;
+        const marker = selected ? "[x]" : "[ ]";
+        const text = `${marker} ${option.label}`;
+        const toggle = () => {
+          if (optionDisabled) return;
+          onChange?.(toggleMultiSelectValue(options, selectedValues, option.value));
+        };
+
+        return (
+          <box
+            key={option.value}
+            id={idPrefix ? `${idPrefix}:${option.value}` : undefined}
+            height={1}
+            width={text.length}
+            backgroundColor={bg}
+            onMouseDown={toggle}
+          >
+            <text
+              fg={fg}
+              attributes={selected ? TextAttributes.BOLD : 0}
+              onMouseDown={toggle}
+            >
+              {text}
+            </text>
+          </box>
+        );
+      })}
+    </box>
+  );
+}