Last updated: Sep 1, 2025, 01:10 PM UTC

Testing Guide for Message Streaming Performance Improvements

Status: READY FOR TESTING
Date: 2025-01-29
Docker Container: Running on http://localhost:3006
Feature Flag: ENABLE_MESSAGE_STREAMING=true (currently enabled)

What Was Implemented

Phase 1: Foundation Cleanup

  1. Removed legacy workspace references - Cleaned up hardcoded "workspace" terminology
  2. Storage cleanup - Removed problematic localStorage/sessionStorage for chat messages
  3. Fixed useEffect dependencies - Split mega useEffect into 3 focused effects using primitives
  4. Removed unused flags - Eliminated isProcessingWebSocket, isNavigating
  5. Implemented operation state machine - Single state instead of multiple booleans

Phase 2: Message Streaming (CRITICAL)

  1. MessageStreamReader (server/services/message-stream.js) - Incremental JSONL reading
  2. Streaming state in reducer - Added messageStreams structure
  3. APPEND_MESSAGE action - Single message append without array replacement
  4. SmartWatcher (server/services/smart-watcher.js) - Routes by file type
  5. WebSocket handlers (server/websocket/messageStreamHandler.js) - Streams individual messages

Testing Instructions

1. Performance Baseline (Before Improvements)

To test the OLD behavior (for comparison):

  1. Stop the container: docker stop sasha-dev-container
  2. Restart WITHOUT streaming: docker run -d --name sasha-dev-old -p 3006:3005 sasha-local:dev
  3. Open React DevTools → Profiler
  4. Start recording
  5. Send a message to Claude
  6. Stop recording
  7. Count component re-renders (expect 10-20)

2. Test Message Streaming (After Improvements)

Current container already has streaming enabled:

  1. Open http://localhost:3006
  2. Open React DevTools → Profiler
  3. Start recording
  4. Send a message to Claude
  5. Stop recording
  6. Count component re-renders (expect 1-2)

3. Specific Tests to Run

Test A: Onboarding Flow

  1. Clear browser data (Cmd+Shift+Delete)
  2. Visit http://localhost:3006
  3. Complete organization setup
  4. Watch for flashing/re-renders
  5. Expected: Smooth transition, no flashing

Test B: Message Streaming

  1. Select a project
  2. Send "Hello Claude"
  3. Watch message appear
  4. Expected: Message streams in character by character, 1-2 re-renders

Test C: File Changes

  1. Create a new file in project
  2. Watch file tree update
  3. Expected: Only file tree updates, chat doesn't re-render

Test D: Documentation Updates

  1. Save a markdown file in docs/
  2. Expected: Toast notification only, no re-renders

4. Performance Metrics to Measure

Metric Old Behavior New Behavior How to Measure
Re-renders per message 10-20 1-2 React DevTools Profiler
WebSocket payload ~100KB <500 bytes Network tab → WS → Messages
Message display time 800ms <100ms Performance tab timing
Memory usage Growing Stable Performance Monitor

5. Chrome DevTools Measurements

Network Tab (WebSocket)

  1. Open Network tab
  2. Filter by WS
  3. Click on WebSocket connection
  4. Go to Messages tab
  5. Send a message
  6. Check message size (should be <500 bytes)

Performance Tab

  1. Start recording
  2. Send a message
  3. Stop recording
  4. Check:
    • Scripting time
    • Rendering time
    • Painting time

React DevTools

  1. Profiler → Settings → Record why each component rendered
  2. Start profiling
  3. Send message
  4. Stop profiling
  5. Click on components to see render count

Known Issues / Things to Watch For

  1. WebSocket Connection: The full WebSocket infrastructure for file watching isn't fully implemented yet. Message streaming handlers are ready but need to be hooked up to actual file watchers.

  2. Feature Flag: Currently requires ENABLE_MESSAGE_STREAMING=true environment variable

  3. Backward Compatibility: System maintains legacy flags during migration

Docker Commands

# View logs
docker logs -f sasha-dev-container

# Check environment variables
docker exec sasha-dev-container env | grep ENABLE

# Restart with different settings
docker stop sasha-dev-container
docker rm sasha-dev-container
docker run -d --name sasha-dev-container -p 3006:3005 \
  -e ENABLE_MESSAGE_STREAMING=true \
  -v sasha-dev-home:/home/nodejs \
  sasha-local:dev

# Shell into container
docker exec -it sasha-dev-container sh

Success Criteria

Phase 1 Complete: Foundation cleanup done
Phase 2 Complete: Message streaming infrastructure ready
Testing Required: Validate performance improvements
Integration Needed: Hook up file watchers to streaming handlers

Next Steps

  1. Manual Testing: Follow test cases above
  2. Performance Validation: Confirm 1-2 re-renders per message
  3. Integration: Connect existing file watchers to SmartWatcher
  4. Production Rollout: Gradual deployment with feature flag

Expected Results

When fully integrated, you should see:

  • 90% reduction in re-renders (10-20 → 1-2)
  • 99.5% reduction in WebSocket payload (~100KB → <500 bytes)
  • 88% faster message display (800ms → <100ms)
  • No flashing during onboarding or navigation
  • Smooth streaming of Claude's responses