gloomberb 0.5.0 → 0.6.0

package/src/plugins/builtin/news-wire/news-detail-view.tsx

@@ -0,0 +1,256 @@
+import { Box, ScrollBox, Text } from "../../../ui";
+import { TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import { useShortcut } from "../../../react/input";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { MarketNewsItem, NewsStoryItem } from "../../../types/news-source";
+import { colors } from "../../../theme/colors";
+import { TickerBadge } from "../../../components/ticker-badge";
+import { ExternalLink, ExternalLinkText } from "../../../components/ui";
+import { collectNewsDisplayTickers } from "../../../news/ticker-symbols";
+import { useInlineTickers } from "../../../state/use-inline-tickers";
+import { wrapTextLines } from "../../../utils/text-wrap";
+
+export function useNewsArticleDetail(articles: MarketNewsItem[]) {
+  const [detailArticleId, setDetailArticleId] = useState<string | null>(null);
+  const detailArticle = useMemo(
+    () => (
+      detailArticleId
+        ? articles.find((article) => article.id === detailArticleId) ?? null
+        : null
+    ),
+    [articles, detailArticleId],
+  );
+
+  useEffect(() => {
+    if (detailArticleId && !detailArticle) {
+      setDetailArticleId(null);
+    }
+  }, [detailArticle, detailArticleId]);
+
+  const openArticle = useCallback((article: MarketNewsItem) => {
+    setDetailArticleId(article.id);
+  }, []);
+
+  const closeDetail = useCallback(() => {
+    setDetailArticleId(null);
+  }, []);
+
+  return {
+    detailArticle,
+    openArticle,
+    closeDetail,
+  };
+}
+
+export function wrapText(text: string, width: number): string[] {
+  return text ? wrapTextLines(text, width) : [];
+}
+
+function storyItemDate(value: Date | string): Date {
+  const date = value instanceof Date ? value : new Date(String(value));
+  return Number.isNaN(date.getTime()) ? new Date(0) : date;
+}
+
+function formatDetailDate(date: Date): string {
+  const datePart = date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+  const timePart = date.toLocaleTimeString("en-US", {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return `${datePart} at ${timePart}`;
+}
+
+function sortStoryItems(items: readonly NewsStoryItem[] | undefined): NewsStoryItem[] {
+  return [...(items ?? [])].sort((a, b) => (
+    storyItemDate(b.publishedAt).getTime() - storyItemDate(a.publishedAt).getTime()
+  ));
+}
+
+function truncateText(text: string, maxWidth: number): string {
+  if (text.length <= maxWidth) return text;
+  if (maxWidth <= 3) return text.slice(0, Math.max(0, maxWidth));
+  return `${text.slice(0, maxWidth - 3)}...`;
+}
+
+function NewsStoryTimelineItemView({
+  item,
+  index,
+  total,
+  width,
+}: {
+  item: NewsStoryItem;
+  index: number;
+  total: number;
+  width: number;
+}) {
+  const marker = total <= 1 ? "*" : index === 0 || index === total - 1 ? "+" : "|";
+  const time = formatDetailDate(storyItemDate(item.publishedAt));
+  const sourceLabel = truncateText(item.sourceName || item.sourceKey, Math.max(4, width - time.length - 4));
+  const titleLines = wrapText(item.title, Math.max(10, width - 2));
+  const summary = item.summary && item.summary.trim() !== item.title.trim() ? item.summary : "";
+  const summaryLines = summary ? wrapText(summary, Math.max(10, width - 2)) : [];
+
+  return (
+    <Box flexDirection="column" width={width}>
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.textDim}>{marker} </Text>
+        <Text fg={colors.textDim}>{time}</Text>
+        <Text fg={colors.textDim}>  </Text>
+        <ExternalLinkText url={item.url} label={sourceLabel} color={colors.textBright} />
+      </Box>
+      <Box flexDirection="column" paddingLeft={2}>
+        {titleLines.map((line, lineIndex) => (
+          <Box key={`title-${lineIndex}`} height={1}>
+            <Text fg={colors.text}>{line}</Text>
+          </Box>
+        ))}
+        {summaryLines.map((line, lineIndex) => (
+          <Box key={`summary-${lineIndex}`} height={1}>
+            <Text fg={colors.textDim}>{line}</Text>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+}
+
+export function NewsDetailView({ item, focused, width, showTitle = true }: {
+  item: MarketNewsItem;
+  focused: boolean;
+  width: number;
+  showTitle?: boolean;
+}) {
+  const scrollRef = useRef<ScrollBoxRenderable>(null);
+
+  const innerW = Math.max(10, width - 2);
+  const titleLines = wrapText(item.title, innerW);
+  const summaryLines = item.summary ? wrapText(item.summary, innerW) : [];
+  const tickers = useMemo(
+    () => collectNewsDisplayTickers(item.tickers),
+    [item.tickers],
+  );
+  const tickerTexts = useMemo(() => tickers.map((ticker) => `$${ticker}`), [tickers]);
+  const { catalog, openTicker } = useInlineTickers(tickerTexts);
+  const [hoveredTicker, setHoveredTicker] = useState<string | null>(null);
+  const timelineItems = useMemo(() => sortStoryItems(item.items), [item.items]);
+  const lastUpdatedAt = timelineItems[0]?.publishedAt ?? item.publishedAt;
+  const lastUpdatedStr = formatDetailDate(storyItemDate(lastUpdatedAt));
+
+  const scrollBy = useCallback((delta: number) => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox?.viewport) return;
+    const maxScrollTop = Math.max(0, scrollBox.scrollHeight - scrollBox.viewport.height);
+    scrollBox.scrollTop = Math.max(0, Math.min(maxScrollTop, scrollBox.scrollTop + delta));
+  }, []);
+
+  useEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (scrollBox) scrollBox.scrollTop = 0;
+  }, [item.id]);
+
+  useShortcut((event) => {
+    if (!focused) return;
+    if (event.name === "j" || event.name === "down") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      scrollBy(1);
+      return;
+    }
+    if (event.name === "k" || event.name === "up") {
+      event.stopPropagation?.();
+      event.preventDefault?.();
+      scrollBy(-1);
+    }
+  });
+
+  return (
+    <Box flexDirection="column" width={width} flexGrow={1} flexBasis={0} minHeight={0} overflow="hidden">
+      <ScrollBox ref={scrollRef} flexGrow={1} flexBasis={0} minHeight={0} scrollY focusable={false}>
+        <Box flexDirection="column" paddingX={1} paddingY={1} gap={1}>
+          {showTitle && (
+            <Box flexDirection="column">
+              {titleLines.map((line, i) => (
+                <Box key={i} height={1}>
+                  <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{line}</Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+          {/* Last updated */}
+          <Box height={1} flexDirection="row">
+            <Text fg={colors.textDim}>Last updated at {lastUpdatedStr}</Text>
+          </Box>
+          {/* Summary */}
+          {summaryLines.length > 0 && (
+            <Box flexDirection="column">
+              {summaryLines.map((line, i) => (
+                <Box key={i} height={1}>
+                  <Text fg={colors.text}>{line}</Text>
+                </Box>
+              ))}
+            </Box>
+          )}
+          {/* Tickers */}
+          {tickers.length > 0 && (
+            <Box flexDirection="row" flexWrap="wrap" width={innerW}>
+              {tickers.map((ticker) => {
+                const entry = catalog[ticker];
+                if (!entry || entry.status === "missing") {
+                  return (
+                    <Box key={ticker} paddingRight={1}>
+                      <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
+                        {ticker}
+                      </Text>
+                    </Box>
+                  );
+                }
+
+                return (
+                  <TickerBadge
+                    key={ticker}
+                    symbol={ticker}
+                    status={entry.status}
+                    quote={entry.quote}
+                    hovered={hoveredTicker === ticker}
+                    onHoverStart={() => setHoveredTicker(ticker)}
+                    onHoverEnd={() => {
+                      setHoveredTicker((current) => (current === ticker ? null : current));
+                    }}
+                    onOpen={openTicker}
+                  />
+                );
+              })}
+            </Box>
+          )}
+          {/* Categories */}
+          {item.categories.length > 0 && (
+            <Box height={1} flexDirection="row">
+              <Text fg={colors.textMuted}>
+                {item.categories.join(" · ")}
+              </Text>
+            </Box>
+          )}
+          {timelineItems.length > 0 && (
+            <Box flexDirection="column" gap={1} width={innerW}>
+              {timelineItems.map((timelineItem, index) => (
+                <NewsStoryTimelineItemView
+                  key={timelineItem.id}
+                  item={timelineItem}
+                  index={index}
+                  total={timelineItems.length}
+                  width={innerW}
+                />
+              ))}
+            </Box>
+          )}
+          {/* URL */}
+          <ExternalLink url={item.url} color={colors.textDim} />
+        </Box>
+      </ScrollBox>
+    </Box>
+  );
+}

package/src/plugins/builtin/news-wire/news-footer.ts

@@ -0,0 +1,28 @@
+import { useExternalLinkFooter, type PaneFooterSegment } from "../../../components";
+
+export interface NewsFooterArticle {
+  source?: string | null;
+  url?: string | null;
+}
+
+interface UseNewsArticleFooterOptions {
+  registrationId: string;
+  focused: boolean;
+  article: NewsFooterArticle | null | undefined;
+  info?: PaneFooterSegment[];
+}
+
+export function useNewsArticleFooter({
+  registrationId,
+  focused,
+  article,
+  info,
+}: UseNewsArticleFooterOptions) {
+  useExternalLinkFooter({
+    registrationId,
+    focused,
+    url: article?.url,
+    source: article?.source,
+    info,
+  });
+}

package/src/plugins/builtin/news-wire/news-preset-pane.tsx

@@ -0,0 +1,94 @@
+import { Box } from "../../../ui";
+import type { NewsQuery } from "../../../news/types";
+import { useNewsArticles } from "../../../news/hooks";
+import type { PaneProps } from "../../../types/plugin";
+import { useDebouncedPluginPaneState, usePluginPaneState } from "../../plugin-runtime";
+import { Spinner } from "../../../components";
+import { NewsDetailView, useNewsArticleDetail } from "./news-detail-view";
+import {
+  NewsArticleStackView,
+  type NewsColumnId,
+  type NewsSortPreference,
+} from "./news-table";
+import { useNewsArticleFooter } from "./news-footer";
+import { useNewsReadState } from "./read-state";
+import { usePersistedNewsArticles } from "./persisted-articles";
+
+export function NewsPresetPane({
+  focused,
+  width,
+  height,
+  paneKey,
+  title,
+  query,
+  columns,
+  defaultSort,
+  emptyStateTitle,
+  emptyStateHint,
+}: PaneProps & {
+  paneKey: string;
+  title: string;
+  query: NewsQuery;
+  columns: NewsColumnId[];
+  defaultSort: NewsSortPreference;
+  emptyStateTitle: string;
+  emptyStateHint: string;
+}) {
+  const newsState = useNewsArticles(query);
+  const articles = usePersistedNewsArticles(`${paneKey}:articles`, newsState.articles);
+  const loading = newsState.phase === "loading" || (newsState.phase === "refreshing" && articles.length === 0);
+  const [selectedArticleId, setSelectedArticleId] = useDebouncedPluginPaneState<string | null>(
+    `${paneKey}:selectedArticleId`,
+    null,
+  );
+  const [sortPreference, setSortPreference] = usePluginPaneState<NewsSortPreference>(
+    `${paneKey}:sort`,
+    defaultSort,
+  );
+  const { detailArticle, openArticle, closeDetail } = useNewsArticleDetail(articles);
+  const { readArticleIds, markArticleRead } = useNewsReadState();
+
+  useNewsArticleFooter({
+    registrationId: `news-wire:${paneKey}`,
+    focused,
+    article: detailArticle,
+  });
+
+  const detailContent = detailArticle ? (
+    <NewsDetailView
+      item={detailArticle}
+      focused={focused}
+      width={width}
+      showTitle={false}
+    />
+  ) : (
+    <Box flexGrow={1} />
+  );
+
+  if (loading && articles.length === 0) {
+    return <Spinner label={`Loading ${title.toLowerCase()}...`} />;
+  }
+
+  return (
+    <NewsArticleStackView
+      articles={articles}
+      focused={focused}
+      width={width}
+      rootHeight={height}
+      readArticleIds={readArticleIds}
+      selectedArticleId={selectedArticleId}
+      setSelectedArticleId={setSelectedArticleId}
+      sortPreference={sortPreference}
+      setSortPreference={setSortPreference}
+      onOpenArticle={openArticle}
+      onArticleRead={markArticleRead}
+      detailOpen={!!detailArticle}
+      onBack={closeDetail}
+      detailContent={detailContent}
+      detailTitle={detailArticle?.title}
+      columns={columns}
+      emptyStateTitle={emptyStateTitle}
+      emptyStateHint={emptyStateHint}
+    />
+  );
+}

package/src/plugins/builtin/news-wire/news-query-presets.ts

@@ -0,0 +1,40 @@
+import type { NewsQuery } from "../../../news/types";
+
+export const SECTOR_NEWS_SECTORS = [
+  "information_technology",
+  "energy",
+  "financials",
+  "health_care",
+  "industrials",
+  "consumer_discretionary",
+  "consumer_staples",
+  "communication_services",
+  "materials",
+  "utilities",
+] as const;
+
+export type SectorNewsSelection = "all" | typeof SECTOR_NEWS_SECTORS[number];
+
+export const NEWS_QUERY_PRESETS = {
+  top: { feed: "top", limit: 50 } satisfies NewsQuery,
+  feed: { feed: "latest", limit: 200 } satisfies NewsQuery,
+  breaking: { feed: "breaking", breaking: true, limit: 50 } satisfies NewsQuery,
+  sectorAll: { feed: "sector", limit: 100 } satisfies NewsQuery,
+  sector(sector: string): NewsQuery {
+    return { feed: "sector", sectors: [sector], limit: 100 };
+  },
+  ticker(ticker: string, exchange?: string): NewsQuery {
+    return {
+      feed: "ticker",
+      ticker,
+      exchange,
+      tickerTier: "primary",
+      limit: 50,
+    };
+  },
+} as const;
+
+export function sectorNewsLabel(value: SectorNewsSelection): string {
+  if (value === "all") return "all";
+  return value.replace(/_/g, " ");
+}

package/src/plugins/builtin/news-wire/news-table.test.tsx

@@ -0,0 +1,206 @@
+import { TextAttributes } from "@opentui/core";
+import { afterEach, describe, expect, test } from "bun:test";
+import { act } from "react";
+import { Box, Text } from "../../../ui";
+import { testRender } from "../../../renderers/opentui/test-utils";
+import {
+  AppContext,
+  PaneInstanceProvider,
+  createInitialState,
+} from "../../../state/app-context";
+import { createDefaultConfig } from "../../../types/config";
+import type { MarketNewsItem } from "../../../types/news-source";
+import { NewsArticleStackView, type NewsSortPreference } from "./news-table";
+
+let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+
+const sortPreference: NewsSortPreference = {
+  columnId: "time",
+  direction: "desc",
+};
+
+function makeArticle(overrides: Partial<MarketNewsItem> & { id: string; title: string }): MarketNewsItem {
+  return {
+    id: overrides.id,
+    title: overrides.title,
+    url: `https://example.com/${overrides.id}`,
+    source: "Reuters",
+    publishedAt: new Date("2026-04-18T12:00:00Z"),
+    summary: "",
+    topic: "general",
+    topics: [],
+    sectors: [],
+    categories: [],
+    tickers: [],
+    scores: {
+      importance: 0,
+      urgency: 0,
+      marketImpact: 0,
+      novelty: 0,
+      confidence: 0,
+    },
+    isBreaking: false,
+    isDeveloping: false,
+    importance: 0,
+    ...overrides,
+  };
+}
+
+function Harness() {
+  const state = createInitialState(
+    createDefaultConfig("/tmp/gloomberb-news-table-test"),
+  );
+
+  return (
+    <AppContext value={{ state, dispatch: () => {} }}>
+      <PaneInstanceProvider paneId="news-feed:main">
+        <NewsArticleStackView
+          articles={[
+            makeArticle({ id: "unread", title: "Unread story" }),
+            makeArticle({ id: "read", title: "Read story" }),
+          ]}
+          focused
+          width={90}
+          rootHeight={10}
+          readArticleIds={new Set(["read"])}
+          selectedArticleId="unread"
+          setSelectedArticleId={() => {}}
+          sortPreference={sortPreference}
+          setSortPreference={() => {}}
+          onOpenArticle={() => {}}
+          detailOpen={false}
+          onBack={() => {}}
+          detailContent={<Box />}
+          columns={["time", "source", "title"]}
+          emptyStateTitle="No stories"
+        />
+      </PaneInstanceProvider>
+    </AppContext>
+  );
+}
+
+afterEach(async () => {
+  if (testSetup) {
+    await act(async () => {
+      testSetup!.renderer.destroy();
+    });
+    testSetup = undefined;
+  }
+});
+
+describe("NewsArticleStackView", () => {
+  test("renders unopened stories bold and opened stories normal weight", async () => {
+    testSetup = await testRender(<Harness />, { width: 90, height: 10 });
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const boldText = testSetup.captureSpans().lines
+      .flatMap((line) => line.spans)
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+
+    expect(boldText).toContain("Unread story");
+    expect(boldText).not.toContain("Read story");
+  });
+
+  test("keeps root controls visible while rendering custom empty content", async () => {
+    const state = createInitialState(
+      createDefaultConfig("/tmp/gloomberb-news-table-empty-content-test"),
+    );
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="news-feed:main">
+          <NewsArticleStackView
+            articles={[]}
+            focused
+            width={90}
+            rootHeight={10}
+            selectedArticleId={null}
+            setSelectedArticleId={() => {}}
+            sortPreference={sortPreference}
+            setSortPreference={() => {}}
+            onOpenArticle={() => {}}
+            detailOpen={false}
+            onBack={() => {}}
+            detailContent={<Box />}
+            rootBefore={(
+              <Box height={1}>
+                <Text>Sector tabs stay</Text>
+              </Box>
+            )}
+            columns={["time", "source", "title"]}
+            emptyContent={(
+              <Box paddingX={1} paddingY={1}>
+                <Text>Loading sector content</Text>
+              </Box>
+            )}
+            emptyStateTitle="No stories"
+          />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 90, height: 10 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("Sector tabs stay");
+    expect(frame).toContain("Loading sector content");
+    expect(frame).not.toContain("No stories");
+  });
+
+  test("dedupes exchange-qualified ticker aliases in table cells", async () => {
+    const state = createInitialState(
+      createDefaultConfig("/tmp/gloomberb-news-table-ticker-dedupe-test"),
+    );
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <PaneInstanceProvider paneId="news-feed:main">
+          <NewsArticleStackView
+            articles={[
+              makeArticle({
+                id: "media",
+                title: "Media merger story",
+                tickers: ["NFLX", "NFLX:XNAS", "PARA", "PARA:XNAS"],
+              }),
+            ]}
+            focused
+            width={90}
+            rootHeight={10}
+            selectedArticleId="media"
+            setSelectedArticleId={() => {}}
+            sortPreference={sortPreference}
+            setSortPreference={() => {}}
+            onOpenArticle={() => {}}
+            detailOpen={false}
+            onBack={() => {}}
+            detailContent={<Box />}
+            columns={["time", "source", "title", "tickers"]}
+            emptyStateTitle="No stories"
+          />
+        </PaneInstanceProvider>
+      </AppContext>,
+      { width: 90, height: 10 },
+    );
+
+    await act(async () => {
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("NFLX");
+    expect(frame).toContain("PARA");
+    expect(frame).not.toContain("NFLX:XNAS");
+    expect(frame).not.toContain("PARA:XNAS");
+  });
+});