sketch-container-status:latest context window size
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"