Status Bar Redesign Proposal

Details

Raw Data

{
  "id": "d4b8a43f-7d43-41f6-8e68-4dbc25832083",
  "type": "general",
  "status": "completed",
  "title": "Status Bar Redesign Proposal",
  "description": "Comprehensive redesign of the working/busy/connectivity status system",
  "context": {
    "output": "<div style=\"background:#1e1e1e;color:#e0e0e0;padding:20px;border-radius:8px;font-family:system-ui,sans-serif;\">\n<h2 style=\"color:#fff;margin:0 0 16px 0;\">📊 Status Bar Redesign Proposal</h2>\n<p style=\"color:#888;\">You're right - the current status system is fragile and doesn't communicate real state. Here's a proper design:</p>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:16px 0;\">\n<h3 style=\"color:#61afef;margin:0 0 12px 0;\">🎯 Core Problems</h3>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;\">\n<li>Auto-compact message doesn't revert to working state</li>\n<li>\"Working\" shown even when connection is dead</li>\n<li>No distinction between connected/streaming/stalled</li>\n<li>Status buried in header, not prominent enough</li>\n<li>No heartbeat/health check to detect silent failures</li>\n</ul>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:16px 0;border-left:3px solid #4caf50;\">\n<h3 style=\"color:#4caf50;margin:0 0 12px 0;\">✨ Proposed Design</h3>\n\n<h4 style=\"color:#c9a227;margin:12px 0 8px 0;\">1. Dedicated Status Bar (above input)</h4>\n<pre style=\"background:#1a1a2e;padding:12px;border-radius:4px;font-size:0.8rem;line-height:1.6;overflow-x:auto;\">\n┌─────────────────────────────────────────────────────────┐\n│  Console output area                                     │\n│                                                          │\n├─────────────────────────────────────────────────────────┤\n│  <span style=\"color:#4caf50;\">●</span> <span style=\"color:#4caf50;\">Connected</span>  │  <span style=\"color:#c9a227;\">Working: Editing router.ts</span>  │  <span style=\"color:#888;\">2.3s</span>  │ ← Status bar\n├─────────────────────────────────────────────────────────┤\n│  [📎] [__________________________] [Send]                │\n└─────────────────────────────────────────────────────────┘\n</pre>\n\n<h4 style=\"color:#c9a227;margin:16px 0 8px 0;\">2. Connection States (color-coded)</h4>\n<table style=\"width:100%;border-collapse:collapse;font-size:0.85rem;margin:8px 0;\">\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;\"><span style=\"color:#4caf50;\">●</span> <strong>Connected</strong></td>\n<td style=\"padding:8px;\">SSE stream active, receiving events</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;\"><span style=\"color:#c9a227;\">●</span> <strong>Working</strong></td>\n<td style=\"padding:8px;\">Connected + Claude is processing (last event <5s ago)</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;\"><span style=\"color:#ff9800;\">●</span> <strong>Stalled</strong></td>\n<td style=\"padding:8px;\">No events for 10+ seconds (might be stuck)</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;\"><span style=\"color:#9c27b0;\">●</span> <strong>Compacting</strong></td>\n<td style=\"padding:8px;\">Claude is summarizing context (may take 30-60s)</td>\n</tr>\n<tr style=\"border-bottom:1px solid #444;\">\n<td style=\"padding:8px;\"><span style=\"color:#f44336;\">●</span> <strong>Disconnected</strong></td>\n<td style=\"padding:8px;\">SSE stream closed, attempting reconnect</td>\n</tr>\n<tr>\n<td style=\"padding:8px;\"><span style=\"color:#666;\">●</span> <strong>Offline</strong></td>\n<td style=\"padding:8px;\">No network connectivity</td>\n</tr>\n</table>\n\n<h4 style=\"color:#c9a227;margin:16px 0 8px 0;\">3. Auto-Compact Overlay</h4>\n<p>When compacting, show a semi-transparent overlay with spinner:</p>\n<pre style=\"background:#1a1a2e;padding:12px;border-radius:4px;font-size:0.8rem;\">\n┌─────────────────────────────────────────────────────────┐\n│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n│  ░░░░░░░░░░  <span style=\"color:#9c27b0;\">⟳ Compacting context...</span>  ░░░░░░░░░░░░ │\n│  ░░░░░░░░░░  <span style=\"color:#888;\">Claude is summarizing history</span> ░░░░░░░░░░ │\n│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │\n└─────────────────────────────────────────────────────────┘\n</pre>\n\n<h4 style=\"color:#c9a227;margin:16px 0 8px 0;\">4. Heartbeat Detection</h4>\n<ul style=\"margin:0;padding-left:20px;line-height:1.8;font-size:0.9rem;\">\n<li>Track <code>lastEventAt</code> timestamp on every SSE event</li>\n<li>If no events for 10s during \"Working\" → show <span style=\"color:#ff9800;\">Stalled</span></li>\n<li>If no events for 30s → show <span style=\"color:#f44336;\">Disconnected</span>, attempt reconnect</li>\n<li>Auto-compact events reset the timer and show purple state</li>\n</ul>\n\n<h4 style=\"color:#c9a227;margin:16px 0 8px 0;\">5. Elapsed Timer</h4>\n<p style=\"font-size:0.9rem;\">Show running time: <code style=\"background:#3d3d3d;padding:2px 6px;border-radius:3px;\">Working: Reading files... (12.4s)</code></p>\n<p style=\"font-size:0.9rem;\">Turns <span style=\"color:#ff9800;\">orange</span> after 60s, <span style=\"color:#f44336;\">red</span> after 120s</p>\n</div>\n\n<div style=\"background:#2d2d2d;padding:16px;border-radius:6px;margin:16px 0;\">\n<h3 style=\"color:#fff;margin:0 0 10px 0;\">📋 Implementation Tasks</h3>\n<ol style=\"margin:0;padding-left:20px;line-height:1.8;font-size:0.9rem;\">\n<li>Add dedicated status bar component above input</li>\n<li>Implement state machine: Idle → Connected → Working → [Stalled|Compacting] → Done</li>\n<li>Add heartbeat timer (check every 1s, update state based on lastEventAt)</li>\n<li>Create compact overlay with blur/dim effect</li>\n<li>Add elapsed time display with color thresholds</li>\n<li>Fix auto-compact to properly transition back to Working</li>\n<li>Add SSE reconnection logic with exponential backoff</li>\n</ol>\n</div>\n\n<div style=\"background:#1a3d3d;padding:12px 16px;border-radius:6px;margin-top:16px;\">\n<strong style=\"color:#4caf50;\">Want me to implement this?</strong> It's a solid day's work but would make the console much more reliable and trustworthy.\n</div>\n</div>",
    "requestId": "0dd0709f-aa51-433c-b72e-469be932be28",
    "requestedAt": "2026-01-02T04:05:00.000Z"
  },
  "createdBy": "claude",
  "createdAt": "2026-01-02T04:07:23.168Z",
  "updatedAt": "2026-01-02T04:07:23.309Z",
  "requestId": "0dd0709f-aa51-433c-b72e-469be932be28",
  "scope": "vibetools",
  "tags": [
    "ui",
    "console",
    "design"
  ],
  "targetUser": "claude"
}