ContextBar: persistent context-usage indicator above MessageList

Walks chat messages newest-first for the latest ctx_used/ctx_max pair.
Color tiers fire against (max - 20k compaction reserve) so the bar warns
amber/orange/red at the same boundaries auto-compaction triggers.
"Context" → "Ctx" at <640px, (NN%) drops at <380px.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/panes/ChatPane.tsx

@@ -7,6 +7,7 @@ import { useChatContextStats } from '@/hooks/useChatContextStats';
 import { MessageList } from '@/components/MessageList';
 import { ChatInput } from '@/components/ChatInput';
 import { ChatContextPopover } from '@/components/ChatContextPopover';
+import { ContextBar } from '@/components/ContextBar';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -125,6 +126,10 @@ export function ChatPane({ sessionId, chatId, projectId, agentId, onAgentChange,
 
   return (
     <div className="flex flex-col h-full min-h-0">
+      {/* v1.11.2: persistent context-usage indicator. Renders null when there
+          are no assistant messages yet (fresh chat). shrink-0 keeps it out of
+          the MessageList scroll region — bar stays pinned, list scrolls. */}
+      <ContextBar messages={chatMessages} />
       <MessageList messages={chatMessages} sessionChats={sessionChats} />
 
       {/* Queued messages */}