feat(chat): add token usage meter

BunsDev · BunsDev · commit 3b9121a97dd2 · 2026-06-12T23:19:29.000-05:00
diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
@@ -921,6 +921,32 @@
   background: color-mix(in srgb, var(--danger, #ef4444) 14%, transparent);
 }
 
+.token-meter {
+  width: 100%;
+  height: 2px;
+  flex-shrink: 0;
+  overflow: hidden;
+  background: color-mix(in srgb, var(--border) 60%, transparent);
+}
+
+.token-meter__bar {
+  height: 100%;
+  border-radius: 1px;
+  transition: width 400ms var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
+}
+
+.token-meter__bar--low {
+  background: var(--success, #22c55e);
+}
+
+.token-meter__bar--mid {
+  background: var(--info, #3b82f6);
+}
+
+.token-meter__bar--high {
+  background: var(--danger, #ef4444);
+}
+
 .agent-chat__talk-status {
   color: var(--text);
 }
@@ -2051,6 +2077,10 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .token-meter__bar {
+    transition: none;
+  }
+
   .chat-controls__session-row--flash .chat-controls__session-trigger {
     animation: none;
     border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
diff --git a/ui/src/ui/views/chat.test.ts b/ui/src/ui/views/chat.test.ts
@@ -874,6 +874,50 @@ describe("chat goal status", () => {
   });
 });
 
+describe("chat token usage meter", () => {
+  it("renders the active session context usage, including a valid zero-token session", () => {
+    const container = renderChatView({
+      sessions: createSessionsResultFromRows([
+        {
+          key: "main",
+          kind: "direct",
+          updatedAt: 2,
+          totalTokens: 0,
+          contextTokens: 200_000,
+        },
+      ]),
+    });
+
+    const meter = requireElement(container, ".token-meter", "token usage meter");
+    expect(meter.getAttribute("role")).toBe("progressbar");
+    expect(meter.getAttribute("aria-valuenow")).toBe("0");
+    expect(meter.closest(".agent-chat__input")).not.toBeNull();
+    expect(meter.closest(".agent-chat__toolbar")).toBeNull();
+    expect(container.querySelector<HTMLElement>(".token-meter__bar")?.style.width).toBe("0%");
+  });
+
+  it("uses the session context window before the default context window", () => {
+    const container = renderChatView({
+      sessions: {
+        ...createSessionsResultFromRows([
+          {
+            key: "main",
+            kind: "direct",
+            updatedAt: 2,
+            totalTokens: 90_000,
+            contextTokens: 100_000,
+          },
+        ]),
+        defaults: { modelProvider: "openai", model: "gpt-5", contextTokens: 200_000 },
+      },
+    });
+
+    const meter = requireElement(container, ".token-meter", "token usage meter");
+    expect(meter.getAttribute("aria-valuenow")).toBe("90");
+    expect(container.querySelector(".token-meter__bar--high")).not.toBeNull();
+  });
+});
+
 describe("chat composer workbench", () => {
   it("renders session controls in the composer and workspace files in the rail", () => {
     const onRefresh = vi.fn();
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
@@ -1578,6 +1578,33 @@ function renderSlashMenu(
   `;
 }
 
+function renderTokenMeter(
+  totalTokens: number | undefined,
+  contextWindow: number | null,
+): TemplateResult | typeof nothing {
+  if (!contextWindow || !Number.isFinite(totalTokens)) {
+    return nothing;
+  }
+  const percent = Math.min(
+    Math.max(Math.round(((totalTokens ?? 0) / contextWindow) * 100), 0),
+    100,
+  );
+  const tier = percent >= 85 ? "high" : percent >= 60 ? "mid" : "low";
+
+  return html`
+    <div
+      class="token-meter"
+      role="progressbar"
+      aria-label=${t("common.tokens")}
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-valuenow=${percent}
+    >
+      <div class="token-meter__bar token-meter__bar--${tier}" style="width: ${percent}%"></div>
+    </div>
+  `;
+}
+
 export function renderChat(props: ChatProps) {
   const canCompose = props.connected;
   const isBusy = props.sending || props.stream !== null;
@@ -2266,6 +2293,7 @@ export function renderChat(props: ChatProps) {
             showSecondary: false,
           })}
         </div>
+        ${renderTokenMeter(activeSession?.totalTokens, threadContextWindow)}
       </div>
     </section>
   `;
