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,
             }}
           />