SSE vs Fetch Architecture Analysis

Details

Raw Data

{
  "id": "19de63cd-f2f9-49ac-a33d-aca27f86a1fc",
  "type": "general",
  "status": "completed",
  "title": "SSE vs Fetch Architecture Analysis",
  "description": "Discovered dashboard uses fetch instead of EventSource - that's the bug",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\"><h2 style=\"color:#fff;margin:0 0 16px 0;\">🚨 Found the Problem!</h2><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#f44336;margin:0 0 12px 0;\">Dashboard Uses fetch(), Not EventSource</h3><p style=\"color:#e0e0e0;margin:0;\">You're right - SSE has built-in auto-reconnection. But the <strong>dashboard console isn't using SSE properly!</strong></p><table style=\"width:100%;border-collapse:collapse;margin-top:12px;\"><tr style=\"background:#1e1e1e;\"><th style=\"padding:10px;text-align:left;color:#98c379;\">Kontasks Page</th><th style=\"padding:10px;text-align:left;color:#f44336;\">Dashboard Console</th></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\"><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">new EventSource(url)</code></td><td style=\"padding:10px;border-top:1px solid #444;\"><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">fetch().then(reader.read())</code></td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\">Native browser SSE</td><td style=\"padding:10px;border-top:1px solid #444;\">Manual stream reading</td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#98c379;\">✓ Auto-reconnect on error</span></td><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#f44336;\">✗ No auto-reconnect</span></td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#98c379;\">✓ Handles server restart</span></td><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#f44336;\">✗ Dies on restart</span></td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#98c379;\">✓ Built-in retry logic</span></td><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#f44336;\">✗ Manual polling fallback</span></td></tr></table></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#61afef;margin:0 0 12px 0;\">Why fetch() Was Used</h3><p style=\"color:#e0e0e0;margin:0 0 12px 0;\">Probably because the dashboard stream is a <strong>POST request</strong> (sends prompt in body). EventSource only supports GET.</p><pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;color:#e5c07b;\">// Dashboard needs to send prompt\nfetch('/api/konsole/dashboard/stream', {\n  method: 'POST',  // ← EventSource can't do this\n  body: JSON.stringify({ prompt: '...' })\n})</pre></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\"><h3 style=\"color:#98c379;margin:0 0 12px 0;\">SSE vs WebSocket</h3><p style=\"color:#e0e0e0;margin:0;\">Your question about WebSocket is valid:</p><table style=\"width:100%;border-collapse:collapse;margin-top:12px;\"><tr style=\"background:#1e1e1e;\"><th style=\"padding:10px;text-align:left;color:#9ca3af;\">Feature</th><th style=\"padding:10px;text-align:left;color:#61afef;\">SSE</th><th style=\"padding:10px;text-align:left;color:#c678dd;\">WebSocket</th></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\">Direction</td><td style=\"padding:10px;border-top:1px solid #444;\">Server → Client only</td><td style=\"padding:10px;border-top:1px solid #444;\">Bidirectional</td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\">Can send data</td><td style=\"padding:10px;border-top:1px solid #444;\">No (use separate POST)</td><td style=\"padding:10px;border-top:1px solid #444;\">Yes</td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\">Auto-reconnect</td><td style=\"padding:10px;border-top:1px solid #444;\"><span style=\"color:#98c379;\">Built-in</span></td><td style=\"padding:10px;border-top:1px solid #444;\">Manual</td></tr><tr><td style=\"padding:10px;border-top:1px solid #444;\">Complexity</td><td style=\"padding:10px;border-top:1px solid #444;\">Simple</td><td style=\"padding:10px;border-top:1px solid #444;\">More complex</td></tr></table><p style=\"color:#9ca3af;margin:12px 0 0 0;\">SSE is fine for our use case - we just need to use it properly!</p></div><div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\"><h4 style=\"margin:0 0 8px 0;color:#fff;\">The Fix</h4><p style=\"color:#e0e0e0;margin:0;\">Change dashboard architecture to:</p><ol style=\"color:#e0e0e0;margin:8px 0;padding-left:20px;line-height:1.8;\"><li><strong>POST</strong> the prompt to start the request</li><li><strong>EventSource</strong> to a separate SSE endpoint for streaming</li><li>EventSource handles reconnection automatically</li></ol><p style=\"color:#9ca3af;margin:12px 0 0 0;\">This matches how kontasks page works and gets you auto-reconnect for free.</p></div></div>",
    "requestedAt": "2026-01-02T09:40:00Z",
    "requestId": "51ece7f5-5569-44b9-b84b-c560211e35cf",
    "choices": [
      {
        "label": "Fix to use EventSource",
        "value": "fix-eventsource",
        "primary": true
      },
      {
        "label": "Explore WebSocket instead",
        "value": "explore-websocket"
      },
      {
        "label": "Add to backlog",
        "value": "backlog"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T09:13:58.259Z",
  "updatedAt": "2026-01-02T09:13:58.399Z",
  "requestId": "51ece7f5-5569-44b9-b84b-c560211e35cf",
  "scope": "vibetools",
  "tags": [
    "console",
    "architecture",
    "sse"
  ],
  "targetUser": "claude"
}