From d3d943519abac68ebc8079d2358b87841e6f76f2 Mon Sep 17 00:00:00 2001
From: Adam Bowker <adambowker98@gmail.com>
Date: Fri, 12 Jun 2026 18:12:50 -0700
Subject: [PATCH] fix(sessions): scale context breakdown bar to the context
 window

The segmented bar in the context usage popover scaled each segment by the used token count, so it sat partially filled with no clear meaning for the empty portion and never matched the "% full" figure or the ring. Scale segments to the model's context window instead, so the filled portion equals the percentage and the empty track reads as remaining context.

Generated-By: PostHog Code
Task-Id: 0f255a6d-d48f-48cd-86fe-f18974414c9c
---
 .../ContextBreakdownPopover.test.tsx          | 25 +++++++++++++++++++
 .../components/ContextBreakdownPopover.tsx    | 17 ++++++-------
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/packages/ui/src/features/sessions/components/ContextBreakdownPopover.test.tsx b/packages/ui/src/features/sessions/components/ContextBreakdownPopover.test.tsx
index c64da01bb..70afafe86 100644
--- a/packages/ui/src/features/sessions/components/ContextBreakdownPopover.test.tsx
+++ b/packages/ui/src/features/sessions/components/ContextBreakdownPopover.test.tsx
@@ -62,4 +62,29 @@ describe("ContextBreakdownPopover", () => {
     expect(screen.queryByText("Tools")).not.toBeInTheDocument();
     expect(screen.queryByText("Rules")).not.toBeInTheDocument();
   });
+
+  it("scales segments to the context window, not the used tokens", () => {
+    const { container } = render(
+      <Theme>
+        <ContextBreakdownPopover
+          usage={usageWith(
+            {
+              systemPrompt: 0,
+              tools: 0,
+              rules: 0,
+              skills: 0,
+              mcp: 0,
+              subagents: 0,
+              conversation: 50_000,
+            },
+            { used: 50_000, size: 200_000, percentage: 25 },
+          )}
+        />
+      </Theme>,
+    );
+    // 50K of a 200K window => the single segment fills a quarter of the bar,
+    // leaving the rest as empty track (remaining context).
+    const segment = container.querySelector('[style*="width: 25%"]');
+    expect(segment).not.toBeNull();
+  });
 });
diff --git a/packages/ui/src/features/sessions/components/ContextBreakdownPopover.tsx b/packages/ui/src/features/sessions/components/ContextBreakdownPopover.tsx
index 1dfa7fa36..fbb54cf41 100644
--- a/packages/ui/src/features/sessions/components/ContextBreakdownPopover.tsx
+++ b/packages/ui/src/features/sessions/components/ContextBreakdownPopover.tsx
@@ -32,7 +32,7 @@ export function ContextBreakdownPopover({
       </Text>
 
       {breakdown ? (
-        <SegmentedBar breakdown={breakdown} total={used} fallback={fillColor} />
+        <SegmentedBar breakdown={breakdown} size={size} fallback={fillColor} />
       ) : (
         <SinglePercentBar percentage={percentage} color={fillColor} />
       )}
@@ -70,22 +70,19 @@ export function ContextBreakdownPopover({
 
 function SegmentedBar({
   breakdown,
-  total,
+  size,
   fallback,
 }: {
   breakdown: NonNullable<ContextUsage["breakdown"]>;
-  total: number;
+  size: number;
   fallback: string;
 }) {
-  if (total <= 0) {
+  if (size <= 0) {
     return <div className="h-1.5 w-full rounded-full bg-(--gray-4)" />;
   }
 
-  const segmentSum = CONTEXT_CATEGORIES.reduce(
-    (acc, cat) => acc + Math.max(0, breakdown[cat.key]),
-    0,
-  );
-  const denominator = Math.max(total, segmentSum);
+  // Scale each segment to the full context window so the filled portion
+  // matches the "% full" figure and the empty track reads as remaining context.
   return (
     <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-(--gray-4)">
       {CONTEXT_CATEGORIES.map((cat) => {
@@ -95,7 +92,7 @@ function SegmentedBar({
           <div
             key={cat.key}
             style={{
-              width: `${(value / denominator) * 100}%`,
+              width: `${(value / size) * 100}%`,
               backgroundColor: cat.color || fallback,
             }}
           />