feat: Add live context window tracking with visual progress bar

- Extract token usage from message_delta events in backend
- Calculate context usage percentage (input + cache tokens / 200k)
- Add context_update, compacting_started/finished, compact_boundary events
- Display progress bar that fills up as context is consumed
- Color-coded warnings (green→yellow→red) based on usage
- Show compacting status indicator when auto-compact runs
- Display system messages for compact start/finish with usage stats

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/hooks/useClaudeSession.js

@@ -229,6 +229,49 @@ export function useClaudeSession() {
           blockedPath: data.blockedPath
         });
         break;
+
+      case 'context_update':
+        // Live context window metrics from message_delta events
+        setSessionStats(prev => ({
+          ...prev,
+          tokensUsed: data.tokensUsed,
+          contextWindow: data.contextWindow,
+          contextLeftPercent: data.percentRemaining
+        }));
+        break;
+
+      case 'compacting_started':
+        console.log('Compacting started');
+        setSessionStats(prev => ({ ...prev, isCompacting: true }));
+        setMessages(prev => [...prev, {
+          type: 'system',
+          content: '⏳ Context compacting in progress...',
+          timestamp: Date.now()
+        }]);
+        break;
+
+      case 'compacting_finished':
+        console.log('Compacting finished');
+        setSessionStats(prev => ({ ...prev, isCompacting: false }));
+        break;
+
+      case 'compact_boundary':
+        console.log('Compact boundary:', data);
+        // Context was compacted - reset the metrics
+        setSessionStats(prev => ({
+          ...prev,
+          isCompacting: false,
+          tokensUsed: 0,
+          contextLeftPercent: 100,
+          lastCompactTrigger: data.trigger,
+          lastCompactPreTokens: data.preTokens
+        }));
+        setMessages(prev => [...prev, {
+          type: 'system',
+          content: `✅ Context compacted (${data.trigger}). Was at ${data.percentUsedBeforeCompact}% usage.`,
+          timestamp: Date.now()
+        }]);
+        break;
     }
   }, []);