Interactive Form Demo - Live Test

Details

Raw Data

{
  "id": "b856ac9b-20bb-4a90-a0a9-8817e5bcee19",
  "type": "general",
  "status": "completed",
  "title": "Interactive Form Demo - Live Test",
  "description": "Working form that submits data back to Claude",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,-apple-system,sans-serif;\">\n  <h2 style=\"color:#fff;margin:0 0 8px 0;\">Interactive Form Demo</h2>\n  <p style=\"color:#9ca3af;margin:0 0 20px 0;\">Fill out the form below and click Submit - it will send a prompt directly to Claude!</p>\n  \n  <div id=\"form-demo\" style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h4 style=\"color:#fff;margin:0 0 12px 0;\">Quick Task Request</h4>\n    \n    <div style=\"margin-bottom:12px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">Task Type</label>\n      <select id=\"demo-task-type\" style=\"width:100%;padding:10px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;font-size:1rem;\">\n        <option value=\"Explain\">Explain code</option>\n        <option value=\"Fix\">Fix a bug</option>\n        <option value=\"Review\">Review changes</option>\n        <option value=\"Implement\">Implement feature</option>\n        <option value=\"Research\">Research topic</option>\n      </select>\n    </div>\n    \n    <div style=\"margin-bottom:12px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">File or Topic (optional)</label>\n      <input id=\"demo-task-path\" type=\"text\" placeholder=\"e.g., /konnectvol/konui/src/main.ts or 'authentication'\" style=\"width:100%;padding:10px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;box-sizing:border-box;font-size:1rem;\">\n    </div>\n    \n    <div style=\"margin-bottom:16px;\">\n      <label style=\"display:block;color:#9ca3af;margin-bottom:4px;font-size:0.9rem;\">Additional Details</label>\n      <textarea id=\"demo-task-details\" rows=\"3\" placeholder=\"Describe what you need...\" style=\"width:100%;padding:10px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#e0e0e0;resize:vertical;box-sizing:border-box;font-size:1rem;\"></textarea>\n    </div>\n    \n    <div style=\"display:flex;gap:12px;\">\n      <button onclick=\"window.submitDemoForm()\" style=\"background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-weight:bold;font-size:1rem;\">Submit to Claude</button>\n      <button onclick=\"window.previewDemoForm()\" style=\"background:#444;color:#fff;border:none;padding:12px 24px;border-radius:6px;cursor:pointer;font-size:1rem;\">Preview Prompt</button>\n    </div>\n    \n    <div id=\"demo-preview\" style=\"display:none;margin-top:12px;background:#1e1e1e;padding:12px;border-radius:4px;border-left:3px solid #3b82f6;\">\n      <div style=\"color:#9ca3af;font-size:0.85rem;margin-bottom:4px;\">Preview:</div>\n      <code id=\"demo-preview-text\" style=\"color:#98c379;\"></code>\n    </div>\n  </div>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;\">\n    <h4 style=\"color:#fff;margin:0 0 12px 0;\">How It Works</h4>\n    <ol style=\"color:#9ca3af;margin:0;padding-left:20px;line-height:1.8;\">\n      <li>Form collects your input from the fields above</li>\n      <li>Click <strong>Preview</strong> to see the prompt that will be sent</li>\n      <li>Click <strong>Submit</strong> to call <code style=\"background:#1e1e1e;padding:2px 6px;border-radius:3px;color:#98c379;\">window.sendPrompt()</code></li>\n      <li>Claude receives and processes your request!</li>\n    </ol>\n  </div>\n</div>\n\n<script>\n  // Build prompt from form fields\n  window.buildDemoPrompt = function() {\n    var taskType = document.getElementById('demo-task-type').value;\n    var taskPath = document.getElementById('demo-task-path').value.trim();\n    var taskDetails = document.getElementById('demo-task-details').value.trim();\n    \n    var prompt = taskType;\n    if (taskPath) prompt += ' ' + taskPath;\n    if (taskDetails) prompt += ': ' + taskDetails;\n    \n    return prompt;\n  };\n  \n  // Preview the prompt\n  window.previewDemoForm = function() {\n    var prompt = window.buildDemoPrompt();\n    var previewDiv = document.getElementById('demo-preview');\n    var previewText = document.getElementById('demo-preview-text');\n    \n    if (!prompt || prompt === document.getElementById('demo-task-type').value) {\n      previewText.textContent = '(Add a path or details to see the full prompt)';\n    } else {\n      previewText.textContent = prompt;\n    }\n    previewDiv.style.display = 'block';\n  };\n  \n  // Submit form to Claude\n  window.submitDemoForm = function() {\n    var prompt = window.buildDemoPrompt();\n    var taskPath = document.getElementById('demo-task-path').value.trim();\n    var taskDetails = document.getElementById('demo-task-details').value.trim();\n    \n    if (!taskPath && !taskDetails) {\n      alert('Please provide a file/topic or some details about what you need.');\n      return;\n    }\n    \n    if (window.sendPrompt) {\n      window.sendPrompt(prompt);\n    } else {\n      alert('sendPrompt not available - this only works in the dashboard console.');\n    }\n  };\n</script>",
    "requestedAt": "2026-01-06T23:42:00.000Z",
    "requestId": "a6cbe836-8d44-4e5c-b420-2a119ea8eff7",
    "turnTiming": {
      "totalMs": 28299,
      "ttfeMs": 370,
      "thinkingMs": 27929,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-06T23:47:40.989Z",
  "updatedAt": "2026-01-06T23:47:45.972Z",
  "requestId": "a6cbe836-8d44-4e5c-b420-2a119ea8eff7",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "demo",
    "forms",
    "interactive"
  ],
  "targetUser": "claude"
}