SSE/State Bug Investigation Plan

Details

Raw Data

{
  "id": "c4df0bbb-3c6d-46bb-bbcc-962699e9da26",
  "type": "general",
  "status": "completed",
  "title": "SSE/State Bug Investigation Plan",
  "description": "Analysis and plan to fix the dashboard console state desync issue",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\"><h2 style=\"color:#ef4444;margin:0 0 16px 0;\">🔍 SSE/State Bug Analysis</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#fff;\">What I Observed in Your Screenshots</h4><table style=\"width:100%;border-collapse:collapse;font-size:0.85rem;\"><tr style=\"border-bottom:1px solid #3d3d5c;\"><td style=\"padding:8px;color:#22c55e;font-weight:bold;\">Image 1 (Working)</td><td style=\"padding:8px;\">Status bar: \"WORKING\" | Header: \"Working... (59s)\" | Both in sync</td></tr><tr><td style=\"padding:8px;color:#ef4444;font-weight:bold;\">Image 2 (Broken)</td><td style=\"padding:8px;\">Status bar: \"READY\" | Header: \"Working...\" | <span style=\"color:#f59e0b;\">OUT OF SYNC</span></td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#ef4444;\">🎯 Root Cause Identified</h4><p style=\"color:#e0e0e0;margin:0 0 12px 0;\"><strong>Dual control of UI state</strong> - The state machine manages state but there are also <strong>30+ direct calls to setStatus()</strong> that bypass it:</p><pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;font-family:monospace;font-size:0.8rem;overflow-x:auto;margin:0;color:#e0e0e0;\"><span style=\"color:#7f848e;\">// State machine says:</span>\nstate.connectionState = 'working'  <span style=\"color:#22c55e;\">✓</span>\n\n<span style=\"color:#7f848e;\">// But direct call overwrites UI:</span>\n<span style=\"color:#ef4444;\">setStatus('Ready', false);  ← BYPASSES STATE MACHINE</span>\n\n<span style=\"color:#7f848e;\">// Result: Header shows \"Working\" (from state)</span>\n<span style=\"color:#7f848e;\">//         Status bar shows \"Ready\" (from direct call)</span></pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#61afef;\">📝 Problematic Code Locations</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">Lines that call setStatus() directly instead of through state machine:</p><ul style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;font-size:0.85rem;\"><li><code>line 2004</code>: setStatus('Ready') after recovery</li><li><code>line 2062</code>: setStatus('Ready') after polling finds output</li><li><code>line 2080</code>: setStatus('Ready') after poll timeout</li><li><code>line 2269</code>: setStatus('Ready') after stream end with output</li><li><code>line 2289</code>: setStatus('Ready') after stream error</li><li><code>line 2665, 2725</code>: setStatus('Ready') in other handlers</li></ul></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#22c55e;\">🛠️ Proposed Fix Strategy</h4><ol style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:2;\"><li><strong>Remove all direct setStatus() calls</strong> - Let state machine be the single source of truth</li><li><strong>Add state machine effect for UI updates</strong> - All UI changes go through dispatch()</li><li><strong>Add diagnostic logging</strong> - Track every state transition with timestamp</li><li><strong>Audit completeRequest() calls</strong> - Ensure they only fire when truly complete</li></ol></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h4 style=\"margin:0 0 12px 0;color:#f59e0b;\">⚠️ Additional Logging Needed</h4><p style=\"color:#9ca3af;margin:0 0 8px 0;\">To catch this in the act, add logs for:</p><pre style=\"background:#1a1a1a;padding:12px;border-radius:4px;font-family:monospace;font-size:0.75rem;overflow-x:auto;margin:0;color:#e0e0e0;\"><span style=\"color:#7f848e;\">// Log every setStatus call with stack trace</span>\nfunction setStatus(status, isLive) {\n  <span style=\"color:#c9a227;\">log('info', 'ui', 'setStatus called', { \n    status, \n    isLive, \n    currentState: state.connectionState,\n    caller: new Error().stack.split('\\n')[2] \n  });</span>\n  ...\n}</pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 12px 0;color:#fff;\">What's Next?</h4><p style=\"color:#9ca3af;margin:0;\">Should I implement the fix now? This involves:</p><ol style=\"margin:8px 0 0 0;padding-left:20px;color:#e0e0e0;line-height:1.8;\"><li>Remove ~30 direct setStatus() calls</li><li>Add UI control state to the state machine</li><li>Make executeEffects() handle all UI updates</li><li>Add diagnostic logging for debugging</li></ol></div></div>",
    "requestedAt": "2026-01-02T09:00:00Z",
    "requestId": "3c0bf982-3c13-4e5c-ab68-4506afd3e278",
    "choices": [
      {
        "label": "Yes, implement fix",
        "value": "implement-state-fix",
        "primary": true
      },
      {
        "label": "Add logging first",
        "value": "add-logging-first"
      },
      {
        "label": "More investigation",
        "value": "more-investigation"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T07:11:21.117Z",
  "updatedAt": "2026-01-02T07:11:21.252Z",
  "requestId": "3c0bf982-3c13-4e5c-ab68-4506afd3e278",
  "scope": "vibetools",
  "tags": [
    "console",
    "sse",
    "state-machine",
    "bug"
  ],
  "targetUser": "claude"
}