SDK Demo Fixed - UI Helpers Working

Details

Raw Data

{
  "id": "4a7ff3c6-26b5-4639-a00b-6512021560c4",
  "type": "general",
  "status": "completed",
  "title": "SDK Demo Fixed - UI Helpers Working",
  "description": "Fixed demo with window-scoped functions for Loading/Render/Fetch",
  "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;\">🔧 SDK Demo (Fixed)</h2>\n<p style=\"color:#9ca3af;margin:0 0 20px 0;\">The issue was that demo functions weren't on <code style=\"background:#2d2d2d;padding:2px 6px;border-radius:3px;\">window</code>. Now using inline handlers.</p>\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-v2\" style=\"background:#1e1e1e;padding:12px;border-radius:4px;min-height:40px;margin-bottom:12px;position:relative;\">\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 id=\"btn-loading\" 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 id=\"btn-render\" 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 id=\"btn-fetch\" 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;margin-bottom:16px;\">\n<h3 style=\"margin:0 0 12px 0;color:#98c379;\">L1: Auto-Submit (still works)</h3>\n<div style=\"display:flex;flex-wrap:wrap;gap:8px;\">\n<button onclick=\"kontask.submit('What time is it?')\" 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</div>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n<h3 style=\"margin:0 0 8px 0;color:#f59e0b;\">⚠️ The Fix</h3>\n<p style=\"color:#9ca3af;margin:0;font-size:0.9rem;\">Script functions must be attached to buttons via <code style=\"background:#1e1e1e;padding:2px 4px;border-radius:3px;\">addEventListener</code> or use <code style=\"background:#1e1e1e;padding:2px 4px;border-radius:3px;\">window.fnName</code> for onclick handlers. The previous demo defined local functions that weren't accessible from onclick attributes.</p>\n</div>\n</div>\n\n<script>\n(function() {\n  // Wait for DOM to be ready\n  var output = document.getElementById('demo-output-v2');\n  var btnLoading = document.getElementById('btn-loading');\n  var btnRender = document.getElementById('btn-render');\n  var btnFetch = document.getElementById('btn-fetch');\n\n  if (!output || !btnLoading || !btnRender || !btnFetch) {\n    console.error('[SDK Demo] Elements not found');\n    return;\n  }\n\n  btnLoading.addEventListener('click', function() {\n    kontask.loading(true, 'demo-output-v2');\n    setTimeout(function() {\n      kontask.loading(false, 'demo-output-v2');\n      kontask.render('demo-output-v2', '<span style=\"color:#22c55e;\">✓ Loading complete!</span>');\n    }, 1500);\n  });\n\n  btnRender.addEventListener('click', function() {\n    var now = new Date().toLocaleTimeString();\n    kontask.render('demo-output-v2', '<span style=\"color:#61afef;\">Rendered at: <strong>' + now + '</strong></span>');\n  });\n\n  btnFetch.addEventListener('click', async function() {\n    kontask.loading(true, 'demo-output-v2');\n    try {\n      var response = await fetch('/api/kontasks?limit=3');\n      var data = await response.json();\n      var count = data.count || 0;\n      var total = data.total || 0;\n      kontask.render('demo-output-v2', '<span style=\"color:#98c379;\">✓ Fetched ' + count + ' of ' + total + ' kontasks</span>');\n    } catch (err) {\n      kontask.render('demo-output-v2', '<span style=\"color:#f43f5e;\">✗ Error: ' + err.message + '</span>');\n    } finally {\n      kontask.loading(false, 'demo-output-v2');\n    }\n  });\n\n  console.log('[SDK Demo] Event listeners attached');\n})();\n</script>",
    "requestedAt": "2026-01-07T08:08:00.000Z",
    "requestId": "17f91c51-204b-4bd6-aca6-e7ad8ada5bca",
    "turnTiming": {
      "totalMs": 49712,
      "ttfeMs": 511,
      "thinkingMs": 49201,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T08:09:27.090Z",
  "updatedAt": "2026-01-07T08:09:33.698Z",
  "requestId": "17f91c51-204b-4bd6-aca6-e7ad8ada5bca",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "api",
    "sdk",
    "demo",
    "fix"
  ],
  "targetUser": "claude"
}