gloomberb 0.5.1 → 0.6.0

package/src/plugins/builtin/layout-manager.tsx

@@ -2,7 +2,6 @@ import { saveConfig } from "../../data/config-store";
 import { findPaneInstance, type LayoutConfig } from "../../types/config";
 import type { AppNotificationRequest, GloomPlugin, GloomPluginContext } from "../../types/plugin";
 import type { AppAction } from "../../state/app-context";
-import { getSharedRegistry } from "../registry";
 import { notifyGridlockComplete } from "../gridlock-notification";
 import {
   dockPane,
@@ -31,13 +30,11 @@ export function clearLayoutManagerDispatch() {
   getStateRef = null;
 }
 
-function persistLayout(layout: LayoutConfig) {
+function persistLayout(ctx: Pick<GloomPluginContext, "getConfig">, layout: LayoutConfig) {
   if (!dispatchRef) return;
   dispatchRef({ type: "PUSH_LAYOUT_HISTORY" });
   dispatchRef({ type: "UPDATE_LAYOUT", layout });
-  const registry = getSharedRegistry();
-  if (!registry) return;
-  const config = registry.getConfigFn();
+  const config = ctx.getConfig();
   const layouts = config.layouts.map((savedLayout, index) => (
     index === config.activeLayoutIndex ? { ...savedLayout, layout } : savedLayout
   ));
@@ -67,8 +64,6 @@ export const layoutManagerPlugin: GloomPlugin = {
       category: "config",
       execute: async () => {
         if (!getStateRef) return;
-        const registry = getSharedRegistry();
-        if (!registry) return;
 
         const { layout, termWidth, termHeight, focusedPaneId } = getStateRef();
         const focusedPane = getFocusedPane(layout, focusedPaneId);
@@ -77,9 +72,9 @@ export const layoutManagerPlugin: GloomPlugin = {
           return;
         }
 
-        const def = registry.panes.get(focusedPane.paneId);
+        const def = ctx.getPaneDef(focusedPane.paneId);
         const nextLayout = floatPane(layout, focusedPane.instanceId, termWidth, termHeight, def);
-        persistLayout(nextLayout);
+        persistLayout(ctx, nextLayout);
         dispatchRef?.({ type: "FOCUS_PANE", paneId: focusedPane.instanceId });
       },
     });
@@ -92,8 +87,6 @@ export const layoutManagerPlugin: GloomPlugin = {
       category: "config",
       execute: async () => {
         if (!getStateRef) return;
-        const registry = getSharedRegistry();
-        if (!registry) return;
 
         const { layout, focusedPaneId } = getStateRef();
         const focusedPane = getFocusedPane(layout, focusedPaneId);
@@ -103,24 +96,11 @@ export const layoutManagerPlugin: GloomPlugin = {
         }
 
         const nextLayout = dockPane(layout, focusedPane.instanceId);
-        persistLayout(nextLayout);
+        persistLayout(ctx, nextLayout);
         dispatchRef?.({ type: "FOCUS_PANE", paneId: focusedPane.instanceId });
       },
     });
 
-    ctx.registerCommand({
-      id: "add-pane",
-      label: "New Pane",
-      description: "Create a new pane from plugin templates",
-      keywords: ["new", "add", "pane", "panel", "show"],
-      category: "config",
-      hidden: () => true,
-      execute: async () => {
-        ctx.openCommandBar("NP ");
-        notify("Choose a pane template to create", { type: "info" });
-      },
-    });
-
     ctx.registerCommand({
       id: "gridlock-all",
       label: "Gridlock All Windows",
@@ -131,7 +111,7 @@ export const layoutManagerPlugin: GloomPlugin = {
       execute: async () => {
         if (!getStateRef) return;
         const { layout, termWidth, termHeight } = getStateRef();
-        persistLayout(gridlockAllPanes(layout, { x: 0, y: 0, width: termWidth, height: termHeight }));
+        persistLayout(ctx, gridlockAllPanes(layout, { x: 0, y: 0, width: termWidth, height: termHeight }));
         notifyGridlockComplete(ctx.notify, () => {
           dispatchRef?.({ type: "UNDO_LAYOUT" });
         });
@@ -152,7 +132,7 @@ export const layoutManagerPlugin: GloomPlugin = {
           notify("Focus a pane to remove it", { type: "info" });
           return;
         }
-        persistLayout(removePane(layout, focusedPane.instanceId));
+        persistLayout(ctx, removePane(layout, focusedPane.instanceId));
       },
     });
 
@@ -181,9 +161,7 @@ export const layoutManagerPlugin: GloomPlugin = {
       keywords: ["delete", "remove", "layout", "preset"],
       category: "config",
       confirm: () => {
-        const registry = getSharedRegistry();
-        if (!registry) return null;
-        const config = registry.getConfigFn();
+        const config = ctx.getConfig();
         const layout = config.layouts[config.activeLayoutIndex];
         if (!layout) return null;
         return {
@@ -195,9 +173,7 @@ export const layoutManagerPlugin: GloomPlugin = {
         };
       },
       execute: async () => {
-        const registry = getSharedRegistry();
-        if (!registry) return;
-        const config = registry.getConfigFn();
+        const config = ctx.getConfig();
         if (config.layouts.length <= 1) {
           notify("Can't delete the only layout", { type: "error" });
           return;
@@ -222,9 +198,7 @@ export const layoutManagerPlugin: GloomPlugin = {
           notify("Name is required", { type: "error" });
           return;
         }
-        const registry = getSharedRegistry();
-        if (!registry) return;
-        dispatchRef?.({ type: "RENAME_LAYOUT", index: registry.getConfigFn().activeLayoutIndex, name });
+        dispatchRef?.({ type: "RENAME_LAYOUT", index: ctx.getConfig().activeLayoutIndex, name });
         notify(`Layout renamed to "${name}"`, { type: "success" });
       },
     });
@@ -236,9 +210,7 @@ export const layoutManagerPlugin: GloomPlugin = {
       keywords: ["duplicate", "copy", "clone", "layout"],
       category: "config",
       execute: async () => {
-        const registry = getSharedRegistry();
-        if (!registry) return;
-        dispatchRef?.({ type: "DUPLICATE_LAYOUT", index: registry.getConfigFn().activeLayoutIndex });
+        dispatchRef?.({ type: "DUPLICATE_LAYOUT", index: ctx.getConfig().activeLayoutIndex });
         notify("Layout duplicated", { type: "success" });
       },
     });
@@ -265,7 +237,7 @@ export const layoutManagerPlugin: GloomPlugin = {
 
         const others = dockedPaneIds.filter((instanceId) => instanceId !== focusedPane.instanceId);
         if (others.length === 1) {
-          persistLayout(swapPanes(layout, focusedPane.instanceId, others[0]!));
+          persistLayout(ctx, swapPanes(layout, focusedPane.instanceId, others[0]!));
           return;
         }
 

package/src/plugins/builtin/market-movers/index.tsx

@@ -1,12 +1,11 @@
+import { Box } from "../../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core";
-import { useKeyboard } from "@opentui/react";
-import { DataTable, type DataTableCell, type DataTableColumn } from "../../../components";
+import { TextAttributes } from "../../../ui";
+import { DataTableView, Tabs, usePaneFooter, type DataTableCell, type DataTableColumn, type DataTableKeyEvent } from "../../../components";
 import type { GloomPlugin, PaneProps } from "../../../types/plugin";
-import { colors, priceColor, blendHex } from "../../../theme/colors";
+import { colors, priceColor } from "../../../theme/colors";
 import { formatCurrency, formatCompact, formatPercentRaw } from "../../../utils/format";
-import { usePluginTickerActions } from "../../plugin-runtime";
-import { getSharedDataProvider } from "../../registry";
+import { useAssetData, usePluginTickerActions } from "../../plugin-runtime";
 import {
   fetchScreener,
   fetchTrending,
@@ -193,19 +192,17 @@ const INDEX_SHORT: Record<string, string> = {
 };
 
 export function MarketMoversPane({ focused, width, height }: PaneProps) {
+  const dataProvider = useAssetData();
   const { pinTicker } = usePluginTickerActions();
   const [activeTab, setActiveTab] = useState<TabId>("gainers");
   const [quotes, setQuotes] = useState<ScreenerQuote[]>([]);
   const [loading, setLoading] = useState(false);
   const [selectedSymbol, setSelectedSymbol] = useState<string | null>(null);
-  const [hoveredIdx, setHoveredIdx] = useState<number | null>(null);
   const [sortPreference, setSortPreference] = useState<MarketMoverSortPreference>(DEFAULT_SORT_PREFERENCE);
   const [summaryQuotes, setSummaryQuotes] = useState<MarketSummaryQuote[]>([]);
 
   const cacheRef = useRef<Map<TabId, TabCache>>(new Map());
   const fetchGenRef = useRef(0);
-  const scrollRef = useRef<ScrollBoxRenderable>(null);
-  const headerScrollRef = useRef<ScrollBoxRenderable>(null);
 
   const columns = useMemo(() => buildColumns(width), [width]);
   const rankedRows = useMemo(() => createRows(quotes), [quotes]);
@@ -215,30 +212,6 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
     : -1;
   const activeIdx = selectedIdx >= 0 ? selectedIdx : (rows.length > 0 ? 0 : -1);
 
-  const syncHeaderScroll = useCallback(() => {
-    const bodyScrollBox = scrollRef.current;
-    const headerScrollBox = headerScrollRef.current;
-    if (bodyScrollBox && headerScrollBox && headerScrollBox.scrollLeft !== bodyScrollBox.scrollLeft) {
-      headerScrollBox.scrollLeft = bodyScrollBox.scrollLeft;
-    }
-  }, []);
-
-  const handleBodyScrollActivity = useCallback(() => {
-    syncHeaderScroll();
-  }, [syncHeaderScroll]);
-
-  const resetTableScroll = useCallback(() => {
-    const bodyScrollBox = scrollRef.current;
-    if (bodyScrollBox) {
-      bodyScrollBox.scrollTop = 0;
-      bodyScrollBox.scrollLeft = 0;
-    }
-    const headerScrollBox = headerScrollRef.current;
-    if (headerScrollBox) {
-      headerScrollBox.scrollLeft = 0;
-    }
-  }, []);
-
   useEffect(() => {
     if (selectedSymbol && selectedIdx >= 0) return;
     const firstRow = rows[0];
@@ -249,16 +222,15 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
     }
   }, [rows, selectedIdx, selectedSymbol]);
 
-  // Fetch market summary via the provider router
+  // Fetch market summary via the asset-data client.
   useEffect(() => {
-    const provider = getSharedDataProvider();
-    if (!provider) return;
+    if (!dataProvider) return;
     const loadSummary = async () => {
       const results: MarketSummaryQuote[] = [];
       await Promise.allSettled(
         MARKET_SUMMARY_SYMBOLS.map(async (symbol) => {
           try {
-            const q = await provider.getQuote(symbol, "");
+            const q = await dataProvider.getQuote(symbol, "");
             if (q) {
               results.push({
                 symbol,
@@ -281,14 +253,13 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
     loadSummary();
     const interval = setInterval(loadSummary, 60_000);
     return () => clearInterval(interval);
-  }, []);
+  }, [dataProvider]);
 
-  const loadTab = async (tab: TabId) => {
+  const loadTab = useCallback(async (tab: TabId) => {
     const cached = cacheRef.current.get(tab);
     if (cached && Date.now() - cached.fetchedAt < CACHE_TTL_MS) {
       setQuotes(cached.data);
       setSelectedSymbol(null);
-      resetTableScroll();
       return;
     }
 
@@ -303,14 +274,13 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
         const trending = await fetchTrending(25);
         if (fetchGenRef.current !== gen) return;
 
-        const provider = getSharedDataProvider();
         const resolved: ScreenerQuote[] = [];
 
-        if (provider) {
+        if (dataProvider) {
           await Promise.allSettled(
             trending.slice(0, 25).map(async ({ symbol }) => {
               try {
-                const q = await provider.getQuote(symbol, "");
+                const q = await dataProvider.getQuote(symbol, "");
                 if (fetchGenRef.current !== gen) return;
                 if (q) {
                   resolved.push({
@@ -348,78 +318,50 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
       cacheRef.current.set(tab, { data, fetchedAt: Date.now() });
       setQuotes(data);
       setSelectedSymbol(null);
-      resetTableScroll();
     } catch { /* leave existing data */ }
     finally {
       if (fetchGenRef.current === gen) setLoading(false);
     }
-  };
+  }, [dataProvider]);
 
-  useEffect(() => { loadTab(activeTab); }, [activeTab]);
+  useEffect(() => { loadTab(activeTab); }, [activeTab, loadTab]);
 
   const openSymbol = useCallback((symbol: string) => {
     pinTicker(symbol, { floating: true, paneType: "ticker-detail" });
   }, [pinTicker]);
 
-  const openSelected = useCallback((idx: number) => {
-    const row = rows[idx];
-    if (!row) return;
-    openSymbol(row.symbol);
-  }, [openSymbol, rows]);
-
   const handleHeaderClick = useCallback((columnId: string) => {
     setSortPreference((current) => nextSortPreference(current, columnId));
   }, []);
 
-  useKeyboard((event) => {
-    if (!focused) return;
-
+  const handleTableKeyDown = useCallback((event: DataTableKeyEvent) => {
     const key = event.name;
-    const isEnter = key === "enter" || key === "return";
 
     if (key === "tab" || key === "right" || key === "l") {
       event.preventDefault?.();
+      event.stopPropagation?.();
       const currentTabIdx = TABS.findIndex((t) => t.id === activeTab);
       setActiveTab(TABS[(currentTabIdx + 1) % TABS.length]!.id);
       setSelectedSymbol(null);
-      resetTableScroll();
-    } else if (key === "left" || key === "h") {
+      return true;
+    }
+    if (key === "left" || key === "h") {
       event.preventDefault?.();
+      event.stopPropagation?.();
       const currentTabIdx = TABS.findIndex((t) => t.id === activeTab);
       setActiveTab(TABS[(currentTabIdx - 1 + TABS.length) % TABS.length]!.id);
       setSelectedSymbol(null);
-      resetTableScroll();
-    } else if (key === "j" || key === "down") {
-      event.preventDefault?.();
-      if (rows.length === 0) return;
-      const nextIdx = activeIdx >= 0 ? Math.min(activeIdx + 1, rows.length - 1) : 0;
-      setSelectedSymbol(rows[nextIdx]!.symbol);
-    } else if (key === "k" || key === "up") {
-      event.preventDefault?.();
-      if (rows.length === 0) return;
-      const nextIdx = activeIdx > 0 ? activeIdx - 1 : 0;
-      setSelectedSymbol(rows[nextIdx]!.symbol);
-    } else if (isEnter) {
-      event.preventDefault?.();
-      openSelected(activeIdx);
-    } else if (key === "r") {
+      return true;
+    }
+    if (key === "r") {
       event.preventDefault?.();
+      event.stopPropagation?.();
       cacheRef.current.delete(activeTab);
       loadTab(activeTab);
+      return true;
     }
-  });
-
-  // Scroll to keep selected row visible
-  useEffect(() => {
-    const sb = scrollRef.current;
-    if (!sb?.viewport || rows.length === 0 || activeIdx < 0) return;
-    const viewportHeight = Math.max(sb.viewport.height, 1);
-    if (activeIdx < sb.scrollTop) {
-      sb.scrollTo(activeIdx);
-    } else if (activeIdx >= sb.scrollTop + viewportHeight) {
-      sb.scrollTo(activeIdx - viewportHeight + 1);
-    }
-  }, [activeIdx, rows.length]);
+    return false;
+  }, [activeTab, loadTab]);
 
   const renderCell = useCallback((
     row: MarketMoverRow,
@@ -467,69 +409,53 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
     }
   }, []);
 
-  const summaryBg = blendHex(colors.bg, colors.border, 0.2);
+  const refreshActiveTab = useCallback(() => {
+    cacheRef.current.delete(activeTab);
+    void loadTab(activeTab);
+  }, [activeTab, loadTab]);
 
-  return (
-    <box flexDirection="column" width={width} height={height}>
-      {/* Market Summary Bar */}
-      {summaryQuotes.length > 0 ? (
-        <box flexDirection="row" height={1} backgroundColor={summaryBg} paddingX={1} gap={2}>
-          {summaryQuotes.map((idx) => {
-            const short = INDEX_SHORT[idx.symbol] ?? idx.symbol;
-            const chgColor = priceColor(idx.changePercent);
-            return (
-              <box key={idx.symbol} flexDirection="row" gap={1}>
-                <text fg={colors.textBright} attributes={TextAttributes.BOLD}>{short}</text>
-                <text fg={colors.text}>{formatCurrency(idx.price, "USD")}</text>
-                <text fg={chgColor}>{formatPercentRaw(idx.changePercent)}</text>
-              </box>
-            );
-          })}
-          {loading && <text fg={colors.textMuted}> loading…</text>}
-        </box>
-      ) : null}
-
-      {/* Tab bar */}
-      <box flexDirection="row" height={1} paddingX={1}>
-        {TABS.map((tab) => {
-          const isActive = tab.id === activeTab;
-          return (
-            <box
-              key={tab.id}
-              paddingX={1}
-              marginRight={1}
-              onMouseDown={(event: any) => {
-                event.preventDefault?.();
-                setActiveTab(tab.id);
-                setSelectedSymbol(null);
-                resetTableScroll();
-              }}
-            >
-              <text
-                fg={isActive ? colors.textBright : colors.textDim}
-                attributes={isActive ? TextAttributes.BOLD | TextAttributes.UNDERLINE : TextAttributes.NONE}
-              >
-                {tab.label}
-              </text>
-            </box>
-          );
-        })}
-        <box flexGrow={1} />
-        <text fg={colors.textMuted}>{quotes.length} stocks</text>
-      </box>
+  usePaneFooter("market-movers", () => ({
+    info: [
+      ...summaryQuotes.map((idx) => {
+        const short = INDEX_SHORT[idx.symbol] ?? idx.symbol;
+        return {
+          id: `summary:${idx.symbol}`,
+          parts: [
+            { text: short, tone: "label" as const },
+            { text: formatPercentRaw(idx.changePercent), tone: "value" as const, color: priceColor(idx.changePercent), bold: true },
+          ],
+        };
+      }),
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+    ],
+    hints: [{ id: "refresh", key: "r", label: "efresh", onPress: refreshActiveTab }],
+  }), [loading, refreshActiveTab, summaryQuotes]);
 
-      <DataTable<MarketMoverRow, MarketMoverColumn>
+  return (
+    <Box flexDirection="column" width={width} height={height}>
+      <Box height={1} paddingX={1}>
+        <Tabs
+          tabs={TABS.map((tab) => ({ label: tab.label, value: tab.id }))}
+          activeValue={activeTab}
+          onSelect={(value) => {
+            setActiveTab(value as TabId);
+            setSelectedSymbol(null);
+          }}
+          compact
+          variant="bare"
+        />
+      </Box>
+
+      <DataTableView<MarketMoverRow, MarketMoverColumn>
+        focused={focused}
+        selectedIndex={activeIdx}
+        onRootKeyDown={handleTableKeyDown}
+        resetScrollKey={activeTab}
         columns={columns}
         items={rows}
         sortColumnId={sortPreference.columnId}
         sortDirection={sortPreference.direction}
         onHeaderClick={handleHeaderClick}
-        headerScrollRef={headerScrollRef}
-        scrollRef={scrollRef}
-        syncHeaderScroll={syncHeaderScroll}
-        onBodyScrollActivity={handleBodyScrollActivity}
-        hoveredIdx={hoveredIdx}
-        setHoveredIdx={setHoveredIdx}
         getItemKey={(row) => `${row.symbol}-${row.rank}`}
         isSelected={(row) => row.symbol === selectedSymbol}
         onSelect={(row) => setSelectedSymbol(row.symbol)}
@@ -537,7 +463,7 @@ export function MarketMoversPane({ focused, width, height }: PaneProps) {
         renderCell={renderCell}
         emptyStateTitle={loading ? "Loading movers..." : "No data"}
       />
-    </box>
+    </Box>
   );
 }
 
@@ -567,7 +493,7 @@ export const marketMoversPlugin: GloomPlugin = {
       label: "Market Movers",
       description: "Top gainers, losers, most active, and trending tickers.",
       keywords: ["movers", "gainers", "losers", "active", "trending", "screener", "top"],
-      shortcut: { prefix: "TOP" },
+      shortcut: { prefix: "MOST" },
     },
   ],
 };

package/src/plugins/builtin/market-movers/screener.test.ts

@@ -82,18 +82,6 @@ describe("parseScreenerResponse", () => {
     expect(msft.volumeRatio).toBeCloseTo(0.72, 1);
   });
 
-  test("returns [] for missing finance.result", () => {
-    expect(parseScreenerResponse({})).toEqual([]);
-    expect(parseScreenerResponse(null)).toEqual([]);
-    expect(parseScreenerResponse({ finance: {} })).toEqual([]);
-    expect(parseScreenerResponse({ finance: { result: [] } })).toEqual([]);
-  });
-
-  test("returns [] for non-array quotes", () => {
-    expect(parseScreenerResponse({ finance: { result: [{ quotes: null }] } })).toEqual([]);
-    expect(parseScreenerResponse({ finance: { result: [{}] } })).toEqual([]);
-  });
-
   test("skips entries without a string symbol", () => {
     const data = {
       finance: {
@@ -124,12 +112,6 @@ describe("parseTrendingResponse", () => {
     expect(results[1]!.symbol).toBe("TSLA");
   });
 
-  test("returns [] for malformed input", () => {
-    expect(parseTrendingResponse({})).toEqual([]);
-    expect(parseTrendingResponse(null)).toEqual([]);
-    expect(parseTrendingResponse({ finance: { result: [{ quotes: "bad" }] } })).toEqual([]);
-  });
-
   test("skips entries without a string symbol", () => {
     const data = {
       finance: {

package/src/plugins/builtin/news-wire/breaking-notifications.test.ts

@@ -0,0 +1,98 @@
+import { describe, expect, test } from "bun:test";
+import type { AppNotificationRequest, GloomPluginContext } from "../../../types/plugin";
+import type { MarketNewsItem, NewsQueryState } from "../../../types/news-source";
+import {
+  BREAKING_NEWS_NOTIFICATIONS_ENABLED_KEY,
+  setupBreakingNewsNotifications,
+} from "./breaking-notifications";
+
+function article(id: string, title = id): MarketNewsItem {
+  return {
+    id,
+    title,
+    url: `https://example.com/${id}`,
+    source: "Test Wire",
+    publishedAt: new Date(),
+    topic: "general",
+    topics: ["general"],
+    sectors: [],
+    categories: ["general"],
+    tickers: ["AAPL"],
+    scores: {
+      importance: 90,
+      urgency: 90,
+      marketImpact: 80,
+      novelty: 80,
+      confidence: 90,
+    },
+    importance: 90,
+    isBreaking: true,
+    isDeveloping: false,
+  };
+}
+
+function ready(articles: MarketNewsItem[]): NewsQueryState {
+  return {
+    phase: "ready",
+    articles,
+    error: null,
+    updatedAt: Date.now(),
+    sourceIds: ["test"],
+  };
+}
+
+describe("breaking news notifications", () => {
+  test("primes on the first ready batch and notifies for later unseen articles", () => {
+    let enabled = true;
+    let listener: ((state: NewsQueryState) => void) | null = null;
+    const notifications: AppNotificationRequest[] = [];
+    const shownPanes: string[] = [];
+
+    const ctx = {
+      configState: {
+        get: (key: string) => key === BREAKING_NEWS_NOTIFICATIONS_ENABLED_KEY ? enabled : null,
+      },
+      watchNewsQuery: (_query: unknown, nextListener: (state: NewsQueryState) => void) => {
+        listener = nextListener;
+        return () => {
+          listener = null;
+        };
+      },
+      on: (_event: string, _handler: unknown) => () => {},
+      notify: (notification: AppNotificationRequest) => {
+        notifications.push(notification);
+      },
+      showPane: (paneId: string) => {
+        shownPanes.push(paneId);
+      },
+      log: {
+        warn: () => {},
+      },
+    } as unknown as GloomPluginContext;
+
+    const dispose = setupBreakingNewsNotifications(ctx);
+    const oldArticle = article("old", "Old headline");
+    const newArticle = article("new", "New headline");
+
+    listener?.(ready([oldArticle]));
+    listener?.(ready([newArticle, oldArticle]));
+
+    expect(notifications).toHaveLength(1);
+    expect(notifications[0]).toMatchObject({
+      title: "Breaking News",
+      body: "New headline",
+      desktop: "always",
+      persistent: true,
+    });
+
+    notifications[0]!.action?.onClick();
+    expect(shownPanes).toEqual(["news-breaking"]);
+
+    enabled = false;
+    listener?.(ready([article("newer", "Newer headline"), newArticle, oldArticle]));
+    expect(notifications).toHaveLength(1);
+
+    dispose();
+    expect(listener).toBeNull();
+  });
+});