Interactive Components Demo

Details

Raw Data

{
  "id": "00585707-4557-4cd8-9ecb-d3abdcaa43b2",
  "type": "general",
  "status": "completed",
  "title": "Interactive Components Demo",
  "description": "Demo showcasing SimpleChart, Timeline, and SearchableList components",
  "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 20px 0;\">Interactive Components Demo</h2>\n\n<!-- SIMPLE CHART: Bar Chart -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;\">\n<h3 style=\"color:#daa520;margin:0 0 12px 0;\">SimpleChart - Token Usage This Week</h3>\n<div id=\"chart-demo\" style=\"position:relative;\">\n<canvas id=\"tokenChart\" width=\"360\" height=\"180\" style=\"max-width:100%;\"></canvas>\n</div>\n<script>\n(function() {\n  const canvas = document.getElementById('tokenChart');\n  if (!canvas) return;\n  const ctx = canvas.getContext('2d');\n  const data = [\n    { label: 'Mon', value: 45000 },\n    { label: 'Tue', value: 82000 },\n    { label: 'Wed', value: 67000 },\n    { label: 'Thu', value: 91000 },\n    { label: 'Fri', value: 54000 },\n    { label: 'Sat', value: 23000 },\n    { label: 'Sun', value: 38000 }\n  ];\n  const colors = ['#22c55e', '#3b82f6', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4', '#ec4899'];\n  const maxVal = Math.max(...data.map(d => d.value));\n  const barWidth = 40;\n  const gap = 12;\n  const chartHeight = 140;\n  const startX = 30;\n  \n  // Draw bars\n  data.forEach((d, i) => {\n    const barHeight = (d.value / maxVal) * chartHeight;\n    const x = startX + i * (barWidth + gap);\n    const y = chartHeight - barHeight + 10;\n    \n    ctx.fillStyle = colors[i % colors.length];\n    ctx.fillRect(x, y, barWidth, barHeight);\n    \n    // Label\n    ctx.fillStyle = '#9ca3af';\n    ctx.font = '11px system-ui';\n    ctx.textAlign = 'center';\n    ctx.fillText(d.label, x + barWidth/2, chartHeight + 25);\n    \n    // Value\n    ctx.fillStyle = '#fff';\n    ctx.fillText((d.value/1000).toFixed(0) + 'k', x + barWidth/2, y - 5);\n  });\n})();\n</script>\n</div>\n\n<!-- TIMELINE -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:20px;\">\n<h3 style=\"color:#daa520;margin:0 0 16px 0;\">Timeline - Recent Activity</h3>\n<div id=\"timeline-demo\" style=\"position:relative;padding-left:24px;\">\n\n<div style=\"position:relative;padding-bottom:20px;\">\n<div style=\"position:absolute;left:-18px;top:4px;width:12px;height:12px;border-radius:50%;background:#22c55e;\"></div>\n<div style=\"position:absolute;left:-13px;top:16px;width:2px;height:calc(100% - 8px);background:#444;\"></div>\n<div style=\"font-weight:bold;color:#fff;\">Components committed</div>\n<div style=\"color:#9ca3af;font-size:0.9rem;\">Added SimpleChart, Timeline, SearchableList to kontask-templates.ts</div>\n<div style=\"color:#666;font-size:0.8rem;margin-top:4px;\">2 minutes ago</div>\n</div>\n\n<div style=\"position:relative;padding-bottom:20px;\">\n<div style=\"position:absolute;left:-18px;top:4px;width:12px;height:12px;border-radius:50%;background:#3b82f6;\"></div>\n<div style=\"position:absolute;left:-13px;top:16px;width:2px;height:calc(100% - 8px);background:#444;\"></div>\n<div style=\"font-weight:bold;color:#fff;\">Documentation updated</div>\n<div style=\"color:#9ca3af;font-size:0.9rem;\">CLAUDE.md and konui/CLAUDE.md with component examples</div>\n<div style=\"color:#666;font-size:0.8rem;margin-top:4px;\">3 minutes ago</div>\n</div>\n\n<div style=\"position:relative;padding-bottom:20px;\">\n<div style=\"position:absolute;left:-18px;top:4px;width:12px;height:12px;border-radius:50%;background:#f59e0b;\"></div>\n<div style=\"position:absolute;left:-13px;top:16px;width:2px;height:calc(100% - 8px);background:#444;\"></div>\n<div style=\"font-weight:bold;color:#fff;\">Konui restarted</div>\n<div style=\"color:#9ca3af;font-size:0.9rem;\">Service restarted to pick up new components</div>\n<div style=\"color:#666;font-size:0.8rem;margin-top:4px;\">5 minutes ago</div>\n</div>\n\n<div style=\"position:relative;\">\n<div style=\"position:absolute;left:-18px;top:4px;width:12px;height:12px;border-radius:50%;background:#6b7280;\"></div>\n<div style=\"font-weight:bold;color:#fff;\">FileTree + FileViewer tested</div>\n<div style=\"color:#9ca3af;font-size:0.9rem;\">Interactive file browser working with click handlers</div>\n<div style=\"color:#666;font-size:0.8rem;margin-top:4px;\">15 minutes ago</div>\n</div>\n\n</div>\n</div>\n\n<!-- SEARCHABLE LIST -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<h3 style=\"color:#daa520;margin:0 0 12px 0;\">SearchableList - Gold Coast Suburbs</h3>\n<div id=\"search-demo\">\n<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:12px;\">\n<input type=\"text\" id=\"suburbSearch\" placeholder=\"Search suburbs...\" oninput=\"window.filterSuburbs(this.value)\" style=\"flex:1;padding:8px 12px;border-radius:4px;border:1px solid #444;background:#1e1e1e;color:#fff;font-size:0.9rem;\">\n<span id=\"suburbCount\" style=\"color:#9ca3af;font-size:0.85rem;\">6/6</span>\n</div>\n<div id=\"suburbList\" style=\"max-height:200px;overflow-y:auto;\">\n\n<div class=\"suburb-item\" data-search=\"hope island northern gold coast 4212\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Hope Island</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Northern Gold Coast</div>\n</div>\n<span style=\"background:#22c55e;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">42 listings</span>\n</div>\n\n<div class=\"suburb-item\" data-search=\"broadbeach central gold coast 4218\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Broadbeach</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Central Gold Coast</div>\n</div>\n<span style=\"background:#3b82f6;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">28 listings</span>\n</div>\n\n<div class=\"suburb-item\" data-search=\"surfers paradise central gold coast 4217\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Surfers Paradise</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Central Gold Coast</div>\n</div>\n<span style=\"background:#f59e0b;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">35 listings</span>\n</div>\n\n<div class=\"suburb-item\" data-search=\"southport northern gold coast 4215\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Southport</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Northern Gold Coast</div>\n</div>\n<span style=\"background:#8b5cf6;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">19 listings</span>\n</div>\n\n<div class=\"suburb-item\" data-search=\"burleigh heads southern gold coast 4220\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Burleigh Heads</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Southern Gold Coast</div>\n</div>\n<span style=\"background:#06b6d4;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">24 listings</span>\n</div>\n\n<div class=\"suburb-item\" data-search=\"coolangatta southern gold coast 4225\" style=\"display:flex;align-items:center;gap:12px;padding:10px;border-radius:4px;cursor:pointer;transition:background 0.2s;\" onmouseover=\"this.style.background='#3d3d3d'\" onmouseout=\"this.style.background='transparent'\">\n<span style=\"font-size:1.2rem;\">📍</span>\n<div style=\"flex:1;\">\n<div style=\"color:#fff;font-weight:500;\">Coolangatta</div>\n<div style=\"color:#9ca3af;font-size:0.85rem;\">Southern Gold Coast</div>\n</div>\n<span style=\"background:#ec4899;color:#fff;padding:2px 8px;border-radius:4px;font-size:0.8rem;\">16 listings</span>\n</div>\n\n</div>\n<div id=\"emptyMessage\" style=\"display:none;color:#9ca3af;text-align:center;padding:20px;\">No suburbs found</div>\n</div>\n<script>\nwindow.filterSuburbs = function(query) {\n  const items = document.querySelectorAll('.suburb-item');\n  const q = query.toLowerCase();\n  let visible = 0;\n  items.forEach(item => {\n    const searchText = item.dataset.search || '';\n    const match = !q || searchText.includes(q);\n    item.style.display = match ? 'flex' : 'none';\n    if (match) visible++;\n  });\n  document.getElementById('suburbCount').textContent = visible + '/6';\n  document.getElementById('emptyMessage').style.display = visible === 0 ? 'block' : 'none';\n};\n</script>\n</div>\n\n<div style=\"background:#1a3320;border:1px solid #22c55e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#22c55e;\">All components are interactive!</strong>\n<div style=\"color:#9ca3af;font-size:0.9rem;margin-top:4px;\">Try typing in the search box above to filter suburbs in real-time.</div>\n</div>\n</div>",
    "requestedAt": "2026-01-07T07:05:00.000Z",
    "requestId": "d193bf11-d723-4397-86b1-12dcfc75e3c4",
    "choices": [
      {
        "label": "View pie chart",
        "value": "Show me a pie chart example with the SimpleChart component",
        "primary": true
      },
      {
        "label": "Real data demo",
        "value": "Create a demo using real kontask or listing data from the system"
      },
      {
        "label": "Component docs",
        "value": "Show me the component documentation from CLAUDE.md"
      }
    ],
    "turnTiming": {
      "totalMs": 49412,
      "ttfeMs": 570,
      "thinkingMs": 48842,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T07:10:56.827Z",
  "updatedAt": "2026-01-07T07:11:01.277Z",
  "requestId": "d193bf11-d723-4397-86b1-12dcfc75e3c4",
  "scope": "vibetools",
  "tags": [
    "kontasks",
    "ui",
    "components",
    "demo"
  ],
  "targetUser": "claude"
}