feat(gateway): expose context usage and warning events

src/gateway/ui/pages/chat.js

@@ -593,6 +593,15 @@ async function sendMessage(client, overrideText) {
       scrollToBottom();
     });
 
+    stream.on('context_warning', (data) => {
+      const note = document.createElement('div');
+      note.className = 'message assistant';
+      const text = data?.message || 'Context usage is getting high.';
+      note.innerHTML = renderSafeMarkdown(`> ${text}`);
+      _elements.messages.insertBefore(note, placeholder);
+      scrollToBottom();
+    });
+
     const done = await stream.result;
     // Replace placeholder with actual response
     placeholder.classList.remove('streaming-cursor');

src/gateway/ui/pages/usage.js

@@ -26,15 +26,18 @@ function truncateId(id) {
 
 async function loadUsage(el, client) {
   let data;
+  let contextData;
 
   try {
     data = await client.call('system.tokenUsage');
+    contextData = await client.call('system.contextUsage');
   } catch (err) {
     el.innerHTML = `<div class="empty-state">Failed to load usage: ${err.message}</div>`;
     return;
   }
 
   const sessions = data?.sessions ?? [];
+  const contextBySession = new Map((contextData?.sessions ?? []).map(s => [s.sessionId, s.budget]));
 
   // Compute totals across all sessions
   let totalInput = 0;
@@ -89,6 +92,10 @@ async function loadUsage(el, client) {
       const outTok = s.total?.outputTokens ?? 0;
       const calls = s.total?.calls ?? 0;
       const cost = s.total?.estimatedCost ?? 0;
+      const budget = contextBySession.get(s.sessionId);
+      const contextCell = budget
+        ? `${budget.usagePct.toFixed(1)}% (${formatNumber(budget.estimatedTokens)}/${formatNumber(budget.contextWindow)})`
+        : '<span class="text-muted">-</span>';
 
       // Build delegation breakdown if present
       const delegationEntries = Object.entries(s.delegation ?? {});
@@ -107,6 +114,7 @@ async function loadUsage(el, client) {
           <td>${formatNumber(inTok + outTok)}</td>
           <td>${formatNumber(calls)}</td>
           <td>${formatCost(cost)}</td>
+          <td>${contextCell}</td>
           <td>${delegationCell}</td>
         </tr>
       `;
@@ -122,6 +130,7 @@ async function loadUsage(el, client) {
             <th>Total</th>
             <th>Calls</th>
             <th>Cost</th>
+            <th>Context</th>
             <th>Delegation</th>
           </tr>
         </thead>