gloomberb 0.8.1 → 0.8.2

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

@@ -22,14 +22,20 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
   onUserHover,
   onUserHoverEnd,
   beginReplyTo,
+  beginEditMessage,
   jumpToMessage,
+  latestEditableMessageId,
   registerMessageElement,
 }: ChatMessageBaseProps & {
   registerMessageElement: (messageId: string, node: unknown | null) => void;
 }) {
   const state = getChatMessageRenderState({ msg, index, messages, selectedIdx, hoveredIdx, canSend });
+  const canEditMessage = msg.id === latestEditableMessageId;
   const showInlineReplyAction = !state.grouped && canSend;
+  const showInlineEditAction = !state.grouped && canSend && canEditMessage;
   const showGroupedReplyAction = state.grouped && canSend;
+  const showGroupedEditAction = state.grouped && canSend && canEditMessage;
+  const groupedActionWidth = MESSAGE_ACTION_WIDTH * Number(showGroupedReplyAction) + MESSAGE_ACTION_WIDTH * Number(showGroupedEditAction);
   const rowProps = {
     width: "100%",
     paddingRight: DESKTOP_MESSAGE_RIGHT_PADDING,
@@ -98,21 +104,37 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
             {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}
-                data-gloom-role="chat-message-reply-action"
-              >
-                <ChatActionChip
-                  label="Reply"
+              {showInlineReplyAction && (
+                <Box
+                  width={MESSAGE_ACTION_WIDTH}
+                  height={1}
+                  data-gloom-role="chat-message-reply-action"
+                >
+                  <ChatActionChip
+                    label="Reply"
+                    width={MESSAGE_ACTION_WIDTH}
+                    emphasized={state.isSelected}
+                    onPress={() => beginReplyTo(index)}
+                  />
+                </Box>
+              )}
+              {showInlineEditAction && (
+                <Box
                   width={MESSAGE_ACTION_WIDTH}
-                  emphasized={state.isSelected}
-                  onPress={() => beginReplyTo(index)}
-                />
-              </Box>
+                  height={1}
+                  data-gloom-role="chat-message-reply-action"
+                >
+                  <ChatActionChip
+                    label="Edit"
+                    width={MESSAGE_ACTION_WIDTH}
+                    emphasized={state.isSelected}
+                    onPress={() => beginEditMessage(index)}
+                  />
+                </Box>
+              )}
             </>
           )}
         </Box>
@@ -135,21 +157,32 @@ export const DesktopChatMessage = memo(function DesktopChatMessage({
             onUserHoverEnd={onUserHoverEnd}
           />
         </Box>
-        {showGroupedReplyAction && (
+        {(showGroupedReplyAction || showGroupedEditAction) && (
           <Box
             position="absolute"
             top={0}
             right={0}
-            width={MESSAGE_ACTION_WIDTH}
+            width={groupedActionWidth}
             height={1}
+            flexDirection="row"
             data-gloom-role="chat-message-reply-action"
           >
-            <ChatActionChip
-              label="Reply"
-              width={MESSAGE_ACTION_WIDTH}
-              emphasized={state.isSelected}
-              onPress={() => beginReplyTo(index)}
-            />
+            {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/inline-tokens.tsx

@@ -6,10 +6,12 @@ import { TickerBadge } 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 } from "../../../../utils/inline-content-tokenizer";
+import { tokenizeInlineContent, type InlineContentToken } from "../../../../utils/inline-content-tokenizer";
 
 export function ResponsiveTickerBadgeText({
-  text,
+  text = "",
+  tokens: providedTokens,
+  prewrapped = false,
   catalog,
   textColor,
   openTicker,
@@ -17,7 +19,9 @@ export function ResponsiveTickerBadgeText({
   onUserHover,
   onUserHoverEnd,
 }: {
-  text: string;
+  text?: string;
+  tokens?: readonly InlineContentToken[];
+  prewrapped?: boolean;
   catalog: Record<string, InlineTickerCatalogEntry>;
   textColor: string;
   openTicker: (symbol: string) => void;
@@ -26,19 +30,21 @@ export function ResponsiveTickerBadgeText({
   onUserHoverEnd?: () => void;
 }) {
   const [hoveredSymbol, setHoveredSymbol] = useState<string | null>(null);
-  const tokens = useMemo(() => tokenizeInlineContent(text), [text]);
+  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
-        style={{
-          minWidth: 0,
-          whiteSpace: "pre-wrap",
-          overflowWrap: "anywhere",
-        }}
+        wrapText={!prewrapped}
+        style={prewrapped
+          ? undefined
+          : {
+            minWidth: 0,
+            whiteSpace: "pre-wrap",
+            overflowWrap: "anywhere",
+          }}
       >
         {value}
       </Text>

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

@@ -41,7 +41,11 @@ export function getChatMessageRenderState({
   const isSending = msg.clientStatus === "sending";
   const hasFailed = msg.clientStatus === "failed";
   const selectedTextColor = hasFailed ? colors.negative : colors.selectedText;
-  const headerStatus = isSending ? "sending..." : hasFailed ? "failed" : formatTimeAgo(msg.createdAt);
+  const headerStatus = isSending
+    ? "sending..."
+    : hasFailed
+      ? "failed"
+      : `${formatTimeAgo(msg.createdAt)}${msg.editedAt ? " edited" : ""}`;
 
   return {
     isSelected,

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

@@ -442,6 +442,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"}