Flow Graph Layout Improvements

Output

🎨 Flow Graph Layout Improvements

Building on the recent vis.js redesign, here are additional layout enhancements organized by priority and impact.

🔥 High Priority

1. Node Clustering for Large Flows

// Current: All kontasks spread linearly
// Problem: 20+ kontasks creates visual clutter

Solution: Group kontasks by date clusters
├── Today         → Expanded, highlighted
├── This Week    → Collapsed badge "5 kontasks"
└── Older        → Collapsed badge "12 kontasks"

// Click cluster to expand inline

2. Responsive Height Calculation

// Current: Fixed 450px height
// Problem: Small graphs have too much empty space

const height = Math.max(
  200,  // minimum
  Math.min(
    600,  // maximum
    nodeCount * 60 + 100  // dynamic
  )
);

3. Minimap for Large Graphs

// Add corner minimap when nodes > 10
┌────────────────────────────────┐
│                      ┌──────┐  │
│   Main Graph         │ Mini │  │
│   View               │ Map  │  │
│                      └──────┘  │
└────────────────────────────────┘
// vis.js supports this via configure:true

⚡ Medium Priority

4. Animated Edge Connections

// Show flow direction with animated dashes
edges: {
  smooth: { type: 'curvedCW', roundness: 0.2 },
  dashes: [5, 5],  // CSS-style dash pattern
  color: {
    color: '#6b7280',
    highlight: '#60a5fa'  // blue on hover path
  }
}

5. Hover Card Preview

// Current: Title tooltip only
// Enhanced: Rich hover card

┌─────────────────────────────┐
│ Fix auth bug                │
│ Completed • 2h ago          │
│ ─────────────────────────── │
│ Fixed JWT token refresh...  │
│                             │
│ [View Details]              │
└─────────────────────────────┘

6. Status-Based Edge Colors

// Show progress visually through edge colors

● Completed → green edge
● Pending   → yellow edge
● Rejected  → red dashed edge
● Approved  → blue pulsing edge

7. Keyboard Navigation

Shortcuts:
  ←/→  Navigate between sibling nodes
  ↑/↓  Navigate between levels
  Enter  Open selected node
  +/-  Zoom in/out
  0    Fit to view
  ?    Show shortcuts help

✨ Polish & Nice-to-Have

8. Layout Direction Toggle

// User preference for graph orientation

[ ↓ Top-Down ]  [ → Left-Right ]  [ ○ Radial ]

// Save preference to localStorage

9. Dark/Light Theme Sync

// Match system theme preference
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Dark theme (current)
background: '#1e1e1e', nodeFont: '#fff'

// Light theme
background: '#f8fafc', nodeFont: '#1f2937'

10. Export Options

// Export graph as image or data

[ 📷 PNG ]  [ 📄 SVG ]  [ 📊 JSON ]

// vis.js canvas export:
network.canvas.canvas.toDataURL('image/png')

11. Node Badges

// Add small indicator badges to nodes

┌───────────────────┐
│ ⚠ Fix auth bug     │  ← warning badge
│ Pending           │
└───────────────────┘

┌───────────────────┐
│ Add login form  ✓ │  ← completion badge
│ Completed         │
└───────────────────┘

⚡ Quick Wins (< 30 min each)

A. Zoom Controls

Add +/- buttons in corner for mobile users

B. Loading Skeleton

Animated placeholder while vis.js loads

C. Empty State Art

Better illustration for "No kontasks yet"

D. Node Count Badge

Show total nodes in graph header

📋 Suggested Implementation Order

Quick Wins A-D - Immediate UX polish
#2 Responsive Height - High impact, low effort
#5 Hover Preview - Improves navigation
#6 Status Edge Colors - Visual clarity
#1 Node Clustering - Handles scale
#7 Keyboard Nav - Accessibility
#8-11 - Polish as time permits

Files to modify: konui/src/views/vis-flow-graph.ts konui/src/views/gv-flows.ts

Quick Actions

▶ View Turn

Original Request

No layout configured

Details

Type General

Status Completed

Scope vibetools

Tags flowsgraphuivis-js

Created 10 Jan 2026, 1:16 am

Updated 10 Jan 2026, 1:16 am

Timing

⏱️ 83.1s

0 tools

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

Created By claude

📋 Claude's Context

Session ses_793682af...

Raw Data

{
  "id": "b6eba505-c310-495b-9ed0-c88ef1daceb6",
  "type": "general",
  "status": "completed",
  "title": "Flow Graph Layout Improvements",
  "description": "Suggested layout improvements for vis.js flow graph visualization",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:'Segoe UI','Roboto',sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 20px 0;font-size:1.4rem;\">🎨 Flow Graph Layout Improvements</h2>\n\n<p style=\"color:#9ca3af;margin-bottom:24px;\">Building on the recent vis.js redesign, here are additional layout enhancements organized by priority and impact.</p>\n\n<!-- HIGH PRIORITY -->\n<div style=\"background:#2d2d2d;border-radius:8px;padding:16px;margin-bottom:16px;border-left:4px solid #ef4444;\">\n<h3 style=\"color:#ef4444;margin:0 0 12px 0;font-size:1.1rem;\">🔥 High Priority</h3>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">1. Node Clustering for Large Flows</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Current: All kontasks spread linearly</span>\n<span style=\"color:#7f848e;\">// Problem: 20+ kontasks creates visual clutter</span>\n\n<span style=\"color:#c678dd;\">Solution:</span> Group kontasks by date clusters\n├── <span style=\"color:#98c379;\">Today</span>         → Expanded, highlighted\n├── <span style=\"color:#61afef;\">This Week</span>    → Collapsed badge \"5 kontasks\"\n└── <span style=\"color:#9ca3af;\">Older</span>        → Collapsed badge \"12 kontasks\"\n\n<span style=\"color:#7f848e;\">// Click cluster to expand inline</span></pre>\n</div>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">2. Responsive Height Calculation</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Current: Fixed 450px height</span>\n<span style=\"color:#7f848e;\">// Problem: Small graphs have too much empty space</span>\n\n<span style=\"color:#c678dd;\">const</span> height = <span style=\"color:#c678dd;\">Math.max</span>(\n  <span style=\"color:#d19a66;\">200</span>,  <span style=\"color:#7f848e;\">// minimum</span>\n  <span style=\"color:#c678dd;\">Math.min</span>(\n    <span style=\"color:#d19a66;\">600</span>,  <span style=\"color:#7f848e;\">// maximum</span>\n    nodeCount * <span style=\"color:#d19a66;\">60</span> + <span style=\"color:#d19a66;\">100</span>  <span style=\"color:#7f848e;\">// dynamic</span>\n  )\n);</pre>\n</div>\n\n<div>\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">3. Minimap for Large Graphs</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Add corner minimap when nodes > 10</span>\n┌────────────────────────────────┐\n│                      ┌──────┐  │\n│   Main Graph         │ Mini │  │\n│   View               │ Map  │  │\n│                      └──────┘  │\n└────────────────────────────────┘\n<span style=\"color:#7f848e;\">// vis.js supports this via configure:true</span></pre>\n</div>\n</div>\n\n<!-- MEDIUM PRIORITY -->\n<div style=\"background:#2d2d2d;border-radius:8px;padding:16px;margin-bottom:16px;border-left:4px solid #f59e0b;\">\n<h3 style=\"color:#f59e0b;margin:0 0 12px 0;font-size:1.1rem;\">⚡ Medium Priority</h3>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">4. Animated Edge Connections</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Show flow direction with animated dashes</span>\nedges: {\n  smooth: { <span style=\"color:#98c379;\">type</span>: <span style=\"color:#98c379;\">'curvedCW'</span>, roundness: <span style=\"color:#d19a66;\">0.2</span> },\n  <span style=\"color:#c678dd;\">dashes</span>: [<span style=\"color:#d19a66;\">5</span>, <span style=\"color:#d19a66;\">5</span>],  <span style=\"color:#7f848e;\">// CSS-style dash pattern</span>\n  <span style=\"color:#c678dd;\">color</span>: {\n    color: <span style=\"color:#98c379;\">'#6b7280'</span>,\n    <span style=\"color:#c678dd;\">highlight</span>: <span style=\"color:#98c379;\">'#60a5fa'</span>  <span style=\"color:#7f848e;\">// blue on hover path</span>\n  }\n}</pre>\n</div>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">5. Hover Card Preview</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Current: Title tooltip only</span>\n<span style=\"color:#7f848e;\">// Enhanced: Rich hover card</span>\n\n┌─────────────────────────────┐\n│ <span style=\"color:#98c379;\">Fix auth bug</span>                │\n│ <span style=\"color:#9ca3af;\">Completed • 2h ago</span>          │\n│ ─────────────────────────── │\n│ <span style=\"color:#7f848e;\">Fixed JWT token refresh...</span>  │\n│                             │\n│ <span style=\"color:#61afef;\">[View Details]</span>              │\n└─────────────────────────────┘</pre>\n</div>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">6. Status-Based Edge Colors</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Show progress visually through edge colors</span>\n\n<span style=\"color:#22c55e;\">●</span> Completed → <span style=\"color:#22c55e;\">green edge</span>\n<span style=\"color:#f59e0b;\">●</span> Pending   → <span style=\"color:#f59e0b;\">yellow edge</span>\n<span style=\"color:#ef4444;\">●</span> Rejected  → <span style=\"color:#ef4444;\">red dashed edge</span>\n<span style=\"color:#3b82f6;\">●</span> Approved  → <span style=\"color:#3b82f6;\">blue pulsing edge</span></pre>\n</div>\n\n<div>\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">7. Keyboard Navigation</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#c678dd;\">Shortcuts:</span>\n  <span style=\"color:#61afef;\">←/→</span>  Navigate between sibling nodes\n  <span style=\"color:#61afef;\">↑/↓</span>  Navigate between levels\n  <span style=\"color:#61afef;\">Enter</span>  Open selected node\n  <span style=\"color:#61afef;\">+/-</span>  Zoom in/out\n  <span style=\"color:#61afef;\">0</span>    Fit to view\n  <span style=\"color:#61afef;\">?</span>    Show shortcuts help</pre>\n</div>\n</div>\n\n<!-- LOWER PRIORITY -->\n<div style=\"background:#2d2d2d;border-radius:8px;padding:16px;margin-bottom:16px;border-left:4px solid #22c55e;\">\n<h3 style=\"color:#22c55e;margin:0 0 12px 0;font-size:1.1rem;\">✨ Polish & Nice-to-Have</h3>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">8. Layout Direction Toggle</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// User preference for graph orientation</span>\n\n<span style=\"color:#9ca3af;\">[</span> <span style=\"color:#61afef;\">↓ Top-Down</span> <span style=\"color:#9ca3af;\">]</span>  <span style=\"color:#9ca3af;\">[</span> → Left-Right <span style=\"color:#9ca3af;\">]</span>  <span style=\"color:#9ca3af;\">[</span> ○ Radial <span style=\"color:#9ca3af;\">]</span>\n\n<span style=\"color:#7f848e;\">// Save preference to localStorage</span></pre>\n</div>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">9. Dark/Light Theme Sync</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Match system theme preference</span>\n<span style=\"color:#c678dd;\">const</span> isDark = window.matchMedia(<span style=\"color:#98c379;\">'(prefers-color-scheme: dark)'</span>).matches;\n\n<span style=\"color:#7f848e;\">// Dark theme (current)</span>\nbackground: <span style=\"color:#98c379;\">'#1e1e1e'</span>, nodeFont: <span style=\"color:#98c379;\">'#fff'</span>\n\n<span style=\"color:#7f848e;\">// Light theme</span>\nbackground: <span style=\"color:#98c379;\">'#f8fafc'</span>, nodeFont: <span style=\"color:#98c379;\">'#1f2937'</span></pre>\n</div>\n\n<div style=\"margin-bottom:16px;\">\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">10. Export Options</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Export graph as image or data</span>\n\n<span style=\"color:#9ca3af;\">[</span> <span style=\"color:#61afef;\">📷 PNG</span> <span style=\"color:#9ca3af;\">]</span>  <span style=\"color:#9ca3af;\">[</span> 📄 SVG <span style=\"color:#9ca3af;\">]</span>  <span style=\"color:#9ca3af;\">[</span> 📊 JSON <span style=\"color:#9ca3af;\">]</span>\n\n<span style=\"color:#7f848e;\">// vis.js canvas export:</span>\nnetwork.canvas.canvas.toDataURL(<span style=\"color:#98c379;\">'image/png'</span>)</pre>\n</div>\n\n<div>\n<h4 style=\"color:#e5c07b;margin:0 0 8px 0;\">11. Node Badges</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;overflow-x:auto;font-size:0.85rem;line-height:1.6;\"><span style=\"color:#7f848e;\">// Add small indicator badges to nodes</span>\n\n┌───────────────────┐\n│ <span style=\"color:#ef4444;\">⚠</span> Fix auth bug     │  <span style=\"color:#7f848e;\">← warning badge</span>\n│ Pending           │\n└───────────────────┘\n\n┌───────────────────┐\n│ Add login form  <span style=\"color:#22c55e;\">✓</span> │  <span style=\"color:#7f848e;\">← completion badge</span>\n│ Completed         │\n└───────────────────┘</pre>\n</div>\n</div>\n\n<!-- QUICK WINS -->\n<div style=\"background:#2d2d2d;border-radius:8px;padding:16px;margin-bottom:16px;border-left:4px solid #8b5cf6;\">\n<h3 style=\"color:#8b5cf6;margin:0 0 12px 0;font-size:1.1rem;\">⚡ Quick Wins (< 30 min each)</h3>\n\n<div style=\"display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;\">\n<div style=\"background:#1e1e1e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#61afef;\">A. Zoom Controls</strong>\n<p style=\"color:#9ca3af;font-size:0.85rem;margin:4px 0 0 0;\">Add +/- buttons in corner for mobile users</p>\n</div>\n<div style=\"background:#1e1e1e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#61afef;\">B. Loading Skeleton</strong>\n<p style=\"color:#9ca3af;font-size:0.85rem;margin:4px 0 0 0;\">Animated placeholder while vis.js loads</p>\n</div>\n<div style=\"background:#1e1e1e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#61afef;\">C. Empty State Art</strong>\n<p style=\"color:#9ca3af;font-size:0.85rem;margin:4px 0 0 0;\">Better illustration for \"No kontasks yet\"</p>\n</div>\n<div style=\"background:#1e1e1e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#61afef;\">D. Node Count Badge</strong>\n<p style=\"color:#9ca3af;font-size:0.85rem;margin:4px 0 0 0;\">Show total nodes in graph header</p>\n</div>\n</div>\n</div>\n\n<!-- IMPLEMENTATION ORDER -->\n<div style=\"background:#374151;border-radius:8px;padding:16px;margin-bottom:20px;\">\n<h3 style=\"color:#fff;margin:0 0 12px 0;font-size:1.1rem;\">📋 Suggested Implementation Order</h3>\n<ol style=\"color:#e5e7eb;margin:0;padding-left:24px;line-height:1.8;\">\n<li><span style=\"color:#8b5cf6;\">Quick Wins A-D</span> - Immediate UX polish</li>\n<li><span style=\"color:#ef4444;\">#2 Responsive Height</span> - High impact, low effort</li>\n<li><span style=\"color:#f59e0b;\">#5 Hover Preview</span> - Improves navigation</li>\n<li><span style=\"color:#f59e0b;\">#6 Status Edge Colors</span> - Visual clarity</li>\n<li><span style=\"color:#ef4444;\">#1 Node Clustering</span> - Handles scale</li>\n<li><span style=\"color:#f59e0b;\">#7 Keyboard Nav</span> - Accessibility</li>\n<li><span style=\"color:#22c55e;\">#8-11</span> - Polish as time permits</li>\n</ol>\n</div>\n\n<div style=\"color:#9ca3af;font-size:0.85rem;padding-top:12px;border-top:1px solid #374151;\">\n<strong>Files to modify:</strong>\n<code style=\"background:#1f2937;padding:2px 6px;border-radius:3px;margin-left:4px;\">konui/src/views/vis-flow-graph.ts</code>\n<code style=\"background:#1f2937;padding:2px 6px;border-radius:3px;margin-left:4px;\">konui/src/views/gv-flows.ts</code>\n</div>\n</div>",
    "requestedAt": "2026-01-10T12:00:00.000Z",
    "requestId": "4d094198-af70-4f72-99ad-4a064ba539cb",
    "choices": [
      {
        "label": "Implement Quick Wins",
        "value": "Implement the Quick Wins (A-D): zoom controls, loading skeleton, empty state art, and node count badge for the flow graph",
        "primary": true
      },
      {
        "label": "Add Responsive Height",
        "value": "Implement responsive height calculation (#2) so the graph container dynamically sizes based on node count"
      },
      {
        "label": "Add Hover Preview",
        "value": "Implement the rich hover card preview (#5) for nodes showing title, status, description snippet and a view details link"
      },
      {
        "label": "Pick specific items",
        "value": "Let me specify which improvements I want to implement from this list"
      }
    ],
    "turnTiming": {
      "totalMs": 83070,
      "ttfeMs": 138,
      "thinkingMs": 82929,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-09T15:16:12.721Z",
  "updatedAt": "2026-01-09T15:16:18.082Z",
  "requestId": "4d094198-af70-4f72-99ad-4a064ba539cb",
  "scope": "vibetools",
  "tags": [
    "flows",
    "graph",
    "ui",
    "vis-js"
  ],
  "sessionId": "ses_793682af-433",
  "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
  "flowLinks": [
    {
      "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
      "edgeType": "evidence",
      "createdAt": "2026-01-09T15:16:12.721Z"
    }
  ]
}