Kontask Action API - Gap Analysis

Details

Raw Data

{
  "id": "61771e78-faa8-4782-9297-a4baee1581dd",
  "type": "general",
  "status": "completed",
  "title": "Kontask Action API - Gap Analysis",
  "description": "Analysis of API support needed for interactive kontask cards",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">🔌 Kontask Action API - Gap Analysis</h2>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#f59e0b;margin:0 0 12px 0;\">⚠️ Missing from Backlog</h3>\n<p style=\"color:#9ca3af;margin:0;\">The \"Kontask Action API\" was discussed during component implementation but <strong style=\"color:#f59e0b;\">was not added to VIBE.md</strong>. Here's what's needed:</p>\n</div>\n\n<!-- Current State -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#3b82f6;margin:0 0 12px 0;\">Current State</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#9ca3af;\">Interactive Components</td>\n<td style=\"padding:8px;color:#22c55e;\">✅ Implemented</td>\n<td style=\"padding:8px;color:#7f848e;\">SimpleChart, Timeline, SearchableList, FileTree, FileViewer, etc.</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#9ca3af;\">Inline JS Execution</td>\n<td style=\"padding:8px;color:#22c55e;\">✅ Implemented</td>\n<td style=\"padding:8px;color:#7f848e;\">Scripts run in kontask cards</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#9ca3af;\">Click Handlers</td>\n<td style=\"padding:8px;color:#22c55e;\">✅ Implemented</td>\n<td style=\"padding:8px;color:#7f848e;\"><code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">onSelectFn</code>, <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">onClickFn</code></td>\n</tr>\n<tr>\n<td style=\"padding:8px;color:#9ca3af;\">Action API</td>\n<td style=\"padding:8px;color:#ef4444;\">❌ Missing</td>\n<td style=\"padding:8px;color:#7f848e;\">No endpoint to send actions back to Claude</td>\n</tr>\n</table>\n</div>\n\n<!-- The Gap -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#c678dd;margin:0 0 12px 0;\">The Missing Piece</h3>\n<p style=\"color:#e0e0e0;margin:0 0 12px 0;\">Interactive components can <strong>capture user actions</strong> (clicks, selections, reordering), but there's no way to <strong>send those actions back to Claude</strong> for processing.</p>\n\n<div style=\"background:#1e1e1e;padding:12px;border-radius:6px;margin-top:12px;\">\n<h4 style=\"color:#fff;margin:0 0 8px 0;\">Example: SearchableList</h4>\n<pre style=\"color:#98c379;margin:0;font-size:0.9rem;\">// User clicks \"Hope Island\" in list\nwindow.handleSuburbSelect = function(item) {\n  // ✅ We have the selection: item.title = \"Hope Island\"\n  // ❌ No way to tell Claude: \"User selected Hope Island, continue workflow\"\n};</pre>\n</div>\n</div>\n\n<!-- Proposed Design -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#22c55e;margin:0 0 12px 0;\">Proposed: Kontask Action API</h3>\n\n<h4 style=\"color:#fff;margin:12px 0 8px 0;\">1. New Endpoint</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;color:#e5c07b;margin:0;\">POST /api/kontasks/:id/action\n{\n  \"action\": \"select\",\n  \"data\": { \"item\": \"Hope Island\", \"id\": \"hope-island\" },\n  \"continueSession\": true\n}</pre>\n\n<h4 style=\"color:#fff;margin:16px 0 8px 0;\">2. Client Helper</h4>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:6px;color:#61afef;margin:0;\">// Auto-injected into kontask cards\nwindow.kontaskAction = async function(action, data) {\n  await fetch(`/api/kontasks/${kontaskId}/action`, {\n    method: 'POST',\n    body: JSON.stringify({ action, data })\n  });\n};\n\n// Usage in component handlers:\nwindow.handleSuburbSelect = function(item) {\n  kontaskAction('suburb_selected', item);\n};</pre>\n\n<h4 style=\"color:#fff;margin:16px 0 8px 0;\">3. Integration with Console</h4>\n<ul style=\"margin:0;padding-left:20px;color:#e0e0e0;line-height:1.8;\">\n<li>Action creates a prompt in the current session</li>\n<li>Prefix like <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;\">[From kontask: User selected 'Hope Island']</code></li>\n<li>Claude receives action + original kontask context</li>\n<li>Workflow continues seamlessly</li>\n</ul>\n</div>\n\n<!-- Use Cases -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#daa520;margin:0 0 12px 0;\">Unlocked Use Cases</h3>\n<table style=\"width:100%;border-collapse:collapse;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#22c55e;\">🖼️</td>\n<td style=\"padding:8px;color:#fff;\">Image Selection</td>\n<td style=\"padding:8px;color:#9ca3af;\">User clicks image → Claude proceeds with that choice</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#3b82f6;\">📁</td>\n<td style=\"padding:8px;color:#fff;\">File Tree Navigation</td>\n<td style=\"padding:8px;color:#9ca3af;\">User clicks file → Claude reads/edits that file</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#c678dd;\">📋</td>\n<td style=\"padding:8px;color:#fff;\">SortableList Reorder</td>\n<td style=\"padding:8px;color:#9ca3af;\">User reorders items → Claude uses new priority</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;color:#f59e0b;\">🔍</td>\n<td style=\"padding:8px;color:#fff;\">SearchableList Filter</td>\n<td style=\"padding:8px;color:#9ca3af;\">User selects from filtered list → Claude acts on selection</td>\n</tr>\n<tr>\n<td style=\"padding:8px;color:#ef4444;\">📊</td>\n<td style=\"padding:8px;color:#fff;\">Chart Drill-Down</td>\n<td style=\"padding:8px;color:#9ca3af;\">User clicks data point → Claude explains/expands</td>\n</tr>\n</table>\n</div>\n\n<!-- Priority -->\n<div style=\"background:linear-gradient(135deg,#1e3a5f,#2d2d2d);padding:16px;border-radius:6px;border-left:4px solid #daa520;\">\n<h3 style=\"color:#daa520;margin:0 0 8px 0;\">📌 Recommendation</h3>\n<p style=\"color:#e0e0e0;margin:0;\">Add <strong>\"Kontask Action API\"</strong> as a <strong>[HIGH]</strong> priority item in VIBE.md backlog. This is the missing link that makes interactive components truly useful - otherwise they're just pretty displays with no feedback loop to Claude.</p>\n</div>\n\n</div>",
    "requestedAt": "2026-01-07T07:35:00.000Z",
    "requestId": "15e56128-9c2a-467c-a9c4-3938815e0231",
    "choices": [
      {
        "label": "Add to backlog",
        "value": "Add Kontask Action API as a HIGH priority item to VIBE.md backlog with the design outlined above",
        "primary": true
      },
      {
        "label": "Implement now",
        "value": "Let's implement the Kontask Action API right now - add the endpoint and client helper"
      },
      {
        "label": "Discuss design",
        "value": "I have some thoughts on the Kontask Action API design - let me share"
      }
    ],
    "turnTiming": {
      "totalMs": 101105,
      "ttfeMs": 579,
      "thinkingMs": 100526,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T07:48:27.415Z",
  "updatedAt": "2026-01-07T07:48:32.686Z",
  "requestId": "15e56128-9c2a-467c-a9c4-3938815e0231",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "api",
    "components"
  ],
  "targetUser": "claude"
}