managarten/memoro/apps/mobile/docs/REALTIME_BROADCAST_FIX.md

Realtime Broadcast Fix - Implementation Summary

Issue Description

The memo list and memo preview components were not updating in real-time when status changes occurred on the Supabase backend, particularly for operations performed by edge functions using service_role credentials.

Root Cause

Supabase Realtime respects RLS (Row Level Security) policies even for service_role operations. This means that when edge functions (running with service_role credentials) update memo records, the postgres_changes realtime subscriptions don't fire for regular users because the RLS policies filter them out.

Solution Implemented

Implemented a hybrid subscription model combining:

1. postgres_changes subscriptions - For user-initiated direct updates
2. Broadcast channel subscriptions - For service_role edge function updates

Edge Functions (Backend)

Edge functions already send broadcasts to memo-updates-{memoId} channels when they complete processing:

• batch-transcribe-callback/index.ts - Sends broadcasts after transcription
• headline/index.ts - Sends broadcasts after headline generation
• translate/index.ts - Sends broadcasts after translation
• blueprint/index.ts - Sends broadcasts after blueprint processing

Client Components (Frontend)

Files Modified:

1. /memoro_app/components/molecules/MemoList.tsx
2. /memoro_app/components/molecules/MemoPreview.tsx

MemoList.tsx Changes

Import Added:

import { memoRealtimeService } from '~/features/memos/services/memoRealtimeService';

New useEffect Hook (lines 387-437):

useEffect(() => {
  const unsubscribeFunctions: (() => void)[] = [];

  // Subscribe to broadcasts for all visible memos
  memos.forEach((memo) => {
    const unsubscribe = memoRealtimeService.subscribeToBroadcastChannel(
      `memo-updates-${memo.id}`,
      async (payload) => {
        console.log('MemoList: Received broadcast for memo', memo.id, payload);

        try {
          // Fetch fresh memo data from Supabase
          const supabase = await getAuthenticatedClient();
          const { data: updatedMemo, error } = await supabase
            .from('memos')
            .select('*')
            .eq('id', memo.id)
            .single();

          if (error) {
            console.error('MemoList: Error fetching updated memo after broadcast:', error);
            return;
          }

          if (updatedMemo) {
            // Update the memo in the list immediately
            setMemos(prevMemos =>
              prevMemos.map(m => m.id === memo.id ? updatedMemo : m)
            );

            console.log('MemoList: Updated memo from broadcast', {
              id: updatedMemo.id,
              title: updatedMemo.title,
              headlineStatus: updatedMemo.metadata?.processing?.headline_and_intro?.status
            });
          }
        } catch (error) {
          console.error('MemoList: Error processing broadcast update:', error);
        }
      }
    );

    unsubscribeFunctions.push(unsubscribe);
  });

  // Cleanup on unmount or memo list change
  return () => {
    unsubscribeFunctions.forEach(unsub => unsub());
  };
}, [memos.map(m => m.id).join(',')]); // Re-subscribe when memo IDs change

MemoPreview.tsx Changes

Import Added:

import { memoRealtimeService } from '~/features/memos/services/memoRealtimeService';

New useEffect Hook (lines 242-287):

useEffect(() => {
  if (!memo?.id) return;

  const unsubscribe = memoRealtimeService.subscribeToBroadcastChannel(
    `memo-updates-${memo.id}`,
    async (payload) => {
      console.log('MemoPreview: Received broadcast for memo', memo.id, payload);

      try {
        // Fetch fresh memo data from Supabase
        const supabase = await getAuthenticatedClient();
        const { data: updatedMemo, error } = await supabase
          .from('memos')
          .select('*')
          .eq('id', memo.id)
          .single();

        if (error) {
          console.error('MemoPreview: Error fetching updated memo after broadcast:', error);
          return;
        }

        if (updatedMemo) {
          // If this is the latest memo on recording page, update it in the store
          if (reactToGlobalRecordingStatus) {
            setLatestMemo(updatedMemo);
          }

          console.log('MemoPreview: Updated memo from broadcast', {
            id: updatedMemo.id,
            title: updatedMemo.title,
            headlineStatus: updatedMemo.metadata?.processing?.headline_and_intro?.status
          });

          // The useMemoProcessing hook will automatically recalculate displayTitle
          // based on the updated memo state
        }
      } catch (error) {
        console.error('MemoPreview: Error processing broadcast update:', error);
      }
    }
  );

  return () => unsubscribe();
}, [memo?.id, reactToGlobalRecordingStatus, setLatestMemo]);

How It Works

Data Flow

Edge Function (service_role)
    ↓
Updates Memo in Database
    ↓
Sends Broadcast to memo-updates-{memoId}
    ↓
MemoList/MemoPreview receives broadcast
    ↓
Fetches fresh memo data from Supabase
    ↓
Updates local component state
    ↓
UI re-renders with new title/status

Key Features

1. Automatic Subscription Management

   • Subscriptions created when component mounts or memo list changes
   • Automatic cleanup when component unmounts
   • Re-subscribes when memo IDs change

2. Error Handling

   • Try-catch blocks around all async operations
   • Detailed error logging for debugging
   • Graceful degradation if broadcast fails

3. Performance Optimization

   • Only subscribes to visible memos in the list
   • Immediate state updates without batching delay
   • Leverages existing memoRealtimeService infrastructure

4. Comprehensive Logging

   • Broadcasts received logged with payload details
   • Updated memo data logged for verification
   • Errors logged with context

Testing

Manual Testing Steps

1. Create a new memo via recording

   • Verify memo appears in list with "Transcribing Memo" status
   • Wait for transcription to complete
   • Verify title updates to "Generating Headline"
   • Wait for headline generation
   • Verify title updates to generated headline

2. Check MemoPreview on recording page

   • Create new memo
   • Observe realtime title updates
   • Verify processing status changes

3. Check MemoList in memo index page

   • Navigate to memo list
   • Create new memo in another tab/device
   • Verify new memo appears in list
   • Verify title updates as processing completes

Expected Console Output

When broadcast received:

MemoList: Received broadcast for memo {memoId} {payload}
MemoList: Updated memo from broadcast {id, title, headlineStatus}

Benefits

1. Solves RLS Limitation

   • Works around Supabase Realtime RLS restriction
   • Ensures updates from service_role operations reach clients

2. Maintains Existing Functionality

   • postgres_changes subscriptions still active for direct updates
   • Hybrid approach provides redundancy

3. Follows Established Pattern

   • Uses same pattern as home screen (already working)
   • Leverages existing memoRealtimeService

4. Low Risk

   • Additive changes only, no removal of existing code
   • Error handling prevents crashes
   • Automatic cleanup prevents memory leaks

Known Limitations

1. Network Dependency

   • Requires active internet connection for broadcasts
   • Falls back to postgres_changes for direct updates

2. Subscription Overhead

   • Creates one broadcast subscription per visible memo
   • Cleaned up automatically when memos change

3. Eventual Consistency

   • Small delay between broadcast and UI update
   • Acceptable for this use case

Future Improvements

1. Add Connection Status Indicator

   • Show user when realtime is disconnected
   • Display "stale data" warning if appropriate

2. Implement Offline Queue

   • Queue updates when offline
   • Sync when connection restored

3. Add Metrics

   • Track broadcast latency
   • Monitor subscription health
   • Alert on failures

Related Documentation

• /memoro_app/docs/SUPABASE_REALTIME_RLS_WORKAROUND.md - Original RLS workaround documentation
• /memoro_app/features/memos/services/memoRealtimeService.ts - Realtime service implementation
• Edge function broadcast implementations in /memoro_edgefunction/supabase/functions-dev/

Implementation Date

October 23, 2025

Contributors

• Claude Code Swarm (Coordinator, Frontend Analyst, Backend Analyst, Solution Architect, Implementation Engineer)