← Back to Kontasks
Flow Graph UI - Implementation Plan
Plan for adding interactive graph visualization to the flows page
Output
📊 Flow Graph UI - Implementation Plan
🎯 Vision
Transform the flows page from a simple table into an interactive graph showing how flows evolve through turns and kontasks. Users should see the flow of work visually, with each kontask as a node connected to its parent flow.
✅ Current State
- ✓
gv-flows.ts- Table-based list view (489 lines) - ✓
gv-edge-types.ts- Graph edge relationships defined - ✓
gv-edge-store.ts- Edge storage and queries - ✓ Mermaid.js already integrated for diagrams
- ✓ 37 graph edges already tracked
🛠️ Implementation Approach
Option A: Mermaid.js (Recommended)
Already integrated • Dark theme ready • Static but fast • Good for overview
graph TD Flow["Flow: Fix auth bug"] --> K1[Kontask 1] Flow --> K2[Kontask 2] K1 -.->|2m ago| K2
Option B: Cytoscape.js (More Interactive)
Pan/zoom • Drag nodes • Click to expand • More setup needed
Option C: D3.js (Most Flexible)
Force-directed layout • Full customization • Steep learning curve
📝 Proposed Features
| 1. | Flow Overview Graph | See all flows as nodes with kontask counts |
| 2. | Flow Detail Timeline | Click flow → see kontasks in chronological order |
| 3. | Turn-by-Turn View | Each turn shows what was done |
| 4. | Edge Relationships | evidence, decision, output edges visualized |
| 5. | Toggle Table/Graph | Keep existing table as alternate view |
📁 Files to Modify
/konui/src/views/ ├── gv-flows.ts # Add graph view toggle, render Mermaid ├── gv-flow-graph.ts # NEW: Graph generation logic └── layout.ts # May need Mermaid init updates /konui/src/ └── router.ts # Add graph data endpoint
🚀 Ready to implement? I recommend starting with Mermaid.js since it's already integrated. We can add Cytoscape later if interactivity is needed.
Quick Actions
Original Request
No layout configured
Details
Type
General
Status
Completed
Scope
vibetools
Tags
flowsuigraphvisualization
Created
9 Jan 2026, 11:44 pm
Updated
9 Jan 2026, 11:45 pm
Timing
⏱️ 91.9s
0 tools
● TTFE 0%
● Thinking 100%
● Tools 0%
Created By
claude
📋 Claude's Context
Session
ses_a0f5cb6c...
Raw Data
{
"id": "c92c5eb1-b697-460f-93c1-8556cfa3167e",
"type": "general",
"status": "completed",
"title": "Flow Graph UI - Implementation Plan",
"description": "Plan for adding interactive graph visualization to the flows page",
"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 Graph UI - Implementation Plan</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;font-family:sans-serif;\">🎯 Vision</h3>\n<p style=\"color:#e0e0e0;line-height:1.6;margin:0;\">Transform the flows page from a simple table into an interactive graph showing how flows evolve through turns and kontasks. Users should see the flow of work visually, with each kontask as a node connected to its parent flow.</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#98c379;margin:0 0 12px 0;font-family:sans-serif;\">✅ Current State</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li><span style=\"color:#98c379;\">✓</span> <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">gv-flows.ts</code> - Table-based list view (489 lines)</li>\n<li><span style=\"color:#98c379;\">✓</span> <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">gv-edge-types.ts</code> - Graph edge relationships defined</li>\n<li><span style=\"color:#98c379;\">✓</span> <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">gv-edge-store.ts</code> - Edge storage and queries</li>\n<li><span style=\"color:#98c379;\">✓</span> Mermaid.js already integrated for diagrams</li>\n<li><span style=\"color:#98c379;\">✓</span> 37 graph edges already tracked</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;font-family:sans-serif;\">🛠️ Implementation Approach</h3>\n\n<div style=\"background:#1e1e1e;padding:12px;border-radius:4px;margin-bottom:8px;border-left:3px solid #3b82f6;\">\n<span style=\"color:#61afef;font-weight:bold;\">Option A: Mermaid.js (Recommended)</span>\n<p style=\"color:#7f848e;margin:4px 0 0 0;font-size:0.9em;\">Already integrated • Dark theme ready • Static but fast • Good for overview</p>\n<pre style=\"background:#2d2d2d;padding:8px;border-radius:4px;margin:8px 0 0 0;font-size:0.85em;overflow-x:auto;\">\ngraph TD\n Flow[\"Flow: Fix auth bug\"] --> K1[Kontask 1]\n Flow --> K2[Kontask 2]\n K1 -.->|2m ago| K2\n</pre>\n</div>\n\n<div style=\"background:#1e1e1e;padding:12px;border-radius:4px;margin-bottom:8px;border-left:3px solid #8b5cf6;\">\n<span style=\"color:#c678dd;font-weight:bold;\">Option B: Cytoscape.js (More Interactive)</span>\n<p style=\"color:#7f848e;margin:4px 0 0 0;font-size:0.9em;\">Pan/zoom • Drag nodes • Click to expand • More setup needed</p>\n</div>\n\n<div style=\"background:#1e1e1e;padding:12px;border-radius:4px;border-left:3px solid #f59e0b;\">\n<span style=\"color:#e5c07b;font-weight:bold;\">Option C: D3.js (Most Flexible)</span>\n<p style=\"color:#7f848e;margin:4px 0 0 0;font-size:0.9em;\">Force-directed layout • Full customization • Steep learning curve</p>\n</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#e5c07b;margin:0 0 12px 0;font-family:sans-serif;\">📝 Proposed Features</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #3d3d3d;\"><td style=\"padding:8px;\"><span style=\"color:#98c379;\">1.</span></td><td style=\"color:#e0e0e0;\"><strong>Flow Overview Graph</strong></td><td style=\"color:#7f848e;\">See all flows as nodes with kontask counts</td></tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\"><td style=\"padding:8px;\"><span style=\"color:#98c379;\">2.</span></td><td style=\"color:#e0e0e0;\"><strong>Flow Detail Timeline</strong></td><td style=\"color:#7f848e;\">Click flow → see kontasks in chronological order</td></tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\"><td style=\"padding:8px;\"><span style=\"color:#98c379;\">3.</span></td><td style=\"color:#e0e0e0;\"><strong>Turn-by-Turn View</strong></td><td style=\"color:#7f848e;\">Each turn shows what was done</td></tr>\n<tr style=\"border-bottom:1px solid #3d3d3d;\"><td style=\"padding:8px;\"><span style=\"color:#98c379;\">4.</span></td><td style=\"color:#e0e0e0;\"><strong>Edge Relationships</strong></td><td style=\"color:#7f848e;\">evidence, decision, output edges visualized</td></tr>\n<tr><td style=\"padding:8px;\"><span style=\"color:#98c379;\">5.</span></td><td style=\"color:#e0e0e0;\"><strong>Toggle Table/Graph</strong></td><td style=\"color:#7f848e;\">Keep existing table as alternate view</td></tr>\n</table>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#56b6c2;margin:0 0 12px 0;font-family:sans-serif;\">📁 Files to Modify</h3>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;overflow-x:auto;line-height:1.6;\">\n<span style=\"color:#56b6c2;font-weight:bold;\">/konui/src/views/</span>\n├── <span style=\"color:#e5c07b;\">gv-flows.ts</span> <span style=\"color:#7f848e;\"># Add graph view toggle, render Mermaid</span>\n├── <span style=\"color:#98c379;\">gv-flow-graph.ts</span> <span style=\"color:#7f848e;\"># NEW: Graph generation logic</span>\n└── <span style=\"color:#e5c07b;\">layout.ts</span> <span style=\"color:#7f848e;\"># May need Mermaid init updates</span>\n\n<span style=\"color:#56b6c2;font-weight:bold;\">/konui/src/</span>\n└── <span style=\"color:#e5c07b;\">router.ts</span> <span style=\"color:#7f848e;\"># Add graph data endpoint</span>\n</pre>\n</div>\n\n<div style=\"background:#1a2e1a;border:1px solid #22c55e;padding:12px 16px;border-radius:6px;\">\n<p style=\"margin:0;color:#98c379;\"><strong>🚀 Ready to implement?</strong> I recommend starting with Mermaid.js since it's already integrated. We can add Cytoscape later if interactivity is needed.</p>\n</div>\n</div>",
"requestedAt": "2026-01-09T13:42:00.000Z",
"requestId": "26b702b7-7863-4c7c-8677-b3fc4bf14e61",
"choices": [
{
"label": "Start with Mermaid",
"value": "Implement the flow graph visualization using Mermaid.js - add a graph view toggle to the flows page and generate flow->kontask diagrams",
"primary": true
},
{
"label": "Use Cytoscape",
"value": "Implement the flow graph using Cytoscape.js for full pan/zoom/drag interactivity"
},
{
"label": "Just flow detail first",
"value": "Start with just the flow detail page - show kontasks as a timeline/graph for a single flow before tackling the overview"
},
{
"label": "Show me a mockup",
"value": "Generate a Mermaid diagram showing what the flow graph would look like with the current data"
}
],
"turnTiming": {
"totalMs": 91949,
"ttfeMs": 46,
"thinkingMs": 91903,
"toolExecutionMs": 0,
"toolCallCount": 0,
"thinkingPct": 100,
"toolsPct": 0,
"ttfePct": 0
}
},
"createdBy": "claude",
"createdAt": "2026-01-09T13:44:57.036Z",
"updatedAt": "2026-01-09T13:45:03.127Z",
"requestId": "26b702b7-7863-4c7c-8677-b3fc4bf14e61",
"scope": "vibetools",
"tags": [
"flows",
"ui",
"graph",
"visualization"
],
"sessionId": "ses_a0f5cb6c-937",
"flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
"flowLinks": [
{
"flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
"edgeType": "evidence",
"createdAt": "2026-01-09T13:44:57.036Z"
}
],
"targetUser": "claude"
}