Responsive Height for Flow Graphs

Details

Raw Data

{
  "id": "33cabb56-f041-4a04-893e-20dd46903c9f",
  "type": "general",
  "status": "completed",
  "title": "Responsive Height for Flow Graphs",
  "description": "Implemented dynamic height calculation based on node count",
  "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;\">✅ Responsive Height for Flow Graphs</h2>\n\n<p style=\"color:#9ca3af;margin-bottom:16px;\">Graph containers now dynamically size based on node count for optimal viewing.</p>\n\n<h3 style=\"font-family:sans-serif;color:#e5e7eb;margin:20px 0 12px 0;\">Height Tiers</h3>\n<table style=\"width:100%;border-collapse:collapse;margin-bottom:16px;\">\n<tr style=\"border-bottom:1px solid #374151;\">\n  <th style=\"text-align:left;padding:8px;color:#9ca3af;\">Nodes</th>\n  <th style=\"text-align:left;padding:8px;color:#9ca3af;\">Height</th>\n  <th style=\"text-align:left;padding:8px;color:#9ca3af;\">Use Case</th>\n</tr>\n<tr style=\"border-bottom:1px solid #2d2d2d;\">\n  <td style=\"padding:8px;\"><span style=\"color:#61afef;\">1-2</span></td>\n  <td style=\"padding:8px;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">200px</code></td>\n  <td style=\"padding:8px;color:#7f848e;\">Compact - new flows with few kontasks</td>\n</tr>\n<tr style=\"border-bottom:1px solid #2d2d2d;\">\n  <td style=\"padding:8px;\"><span style=\"color:#61afef;\">3-5</span></td>\n  <td style=\"padding:8px;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">300px</code></td>\n  <td style=\"padding:8px;color:#7f848e;\">Small - typical short flows</td>\n</tr>\n<tr style=\"border-bottom:1px solid #2d2d2d;\">\n  <td style=\"padding:8px;\"><span style=\"color:#61afef;\">6-10</span></td>\n  <td style=\"padding:8px;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">400px</code></td>\n  <td style=\"padding:8px;color:#7f848e;\">Medium - standard feature flows</td>\n</tr>\n<tr style=\"border-bottom:1px solid #2d2d2d;\">\n  <td style=\"padding:8px;\"><span style=\"color:#61afef;\">11-20</span></td>\n  <td style=\"padding:8px;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">500px</code></td>\n  <td style=\"padding:8px;color:#7f848e;\">Large - complex multi-turn flows</td>\n</tr>\n<tr>\n  <td style=\"padding:8px;\"><span style=\"color:#61afef;\">21+</span></td>\n  <td style=\"padding:8px;\"><code style=\"background:#2d2d2d;padding:2px 6px;border-radius:4px;\">600px</code></td>\n  <td style=\"padding:8px;color:#7f848e;\">Max - extensive work streams</td>\n</tr>\n</table>\n\n<h3 style=\"font-family:sans-serif;color:#e5e7eb;margin:20px 0 12px 0;\">Hierarchical Layout Bonus</h3>\n<p style=\"color:#e0e0e0;margin-bottom:12px;\">Vertical layouts (UD/DU) get additional height based on estimated levels:</p>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.6;\">\n<span style=\"color:#7f848e;\">// For vertical hierarchical layouts:</span>\n<span style=\"color:#c678dd;\">const</span> <span style=\"color:#e5c07b;\">estimatedLevels</span> = <span style=\"color:#61afef;\">Math</span>.ceil(nodeCount / <span style=\"color:#d19a66;\">3</span>);\n<span style=\"color:#c678dd;\">const</span> <span style=\"color:#e5c07b;\">levelBonus</span> = <span style=\"color:#61afef;\">Math</span>.min(estimatedLevels * <span style=\"color:#d19a66;\">30</span>, <span style=\"color:#d19a66;\">150</span>);\n<span style=\"color:#7f848e;\">// Capped at 700px total</span>\n</pre>\n\n<h3 style=\"font-family:sans-serif;color:#e5e7eb;margin:20px 0 12px 0;\">Files Modified</h3>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.8;\">\n<span style=\"color:#56b6c2;font-weight:bold;\">konui/src/views/</span>\n├── <span style=\"color:#e5c07b;\">vis-flow-graph.ts</span>  <span style=\"color:#7f848e;\">+ calculateResponsiveHeight() export</span>\n│                         <span style=\"color:#7f848e;\">+ responsive option in renderVisGraphContainer</span>\n└── <span style=\"color:#e5c07b;\">gv-flows.ts</span>         <span style=\"color:#7f848e;\">+ Use responsive: true for both graphs</span>\n</pre>\n\n<h3 style=\"font-family:sans-serif;color:#e5e7eb;margin:20px 0 12px 0;\">API Usage</h3>\n<pre style=\"background:#2d2d2d;padding:16px;border-radius:6px;overflow-x:auto;line-height:1.6;\">\n<span style=\"color:#7f848e;\">// Auto-responsive (default)</span>\n<span style=\"color:#61afef;\">renderVisGraphContainer</span>(\n  <span style=\"color:#98c379;\">\"graph-id\"</span>,\n  graphData,\n  { layout: <span style=\"color:#98c379;\">\"hierarchical\"</span>, direction: <span style=\"color:#98c379;\">\"UD\"</span> }\n);\n\n<span style=\"color:#7f848e;\">// Explicit responsive: true</span>\n<span style=\"color:#61afef;\">renderVisGraphContainer</span>(\n  <span style=\"color:#98c379;\">\"graph-id\"</span>,\n  graphData,\n  { layout: <span style=\"color:#98c379;\">\"force\"</span>, responsive: <span style=\"color:#d19a66;\">true</span> }\n);\n\n<span style=\"color:#7f848e;\">// Fixed height (override)</span>\n<span style=\"color:#61afef;\">renderVisGraphContainer</span>(\n  <span style=\"color:#98c379;\">\"graph-id\"</span>,\n  graphData,\n  { height: <span style=\"color:#98c379;\">\"500px\"</span> }  <span style=\"color:#7f848e;\">// Explicit height takes precedence</span>\n);\n</pre>\n\n<div style=\"background:#22c55e20;border:1px solid #22c55e;padding:12px;border-radius:6px;margin-top:16px;\">\n  <span style=\"color:#22c55e;font-weight:bold;\">✓ All 174 tests passing</span>\n  <span style=\"color:#9ca3af;margin-left:12px;\">Commit: 2f1394f6</span>\n</div>\n\n</div>",
    "requestedAt": "2026-01-10T12:00:00Z",
    "requestId": "810c0deb-2ae4-407a-bd83-b7e9dec16670",
    "commitSha": "2f1394f6",
    "choices": [
      {
        "label": "Test on flows page",
        "value": "Navigate to the flows page and verify the responsive height works correctly with different node counts",
        "primary": true
      },
      {
        "label": "Add unit tests",
        "value": "Add unit tests for the calculateResponsiveHeight function"
      },
      {
        "label": "View next backlog item",
        "value": "What's the next item on the flow graph improvements backlog?"
      }
    ],
    "turnTiming": {
      "totalMs": 175576,
      "ttfeMs": 106,
      "thinkingMs": 175468,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 100,
      "toolsPct": 0,
      "ttfePct": 0
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-09T15:31:48.990Z",
  "updatedAt": "2026-01-09T15:31:53.871Z",
  "requestId": "810c0deb-2ae4-407a-bd83-b7e9dec16670",
  "scope": "vibetools",
  "tags": [
    "flows",
    "ui",
    "graphs"
  ],
  "sessionId": "ses_793682af-433",
  "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
  "flowLinks": [
    {
      "flowId": "flow_01KEHFNV42KC3ZT34N4MJJFWXB",
      "edgeType": "evidence",
      "createdAt": "2026-01-09T15:31:48.990Z"
    }
  ]
}