gloomberb 0.5.0 → 0.6.0

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

@@ -0,0 +1,896 @@
+import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { Box, ScrollBox, Text, TextAttributes, Textarea, useRendererHost, type TextareaRenderable } from "../../ui";
+import { useShortcut } from "../../react/input";
+import {
+  DataTableStackView,
+  EmptyState,
+  SegmentedControl,
+  Tabs,
+  TickerBadgeList,
+  usePaneFooter,
+  type DataTableCell,
+  type DataTableColumn,
+  type DataTableKeyEvent,
+} from "../../components";
+import type { DetailTabProps, PaneProps } from "../../types/plugin";
+import { usePaneInstance, usePaneInstanceId, usePaneTicker } from "../../state/app-context";
+import { usePluginPaneState, usePluginState } from "../plugin-runtime";
+import { TickerBadgeText } from "../../components/ticker-badge-text";
+import { ExternalLinkText, RemoteImage } from "../../components/ui";
+import { useInlineTickers } from "../../state/use-inline-tickers";
+import { apiClient, type CloudTweetPayload, type CloudTweetQueryType, type CloudTweetSearchResponse } from "../../utils/api-client";
+import { collectUniqueTickerSymbols } from "../../utils/ticker-tokenizer";
+import { formatCompact, formatTimeAgo } from "../../utils/format";
+import { normalizeTweetText } from "../../utils/tweet-text";
+import { toTimestampMillis } from "../../utils/timestamp";
+import { normalizedHttpUrl } from "../../utils/url";
+import { colors } from "../../theme/colors";
+import { CloudAuthNotice } from "./cloud-auth-actions";
+
+const DEFAULT_TWEET_HOURS = 6;
+const DEFAULT_TWEET_LIMIT = 50;
+const TWEET_SEARCH_SCHEMA_VERSION = 1;
+
+type TweetColumnId = "time" | "author" | "text" | "tickers" | "likes" | "views";
+type TweetColumn = DataTableColumn & { id: TweetColumnId };
+type TweetSortColumnId = "time" | "likes" | "views";
+type TweetSortDirection = "asc" | "desc";
+
+interface TweetLoadState {
+  data: CloudTweetSearchResponse | null;
+  loading: boolean;
+  error: string | null;
+}
+
+interface TwitterFeed {
+  id: string;
+  title: string;
+  query: string;
+  queryType: CloudTweetQueryType;
+  createdAt: number;
+  updatedAt: number;
+  lastSuccessAt: number | null;
+  lastError: string | null;
+}
+
+interface PersistedTwitterFeedState {
+  feeds: TwitterFeed[];
+}
+
+interface FeedEditorState {
+  mode: "create" | "edit";
+  feedId: string | null;
+  query: string;
+  queryType: CloudTweetQueryType;
+  key: string;
+  error: string | null;
+}
+
+const EMPTY_FEED_STATE: PersistedTwitterFeedState = { feeds: [] };
+let nextTwitterFeedId = 1;
+let nextTwitterEditorId = 1;
+
+function generateFeedId(): string {
+  return `${Date.now()}-${nextTwitterFeedId++}`;
+}
+
+function generateEditorKey(): string {
+  return `twitter-editor-${Date.now()}-${nextTwitterEditorId++}`;
+}
+
+function truncateWithEllipsis(text: string, width: number): string {
+  if (width <= 0) return "";
+  if (text.length <= width) return text;
+  if (width <= 3) return text.slice(0, width);
+  return `${text.slice(0, width - 3)}...`;
+}
+
+function deriveFeedTitle(query: string): string {
+  const tickers = collectUniqueTickerSymbols([query]);
+  if (tickers.length > 0) return tickers.slice(0, 3).map((ticker) => `$${ticker}`).join(" ");
+  return truncateWithEllipsis(query.replace(/\s+/g, " ").trim(), 24) || "X Feed";
+}
+
+function createFeed(query: string, queryType: CloudTweetQueryType): TwitterFeed {
+  const now = Date.now();
+  return {
+    id: generateFeedId(),
+    title: deriveFeedTitle(query),
+    query,
+    queryType,
+    createdAt: now,
+    updatedAt: now,
+    lastSuccessAt: null,
+    lastError: null,
+  };
+}
+
+function normalizeFeeds(value: unknown): TwitterFeed[] {
+  const entries = Array.isArray((value as PersistedTwitterFeedState | undefined)?.feeds)
+    ? (value as PersistedTwitterFeedState).feeds
+    : [];
+  return entries
+    .filter((entry): entry is TwitterFeed => (
+      !!entry
+      && typeof entry === "object"
+      && typeof entry.id === "string"
+      && typeof entry.query === "string"
+    ))
+    .map((entry) => ({
+      ...entry,
+      title: typeof entry.title === "string" && entry.title.trim() ? entry.title : deriveFeedTitle(entry.query),
+      queryType: entry.queryType === "Top" ? "Top" : "Latest",
+      createdAt: typeof entry.createdAt === "number" ? entry.createdAt : Date.now(),
+      updatedAt: typeof entry.updatedAt === "number" ? entry.updatedAt : Date.now(),
+      lastSuccessAt: typeof entry.lastSuccessAt === "number" ? entry.lastSuccessAt : null,
+      lastError: typeof entry.lastError === "string" ? entry.lastError : null,
+    }));
+}
+
+function formatRelativeShort(value: string): string {
+  return formatTimeAgo(value).replace(" ago", "").replace("just now", "<1m");
+}
+
+function formatMetric(value: number | null | undefined): string {
+  if (value == null) return "-";
+  if (Math.abs(value) >= 1000) return formatCompact(value);
+  return String(value);
+}
+
+function normalizeTweetDisplayText(value: string): string {
+  return normalizeTweetText(value, { preserveLineBreaks: true });
+}
+
+function normalizeTweetCellText(value: string): string {
+  return normalizeTweetText(value);
+}
+
+function tweetTickers(tweet: CloudTweetPayload): string[] {
+  return collectUniqueTickerSymbols([normalizeTweetDisplayText(tweet.text)]);
+}
+
+function tweetCreatedAtMs(tweet: CloudTweetPayload): number {
+  const ms = toTimestampMillis(tweet.createdAt);
+  return Number.isFinite(ms) ? ms : 0;
+}
+
+function compareNullableNumber(
+  left: number | null | undefined,
+  right: number | null | undefined,
+  sortDirection: TweetSortDirection,
+): number {
+  if (left == null && right == null) return 0;
+  if (left == null) return 1;
+  if (right == null) return -1;
+  const comparison = left - right;
+  return sortDirection === "asc" ? comparison : -comparison;
+}
+
+function isTweetSortColumnId(columnId: string): columnId is TweetSortColumnId {
+  return columnId === "time" || columnId === "likes" || columnId === "views";
+}
+
+function compareTweets(
+  left: CloudTweetPayload,
+  right: CloudTweetPayload,
+  sortColumnId: TweetSortColumnId,
+  sortDirection: TweetSortDirection,
+): number {
+  let comparison = 0;
+  switch (sortColumnId) {
+    case "time":
+      comparison = tweetCreatedAtMs(left) - tweetCreatedAtMs(right);
+      if (comparison !== 0) {
+        return sortDirection === "asc" ? comparison : -comparison;
+      }
+      break;
+    case "likes":
+      comparison = compareNullableNumber(left.metrics.likes, right.metrics.likes, sortDirection);
+      break;
+    case "views":
+      comparison = compareNullableNumber(left.metrics.views, right.metrics.views, sortDirection);
+      break;
+  }
+
+  if (comparison !== 0) return comparison;
+
+  return tweetCreatedAtMs(right) - tweetCreatedAtMs(left);
+}
+
+function sortedTweets(
+  tweets: CloudTweetPayload[],
+  sortColumnId: TweetSortColumnId,
+  sortDirection: TweetSortDirection,
+): CloudTweetPayload[] {
+  return [...tweets].sort((left, right) => compareTweets(left, right, sortColumnId, sortDirection));
+}
+
+function mediaImageUrl(value: unknown): string | null {
+  const directUrl = normalizedHttpUrl(value);
+  if (directUrl) return directUrl;
+  if (!value || typeof value !== "object") return null;
+
+  const record = value as Record<string, unknown>;
+  return normalizedHttpUrl(record.mediaUrl)
+    ?? normalizedHttpUrl(record.media_url_https)
+    ?? normalizedHttpUrl(record.media_url)
+    ?? normalizedHttpUrl(record.previewImageUrl)
+    ?? normalizedHttpUrl(record.preview_image_url)
+    ?? normalizedHttpUrl(record.url);
+}
+
+function nestedMedia(record: Record<string, unknown>, key: string): unknown {
+  const value = record[key];
+  return value && typeof value === "object" ? (value as Record<string, unknown>).media : undefined;
+}
+
+function tweetImageUrls(tweet: CloudTweetPayload): string[] {
+  const record = tweet as unknown as Record<string, unknown>;
+  const candidates = [
+    record.media,
+    record.photos,
+    record.images,
+    nestedMedia(record, "entities"),
+    nestedMedia(record, "extendedEntities"),
+    nestedMedia(record, "extended_entities"),
+  ];
+  const urls = new Set<string>();
+  for (const candidate of candidates) {
+    const entries = Array.isArray(candidate) ? candidate : candidate == null ? [] : [candidate];
+    for (const entry of entries) {
+      const url = mediaImageUrl(entry);
+      if (url) urls.add(url);
+    }
+  }
+  return [...urls];
+}
+
+function buildTweetColumns(width: number): TweetColumn[] {
+  const timeWidth = 7;
+  const authorWidth = 16;
+  const tickersWidth = 24;
+  const likesWidth = 7;
+  const viewsWidth = 8;
+  const textWidth = Math.max(
+    20,
+    width - timeWidth - authorWidth - tickersWidth - likesWidth - viewsWidth - 9,
+  );
+  return [
+    { id: "time", label: "TIME", width: timeWidth, align: "left" },
+    { id: "author", label: "AUTHOR", width: authorWidth, align: "left" },
+    { id: "text", label: "TWEET", width: textWidth, align: "left" },
+    { id: "tickers", label: "TICKERS", width: tickersWidth, align: "left" },
+    { id: "likes", label: "LIKES", width: likesWidth, align: "right" },
+    { id: "views", label: "VIEWS", width: viewsWidth, align: "right" },
+  ];
+}
+
+function isAuthError(error: string | null): boolean {
+  return !!error && /unauthorized|verification/i.test(error);
+}
+
+function TweetDetail({
+  tweet,
+  width,
+}: {
+  tweet: CloudTweetPayload;
+  width: number;
+}) {
+  const lineWidth = Math.max(1, width - 2);
+  const tweetText = normalizeTweetDisplayText(tweet.text);
+  const imageUrls = tweetImageUrls(tweet);
+  const imageWidth = Math.min(lineWidth, 72);
+  const imageHeight = Math.max(6, Math.min(14, Math.floor(imageWidth * 0.35)));
+  const { catalog, openTicker } = useInlineTickers([tweetText]);
+  const author = tweet.author.userName ? `@${tweet.author.userName}` : tweet.author.name;
+
+  return (
+    <ScrollBox scrollY focusable={false} flexGrow={1} paddingX={1}>
+      <Box flexDirection="column" width={lineWidth} gap={1}>
+        <Box flexDirection="row" height={1}>
+          <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>{author}</Text>
+          <Text fg={colors.textDim}> - {formatTimeAgo(tweet.createdAt)}</Text>
+        </Box>
+        <TickerBadgeText
+          text={tweetText}
+          lineWidth={lineWidth}
+          catalog={catalog}
+          textColor={colors.text}
+          openTicker={openTicker}
+        />
+        {imageUrls.length > 0 ? (
+          <Box flexDirection="column" gap={1}>
+            {imageUrls.slice(0, 4).map((url, index) => (
+              <RemoteImage
+                key={url}
+                src={url}
+                alt={`Tweet image ${index + 1}`}
+                width={imageWidth}
+                height={imageHeight}
+                label={imageUrls.length > 1 ? `image ${index + 1}` : "image"}
+              />
+            ))}
+          </Box>
+        ) : null}
+        <Box flexDirection="row" height={1}>
+          <Text fg={colors.textDim}>
+            {`likes ${formatMetric(tweet.metrics.likes)}  reposts ${formatMetric(tweet.metrics.retweets)}  replies ${formatMetric(tweet.metrics.replies)}  views ${formatMetric(tweet.metrics.views)}`}
+          </Text>
+        </Box>
+        {tweet.url ? (
+          <Box height={1}>
+            <ExternalLinkText url={tweet.url} label="Open on X" color={colors.textBright} />
+          </Box>
+        ) : null}
+      </Box>
+    </ScrollBox>
+  );
+}
+
+function useTweetSearchData(
+  requestKey: string,
+  load: () => Promise<CloudTweetSearchResponse>,
+  onResult?: (result: CloudTweetSearchResponse) => void,
+  onError?: (message: string) => void,
+) {
+  const [state, setState] = useState<TweetLoadState>({
+    data: null,
+    loading: false,
+    error: null,
+  });
+  const fetchGenRef = useRef(0);
+  const onResultRef = useRef(onResult);
+  const onErrorRef = useRef(onError);
+  onResultRef.current = onResult;
+  onErrorRef.current = onError;
+
+  const reload = useCallback(() => {
+    fetchGenRef.current += 1;
+    const gen = fetchGenRef.current;
+    setState((current) => ({ ...current, loading: true, error: null }));
+    load()
+      .then((data) => {
+        if (fetchGenRef.current !== gen) return;
+        setState({ data, loading: false, error: null });
+        onResultRef.current?.(data);
+      })
+      .catch((error) => {
+        if (fetchGenRef.current !== gen) return;
+        const message = error instanceof Error ? error.message : String(error);
+        setState({ data: null, loading: false, error: message });
+        onErrorRef.current?.(message);
+      });
+  }, [load]);
+
+  useEffect(() => {
+    reload();
+  }, [reload, requestKey]);
+
+  return { ...state, reload };
+}
+
+function TweetSearchTable({
+  focused,
+  width,
+  height,
+  requestKey,
+  footerId,
+  load,
+  onResult,
+  onError,
+}: {
+  focused: boolean;
+  width: number;
+  height: number;
+  requestKey: string;
+  footerId: string;
+  load: () => Promise<CloudTweetSearchResponse>;
+  onResult?: (result: CloudTweetSearchResponse) => void;
+  onError?: (message: string) => void;
+}) {
+  const rendererHost = useRendererHost();
+  const { data, loading, error, reload } = useTweetSearchData(requestKey, load, onResult, onError);
+  const [selectedTweetId, setSelectedTweetId] = useState<string | null>(null);
+  const [detailOpen, setDetailOpen] = useState(false);
+  const [sort, setSort] = useState<{ columnId: TweetSortColumnId; direction: TweetSortDirection }>({
+    columnId: "views",
+    direction: "desc",
+  });
+  const rows = useMemo(() => sortedTweets(data?.tweets ?? [], sort.columnId, sort.direction), [data?.tweets, sort]);
+  const columns = useMemo(() => buildTweetColumns(width), [width]);
+  const tableTickerTexts = useMemo(() => {
+    const seen = new Set<string>();
+    const texts: string[] = [];
+    for (const tweet of rows) {
+      for (const symbol of tweetTickers(tweet)) {
+        if (seen.has(symbol)) continue;
+        seen.add(symbol);
+        texts.push(`$${symbol}`);
+      }
+    }
+    return texts;
+  }, [rows]);
+  const { catalog: tickerCatalog, openTicker } = useInlineTickers(tableTickerTexts);
+  const selectedIndex = rows.findIndex((tweet) => tweet.id === selectedTweetId);
+  const activeIndex = selectedIndex >= 0 ? selectedIndex : rows.length > 0 ? 0 : -1;
+  const selectedTweet = rows[activeIndex] ?? null;
+
+  useEffect(() => {
+    if (rows.length === 0) {
+      if (selectedTweetId !== null) setSelectedTweetId(null);
+      setDetailOpen(false);
+      return;
+    }
+    if (!selectedTweetId || selectedIndex < 0) {
+      setSelectedTweetId(rows[0]!.id);
+    }
+  }, [rows, selectedIndex, selectedTweetId]);
+
+  const openSelectedTweet = useCallback(() => {
+    if (selectedTweet?.url) void rendererHost.openExternal(selectedTweet.url);
+  }, [rendererHost, selectedTweet]);
+
+  const handleHeaderClick = useCallback((columnId: string) => {
+    if (!isTweetSortColumnId(columnId)) return;
+    setSort((current) => (
+      current.columnId === columnId
+        ? { columnId, direction: current.direction === "desc" ? "asc" : "desc" }
+        : { columnId, direction: "desc" }
+    ));
+  }, []);
+
+  const handleRootKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (event.name !== "r") return false;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    reload();
+    return true;
+  }, [reload]);
+
+  const handleDetailKeyDown = useCallback((event: DataTableKeyEvent) => {
+    if (event.name !== "o") return false;
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    openSelectedTweet();
+    return true;
+  }, [openSelectedTweet]);
+
+  usePaneFooter(footerId, () => ({
+    info: [
+      ...(loading ? [{ id: "loading", parts: [{ text: "loading", tone: "muted" as const }] }] : []),
+      ...(error ? [{ id: "error", parts: [{ text: error, tone: "warning" as const }] }] : []),
+    ],
+    hints: [
+      { id: "refresh", key: "r", label: "efresh", onPress: reload },
+      ...(detailOpen ? [{ id: "open", key: "o", label: "pen", onPress: openSelectedTweet, disabled: !selectedTweet?.url }] : []),
+    ],
+  }), [detailOpen, error, footerId, loading, openSelectedTweet, reload, selectedTweet?.url]);
+
+  const renderCell = useCallback((
+    tweet: CloudTweetPayload,
+    column: TweetColumn,
+    _index: number,
+    rowState: { selected: boolean },
+  ): DataTableCell => {
+    const selectedColor = rowState.selected ? colors.selectedText : undefined;
+    switch (column.id) {
+      case "time":
+        return { text: formatRelativeShort(tweet.createdAt), color: selectedColor ?? colors.textDim };
+      case "author":
+        return {
+          text: `@${tweet.author.userName || tweet.author.name}`,
+          color: selectedColor ?? colors.textBright,
+          attributes: TextAttributes.BOLD,
+        };
+      case "text":
+        return { text: normalizeTweetCellText(tweet.text), color: selectedColor ?? colors.text };
+      case "tickers": {
+        const tickers = tweetTickers(tweet);
+        return {
+          text: tickers.map((ticker) => `$${ticker}`).join(" "),
+          content: (
+            <TickerBadgeList
+              symbols={tickers}
+              width={column.width}
+              catalog={tickerCatalog}
+              fallbackColor={selectedColor ?? colors.positive}
+              openTicker={openTicker}
+            />
+          ),
+          color: selectedColor ?? colors.positive,
+        };
+      }
+      case "likes":
+        return { text: formatMetric(tweet.metrics.likes), color: selectedColor ?? colors.textDim };
+      case "views":
+        return { text: formatMetric(tweet.metrics.views), color: selectedColor ?? colors.textDim };
+    }
+  }, [openTicker, tickerCatalog]);
+
+  const emptyContent = error && isAuthError(error)
+    ? <CloudAuthNotice message={error} showSignup />
+    : undefined;
+
+  return (
+    <DataTableStackView<CloudTweetPayload, TweetColumn>
+      focused={focused}
+      detailOpen={detailOpen}
+      onBack={() => setDetailOpen(false)}
+      detailTitle={selectedTweet ? `@${selectedTweet.author.userName || selectedTweet.author.name}` : "Tweet"}
+      detailContent={selectedTweet ? <TweetDetail tweet={selectedTweet} width={width} /> : null}
+      selectedIndex={activeIndex}
+      onSelectIndex={(index) => setSelectedTweetId(rows[index]?.id ?? null)}
+      onActivateIndex={(index) => {
+        const tweet = rows[index];
+        if (!tweet) return;
+        setSelectedTweetId(tweet.id);
+        setDetailOpen(true);
+      }}
+      onRootKeyDown={handleRootKeyDown}
+      onDetailKeyDown={handleDetailKeyDown}
+      rootWidth={width}
+      rootHeight={height}
+      columns={columns}
+      items={rows}
+      sortColumnId={sort.columnId}
+      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 ?? "No tweets"}
+      emptyStateHint={data?.query}
+      showHorizontalScrollbar={false}
+    />
+  );
+}
+
+export function TwitterTickerTab({ focused, width, height }: DetailTabProps) {
+  const { symbol } = usePaneTicker();
+  const load = useCallback(() => {
+    if (!symbol) throw new Error("No ticker selected");
+    return apiClient.getCloudTickerTweets({
+      ticker: symbol,
+      hours: DEFAULT_TWEET_HOURS,
+      limit: DEFAULT_TWEET_LIMIT,
+      includeReplies: false,
+    });
+  }, [symbol]);
+
+  if (!symbol) {
+    return <EmptyState title="No ticker selected." />;
+  }
+
+  return (
+    <TweetSearchTable
+      focused={focused}
+      width={width}
+      height={height}
+      requestKey={`ticker:${symbol}`}
+      footerId="ticker-tweets"
+      load={load}
+    />
+  );
+}
+
+function TwitterFeedEditor({
+  editor,
+  focused,
+  width,
+  textareaRef,
+  onChange,
+}: {
+  editor: FeedEditorState;
+  focused: boolean;
+  width: number;
+  textareaRef: RefObject<TextareaRenderable | null>;
+  onChange: (patch: Partial<FeedEditorState>) => void;
+}) {
+  useEffect(() => {
+    if (focused) textareaRef.current?.focus?.();
+  }, [editor.key, focused, textareaRef]);
+
+  return (
+    <Box flexDirection="column" flexGrow={1} padding={1} gap={1}>
+      <Box height={1} flexDirection="row" gap={1}>
+        <Text fg={colors.textDim}>Mode</Text>
+        <SegmentedControl
+          value={editor.queryType}
+          options={[
+            { label: "Latest", value: "Latest" },
+            { label: "Top", value: "Top" },
+          ]}
+          onChange={(value) => onChange({ queryType: value === "Top" ? "Top" : "Latest" })}
+        />
+      </Box>
+      <Box flexGrow={1} minHeight={5} border borderColor={colors.border} backgroundColor={colors.panel}>
+        <Textarea
+          key={editor.key}
+          ref={textareaRef}
+          initialValue={editor.query}
+          placeholder="$AAPL -filter:replies"
+          focused={focused}
+          textColor={colors.text}
+          placeholderColor={colors.textDim}
+          backgroundColor={colors.panel}
+          flexGrow={1}
+          wrapText
+        />
+      </Box>
+      {editor.error ? (
+        <Text fg={colors.negative}>{editor.error}</Text>
+      ) : (
+        <Text fg={colors.textDim}>{truncateWithEllipsis("Use X advanced search syntax. Example: $AAPL OR $MSFT -filter:replies", Math.max(1, width - 2))}</Text>
+      )}
+    </Box>
+  );
+}
+
+export function TwitterFeedPane({ focused, width, height }: PaneProps) {
+  const paneId = usePaneInstanceId();
+  const paneInstance = usePaneInstance();
+  const [persistedState, setPersistedState] = usePluginState<PersistedTwitterFeedState>(
+    `twitter-feed:${paneId}`,
+    EMPTY_FEED_STATE,
+    { schemaVersion: TWEET_SEARCH_SCHEMA_VERSION },
+  );
+  const [activeFeedId, setActiveFeedId] = usePluginPaneState<string | null>("activeFeedId", null);
+  const [editorState, setEditorState] = useState<FeedEditorState | null>(null);
+  const textareaRef = useRef<TextareaRenderable | null>(null);
+  const initializedRef = useRef(false);
+  const feeds = useMemo(() => normalizeFeeds(persistedState), [persistedState]);
+
+  const updateFeeds = useCallback((updater: (feeds: TwitterFeed[]) => TwitterFeed[]) => {
+    setPersistedState((current) => ({ feeds: updater(normalizeFeeds(current)) }));
+  }, [setPersistedState]);
+
+  useEffect(() => {
+    if (initializedRef.current) return;
+    initializedRef.current = true;
+    if (feeds.length > 0) return;
+    const seedQuery = typeof paneInstance?.params?.query === "string" ? paneInstance.params.query.trim() : "";
+    if (!seedQuery) return;
+    const seedType = paneInstance?.params?.queryType === "Top" ? "Top" : "Latest";
+    const feed = createFeed(seedQuery, seedType);
+    setPersistedState({ feeds: [feed] });
+    setActiveFeedId(feed.id);
+  }, [feeds.length, paneInstance?.params?.query, paneInstance?.params?.queryType, setActiveFeedId, setPersistedState]);
+
+  useEffect(() => {
+    if (feeds.length === 0) {
+      if (activeFeedId !== null) setActiveFeedId(null);
+      return;
+    }
+    if (!activeFeedId || !feeds.some((feed) => feed.id === activeFeedId)) {
+      setActiveFeedId(feeds[0]!.id);
+    }
+  }, [activeFeedId, feeds, setActiveFeedId]);
+
+  const activeFeed = feeds.find((feed) => feed.id === activeFeedId) ?? feeds[0] ?? null;
+
+  const openCreateEditor = useCallback(() => {
+    setEditorState({
+      mode: "create",
+      feedId: null,
+      query: "",
+      queryType: "Latest",
+      key: generateEditorKey(),
+      error: null,
+    });
+  }, []);
+
+  const openEditEditor = useCallback((feed: TwitterFeed | null) => {
+    if (!feed) return;
+    setEditorState({
+      mode: "edit",
+      feedId: feed.id,
+      query: feed.query,
+      queryType: feed.queryType,
+      key: generateEditorKey(),
+      error: null,
+    });
+  }, []);
+
+  const closeEditor = useCallback(() => {
+    textareaRef.current = null;
+    setEditorState(null);
+  }, []);
+
+  const saveEditor = useCallback(() => {
+    if (!editorState) return;
+    const query = textareaRef.current?.editBuffer.getText().trim() || editorState.query.trim();
+    if (!query) {
+      setEditorState((current) => current ? { ...current, error: "Query is required." } : current);
+      return;
+    }
+
+    if (editorState.mode === "create") {
+      const feed = createFeed(query, editorState.queryType);
+      updateFeeds((current) => [...current, feed]);
+      setActiveFeedId(feed.id);
+    } else if (editorState.feedId) {
+      const now = Date.now();
+      updateFeeds((current) => current.map((feed) => (
+        feed.id === editorState.feedId
+          ? {
+            ...feed,
+            query,
+            queryType: editorState.queryType,
+            title: deriveFeedTitle(query),
+            updatedAt: now,
+            lastError: null,
+          }
+          : feed
+      )));
+    }
+
+    closeEditor();
+  }, [closeEditor, editorState, setActiveFeedId, updateFeeds]);
+
+  const removeFeed = useCallback((feedId: string) => {
+    updateFeeds((current) => current.filter((feed) => feed.id !== feedId));
+    if (activeFeedId === feedId) {
+      const next = feeds.filter((feed) => feed.id !== feedId)[0] ?? null;
+      setActiveFeedId(next?.id ?? null);
+    }
+  }, [activeFeedId, feeds, setActiveFeedId, updateFeeds]);
+
+  const cycleFeeds = useCallback((direction: -1 | 1) => {
+    if (!activeFeed || feeds.length <= 1) return;
+    const index = feeds.findIndex((feed) => feed.id === activeFeed.id);
+    const nextIndex = (index + direction + feeds.length) % feeds.length;
+    setActiveFeedId(feeds[nextIndex]!.id);
+  }, [activeFeed, feeds, setActiveFeedId]);
+
+  useShortcut((event) => {
+    if (!focused) return;
+
+    if (editorState) {
+      if (event.name === "escape") {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        closeEditor();
+      }
+      if (event.ctrl && event.name === "s") {
+        event.preventDefault?.();
+        event.stopPropagation?.();
+        saveEditor();
+      }
+      return;
+    }
+
+    if (event.name === "n") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      openCreateEditor();
+      return;
+    }
+    if (event.name === "e") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      openEditEditor(activeFeed);
+      return;
+    }
+    if (event.name === "d" && activeFeed) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      removeFeed(activeFeed.id);
+      return;
+    }
+    if (event.name === "[") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      cycleFeeds(-1);
+      return;
+    }
+    if (event.name === "]") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      cycleFeeds(1);
+    }
+  });
+
+  const activeFeedIdValue = activeFeed?.id ?? null;
+  const activeFeedQuery = activeFeed?.query ?? null;
+  const activeFeedQueryType = activeFeed?.queryType ?? "Latest";
+  const loadActiveFeed = useCallback(() => {
+    if (!activeFeedQuery) throw new Error("No X feed selected");
+    return apiClient.searchCloudTweets({
+      query: activeFeedQuery,
+      queryType: activeFeedQueryType,
+      hours: DEFAULT_TWEET_HOURS,
+      limit: DEFAULT_TWEET_LIMIT,
+    });
+  }, [activeFeedQuery, activeFeedQueryType]);
+
+  const markFeedResult = useCallback((result: CloudTweetSearchResponse) => {
+    if (!activeFeedIdValue) return;
+    const now = Date.now();
+    updateFeeds((current) => current.map((feed) => (
+      feed.id === activeFeedIdValue
+        ? { ...feed, lastSuccessAt: now, lastError: null, title: deriveFeedTitle(result.query) }
+        : feed
+    )));
+  }, [activeFeedIdValue, updateFeeds]);
+
+  const markFeedError = useCallback((message: string) => {
+    if (!activeFeedIdValue) return;
+    updateFeeds((current) => current.map((feed) => (
+      feed.id === activeFeedIdValue ? { ...feed, lastError: message } : feed
+    )));
+  }, [activeFeedIdValue, updateFeeds]);
+
+  usePaneFooter("twitter-feed", () => ({
+    info: activeFeed
+      ? [
+        { id: "mode", parts: [{ text: activeFeed.queryType, tone: "value" }] },
+        ...(activeFeed.lastSuccessAt ? [{ id: "last", parts: [{ text: `ran ${formatTimeAgo(new Date(activeFeed.lastSuccessAt))}`, tone: "muted" as const }] }] : []),
+      ]
+      : [],
+    hints: editorState
+      ? [
+        { id: "save", key: "Ctrl+S", label: "save", onPress: saveEditor },
+        { id: "cancel", key: "Esc", label: "cancel", onPress: closeEditor },
+      ]
+      : [
+        { id: "new", key: "n", label: "ew", onPress: openCreateEditor },
+        { id: "edit", key: "e", label: "dit", onPress: () => openEditEditor(activeFeed), disabled: !activeFeed },
+        { id: "delete", key: "d", label: "elete", onPress: activeFeed ? () => removeFeed(activeFeed.id) : undefined, disabled: !activeFeed },
+      ],
+  }), [activeFeed, closeEditor, editorState, openCreateEditor, openEditEditor, removeFeed, saveEditor]);
+
+  return (
+    <Box flexDirection="column" width={width} height={height}>
+      <Box height={1}>
+        <Tabs
+          tabs={feeds.map((feed) => ({
+            label: truncateWithEllipsis(feed.title, 18),
+            value: feed.id,
+            onClose: editorState ? undefined : removeFeed,
+            onDoubleClick: (id) => openEditEditor(feeds.find((feed) => feed.id === id) ?? null),
+          }))}
+          activeValue={activeFeed?.id ?? null}
+          onSelect={(id) => {
+            if (editorState) return;
+            setActiveFeedId(id);
+          }}
+          compact
+          variant="pill"
+          closeMode="active"
+          onAdd={editorState ? undefined : openCreateEditor}
+        />
+      </Box>
+
+      {editorState ? (
+        <TwitterFeedEditor
+          editor={editorState}
+          focused={focused}
+          width={width}
+          textareaRef={textareaRef}
+          onChange={(patch) => setEditorState((current) => current ? { ...current, ...patch, error: null } : current)}
+        />
+      ) : !activeFeed ? (
+        <Box padding={1} flexGrow={1}>
+          <EmptyState title="No X feeds yet." hint="Use + or TWIT <query>." />
+        </Box>
+      ) : (
+        <TweetSearchTable
+          focused={focused}
+          width={width}
+          height={Math.max(1, height - 1)}
+          requestKey={`feed:${activeFeed.id}:${activeFeed.query}:${activeFeed.queryType}`}
+          footerId="twitter-feed-search"
+          load={loadActiveFeed}
+          onResult={markFeedResult}
+          onError={markFeedError}
+        />
+      )}
+    </Box>
+  );
+}