gloomberb 0.13.3 → 0.14.0

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

@@ -1,24 +1,28 @@
 import { useMemo, type RefObject } from "react";
-import { Spinner } from "../../../components";
+import type {
+  CloudEarningsTranscriptPayload,
+  CloudTranscriptKeyFigurePayload,
+  CloudTranscriptTurnPayload,
+} from "../../../api-client";
+import { PaneStatusBody, Prose, SectionHeading } from "../../../components";
 import { Tabs } from "../../../components/ui/tabs";
 import { colors } from "../../../theme/colors";
 import {
   Box,
   ScrollBox,
-  StyledText,
   Text,
   TextAttributes,
   useUiCapabilities,
   type ScrollBoxRenderable,
 } from "../../../ui";
-import { wrapTextLines } from "../../../utils/text-wrap";
-import type {
-  CloudEarningsTranscriptPayload,
-  CloudTranscriptTurnPayload,
-} from "../../../api-client";
-import { formatCallDate, formatDuration, formatSentiment, formatTimestamp } from "./format";
-import { splitFigures, splitSentences } from "./prose";
-import { filterTranscriptTurns } from "./model";
+import {
+  formatCallDate,
+  formatDuration,
+  formatSentiment,
+  formatTimestamp,
+} from "./format";
+import { buildTranscriptSegments, filterTranscriptTurns } from "./model";
+import { splitParagraphs, splitSentences } from "./prose";
 
 export type ReaderTab = "summary" | "transcript" | "qa";
 
@@ -33,6 +37,7 @@ export const READER_TABS: Array<{ label: string; value: ReaderTab }> = [
  * is over two hundred characters, which the eye loses on the way back.
  */
 const MAX_PROSE_WIDTH = 100;
+const NATIVE_STRETCH_STYLE = { minWidth: 0 };
 
 function speakerColor(turn: CloudTranscriptTurnPayload): string {
   if (turn.speaker === "Operator") return colors.textDim;
@@ -46,100 +51,26 @@ function turnDetail(turn: CloudTranscriptTurnPayload): string {
   return [role, turn.company].filter(Boolean).join(", ");
 }
 
-const NATIVE_STRETCH_STYLE = { minWidth: 0 };
-const NATIVE_TEXT_STYLE = { display: "block" };
-
-/** Figures set in bold, the rest in the given colour. */
-function styledRuns(text: string, color: string, attributes = 0): StyledText {
-  return new StyledText(
-    splitFigures(text).map((run) => ({
-      text: run.text,
-      fg: run.figure ? colors.textBright : color,
-      attributes: run.figure ? attributes | TextAttributes.BOLD : attributes,
-    })),
-  );
-}
-
-/**
- * A paragraph with figures in bold. The terminal renderer does not wrap on
- * its own, so lines are pre-wrapped and styled one at a time; desktop
- * chrome wraps the styled paragraph itself. `indent` is applied to every
- * line after the first, for bullets.
- */
-function Prose({
-  text,
-  width,
-  color,
-  nativePaneChrome,
-  prefix = "",
-}: {
-  text: string;
-  width: number;
-  color: string;
-  nativePaneChrome: boolean;
-  /** Put before the first line; later lines are indented by its width. */
-  prefix?: string;
-}) {
-  if (!text.trim()) return null;
-  if (nativePaneChrome) {
-    return (
-      <Box flexDirection="row" width="100%" style={NATIVE_STRETCH_STYLE}>
-        {prefix ? <Text fg={colors.textDim}>{prefix}</Text> : null}
-        <Text
-          wrapText
-          width="100%"
-          style={NATIVE_TEXT_STYLE}
-          content={styledRuns(text, color)}
-        />
-      </Box>
-    );
-  }
-  const indent = " ".repeat(prefix.length);
-  return wrapTextLines(text, Math.max(8, width - prefix.length)).map((line, index) => (
-    <Box key={index} height={1} flexDirection="row">
-      {prefix ? (
-        <Text fg={colors.textDim} flexShrink={0}>
-          {index === 0 ? prefix : indent}
-        </Text>
-      ) : null}
-      <Text content={styledRuns(line, color)} />
-    </Box>
-  ));
-}
-
-function SectionHeading({ title }: { title: string }) {
-  return (
-    <Box height={1} marginTop={1}>
-      <Text fg={colors.textDim} attributes={TextAttributes.BOLD}>
-        {title}
-      </Text>
-    </Box>
-  );
-}
-
 /** A summary section as one point per sentence. */
 function Section({
   title,
   body,
   width,
-  nativePaneChrome,
 }: {
   title: string;
   body: string;
   width: number;
-  nativePaneChrome: boolean;
 }) {
   if (!body.trim()) return null;
   return (
     <Box flexDirection="column">
-      <SectionHeading title={title} />
+      <SectionHeading marginTop={1} title={title} />
       {splitSentences(body).map((sentence, index) => (
         <Prose
           key={index}
           text={sentence}
           width={width}
           color={colors.text}
-          nativePaneChrome={nativePaneChrome}
           prefix="• "
         />
       ))}
@@ -147,16 +78,60 @@ function Section({
   );
 }
 
+/**
+ * The numbers management gave, one per line with the value first so the
+ * column of figures is what the eye lands on.
+ */
+function KeyFigures({
+  figures,
+  width,
+}: {
+  figures: CloudTranscriptKeyFigurePayload[];
+  width: number;
+}) {
+  if (figures.length === 0) return null;
+  const valueWidth = Math.min(
+    18,
+    Math.max(...figures.map((figure) => figure.value.length)),
+  );
+  return (
+    <Box flexDirection="column">
+      <SectionHeading marginTop={1} title="KEY FIGURES" />
+      {figures.map((figure) => {
+        const value =
+          figure.value.length > valueWidth
+            ? figure.value
+            : figure.value.padEnd(valueWidth);
+        const rest = [figure.label, figure.note].filter(Boolean).join(", ");
+        return (
+          <Prose
+            key={`${figure.label}-${figure.value}`}
+            text={rest}
+            width={width}
+            color={colors.textDim}
+            prefix={`${value}  `}
+            prefixColor={colors.textBright}
+          />
+        );
+      })}
+    </Box>
+  );
+}
+
 function TurnView({
   turn,
   width,
-  nativePaneChrome,
 }: {
   turn: CloudTranscriptTurnPayload;
   width: number;
-  nativePaneChrome: boolean;
 }) {
   const detail = turnDetail(turn);
+  // The server cuts paragraphs where the speaker paused on the recording.
+  // A transcript from before that is one block, so it is cut here by length.
+  const paragraphs =
+    turn.paragraphs && turn.paragraphs.length > 0
+      ? turn.paragraphs
+      : splitParagraphs(turn.text);
   return (
     <Box flexDirection="column" marginTop={1}>
       <Box height={1} flexDirection="row" gap={1} overflow="hidden">
@@ -169,7 +144,15 @@ function TurnView({
         </Text>
         {detail ? <Text fg={colors.textDim}>{detail}</Text> : null}
       </Box>
-      <Prose text={turn.text} width={width} color={colors.text} nativePaneChrome={nativePaneChrome} />
+      {paragraphs.map((paragraph, index) => (
+        <Box key={index} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
+          <Prose
+            text={paragraph}
+            width={width}
+            color={colors.text}
+          />
+        </Box>
+      ))}
     </Box>
   );
 }
@@ -201,27 +184,28 @@ export function TranscriptView({
   const { nativePaneChrome } = useUiCapabilities();
   const isNative = nativePaneChrome === true;
 
-  const turns = useMemo(() => filterTranscriptTurns(
-    transcript?.turns ?? [],
-    {
-      section: tab === "qa" ? "qa" : "transcript",
-      search: query,
-    },
+  const turns = useMemo(
+    () =>
+      filterTranscriptTurns(transcript?.turns ?? [], {
+        section: tab === "qa" ? "qa" : "transcript",
+        search: query,
+      }),
+    [transcript, tab, query],
+  );
+  const fullTextSegments = useMemo(() => (
+    transcript && tab === "transcript" && !transcript.turns?.length
+      ? buildTranscriptSegments(transcript, "transcript", { search: query }) : []
   ), [transcript, tab, query]);
 
   if (loading && !transcript) {
     return (
-      <Box flexGrow={1} alignItems="center" justifyContent="center">
-        <Spinner label="Loading transcript..." />
-      </Box>
+      <PaneStatusBody loading align="center" loadingLabel="Loading transcript..." />
     );
   }
 
   if (error && !transcript) {
     return (
-      <Box flexGrow={1} paddingX={1}>
-        <Text fg={colors.negative}>{error}</Text>
-      </Box>
+      <PaneStatusBody error={error} />
     );
   }
 
@@ -231,8 +215,12 @@ 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,
+    transcript.participants.length > 0
+      ? `${transcript.participants.length} speakers`
+      : null,
+    transcript.sentiment !== null
+      ? `sentiment ${formatSentiment(transcript.sentiment)}`
+      : null,
   ]
     .filter(Boolean)
     .join("  ·  ");
@@ -280,24 +268,55 @@ export function TranscriptView({
         <Box flexDirection="column" width={contentWidth} style={contentStyle}>
           {tab === "summary" ? (
             <>
-              <Prose text={meta} width={proseWidth} color={colors.textDim} nativePaneChrome={isNative} />
-              <Section title="SUMMARY" body={transcript.summary ?? ""} width={proseWidth} nativePaneChrome={isNative} />
-              <Section title="WHAT STOOD OUT" body={transcript.notable ?? ""} width={proseWidth} nativePaneChrome={isNative} />
-              <Section title="ANALYSTS PRESSED ON" body={transcript.analystFocus ?? ""} width={proseWidth} nativePaneChrome={isNative} />
-              <Section title="GUIDANCE" body={transcript.guidance ?? ""} width={proseWidth} nativePaneChrome={isNative} />
-              <Section title="RISKS" body={transcript.riskFactors ?? ""} width={proseWidth} nativePaneChrome={isNative} />
+              <Prose
+                text={meta}
+                width={proseWidth}
+                color={colors.textDim}
+              />
+              <KeyFigures
+                figures={transcript.keyFigures ?? []}
+                width={proseWidth}
+              />
+              <Section
+                title="SUMMARY"
+                body={transcript.summary ?? ""}
+                width={proseWidth}
+              />
+              <Section
+                title="WHAT STOOD OUT"
+                body={transcript.notable ?? ""}
+                width={proseWidth}
+              />
+              <Section
+                title="ANALYSTS PRESSED ON"
+                body={transcript.analystFocus ?? ""}
+                width={proseWidth}
+              />
+              <Section
+                title="GUIDANCE"
+                body={transcript.guidance ?? ""}
+                width={proseWidth}
+              />
+              <Section
+                title="RISKS"
+                body={transcript.riskFactors ?? ""}
+                width={proseWidth}
+              />
               {transcript.participants.length > 0 && (
                 <Box flexDirection="column">
-                  <SectionHeading title="PARTICIPANTS" />
+                  <SectionHeading marginTop={1} title="PARTICIPANTS" />
                   {transcript.participants.map((participant) => (
                     <Prose
                       key={participant.name}
-                      text={[participant.name, participant.role, participant.company]
+                      text={[
+                        participant.name,
+                        participant.role,
+                        participant.company,
+                      ]
                         .filter(Boolean)
                         .join("  ·  ")}
                       width={proseWidth}
                       color={colors.text}
-                      nativePaneChrome={isNative}
                     />
                   ))}
                 </Box>
@@ -310,20 +329,24 @@ export function TranscriptView({
                   key={`${turn.startSeconds ?? "doc"}-${index}`}
                   turn={turn}
                   width={proseWidth}
-                  nativePaneChrome={isNative}
                 />
               ))}
-              {turns.length === 0 && (
+              {fullTextSegments.map((segment) => (
+                <Box key={segment.index} marginTop={1}>
+                  <Prose text={segment.text} width={proseWidth} color={colors.text} />
+                </Box>
+              ))}
+              {turns.length === 0 && fullTextSegments.length === 0 && (
                 <Box marginTop={1}>
                   <Prose
                     text={
                       query?.trim()
                         ? `Nothing matching "${query.trim()}" in this call.`
-                        : "No question and answer section in this call."
+                        : tab === "qa" ? "No question and answer section in this call."
+                          : "Transcript text is unavailable."
                     }
                     width={proseWidth}
                     color={colors.textDim}
-                    nativePaneChrome={isNative}
                   />
                 </Box>
               )}

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

@@ -1,6 +1,6 @@
+import { createPluginCache } from "../../../data/plugin-cache";
 import type { DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
-import type { PluginPersistence } from "../../../types/plugin";
 import { fetchEconCalendar } from "./calendar-source";
 import type { EconEvent, EconImpact } from "./types";
 
@@ -43,17 +43,12 @@ export type EconCalendarColumn = DataTableColumn & { id: EconCalendarColumnId };
 type PersistedEconEvent = Omit<EconEvent, "date"> & { date: string };
 export type EconCalendarCacheEntry = { data: EconEvent[]; fetchedAt: number; stale: boolean };
 
-let econCalendarPersistence: PluginPersistence | null = null;
-let activeFetch: Promise<EconCalendarLoadResult> | null = null;
-
-export function attachEconCalendarPersistence(persistence: PluginPersistence): void {
-  econCalendarPersistence = persistence;
-}
-
-export function resetEconCalendarPersistence(): void {
-  econCalendarPersistence = null;
-  activeFetch = null;
-}
+const cache = createPluginCache<EconEvent[], PersistedEconEvent[]>({
+  kind: CACHE_KIND, source: CACHE_SOURCE, schemaVersion: CACHE_SCHEMA_VERSION, policy: CACHE_POLICY,
+  encode: serializeEvents, decode: deserializeEvents,
+});
+export const attachEconCalendarPersistence = cache.attach;
+export const resetEconCalendarPersistence = cache.reset;
 
 /** Words rather than dots: a three-wide column has no room for a legend. */
 export function impactIndicator(impact: EconImpact): { text: string; color: string } {
@@ -140,65 +135,19 @@ function deserializeEvents(events: PersistedEconEvent[]): EconEvent[] {
     .filter((event) => !Number.isNaN(event.date.getTime()));
 }
 
-function readPersistedCache(options?: { allowExpired?: boolean }): EconCalendarCacheEntry | null {
-  const record = econCalendarPersistence?.getResource<PersistedEconEvent[]>(CACHE_KIND, CACHE_KEY, {
-    sourceKey: CACHE_SOURCE,
-    schemaVersion: CACHE_SCHEMA_VERSION,
-    allowExpired: options?.allowExpired,
-  });
-  if (!record) return null;
-
-  const data = deserializeEvents(record.value);
-  return {
-    data,
-    fetchedAt: record.fetchedAt,
-    stale: !!record.stale,
-  };
-}
-
-function writeCache(events: EconEvent[]): void {
-  econCalendarPersistence?.setResource(CACHE_KIND, CACHE_KEY, serializeEvents(events), {
-    sourceKey: CACHE_SOURCE,
-    schemaVersion: CACHE_SCHEMA_VERSION,
-    cachePolicy: CACHE_POLICY,
-  });
-}
-
 export function getCalendarCache(options?: { allowExpired?: boolean }): EconCalendarCacheEntry | null {
-  return readPersistedCache(options);
+  return cache.get(CACHE_KEY, options);
 }
 
 export interface EconCalendarLoadResult extends EconCalendarCacheEntry {
-  /** Set when the network failed and cached events were served instead. */
   refreshError?: string;
 }
 
-export async function loadCalendar(
+export function loadCalendar(
   force = false,
   loader: () => Promise<EconEvent[]> = fetchEconCalendar,
 ): Promise<EconCalendarLoadResult> {
-  const cached = getCalendarCache();
-  if (!force && cached && !cached.stale) return cached;
-  if (activeFetch) return activeFetch;
-
-  const fallback = cached ?? getCalendarCache({ allowExpired: true });
-  activeFetch = loader().then((data) => {
-    writeCache(data);
-    activeFetch = null;
-    return { data, fetchedAt: Date.now(), stale: false };
-  }).catch((err: unknown) => {
-    activeFetch = null;
-    // A failed refresh must not pass old events off as a fresh load.
-    if (fallback) {
-      return {
-        ...fallback,
-        stale: true,
-        refreshError: err instanceof Error ? err.message : String(err),
-      };
-    }
-    throw err;
-  });
-  return activeFetch;
+  return cache.load(CACHE_KEY, loader, { force });
 }
 
 function parseNumeric(value: string | null): number | null {

package/src/plugins/builtin/econ/detail-view.tsx

@@ -1,20 +1,21 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, ScrollBox, Text, TextAttributes, type ScrollBoxRenderable } from "../../../ui";
-import { StaticChartSurface } from "../../../components";
-import { resolveChartPalette } from "../../../components/chart/core/palette";
+import { apiClient } from "../../../api-client";
+import { Divider, Notice, PaneStatusBody, SectionHeading, StaticChartSurface } from "../../../components";
 import type { ProjectedChartPoint } from "../../../components/chart/core/data";
-import { colors } from "../../../theme/colors";
-import { apiClient, type CloudFredObservationPayload } from "../../../api-client";
-import { isPlainKey } from "../../../utils/keyboard";
-import { useShortcut } from "../../../react/input";
-import { usePluginTickerActions } from "../../runtime";
-import { resolveFredMapping } from "./fred-series-map";
+import { resolveChartPalette } from "../../../components/chart/core/palette";
+import { Button } from "../../../components/ui/button";
 import {
   getCachedFredSeries,
   loadCachedFredSeries,
   type FredSeriesData,
   type FredSeriesRequest,
 } from "../../../data/fred-series";
+import { useShortcut } from "../../../react/input";
+import { colors } from "../../../theme/colors";
+import { Box, ScrollBox, Text, TextAttributes, type ScrollBoxRenderable } from "../../../ui";
+import { isPlainKey } from "../../../utils/keyboard";
+import { usePluginTickerActions } from "../../runtime";
+import { resolveFredMapping, projectFredHistory, fredHistoryUnits } from "./fred-series-map";
 import type { EconEvent } from "./types";
 
 interface EconDetailViewProps {
@@ -124,51 +125,21 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
     }
   });
 
-  if (!mapping) {
+  if (!mapping || loading || error) {
     return (
       <Box flexDirection="column" width={width} height={height}>
         <Box height={1} paddingX={1} flexDirection="row">
-          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-            {event.event}
-          </Text>
-        </Box>
-        <Box flexGrow={1} justifyContent="center" alignItems="center">
-          <Text fg={colors.textMuted}>No historical data available for this indicator</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (loading) {
-    return (
-      <Box flexDirection="column" width={width} height={height}>
-        <Box height={1} paddingX={1} flexDirection="row">
-          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-            {event.event}
-          </Text>
+          <SectionHeading title={event.event} />
           <Box flexGrow={1} />
-          <Text fg={colors.textDim}>{mapping.seriesId}</Text>
-        </Box>
-        <Box flexGrow={1} justifyContent="center" alignItems="center">
-          <Text fg={colors.textMuted}>Loading...</Text>
-        </Box>
-      </Box>
-    );
-  }
-
-  if (error) {
-    return (
-      <Box flexDirection="column" width={width} height={height}>
-        <Box height={1} paddingX={1} flexDirection="row">
-          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>
-            {event.event}
-          </Text>
-          <Box flexGrow={1} />
-          <Text fg={colors.textDim}>{mapping.seriesId}</Text>
-        </Box>
-        <Box flexGrow={1} justifyContent="center" alignItems="center">
-          <Text fg={colors.negative}>{error}</Text>
+          {mapping && <Text fg={colors.textDim}>{mapping.seriesId}</Text>}
         </Box>
+        <PaneStatusBody
+          loading={!!mapping && loading}
+          error={mapping && !loading ? error : null}
+          empty={!mapping}
+          emptyTitle="No historical data available for this indicator"
+          align="center"
+        />
       </Box>
     );
   }
@@ -178,8 +149,9 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
   const { observations, info } = data;
   const chartWidth = Math.max(10, width - 2);
   const chartHeight = Math.min(18, Math.max(9, Math.floor(height * 0.38)));
-  const chartPoints: ProjectedChartPoint[] = observations
-    .filter((obs): obs is CloudFredObservationPayload & { value: number } => obs.value != null)
+  const projected = projectFredHistory(observations, mapping);
+  const units = fredHistoryUnits(mapping, info?.units ?? "");
+  const chartPoints: ProjectedChartPoint[] = projected
     .map((obs) => ({
       date: new Date(obs.date),
       open: obs.value,
@@ -190,21 +162,12 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
     }));
 
   const palette = resolveChartPalette(colors, "positive");
-  const descObs = [...observations].reverse();
-  const ascObs = observations;
-  const tableRows = descObs.slice(0, 12).map((obs) => {
-    if (mapping.displayMode !== "change" || obs.value == null) {
-      return { date: obs.date, display: obs.value != null ? obs.value.toLocaleString("en-US", { maximumFractionDigits: 1 }) : "—" };
-    }
-    const ascIdx = ascObs.findIndex((o) => o.date === obs.date);
-    if (ascIdx > 0 && ascObs[ascIdx - 1]!.value != null) {
-      const prior = ascObs[ascIdx - 1]!.value!;
-      const pct = ((obs.value - prior) / Math.abs(prior)) * 100;
-      return { date: obs.date, display: `${pct >= 0 ? "+" : ""}${pct.toFixed(1)}%` };
-    }
-    return { date: obs.date, display: obs.value.toLocaleString("en-US", { maximumFractionDigits: 1 }) };
-  });
-  const units = info?.units ?? "";
+  const tableRows = [...projected].reverse().slice(0, 12).map((obs) => ({
+    date: obs.date,
+    display: units.toLowerCase().includes("percent")
+      ? `${obs.value.toFixed(2)}%`
+      : obs.value.toLocaleString("en-US", { maximumFractionDigits: 1 }),
+  }));
   const title = info?.title ?? event.event;
   const valueColor = (display: string): string => {
     if (display.startsWith("+")) return colors.positive;
@@ -213,7 +176,6 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
   };
   const dateColWidth = 14;
   const valueColWidth = Math.max(14, Math.floor((width - 4) * 0.3));
-  const separatorLine = "─".repeat(Math.max(0, width - 2));
 
   return (
     <Box flexDirection="column" width={width} height={height}>
@@ -231,7 +193,7 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
         {freshnessWarning ? (
           <>
             <Box flexGrow={1} />
-            <Text fg={colors.warning}>{freshnessWarning}</Text>
+            <Notice>{freshnessWarning}</Notice>
           </>
         ) : null}
       </Box>
@@ -277,15 +239,15 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
           )}
 
           <Box paddingX={1} height={1} marginTop={1}>
-            <Text fg={colors.border}>{separatorLine}</Text>
+            <Divider width={Math.max(0, width - 2)} />
           </Box>
 
           <Box paddingX={1} height={1}>
-            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>HISTORICAL READINGS</Text>
+            <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>REVISED HISTORY · REFERENCE PERIODS</Text>
           </Box>
           <Box paddingX={1} flexDirection="row" height={1}>
             <Box width={dateColWidth}>
-              <Text fg={colors.textDim}>DATE</Text>
+              <Text fg={colors.textDim}>PERIOD</Text>
             </Box>
             <Box width={valueColWidth} justifyContent="flex-end">
               <Text fg={colors.textDim}>VALUE</Text>
@@ -304,7 +266,7 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
 
           {mapping.relatedTickers.length > 0 ? (
             <Box paddingX={1} height={1} marginTop={1}>
-              <Text fg={colors.border}>{separatorLine}</Text>
+              <Divider width={Math.max(0, width - 2)} />
             </Box>
           ) : null}
 
@@ -312,15 +274,7 @@ export function EconDetailView({ event, width, height, focused }: EconDetailView
             <Box paddingX={1} height={1} flexDirection="row">
               <Text fg={colors.textDim}>Related: </Text>
               {mapping.relatedTickers.map((ticker, i) => (
-                <Box
-                  key={ticker}
-                  marginLeft={i > 0 ? 2 : 0}
-                  onMouseDown={() => {
-                    navigateTicker(ticker);
-                  }}
-                >
-                  <Text fg={colors.textBright} attributes={TextAttributes.UNDERLINE}>{ticker}</Text>
-                </Box>
+                <Button stopPropagation key={ticker} label={ticker} variant="ghost" compact onPress={() => navigateTicker(ticker)} />
               ))}
             </Box>
           ) : null}