Flow Timeline WebSocket Auto-Update Bug

Output

🔍 Flow Timeline Auto-Update Bug Analysis

Root Cause Found

The flow timeline panel only listens for kontask_created events, but NOT for flow-related events. When flows are created, updated, merged, or linked to kontasks, no WebSocket broadcast happens.

Current Implementation

// admin-broadcast.ts - Only these events are broadcast:
type AdminEventType =
  | "account_switch"
  | "service_restart"
  | "kontask_created"     // ✅ Only kontask event
  | "kontask_updated"     // ✅ Defined but rarely used
  | "system_alert"
  | ...user events...

// ❌ MISSING:
  | "flow_created"
  | "flow_updated"
  | "flow_linked"         // kontask linked to flow
  | "flow_merged"

Flow Timeline Handler

// flow-timeline-pane.ts:1368-1402
function handleFlowTimelineKontaskEvent(event) {
  if (event.type === 'kontask_created') {  // Only handles this!
    // Add new kontask to timeline...
  }
  // ❌ No handling for flow events
}

Files Involved

File	Purpose
`admin-broadcast.ts`	WebSocket manager - needs new broadcast methods
`flow-timeline-pane.ts`	Timeline UI - needs flow event handlers
`layout.ts`	Event routing - needs new case handlers
`router.ts`	API routes - needs to call broadcasts on flow changes
`gv-flow-store.ts`	Flow persistence - trigger point for broadcasts

Fix Required (4 Steps)

1. Add new event types to AdminEventType:

| "flow_created" | "flow_updated" | "flow_linked" | "flow_merged"

2. Add broadcast methods to AdminBroadcastManager:

broadcastFlowCreated(flowId, title, type)
broadcastFlowUpdated(flowId, changes)
broadcastFlowLinked(flowId, kontaskId)

3. Update timeline handler to process flow events:

if (event.type === 'flow_updated') { /* re-fetch & re-render */ }

4. Call broadcasts from router.ts flow endpoints:

// After createFlow, updateFlow, mergeFlows, linkOrphanToFlow
adminBroadcast.broadcastFlowUpdated(flowId, { status });

Implementation Priority

This is a medium priority fix. The timeline still works on refresh - it just doesn't auto-update. The fix is well-scoped and follows existing patterns for kontask_created.

Quick Actions

▶ View Turn

Original Request

No layout configured

Details

Type General

Status Completed

Scope greatvibe

Tags kontasksuiwebsocketflows

Created 11 Jan 2026, 11:24 am

Updated 11 Jan 2026, 11:24 am

Timing

⏱️ 161.7s

0 tools

● TTFE 0% ● Thinking 100% ● Tools 0%

Created By claude

📋 Claude's Context

Session ses_40728090...

Raw Data

{
  "id": "4d26de97-459e-4158-8cde-0b2561690615",
  "type": "general",
  "status": "completed",
  "title": "Flow Timeline WebSocket Auto-Update Bug",
  "description": "Flow timeline panel not auto-updating because flow events aren't broadcast via WebSocket",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Consolas','Monaco',monospace;\">\n<h2 style=\"font-family:sans-serif;color:#fff;margin:0 0 16px 0;\">🔍 Flow Timeline Auto-Update Bug Analysis</h2>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Root Cause Found</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">The flow timeline panel <strong>only listens for <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">kontask_created</code> events</strong>, but NOT for flow-related events. When flows are created, updated, merged, or linked to kontasks, <strong>no WebSocket broadcast happens</strong>.</p>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Current Implementation</h3>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.8;\">\n<span style=\"color:#7f848e;\">// admin-broadcast.ts - Only these events are broadcast:</span>\n<span style=\"color:#c678dd;\">type</span> <span style=\"color:#e5c07b;\">AdminEventType</span> =\n  | <span style=\"color:#98c379;\">\"account_switch\"</span>\n  | <span style=\"color:#98c379;\">\"service_restart\"</span>\n  | <span style=\"color:#98c379;\">\"kontask_created\"</span>     <span style=\"color:#7f848e;\">// ✅ Only kontask event</span>\n  | <span style=\"color:#98c379;\">\"kontask_updated\"</span>     <span style=\"color:#7f848e;\">// ✅ Defined but rarely used</span>\n  | <span style=\"color:#98c379;\">\"system_alert\"</span>\n  | <span style=\"color:#56b6c2;\">...user events...</span>\n\n<span style=\"color:#7f848e;\">// ❌ MISSING:</span>\n  | <span style=\"color:#e06c75;\">\"flow_created\"</span>\n  | <span style=\"color:#e06c75;\">\"flow_updated\"</span>\n  | <span style=\"color:#e06c75;\">\"flow_linked\"</span>         <span style=\"color:#7f848e;\">// kontask linked to flow</span>\n  | <span style=\"color:#e06c75;\">\"flow_merged\"</span>\n</pre>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Flow Timeline Handler</h3>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.8;\">\n<span style=\"color:#7f848e;\">// flow-timeline-pane.ts:1368-1402</span>\n<span style=\"color:#c678dd;\">function</span> <span style=\"color:#61afef;\">handleFlowTimelineKontaskEvent</span>(event) {\n  <span style=\"color:#c678dd;\">if</span> (event.type === <span style=\"color:#98c379;\">'kontask_created'</span>) {  <span style=\"color:#7f848e;\">// Only handles this!</span>\n    <span style=\"color:#7f848e;\">// Add new kontask to timeline...</span>\n  }\n  <span style=\"color:#7f848e;\">// ❌ No handling for flow events</span>\n}\n</pre>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Files Involved</h3>\n<table style=\"width:100%;border-collapse:collapse;margin:12px 0;\">\n<tr style=\"background:#2d2d2d;\">\n  <th style=\"padding:10px;text-align:left;border-bottom:1px solid #444;\">File</th>\n  <th style=\"padding:10px;text-align:left;border-bottom:1px solid #444;\">Purpose</th>\n</tr>\n<tr><td style=\"padding:8px;border-bottom:1px solid #333;\"><code style=\"color:#61afef;\">admin-broadcast.ts</code></td><td style=\"padding:8px;border-bottom:1px solid #333;\">WebSocket manager - needs new broadcast methods</td></tr>\n<tr><td style=\"padding:8px;border-bottom:1px solid #333;\"><code style=\"color:#61afef;\">flow-timeline-pane.ts</code></td><td style=\"padding:8px;border-bottom:1px solid #333;\">Timeline UI - needs flow event handlers</td></tr>\n<tr><td style=\"padding:8px;border-bottom:1px solid #333;\"><code style=\"color:#61afef;\">layout.ts</code></td><td style=\"padding:8px;border-bottom:1px solid #333;\">Event routing - needs new case handlers</td></tr>\n<tr><td style=\"padding:8px;border-bottom:1px solid #333;\"><code style=\"color:#61afef;\">router.ts</code></td><td style=\"padding:8px;border-bottom:1px solid #333;\">API routes - needs to call broadcasts on flow changes</td></tr>\n<tr><td style=\"padding:8px;border-bottom:1px solid #333;\"><code style=\"color:#61afef;\">gv-flow-store.ts</code></td><td style=\"padding:8px;border-bottom:1px solid #333;\">Flow persistence - trigger point for broadcasts</td></tr>\n</table>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Fix Required (4 Steps)</h3>\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:12px 0;\">\n<p style=\"margin:0 0 8px 0;\"><span style=\"color:#98c379;font-weight:bold;\">1.</span> Add new event types to <code>AdminEventType</code>:</p>\n<pre style=\"margin:8px 0;padding:8px;background:#1e1e1e;border-radius:4px;\">| \"flow_created\" | \"flow_updated\" | \"flow_linked\" | \"flow_merged\"</pre>\n\n<p style=\"margin:16px 0 8px 0;\"><span style=\"color:#98c379;font-weight:bold;\">2.</span> Add broadcast methods to <code>AdminBroadcastManager</code>:</p>\n<pre style=\"margin:8px 0;padding:8px;background:#1e1e1e;border-radius:4px;\">broadcastFlowCreated(flowId, title, type)\nbroadcastFlowUpdated(flowId, changes)\nbroadcastFlowLinked(flowId, kontaskId)</pre>\n\n<p style=\"margin:16px 0 8px 0;\"><span style=\"color:#98c379;font-weight:bold;\">3.</span> Update timeline handler to process flow events:</p>\n<pre style=\"margin:8px 0;padding:8px;background:#1e1e1e;border-radius:4px;\">if (event.type === 'flow_updated') { /* re-fetch & re-render */ }</pre>\n\n<p style=\"margin:16px 0 8px 0;\"><span style=\"color:#98c379;font-weight:bold;\">4.</span> Call broadcasts from router.ts flow endpoints:</p>\n<pre style=\"margin:8px 0;padding:8px;background:#1e1e1e;border-radius:4px;\">// After createFlow, updateFlow, mergeFlows, linkOrphanToFlow\nadminBroadcast.broadcastFlowUpdated(flowId, { status });</pre>\n</div>\n\n<h3 style=\"color:#e5c07b;margin:20px 0 12px 0;\">Implementation Priority</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">This is a <strong style=\"color:#f97316;\">medium priority</strong> fix. The timeline still works on refresh - it just doesn't auto-update. The fix is well-scoped and follows existing patterns for <code>kontask_created</code>.</p>\n\n</div>",
    "requestedAt": "2026-01-11T06:00:00.000Z",
    "requestId": "bfff1b61-7995-4f63-be36-831692ae4618",
    "choices": [
      {
        "label": "Implement Fix",
        "value": "Implement the flow timeline WebSocket auto-update fix - add flow_created, flow_updated, flow_linked event types and broadcast methods",
        "primary": true
      },
      {
        "label": "Create Issue",
        "value": "Create a kontask to track this bug as a backlog item for later implementation"
      },
      {
        "label": "Show Details",
        "value": "Show the specific code changes needed for each file"
      }
    ],
    "turnTiming": {
      "totalMs": 161677,
      "ttfeMs": 89,
      "thinkingMs": 161586,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-11T01:24:18.610Z",
  "updatedAt": "2026-01-11T01:24:24.025Z",
  "requestId": "bfff1b61-7995-4f63-be36-831692ae4618",
  "scope": "greatvibe",
  "tags": [
    "kontasks",
    "ui",
    "websocket",
    "flows"
  ],
  "sessionId": "ses_40728090-b86"
}