Telemetry Dashboard - Top 3 Charts

Details

Raw Data

{
  "id": "4f059afb-3b64-4b2f-9ea1-80519f835267",
  "type": "general",
  "status": "completed",
  "title": "Telemetry Dashboard - Top 3 Charts",
  "description": "Real-time CPU, Memory, and Session metrics from konsole",
  "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;\">Telemetry Dashboard</h2>\n<p style=\"color:#9ca3af;margin:0 0 20px 0;\">Real-time metrics from kon1.konnect.technology • Last 10 minutes</p>\n\n<!-- CHART 1: CPU Usage Line Chart -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\">\n<h3 style=\"color:#daa520;margin:0;\">CPU Usage %</h3>\n<span style=\"color:#22c55e;font-weight:bold;font-size:1.2rem;\">17%</span>\n</div>\n<canvas id=\"cpuChart\" width=\"360\" height=\"120\" style=\"max-width:100%;\"></canvas>\n<script>\n(function() {\n  const canvas = document.getElementById('cpuChart');\n  if (!canvas) return;\n  const ctx = canvas.getContext('2d');\n  const data = [20,18.9,20.3,41.6,43.9,46.2,45.5,45.2,45.4,46.4,25.2,19.5,20.1,20.7,15.7,21,17.4,21.3,15.4,17];\n  const maxVal = 100;\n  const width = canvas.width;\n  const height = canvas.height;\n  const padding = 25;\n  const chartWidth = width - padding * 2;\n  const chartHeight = height - padding;\n  const stepX = chartWidth / (data.length - 1);\n  \n  // Grid lines\n  ctx.strokeStyle = '#444';\n  ctx.lineWidth = 0.5;\n  for (let i = 0; i <= 4; i++) {\n    const y = padding/2 + (chartHeight / 4) * i;\n    ctx.beginPath();\n    ctx.moveTo(padding, y);\n    ctx.lineTo(width - padding, y);\n    ctx.stroke();\n    ctx.fillStyle = '#666';\n    ctx.font = '10px system-ui';\n    ctx.textAlign = 'right';\n    ctx.fillText((100 - i * 25) + '%', padding - 5, y + 3);\n  }\n  \n  // Line\n  ctx.strokeStyle = '#22c55e';\n  ctx.lineWidth = 2;\n  ctx.beginPath();\n  data.forEach((val, i) => {\n    const x = padding + i * stepX;\n    const y = padding/2 + chartHeight - (val / maxVal) * chartHeight;\n    if (i === 0) ctx.moveTo(x, y);\n    else ctx.lineTo(x, y);\n  });\n  ctx.stroke();\n  \n  // Fill\n  ctx.lineTo(padding + (data.length - 1) * stepX, padding/2 + chartHeight);\n  ctx.lineTo(padding, padding/2 + chartHeight);\n  ctx.closePath();\n  ctx.fillStyle = 'rgba(34, 197, 94, 0.1)';\n  ctx.fill();\n  \n  // Current dot\n  const lastX = padding + (data.length - 1) * stepX;\n  const lastY = padding/2 + chartHeight - (data[data.length-1] / maxVal) * chartHeight;\n  ctx.beginPath();\n  ctx.arc(lastX, lastY, 4, 0, Math.PI * 2);\n  ctx.fillStyle = '#22c55e';\n  ctx.fill();\n})();\n</script>\n<div style=\"display:flex;justify-content:space-between;margin-top:8px;color:#666;font-size:0.8rem;\">\n<span>10 min ago</span>\n<span>Load: 0.11 / 0.37 / 0.42</span>\n<span>Now</span>\n</div>\n</div>\n\n<!-- CHART 2: Memory Usage Bar Chart -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\">\n<h3 style=\"color:#daa520;margin:0;\">Memory Usage</h3>\n<span style=\"color:#3b82f6;font-weight:bold;font-size:1.2rem;\">23.3%</span>\n</div>\n<canvas id=\"memChart\" width=\"360\" height=\"100\" style=\"max-width:100%;\"></canvas>\n<script>\n(function() {\n  const canvas = document.getElementById('memChart');\n  if (!canvas) return;\n  const ctx = canvas.getContext('2d');\n  \n  const total = 7821;\n  const used = 1825;\n  const cache = 4789;\n  const free = 1206;\n  \n  const width = canvas.width - 40;\n  const height = 30;\n  const y = 20;\n  const x = 20;\n  \n  // Background\n  ctx.fillStyle = '#1e1e1e';\n  ctx.fillRect(x, y, width, height);\n  \n  // Used (blue)\n  const usedW = (used / total) * width;\n  ctx.fillStyle = '#3b82f6';\n  ctx.fillRect(x, y, usedW, height);\n  \n  // Cache (purple)\n  const cacheW = (cache / total) * width;\n  ctx.fillStyle = '#8b5cf6';\n  ctx.fillRect(x + usedW, y, cacheW, height);\n  \n  // Free (gray)\n  const freeW = (free / total) * width;\n  ctx.fillStyle = '#374151';\n  ctx.fillRect(x + usedW + cacheW, y, freeW, height);\n  \n  // Legend\n  ctx.font = '11px system-ui';\n  ctx.textAlign = 'left';\n  const legendY = 70;\n  \n  ctx.fillStyle = '#3b82f6';\n  ctx.fillRect(x, legendY, 12, 12);\n  ctx.fillStyle = '#9ca3af';\n  ctx.fillText('Used: 1.8 GB', x + 18, legendY + 10);\n  \n  ctx.fillStyle = '#8b5cf6';\n  ctx.fillRect(x + 100, legendY, 12, 12);\n  ctx.fillStyle = '#9ca3af';\n  ctx.fillText('Cache: 4.7 GB', x + 118, legendY + 10);\n  \n  ctx.fillStyle = '#374151';\n  ctx.fillRect(x + 210, legendY, 12, 12);\n  ctx.fillStyle = '#9ca3af';\n  ctx.fillText('Free: 1.2 GB', x + 228, legendY + 10);\n})();\n</script>\n<div style=\"text-align:center;margin-top:4px;color:#666;font-size:0.8rem;\">Total: 7.8 GB</div>\n</div>\n\n<!-- CHART 3: Sessions Pie Chart -->\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n<div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;\">\n<h3 style=\"color:#daa520;margin:0;\">Active Sessions</h3>\n<span style=\"color:#f59e0b;font-weight:bold;font-size:1.2rem;\">3 total</span>\n</div>\n<div style=\"display:flex;align-items:center;gap:20px;\">\n<canvas id=\"sessionChart\" width=\"120\" height=\"120\"></canvas>\n<div style=\"flex:1;\">\n<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n<span style=\"width:12px;height:12px;border-radius:50%;background:#22c55e;\"></span>\n<span style=\"color:#fff;\">Running</span>\n<span style=\"color:#22c55e;font-weight:bold;margin-left:auto;\">1</span>\n</div>\n<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n<span style=\"width:12px;height:12px;border-radius:50%;background:#3b82f6;\"></span>\n<span style=\"color:#fff;\">Idle</span>\n<span style=\"color:#3b82f6;font-weight:bold;margin-left:auto;\">2</span>\n</div>\n<div style=\"display:flex;align-items:center;gap:8px;margin-bottom:8px;\">\n<span style=\"width:12px;height:12px;border-radius:50%;background:#6b7280;\"></span>\n<span style=\"color:#fff;\">Stopped</span>\n<span style=\"color:#6b7280;font-weight:bold;margin-left:auto;\">0</span>\n</div>\n<div style=\"display:flex;align-items:center;gap:8px;\">\n<span style=\"width:12px;height:12px;border-radius:50%;background:#ef4444;\"></span>\n<span style=\"color:#fff;\">Error</span>\n<span style=\"color:#ef4444;font-weight:bold;margin-left:auto;\">0</span>\n</div>\n</div>\n</div>\n<script>\n(function() {\n  const canvas = document.getElementById('sessionChart');\n  if (!canvas) return;\n  const ctx = canvas.getContext('2d');\n  const data = [{val: 1, color: '#22c55e'}, {val: 2, color: '#3b82f6'}];\n  const total = 3;\n  const cx = 60, cy = 60, r = 50;\n  let startAngle = -Math.PI / 2;\n  \n  data.forEach(d => {\n    const sliceAngle = (d.val / total) * 2 * Math.PI;\n    ctx.beginPath();\n    ctx.moveTo(cx, cy);\n    ctx.arc(cx, cy, r, startAngle, startAngle + sliceAngle);\n    ctx.closePath();\n    ctx.fillStyle = d.color;\n    ctx.fill();\n    startAngle += sliceAngle;\n  });\n  \n  // Center hole\n  ctx.beginPath();\n  ctx.arc(cx, cy, 25, 0, Math.PI * 2);\n  ctx.fillStyle = '#2d2d2d';\n  ctx.fill();\n  \n  // Center text\n  ctx.fillStyle = '#fff';\n  ctx.font = 'bold 16px system-ui';\n  ctx.textAlign = 'center';\n  ctx.fillText('3', cx, cy + 6);\n})();\n</script>\n</div>\n\n<!-- Summary -->\n<div style=\"background:#1a3320;border:1px solid #22c55e;padding:12px;border-radius:6px;\">\n<strong style=\"color:#22c55e;\">System Healthy</strong>\n<div style=\"color:#9ca3af;font-size:0.9rem;margin-top:4px;\">Uptime: 1h 57m • Disk: 9% used (15/196 GB) • Heap: 14 MB</div>\n</div>\n</div>",
    "requestedAt": "2026-01-07T07:12:30.000Z",
    "requestId": "dfd994f5-0678-4595-a8d6-63dc3f32b5b0",
    "choices": [
      {
        "label": "Refresh",
        "value": "Give me charts of telemetry data, top 3",
        "primary": true
      },
      {
        "label": "Show history",
        "value": "Show me the full telemetry history as a timeline"
      },
      {
        "label": "Disk details",
        "value": "Show me detailed disk usage breakdown"
      }
    ],
    "turnTiming": {
      "totalMs": 63158,
      "ttfeMs": 448,
      "thinkingMs": 62710,
      "toolExecutionMs": 0,
      "toolCallCount": 0,
      "thinkingPct": 99,
      "toolsPct": 0,
      "ttfePct": 1
    }
  },
  "createdBy": "claude",
  "createdAt": "2026-01-07T07:13:09.577Z",
  "updatedAt": "2026-01-07T07:13:14.114Z",
  "requestId": "dfd994f5-0678-4595-a8d6-63dc3f32b5b0",
  "scope": "vibetools",
  "tags": [
    "telemetry",
    "performance",
    "charts"
  ],
  "targetUser": "claude"
}