Kontask API SDK Demo - Interactive Test

Details

Raw Data

{
  "id": "8e022c5a-b007-4d99-aa61-26ddfe375eb6",
  "type": "general",
  "status": "completed",
  "title": "Kontask API SDK Demo - Interactive Test",
  "description": "Interactive demo of L1 auto-submit and L2 direct API capabilities",
  "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 API SDK Demo</h2>\n<p style=\"color:#9ca3af;margin:0 0 20px 0;\">Click the buttons below to test L1 and L2 capabilities. Each button uses the new <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">kontask.api</code> SDK.</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#98c379;\">L1: Auto-Submit Prompts</h3>\n<p style=\"color:#7f848e;margin:0 0 12px 0;font-size:0.9rem;\">Send prompts directly to Claude from this kontask card:</p>\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;\">\n<button onclick=\"kontask.submit('What time is it in Sydney?')\" style=\"background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">⚡ Quick Question</button>\n<button onclick=\"kontask.submit('Show me the current vibetools backlog')\" style=\"background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">📋 Show Backlog</button>\n<button onclick=\"kontask.submit('Run the konui tests')\" style=\"background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">🧪 Run Tests</button>\n</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#61afef;\">L2: Direct Navigation</h3>\n<p style=\"color:#7f848e;margin:0 0 12px 0;font-size:0.9rem;\">Navigate directly without a Claude turn:</p>\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;\">\n<button onclick=\"kontask.navigate('/kontasks')\" style=\"background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">📝 Kontasks List</button>\n<button onclick=\"kontask.navigate('/reports')\" style=\"background:linear-gradient(135deg,#ec4899,#db2777);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">📊 Reports</button>\n<button onclick=\"kontask.navigate('/sessions')\" style=\"background:linear-gradient(135deg,#06b6d4,#0891b2);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">💬 Sessions</button>\n</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#c678dd;\">L2: Loading & Render Demo</h3>\n<p style=\"color:#7f848e;margin:0 0 12px 0;font-size:0.9rem;\">UI helpers for async operations:</p>\n<div id=\"demo-output\" style=\"background:#1e1e1e;padding:12px;border-radius:4px;min-height:40px;margin-bottom:12px;\">\n<span style=\"color:#7f848e;\">Click a button to see the result here...</span>\n</div>\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;\">\n<button onclick=\"demoLoading()\" style=\"background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">⏳ Show Loading</button>\n<button onclick=\"demoRender()\" style=\"background:linear-gradient(135deg,#14b8a6,#0d9488);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">✨ Render Content</button>\n<button onclick=\"demoFetch()\" style=\"background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;border:none;padding:10px 16px;border-radius:6px;cursor:pointer;font-weight:500;\">🔄 Fetch + Render</button>\n</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n<h3 style=\"margin:0 0 12px 0;color:#fff;\">📖 SDK Reference</h3>\n<pre style=\"background:#1e1e1e;padding:12px;border-radius:4px;margin:0;overflow-x:auto;font-size:0.85rem;\"><span style=\"color:#7f848e;\">// L1: Auto-submit prompts</span>\n<span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">submit</span>(<span style=\"color:#98c379;\">'your prompt here'</span>);\n\n<span style=\"color:#7f848e;\">// L2: Navigation</span>\n<span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">navigate</span>(<span style=\"color:#98c379;\">'/path'</span>);\n\n<span style=\"color:#7f848e;\">// L2: Approve kontask</span>\n<span style=\"color:#c678dd;\">await</span> <span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">approve</span>(<span style=\"color:#98c379;\">'kontask-id'</span>, <span style=\"color:#98c379;\">'selected-value'</span>);\n\n<span style=\"color:#7f848e;\">// L2: Update context</span>\n<span style=\"color:#c678dd;\">await</span> <span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">updateContext</span>(<span style=\"color:#98c379;\">'kontask-id'</span>, { <span style=\"color:#e06c75;\">key</span>: <span style=\"color:#98c379;\">'value'</span> });\n\n<span style=\"color:#7f848e;\">// UI helpers</span>\n<span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">loading</span>(<span style=\"color:#d19a66;\">true</span>);  <span style=\"color:#7f848e;\">// show spinner</span>\n<span style=\"color:#e5c07b;\">kontask</span>.<span style=\"color:#61afef;\">render</span>(<span style=\"color:#98c379;\">'element-id'</span>, <span style=\"color:#98c379;\">'&lt;html&gt;'</span>);</pre>\n</div>\n</div>\n\n<script>\nfunction demoLoading() {\n  kontask.loading(true, 'demo-output');\n  setTimeout(function() {\n    kontask.loading(false, 'demo-output');\n    kontask.render('demo-output', '<span style=\"color:#22c55e;\">✓ Loading complete!</span>');\n  }, 1500);\n}\n\nfunction demoRender() {\n  const now = new Date().toLocaleTimeString();\n  kontask.render('demo-output', '<span style=\"color:#61afef;\">Rendered at: <strong>' + now + '</strong></span>');\n}\n\nasync function demoFetch() {\n  kontask.loading(true, 'demo-output');\n  try {\n    const response = await fetch('/api/kontasks?limit=3');\n    const data = await response.json();\n    const count = data.count || 0;\n    const total = data.total || 0;\n    kontask.render('demo-output', '<span style=\"color:#98c379;\">✓ Fetched ' + count + ' of ' + total + ' kontasks</span>');\n  } catch (err) {\n    kontask.render('demo-output', '<span style=\"color:#f43f5e;\">✗ Error: ' + err.message + '</span>');\n  } finally {\n    kontask.loading(false, 'demo-output');\n  }\n}\n</script>",
    "requestedAt": "2026-01-07T08:07:00.000Z",
    "requestId": "716fa07a-8c60-4ac8-8121-479c60dbab9d",
    "turnTiming": {
      "totalMs": 40844,
      "ttfeMs": 431,
      "thinkingMs": 40412,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T08:06:32.490Z",
  "updatedAt": "2026-01-07T08:06:39.656Z",
  "requestId": "716fa07a-8c60-4ac8-8121-479c60dbab9d",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "api",
    "sdk",
    "demo"
  ],
  "targetUser": "claude"
}