gloomberb 0.2.0 → 0.3.1

package/src/components/command-bar/workflow-types.ts

@@ -0,0 +1,127 @@
+export interface CommandBarMainSnapshot {
+  query: string;
+  selectedIdx: number;
+}
+
+export interface CommandBarFieldOption {
+  label: string;
+  value: string;
+  description?: string;
+}
+
+export interface CommandBarFieldDependency {
+  key: string;
+  value: string;
+}
+
+interface CommandBarFieldBase {
+  id: string;
+  label: string;
+  description?: string;
+  placeholder?: string;
+  required?: boolean;
+  dependsOn?: CommandBarFieldDependency[];
+}
+
+export type CommandBarWorkflowField =
+  | (CommandBarFieldBase & { type: "text" | "password" | "number" | "textarea" })
+  | (CommandBarFieldBase & { type: "toggle" })
+  | (CommandBarFieldBase & { type: "select"; options: CommandBarFieldOption[] })
+  | (CommandBarFieldBase & { type: "multi-select" | "ordered-multi-select"; options: CommandBarFieldOption[] });
+
+export type CommandBarFieldValue = string | boolean | string[];
+
+export interface CommandBarRouteBase {
+  restoreMain?: CommandBarMainSnapshot;
+}
+
+export interface CommandBarModeRoute extends CommandBarRouteBase {
+  kind: "mode";
+  screen: "ticker-search" | "themes" | "plugins" | "layout" | "new-pane";
+  query: string;
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  themeBaseId?: string;
+  payload?: Record<string, unknown>;
+}
+
+export interface CommandBarPickerOption {
+  id: string;
+  label: string;
+  detail?: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+export interface CommandBarPickerRoute extends CommandBarRouteBase {
+  kind: "picker";
+  pickerId:
+    | "layout-swap"
+    | "delete-watchlist"
+    | "delete-portfolio"
+    | "disconnect-broker"
+    | "collection-target"
+    | "broker-type"
+    | "field-select"
+    | "field-multi-select";
+  title: string;
+  query: string;
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  options: CommandBarPickerOption[];
+  payload?: Record<string, unknown>;
+}
+
+export interface CommandBarConfirmRoute extends CommandBarRouteBase {
+  kind: "confirm";
+  confirmId: string;
+  title: string;
+  body: string[];
+  confirmLabel: string;
+  cancelLabel?: string;
+  tone: "default" | "danger";
+  onConfirm: () => void | Promise<void>;
+  pending: boolean;
+  error: string | null;
+  successBehavior?: "close" | "back" | "stay";
+}
+
+export interface CommandBarWorkflowRoute extends CommandBarRouteBase {
+  kind: "workflow";
+  workflowId: string;
+  title: string;
+  subtitle?: string;
+  description?: string[];
+  fields: CommandBarWorkflowField[];
+  values: Record<string, CommandBarFieldValue>;
+  activeFieldId: string | null;
+  submitLabel: string;
+  cancelLabel?: string;
+  pendingLabel?: string;
+  successLabel?: string;
+  pending: boolean;
+  error: string | null;
+  successBehavior?: "close" | "back";
+  payload: {
+    kind: "builtin" | "plugin-command" | "pane-template" | "pane-setting";
+    actionId: string;
+  };
+  payloadMeta?: Record<string, unknown>;
+}
+
+export interface CommandBarPaneSettingsRoute extends CommandBarRouteBase {
+  kind: "pane-settings";
+  paneId: string;
+  query: string;
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  error: string | null;
+  pendingFieldKey: string | null;
+}
+
+export type CommandBarRoute =
+  | CommandBarModeRoute
+  | CommandBarPickerRoute
+  | CommandBarConfirmRoute
+  | CommandBarWorkflowRoute
+  | CommandBarPaneSettingsRoute;

package/src/components/detail-feed-view.test.tsx

@@ -0,0 +1,105 @@
+import { afterEach, describe, expect, test } from "bun:test";
+import { testRender } from "@opentui/react/test-utils";
+import { DetailFeedView } from "./detail-feed-view";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+afterEach(() => {
+  if (testSetup) {
+    testSetup.renderer.destroy();
+    testSetup = undefined;
+  }
+});
+
+const items = [
+  {
+    id: "1",
+    eyebrow: "Reuters",
+    title: "Long headline with enough words to prove the list wraps instead of collapsing into fixed columns",
+    timestamp: new Date("2024-08-01T12:00:00Z"),
+    preview: "Preview text with a little more color.",
+    detailTitle: "Long headline with enough words to prove the list wraps",
+    detailMeta: ["Reuters", "Published Aug 1, 2024"],
+    detailBody: "This body should stay readable when the pane is narrow and also when the pane is wide enough for a split layout.",
+    detailNote: "https://example.com/story",
+  },
+  {
+    id: "2",
+    eyebrow: "SEC",
+    title: "10-Q filing",
+    timestamp: new Date("2024-08-02T12:00:00Z"),
+    preview: "Quarterly report",
+    detailTitle: "10-Q filing",
+    detailMeta: ["Filed Aug 2, 2024"],
+    detailBody: "Quarterly report details.",
+  },
+];
+
+describe("DetailFeedView", () => {
+  test("renders readable stacked content in narrow panes", async () => {
+    testSetup = await testRender(
+      <DetailFeedView
+        width={60}
+        height={16}
+        items={items}
+        selectedIdx={0}
+        hoveredIdx={null}
+        onSelect={() => {}}
+        onHover={() => {}}
+      />,
+      { width: 60, height: 16 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = testSetup.captureCharFrame();
+
+    expect(frame).toContain("Long headline with enough words");
+    expect(frame).toContain("This body should stay readable");
+    expect(frame).toContain("Published Aug 1, 2024");
+  });
+
+  test("renders split list and detail content in wide panes", async () => {
+    testSetup = await testRender(
+      <DetailFeedView
+        width={110}
+        height={16}
+        items={items}
+        selectedIdx={0}
+        hoveredIdx={1}
+        onSelect={() => {}}
+        onHover={() => {}}
+      />,
+      { width: 110, height: 16 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = testSetup.captureCharFrame();
+
+    expect(frame).toContain("Reuters");
+    expect(frame).toContain("10-Q filing");
+    expect(frame).toContain("j/k navigate");
+  });
+
+  test("renders a single-line list variant", async () => {
+    testSetup = await testRender(
+      <DetailFeedView
+        width={110}
+        height={12}
+        items={items}
+        selectedIdx={0}
+        hoveredIdx={null}
+        onSelect={() => {}}
+        onHover={() => {}}
+        listVariant="single-line"
+        splitListWidthRatio={0.33}
+      />,
+      { width: 110, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+    const frame = testSetup.captureCharFrame();
+
+    expect(frame).toContain("Long headline with enough words");
+    expect(frame).not.toContain("Preview text with a little more color.");
+  });
+});

package/src/components/detail-feed-view.tsx

@@ -0,0 +1,295 @@
+import { TextAttributes } from "@opentui/core";
+import { colors, hoverBg } from "../theme/colors";
+import { formatTimeAgo } from "../utils/format";
+import { ExternalLink } from "./ui";
+
+export interface DetailFeedItem {
+  id: string;
+  eyebrow?: string;
+  title: string;
+  timestamp?: Date | string | null;
+  preview?: string | null;
+  detailTitle?: string;
+  detailMeta?: string[];
+  detailBody?: string | null;
+  detailNote?: string | null;
+}
+
+interface DetailFeedViewProps {
+  width: number;
+  height: number;
+  items: DetailFeedItem[];
+  selectedIdx: number;
+  hoveredIdx: number | null;
+  onSelect: (index: number) => void;
+  onHover: (index: number) => void;
+  helpText?: string;
+  listVariant?: "comfortable" | "compact" | "single-line";
+  splitListWidthRatio?: number;
+}
+
+function truncateWithEllipsis(text: string, width: number): string {
+  if (width <= 0) return "";
+  if (text.length <= width) return text;
+  if (width <= 3) return text.slice(0, width);
+  return `${text.slice(0, width - 3)}...`;
+}
+
+function wrapTextLines(text: string, width: number, maxLines = Number.MAX_SAFE_INTEGER): string[] {
+  if (width <= 0) return [];
+
+  const paragraphs = text
+    .split(/\r?\n/)
+    .map((paragraph) => paragraph.replace(/\s+/g, " ").trim());
+  const lines: string[] = [];
+
+  const pushLine = (line: string) => {
+    if (lines.length >= maxLines) return;
+    lines.push(line);
+  };
+
+  for (let paragraphIndex = 0; paragraphIndex < paragraphs.length; paragraphIndex += 1) {
+    const paragraph = paragraphs[paragraphIndex]!;
+    if (!paragraph) {
+      pushLine("");
+      continue;
+    }
+
+    let current = "";
+    for (const rawWord of paragraph.split(" ")) {
+      let word = rawWord;
+      while (word.length > width) {
+        const available = current ? width - current.length - 1 : width;
+        if (available <= 0) {
+          pushLine(current);
+          current = "";
+          continue;
+        }
+        if (word.length <= available) break;
+        const piece = word.slice(0, available);
+        word = word.slice(available);
+        pushLine(current ? `${current} ${piece}` : piece);
+        current = "";
+      }
+
+      if (!current) {
+        current = word;
+        continue;
+      }
+
+      if ((current.length + 1 + word.length) <= width) {
+        current = `${current} ${word}`;
+      } else {
+        pushLine(current);
+        current = word;
+      }
+    }
+
+    if (current) pushLine(current);
+    if (paragraphIndex < (paragraphs.length - 1)) pushLine("");
+    if (lines.length >= maxLines) break;
+  }
+
+  if (lines.length > maxLines) {
+    lines.length = maxLines;
+  }
+  if (lines.length === maxLines && paragraphs.join(" ").length > lines.join(" ").length) {
+    lines[maxLines - 1] = truncateWithEllipsis(lines[maxLines - 1] ?? "", width);
+  }
+
+  return lines;
+}
+
+function contentWidth(value: number): number {
+  return Math.max(value - 2, 12);
+}
+
+function lineOrBlank(lines: string[], index: number): string {
+  return lines[index] ?? "";
+}
+
+export function DetailFeedView({
+  width,
+  height,
+  items,
+  selectedIdx,
+  hoveredIdx,
+  onSelect,
+  onHover,
+  helpText = "j/k navigate",
+  listVariant = "comfortable",
+  splitListWidthRatio = 0.38,
+}: DetailFeedViewProps) {
+  const selected = items[Math.max(0, Math.min(selectedIdx, items.length - 1))];
+  const split = width >= 92 && height >= 14;
+  const footerHeight = helpText ? 1 : 0;
+  const availableHeight = Math.max(height - footerHeight, 6);
+  const compactList = listVariant === "compact";
+  const singleLineList = listVariant === "single-line";
+  const listWidth = split ? Math.max(28, Math.min(Math.floor(width * splitListWidthRatio), 44)) : Math.max(width - 2, 20);
+  const detailWidth = split ? Math.max(width - listWidth - 4, 28) : Math.max(width - 2, 20);
+  const listHeight = split ? availableHeight : Math.max(5, Math.floor((availableHeight - 1) * 0.45));
+  const detailHeight = split ? availableHeight : Math.max(3, availableHeight - listHeight - 1);
+  const listTextWidth = contentWidth(listWidth);
+  const detailTextWidth = contentWidth(detailWidth);
+  const showPreviewLine = !singleLineList && listTextWidth >= (compactList ? 18 : 28);
+  const cardHeight = compactList
+    ? (showPreviewLine ? 2 : 1)
+    : singleLineList
+      ? 1
+    : (showPreviewLine ? 4 : 3);
+
+  return (
+    <box flexDirection="column" flexGrow={1} paddingX={1}>
+      <box flexDirection={split ? "row" : "column"} gap={1}>
+        <box width={split ? listWidth : undefined}>
+          <scrollbox height={listHeight} scrollY>
+            <box flexDirection="column">
+              {items.map((item, index) => {
+                const isSelected = index === selectedIdx;
+                const isHovered = index === hoveredIdx && !isSelected;
+                const titleLines = wrapTextLines(item.title, listTextWidth, compactList ? 1 : 2);
+                const previewLine = item.preview ? truncateWithEllipsis(item.preview, listTextWidth) : "";
+                const timestampText = item.timestamp ? formatTimeAgo(item.timestamp) : "";
+                const inlineEyebrow = item.eyebrow ? `${item.eyebrow} | ` : "";
+                const compactTitleWidth = Math.max(listTextWidth - (timestampText ? timestampText.length + 1 : 0), 8);
+                const compactTitle = truncateWithEllipsis(`${inlineEyebrow}${item.title}`, compactTitleWidth);
+                const singleLineTitle = truncateWithEllipsis(item.title, compactTitleWidth);
+                return (
+                  <box
+                    key={item.id}
+                    flexDirection="column"
+                    height={cardHeight}
+                    paddingX={1}
+                    backgroundColor={isSelected ? colors.selected : isHovered ? hoverBg() : colors.bg}
+                    onMouseMove={() => onHover(index)}
+                    onMouseDown={() => onSelect(index)}
+                  >
+                    {singleLineList ? (
+                      <box flexDirection="row" height={1}>
+                        <box flexGrow={1}>
+                          <text
+                            attributes={isSelected ? TextAttributes.BOLD : 0}
+                            fg={isSelected ? colors.selectedText : colors.textBright}
+                          >
+                            {singleLineTitle}
+                          </text>
+                        </box>
+                        {timestampText && (
+                          <text fg={colors.textDim}>{timestampText}</text>
+                        )}
+                      </box>
+                    ) : compactList ? (
+                      <>
+                        <box flexDirection="row" height={1}>
+                          <box flexGrow={1}>
+                            <text
+                              attributes={isSelected ? TextAttributes.BOLD : 0}
+                              fg={isSelected ? colors.selectedText : colors.textBright}
+                            >
+                              {compactTitle}
+                            </text>
+                          </box>
+                          {timestampText && (
+                            <text fg={colors.textDim}>{timestampText}</text>
+                          )}
+                        </box>
+                        {showPreviewLine && (
+                          <box height={1}>
+                            <text fg={colors.textMuted}>
+                              {previewLine || truncateWithEllipsis(item.eyebrow ?? "", listTextWidth)}
+                            </text>
+                          </box>
+                        )}
+                      </>
+                    ) : (
+                      <>
+                        <box flexDirection="row" height={1}>
+                          <box flexGrow={1}>
+                            <text fg={colors.textMuted}>{truncateWithEllipsis(item.eyebrow ?? "", listTextWidth)}</text>
+                          </box>
+                          {timestampText && (
+                            <text fg={colors.textDim}>{timestampText}</text>
+                          )}
+                        </box>
+                        <box height={1}>
+                          <text
+                            attributes={isSelected ? TextAttributes.BOLD : 0}
+                            fg={isSelected ? colors.selectedText : colors.textBright}
+                          >
+                            {lineOrBlank(titleLines, 0)}
+                          </text>
+                        </box>
+                        <box height={1}>
+                          <text fg={isSelected ? colors.selectedText : colors.text}>
+                            {lineOrBlank(titleLines, 1)}
+                          </text>
+                        </box>
+                        {showPreviewLine && (
+                          <box height={1}>
+                            <text fg={colors.textMuted}>{previewLine}</text>
+                          </box>
+                        )}
+                      </>
+                    )}
+                  </box>
+                );
+              })}
+            </box>
+          </scrollbox>
+        </box>
+
+        <box width={split ? detailWidth : undefined} flexGrow={1}>
+          <scrollbox height={detailHeight} scrollY>
+            {selected ? (
+              <box flexDirection="column">
+                {wrapTextLines(selected.detailTitle ?? selected.title, detailTextWidth, 4).map((line, index) => (
+                  <box key={`title-${index}`} height={1}>
+                    <text attributes={TextAttributes.BOLD} fg={colors.textBright}>{line}</text>
+                  </box>
+                ))}
+
+                {(selected.detailMeta ?? []).flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2)).map((line, index) => (
+                  <box key={`meta-${index}`} height={1}>
+                    <text fg={colors.textMuted}>{line}</text>
+                  </box>
+                ))}
+
+                <box height={1} />
+
+                {wrapTextLines(selected.detailBody ?? "", detailTextWidth).map((line, index) => (
+                  <box key={`body-${index}`} height={1}>
+                    <text fg={colors.text}>{line}</text>
+                  </box>
+                ))}
+
+                {selected.detailNote && (
+                  <>
+                    <box height={1} />
+                    {wrapTextLines(selected.detailNote, detailTextWidth).map((line, index) =>
+                      /^https?:\/\/\S+$/.test(line.trim()) ? (
+                        <ExternalLink key={`note-${index}`} url={line.trim()} />
+                      ) : (
+                        <box key={`note-${index}`} height={1}>
+                          <text fg={colors.textDim}>{line}</text>
+                        </box>
+                      )
+                    )}
+                  </>
+                )}
+              </box>
+            ) : (
+              <text fg={colors.textDim}>Nothing selected.</text>
+            )}
+          </scrollbox>
+        </box>
+      </box>
+
+      {helpText && (
+        <box height={1}>
+          <text fg={colors.textMuted}>{helpText}</text>
+        </box>
+      )}
+    </box>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,32 @@
+// Reusable components for plugins
+export { PriceSelectorDialog } from "./price-selector-dialog";
+export type { PriceSelectorDialogProps } from "./price-selector-dialog";
+export { StockChart } from "./chart/stock-chart";
+export type { ChartViewState, TimeRange, ChartRenderMode, ChartColors } from "./chart/chart-types";
+export * from "./ui";
+export { ToggleList } from "./toggle-list";
+export type { ToggleListItem, ToggleListProps } from "./toggle-list";
+export { TabBar } from "./tab-bar";
+export type { Tab, TabBarProps } from "./tab-bar";
+export { Spinner } from "./spinner";
+export type { SpinnerProps } from "./spinner";
+export { TickerListTable } from "./ticker-list-table";
+export type { QuoteFlashDirection, TickerTableCell } from "./ticker-list-table";
+
+// Theme
+export { colors, priceColor, hoverBg } from "../theme/colors";
+
+// Hooks
+export {
+  useAppState,
+  useFocusedTicker,
+  usePaneSettingValue,
+  usePaneTicker,
+  useSelectedTicker,
+} from "../state/app-context";
+
+// Format utilities
+export {
+  formatCurrency, formatCompact, formatPercent, formatPercentRaw,
+  formatNumber, padTo,
+} from "../utils/format";

package/src/components/layout/floating-pane.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from "react";
+import { colors, floatingPaneBg } from "../../theme/colors";
+import { PaneHeader } from "./pane-header";
+
+interface FloatingPaneWrapperProps {
+  title: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  zIndex: number;
+  focused: boolean;
+  showActions?: boolean;
+  onMouseMove?: (event: any) => void;
+  children: ReactNode;
+}
+
+/** Pure visual wrapper — all mouse handling done by Shell at root level */
+export function FloatingPaneWrapper({
+  title, x, y, width, height, zIndex, focused, showActions = false, onMouseMove, children,
+}: FloatingPaneWrapperProps) {
+  const bg = floatingPaneBg(focused);
+
+  return (
+    <box
+      position="absolute"
+      top={y}
+      left={x}
+      width={width}
+      height={height}
+      zIndex={zIndex}
+      backgroundColor={bg}
+      flexDirection="column"
+      onMouseMove={onMouseMove}
+    >
+      <PaneHeader title={title} width={width} focused={focused} floating showActions={showActions} />
+
+      {/* Content */}
+      <box flexGrow={1} overflow="hidden">
+        {children}
+      </box>
+
+      {/* Resize handle at bottom-right corner */}
+      <box position="absolute" bottom={0} right={0} width={2} height={1}>
+        <text fg={colors.textDim} selectable={false}> ◢</text>
+      </box>
+    </box>
+  );
+}