gloomberb 0.17.2 → 0.17.4

package/src/plugins/builtin/chat/message/inline-tokens.tsx

@@ -1,35 +1,67 @@
 import { useMemo, useRef, useState } from "react";
-import { Box, Text, useUiCapabilities, type BoxRenderable } from "../../../../ui";
+import { Box, Span, Text, useUiCapabilities, type BoxRenderable } from "../../../../ui";
 import { TextAttributes } from "../../../../ui";
-import { ExternalLinkText } from "../../../../components/ui";
+import { Divider, ExternalLinkText } from "../../../../components/ui";
 import { InlineTickerBadge } from "../../../../components/ticker/badge";
 import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
 import { blendHex, colors } from "../../../../theme/colors";
 import type { ChatUserSummary } from "../../../../api-client";
-import { tokenizeInlineContent, type InlineContentToken } from "../../../../utils/inline-content-tokenizer";
-import { chatBadgeTextWidth } from "../layout";
+import { parseMarkdownLines, type MarkdownLine } from "../../../../utils/markdown";
+import { chatBadgeTextWidth, type ChatBodyLine } from "../layout";
+import { chatInlineTokens, type ChatInlineToken, type ChatTextStyle } from "../markdown";
 import type { ChatUserAnchor, ChatUserContextMenuEvent } from "./types";
 
+interface ChatUserHandlers {
+  userByUsername?: Map<string, ChatUserSummary>;
+  onUserHover?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
+  onUserHoverEnd?: () => void;
+  onUserActivate?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
+  onUserContextMenu?: (user: ChatUserSummary, event: ChatUserContextMenuEvent, anchor?: ChatUserAnchor) => void;
+}
+
+interface ChatTextProps extends ChatUserHandlers {
+  catalog: Record<string, InlineTickerCatalogEntry>;
+  textColor: string;
+  /** Code, list markers, a quote's bar and a link's host. */
+  mutedColor: string;
+  openTicker: (symbol: string) => void;
+}
+
+/** Desktop and web: a run of text inside a line, which wraps with the line. */
+const INLINE_TEXT_STYLE = { display: "inline", whiteSpace: "pre-wrap", overflowWrap: "anywhere", minWidth: 0 } as const;
+/** Desktop and web: a chip that sits in a line of text, on the line's own row. */
+const INLINE_CHIP_STYLE = { display: "inline-flex", verticalAlign: "top", height: "var(--cell-h)" } as const;
+
+function styleAttributes(style: ChatTextStyle | undefined): number {
+  if (!style) return 0;
+  return (style.bold ? TextAttributes.BOLD : 0)
+    | (style.italic ? TextAttributes.ITALIC : 0)
+    | (style.strike ? TextAttributes.STRIKETHROUGH : 0);
+}
+
+function styleColor(style: ChatTextStyle | undefined, textColor: string, mutedColor: string): string {
+  return style?.code || style?.muted ? mutedColor : textColor;
+}
+
 /** An @mention: a name that opens its user's card, when the chat knows the user. */
 function UserMentionToken({
   value,
   user,
+  inline,
   nativeContextMenu,
   onUserHover,
   onUserHoverEnd,
   onUserActivate,
   onUserContextMenu,
-}: {
+}: Omit<ChatUserHandlers, "userByUsername"> & {
   value: string;
   user: ChatUserSummary | null;
+  inline: boolean;
   nativeContextMenu: boolean;
-  onUserHover?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
-  onUserHoverEnd?: () => void;
-  onUserActivate?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
-  onUserContextMenu?: (user: ChatUserSummary, event: ChatUserContextMenuEvent, anchor?: ChatUserAnchor) => void;
 }) {
   // The card opens beside the mention the pointer is on.
   const tokenRef = useRef<BoxRenderable | null>(null);
+  const pointer = user && onUserActivate ? { cursor: "pointer" } : undefined;
   return (
     <Box
       ref={tokenRef}
@@ -53,7 +85,7 @@ function UserMentionToken({
         "data-gloom-context-menu-surface": "true",
         onContextMenu: (event: ChatUserContextMenuEvent) => onUserContextMenu(user, event, tokenRef.current),
       } : {})}
-      style={user && onUserActivate ? { cursor: "pointer" } : undefined}
+      style={inline ? { ...INLINE_CHIP_STYLE, ...pointer } : pointer}
     >
       <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
         {value}
@@ -62,113 +94,198 @@ function UserMentionToken({
   );
 }
 
-export function ResponsiveTickerBadgeText({
-  text = "",
-  tokens: providedTokens,
-  prewrapped = false,
+/**
+ * The tokens of a message line: styled text, links, @mentions and $TICKER
+ * chips. `inline` draws them for a line of text on the desktop and the web;
+ * otherwise each is a cell of a terminal row.
+ */
+function ChatTokens({
+  tokens,
+  keyPrefix,
+  inline,
+  prewrapped,
   catalog,
   textColor,
+  mutedColor,
   openTicker,
+  hoveredSymbol,
+  setHoveredSymbol,
   userByUsername,
-  onUserHover,
-  onUserHoverEnd,
-  onUserActivate,
-  onUserContextMenu,
-}: {
-  text?: string;
-  tokens?: readonly InlineContentToken[];
-  prewrapped?: boolean;
-  catalog: Record<string, InlineTickerCatalogEntry>;
-  textColor: string;
-  openTicker: (symbol: string) => void;
-  userByUsername?: Map<string, ChatUserSummary>;
-  onUserHover?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
-  onUserHoverEnd?: () => void;
-  onUserActivate?: (user: ChatUserSummary, anchor?: ChatUserAnchor) => void;
-  onUserContextMenu?: (user: ChatUserSummary, event: ChatUserContextMenuEvent, anchor?: ChatUserAnchor) => void;
+  ...userHandlers
+}: ChatTextProps & {
+  tokens: readonly ChatInlineToken[];
+  keyPrefix: string;
+  inline: boolean;
+  /** Terminal rows wrapped ahead of time, whose chips keep the width reserved for them. */
+  prewrapped: boolean;
+  hoveredSymbol: string | null;
+  setHoveredSymbol: (update: (current: string | null) => string | null) => void;
 }) {
   const { nativeContextMenu } = useUiCapabilities();
-  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
-  const tokens = useMemo(() => providedTokens ?? tokenizeInlineContent(text), [providedTokens, text]);
-  const renderTextToken = (value: string, tokenIndex: number) => {
-    if (!value) return null;
-    return (
-      <Text
-        key={`text:${tokenIndex}`}
-        fg={textColor}
-        wrapText={!prewrapped}
-        style={prewrapped
-          ? undefined
-          : {
-            minWidth: 0,
-            whiteSpace: "pre-wrap",
-            overflowWrap: "anywhere",
-          }}
-      >
-        {value}
-      </Text>
-    );
-  };
-  const renderUsernameToken = (username: string, value: string, tokenIndex: number) => (
-    <UserMentionToken
-      key={`mention:${tokenIndex}:${username}`}
-      value={value}
-      user={userByUsername?.get(username.toLowerCase()) ?? null}
-      nativeContextMenu={nativeContextMenu === true}
-      onUserHover={onUserHover}
-      onUserHoverEnd={onUserHoverEnd}
-      onUserActivate={onUserActivate}
-      onUserContextMenu={onUserContextMenu}
-    />
-  );
-
   return (
-    <Box
-      flexDirection="row"
-      flexWrap="wrap"
-      flexGrow={1}
-      style={{ minWidth: 0, width: "100%" }}
-    >
+    <>
       {tokens.map((token, index) => {
+        const key = `${keyPrefix}:${index}`;
         if (token.kind === "text") {
-          return renderTextToken(token.value, index);
+          if (!token.value) return null;
+          const fg = styleColor(token.style, textColor, mutedColor);
+          const attributes = styleAttributes(token.style) || undefined;
+          return inline
+            ? <Span key={key} fg={fg} attributes={attributes} style={INLINE_TEXT_STYLE}>{token.value}</Span>
+            : <Text key={key} fg={fg} attributes={attributes}>{token.value}</Text>;
         }
 
         if (token.kind === "link") {
           return (
             <ExternalLinkText
-              key={`link:${index}`}
+              key={key}
               url={token.url}
               label={token.value}
               color={textColor}
+              attributes={styleAttributes(token.style)}
+              inline={inline}
             />
           );
         }
 
         if (token.kind === "username") {
-          return renderUsernameToken(token.username, token.value, index);
+          return (
+            <UserMentionToken
+              key={key}
+              value={token.value}
+              user={userByUsername?.get(token.username.toLowerCase()) ?? null}
+              inline={inline}
+              nativeContextMenu={nativeContextMenu === true}
+              {...userHandlers}
+            />
+          );
         }
 
         const entry = catalog[token.symbol];
         if (!entry || entry.status === "missing") {
-          return <Text key={`raw:${index}`} fg={textColor}>{token.value}</Text>;
+          const fg = styleColor(token.style, textColor, mutedColor);
+          const attributes = styleAttributes(token.style) || undefined;
+          return inline
+            ? <Span key={key} fg={fg} attributes={attributes} style={INLINE_TEXT_STYLE}>{token.value}</Span>
+            : <Text key={key} fg={fg} attributes={attributes}>{token.value}</Text>;
         }
-        // Pre-wrapped lines reserved this width for the chip; it never outgrows it.
-        const maxTextWidth = prewrapped ? chatBadgeTextWidth(token.symbol, entry) : undefined;
-        return (
+        const badge = (
           <InlineTickerBadge
-            key={`badge:${index}:${token.symbol}`}
+            key={key}
             symbol={token.symbol}
             entry={entry}
-            maxTextWidth={maxTextWidth}
+            // Pre-wrapped lines reserved this width for the chip; it never outgrows it.
+            maxTextWidth={prewrapped ? chatBadgeTextWidth(token.symbol, entry) : undefined}
             hovered={hoveredSymbol === token.symbol}
-            onHoverStart={() => setHoveredSymbol(token.symbol)}
+            onHoverStart={() => setHoveredSymbol(() => token.symbol)}
             onHoverEnd={() => {
               setHoveredSymbol((current) => (current === token.symbol ? null : current));
             }}
             onOpen={openTicker}
           />
         );
+        return inline ? <Box key={key} style={INLINE_CHIP_STYLE}>{badge}</Box> : badge;
+      })}
+    </>
+  );
+}
+
+/** One row of a message in the terminal, wrapped ahead of time (getMessageBodyTokenLines). */
+export function TerminalChatMessageRow({ line, ...props }: ChatTextProps & { line: ChatBodyLine }) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+  return (
+    <Box flexDirection="row" flexWrap="wrap" flexGrow={1} style={{ minWidth: 0, width: "100%" }}>
+      <ChatTokens
+        {...props}
+        tokens={line}
+        keyPrefix="row"
+        inline={false}
+        prewrapped
+        hoveredSymbol={hoveredSymbol}
+        setHoveredSymbol={setHoveredSymbol}
+      />
+    </Box>
+  );
+}
+
+/** A line of text that wraps at the width of its box, a list item's later lines hung under its text. */
+function lineStyle(hang = 0) {
+  return {
+    display: "block",
+    minWidth: 0,
+    whiteSpace: "pre-wrap",
+    overflowWrap: "anywhere",
+    ...(hang > 0 ? { paddingLeft: `${hang}ch`, textIndent: `-${hang}ch` } : {}),
+  } as const;
+}
+
+type DesktopBlock = MarkdownLine | { kind: "code-block"; lines: string[] };
+
+/** A code block's lines as one block, so it selects and copies as one. */
+function desktopBlocks(text: string): DesktopBlock[] {
+  const blocks: DesktopBlock[] = [];
+  for (const line of parseMarkdownLines(text)) {
+    const previous = blocks[blocks.length - 1];
+    if (line.kind === "code" && previous?.kind === "code-block") previous.lines.push(line.text);
+    else blocks.push(line.kind === "code" ? { kind: "code-block", lines: [line.text] } : line);
+  }
+  return blocks;
+}
+
+/**
+ * A message's text on the desktop and the web: its markdown drawn as lines of
+ * running text that the browser wraps at the width of the row, so a resize
+ * reflows it smoothly instead of a cell at a time.
+ */
+export function DesktopChatMessageText({ text, ...props }: ChatTextProps & { text: string }) {
+  const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
+  const blocks = useMemo(() => desktopBlocks(text), [text]);
+  const { textColor, mutedColor } = props;
+  const tokens = (lineText: string, keyPrefix: string, mark?: ChatTextStyle) => (
+    <ChatTokens
+      {...props}
+      tokens={mark ? chatInlineTokens(lineText).map((token) => ({ ...token, style: { ...token.style, ...mark } })) : chatInlineTokens(lineText)}
+      keyPrefix={keyPrefix}
+      inline
+      prewrapped={false}
+      hoveredSymbol={hoveredSymbol}
+      setHoveredSymbol={setHoveredSymbol}
+    />
+  );
+
+  return (
+    <Box flexDirection="column" style={{ minWidth: 0, width: "100%" }}>
+      {blocks.map((block, index) => {
+        const key = `${block.kind}:${index}`;
+        switch (block.kind) {
+          case "blank":
+            return <Text key={key} fg={textColor}>{" "}</Text>;
+          case "code-block":
+            return <Text key={key} fg={mutedColor} style={lineStyle()}>{block.lines.join("\n")}</Text>;
+          case "heading":
+            return <Text key={key} fg={textColor} style={lineStyle()}>{tokens(block.text, key, { bold: true })}</Text>;
+          case "quote":
+            // The bar is the kit's rule, a cell wide as the terminal's.
+            return (
+              <Box key={key} flexDirection="row" style={{ minWidth: 0 }}>
+                <Divider orientation="vertical" />
+                <Box paddingLeft={1} flexGrow={1} style={{ minWidth: 0 }}>
+                  <Text fg={textColor} style={lineStyle()}>{tokens(block.text, key)}</Text>
+                </Box>
+              </Box>
+            );
+          case "list": {
+            const marker = `${" ".repeat(block.indent)}${/^\d/.test(block.marker) ? block.marker : "\u2022"} `;
+            return (
+              <Text key={key} fg={textColor} style={lineStyle(marker.length)}>
+                <Span fg={mutedColor} style={INLINE_TEXT_STYLE}>{marker}</Span>
+                {tokens(block.text, key)}
+              </Text>
+            );
+          }
+          case "text":
+            return <Text key={key} fg={textColor} style={lineStyle()}>{tokens(block.text, key)}</Text>;
+        }
       })}
     </Box>
   );

package/src/plugins/builtin/chat/message/render-state.ts

@@ -44,6 +44,8 @@ export interface ChatMessageRenderState {
   authorColor: string;
   authorAttributes: number;
   bodyColor: string;
+  /** Code, list markers and a quote's bar in the body. */
+  bodyMutedColor: string;
 }
 
 export function getChatMessageRenderState({
@@ -117,5 +119,6 @@ export function getChatMessageRenderState({
     authorColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : chatAuthorNameColor(msg.user),
     authorAttributes: (isSending ? TextAttributes.DIM : 0) | TextAttributes.BOLD,
     bodyColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : isSending ? colors.textDim : colors.text,
+    bodyMutedColor: isSelected ? selectedTextColor : hasFailed ? colors.negative : colors.textDim,
   };
 }

package/src/plugins/builtin/chat/message/terminal.tsx

@@ -10,7 +10,7 @@ import { ChatMessageActions, ChatMessageHeader } from "./header";
 import { Button } from "../../../../components/ui";
 import { canReactToMessage } from "../reactions";
 import { TerminalChatReactions } from "./reactions";
-import { ResponsiveTickerBadgeText } from "./inline-tokens";
+import { TerminalChatMessageRow } from "./inline-tokens";
 import { TerminalChatPaneChip } from "./pane-chip";
 import { chatMessagePaneLinks } from "../pane-links/model";
 import { useSlowPendingSend } from "./pending-send";
@@ -149,11 +149,11 @@ export function TerminalChatMessage({
           position={state.grouped ? "relative" : undefined}
         >
           <Box width={messageBodyWidth} height={1}>
-            <ResponsiveTickerBadgeText
-              tokens={line}
-              prewrapped
+            <TerminalChatMessageRow
+              line={line}
               catalog={catalog}
               textColor={state.bodyColor}
+              mutedColor={state.bodyMutedColor}
               openTicker={openTicker}
               userByUsername={userByUsername}
               onUserHover={onUserHover}

package/src/plugins/builtin/cloud/thesis/exposure.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 import { useFxRatesMap } from "../../../../market-data/hooks";
 import { buildPortfolioFinancialsMap } from "../../../../market-data/portfolio-financials";
 import { useAppSelector, usePaneAppConfig } from "../../../../state/app/context";
@@ -84,6 +84,7 @@ export function useBookExposure(collectionId: string | null): BookExposure {
     [baseCurrency, financials, tickers],
   );
   const exchangeRates = useFxRatesMap(trackedCurrencies);
+  const rankedRef = useRef<BookExposure | null>(null);
   return useMemo(() => {
     const priced = scope.kind !== "watchlist";
     const totals = priced
@@ -110,7 +111,20 @@ export function useBookExposure(collectionId: string | null): BookExposure {
         : 0;
       bySymbol.set(symbol, { symbol, value, optionNotional, hasOptions: options });
     }
-    return {
+    const previous = rankedRef.current;
+    const visibleUnchanged = previous != null
+      && previous.scope === scope
+      && previous.baseCurrency === baseCurrency
+      && previous.tickers === tickers
+      && previous.scopes === scopes
+      && previous.bookValue === (totals?.totalMktValue ?? 0)
+      && previous.bySymbol.size === bySymbol.size
+      && [...bySymbol].every(([symbol, exposure]) => {
+        const prior = previous.bySymbol.get(symbol);
+        return prior != null && prior.value === exposure.value && prior.optionNotional === exposure.optionNotional && prior.hasOptions === exposure.hasOptions;
+      });
+    if (visibleUnchanged) return previous;
+    const ranked: BookExposure = {
       scope,
       bySymbol,
       bookValue: totals?.totalMktValue ?? 0,
@@ -122,5 +136,7 @@ export function useBookExposure(collectionId: string | null): BookExposure {
       },
       scopes,
     };
+    rankedRef.current = ranked;
+    return ranked;
   }, [baseCurrency, exchangeRates, financials, portfolioId, scope, scopes, tickers, tickersBySymbol]);
 }

package/src/plugins/builtin/company-attention/headless.ts

@@ -3,7 +3,7 @@ import type { DataTableColumn } from "../../../components";
 import type { AppAttentionPayload, AppChart } from "../../../api-client/app-attention";
 import type { HiringBoard, HiringPayload } from "../../../api-client/hiring";
 import { fetchAppRank, fetchAttention } from "./client";
-import { appsModel, attentionNumber, hiringModel, remoteText, type AttentionKind } from "./model";
+import { appsModel, appsPreviewNote, attentionNumber, hiringModel, hiringPreviewNote, remoteText, type AttentionKind } from "./model";
 
 /**
  * Numbers print as the pane draws them: shares to a tenth, ratings and
@@ -50,11 +50,14 @@ export function attentionHeadless(kind: AttentionKind): HeadlessPaneDefinition<"
       const data = await fetchAttention(kind, args.symbols[0], { limit: Number(args.options.limit) || 100, offset: Number(args.options.offset) || 0, ...(typeof args.options.country === "string" ? { country: args.options.country } : {}), ...(typeof args.options.chart === "string" ? { chart: args.options.chart as AppChart } : {}), days: Number(args.options.days) || 90 }, ctx.apiClient);
       const model = kind === "hiring" ? hiringModel(data as HiringPayload | HiringBoard) : appsModel(data as AppAttentionPayload);
       const offset = Number(args.options.offset) || 0;
-      const nextOffset = kind === "hiring" && "total" in data ? offset + data.companies.length < data.total ? offset + data.companies.length : null : (data as AppAttentionPayload).page?.nextOffset ?? null;
+      // The free preview ignores the offset, so it has no next page to point at.
+      const nextOffset = kind === "hiring" && "total" in data ? !data.preview && offset + data.companies.length < data.total ? offset + data.companies.length : null : (data as AppAttentionPayload).page?.nextOffset ?? null;
+      const lock = kind === "hiring" ? hiringPreviewNote(data as HiringPayload | HiringBoard) : appsPreviewNote(data as AppAttentionPayload);
+      const notes = [...model.notices, ...(nextOffset !== null ? [`Additional observations available with --offset ${nextOffset}.`] : [])];
       return {
-        complete: !model.preview && nextOffset === null,
-        errors: [...model.notices, ...(model.preview ? ["Additional rows and history require Gloom Pro."] : [])],
-        ...(nextOffset !== null ? { notes: [`Additional observations available with --offset ${nextOffset}.`] } : {}),
+        complete: !model.preview && !model.partial && nextOffset === null,
+        ...(lock ? { errors: [lock] } : {}),
+        ...(notes.length ? { notes } : {}),
         sections: Object.entries(model.sections).map(([key, section]) => ({ title: key === "mix" ? kind === "hiring" ? "Role family" : "Countries" : key,
           columns: section.columns.map(reportColumn), empty: section.empty,
           rows: section.rows.map((row) => ({ ...row.values, ...(row.url ? { sourceUrl: row.url } : {}), ...(row.details ? { evidence: row.details } : {}) })) })),

package/src/plugins/builtin/company-attention/model.ts

@@ -4,6 +4,7 @@ import type { HiringBoard, HiringPayload, HiringSummary } from "../../../api-cli
 import type { AppAttentionPayload, AppCompany } from "../../../api-client/app-attention";
 import { humanLabel } from "../shared/research-cells";
 import { formatNumber } from "../../../utils/format";
+import { countOf, freePreviewNote } from "../shared/free-preview";
 
 export type AttentionKind = "hiring" | "apps";
 export type AttentionTab = "table" | "chart" | "mix" | "peers" | "evidence";
@@ -26,7 +27,10 @@ export interface AttentionModel {
   asOf: string | null;
   preview: boolean;
   locked: number;
+  /** Caveats about the capture, such as incomplete coverage; they never fail a report. */
   notices: string[];
+  /** The latest capture is incomplete or stale, so a report of it is not the whole picture even on Pro. */
+  partial: boolean;
   figures: StatItem[];
   sections: Record<AttentionTab, AttentionSection>;
   /** `since`: the first capture, so a chart still collecting says when it began. */
@@ -57,6 +61,51 @@ const HISTORY_COLUMNS = [column("date", "Week", 12), column("open", "Open roles"
 /** `remoteKnown` rides along for the remote cell; it is not a column of its own. */
 const companyRow = (row: HiringSummary): AttentionRow => ({ id: row.symbol, symbol: row.symbol, values: { symbol: row.symbol, name: row.name, open: row.latest?.openCount ?? null, net: row.latest?.netChange ?? null, remote: row.latest?.remoteShare == null ? null : row.latest.remoteShare * 100, remoteKnown: row.latest?.remoteKnown ?? null, z: row.zScore, signal: humanLabel(row.signal ?? row.status), date: row.latest?.observedAt.slice(0, 10) ?? null } });
 
+/** The weeks of history a free preview holds back; the board has none to hold. */
+const hiringHistoryLocked = (data: HiringBoard | HiringPayload) => !data.preview ? 0 : typeof data.locked === "number" ? data.locked : data.locked.history;
+
+/** "a, b and c". */
+const joinList = (items: readonly string[]) => items.length < 2 ? items.join("") : `${items.slice(0, -1).join(", ")} and ${items.at(-1)}`;
+const grouped = (value: number) => value.toLocaleString("en-US");
+
+/**
+ * The lock line of a free HIRE preview: how many of its rows free shows, what
+ * Pro adds and when its weekly history starts. Null when the preview holds
+ * nothing back (a company with no captures has nothing to unlock).
+ */
+export function hiringPreviewNote(data: HiringBoard | HiringPayload): string | null {
+  if (!data.preview) return null;
+  if ("companies" in data) {
+    if (data.locked <= 0) return null;
+    return freePreviewNote({ shows: `${data.companies.length} of ${grouped(data.total)} companies`, adds: `the other ${grouped(data.locked)}` });
+  }
+  const { evidence, history, peers } = data.locked;
+  if (evidence + history + peers <= 0) return null;
+  const roles = data.evidence.length;
+  return freePreviewNote({
+    shows: evidence > 0 ? `${roles} of ${grouped(roles + evidence)} open roles` : countOf(roles, "open role"),
+    adds: joinList([evidence > 0 ? `the other ${grouped(evidence)} roles` : "", history > 0 ? `${grouped(history)} ${history === 1 ? "week" : "weeks"} of history` : "", peers > 0 ? `${grouped(peers)} more peers` : ""].filter(Boolean)),
+    historyFrom: history > 0 ? data.coverage.firstObservedAt : null,
+  });
+}
+
+/**
+ * The lock line of a free APPS preview: how many app ranks free shows, what
+ * Pro adds and when its daily history starts. Null when nothing is held back.
+ */
+export function appsPreviewNote(data: AppAttentionPayload): string | null {
+  if (data.access !== "preview") return null;
+  const { apps, history } = data.locked;
+  if (apps + history <= 0) return null;
+  const ranks = data.apps.length;
+  const days = data.history.length;
+  return freePreviewNote({
+    shows: `${apps > 0 ? `${ranks} of ${grouped(ranks + apps)} app ranks` : countOf(ranks, "app rank")}${days ? " and the latest day of history" : ""}`,
+    adds: joinList([apps > 0 ? `the other ${grouped(apps)} ranks` : "", history > 0 ? `${grouped(history)} earlier ${history === 1 ? "day" : "days"} of history` : ""].filter(Boolean)),
+    historyFrom: history > 0 ? data.summary.firstObservedAt : null,
+  });
+}
+
 export function hiringModel(data: HiringBoard | HiringPayload, mix = "functions"): AttentionModel {
   const detail = "series" in data ? data : null;
   const companies = "companies" in data ? data.companies : [data];
@@ -71,6 +120,7 @@ export function hiringModel(data: HiringBoard | HiringPayload, mix = "functions"
     locked: typeof data.locked === "number" ? data.locked : Object.values(data.locked).reduce((a, b) => a + b, 0),
     // How counts compare is methodology (docs/hiring-app-attention.md); the footer keeps only what is wrong with this capture.
     notices: detail ? [...(latest?.completeness !== "complete" ? ["The latest capture has incomplete or unknown coverage."] : []), ...(detail.status === "stale" ? ["The latest hiring capture is stale."] : [])] : [],
+    partial: !!detail && (latest?.completeness !== "complete" || detail.status === "stale"),
     // A figure the first capture cannot give yet (a weekly change, a z-score) is left out, not shown as a dash.
     figures: latest ? [
       { label: "Open roles", value: count(latest.openCount) },
@@ -82,7 +132,7 @@ export function hiringModel(data: HiringBoard | HiringPayload, mix = "functions"
     ] : [],
     sections: {
       table: { columns: COMPANY_COLUMNS, rows: companies.map(companyRow), empty: "Hiring observations are not available yet." },
-      chart: { columns: HISTORY_COLUMNS, rows: [...history].reverse().map((row): AttentionRow => ({ id: row.week, date: row.week, values: { date: row.week, open: row.openCount, added: row.added, removed: row.removed, net: row.netChange, change: row.changePct, remote: row.remoteShare == null ? null : row.remoteShare * 100, remoteKnown: row.remoteKnown, coverage: row.completeness }, details: [{ label: "Observed", value: row.observedAt }, { label: "Confidence", value: percent(row.confidence) }, { label: "Capture", value: row.kind }, { label: "Evergreen roles", value: count(row.evergreenCount) }] })), empty: data.preview ? "Full hiring history requires Pro." : "History is accumulating from the first capture." },
+      chart: { columns: HISTORY_COLUMNS, rows: [...history].reverse().map((row): AttentionRow => ({ id: row.week, date: row.week, values: { date: row.week, open: row.openCount, added: row.added, removed: row.removed, net: row.netChange, change: row.changePct, remote: row.remoteShare == null ? null : row.remoteShare * 100, remoteKnown: row.remoteKnown, coverage: row.completeness }, details: [{ label: "Observed", value: row.observedAt }, { label: "Confidence", value: percent(row.confidence) }, { label: "Capture", value: row.kind }, { label: "Evergreen roles", value: count(row.evergreenCount) }] })), empty: hiringHistoryLocked(data) ? "Weekly history is part of Gloom Pro." : "History is accumulating from the first capture." },
       mix: { columns: [column("label", mixKey === "signals" ? "Signal" : "Group", 28, false, true), column("count", mixKey === "signals" ? "Value" : "Roles", 12, true), column("share", mixKey === "signals" ? "Confidence %" : "Share %", mixKey === "signals" ? 14 : 30, true), ...(mixKey === "signals" ? [column("date", "Observed", 12)] : [])], rows, empty: "No classified observations for this group yet." },
       peers: { columns: COMPANY_COLUMNS, rows: (detail?.peers ?? []).map(companyRow), empty: "No comparable mapped peers yet." },
       evidence: { columns: [column("title", "Role", 32, false, true), column("location", "Location", 24), column("function", "Function", 18), column("seniority", "Seniority", 13), column("date", "Observed", 12), column("confidence", "Confidence %", 13, true)], rows: (detail?.evidence ?? []).map((row): AttentionRow => ({ id: `${row.snapshotId}:${row.id}`, url: row.url ?? row.sourceUrl, values: { title: row.title, location: row.location, function: roleFamily(row.jobFunction), seniority: row.seniority ? humanLabel(row.seniority) : null, date: row.observedAt.slice(0, 10), confidence: row.confidence * 100 }, details: [{ label: "Posting title", value: row.title }, { label: "Location", value: row.location ?? "--" }, { label: "Country", value: row.country ?? "Unknown" }, { label: "Function", value: row.jobFunction ?? "Unclassified" }, { label: "Seniority", value: row.seniority ?? "Unclassified" }, { label: "Remote", value: row.remote === null ? "Unknown" : row.remote ? "Yes" : "No" }, { label: "Observed", value: row.observedAt }, { label: "Revision", value: String(row.revision) }, { label: "Confidence", value: percent(row.confidence) }, { label: "Reporting ticker", value: row.sourceTicker }] })), empty: "No primary posting evidence is available yet." },
@@ -127,6 +177,7 @@ export function appsModel(data: AppAttentionPayload, mix = "countries"): Attenti
     preview: data.access === "preview",
     locked: Object.values(data.locked).reduce((a, b) => a + b, 0),
     notices: [...data.coverage.limitations, ...(data.apps.some((row) => row.stale) ? ["Some app observations are stale."] : [])],
+    partial: data.apps.some((row) => row.stale),
     // Seven-day figures appear once a week of captures can give them.
     figures: [
       { label: "Attention score", value: data.summary.attentionScore?.toFixed(1) ?? "--", detail: "/ 100" },
@@ -137,7 +188,7 @@ export function appsModel(data: AppAttentionPayload, mix = "countries"): Attenti
     ],
     sections: {
       table: { columns: APP_COLUMNS, rows: data.apps.map((row): AttentionRow => ({ id: `${row.sourceId}:${row.appId}`, app: { store: row.store, appId: row.appId, name: row.name, country: row.country, chart: row.chart }, symbol: row.symbol ?? undefined, url: row.appUrl, values: { name: row.name, symbol: row.symbol, country: row.country, chart: row.chart, rank: row.rank, change: row.rankChange7d, rating: row.rating, ratings: row.ratingCount, drift: row.ratingChange7d, growth: row.ratingCountGrowth7d }, details: [{ label: "App", value: row.name }, { label: "Developer", value: row.developer }, { label: "Parent ticker", value: row.symbol ?? "Unmapped" }, { label: "Genres", value: row.genres.join(", ") || "--" }, { label: "Observed", value: row.observedAt }, { label: "Ratings observed", value: row.ratingObservedAt ?? "Unavailable" }, { label: "Mapping confidence", value: percent(row.confidence) }, { label: "Mapping revision", value: row.mappingRevisionId ?? "Unmapped" }, { label: "Capture revision", value: row.revisionId }] })), empty: "No app observations match these filters yet." },
-      chart: { columns: [column("date", "Date", 12), column("score", "Score / 100", 14, true), column("change", "Change", 10, true), column("apps", "Apps", 9, true), column("countries", "Countries", 12, true), column("rating", "Rating / 5", 12, true), column("ratings", "Ratings", 13, true)], rows: data.history.map((point, i, all): AttentionRow => ({ id: point.date, date: point.date, values: { date: point.date, score: point.attentionScore, change: point.attentionScore != null && all[i - 1]?.attentionScore != null ? point.attentionScore - all[i - 1]!.attentionScore! : null, apps: point.appCount, countries: point.countryCount, rating: point.rating, ratings: point.ratingCount } })).reverse(), empty: data.access === "preview" ? "Full app history requires Pro." : "History is accumulating from the first capture." },
+      chart: { columns: [column("date", "Date", 12), column("score", "Score / 100", 14, true), column("change", "Change", 10, true), column("apps", "Apps", 9, true), column("countries", "Countries", 12, true), column("rating", "Rating / 5", 12, true), column("ratings", "Ratings", 13, true)], rows: data.history.map((point, i, all): AttentionRow => ({ id: point.date, date: point.date, values: { date: point.date, score: point.attentionScore, change: point.attentionScore != null && all[i - 1]?.attentionScore != null ? point.attentionScore - all[i - 1]!.attentionScore! : null, apps: point.appCount, countries: point.countryCount, rating: point.rating, ratings: point.ratingCount } })).reverse(), empty: data.access === "preview" && data.locked.history > 0 ? "Daily history is part of Gloom Pro." : "History is accumulating from the first capture." },
       mix: mix === "spreads" ? { columns: [column("name", "App", 28, false, true), column("chart", "Chart", 10), column("best", "Best country", 15), column("bestRank", "Best rank", 11, true), column("worst", "Worst country", 15), column("worstRank", "Worst rank", 12, true), column("spread", "Rank spread", 13, true)], rows: data.spreads.map((row): AttentionRow => ({ id: `${row.appId}:${row.chart}:${row.category}`, values: { name: row.name, chart: row.chart, best: row.bestCountry, bestRank: row.bestRank, worst: row.worstCountry, worstRank: row.worstRank, spread: row.spread } })), empty: "Comparable country observations are accumulating." }
         : { columns: [column("country", "Country", 16, false, true), column("apps", "Apps", 9, true), column("ranked", "Ranked apps", 13, true), column("score", "Score / 100", 14, true), column("velocity", "Places / day", 15, true), column("date", "Observed", 12)], rows: data.countries.map((row): AttentionRow => ({ id: row.country, values: { country: row.country, apps: row.appCount, ranked: row.rankedApps, score: row.attentionScore, velocity: row.rankVelocity7d, date: row.observedAt.slice(0, 10) } })), empty: "Country observations are not available yet." },
       peers: { columns: APP_COMPANIES, rows: (data.symbol ? data.peers : data.companies).map(appCompanyRow), empty: "No comparable mapped companies yet." },

package/src/plugins/builtin/company-attention/pane.tsx

@@ -152,7 +152,7 @@ function AttentionView({ kind, symbol, width, height, focused }: Size & { kind:
     {strip}
     <PaneStatusBody loading={!data && resource.loading} error={!data ? resource.error : null} subject={kind === "hiring" ? "hiring momentum" : "app attention"}>
       {model && section ? <PageStackView focused={focused} detailOpen={detailOpen} onBack={() => { setOpenCompany(null); setOpenEvidence(null); setOpenApp(null); }} detailTitle={openCompany ?? app?.name ?? (evidence ? String(evidence.values.title ?? evidence.values.name ?? evidence.id) : undefined)}
-        detailContent={openCompany ? <PaneFooterScope active><AttentionView key={openCompany} kind={kind} symbol={openCompany} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : app ? <AppRankView focus={app} accessKey={accessKey} width={width} height={bodyHeight - 1} focused={focused} /> : evidence ? <Evidence row={evidence} width={width} height={bodyHeight - 1} focused={focused} /> : null}
+        detailContent={openCompany ? <PaneFooterScope active><AttentionView key={openCompany} kind={kind} symbol={openCompany} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : app ? <PaneFooterScope active><AppRankView focus={app} accessKey={accessKey} width={width} height={bodyHeight - 1} focused={focused} /></PaneFooterScope> : evidence ? <Evidence row={evidence} width={width} height={bodyHeight - 1} focused={focused} /> : null}
         rootContent={<DataTableView columns={columns} items={rows} rootWidth={width} rootHeight={bodyHeight} focused={focused && !detailOpen} scrollRef={scrollRef} onBodyScrollActivity={scrollMore}
           rootBefore={<ChartTableHeader width={width} height={bodyHeight} tableRows={rows.length} tableColumns={columns} query={query} figures={model.figures}
             chart={tab === "chart" ? { series, ...chartSelection, formatValue: (value) => kind === "hiring" ? count(value) : value.toFixed(1), empty: series.length ? undefined : model.preview ? "Full history requires Pro."

package/src/plugins/builtin/congress-trades/detail.tsx

@@ -1,9 +1,10 @@
 import { aggregateLoadedCongress } from "./aggregates";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, ScrollBox, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
+import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { Box, Text, useRendererHost, useUiCapabilities, type ScrollBoxRenderable } from "../../../ui";
 import { ClippedText } from "../../../components/ui/display";
 import {
   DataTableView,
+  DetailScrollBody,
   KeyValueRow,
   StatGrid,
   usePaneFooter,
@@ -47,16 +48,18 @@ const DETAIL_ROW = { labelWidth: 16, emphasis: false } as const;
 export function TradeDetail({
   trade,
   width,
+  scrollRef,
 }: {
   trade: CloudCongressTradePayload;
   width: number;
+  scrollRef?: RefObject<ScrollBoxRenderable | null>;
 }) {
   const lineWidth = Math.max(1, width - 2);
   // The desktop's rows cut long values where they end, by CSS; the terminal at its columns.
   const desktop = !!useUiCapabilities().nativePaneChrome;
   const fit = (value: string) => desktop ? value : truncateWithEllipsis(value, Math.max(10, lineWidth - 16));
   return (
-    <ScrollBox scrollY focusable={false} flexGrow={1} paddingX={1}>
+    <DetailScrollBody ref={scrollRef}>
       <Box flexDirection="column" width={lineWidth}>
         {/* The detail title already carries the member and ticker. */}
         <KeyValueRow {...DETAIL_ROW} label="chamber" value={`${trade.chamber === "senate" ? "Senate" : "House"}${trade.stateDistrict ? ` · ${trade.stateDistrict}` : ""}`} tone="muted" />
@@ -82,7 +85,7 @@ export function TradeDetail({
           </>
         ) : null}
       </Box>
-    </ScrollBox>
+    </DetailScrollBody>
   );
 }