gloomberb 0.14.0 → 0.15.0

package/src/plugins/builtin/earnings-calls/pane.test.tsx

@@ -2,7 +2,7 @@ import { afterEach, expect, spyOn, test } from "bun:test";
 import { act, useState } from "react";
 import { apiClient, setCloudApiFetchTransport, type CloudEarningsCallPayload, type CloudEarningsTranscriptPayload } from "../../../api-client";
 import { PaneFooterBar, PaneFooterProvider } from "../../../components/layout/pane/footer";
-import { createInitialState } from "../../../state/app/context";
+import { appReducer, createInitialState, type AppAction, type AppState } from "../../../state/app/context";
 import { createTestPaneConfig, TestPaneProvider } from "../../../test-support/pane";
 import { createTestPluginRuntime } from "../../../test-support/plugin-runtime";
 import { MemoryPluginPersistence } from "../../../test-support/plugin-persistence";
@@ -16,15 +16,28 @@ let setup: Awaited<ReturnType<typeof testRender>> | undefined;
 let setSymbol: (symbol: string | null) => void;
 const runtime = createTestPluginRuntime();
 const restorers: Array<() => void> = [];
-function Harness({ width = 80, initialSymbol = "FIRST" }: { width?: number; initialSymbol?: string | null }) {
+function Harness({ width = 80, initialSymbol = "FIRST", initialPaneState = {} }: {
+  width?: number;
+  initialSymbol?: string | null;
+  initialPaneState?: AppState["paneState"];
+}) {
   const [symbol, set] = useState<string | null>(initialSymbol);
   setSymbol = set;
+  // The selected call, the reader tab, and whether it is open are pane state,
+  // so the harness needs a reducer.
+  const [paneState, setPaneState] = useState<AppState["paneState"]>(initialPaneState);
   const config = createTestPaneConfig("/tmp/gloom-transcript-pane-test/unused-data", {
     instanceId: "calls:test", paneId: "earnings-calls", binding: symbol ? { kind: "fixed", symbol } : { kind: "none" },
   });
   const state = createInitialState(config);
+  state.paneState = paneState;
   state.focusedPaneId = "calls:test";
-  return <TestPaneProvider state={state} paneId="calls:test" pluginId="research" runtime={runtime}>
+  // Folded onto the latest pane state: opening a call dispatches its selection
+  // and the open flag in the same batch.
+  const dispatch = (action: AppAction) => setPaneState(
+    (current) => appReducer({ ...state, paneState: current }, action).paneState,
+  );
+  return <TestPaneProvider state={state} dispatch={dispatch} paneId="calls:test" pluginId="research" runtime={runtime}>
     <PaneFooterProvider>{footer => <Box width={width} height={21} flexDirection="column">
       <Box width={width} height={20}><EarningsCallsPane focused width={width} height={20} /></Box>
       <PaneFooterBar footer={footer} focused width={width} />
@@ -41,8 +54,14 @@ function signIn() {
 async function frames() {
   for (let i = 0; i < 6; i++) await act(async () => { await Bun.sleep(5); await setup!.renderOnce(); });
 }
-async function mount(width = 80, initialSymbol: string | null = "FIRST") {
-  await act(async () => { setup = await testRender(<Harness width={width} initialSymbol={initialSymbol} />, { width, height: 21 }); });
+/** Renders until `done` holds; a slow runner needs more frames than a fixed count. */
+async function framesUntil(done: () => boolean, limit = 200) {
+  for (let i = 0; i < limit && !done(); i++) await act(async () => { await Bun.sleep(5); await setup!.renderOnce(); });
+}
+async function mount(width = 80, initialSymbol: string | null = "FIRST", initialPaneState?: AppState["paneState"]) {
+  await act(async () => {
+    setup = await testRender(<Harness width={width} initialSymbol={initialSymbol} initialPaneState={initialPaneState} />, { width, height: 21 });
+  });
   await frames();
 }
 async function destroy() {
@@ -114,19 +133,24 @@ test("scrolling to the end of the shelf appends the next page instead of stoppin
     return Response.json({ calls: offset > 0 ? shelf(50, 1) : shelf(0, 50) });
   });
   await mount(80, null);
+  await framesUntil(() => setup!.captureCharFrame().includes("COMPANY 0"));
   expect(offsets).toEqual([null]);
   expect(setup!.captureCharFrame()).toContain("COMPANY 0");
   expect(setup!.captureCharFrame()).not.toContain("COMPANY 50");
 
   await emitKeypress(setup!, Array.from({ length: 50 }, () => ({ name: "j", sequence: "j" })));
+  // A session refresh can repeat the first-page request; only paging requests matter here.
+  const pages = () => offsets.filter((offset) => offset !== null);
+  await framesUntil(() => pages().length > 0);
   await frames();
-  expect(offsets).toEqual([null, "50"]);
+  expect(pages()).toEqual(["50"]);
 
   // The page that arrived is reachable, and a short page ends the paging.
   await emitKeypress(setup!, Array.from({ length: 5 }, () => ({ name: "j", sequence: "j" })));
+  await framesUntil(() => setup!.captureCharFrame().includes("COMPANY 50"));
   await frames();
   expect(setup!.captureCharFrame()).toContain("COMPANY 50");
-  expect(offsets).toEqual([null, "50"]);
+  expect(pages()).toEqual(["50"]);
 });
 
 test("a pending company lookup remains pending after the pane reopens", async () => {
@@ -320,6 +344,22 @@ test("opening another quarter never displays the previous quarter's transcript",
   expect(setup!.captureCharFrame()).not.toContain("Q2 ONLY OLD SUMMARY");
 });
 
+test("a restored call missing from the reloaded shelf closes the reader instead of reopening on a cursor move", async () => {
+  signIn();
+  setCloudApiFetchTransport(async (url) => new URL(String(url)).pathname.includes("-call")
+    ? Response.json(transcript("THIRD"))
+    : Response.json({ calls: [call("OTHER"), { ...call("THIRD"), callAt: "2026-07-01T20:00:00Z" }] }));
+  // Opened from a company lookup last session: the shelf alone does not list it.
+  await mount(80, null, { "calls:test": { pluginState: { research: { detailOpen: true, selectedId: "GONE-call" } } } });
+  expect(setup!.captureCharFrame()).toContain("[/]search");
+  await press("j");
+  await act(async () => { await Bun.sleep(200); });
+  await frames();
+  const frame = setup!.captureCharFrame();
+  expect(frame).toContain("OTHER CORP");
+  expect(frame).not.toContain("THIRD CONTROLLED SUMMARY");
+});
+
 async function findInPane(query: string) {
   await press("/");
   await act(async () => { await setup!.mockInput.typeText(query); });

package/src/plugins/builtin/earnings-calls/pane.tsx

@@ -8,7 +8,7 @@ import {
   Button,
   DataTableStackView,
   EmptyState,
-  InputSearchBar, PaneStatusBody, Spinner,
+  PaneStatusBody, QueryBar, Spinner,
   usePaneFooter,
   useTableLoadMore,
   type DataTableCell,
@@ -28,6 +28,7 @@ import {
 } from "../../../ui";
 import { isPlainKey } from "../../../utils/keyboard";
 import { isPlainArrowUp, stopSearchFocusNavigation } from "../../../utils/search-focus-navigation";
+import { usePluginPaneState } from "../../runtime";
 import { SignInWall } from "../cloud/auth-actions";
 import { useCloudPlanAction, useCloudUpgradeAction } from "../shared/cloud-upgrade";
 import { usePlanAccess } from "../shared/plan-access";
@@ -196,8 +197,8 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
   const [nextOffset, setNextOffset] = useState(0);
   const tableScrollRef = useRef<ScrollBoxRenderable | null>(null);
 
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [detailOpen, setDetailOpen] = useState(false);
+  const [selectedId, setSelectedId] = usePluginPaneState<string | null>("selectedId", null);
+  const [detailOpen, setDetailOpen] = usePluginPaneState<boolean>("detailOpen", false);
   const [transcript, setTranscript] = useState<CloudEarningsTranscriptPayload | null>(null);
   useEffect(() => {
     if (focused && transcript && detailOpen) recordResearchActivity("pro_feature_used", "transcripts");
@@ -207,7 +208,7 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
     message: string;
     status?: number;
   } | null>(null);
-  const [readerTab, setReaderTab] = useState<ReaderTab>("summary");
+  const [readerTab, setReaderTab] = usePluginPaneState<ReaderTab>("readerTab", "summary");
   // A layout or `gloomberb shot CALLS NVDA --quarter latest --reader summary`
   // can land straight on a transcript instead of the shelf. `quarter` takes
   // the same tokens as the headless option; only transcribed calls qualify,
@@ -307,7 +308,12 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
     loadMoreCalls,
   );
 
+  // The call restored with the pane survives the first run; only a later
+  // binding change closes the reader and clears the selection.
+  const firstShelfLoadRef = useRef(true);
   useEffect(() => {
+    const keepRestoredCall = firstShelfLoadRef.current;
+    firstShelfLoadRef.current = false;
     setCalls([]);
     setHasMore(false);
     setLoadingMore(false);
@@ -319,14 +325,16 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
     setListError(null);
     setLookup(null);
     setLookupRefresh(null);
-    setSelectedId(null);
-    setDetailOpen(false);
+    if (!keepRestoredCall) {
+      setSelectedId(null);
+      setDetailOpen(false);
+    }
     setTranscript(null);
     setTranscriptLoading(false);
     setTranscriptError(null);
     setProducing(false);
     setSearchQuery("");
-    setReaderTab("summary");
+    if (!keepRestoredCall) setReaderTab("summary");
     fetchCalls(false);
     return () => { listRequestVersion.current++; };
   }, [fetchCalls]);
@@ -460,6 +468,17 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
   );
   const selectedCallId = selected?.id ?? null;
   const selectedHasTranscript = selected?.hasTranscript ?? false;
+  // The reader shows only a call the pane can find. A restored call that is not
+  // on the reloaded shelf (a lookup result, or one that aged off) closes once
+  // the shelf has loaded, rather than leave the keys pointing at a reader that
+  // is not on screen.
+  const readerOpen = detailOpen && !!selected;
+  useEffect(() => {
+    // A `quarter` setting still waiting to open its call wins over closing.
+    const pendingQuarter = openQuarter.trim();
+    if (pendingQuarter && openedQuarter.current !== pendingQuarter) return;
+    if (detailOpen && !selected && listStatus === "loaded") setDetailOpen(false);
+  }, [detailOpen, listStatus, openQuarter, selected, setDetailOpen]);
   const selectedTranscript = transcript?.id === selectedCallId ? transcript : null;
 
   // Marks a call as transcribed in whichever list holds it, once it is.
@@ -605,15 +624,23 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
       setReaderTab("qa");
     },
     {
-      enabled: focused && detailOpen && !searchFocused,
+      enabled: focused && readerOpen && !searchFocused,
       phase: "before",
       scope: "earnings-calls:reader",
     },
   );
 
+  // Only a loaded transcript has a find field; a wall, an upsell or a first
+  // load has no list or reader for the search keys to reach.
+  const readerSearchable = readerOpen && !!selectedTranscript && !transcriptProRequired;
+  // Mirrors the bodies below: the list renders unless a wall, an upsell, or an
+  // empty shelf's loading, failed or research-tab state takes its place.
+  const listShown = !signInRequired && !verificationRequired && !proRequired
+    && !(calls.length === 0 && (listStatus === "loading" || listStatus === "error" || !!ticker));
+
   const handleDetailKey = useCallback(
     (event: DataTableKeyEvent) => {
-      if (isPlainKey(event, "/")) {
+      if (readerSearchable && isPlainKey(event, "/")) {
         stopSearchFocusNavigation(event);
         focusSearch();
         return true;
@@ -650,7 +677,7 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
       }
       return false;
     },
-    [focusSearch, scrollTranscriptBy, openSource],
+    [focusSearch, readerSearchable, scrollTranscriptBy, openSource],
   );
 
   usePaneFooter(
@@ -695,21 +722,17 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
       if (proRequired || transcriptProRequired) {
         info.push({ id: "pro", parts: [{ text: "pro required", tone: "warning" }] });
       }
-      if (searchQuery.trim()) {
-        info.push({
-          id: "filter",
-          parts: [{ text: `"${searchQuery.trim()}"`, tone: "muted" }],
-        });
-      }
 
-      const hints = detailOpen
-        ? [
-            ...(selected?.webcastUrl
-              ? [{ id: "open", key: "o", label: "pen source", onPress: openSource }]
-              : []),
-            { id: "find", key: "/", label: "find", onPress: focusSearch },
-          ]
-        : [{ id: "search", key: "/", label: "search", onPress: focusSearch }];
+      const hints = !listShown
+        ? []
+        : readerOpen
+          ? [
+              ...(selected?.webcastUrl
+                ? [{ id: "open", key: "o", label: "pen source", onPress: openSource }]
+                : []),
+              ...(readerSearchable ? [{ id: "find", key: "/", label: "find", onPress: focusSearch }] : []),
+            ]
+          : [{ id: "search", key: "/", label: "search", onPress: focusSearch }];
 
       return { info, hints };
     },
@@ -727,8 +750,10 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
       proRequired,
       transcriptProRequired,
       detailOpen,
+      listShown,
+      readerOpen,
+      readerSearchable,
       selected,
-      searchQuery,
       focusSearch,
       openSource,
       fetchCalls,
@@ -746,16 +771,14 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
 
   if (proRequired) {
     return (
-      <Box flexDirection="column" paddingX={1}>
-        <EmptyState
-          title="Earnings call transcripts are part of Gloom Cloud Pro."
-          message="Gloomberb transcribes the calls itself: full transcripts with speaker attribution, analyst Q&A, and extracted guidance, risks and tone."
-          actions={<>
-            <Button label="Upgrade to Pro" onPress={openUpgrade} />
-            <Button label="Manage account" variant="secondary" onPress={openPlan} />
-          </>}
-        />
-      </Box>
+      <EmptyState
+        title="Earnings call transcripts are part of Gloom Cloud Pro."
+        message="Gloomberb transcribes the calls itself: full transcripts with speaker attribution, analyst Q&A, and extracted guidance, risks and tone."
+        actions={<>
+          <Button label="Upgrade to Pro" onPress={openUpgrade} />
+          <Button label="Manage account" variant="secondary" onPress={openPlan} />
+        </>}
+      />
     );
   }
 
@@ -785,16 +808,14 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
   }
 
   const detailContent = transcriptProRequired ? (
-    <Box flexDirection="column" paddingX={1}>
-      <EmptyState
-        title="Earnings call transcripts are part of Gloom Cloud Pro."
-        message="Full transcripts with speaker attribution, analyst Q&A, guidance and risk extraction, transcribed from the call itself."
-        actions={<>
-          <Button label="Upgrade to Pro" onPress={openUpgrade} />
-          <Button label="Manage account" variant="secondary" onPress={openPlan} />
-        </>}
-      />
-    </Box>
+    <EmptyState
+      title="Earnings call transcripts are part of Gloom Cloud Pro."
+      message="Full transcripts with speaker attribution, analyst Q&A, guidance and risk extraction, transcribed from the call itself."
+      actions={<>
+        <Button label="Upgrade to Pro" onPress={openUpgrade} />
+        <Button label="Manage account" variant="secondary" onPress={openPlan} />
+      </>}
+    />
   ) : selected && !selectedTranscript && (producing || (!selected.hasTranscript && !transcriptError)) ? (
     <Box flexDirection="column" flexGrow={1} paddingX={1} gap={1}>
       <Box height={1}>
@@ -808,30 +829,28 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
     </Box>
   ) : (
 
-    // The reader gets its own search bar: a transcript runs to thousands of
+    // The reader gets its own find field: a transcript runs to thousands of
     // words, so finding a topic matters as much as filtering the call list.
     <Box flexDirection="column" flexGrow={1} flexShrink={1} flexBasis={0} minHeight={0} overflow="hidden">
-      <InputSearchBar
-        value={searchQuery}
-        focused={focused && detailOpen}
-        active={searchFocused}
-        width={width}
-        focusToken={searchFocusToken}
-        inputRef={searchInputRef}
-        placeholder="find in transcript"
-        debounceMs={80}
-        onFocus={focusSearch}
-        onBlur={blurSearch}
-        onNavigateDown={blurSearch}
-        onQueryChange={changeTranscriptQuery}
-      />
       <TranscriptView
+        search={{
+          value: searchQuery,
+          onChange: changeTranscriptQuery,
+          placeholder: "find in transcript",
+          focused: focused && readerOpen,
+          active: searchFocused,
+          onActiveChange: (active) => active ? focusSearch() : blurSearch(),
+          focusToken: searchFocusToken,
+          inputRef: searchInputRef,
+          debounceMs: 80,
+          onNavigateDown: blurSearch,
+        }}
         transcript={selectedTranscript}
         loading={transcriptLoading}
         error={transcriptError?.message ?? null}
         tab={readerTab}
         onTabChange={setReaderTab}
-        tabsFocused={focused && detailOpen && !searchFocused}
+        tabsFocused={focused && readerOpen && !searchFocused}
         query={searchQuery}
         width={width}
         scrollRef={transcriptScrollRef}
@@ -842,7 +861,7 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
   return (
     <DataTableStackView<CloudEarningsCallPayload, CallColumn>
       focused={focused && !searchFocused}
-      detailOpen={detailOpen && !!selected}
+      detailOpen={readerOpen}
       onBack={() => {
         setDetailOpen(false);
         setReaderTab("summary");
@@ -852,19 +871,20 @@ export function EarningsCallsPane({ focused, width, height }: EarningsCallsViewP
       detailContent={detailContent}
       detailTitle={selected ? callTitle(selected) : undefined}
       rootBefore={
-        <InputSearchBar
-          value={searchQuery}
-          focused={focused && !detailOpen}
-          active={searchFocused}
+        <QueryBar
           width={width}
-          focusToken={searchFocusToken}
-          inputRef={searchInputRef}
-          placeholder="ticker, company, or period"
-          debounceMs={80}
-          onFocus={focusSearch}
-          onBlur={blurSearch}
-          onNavigateDown={blurSearch}
-          onQueryChange={setSearchQuery}
+          search={{
+            value: searchQuery,
+            onChange: setSearchQuery,
+            placeholder: "ticker, company, or period",
+            focused: focused && !readerOpen,
+            active: searchFocused,
+            onActiveChange: (active) => active ? focusSearch() : blurSearch(),
+            focusToken: searchFocusToken,
+            inputRef: searchInputRef,
+            debounceMs: 80,
+            onNavigateDown: blurSearch,
+          }}
         />
       }
       onRootKeyDown={handleRootKey}

package/src/plugins/builtin/earnings-calls/transcript-view.tsx

@@ -4,8 +4,8 @@ import type {
   CloudTranscriptKeyFigurePayload,
   CloudTranscriptTurnPayload,
 } from "../../../api-client";
-import { PaneStatusBody, Prose, SectionHeading } from "../../../components";
-import { Tabs } from "../../../components/ui/tabs";
+import { PaneStatusBody, Prose, QueryBar, SectionHeading, type QueryBarSearch } from "../../../components";
+import { useShortcut } from "../../../react/input";
 import { colors } from "../../../theme/colors";
 import {
   Box,
@@ -15,6 +15,7 @@ import {
   useUiCapabilities,
   type ScrollBoxRenderable,
 } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
 import {
   formatCallDate,
   formatDuration,
@@ -26,10 +27,11 @@ import { splitParagraphs, splitSentences } from "./prose";
 
 export type ReaderTab = "summary" | "transcript" | "qa";
 
-export const READER_TABS: Array<{ label: string; value: ReaderTab }> = [
-  { label: "Summary", value: "summary" },
-  { label: "Transcript", value: "transcript" },
-  { label: "Q&A", value: "qa" },
+/** `hint` is the key that jumps to the section, shown on its chip. */
+export const READER_TABS: Array<{ label: string; value: ReaderTab; hint: string }> = [
+  { label: "Summary", value: "summary", hint: "s" },
+  { label: "Transcript", value: "transcript", hint: "t" },
+  { label: "Q&A", value: "qa", hint: "q" },
 ];
 
 /**
@@ -165,6 +167,7 @@ export function TranscriptView({
   onTabChange,
   tabsFocused,
   query,
+  search,
   width,
   scrollRef,
 }: {
@@ -177,6 +180,8 @@ export function TranscriptView({
   tabsFocused: boolean;
   /** Free-text filter applied to the turns, for finding a topic in a long call. */
   query?: string;
+  /** The find field, drawn in the reader's bar beside the section switch. */
+  search?: QueryBarSearch;
   width: number;
   /** Lets the owning pane drive keyboard scrolling. */
   scrollRef?: RefObject<ScrollBoxRenderable | null>;
@@ -196,6 +201,30 @@ export function TranscriptView({
     transcript && tab === "transcript" && !transcript.turns?.length
       ? buildTranscriptSegments(transcript, "transcript", { search: query }) : []
   ), [transcript, tab, query]);
+  const hasQa = (transcript?.turns ?? []).some((turn) => turn.isQa);
+  const readerTabs = READER_TABS.map((entry) => ({
+    label: entry.label,
+    value: entry.value,
+    hint: entry.hint,
+    disabled: entry.value === "qa" && !hasQa,
+  }));
+
+  // Scoped: inside a ticker research tab the tab strip also answers h/l and
+  // registered first. A scoped handler runs ahead of unscoped ones in its
+  // phase, so an open call keeps h/l for its sections.
+  useShortcut((event) => {
+    if (!tabsFocused || !transcript) return;
+    const direction = isPlainKey(event, "h", "left") ? -1 : isPlainKey(event, "l", "right") ? 1 : 0;
+    if (!direction) return;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    const enabled = readerTabs.filter((entry) => !entry.disabled);
+    const index = enabled.findIndex((entry) => entry.value === tab);
+    const next = index < 0
+      ? enabled[direction > 0 ? 0 : enabled.length - 1]
+      : enabled[Math.max(0, Math.min(enabled.length - 1, index + direction))];
+    if (next && next.value !== tab) onTabChange(next.value);
+  }, { enabled: tabsFocused && !!transcript, scope: "earnings-calls:reader" });
 
   if (loading && !transcript) {
     return (
@@ -215,9 +244,6 @@ export function TranscriptView({
   const meta = [
     formatCallDate(transcript.callAt),
     formatDuration(transcript.durationSeconds),
-    transcript.participants.length > 0
-      ? `${transcript.participants.length} speakers`
-      : null,
     transcript.sentiment !== null
       ? `sentiment ${formatSentiment(transcript.sentiment)}`
       : null,
@@ -230,7 +256,6 @@ export function TranscriptView({
   const proseWidth = Math.min(bodyWidth, MAX_PROSE_WIDTH);
   const contentWidth = isNative ? "100%" : bodyWidth;
   const contentStyle = isNative ? NATIVE_STRETCH_STYLE : undefined;
-  const hasQa = (transcript.turns ?? []).some((turn) => turn.isQa);
 
   return (
     <Box
@@ -241,20 +266,18 @@ export function TranscriptView({
       minHeight={0}
       overflow="hidden"
     >
-      <Box height={1} flexShrink={0} paddingX={1} overflow="hidden">
-        <Tabs
-          tabs={READER_TABS.map((entry) => ({
-            label: entry.label,
-            value: entry.value,
-            disabled: entry.value === "qa" && !hasQa,
-          }))}
-          activeValue={tab}
-          onSelect={(value) => onTabChange(value as ReaderTab)}
-          compact
-          variant="bare"
-          focused={tabsFocused}
-        />
-      </Box>
+      <QueryBar
+        width={width}
+        search={search}
+        filters={[{
+          id: "section",
+          label: "Show",
+          inline: true,
+          value: tab,
+          options: readerTabs,
+          onChange: (value: string) => onTabChange(value as ReaderTab),
+        }]}
+      />
       <ScrollBox
         ref={scrollRef}
         flexGrow={1}

package/src/plugins/builtin/econ/calendar-model.ts

@@ -66,6 +66,15 @@ export function dateKey(d: Date): string {
   return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 }
 
+/**
+ * Rows are grouped by local day, so the time beside them is local too. The
+ * payload's `time` is the UTC clock time and would put a 23:00 UTC release
+ * under the next local day at "23:00".
+ */
+export function timeLabel(d: Date): string {
+  return `${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+
 export function dayLabel(d: Date, today: Date): string {
   const dk = dateKey(d);
   const todayKey = dateKey(today);