gloomberb 0.8.1 → 0.9.0

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

@@ -1,5 +1,5 @@
 import { Box, Text } from "../../../../ui";
-import { MESSAGE_ACTION_WIDTH, formatInlinePreview, getMessageBodyLines } from "../layout";
+import { MESSAGE_ACTION_WIDTH, formatInlinePreview, getMessageBodyTokenLines } from "../layout";
 import { ChatActionChip } from "./action-chip";
 import { ResponsiveTickerBadgeText } from "./inline-tokens";
 import { getChatMessageRenderState } from "./render-state";
@@ -26,13 +26,19 @@ export function TerminalChatMessage({
   onUserHover,
   onUserHoverEnd,
   beginReplyTo,
+  beginEditMessage,
   jumpToMessage,
+  latestEditableMessageId,
   setHoveredIdx,
 }: TerminalChatMessageProps) {
   const state = getChatMessageRenderState({ msg, index, messages, selectedIdx, hoveredIdx, canSend });
-  const bodyLines = getMessageBodyLines(msg, contentWidth, catalog);
+  const bodyLines = getMessageBodyTokenLines(msg.content, messageBodyWidth, catalog);
+  const canEditMessage = msg.id === latestEditableMessageId;
   const showInlineReplyAction = !state.grouped && state.showReplyAction;
+  const showInlineEditAction = !state.grouped && state.showReplyAction && canEditMessage;
   const showGroupedReplyAction = state.grouped && state.showReplyAction;
+  const showGroupedEditAction = state.grouped && state.showReplyAction && canEditMessage;
+  const groupedActionWidth = MESSAGE_ACTION_WIDTH * Number(showGroupedReplyAction) + MESSAGE_ACTION_WIDTH * Number(showGroupedEditAction);
   const setHovered = () => setHoveredIdx((current) => (current === index ? current : index));
   const clearHovered = () => setHoveredIdx((current) => (current === index ? null : current));
   const messageRowProps = {
@@ -80,17 +86,29 @@ export function TerminalChatMessage({
             {msg.user.username ?? "anon"}
           </Text>
           <Text fg={state.headerStatusColor}> {state.headerStatus}</Text>
-          {showInlineReplyAction && (
+          {(showInlineReplyAction || showInlineEditAction) && (
             <>
               <Text fg={state.headerStatusColor}> </Text>
-              <Box width={MESSAGE_ACTION_WIDTH} height={1}>
-                <ChatActionChip
-                  label="Reply"
-                  width={MESSAGE_ACTION_WIDTH}
-                  emphasized={state.isSelected}
-                  onPress={() => beginReplyTo(index)}
-                />
-              </Box>
+              {showInlineReplyAction && (
+                <Box width={MESSAGE_ACTION_WIDTH} height={1}>
+                  <ChatActionChip
+                    label="Reply"
+                    width={MESSAGE_ACTION_WIDTH}
+                    emphasized={state.isSelected}
+                    onPress={() => beginReplyTo(index)}
+                  />
+                </Box>
+              )}
+              {showInlineEditAction && (
+                <Box width={MESSAGE_ACTION_WIDTH} height={1}>
+                  <ChatActionChip
+                    label="Edit"
+                    width={MESSAGE_ACTION_WIDTH}
+                    emphasized={state.isSelected}
+                    onPress={() => beginEditMessage(index)}
+                  />
+                </Box>
+              )}
             </>
           )}
         </Box>
@@ -106,7 +124,8 @@ export function TerminalChatMessage({
         >
           <Box width={messageBodyWidth} height={1}>
             <ResponsiveTickerBadgeText
-              text={line}
+              tokens={line}
+              prewrapped
               catalog={catalog}
               textColor={state.bodyColor}
               openTicker={openTicker}
@@ -115,14 +134,24 @@ export function TerminalChatMessage({
               onUserHoverEnd={onUserHoverEnd}
             />
           </Box>
-          {lineIndex === 0 && showGroupedReplyAction && (
-            <Box position="absolute" top={0} right={0} width={MESSAGE_ACTION_WIDTH} height={1}>
-              <ChatActionChip
-                label="Reply"
-                width={MESSAGE_ACTION_WIDTH}
-                emphasized={state.isSelected}
-                onPress={() => beginReplyTo(index)}
-              />
+          {lineIndex === 0 && (showGroupedReplyAction || showGroupedEditAction) && (
+            <Box position="absolute" top={0} right={0} width={groupedActionWidth} height={1} flexDirection="row">
+              {showGroupedReplyAction && (
+                <ChatActionChip
+                  label="Reply"
+                  width={MESSAGE_ACTION_WIDTH}
+                  emphasized={state.isSelected}
+                  onPress={() => beginReplyTo(index)}
+                />
+              )}
+              {showGroupedEditAction && (
+                <ChatActionChip
+                  label="Edit"
+                  width={MESSAGE_ACTION_WIDTH}
+                  emphasized={state.isSelected}
+                  onPress={() => beginEditMessage(index)}
+                />
+              )}
             </Box>
           )}
         </Box>

package/src/plugins/builtin/chat/message/types.ts

@@ -14,5 +14,7 @@ export interface ChatMessageBaseProps {
   onUserHover: (user: ChatUserSummary) => void;
   onUserHoverEnd: () => void;
   beginReplyTo: (index: number, options?: { deferFocus?: boolean }) => void;
+  beginEditMessage: (index: number, options?: { deferFocus?: boolean }) => boolean;
   jumpToMessage: (messageId: string) => void;
+  latestEditableMessageId: string | null;
 }

package/src/plugins/builtin/chat/pane.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
-import { setPaneSetting } from "../../../pane-settings";
+import { updatePaneInstance } from "../../../pane-settings";
 import {
   syncConfigActiveLayoutState,
   useAppDispatch,
@@ -12,6 +12,7 @@ import { scheduleConfigSave } from "../../../state/config-save-scheduler";
 import type { PaneProps } from "../../../types/plugin";
 import {
   DEFAULT_CHAT_CHANNEL_ID,
+  formatChatPaneTitle,
   LAST_VISITED_CHAT_CHANNEL_KEY,
   normalizeChannelId,
 } from "./channels";
@@ -22,6 +23,7 @@ interface ChatPaneContentProps {
   focused: boolean;
   channelId?: string;
   onChannelChange?: (channelId: string) => void;
+  onChannelTitleChange?: (title: string) => void;
 }
 
 export function createChatPane(ChatContent: (props: ChatPaneContentProps) => ReactNode) {
@@ -37,9 +39,30 @@ export function createChatPane(ChatContent: (props: ChatPaneContentProps) => Rea
     ));
     const initialChannelIdRef = useRef(normalizeChannelId(rawPaneChannelId ?? lastVisitedChannelId));
     const persistedChannelId = normalizeChannelId(rawPaneChannelId ?? initialChannelIdRef.current);
-    const persistChannelId = useCallback((nextChannelId: string) => {
+    const persistChatPaneState = useCallback((nextChannelId: string, nextTitle?: string) => {
       const currentState = stateRef.current;
-      const layout = setPaneSetting(currentState.config.layout, paneId, "channelId", nextChannelId);
+      const currentPane = currentState.config.layout.instances.find((instance) => instance.instanceId === paneId);
+      const nextTitleValue = nextTitle?.trim() || undefined;
+      const currentPaneChannelId = typeof currentPane?.settings?.channelId === "string"
+        ? normalizeChannelId(currentPane.settings.channelId)
+        : null;
+      const currentLastVisitedChannelId = currentState.config.pluginConfig["gloomberb-cloud"]?.[LAST_VISITED_CHAT_CHANNEL_KEY];
+      if (
+        currentPaneChannelId === nextChannelId
+        && (!nextTitleValue || currentPane?.title === nextTitleValue)
+        && currentLastVisitedChannelId === nextChannelId
+      ) {
+        return;
+      }
+
+      const layout = updatePaneInstance(currentState.config.layout, paneId, (instance) => ({
+        ...instance,
+        title: nextTitleValue ?? instance.title,
+        settings: {
+          ...(instance.settings ?? {}),
+          channelId: nextChannelId,
+        },
+      }));
       const pluginConfig = {
         ...currentState.config.pluginConfig,
         "gloomberb-cloud": {
@@ -66,8 +89,8 @@ export function createChatPane(ChatContent: (props: ChatPaneContentProps) => Rea
 
     useEffect(() => {
       if (rawPaneChannelId) return;
-      persistChannelId(initialChannelIdRef.current);
-    }, [persistChannelId, rawPaneChannelId]);
+      persistChatPaneState(initialChannelIdRef.current, formatChatPaneTitle(undefined, initialChannelIdRef.current));
+    }, [persistChatPaneState, rawPaneChannelId]);
 
     useEffect(() => {
       const normalizedPersisted = normalizeChannelId(persistedChannelId);
@@ -84,8 +107,12 @@ export function createChatPane(ChatContent: (props: ChatPaneContentProps) => Rea
       const normalized = normalizeChannelId(nextChannelId);
       pendingChannelIdRef.current = normalized;
       setLocalChannelId((current) => (current === normalized ? current : normalized));
-      persistChannelId(normalized);
-    }, [persistChannelId]);
+      persistChatPaneState(normalized, formatChatPaneTitle(undefined, normalized));
+    }, [persistChatPaneState]);
+
+    const setChannelTitle = useCallback((nextTitle: string) => {
+      persistChatPaneState(channelId, nextTitle);
+    }, [channelId, persistChatPaneState]);
 
     return (
       <ChatContent
@@ -94,6 +121,7 @@ export function createChatPane(ChatContent: (props: ChatPaneContentProps) => Rea
         focused={focused}
         channelId={channelId}
         onChannelChange={setChannelId}
+        onChannelTitleChange={setChannelTitle}
       />
     );
   };

package/src/plugins/builtin/chat/sidebar.test.tsx

@@ -9,6 +9,7 @@ import { PluginRenderProvider } from "../../runtime";
 import { gloomberbCloudPlugin } from "../cloud";
 import { ChatContent } from "../chat";
 import { chatController } from "./controller";
+import { useChatChannelNavigation } from "./content/channel-navigation";
 import {
   cleanupChatTest,
   createChatTestControls,
@@ -285,6 +286,76 @@ describe("ChatContent channel sidebar", () => {
     expect(setup().captureCharFrame()).toContain("#equities");
   });
 
+  test("coalesces rapid sidebar navigation to the final channel", async () => {
+    const controller = createController({ sessionToken: "token-123" });
+    const channels = [
+      { id: "everyone", name: "everyone", created_at: "2026-03-26T12:10:05.684Z" },
+      { id: "equities", name: "equities", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "options", name: "options", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "macro", name: "macro", created_at: "2026-05-09T00:00:00.000Z" },
+      { id: "crypto", name: "crypto", created_at: "2026-05-09T00:00:00.000Z" },
+    ];
+    const channelChanges: string[] = [];
+    let navigation: ReturnType<typeof useChatChannelNavigation> | null = null;
+    let latestCursorChannelId = "";
+    let latestCommittedChannelId = "";
+
+    function NavigationHarness() {
+      const [channelId, setChannelId] = useState("equities");
+      const channelIdRef = useRef(channelId);
+      channelIdRef.current = channelId;
+      const handleChannelChange = useCallback((nextChannelId: string) => {
+        channelChanges.push(nextChannelId);
+        setChannelId(nextChannelId);
+      }, []);
+      navigation = useChatChannelNavigation({
+        blurInput: () => {},
+        channelId,
+        channelIdRef,
+        channels,
+        channelsLoading: false,
+        closeProfilePopover: () => {},
+        controller,
+        focused: true,
+        inputFocused: false,
+        onChannelChange: handleChannelChange,
+        resetTranscriptSelection: () => {},
+        showChannelSidebar: true,
+      });
+      latestCursorChannelId = navigation.sidebarCursorChannelId;
+      latestCommittedChannelId = channelId;
+
+      return null;
+    }
+
+    await act(async () => {
+      testSetup = await testRender(<NavigationHarness />, {
+        width: 90,
+        height: 12,
+      });
+    });
+
+    await act(async () => {
+      navigation?.focusChannelSidebar();
+      navigation?.moveSidebarChannelSelection("down");
+      navigation?.moveSidebarChannelSelection("down");
+      navigation?.moveSidebarChannelSelection("down");
+      await setup().renderOnce();
+    });
+
+    expect(latestCursorChannelId).toBe("crypto");
+    expect(latestCommittedChannelId).toBe("equities");
+    expect(channelChanges).toEqual([]);
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 180));
+      await setup().renderOnce();
+    });
+
+    expect(channelChanges).toEqual(["crypto"]);
+    expect(latestCommittedChannelId).toBe("crypto");
+  });
+
   test("keeps the channel sidebar visible while a channel loads", async () => {
     const controller = createController({ sessionToken: "token-123" });
     installServerChannels(controller);
@@ -442,6 +513,7 @@ describe("ChatContent channel sidebar", () => {
       await flushFrame();
 
       expect(findPaneInstance(latestState.config.layout, paneInstanceId)?.settings?.channelId).toBe("options");
+      expect(findPaneInstance(latestState.config.layout, paneInstanceId)?.title).toBe("#options");
       expect(latestState.config.pluginConfig["gloomberb-cloud"]?.lastChatChannelId).toBe("options");
       expect(setup().captureCharFrame()).toContain("#options");
     } finally {

package/src/plugins/builtin/chat/status-widget.tsx

@@ -4,12 +4,22 @@ import { colors, hoverBg } from "../../../theme/colors";
 import { Box, Span, Text, TextAttributes, useUiCapabilities } from "../../../ui";
 import { usePluginAppActions } from "../../runtime";
 import { InlineAuthActions } from "../cloud/auth-actions";
+import {
+  findChatPaneInstanceForChannel,
+  getPreferredChatOpenChannelId,
+} from "./channels";
 import { chatController, type ChatController } from "./controller";
 
 interface ChatStatusWidgetProps {
   controller?: Pick<ChatController, "getSnapshot" | "refreshSession" | "subscribe">;
 }
 
+type ChatStatusSnapshot = ReturnType<ChatController["getSnapshot"]>;
+
+function getTotalUnreadCount(snapshot: ChatStatusSnapshot) {
+  return snapshot.channelStates.reduce((total, state) => total + Math.max(0, state.unreadCount), 0);
+}
+
 function CloudStatusIcon() {
   const { nativePaneChrome } = useUiCapabilities();
   if (!nativePaneChrome) {
@@ -43,25 +53,33 @@ function CloudStatusIcon() {
 }
 
 export function ChatStatusWidget({ controller = chatController }: ChatStatusWidgetProps) {
-  const { showPane } = usePluginAppActions();
-  const cloudPluginDisabled = useAppSelector((state) => state.config.disabledPlugins.includes("gloomberb-cloud"));
+  const { createPaneFromTemplate, focusPane } = usePluginAppActions();
+  const config = useAppSelector((state) => state.config);
+  const cloudPluginDisabled = config.disabledPlugins.includes("gloomberb-cloud");
   const initialSnapshot = controller.getSnapshot();
   const [username, setUsername] = useState<string | null>(initialSnapshot.user?.username ?? null);
   const [hasSavedSession, setHasSavedSession] = useState(initialSnapshot.hasSavedSession);
-  const [unreadMentionCount, setUnreadMentionCount] = useState(initialSnapshot.unreadMentionCount);
+  const [snapshot, setSnapshot] = useState(initialSnapshot);
+  const unreadCount = getTotalUnreadCount(snapshot);
   const [hovered, setHovered] = useState(false);
 
   const openChat = (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
     event?.preventDefault?.();
     event?.stopPropagation?.();
-    showPane("chat");
+    const channelId = getPreferredChatOpenChannelId(config, snapshot);
+    const existingInstance = findChatPaneInstanceForChannel(config, channelId);
+    if (existingInstance) {
+      focusPane(existingInstance.instanceId);
+      return;
+    }
+    createPaneFromTemplate("new-chat-pane", { arg: channelId });
   };
 
   useEffect(() => {
-    const unsubscribe = controller.subscribe((snapshot) => {
-      setUsername(snapshot.user?.username ?? null);
-      setHasSavedSession(snapshot.hasSavedSession);
-      setUnreadMentionCount(snapshot.unreadMentionCount);
+    const unsubscribe = controller.subscribe((nextSnapshot) => {
+      setSnapshot(nextSnapshot);
+      setUsername(nextSnapshot.user?.username ?? null);
+      setHasSavedSession(nextSnapshot.hasSavedSession);
     });
     void controller.refreshSession().catch(() => {});
     return unsubscribe;
@@ -84,7 +102,7 @@ export function ChatStatusWidget({ controller = chatController }: ChatStatusWidg
           onMouseOut={() => setHovered((current) => (current ? false : current))}
           onMouseDown={openChat}
         >
-          <Text fg={unreadMentionCount > 0 ? colors.text : colors.textDim}>
+          <Text fg={unreadCount > 0 ? colors.text : colors.textDim}>
             <Span fg={colors.positive}>@</Span>
             {username ? (
               <>
@@ -93,8 +111,8 @@ export function ChatStatusWidget({ controller = chatController }: ChatStatusWidg
               </>
             ) : null}
           </Text>
-          {unreadMentionCount > 0 ? (
-            <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{` [${unreadMentionCount}]`}</Text>
+          {unreadCount > 0 ? (
+            <Text fg={colors.positive} attributes={TextAttributes.BOLD}>{` [${unreadCount}]`}</Text>
           ) : null}
         </Box>
       )}

package/src/plugins/builtin/chat/test-harness.tsx

@@ -20,6 +20,7 @@ const originalConnectChannel = apiClient.connectChannel.bind(apiClient);
 const originalGetChannels = apiClient.getChannels.bind(apiClient);
 const originalGetChatPresence = apiClient.getChatPresence.bind(apiClient);
 const originalUpdateChatChannelState = apiClient.updateChatChannelState.bind(apiClient);
+const originalEditMessage = apiClient.editMessage.bind(apiClient);
 
 export type ChatTestSetup = Awaited<ReturnType<typeof testRender>>;
 
@@ -50,6 +51,7 @@ export async function cleanupChatTest(testSetup: ChatTestSetup | undefined): Pro
   apiClient.getChannels = originalGetChannels;
   apiClient.getChatPresence = originalGetChatPresence;
   apiClient.updateChatChannelState = originalUpdateChatChannelState;
+  apiClient.editMessage = originalEditMessage;
   apiClient.setSessionToken(null);
 
   if (testSetup) {

package/src/plugins/builtin/cloud/plugin.tsx

@@ -13,6 +13,7 @@ import {
 import { registerTwitterFeedFeature } from "../cloud-tweets";
 import {
   buildDmCommandResults,
+  formatChatPaneTitle,
   getLastVisitedChatChannelId,
   hasOnlyDmUsernameArgs,
   normalizeShortcutChannelId,
@@ -50,8 +51,10 @@ export function createGloomberbCloudPlugin({
           const channelId = options?.arg
             ? await chatController.resolveRequiredChannelId(normalizeShortcutChannelId(options.arg))
             : await chatController.resolvePreferredChannelId(getLastVisitedChatChannelId(context.config));
+          const channel = chatController.getChannels().find((entry) => entry.id === channelId);
           return {
             placement: "floating",
+            title: formatChatPaneTitle(channel, channelId),
             settings: { channelId },
           };
         },

package/src/plugins/builtin/cloud-tweets/table.tsx

@@ -297,11 +297,13 @@ export function TweetSearchTable({
       onBack={() => setDetailOpen(false)}
       detailTitle={selectedTweet ? `@${selectedTweet.author.userName || selectedTweet.author.name} - ${formatTimeAgo(selectedTweet.createdAt)}` : "Tweet"}
       detailContent={selectedTweet ? <TweetDetail tweet={selectedTweet} width={width} onOpenUsername={openUsernameFeed} /> : null}
-      selectedIndex={activeIndex}
-      onSelectIndex={(index) => setSelectedTweetId(rows[index]?.id ?? null)}
-      onActivateIndex={(index) => {
-        const tweet = rows[index];
-        if (!tweet) return;
+      selection={{
+        kind: "id",
+        selectedId: selectedTweetId,
+        getId: (tweet) => tweet.id,
+        onChange: (id) => setSelectedTweetId(id),
+      }}
+      onActivate={(tweet) => {
         setSelectedTweetId(tweet.id);
         setDetailOpen(true);
       }}
@@ -316,12 +318,6 @@ export function TweetSearchTable({
       sortDirection={sort.direction}
       onHeaderClick={handleHeaderClick}
       getItemKey={(tweet) => tweet.id}
-      isSelected={(tweet) => tweet.id === selectedTweetId}
-      onSelect={(tweet) => setSelectedTweetId(tweet.id)}
-      onActivate={(tweet) => {
-        setSelectedTweetId(tweet.id);
-        setDetailOpen(true);
-      }}
       renderCell={renderCell}
       emptyContent={emptyContent}
       emptyStateTitle={loading ? "Loading tweets..." : error ?? emptyStateTitle ?? "No tweets"}

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

@@ -262,11 +262,13 @@ export function CongressTradesPane({ focused, width, height }: PaneProps) {
           onBack={() => setDetailMode(null)}
           detailTitle={detailTitle}
           detailContent={detailContent}
-          selectedIndex={selectedTradeIndex}
-          onSelectIndex={(index) => setSelectedTradeId(tradeRows[index]?.id ?? null)}
-          onActivateIndex={(index) => {
-            const trade = tradeRows[index];
-            if (!trade) return;
+          selection={{
+            kind: "id",
+            selectedId: selectedTradeId,
+            getId: (trade) => trade.id,
+            onChange: (id) => setSelectedTradeId(id),
+          }}
+          onActivate={(trade) => {
             setSelectedTradeId(trade.id, { immediate: true });
             setDetailMode({ kind: "trade", tradeId: trade.id });
           }}
@@ -280,12 +282,6 @@ export function CongressTradesPane({ focused, width, height }: PaneProps) {
           sortDirection={tradeSort.direction}
           onHeaderClick={(columnId) => setTradeSort((current) => nextSort(current, columnId as TradeColumnId, columnId === "member" || columnId === "ticker" ? "asc" : "desc"))}
           getItemKey={(trade) => trade.id}
-          isSelected={(trade) => trade.id === selectedTradeId}
-          onSelect={(trade) => setSelectedTradeId(trade.id)}
-          onActivate={(trade) => {
-            setSelectedTradeId(trade.id, { immediate: true });
-            setDetailMode({ kind: "trade", tradeId: trade.id });
-          }}
           renderCell={renderCongressTradeCell}
           emptyStateTitle="No House PTR trades."
           emptyStateHint="Press r to refresh."
@@ -297,11 +293,13 @@ export function CongressTradesPane({ focused, width, height }: PaneProps) {
           onBack={() => setDetailMode(null)}
           detailTitle={detailTitle}
           detailContent={detailContent}
-          selectedIndex={selectedMemberIndex}
-          onSelectIndex={(index) => setSelectedMemberId(memberRows[index]?.id ?? null)}
-          onActivateIndex={(index) => {
-            const member = memberRows[index];
-            if (!member) return;
+          selection={{
+            kind: "id",
+            selectedId: selectedMemberId,
+            getId: (member) => member.id,
+            onChange: (id) => setSelectedMemberId(id),
+          }}
+          onActivate={(member) => {
             setSelectedMemberId(member.id, { immediate: true });
             setDetailMode({ kind: "member", memberId: member.id });
           }}
@@ -315,12 +313,6 @@ export function CongressTradesPane({ focused, width, height }: PaneProps) {
           sortDirection={memberSort.direction}
           onHeaderClick={(columnId) => setMemberSort((current) => nextSort(current, columnId as MemberColumnId, columnId === "member" || columnId === "district" ? "asc" : "desc"))}
           getItemKey={(member) => member.id}
-          isSelected={(member) => member.id === selectedMemberId}
-          onSelect={(member) => setSelectedMemberId(member.id)}
-          onActivate={(member) => {
-            setSelectedMemberId(member.id, { immediate: true });
-            setDetailMode({ kind: "member", memberId: member.id });
-          }}
           renderCell={renderCongressMemberCell}
           emptyStateTitle="No House PTR members."
           emptyStateHint="Press r to refresh."

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

@@ -132,12 +132,15 @@ function EarningsCalendarPane({ focused, width, height }: PaneProps) {
   return (
     <DataTableView<EarningsDisplayRow, EarningsColumn>
       focused={focused}
-      selectedIndex={selectedRowIndex}
-      isNavigable={(row) => row.kind === "event"}
-      onSelectIndex={(_index, row) => {
-        if (row.kind === "event") setSelectedIdx(row.eventIdx);
+      selection={{
+        kind: "index",
+        selectedIndex: selectedRowIndex,
+        onChange: (_index, row) => {
+          if (row.kind === "event") setSelectedIdx(row.eventIdx);
+        },
       }}
-      onActivateIndex={(_index, row) => {
+      isNavigable={(row) => row.kind === "event"}
+      onActivate={(row) => {
         if (row.kind === "event") openEvent(row.event);
       }}
       onRootKeyDown={handleTableKeyDown}
@@ -149,8 +152,6 @@ function EarningsCalendarPane({ focused, width, height }: PaneProps) {
       sortDirection="asc"
       onHeaderClick={() => {}}
       getItemKey={(row) => row.key}
-      isSelected={(row) => row.kind === "event" && row.eventIdx === activeEventIdx}
-      onSelect={selectDisplayRow}
       renderSectionHeader={renderEarningsSectionHeader}
       renderCell={renderCell}
       emptyStateTitle={loading ? "Loading earnings..." : "No upcoming earnings found"}

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

@@ -328,12 +328,12 @@ function EconCalendarPane({ focused, width, height }: PaneProps) {
       rootWidth={width}
       rootHeight={height}
       onRootKeyDown={handleRootKeyDown}
-      selectedIndex={eventIdxToRowIdx.get(selectedIdx) ?? selectedIdx}
-      onSelectIndex={(_index, row) => {
-        if (row.kind === "event") setSelectedIdx(row.eventIdx);
-      }}
-      onActivateIndex={(_index, row) => {
-        if (row.kind === "event") setDetailEvent(row.event);
+      selection={{
+        kind: "index",
+        selectedIndex: eventIdxToRowIdx.get(selectedIdx) ?? selectedIdx,
+        onChange: (_index, row) => {
+          if (row.kind === "event") setSelectedIdx(row.eventIdx);
+        },
       }}
       columns={columns}
       items={rows}
@@ -344,8 +344,6 @@ function EconCalendarPane({ focused, width, height }: PaneProps) {
       headerScrollRef={headerScrollRef}
       scrollRef={scrollRef}
       getItemKey={(row) => row.key}
-      isSelected={(row) => row.kind === "event" && row.eventIdx === selectedIdx}
-      onSelect={selectDisplayRow}
       onActivate={openDisplayRow}
       renderSectionHeader={renderSectionHeader}
       renderCell={renderCell}

package/src/plugins/builtin/help/components.tsx

@@ -29,7 +29,7 @@ export function ShortcutRow({
   return (
     <Box flexDirection="row" gap={1}>
       <Box flexDirection="row" gap={1} flexShrink={0}>
-        {badges.map((badge) => <ShortcutBadge key={badge} label={badge} />)}
+        {badges.map((badge, index) => <ShortcutBadge key={`${badge}:${index}`} label={badge} />)}
       </Box>
       <Box flexGrow={1}>
         <Text fg={colors.text} wrapText>{description}</Text>