Flow Timeline Auto-Update Fix

Output

🔧 Flow Timeline Auto-Update Fixed

Status: Fixed and deployed

Root Cause

The flowTimelineState object was missing the currentRange property:

// In handleFlowTimelineKontaskEvent():
var sinceTime = new Date(now.getTime() - flowTimelineState.currentRange * 60 * 1000);
                                          ^^^^^^^^^^^^
                                          // undefined → NaN in date calculation
                                          // createdAt >= NaN always returns false

The Fix

var flowTimelineState = {
  isOpen: false,
  kontasks: [],
  flowId: null,
  pageSize: 10,
  threads: {},
  kontaskThreadMap: {},
  currentRange: 1440   // Added: 24 hours in minutes
};

Secondary Fix

Also fixed the flow event handler which was looking for a .flow-timeline-header h3 element that doesn't exist in the current minimal header design. Now it directly applies the flash effect to .flow-timeline-content.

Files Changed

konui/src/views/flow-timeline-pane.ts  # +15/-22 lines

Commit: cf4b8c8f - Konui restarted, fix is live.

To verify: Open the flow timeline panel (🌌 button), then create a new kontask. It should appear with animation.

Quick Actions

▶ View Turn

Original Request

No layout configured

Details

Type General

Status Completed

Scope greatvibe

Tags kontasksuiwebsocket

Created 11 Jan 2026, 11:49 am

Updated 11 Jan 2026, 11:49 am

Created By claude

📋 Claude's Context

Session ses_40728090...

🔗 Git Commit

cf4b8c8f

📁 1 file changed

konui/src/views/flow-timeline-pane.ts

Raw Data

{
  "id": "9b605216-69ac-448a-9a42-dd7142c7ff78",
  "type": "general",
  "status": "completed",
  "title": "Flow Timeline Auto-Update Fix",
  "description": "Fixed missing currentRange state causing NaN in date comparison",
  "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 Fixed</h2>\n\n<div style=\"background:#22c55e20;border-left:4px solid #22c55e;padding:12px 16px;border-radius:4px;margin-bottom:16px;\">\n<strong style=\"color:#22c55e;\">Status:</strong> Fixed and deployed\n</div>\n\n<h3 style=\"color:#61afef;margin:16px 0 12px 0;\">Root Cause</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">The <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">flowTimelineState</code> object was missing the <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">currentRange</code> property:</p>\n\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.6;margin:12px 0;\">\n<span style=\"color:#7f848e;\">// In handleFlowTimelineKontaskEvent():</span>\nvar sinceTime = new Date(now.getTime() - flowTimelineState.<span style=\"color:#ef4444;\">currentRange</span> * 60 * 1000);\n                                          <span style=\"color:#ef4444;\">^^^^^^^^^^^^</span>\n                                          <span style=\"color:#7f848e;\">// undefined → NaN in date calculation</span>\n                                          <span style=\"color:#7f848e;\">// createdAt >= NaN always returns false</span>\n</pre>\n\n<h3 style=\"color:#61afef;margin:16px 0 12px 0;\">The Fix</h3>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.6;margin:12px 0;\">\nvar flowTimelineState = {\n  isOpen: false,\n  kontasks: [],\n  flowId: null,\n  pageSize: 10,\n  threads: {},\n  kontaskThreadMap: {},\n  <span style=\"color:#22c55e;\">currentRange: 1440   // Added: 24 hours in minutes</span>\n};\n</pre>\n\n<h3 style=\"color:#61afef;margin:16px 0 12px 0;\">Secondary Fix</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;\">Also fixed the flow event handler which was looking for a <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">.flow-timeline-header h3</code> element that doesn't exist in the current minimal header design. Now it directly applies the flash effect to <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">.flow-timeline-content</code>.</p>\n\n<h3 style=\"color:#61afef;margin:16px 0 12px 0;\">Files Changed</h3>\n<pre style=\"background:#2d2d2d;padding:12px;border-radius:6px;line-height:1.8;\">\n<span style=\"color:#e5c07b;\">konui/src/views/flow-timeline-pane.ts</span>  <span style=\"color:#7f848e;\"># +15/-22 lines</span>\n</pre>\n\n<div style=\"margin-top:16px;padding:12px;background:#2d2d2d;border-radius:6px;border-left:4px solid #3b82f6;\">\n<strong style=\"color:#3b82f6;\">Commit:</strong> <code style=\"color:#98c379;\">cf4b8c8f</code> - Konui restarted, fix is live.\n</div>\n\n<p style=\"color:#7f848e;margin-top:16px;font-size:0.9rem;\">\n<strong>To verify:</strong> Open the flow timeline panel (🌌 button), then create a new kontask. It should appear with animation.\n</p>\n</div>",
    "requestedAt": "2026-01-11T10:45:00.000Z",
    "requestId": "fdb1938b-5044-4739-a14f-92d16f460c9b",
    "commitSha": "cf4b8c8f",
    "filesChanged": [
      "konui/src/views/flow-timeline-pane.ts"
    ],
    "choices": [
      {
        "label": "Test it now",
        "value": "Create a test kontask to verify the flow timeline auto-updates correctly",
        "primary": true
      },
      {
        "label": "Check WebSocket",
        "value": "Show me how to debug the WebSocket broadcasts in browser console",
        "primary": false
      },
      {
        "label": "View timeline code",
        "value": "Show me the full handleFlowTimelineKontaskEvent function",
        "primary": false
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-11T01:49:39.208Z",
  "updatedAt": "2026-01-11T01:49:39.365Z",
  "requestId": "fdb1938b-5044-4739-a14f-92d16f460c9b",
  "scope": "greatvibe",
  "tags": [
    "kontasks",
    "ui",
    "websocket"
  ],
  "sessionId": "ses_40728090-b86"
}

Flow Timeline Auto-Update Fix

Output