Add pagination (10 items) and debug logging for reply filtering

- Implement pagination in x_get_conversations (limit/offset params)
- Default to showing 10 conversations initially
- Show "Load more (X remaining)" button when more items available
- Add debug logging to diagnose why replied-to tweets aren't filtered
- Log user tweets response structure and referenced_tweets field

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: nearestnabors

src/server.ts

@@ -124,10 +124,19 @@ const TOOLS: Tool[] = [
   },
   {
     name: 'x_get_conversations',
-    description: 'Internal tool to fetch conversation data for the UI.',
+    description: 'Internal tool to fetch conversation data for the UI with pagination.',
     inputSchema: {
       type: 'object',
-      properties: {},
+      properties: {
+        limit: {
+          type: 'number',
+          description: 'Maximum number of conversations to return (default: 10)',
+        },
+        offset: {
+          type: 'number',
+          description: 'Number of conversations to skip (for pagination)',
+        },
+      },
       required: [],
     },
     // Hidden from model - only callable by UI apps

src/tools/conversations.ts

@@ -83,11 +83,19 @@ interface ConversationItem {
  * Fetches unreplied mentions and returns data for the conversation list UI
  */
 type FetchResult =
-  | { success: true; data: { conversations: ConversationItem[]; username: string } }
+  | { success: true; data: { conversations: ConversationItem[]; username: string; totalCount: number; hasMore: boolean } }
   | { success: false; content: unknown };
 
+interface FetchOptions {
+  limit?: number;
+  offset?: number;
+}
+
+const DEFAULT_LIMIT = 10;
+
 // Internal function that fetches and returns conversation data
-async function fetchConversations(): Promise<FetchResult> {
+async function fetchConversations(options: FetchOptions = {}): Promise<FetchResult> {
+  const { limit = DEFAULT_LIMIT, offset = 0 } = options;
   // Clean up expired dismissals
   const prunedDismissals = pruneExpiredDismissals();
   if (prunedDismissals > 0) {
@@ -140,6 +148,8 @@ async function fetchConversations(): Promise<FetchResult> {
         data: {
           conversations: [],
           username,
+          totalCount: 0,
+          hasMore: false,
         },
       };
     }
@@ -156,16 +166,30 @@ async function fetchConversations(): Promise<FetchResult> {
     const userTweets = userTweetsResponse.data || [];
     console.error(`[ASSA] Found ${userTweets.length} user tweets`);
 
+    // Debug: log user tweets response structure
+    debugLog('User tweets response structure', {
+      hasData: !!userTweetsResponse.data,
+      tweetCount: userTweets.length,
+      sampleTweet: userTweets[0] ? {
+        id: userTweets[0].id,
+        text: userTweets[0].text?.slice(0, 50),
+        referenced_tweets: userTweets[0].referenced_tweets,
+        in_reply_to_user_id: userTweets[0].in_reply_to_user_id,
+      } : null,
+    });
+
     // 3. Build a set of tweet IDs that the user has replied to
     const repliedToIds = new Set<string>();
     for (const tweet of userTweets) {
       // Check if this tweet is a reply to another tweet
       const replyRef = tweet.referenced_tweets?.find((ref) => ref.type === 'replied_to');
       if (replyRef) {
         repliedToIds.add(replyRef.id);
+        debugLog(`Found reply: ${tweet.id} replied to ${replyRef.id}`);
       }
     }
     console.error(`[ASSA] User has replied to ${repliedToIds.size} tweets`);
+    debugLog('Replied to IDs', Array.from(repliedToIds));
 
     // 4. Build user lookup map for display names
     const userMap = new Map<
@@ -270,11 +294,20 @@ async function fetchConversations(): Promise<FetchResult> {
     // Update last checked timestamp
     updateLastChecked();
 
+    // Apply pagination
+    const totalCount = conversations.length;
+    const paginatedConversations = conversations.slice(offset, offset + limit);
+    const hasMore = offset + limit < totalCount;
+
+    debugLog('Pagination', { totalCount, offset, limit, returning: paginatedConversations.length, hasMore });
+
     return {
       success: true,
       data: {
-        conversations,
+        conversations: paginatedConversations,
         username,
+        totalCount,
+        hasMore,
       },
     };
   } catch (error) {
@@ -358,10 +391,13 @@ export async function xConversations(): Promise<unknown> {
 
 /**
  * Tool: x_get_conversations (for UI only, hidden from model)
- * Returns full conversation data as JSON
+ * Returns full conversation data as JSON with pagination support
  */
-export async function xGetConversations(): Promise<unknown> {
-  const result = await fetchConversations();
+export async function xGetConversations(params?: { limit?: number; offset?: number }): Promise<unknown> {
+  const result = await fetchConversations({
+    limit: params?.limit,
+    offset: params?.offset,
+  });
 
   if (!result.success) {
     // Return JSON error so UI can parse it
@@ -374,6 +410,8 @@ export async function xGetConversations(): Promise<unknown> {
             message: 'Please authenticate with x_auth_status first',
             conversations: [],
             username: '',
+            totalCount: 0,
+            hasMore: false,
           }),
         },
       ],

ui-apps/conversation-list.ts

@@ -34,6 +34,8 @@ interface ConversationItem {
 interface ConversationsData {
   conversations: ConversationItem[];
   username: string;
+  totalCount: number;
+  hasMore: boolean;
 }
 
 // Enable autoResize to let the SDK handle iframe height automatically
@@ -46,6 +48,8 @@ const conversationsListEl = document.getElementById('conversationsList')!;
 const loadMoreBtn = document.getElementById('loadMoreBtn') as HTMLButtonElement;
 
 let currentData: ConversationsData | null = null;
+let currentOffset = 0;
+const PAGE_SIZE = 10;
 
 // Height is now managed automatically by the MCP Apps SDK (autoResize: true)
 
@@ -70,34 +74,45 @@ function formatRelativeTime(dateStr: string): string {
   return date.toLocaleDateString();
 }
 
-function updateLoadMoreButton(count: number): void {
-  if (count === 0) {
+function updateLoadMoreButton(data: ConversationsData): void {
+  const displayedCount = document.querySelectorAll('.conversation-card').length;
+
+  if (displayedCount === 0) {
     // Show button only when empty - lets user check for new mentions
     loadMoreBtn.textContent = 'Check for new mentions';
     loadMoreBtn.classList.add('all-clear');
     loadMoreBtn.classList.remove('hidden');
+  } else if (data.hasMore) {
+    // Show load more button when there are more items
+    const remaining = data.totalCount - displayedCount;
+    loadMoreBtn.textContent = `Load more (${remaining} remaining)`;
+    loadMoreBtn.classList.remove('all-clear', 'hidden');
   } else {
-    // Hide button when conversations are present
+    // Hide button when all loaded
     loadMoreBtn.classList.add('hidden');
   }
 }
 
-function renderConversations(data: ConversationsData): void {
+function renderConversations(data: ConversationsData, append = false): void {
   currentData = data;
   loadingEl.classList.add('hidden');
   contentEl.classList.remove('hidden');
 
-  const count = data.conversations.length;
-  updateLoadMoreButton(count);
+  // Reset offset if not appending
+  if (!append) {
+    currentOffset = data.conversations.length;
+  }
 
-  if (count === 0) {
+  // Check for empty state using totalCount (0 total means nothing to show)
+  if (data.totalCount === 0) {
     conversationsListEl.innerHTML = `
       <div class="empty-state">
         <div class="empty-icon">✨</div>
         <h3>All caught up!</h3>
         <p>No conversations need your attention right now.</p>
       </div>
     `;
+    updateLoadMoreButton(data);
     return;
   }
 
@@ -111,7 +126,7 @@ function renderConversations(data: ConversationsData): void {
       .slice(0, 2);
   }
 
-  conversationsListEl.innerHTML = data.conversations
+  const cardsHtml = data.conversations
     .map((conv) => {
       const relativeTime = formatRelativeTime(conv.created_at);
       const initials = getInitials(conv.author_display_name || conv.author_username || '?');
@@ -155,6 +170,15 @@ function renderConversations(data: ConversationsData): void {
     })
     .join('');
 
+  if (append) {
+    // Append new cards to existing list
+    conversationsListEl.insertAdjacentHTML('beforeend', cardsHtml);
+    currentOffset += data.conversations.length;
+  } else {
+    // Replace entire list
+    conversationsListEl.innerHTML = cardsHtml;
+  }
+
   // Attach event listeners to action buttons
   attachEventListeners();
 
@@ -174,6 +198,9 @@ function renderConversations(data: ConversationsData): void {
       }
     });
   }, 100);
+
+  // Update load more button state
+  updateLoadMoreButton(data);
 }
 
 function attachEventListeners(): void {
@@ -200,9 +227,14 @@ function attachEventListeners(): void {
         card.style.opacity = '0.5';
         setTimeout(() => card.remove(), 300);
 
-        // Update button count
+        // Update button state based on remaining items
         const remaining = document.querySelectorAll('.conversation-card').length - 1;
-        updateLoadMoreButton(remaining);
+        if (currentData) {
+          // Update the data to reflect the removal
+          currentData.totalCount = Math.max(0, currentData.totalCount - 1);
+          currentData.hasMore = currentOffset < currentData.totalCount;
+          updateLoadMoreButton(currentData);
+        }
       } catch (error) {
         btn.textContent = 'Dismiss';
         (btn as HTMLButtonElement).disabled = false;
@@ -324,9 +356,12 @@ function attachEventListeners(): void {
                 card.style.opacity = '0.5';
                 setTimeout(() => card.remove(), 500);
 
-                // Update button count
-                const remaining = document.querySelectorAll('.conversation-card').length - 1;
-                updateLoadMoreButton(remaining);
+                // Update button state based on remaining items
+                if (currentData) {
+                  currentData.totalCount = Math.max(0, currentData.totalCount - 1);
+                  currentData.hasMore = currentOffset < currentData.totalCount;
+                  updateLoadMoreButton(currentData);
+                }
               } catch {
                 // Ignore dismiss errors
               }
@@ -367,25 +402,32 @@ app.ontoolresult = async () => {
   }
 };
 
-// Check for new mentions button (only visible when list is empty)
+// Load more button - either refreshes when empty or loads next page
 loadMoreBtn.addEventListener('click', async () => {
+  const isLoadingMore = currentOffset > 0 && currentData?.hasMore;
   loadMoreBtn.disabled = true;
-  loadMoreBtn.textContent = 'Checking...';
+  loadMoreBtn.textContent = isLoadingMore ? 'Loading...' : 'Checking...';
 
   try {
     const result = await app.callServerTool({
       name: 'x_get_conversations',
-      arguments: {},
+      arguments: isLoadingMore ? { limit: PAGE_SIZE, offset: currentOffset } : {},
     });
 
     const textContent = result.content?.find((c: { type: string }) => c.type === 'text');
     if (textContent && 'text' in textContent) {
       const data = JSON.parse(textContent.text as string) as ConversationsData;
-      renderConversations(data);
+      if (isLoadingMore) {
+        // Append new conversations
+        renderConversations(data, true);
+      } else {
+        // Fresh load
+        renderConversations(data, false);
+      }
     }
   } catch (error) {
-    console.error('[ASSA] Failed to check for mentions:', error);
-    loadMoreBtn.textContent = 'Check for new mentions';
+    console.error('[ASSA] Failed to load conversations:', error);
+    loadMoreBtn.textContent = currentOffset > 0 ? 'Error - try again' : 'Check for new mentions';
   } finally {
     loadMoreBtn.disabled = false;
   }