gloomberb 0.15.2 → 0.15.3

package/src/components/data-table/view.tsx

@@ -10,22 +10,35 @@ import {
 } from "react";
 import type { ScrollBoxRenderable } from "../../ui";
 import { useShortcut } from "../../react/input";
-import { isPlainKeyboardEvent } from "../../utils/keyboard";
+import { isPlainKey, isPlainKeyboardEvent } from "../../utils/keyboard";
 import { DataTable, type DataTableColumn, type DataTableProps } from "../ui";
 import { useDataTableSortMenu } from "./sort-menu";
 import {
-  isNextTableRowKey,
-  isPreviousTableRowKey,
-  isTableActivationKey,
-  stopTableKey,
   TableViewFrame,
-  type TableViewKeyEvent,
   useResetTableScroll,
   useTableBodyScrollActivity,
   useTableViewState,
 } from "../table-view-shared";
 
-export type DataTableKeyEvent = TableViewKeyEvent;
+export interface DataTableKeyEvent {
+  name?: string;
+  sequence?: string;
+  ctrl?: boolean;
+  meta?: boolean;
+  super?: boolean;
+  alt?: boolean;
+  option?: boolean;
+  shift?: boolean;
+  readonly defaultPrevented?: boolean;
+  readonly propagationStopped?: boolean;
+  preventDefault?: () => void;
+  stopPropagation?: () => void;
+}
+
+function stopTableKey(event: DataTableKeyEvent) {
+  event.stopPropagation?.();
+  event.preventDefault?.();
+}
 
 const DATA_TABLE_SELECTION_COMMIT_DELAY_MS = 150;
 
@@ -642,19 +655,20 @@ export function DataTableView<
     }
     if (tableProps.items.length === 0) return;
 
-    if (isNextTableRowKey(event)) {
+    if (isPlainKey(event, "j", "down")) {
       stopTableKey(event);
       selectByOffset(1);
       return;
     }
 
-    if (isPreviousTableRowKey(event)) {
+    if (isPlainKey(event, "k", "up")) {
       stopTableKey(event);
       selectByOffset(-1);
       return;
     }
 
-    if (isTableActivationKey(event.name)) {
+    // Enter activates with or without modifiers.
+    if (event.name === "enter" || event.name === "return") {
       stopTableKey(event);
       activateSelection();
       return;

package/src/components/feed-data-table/stack-view.tsx

@@ -1,22 +1,23 @@
-import { Box, ScrollBox, Text } from "../../ui";
+import { Box, Text } from "../../ui";
 import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { t } from "../../i18n";
 import { useAppLanguage } from "../../i18n/react";
-import { displayWidth, formatTimeAgo } from "../../utils/format";
+import { formatTimeAgo } from "../../utils/datetime-format";
+import { displayWidth } from "../../utils/format";
 import { colors } from "../../theme/colors";
-import { isPlainKey } from "../../utils/keyboard";
+import { nextHeaderSort } from "../../utils/sort-values";
 import { toTimestampMillis } from "../../utils/timestamp";
 import { DataTableStackView } from "../data-table/stack-view";
 import { usePaneFooter } from "../layout/pane/footer";
-import type { DataTableRootKeyContext } from "../data-table/view";
+import type { DataTableKeyEvent, DataTableRootKeyContext } from "../data-table/view";
 import {
   activeStackIndex,
   sortIndexedStackRows,
   type IndexedStackRow,
   type StackSortPreference,
 } from "../feed-stack-controller";
-import { ExternalLink, type DataTableCell, type DataTableColumn } from "../ui";
+import { DetailScrollBody, ExternalLink, type DataTableCell, type DataTableColumn } from "../ui";
 import { PaneLinkMenu } from "../ui/external-link";
 import { wrapTextLines } from "../../utils/text-wrap";
 import { tableColumnWidth } from "../ui/table-layout";
@@ -48,18 +49,7 @@ interface FeedDataTableStackViewProps {
   onSelect: (index: number) => void;
   rootBefore?: ReactNode;
   rootAfter?: ReactNode;
-  onRootKeyDown?: (event: {
-    name?: string;
-    sequence?: string;
-    ctrl?: boolean;
-    meta?: boolean;
-    super?: boolean;
-    alt?: boolean;
-    option?: boolean;
-    shift?: boolean;
-    preventDefault?: () => void;
-    stopPropagation?: () => void;
-  }, context: DataTableRootKeyContext) => boolean | void;
+  onRootKeyDown?: (event: DataTableKeyEvent, context: DataTableRootKeyContext) => boolean | void;
   sourceLabel?: string;
   titleLabel?: string;
   emptyStateTitle?: string;
@@ -96,23 +86,6 @@ function compareRows(a: DetailRow, b: DetailRow, columnId: DetailColumnId) {
   }
 }
 
-function nextSortPreference(
-  current: SortPreference,
-  columnId: DetailColumnId,
-): SortPreference {
-  if (current.columnId === columnId) {
-    return {
-      columnId,
-      direction: current.direction === "asc" ? "desc" : "asc",
-    };
-  }
-
-  return {
-    columnId,
-    direction: columnId === "time" ? "desc" : "asc",
-  };
-}
-
 function buildColumns(
   width: number,
   sourceLabel: string,
@@ -197,19 +170,6 @@ export function FeedDataTableStackView({
   );
   const activeOpenItemId = openItem ? openItem.id : null;
 
-  const scrollDetailBy = useCallback((delta: number) => {
-    const scrollBox = detailScrollRef.current;
-    if (!scrollBox?.viewport) return;
-    const maxScrollTop = Math.max(
-      0,
-      scrollBox.scrollHeight - scrollBox.viewport.height,
-    );
-    scrollBox.scrollTop = Math.max(
-      0,
-      Math.min(maxScrollTop, scrollBox.scrollTop + delta),
-    );
-  }, []);
-
   const openRow = useCallback((row: DetailRow | undefined) => {
     if (!row) return;
     onOpenItem?.(row.item, row.itemIndex);
@@ -247,12 +207,6 @@ export function FeedDataTableStackView({
     if (!controlled) onOpenItemIdChange?.(activeOpenItemId);
   }, [activeOpenItemId, controlled, onOpenItemIdChange]);
 
-  useEffect(() => {
-    if (!openItemId) return;
-    const scrollBox = detailScrollRef.current;
-    if (scrollBox) scrollBox.scrollTop = 0;
-  }, [openItemId]);
-
   useEffect(() => {
     if (items.length > 0 && selectedIdx >= items.length) {
       onSelect(Math.max(0, items.length - 1));
@@ -265,22 +219,21 @@ export function FeedDataTableStackView({
     _index: number,
     rowState: { selected: boolean },
   ): DataTableCell => {
-    const selectedColor = rowState.selected ? colors.selectedText : undefined;
     switch (column.id) {
       case "time":
         return {
           text: row.item.timestamp ? formatTimeAgo(row.item.timestamp) : "",
-          color: selectedColor ?? colors.textDim,
+          color: colors.textDim,
         };
       case "source":
         return {
           text: row.item.eyebrow ?? "",
-          color: selectedColor ?? colors.textMuted,
+          color: colors.textMuted,
         };
       case "title":
         return {
           text: row.item.title,
-          color: selectedColor ?? colors.text,
+          color: colors.text,
           attributes: isItemRead
             ? isItemRead(row.item)
               ? TextAttributes.NONE
@@ -292,81 +245,44 @@ export function FeedDataTableStackView({
     }
   }, [isItemRead]);
 
-  const handleDetailKeyDown = useCallback((event: {
-    name?: string;
-    preventDefault?: () => void;
-    stopPropagation?: () => void;
-  }) => {
-    if (isPlainKey(event, "j", "down")) {
-      event.stopPropagation?.();
-      event.preventDefault?.();
-      scrollDetailBy(1);
-      return true;
-    }
-    if (isPlainKey(event, "k", "up")) {
-      event.stopPropagation?.();
-      event.preventDefault?.();
-      scrollDetailBy(-1);
-      return true;
-    }
-    return false;
-  }, [scrollDetailBy]);
-
   const detailContent = openItem ? (
-    <Box
-      flexDirection="column"
-      flexGrow={1}
-      flexBasis={0}
-      minHeight={0}
-      overflow="hidden"
-      paddingX={1}
-      paddingY={1}
-    >
-      <ScrollBox
-        ref={detailScrollRef}
-        flexGrow={1}
-        flexBasis={0}
-        minHeight={0}
-        scrollY
-        focusable={false}
-      >
-        <Box flexDirection="column">
-          {(openItem.detailMeta ?? [])
-            .flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2))
-            .map((line, index) => (
-              <Box key={`meta-${index}`} height={1}>
-                <Text fg={colors.textMuted}>{line}</Text>
-              </Box>
-            ))}
+    <DetailScrollBody ref={detailScrollRef} resetScrollKey={openItem.id}>
+      <Box flexDirection="column">
+        {(openItem.detailMeta ?? [])
+          .flatMap((entry) => wrapTextLines(entry, detailTextWidth, 2))
+          .map((line, index) => (
+            <Box key={`meta-${index}`} height={1}>
+              <Text fg={colors.textMuted}>{line}</Text>
+            </Box>
+          ))}
 
-          <Box height={1} />
+        <Box height={1} />
 
-          {wrapTextLines(openItem.detailBody ?? "", detailTextWidth).map(
-            (line, index) => (
-              <Box key={`body-${index}`} height={1}>
-                <Text fg={colors.text}>{line}</Text>
-              </Box>
-            ),
-          )}
+        {wrapTextLines(openItem.detailBody ?? "", detailTextWidth).map(
+          (line, index) => (
+            <Box key={`body-${index}`} height={1}>
+              <Text fg={colors.text}>{line}</Text>
+            </Box>
+          ),
+        )}
 
-          {openItem.detailNote ? (
-            <>
-              <Box height={1} />
-              {wrapTextLines(openItem.detailNote, detailTextWidth).map(
-                (line, index) =>
-                  /^https?:\/\/\S+$/.test(line.trim()) ? (
-                    <ExternalLink key={`note-${index}`} url={line.trim()} />
-                  ) : (
-                    <Box key={`note-${index}`} height={1}>
-                      <Text fg={colors.textDim}>{line}</Text>
-                    </Box>
-                  ),
-              )}
-            </>
-          ) : null}
-        </Box>
-      </ScrollBox>
-    </Box>
+        {openItem.detailNote ? (
+          <>
+            <Box height={1} />
+            {wrapTextLines(openItem.detailNote, detailTextWidth).map(
+              (line, index) =>
+                /^https?:\/\/\S+$/.test(line.trim()) ? (
+                  <ExternalLink key={`note-${index}`} url={line.trim()} />
+                ) : (
+                  <Box key={`note-${index}`} height={1}>
+                    <Text fg={colors.textDim}>{line}</Text>
+                  </Box>
+                ),
+            )}
+          </>
+        ) : null}
+      </Box>
+    </DetailScrollBody>
   ) : (
     <Box flexGrow={1} />
   );
@@ -390,17 +306,18 @@ export function FeedDataTableStackView({
       rootWidth={width}
       rootHeight={height}
       onRootKeyDown={onRootKeyDown}
-      onDetailKeyDown={handleDetailKeyDown}
+      detailScrollRef={detailScrollRef}
       columns={columns}
       items={sortedRows}
       sortColumnId={sortPreference.columnId}
       sortDirection={sortPreference.direction}
       onHeaderClick={(columnId) =>
         setSortPreference((current) =>
-          nextSortPreference(current, columnId as DetailColumnId)
+          nextHeaderSort(current, columnId as DetailColumnId, { firstDirection: columnId === "time" ? "desc" : "asc" })
         )}
       getItemKey={(row) => row.item.id}
       renderCell={renderCell}
+      selectedTextOverridesCellColor
       emptyStateTitle={t(emptyStateTitle)}
       emptyStateHint={emptyStateHint}
       showHorizontalScrollbar={false}

package/src/components/index.ts

@@ -2,13 +2,24 @@ export { MarketBoardStack, type MarketBoardRow, type MarketBoardStackProps } fro
 
 export { PriceSelectorDialog } from "./price-selector-dialog";
 export { StaticChartSurface } from "./chart/static";
-export { CurveSurface, curveGhostColors, curveSlope, historyStatistics } from "./chart/curve";
-export type { CurveSurfaceProps, CurveSlopeReadout, CurvePoint, CurveSeries, HistoryObservation, HistoryStatistics } from "./chart/curve";
+export { CurveSurface, curveGhostColors, curveSlope, curveStrip, curveSurfaceMinRows, historyStatistics } from "./chart/curve";
+export type { CurveSurfaceProps, CurveSlopeReadout, CurvePoint, CurveSeries, CurveSeriesRole, CurveXScale, HistoryObservation, HistoryStatistics } from "./chart/curve";
 export type { StaticChartOverlay } from "./chart/static/chart-surface";
 // The time-series chart: one or more panels of resolved series with axes,
 // a cursor, and range selection. Ticker overview, polls, econ statistics,
 // and prediction markets all draw with it.
 export { CompositeChart, pricePointsToResolvedSeries } from "./chart/composite";
+// Figures, then a chart, then a table: the header zone, its size rule at every
+// pane size, and the selection the chart and the table share.
+export {
+  ChartStrip, ChartTableHeader, chartTableChromeRows, chartTableLayout, formatBpAxis, formatPercentAxis,
+  spanAxisFormatter, spanDigits, useChartTableLayout, useChartTableSelection,
+} from "./chart-table";
+export type {
+  ChartBandMode, ChartStripSpec, ChartTableChart, ChartTableHeaderProps, ChartTableLayout,
+  ChartTableSelection,
+} from "./chart-table";
+export { scalarPoint, staticSeries } from "./chart/static/series";
 export type {
   CompositeAxisDomain,
   CompositeAxisSide,
@@ -50,6 +61,10 @@ export { InlineTickerBadge } from "./ticker/badge";
 export type { InlineTickerBadgeProps } from "./ticker/badge";
 export { InputSearchBar } from "./input-search-bar";
 export { isTableScrollNearEnd, useTableLoadMore } from "./table-view-shared";
+// An offset-paged list behind that scroll trigger: first page, appended pages,
+// dedupe, aborts and a failed page that keeps what is loaded.
+export { usePagedRows } from "./paged-rows";
+export type { PageLoader, PageRequest, PagedRows, PagedRowsOptions, RowPage } from "./paged-rows";
 export { DataTableView } from "./data-table/view";
 export type {
   DataTableKeyEvent,
@@ -78,11 +93,13 @@ export type { StackSortPreference } from "./feed-stack-controller";
 export { PaneFooterScope, usePaneFooter, usePaneMenuItems } from "./layout/pane/footer";
 export { NestedPaneTabs, usePaneHeaderTabs } from "./layout/pane/header-tabs";
 export type { PaneHeaderTabsRegistration } from "./layout/pane/header-tabs";
+export { usePaneTabs } from "./layout/pane/pane-tabs";
+export type { PaneTabs, PaneTabsOptions } from "./layout/pane/pane-tabs";
 // The common footer shapes on top of `usePaneFooter`: a status segment that
 // changes with loading/error state, and one that also carries a link.
-export { usePaneStatusFooter, usePaneStatusLinkFooter } from "../plugins/builtin/shared/pane-footer";
+export { usePaneStatusFooter, usePaneStatusLinkFooter } from "./layout/pane/status-footer";
 export { usePaneNoticeFooter, type UsePaneNoticeFooterOptions } from "./use-pane-notice-footer";
-export { loadingErrorFooterInfo } from "../plugins/builtin/shared/table-pane";
+export { loadingErrorFooterInfo } from "./data-table/table-pane";
 export type { PaneFooterPressEvent, PaneFooterSegment, PaneHint } from "./layout/pane/footer";
 export {
   getPaneSidebarWidth,
@@ -103,5 +120,32 @@ export { useExternalLinkFooter } from "./use-external-link-footer";
 // Markdown as the app renders it, for panes that show text written by someone
 // else: a model's answer, a release note, a fetched article.
 export { MarkdownText } from "./markdown-text";
-export * from "./ui";
+// The shared UI kit. Listed by name rather than re-exported with `*` because
+// this file is the public `gloomberb/components` surface: a kit component
+// reaches plugins only once it is added here.
+export {
+  ActionRow, Badge, BulletList, Button, ButtonActionScope, Checkbox, ChoiceDialog, ConfirmDialog, confirmDialog, DataTable,
+  DetailScrollBody, DialogFrame, DisclosureMarker, Divider, EmptyState, ExternalLink, ExternalLinkText, FieldGrid, FieldLabel,
+  fieldGridColumns, fieldGridRows, FigureList, getMessageComposerBlockHeight, GridFieldView, Icon, ICON_GLYPHS,
+  IconButton, InlineQuickAddRow, KeyValueRow, ListView, loadingText, Menu, MenuPopover,
+  MessageComposer, MultiSelectDialogButton, MultiSelectDialogContent, Notice, NumberField,
+  NumberPromptDialog, openUrl, PageStackView, PaneLinkMenu, PaneStatusBody, Popover, Prose,
+  QueryBar, READING_WIDTH, RemoteImage, Section, SectionHeading, SegmentedControl, SelectButton, ShortcutHint,
+  Spinner, StatGrid, statGridColumns, statGridRows, Tabs, TextField, TextPromptDialog, unavailableText,
+  useFieldRing, usePaneLinkMenuEntry, useQueryBarSearch,
+} from "./ui";
+export type {
+  ActionRowProps, BadgeProps, BulletListProps, ButtonProps, ButtonVariant, CheckboxProps, ChoiceDialogChoice, ConfirmDialogOptions,
+  DataTableCell, DataTableColumn, DataTableProps, DataTableVisibleRange, DetailScrollBodyProps, DialogFrameProps,
+  DisclosureMarkerProps, DividerProps, EmptyStateProps, FieldGridProps, FieldLabelProps, FieldRing, FieldRingOptions,
+  FigureListItem, FigureListProps, GridField,
+  IconButtonPressEvent, IconButtonProps, IconName, IconProps, InlineQuickAddRowProps,
+  KeyValueRowProps, ListRowState, ListViewItem, ListViewProps, MenuItem, MenuPopoverProps,
+  MenuProps, MultiSelectDialogButtonHandle, MultiSelectPopoverAnchorPoint, MultiSelectRowAction,
+  NoticeProps, NumberFieldProps, PaneStatusBodyProps, PopoverProps, ProseProps, QueryBarFilter,
+  QueryBarMultiFilter, QueryBarProps, QueryBarSearch, QueryBarSearchFocus, QueryBarSelectFilter, QueryBarTextFilter,
+  QueryBarToggleFilter, QueryBarView, SectionHeadingProps, SectionProps, SegmentedControlProps,
+  SelectButtonOption, SelectButtonProps, SelectControl, StatGridProps, StatItem, TabsProps,
+  TextFieldProps, TextPromptDialogProps,
+} from "./ui";
 export { usePaneTicker } from "../state/app/context";

package/src/components/layout/header.tsx

@@ -25,13 +25,6 @@ import {
   type CommandBarPromptBinding,
 } from "../command-bar/panel/prompt-binding";
 import { useAppDispatch, useAppSelector } from "../../state/app/context";
-import {
-  selectCommandBarOpen,
-  selectUpdateAvailable,
-  selectUpdateCheckInProgress,
-  selectUpdateNotice,
-  selectUpdateProgress,
-} from "../../state/selectors-ui";
 import { useViewport } from "../../react/input";
 import { canRetryUpdate } from "../../app/global-shortcuts";
 import { t, tf } from "../../i18n";
@@ -249,10 +242,10 @@ function HeaderCommandPrompt({
 function UpdateStatus() {
   const colors = useThemeColors();
   const dispatch = useAppDispatch();
-  const updateAvailable = useAppSelector(selectUpdateAvailable);
-  const updateProgress = useAppSelector(selectUpdateProgress);
-  const updateCheckInProgress = useAppSelector(selectUpdateCheckInProgress);
-  const updateNotice = useAppSelector(selectUpdateNotice);
+  const updateAvailable = useAppSelector((state) => state.updateAvailable);
+  const updateProgress = useAppSelector((state) => state.updateProgress);
+  const updateCheckInProgress = useAppSelector((state) => state.updateCheckInProgress);
+  const updateNotice = useAppSelector((state) => state.updateNotice);
   const retryKey = useActionShortcut("install-update");
 
   useEffect(() => {
@@ -391,7 +384,7 @@ export function Header({
   const colors = useThemeColors();
   const rendererHost = useRendererHost();
   const dispatch = useAppDispatch();
-  const commandBarOpen = useAppSelector(selectCommandBarOpen);
+  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
   const { width: termWidth } = useViewport();
   const { nativePaneChrome = false, titleBarOverlay, nativeWindowChrome = titleBarOverlay, windowControls } = useUiCapabilities();
   const showWindowControls = nativeWindowChrome && windowControls === "windows";

package/src/components/layout/market-summary.ts

@@ -3,7 +3,6 @@ import { priceColor } from "../../theme/colors";
 import { useThemeColors } from "../../theme/theme-context";
 import { useAppVisible } from "../../state/app/activity";
 import { useAppSelector } from "../../state/app/context";
-import { selectBaseCurrency } from "../../state/selectors-ui";
 import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { t } from "../../i18n";
 import { useQuoteEntry, useResolvedEntryValue } from "../../market-data/hooks";
@@ -80,7 +79,7 @@ export function resolveMarketSummaryFit(options: {
 export function useMarketSummary(): MarketSummary {
   const colors = useThemeColors();
   const appActive = useAppVisible();
-  const baseCurrency = useAppSelector(selectBaseCurrency);
+  const baseCurrency = useAppSelector((state) => state.config.baseCurrency);
   const spyQuoteEntry = useQuoteEntry("SPY", null);
   const spyQuote = useResolvedEntryValue(spyQuoteEntry);
   const mktState = spyQuote?.marketState;

package/src/components/layout/missing-pane.tsx

@@ -6,7 +6,6 @@ import { getPluginManager } from "../../plugins/builtin/plugin-marketplace/store
 import type { PaneDef, PaneProps } from "../../types/plugin";
 import { Box } from "../../ui";
 import { useAppSelector } from "../../state/app/context";
-import { selectActiveLayoutIndex, selectSavedLayouts } from "../../state/selectors-ui";
 import type { LayoutRequirement } from "../../layout-marketplace/cloud";
 
 /**
@@ -34,8 +33,8 @@ function requirementFor(paneId: string, layoutIds: readonly string[]): LayoutReq
 }
 
 function MissingPanePlaceholder({ paneType, width }: PaneProps) {
-  const layouts = useAppSelector(selectSavedLayouts);
-  const activeIndex = useAppSelector(selectActiveLayoutIndex);
+  const layouts = useAppSelector((state) => state.config.layouts);
+  const activeIndex = useAppSelector((state) => state.config.activeLayoutIndex);
   const linkedIds = [layouts[activeIndex]?.origin?.layoutId, ...layouts.map((layout) => layout.origin?.layoutId)]
     .filter((id): id is string => !!id);
   const requirement = requirementFor(paneType, linkedIds);
@@ -105,7 +104,3 @@ export function missingPanePlaceholderDef(paneId: string): PaneDef {
   }
   return def;
 }
-
-export function isMissingPanePlaceholder(def: PaneDef): boolean {
-  return placeholders.get(def.id) === def;
-}

package/src/components/layout/pane/header-tabs.tsx

@@ -81,7 +81,8 @@ function registrationSignature(registration: PaneHeaderTabsRegistration | null):
 /**
  * Hands the pane's tab strip to the chrome. Returns true when the chrome draws
  * it, in which case the pane must not draw its own `Tabs` or reserve a row.
- * Pass null when the pane has no strip right now.
+ * Pass null when the pane has no strip right now. `usePaneTabs` wraps this
+ * and also returns the body strip.
  */
 export function usePaneHeaderTabs(registration: PaneHeaderTabsRegistration | null): boolean {
   const context = useContext(PaneHeaderTabsContext);

package/src/components/layout/pane/header.tsx

@@ -72,10 +72,6 @@ export interface PaneHeaderQuickSetting {
   onMouseDown?: (event: any) => void;
 }
 
-function truncateTitle(title: string, maxWidth: number): string {
-  return truncateToDisplayWidth(title, maxWidth);
-}
-
 
 function TerminalPaneButton({
   text,
@@ -295,7 +291,7 @@ export function PaneHeader({
     const innerWidth = Math.max(0, width - 4);
     const contentWidth = PANE_HEADER_GRIP.length + terminalQuickSettingsWidth + closeText.length + actionText.length;
     const titleWidth = Math.max(0, innerWidth - contentWidth);
-    const clippedTitle = truncateTitle(title, titleWidth);
+    const clippedTitle = truncateToDisplayWidth(title, titleWidth);
     const fillLen = Math.max(0, innerWidth - PANE_HEADER_GRIP.length - displayWidth(clippedTitle) - terminalQuickSettingsWidth - actionText.length - closeText.length);
     const fill = "─".repeat(fillLen);
 
@@ -346,7 +342,7 @@ export function PaneHeader({
   }
 
   const titleWidth = Math.max(0, width - PANE_HEADER_GRIP.length - terminalQuickSettingsWidth - actionText.length - closeText.length);
-  const clippedTitle = truncateTitle(title, titleWidth);
+  const clippedTitle = truncateToDisplayWidth(title, titleWidth);
   const padding = " ".repeat(Math.max(0, titleWidth - displayWidth(clippedTitle)));
 
   return (

package/src/components/layout/pane/pane-tabs.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { useUiCapabilities } from "../../../ui";
+import { QueryBar } from "../../ui/query-bar";
+import { Tabs, type TabsProps } from "../../ui/tabs";
+import { usePaneHeaderTabs } from "./header-tabs";
+
+export interface PaneTabsOptions extends TabsProps {
+  /**
+   * Nested under another title-bar strip on the desktop (a Ticker Research
+   * tab), offer the choice as a `QueryBar` view of this width instead of a
+   * second tab row. The terminal keeps its `Tabs` row.
+   */
+  queryBarWidth?: number;
+}
+
+export interface PaneTabs {
+  /** What the body draws first: the `Tabs` row, or null while the chrome draws the strip. */
+  strip: ReactNode;
+  /** Body rows the strip takes, for content sized in rows. */
+  rows: 0 | 1;
+}
+
+/**
+ * A pane's primary tab strip in one call. It registers the strip with the
+ * chrome, which draws it in the desktop title bar, and otherwise returns the
+ * row the body draws first, so the tabs are described once. Call it above any
+ * early return, and pass null while the pane has no strip (a sign-in wall).
+ */
+export function usePaneTabs(options: PaneTabsOptions | null): PaneTabs {
+  const inHeader = usePaneHeaderTabs(options);
+  const { nativePaneChrome } = useUiCapabilities();
+  if (!options || inHeader) return { strip: null, rows: 0 };
+  const { queryBarWidth, ...tabs } = options;
+  if (queryBarWidth !== undefined && nativePaneChrome) {
+    return {
+      strip: <QueryBar width={queryBarWidth} view={{ value: tabs.activeValue ?? "", options: tabs.tabs, onChange: tabs.onSelect }} />,
+      rows: 1,
+    };
+  }
+  return { strip: <Tabs {...tabs} />, rows: 1 };
+}