gloomberb 0.15.2 → 0.15.3

package/src/plugins/builtin/broker-manager/table.ts

@@ -1,9 +1,9 @@
 import { TextAttributes } from "../../../ui";
 import type { DataTableCell, DataTableColumn } from "../../../components";
 import { colors } from "../../../theme/colors";
-import { formatBrokerUpdatedAt, type BrokerDisplayState, type BrokerProfileRow } from "./model";
+import { formatRelativeAge } from "../../../utils/datetime-format";
+import type { BrokerDisplayState, BrokerProfileRow } from "./model";
 import { t } from "../../../i18n";
-import { truncateToDisplayWidth } from "../../../utils/format";
 
 type BrokerColumnId = "profile" | "status" | "broker" | "mode" | "accounts" | "updated";
 export type BrokerColumn = DataTableColumn & { id: BrokerColumnId };
@@ -19,15 +19,6 @@ export function stateColor(state: BrokerDisplayState): string {
   }
 }
 
-export function truncate(value: string, width: number): string {
-  return truncateToDisplayWidth(value, width);
-}
-
-export function isBrokerErrorMessage(message: string | null | undefined): boolean {
-  const normalized = message?.toLowerCase() ?? "";
-  return normalized.includes("failed") || normalized.includes("required");
-}
-
 /** Below this the mode column folds away rather than pushing SYNCED off the edge. */
 const MODE_COLUMN_MIN_WIDTH = 84;
 
@@ -65,6 +56,6 @@ export function renderBrokerCell(row: BrokerProfileRow, column: BrokerColumn): D
     case "accounts":
       return { text: row.accountSummary, color: row.accountCount > 0 ? colors.text : colors.textMuted };
     case "updated":
-      return { text: formatBrokerUpdatedAt(row.lastSyncedAt), color: colors.textMuted };
+      return { text: formatRelativeAge(row.lastSyncedAt), color: colors.textMuted };
   }
 }

package/src/plugins/builtin/buildout/cells.tsx

@@ -29,25 +29,23 @@ export function renderBuildoutCell(
   rowState: { selected: boolean },
   context: BuildoutCellContext,
 ): DataTableCell {
-  const selectedColor = rowState.selected ? colors.selectedText : undefined;
-
   if (row.kind === "list") {
     const list = row.item;
     switch (column.id) {
       case "listName":
-        return { text: list.name, color: selectedColor ?? colors.text };
+        return { text: list.name, color: colors.text };
       case "listDescription":
-        return { text: text(list.shortDescription ?? list.description), color: selectedColor ?? colors.textDim };
+        return { text: text(list.shortDescription ?? list.description), color: colors.textDim };
       case "companyCount":
-        return { text: list.companyCount == null ? "-" : String(list.companyCount), color: selectedColor ?? colors.textDim };
+        return { text: list.companyCount == null ? "-" : String(list.companyCount), color: colors.textDim };
       case "totalMarketCap":
-        return { text: text(list.totalMarketCap), color: selectedColor ?? colors.textDim };
+        return { text: text(list.totalMarketCap), color: colors.textDim };
       case "avgSectorGrowth":
-        return { text: text(list.avgSectorGrowth), color: selectedColor ?? metricColor(list.avgSectorGrowth) };
+        return { text: text(list.avgSectorGrowth), color: metricColor(list.avgSectorGrowth) };
       case "avgReturn1y":
-        return { text: text(list.avgReturn1y), color: selectedColor ?? metricColor(list.avgReturn1y) };
+        return { text: text(list.avgReturn1y), color: metricColor(list.avgReturn1y) };
       case "avgMargin":
-        return { text: text(list.avgMargin), color: selectedColor ?? metricColor(list.avgMargin) };
+        return { text: text(list.avgMargin), color: metricColor(list.avgMargin) };
     }
   }
 
@@ -81,32 +79,32 @@ export function renderBuildoutCell(
           ),
         };
       case "description":
-        return { text: text(company.description), color: selectedColor ?? colors.textDim };
+        return { text: text(company.description), color: colors.textDim };
       case "sectorTech":
-        return { text: text([company.primarySector, company.primaryTechnology].filter(Boolean).join(" / ")), color: selectedColor ?? colors.textDim };
+        return { text: text([company.primarySector, company.primaryTechnology].filter(Boolean).join(" / ")), color: colors.textDim };
       case "criticality":
-        return { text: text(company.aiCriticality), color: criticalityColor(company.aiCriticality, rowState.selected), attributes: TextAttributes.BOLD };
+        return { text: text(company.aiCriticality), color: criticalityColor(company.aiCriticality), attributes: TextAttributes.BOLD };
       case "marketCap":
-        return { text: text(company.marketCap), color: selectedColor ?? colors.textDim };
+        return { text: text(company.marketCap), color: colors.textDim };
       case "revenue":
-        return { text: text(company.revenue), color: selectedColor ?? colors.textDim };
+        return { text: text(company.revenue), color: colors.textDim };
       case "revenueGrowth":
         return {
           text: text(company.revenueGrowthYoy ?? company.lastQuarterGrowth),
-          color: selectedColor ?? metricColor(company.revenueGrowthYoy ?? company.lastQuarterGrowth),
+          color: metricColor(company.revenueGrowthYoy ?? company.lastQuarterGrowth),
         };
       case "netIncome":
-        return { text: text(company.netIncome), color: selectedColor ?? metricColor(company.netIncome) };
+        return { text: text(company.netIncome), color: metricColor(company.netIncome) };
       case "margin":
-        return { text: text(company.profitMargins), color: selectedColor ?? metricColor(company.profitMargins) };
+        return { text: text(company.profitMargins), color: metricColor(company.profitMargins) };
       case "forwardPE":
-        return { text: text(company.forwardPE), color: selectedColor ?? colors.textDim };
+        return { text: text(company.forwardPE), color: colors.textDim };
       case "dividendYield":
-        return { text: text(company.dividendYield), color: selectedColor ?? metricColor(company.dividendYield) };
+        return { text: text(company.dividendYield), color: metricColor(company.dividendYield) };
       case "return1y":
-        return { text: text(company.return1y), color: selectedColor ?? metricColor(company.return1y) };
+        return { text: text(company.return1y), color: metricColor(company.return1y) };
       case "employees":
-        return { text: text(company.employeeCount), color: selectedColor ?? colors.textDim };
+        return { text: text(company.employeeCount), color: colors.textDim };
     }
   }
 
@@ -130,9 +128,9 @@ export function renderBuildoutCell(
         };
       }
       case "site":
-        return { text: site.name, color: selectedColor ?? colors.text };
+        return { text: site.name, color: colors.text };
       case "type":
-        return { text: text(site.type), color: selectedColor ?? colors.textDim };
+        return { text: text(site.type), color: colors.textDim };
       case "owner": {
         const ownerTicker = tickerSymbol(site.ownerTicker);
         if (ownerTicker) {
@@ -141,26 +139,26 @@ export function renderBuildoutCell(
             content: tickerBadges({
               symbols: [ownerTicker],
               width: column.width,
-              fallbackColor: selectedColor ?? colors.textBright,
+              fallbackColor: rowState.selected ? colors.selectedText : colors.textBright,
             }),
           };
         }
-        return { text: text(site.ownerName), color: selectedColor ?? colors.textDim };
+        return { text: text(site.ownerName), color: colors.textDim };
       }
       case "location":
-        return { text: text(location), color: selectedColor ?? colors.textDim };
+        return { text: text(location), color: colors.textDim };
       case "park":
-        return { text: text(site.parkName), color: selectedColor ?? colors.textDim };
+        return { text: text(site.parkName), color: colors.textDim };
       case "power":
-        return { text: text(site.powerCapacity), color: selectedColor ?? colors.textDim };
+        return { text: text(site.powerCapacity), color: colors.textDim };
       case "construction":
-        return { text: activityLabel(site.constructionActivity), color: activityColor(site.constructionActivity, rowState.selected) };
+        return { text: activityLabel(site.constructionActivity), color: activityColor(site.constructionActivity) };
       case "parking":
-        return { text: activityLabel(site.parkingActivity), color: activityColor(site.parkingActivity, rowState.selected) };
+        return { text: activityLabel(site.parkingActivity), color: activityColor(site.parkingActivity) };
       case "capture":
-        return { text: formatRelativeTime(site.latestCapture), color: selectedColor ?? colors.textDim };
+        return { text: formatRelativeTime(site.latestCapture), color: colors.textDim };
       case "area":
-        return { text: text(site.areaKm2), color: selectedColor ?? colors.textDim };
+        return { text: text(site.areaKm2), color: colors.textDim };
     }
   }
 
@@ -168,7 +166,7 @@ export function renderBuildoutCell(
     const update = row.item;
     switch (column.id) {
       case "time":
-        return { text: formatRelativeTime(update.publishedAt), color: selectedColor ?? colors.textDim };
+        return { text: formatRelativeTime(update.publishedAt), color: colors.textDim };
       case "companies": {
         const symbols = (update.companies ?? [])
           .map((company) => tickerSymbol(company.ticker))
@@ -179,13 +177,13 @@ export function renderBuildoutCell(
             content: tickerBadges({
               symbols,
               width: column.width,
-              fallbackColor: selectedColor ?? colors.textBright,
+              fallbackColor: rowState.selected ? colors.selectedText : colors.textBright,
             }),
           }
-          : { text: text(update.companies?.map((company) => company.name).filter(Boolean).join(", ")), color: selectedColor ?? colors.textDim };
+          : { text: text(update.companies?.map((company) => company.name).filter(Boolean).join(", ")), color: colors.textDim };
       }
       case "headline":
-        return { text: update.headline, color: selectedColor ?? colors.text };
+        return { text: update.headline, color: colors.text };
     }
   }
 

package/src/plugins/builtin/buildout/detail/company.tsx

@@ -7,7 +7,8 @@ import type { Quote } from "../../../../types/financials";
 import type { TickerRecord } from "../../../../types/ticker";
 import { Box, Text } from "../../../../ui";
 import { formatCompact } from "../../../../utils/format";
-import { activityLabel, criticalityColor, dateShort, metricColor, metricNumber, textOrNull, tickerSymbol, truncate } from "../format";
+import { truncateWithEllipsis } from "../../../../utils/text-wrap";
+import { activityLabel, criticalityColor, dateShort, metricColor, metricNumber, textOrNull, tickerSymbol } from "../format";
 import type { BuildoutCompany } from "../model/types";
 import { DetailListLine, DetailSpecGrid, MarkdownBlock, RelatedCompaniesLine, tickerBadges, type DetailSpec, type InlineTickerCatalog } from "./ui";
 import { dateCell, detailListValues, recommendationColor, valueWithOriginal } from "./values";
@@ -124,7 +125,7 @@ export function CompanyDetail({
           { label: "1Y", value: company.return1y, color: metricColor(company.return1y) },
           { label: "3Y", value: company.return3y, color: metricColor(company.return3y) },
           { label: "Sector", value: [company.primarySector, company.primarySubsector, company.primaryTechnology].filter(Boolean).join(" / ") },
-          { label: "Critical", value: company.aiCriticality, color: criticalityColor(company.aiCriticality, false) },
+          { label: "Critical", value: company.aiCriticality, color: criticalityColor(company.aiCriticality) },
           { label: "Maturity", value: company.maturity },
           { label: "Export", value: company.exportControlExposure },
           { label: "Employees", value: company.employeeCount },
@@ -245,7 +246,7 @@ export function CompanyDetail({
             ].filter(Boolean);
             return (
               <Box key={`${site.name}-${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
-                <Text fg={colors.textMuted}>{truncate(parts.join(" - "), bodyWidth)}</Text>
+                <Text fg={colors.textMuted}>{truncateWithEllipsis(parts.join(" - "), bodyWidth)}</Text>
                 {site.involvementSummary ? (
                   <MarkdownBlock text={site.involvementSummary} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
                 ) : null}
@@ -258,7 +259,7 @@ export function CompanyDetail({
         <Section title="Recent Intel" width={bodyWidth}>
           {company.intelligence!.slice(0, 5).map((item, index) => (
             <Box key={`${item.headline ?? "intel"}:${index}`} flexDirection="column" marginTop={index === 0 ? 0 : 1}>
-              <Text fg={colors.textDim}>{truncate(`${dateShort(item.publishedAt)} ${item.headline ?? ""}`, bodyWidth)}</Text>
+              <Text fg={colors.textDim}>{truncateWithEllipsis(`${dateShort(item.publishedAt)} ${item.headline ?? ""}`, bodyWidth)}</Text>
               <MarkdownBlock text={item.content} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />
             </Box>
           ))}

package/src/plugins/builtin/buildout/detail/site.tsx

@@ -1,7 +1,8 @@
 import { Section } from "../../../../components";
 import { colors } from "../../../../theme/colors";
 import { Box, Text } from "../../../../ui";
-import { activityColor, activityLabel, dateShort, sourceDomains, truncate } from "../format";
+import { truncateWithEllipsis } from "../../../../utils/text-wrap";
+import { activityColor, activityLabel, dateShort, sourceDomains } from "../format";
 import type { BuildoutSite } from "../model/types";
 import { SiteSatelliteImages } from "./satellite-images";
 import { DetailSpecGrid, InlineSources, MarkdownBlock, SourceDetailLines, tickerBadges, type InlineTickerCatalog } from "./ui";
@@ -42,8 +43,8 @@ export function SiteDetail({
           { label: "ETA", value: site.eta },
           { label: "Area", value: site.areaKm2 },
           { label: "Boundary", value: booleanText(site.boundaryConfirmed) },
-          { label: "Construction", value: site.constructionActivity == null ? null : activityLabel(site.constructionActivity), color: activityColor(site.constructionActivity, false) },
-          { label: "Parking", value: site.parkingActivity == null ? null : activityLabel(site.parkingActivity), color: activityColor(site.parkingActivity, false) },
+          { label: "Construction", value: site.constructionActivity == null ? null : activityLabel(site.constructionActivity), color: activityColor(site.constructionActivity) },
+          { label: "Parking", value: site.parkingActivity == null ? null : activityLabel(site.parkingActivity), color: activityColor(site.parkingActivity) },
           { label: "Last Sat", value: dateCell(site.latestCapture) },
           { label: "Activity At", value: dateCell(site.activityUpdatedAt) },
           { label: "Enriched", value: dateCell(site.lastEnrichedAt) },
@@ -61,7 +62,7 @@ export function SiteDetail({
               : null;
             return (
               <Text key={observation.id ?? index} fg={colors.textMuted}>
-                {truncate([
+                {truncateWithEllipsis([
                   dateShort(observation.captureDate),
                   observation.observationSource,
                   observation.note,
@@ -104,7 +105,7 @@ export function SiteDetail({
                   })
                   : null}
                 <Text fg={colors.textMuted}>
-                  {truncate(`${builder.companyName ?? "Company"}${builder.role ? ` - ${builder.role}` : ""}`, Math.max(0, bodyWidth - (builder.companyTicker ? 12 : 0)))}
+                  {truncateWithEllipsis(`${builder.companyName ?? "Company"}${builder.role ? ` - ${builder.role}` : ""}`, Math.max(0, bodyWidth - (builder.companyTicker ? 12 : 0)))}
                 </Text>
               </Box>
               <MarkdownBlock text={builder.summary} width={bodyWidth} catalog={catalog} openTicker={openTicker} marginTop={0} />

package/src/plugins/builtin/buildout/detail/ui.tsx

@@ -5,7 +5,8 @@ import { ExternalLinkText } from "../../../../components/ui/external-link";
 import type { InlineTickerCatalogEntry } from "../../../../state/hooks/inline-tickers";
 import { colors } from "../../../../theme/colors";
 import { Box, Text } from "../../../../ui";
-import { sourceDetailEntries, text, textOrNull, tickerSymbol, truncate } from "../format";
+import { truncateWithEllipsis } from "../../../../utils/text-wrap";
+import { sourceDetailEntries, text, textOrNull, tickerSymbol } from "../format";
 import type { BuildoutCompany, BuildoutRelatedCompany, BuildoutSource } from "../model/types";
 
 export type InlineTickerCatalog = Record<string, InlineTickerCatalogEntry>;
@@ -34,11 +35,11 @@ export function DetailSpecGrid({ items, width, marginTop = 1 }: { items: DetailS
           {row.map((item) => {
             const labelWidth = Math.min(Math.max(item.label.length + 2, 8), Math.max(8, Math.floor(columnWidth * 0.45)));
             const valueWidth = Math.max(0, columnWidth - labelWidth);
-            const labelText = truncate(`${item.label}:`, Math.max(0, labelWidth - 1)).padEnd(labelWidth);
+            const labelText = truncateWithEllipsis(`${item.label}:`, Math.max(0, labelWidth - 1)).padEnd(labelWidth);
             return (
               <Box key={item.label} flexDirection="row" width={columnWidth} height={1} overflow="hidden">
                 <Text fg={colors.textMuted}>{labelText}</Text>
-                <Text fg={item.color ?? colors.text}>{truncate(text(item.value, ""), valueWidth)}</Text>
+                <Text fg={item.color ?? colors.text}>{truncateWithEllipsis(text(item.value, ""), valueWidth)}</Text>
               </Box>
             );
           })}
@@ -54,7 +55,7 @@ export function InlineSources({ domains, width }: { domains: readonly string[];
   return (
     <Box marginTop={1} flexDirection="row" width={width} height={1} overflow="hidden">
       <Text fg={colors.textMuted}>{label}</Text>
-      <Text fg={colors.textDim}>{truncate(domains.join(", "), Math.max(0, width - label.length))}</Text>
+      <Text fg={colors.textDim}>{truncateWithEllipsis(domains.join(", "), Math.max(0, width - label.length))}</Text>
     </Box>
   );
 }
@@ -73,7 +74,7 @@ export function DetailListLine({
   return (
     <Box flexDirection="row" width={width} height={1} overflow="hidden">
       <Text fg={colors.textMuted}>{prefix}</Text>
-      <Text fg={colors.textDim}>{truncate(values.join(", "), Math.max(0, width - prefix.length))}</Text>
+      <Text fg={colors.textDim}>{truncateWithEllipsis(values.join(", "), Math.max(0, width - prefix.length))}</Text>
     </Box>
   );
 }
@@ -112,7 +113,7 @@ export function RelatedCompaniesLine({
         />
       ) : null}
       <Text fg={colors.textDim}>
-        {truncate(`${names.length > 0 ? names.join(", ") : ""}${overflow}`, Math.max(0, width - prefix.length - badgeWidth))}
+        {truncateWithEllipsis(`${names.length > 0 ? names.join(", ") : ""}${overflow}`, Math.max(0, width - prefix.length - badgeWidth))}
       </Text>
     </Box>
   );
@@ -134,7 +135,7 @@ export function SourceDetailLines({
       {entries.map((entry, index) => {
         const prefix = entry.domain ? `${entry.domain}${entry.tier ? ` T${entry.tier}` : ""}` : "";
         const body = entry.title ?? entry.note ?? "";
-        const bodyText = truncate(prefix ? `: ${body}` : body, Math.max(0, width - prefix.length));
+        const bodyText = truncateWithEllipsis(prefix ? `: ${body}` : body, Math.max(0, width - prefix.length));
         return (
           <Box key={`${entry.domain ?? "source"}:${index}`} flexDirection="row" height={1} width={width} overflow="hidden">
             {prefix ? (
@@ -235,7 +236,7 @@ export function CompanyCell({
 }) {
   const symbol = tickerSymbol(company.ticker);
   if (!symbol) {
-    return <Text fg={selected ? colors.selectedText : colors.text}>{truncate(company.name, width)}</Text>;
+    return <Text fg={selected ? colors.selectedText : colors.text}>{truncateWithEllipsis(company.name, width)}</Text>;
   }
   const badgeWidth = Math.min(11, width);
   return (
@@ -246,7 +247,7 @@ export function CompanyCell({
         fallbackColor={selected ? colors.selectedText : colors.textBright}
       />
       <Text fg={selected ? colors.selectedText : colors.text}>
-        {truncate(company.name, Math.max(0, width - badgeWidth))}
+        {truncateWithEllipsis(company.name, Math.max(0, width - badgeWidth))}
       </Text>
     </Box>
   );

package/src/plugins/builtin/buildout/format.ts

@@ -2,8 +2,6 @@ import { colors, priceColor } from "../../../theme/colors";
 import { formatDetailDate as sharedFormatDetailDate, parseDisplayDate } from "../../../utils/datetime-format";
 import type { BuildoutSource, BuildoutUpdate } from "./model/types";
 
-export { truncateWithEllipsis as truncate } from "../../../utils/text-wrap";
-
 export function text(value: unknown, fallback = "-") {
   if (value == null) return fallback;
   const stringValue = String(value).trim();
@@ -64,20 +62,17 @@ export function activityLabel(value: number | null | undefined) {
   return "None";
 }
 
-export function activityColor(value: number | null | undefined, selected: boolean) {
-  if (selected) return colors.selectedText;
+export function activityColor(value: number | null | undefined) {
   if (value == null || value <= 0) return colors.textMuted;
   return value >= 2 ? colors.warning : colors.neutral;
 }
 
-export function metricColor(value: unknown, selected = false) {
-  if (selected) return colors.selectedText;
+export function metricColor(value: unknown) {
   const parsed = metricNumber(value);
   return parsed == null ? colors.textDim : priceColor(parsed);
 }
 
-export function criticalityColor(value: string | null | undefined, selected: boolean) {
-  if (selected) return colors.selectedText;
+export function criticalityColor(value: string | null | undefined) {
   switch ((value ?? "").trim().toUpperCase()) {
     case "CORE":
       return colors.negative;

package/src/plugins/builtin/buildout/index.tsx

@@ -0,0 +1,23 @@
+import { BuildoutPane } from "./pane";
+import type { PluginModule } from "../plugin-module";
+
+export const buildoutModule: PluginModule = {
+  panes: [{
+    id: "buildout",
+    name: "TheBuildout",
+    icon: "T",
+    component: BuildoutPane,
+    defaultPosition: "right",
+    defaultMode: "floating",
+    defaultFloatingSize: { width: 110, height: 34 },
+  }],
+  paneTemplates: [{
+    id: "buildout-pane",
+    paneId: "buildout",
+    label: "TheBuildout",
+    description: "Open TheBuildout infrastructure intelligence.",
+    keywords: ["tbo", "buildout", "thebuildout", "infrastructure", "sites", "intel"],
+    shortcut: { prefix: "TBO" },
+    createInstance: () => ({ placement: "floating" }),
+  }],
+};

package/src/plugins/builtin/buildout/model/types.ts

@@ -2,7 +2,6 @@ import type { DataTableColumn } from "../../../../components";
 
 export type BuildoutTabId = "companies" | "sites" | "intel";
 export type BuildoutAccess = "free" | "pro";
-export type SortDirection = "asc" | "desc";
 
 export type RawObject = Record<string, unknown>;
 

package/src/plugins/builtin/buildout/pane/index.tsx

@@ -7,14 +7,16 @@ import {
   PaneStatusBody,
   useTableLoadMore,
   usePaneFooter,
-  usePaneHeaderTabs,
+  usePaneTabs,
   type DataTableKeyEvent,
   type PaneHint,
 } from "../../../../components";
 import { ChoiceDialog } from "../../../../components/ui";
+import { handleRefreshKey } from "../../../../components/data-table/table-pane";
 import type { PaneProps } from "../../../../types/plugin";
 import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { isPlainKey } from "../../../../utils/keyboard";
+import { nextHeaderSort, type SortPreference } from "../../../../utils/sort-values";
 import { usePaneStateValue } from "../../../../state/app/context";
 import { useInlineTickerQuoteFact, useInlineTickers } from "../../../../state/hooks/inline-tickers";
 import { collectUniqueTickerSymbols } from "../../../../tickers/tokenizer";
@@ -26,7 +28,6 @@ import type {
   BuildoutList,
   BuildoutRow,
   BuildoutTabId,
-  SortDirection,
 } from "../model/types";
 import {
   BUILDOUT_NAME,
@@ -52,7 +53,6 @@ import {
   type BuildoutOpenTarget,
 } from "../table-model";
 import { tickerSearchText, tickerSymbol } from "../format";
-import { BuildoutPaneHeader } from "./header";
 import {
   activeBuildoutPage,
   renderBuildoutPageStatus,
@@ -89,8 +89,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   const [selectedList, setSelectedList] = useState<BuildoutList | null>(null);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [detailRow, setDetailRow] = useState<BuildoutRow | null>(null);
-  const [sortColumnId, setSortColumnId] = useState<BuildoutColumnId | null>(null);
-  const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
+  const [sort, setSort] = useState<SortPreference<BuildoutColumnId>>({ columnId: null, direction: "asc" });
   const [upgradeBusy, setUpgradeBusy] = useState(false);
   const [upgradeMessage, setUpgradeMessage] = useState<string | null>(null);
   const [favoriteBusyKey, setFavoriteBusyKey] = useState<string | null>(null);
@@ -140,13 +139,12 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     const nextColumn: BuildoutColumnId | null = activeTab === "companies"
       ? selectedList ? "marketCap" : null
       : activeTab === "sites" ? "capture" : "time";
-    setSortColumnId(nextColumn);
-    setSortDirection(defaultSortDirection(nextColumn));
+    setSort({ columnId: nextColumn, direction: defaultSortDirection(nextColumn) });
   }, [activeTab, selectedList?.slug]);
 
   const rows = useMemo(
-    () => sortRows(activeRows(state, activeTab, selectedList), sortColumnId, sortDirection),
-    [activeTab, selectedList, sortColumnId, sortDirection, state],
+    () => sortRows(activeRows(state, activeTab, selectedList), sort.columnId, sort.direction),
+    [activeTab, selectedList, sort, state],
   );
   const columns = useMemo(() => columnsForTab(activeTab, selectedList, canFavorite), [activeTab, canFavorite, selectedList]);
   const selectedRow = rows[selectedIndex] ?? rows[0] ?? null;
@@ -219,15 +217,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     && state.companies.blurredCompanyCount > 0;
 
   const handleHeaderClick = useCallback((columnId: string) => {
-    const nextColumnId = columnId as BuildoutColumnId;
-    setSortColumnId((current) => {
-      if (current === nextColumnId) {
-        setSortDirection((direction) => (direction === "asc" ? "desc" : "asc"));
-        return current;
-      }
-      setSortDirection(defaultSortDirection(nextColumnId));
-      return nextColumnId;
-    });
+    setSort((current) => nextHeaderSort(current, columnId as BuildoutColumnId, { firstDirection: defaultSortDirection }));
   }, []);
 
   const openCompanyList = useCallback((list: BuildoutList) => {
@@ -236,8 +226,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     setDetailRow(null);
     setUpgradeMessage(null);
     setFavoriteMessage(null);
-    setSortColumnId("marketCap");
-    setSortDirection("desc");
+    setSort({ columnId: "marketCap", direction: "desc" });
     resetCompanies();
   }, [resetCompanies]);
 
@@ -247,8 +236,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     setDetailRow(null);
     setUpgradeMessage(null);
     setFavoriteMessage(null);
-    setSortColumnId(null);
-    setSortDirection("asc");
+    setSort({ columnId: null, direction: "asc" });
   }, []);
 
   const activateRow = useCallback((row: BuildoutRow) => {
@@ -360,14 +348,8 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
       event.stopPropagation?.();
       return true;
     }
-    if (isPlainKey(event, "r")) {
-      event.preventDefault?.();
-      event.stopPropagation?.();
-      refresh();
-      return true;
-    }
     // Esc and Backspace close an open list through the stack below.
-    return false;
+    return handleRefreshKey(event, refresh, { stopPropagation: true });
   }, [refresh, selectedRow, toggleFavoriteRow]);
 
   const handleDetailKeyDown = useCallback((event: DataTableKeyEvent) => {
@@ -387,13 +369,14 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
     toggleFavorite,
   }), [favoriteBusyKey, toggleFavorite]);
 
-  const tabsInHeader = usePaneHeaderTabs({
+  const { strip: tabStrip, rows: tabRows } = usePaneTabs({
     tabs,
     activeValue: activeTab,
     onSelect: (value) => setActiveTab(value as BuildoutTabId),
     focused: focused && !detailRow,
+    compact: true,
+    variant: "bare",
   });
-  const tabRows = tabsInHeader ? 0 : 1;
 
   if (state.status === "loading") {
     return <PaneStatusBody loading subject={BUILDOUT_NAME} width={width} height={height} />;
@@ -432,11 +415,12 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
       onActivate={activateRow}
       // The lists start unsorted, and every table sorts by its headers.
       sortable
-      sortColumnId={sortColumnId}
-      sortDirection={sortDirection}
+      sortColumnId={sort.columnId}
+      sortDirection={sort.direction}
       onHeaderClick={handleHeaderClick}
       getItemKey={rowKey}
       renderCell={renderCell}
+      selectedTextOverridesCellColor
       emptyContent={renderBuildoutPageStatus(state, activeTab, selectedList)}
       emptyStateTitle={selectedList ? "No companies" : "No rows"}
       onRootKeyDown={handleRootKeyDown}
@@ -452,13 +436,7 @@ export function BuildoutPane({ focused, width, height }: PaneProps) {
   // own detail. The outer stack only listens while the inner detail is closed.
   return (
     <Box flexDirection="column" width={width} height={height} overflow="hidden">
-      {!tabsInHeader && (
-        <BuildoutPaneHeader
-          activeTab={activeTab}
-          focused={focused && !detailRow}
-          onSelectTab={setActiveTab}
-        />
-      )}
+      {tabStrip && <Box height={1}>{tabStrip}</Box>}
       <PageStackView
         focused={focused && !detailRow}
         detailOpen={listOpen}

package/src/plugins/builtin/buildout/table-model.ts

@@ -7,8 +7,8 @@ import type {
   BuildoutRow,
   BuildoutTabId,
   SortComparable,
-  SortDirection,
 } from "./model/types";
+import type { SortDirection } from "../../../utils/sort-values";
 import { metricNumber, sourceDetailEntries, textOrNull, tickerSymbol } from "./format";
 
 export const tabs: Array<{ label: string; value: BuildoutTabId }> = [

package/src/plugins/builtin/builtin-plugin-meta.ts

@@ -0,0 +1,51 @@
+// Identity of the built-in composite plugins, shared by the native catalog and
+// the browser catalog (catalog-browser.ts). Keep this file import-free so the
+// browser catalog can read it without pulling in native-only modules.
+//
+// Market Overview and Macro ship fewer panes on the web, so each catalog gives
+// them its own description rather than advertising panes it lacks.
+
+export const applicationPluginMeta = {
+  id: "application",
+  name: "Application",
+  version: "1.0.0",
+  description: "Core layout, help, and release information.",
+};
+
+export const portfolioPluginMeta = {
+  id: "portfolio",
+  name: "Portfolio",
+  version: "1.0.0",
+  description: "Portfolio and watchlist management, analytics, and position sizing.",
+  toggleable: true,
+};
+
+export const tickerResearchPluginMeta = {
+  id: "ticker-research",
+  name: "Ticker Research",
+  version: "1.0.0",
+  description: "Company research workspace: overview, charts, financials, filings, ownership, options, analyst research, and events.",
+  toggleable: true,
+};
+
+export const newsPluginMeta = {
+  id: "news",
+  name: "News",
+  version: "1.0.0",
+  description: "Market news wire and company news for each ticker.",
+  toggleable: true,
+};
+
+export const marketOverviewPluginMeta = {
+  id: "market-overview",
+  name: "Market Overview",
+  version: "1.0.0",
+  toggleable: true,
+};
+
+export const macroPluginMeta = {
+  id: "macro",
+  name: "Macro",
+  version: "1.0.0",
+  toggleable: true,
+};