Status Line Hook for Token Tracking

Details

Raw Data

{
  "id": "fe656fe8-939f-41a8-80da-b766bf9e7be5",
  "type": "general",
  "status": "completed",
  "title": "Status Line Hook for Token Tracking",
  "description": "Implemented Status Line hook to capture token usage from Claude Code CLI",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:-apple-system,BlinkMacSystemFont,sans-serif;\">\n  <h2 style=\"color:#fff;margin:0 0 16px 0;\">Status Line Hook Implementation</h2>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h3 style=\"color:#22c55e;margin:0 0 12px 0;\">Architecture</h3>\n    <pre style=\"margin:0;color:#e0e0e0;line-height:1.6;font-size:0.9rem;\">\nClaude Code CLI\n  ↓ (Status Line updates every 300ms)\n/konnectvol/bin/statusline-token-tracker.sh\n  ↓ (reads JSON from stdin, posts to API)\nkonui /api/statusline\n  ↓ (stores in JSONL)\n/konnectvol/konui/data/statusline-telemetry.jsonl</pre>\n  </div>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h3 style=\"color:#61afef;margin:0 0 12px 0;\">Files Created/Modified</h3>\n    <table style=\"width:100%;border-collapse:collapse;font-size:0.9rem;\">\n      <tr style=\"border-bottom:1px solid #3d3d3d;\">\n        <td style=\"padding:8px 0;color:#98c379;\">bin/statusline-token-tracker.sh</td>\n        <td style=\"padding:8px 0;color:#9ca3af;\">NEW - Hook script that reads stdin JSON, posts to konui</td>\n      </tr>\n      <tr style=\"border-bottom:1px solid #3d3d3d;\">\n        <td style=\"padding:8px 0;color:#e5c07b;\">konui/src/router.ts</td>\n        <td style=\"padding:8px 0;color:#9ca3af;\">Added POST /api/statusline endpoint</td>\n      </tr>\n      <tr style=\"border-bottom:1px solid #3d3d3d;\">\n        <td style=\"padding:8px 0;color:#e5c07b;\">konui/src/metrics.ts</td>\n        <td style=\"padding:8px 0;color:#9ca3af;\">Added StatusLineData type, recordStatusLineData(), getStatusLineStats()</td>\n      </tr>\n      <tr>\n        <td style=\"padding:8px 0;color:#e5c07b;\">.claude/settings.local.json</td>\n        <td style=\"padding:8px 0;color:#9ca3af;\">Added statusLine config pointing to hook script</td>\n      </tr>\n    </table>\n  </div>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h3 style=\"color:#e5c07b;margin:0 0 12px 0;\">Data Captured</h3>\n    <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:12px;\">\n      <div>\n        <h4 style=\"color:#c678dd;margin:0 0 8px 0;font-size:0.9rem;\">Current Turn</h4>\n        <ul style=\"margin:0;padding-left:20px;line-height:1.8;font-size:0.85rem;\">\n          <li>inputTokens</li>\n          <li>outputTokens</li>\n          <li>cacheCreationTokens</li>\n          <li>cacheReadTokens</li>\n        </ul>\n      </div>\n      <div>\n        <h4 style=\"color:#c678dd;margin:0 0 8px 0;font-size:0.9rem;\">Session Totals</h4>\n        <ul style=\"margin:0;padding-left:20px;line-height:1.8;font-size:0.85rem;\">\n          <li>totalInputTokens</li>\n          <li>totalOutputTokens</li>\n          <li>costUsd</li>\n          <li>durationMs / apiDurationMs</li>\n          <li>linesAdded / linesRemoved</li>\n        </ul>\n      </div>\n    </div>\n  </div>\n  \n  <div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin-bottom:16px;\">\n    <h3 style=\"color:#56b6c2;margin:0 0 12px 0;\">Status Line Display</h3>\n    <p style=\"margin:0 0 8px 0;color:#9ca3af;\">The script outputs a formatted status line:</p>\n    <code style=\"display:block;background:#1e1e1e;padding:12px;border-radius:4px;color:#98c379;font-family:monospace;\">[Opus] 45% | $0.3399 | 15K in/4K out</code>\n    <p style=\"margin:8px 0 0 0;color:#7f848e;font-size:0.85rem;\">Shows: [Model] Context% | Cost | Tokens</p>\n  </div>\n  \n  <div style=\"background:rgba(234,179,8,0.1);border:1px solid rgba(234,179,8,0.3);padding:16px;border-radius:6px;\">\n    <h3 style=\"color:#eab308;margin:0 0 8px 0;\">Activation Required</h3>\n    <p style=\"margin:0;color:#e0e0e0;\">The Status Line hook is configured but requires a <strong>new Claude Code session</strong> to take effect. Hooks are captured at session startup.</p>\n    <p style=\"margin:8px 0 0 0;color:#9ca3af;font-size:0.85rem;\">After session refresh, token data will be captured and stored in statusline-telemetry.jsonl</p>\n  </div>\n</div>",
    "requestedAt": "2026-01-04T11:28:00.000Z",
    "requestId": "990d385b-65f2-479e-930b-f632b58d5a54",
    "choices": [
      {
        "label": "Restart konui",
        "value": "Restart konui service to pick up the new /api/statusline endpoint",
        "primary": true
      },
      {
        "label": "Test manually",
        "value": "Test the status line hook script manually with sample JSON input"
      },
      {
        "label": "Add stats endpoint",
        "value": "Add a /api/statusline/stats endpoint to aggregate the token data"
      }
    ]
  },
  "createdBy": "claude",
  "createdAt": "2026-01-03T17:08:54.766Z",
  "updatedAt": "2026-01-03T17:08:54.925Z",
  "requestId": "990d385b-65f2-479e-930b-f632b58d5a54",
  "scope": "vibetools",
  "tags": [
    "telemetry",
    "tokens",
    "hooks"
  ],
  "targetUser": "claude"
}