diff --git a/webui/src/web-components/sketch-app-shell-base.ts b/webui/src/web-components/sketch-app-shell-base.ts
index 070ed21..3e3dbe3 100644
--- a/webui/src/web-components/sketch-app-shell-base.ts
+++ b/webui/src/web-components/sketch-app-shell-base.ts
@@ -2,7 +2,7 @@
 import { html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ConnectionStatus, DataManager } from "../data";
-import { AgentMessage, State } from "../types";
+import { AgentMessage, State, Usage } from "../types";
 import { aggregateAgentMessages } from "./aggregateAgentMessages";
 import { SketchTailwindElement } from "./sketch-tailwind-element";
 
@@ -37,6 +37,8 @@
 
   // Last commit information
   @state()
+  @state()
+  latestUsage: Usage | null = null;
 
   // Reference to the container status element
   containerStatusElement: any = null;
@@ -643,6 +645,11 @@
           break; // Only show one notification per batch of messages
         }
       }
+      const msgsWithUsage = newMessages.filter((msg) => msg.usage);
+      if (msgsWithUsage.length > 0) {
+        this.latestUsage =
+          msgsWithUsage[msgsWithUsage.length - 1]?.usage || null;
+      }
     }
 
     // Check if todo panel should be visible after agent loop iteration
@@ -878,6 +885,7 @@
 
         <!-- Container status info moved above tabs -->
         <sketch-container-status
+          .latestUsage=${this.latestUsage}
           .state=${this.containerState}
           id="container-status"
         ></sketch-container-status>
diff --git a/webui/src/web-components/sketch-container-status.ts b/webui/src/web-components/sketch-container-status.ts
index 5e276a8..5152c66 100644
--- a/webui/src/web-components/sketch-container-status.ts
+++ b/webui/src/web-components/sketch-container-status.ts
@@ -1,4 +1,4 @@
-import { State, AgentMessage } from "../types";
+import { State, AgentMessage, Usage } from "../types";
 import { html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { formatNumber } from "../utils";
@@ -20,6 +20,9 @@
   @state()
   lastCommitCopied: boolean = false;
 
+  @state()
+  latestUsage: Usage | null = null;
+
   // CSS animations that can't be easily replaced with Tailwind
   connectedCallback() {
     super.connectedCallback();
@@ -523,7 +526,8 @@
           <!-- Last Commit section moved to main grid -->
 
           <div
-            class="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2 mt-2.5"
+            class="grid gap-2 mt-2.5"
+            style="grid-template-columns: auto auto"
           >
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
               <span class="text-xs text-gray-600 mr-1 font-medium"
@@ -589,6 +593,18 @@
             </div>
             <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
               <span class="text-xs text-gray-600 mr-1 font-medium"
+                >Context size:</span
+              >
+              <span id="contextWindow" class="text-xs font-semibold break-all"
+                >${formatNumber(
+                  (this.latestUsage?.input_tokens || 0) +
+                    (this.latestUsage?.cache_read_input_tokens || 0) +
+                    (this.latestUsage?.cache_creation_input_tokens || 0),
+                )}</span
+              >
+            </div>
+            <div class="flex items-center whitespace-nowrap mr-2.5 text-xs">
+              <span class="text-xs text-gray-600 mr-1 font-medium"
                 >Output tokens:</span
               >
               <span id="outputTokens" class="text-xs font-semibold break-all"