fix: Fix context window size and redesign usage indicator

apps/code/src/renderer/features/message-editor/components/EditorToolbar.tsx

@@ -2,7 +2,6 @@ import { ModelSelector } from "@features/sessions/components/ModelSelector";
 import { Flex } from "@radix-ui/themes";
 import type { FileAttachment, MentionChip } from "../utils/content";
 import { AttachmentMenu } from "./AttachmentMenu";
-import { ContextUsageIndicator } from "./ContextUsageIndicator";
 
 interface EditorToolbarProps {
   disabled?: boolean;
@@ -43,7 +42,6 @@ export function EditorToolbar({
       {!hideSelectors && (
         <ModelSelector taskId={taskId} adapter={adapter} disabled={disabled} />
       )}
-      <ContextUsageIndicator taskId={taskId} />
     </Flex>
   );
 }

apps/code/src/renderer/features/sessions/components/ContextUsageIndicator.tsx

@@ -0,0 +1,78 @@
+import { Tooltip } from "@components/ui/Tooltip";
+import type { ContextUsage } from "@features/sessions/hooks/useContextUsage";
+import { Flex, Text } from "@radix-ui/themes";
+
+function formatTokensCompact(tokens: number): string {
+  if (tokens >= 1_000_000) {
+    return `${(tokens / 1_000_000).toFixed(1)}M`;
+  }
+  return `${Math.round(tokens / 1000)}K`;
+}
+
+function formatTokensFull(tokens: number): string {
+  return tokens.toLocaleString();
+}
+
+function getUsageColor(percentage: number): string {
+  if (percentage >= 90) return "var(--red-9)";
+  if (percentage >= 75) return "var(--orange-9)";
+  if (percentage >= 50) return "var(--amber-9)";
+  return "var(--green-9)";
+}
+
+const CIRCLE_SIZE = 20;
+const STROKE_WIDTH = 2.5;
+const RADIUS = (CIRCLE_SIZE - STROKE_WIDTH) / 2;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+interface ContextUsageIndicatorProps {
+  usage: ContextUsage | null;
+}
+
+export function ContextUsageIndicator({ usage }: ContextUsageIndicatorProps) {
+  if (!usage) return null;
+
+  const { used, size, percentage } = usage;
+  const strokeDashoffset = CIRCUMFERENCE - (percentage / 100) * CIRCUMFERENCE;
+  const color = getUsageColor(percentage);
+
+  return (
+    <Tooltip
+      content={`${formatTokensFull(used)} / ${formatTokensFull(size)} tokens (${percentage}%)`}
+      side="top"
+    >
+      <Flex align="center" gap="1" className="cursor-default select-none">
+        <svg
+          width={CIRCLE_SIZE}
+          height={CIRCLE_SIZE}
+          className="-rotate-90 shrink-0"
+          role="img"
+          aria-label={`Context usage: ${percentage}%`}
+        >
+          <circle
+            cx={CIRCLE_SIZE / 2}
+            cy={CIRCLE_SIZE / 2}
+            r={RADIUS}
+            fill="none"
+            stroke="var(--gray-5)"
+            strokeWidth={STROKE_WIDTH}
+          />
+          <circle
+            cx={CIRCLE_SIZE / 2}
+            cy={CIRCLE_SIZE / 2}
+            r={RADIUS}
+            fill="none"
+            stroke={color}
+            strokeWidth={STROKE_WIDTH}
+            strokeDasharray={CIRCUMFERENCE}
+            strokeDashoffset={strokeDashoffset}
+            strokeLinecap="round"
+          />
+        </svg>
+        <Text size="1" className="text-gray-10 tabular-nums">
+          {formatTokensCompact(used)}/{formatTokensCompact(size)}
+        </Text>
+      </Flex>
+    </Tooltip>
+  );
+}

apps/code/src/renderer/features/sessions/components/ConversationView.tsx

@@ -1,3 +1,4 @@
+import { useContextUsage } from "@features/sessions/hooks/useContextUsage";
 import {
   sessionStoreSetters,
   useOptimisticItemsForTask,
@@ -52,6 +53,7 @@ export function ConversationView({
   const agentLogsEnabled = useFeatureFlag("posthog-code-background-agent-logs");
   const debugLogsCloudRuns = useSettingsStore((s) => s.debugLogsCloudRuns);
   const showDebugLogs = agentLogsEnabled && debugLogsCloudRuns;
+  const contextUsage = useContextUsage(events);
 
   const {
     items: conversationItems,
@@ -229,6 +231,7 @@ export function ConversationView({
               hasPendingPermission={pendingPermissionsCount > 0}
               pausedDurationMs={pausedDurationMs}
               isCompacting={isCompacting}
+              usage={contextUsage}
             />
           </div>
         }

apps/code/src/renderer/features/sessions/components/SessionFooter.tsx

@@ -1,6 +1,8 @@
+import type { ContextUsage } from "@features/sessions/hooks/useContextUsage";
 import { Pause } from "@phosphor-icons/react";
 import { Box, Flex, Text } from "@radix-ui/themes";
 
+import { ContextUsageIndicator } from "./ContextUsageIndicator";
 import { formatDuration, GeneratingIndicator } from "./GeneratingIndicator";
 
 interface SessionFooterProps {
@@ -12,6 +14,7 @@ interface SessionFooterProps {
   hasPendingPermission?: boolean;
   pausedDurationMs?: number;
   isCompacting?: boolean;
+  usage?: ContextUsage | null;
 }
 
 export function SessionFooter({
@@ -23,37 +26,43 @@ export function SessionFooter({
   hasPendingPermission = false,
   pausedDurationMs,
   isCompacting = false,
+  usage,
 }: SessionFooterProps) {
   if (isPromptPending && !isCompacting) {
-    // Show static "waiting" state when permission is pending
     if (hasPendingPermission) {
       return (
         <Box className="pt-3 pb-1">
-          <Flex
-            align="center"
-            gap="2"
-            className="select-none text-gray-10"
-            style={{ userSelect: "none", WebkitUserSelect: "none" }}
-          >
-            <Pause size={14} weight="fill" />
-            <Text size="1">Awaiting permission...</Text>
+          <Flex align="center" justify="between" gap="2">
+            <Flex
+              align="center"
+              gap="2"
+              className="select-none text-gray-10"
+              style={{ userSelect: "none", WebkitUserSelect: "none" }}
+            >
+              <Pause size={14} weight="fill" />
+              <Text size="1">Awaiting permission...</Text>
+            </Flex>
+            <ContextUsageIndicator usage={usage ?? null} />
           </Flex>
         </Box>
       );
     }
 
     return (
       <Box className="pt-3 pb-1">
-        <Flex align="center" gap="2">
-          <GeneratingIndicator
-            startedAt={promptStartedAt}
-            pausedDurationMs={pausedDurationMs}
-          />
-          {queuedCount > 0 && (
-            <Text size="1" color="gray">
-              ({queuedCount} queued)
-            </Text>
-          )}
+        <Flex align="center" justify="between" gap="2">
+          <Flex align="center" gap="2">
+            <GeneratingIndicator
+              startedAt={promptStartedAt}
+              pausedDurationMs={pausedDurationMs}
+            />
+            {queuedCount > 0 && (
+              <Text size="1" color="gray">
+                ({queuedCount} queued)
+              </Text>
+            )}
+          </Flex>
+          <ContextUsageIndicator usage={usage ?? null} />
         </Flex>
       </Box>
     );
@@ -69,13 +78,26 @@ export function SessionFooter({
   ) {
     return (
       <Box className="pb-1">
-        <Text
-          size="1"
-          color="gray"
-          style={{ fontVariantNumeric: "tabular-nums" }}
-        >
-          Generated in {formatDuration(lastGenerationDuration)}
-        </Text>
+        <Flex align="center" justify="between" gap="2">
+          <Text
+            size="1"
+            color="gray"
+            style={{ fontVariantNumeric: "tabular-nums" }}
+          >
+            Generated in {formatDuration(lastGenerationDuration)}
+          </Text>
+          <ContextUsageIndicator usage={usage ?? null} />
+        </Flex>
+      </Box>
+    );
+  }
+
+  if (usage) {
+    return (
+      <Box className="pb-1">
+        <Flex justify="end">
+          <ContextUsageIndicator usage={usage} />
+        </Flex>
       </Box>
     );
   }

apps/code/src/renderer/features/sessions/components/buildConversationItems.ts

@@ -344,12 +344,14 @@ function handleNotification(
     const params = msg.params as {
       trigger: "manual" | "auto";
       preTokens: number;
+      contextSize?: number;
     };
     markCompactingStatusComplete(b);
     pushItem(b, {
       sessionUpdate: "compact_boundary",
       trigger: params.trigger,
       preTokens: params.preTokens,
+      contextSize: params.contextSize,
     });
     return;
   }
@@ -549,6 +551,7 @@ function processSessionUpdate(b: ItemBuilder, update: SessionUpdate) {
     case "plan":
     case "available_commands_update":
     case "config_option_update":
+    case "usage_update":
       break;
 
     default: {

apps/code/src/renderer/features/sessions/components/session-update/CompactBoundaryView.tsx

@@ -4,13 +4,19 @@ import { Badge, Box, Flex, Text } from "@radix-ui/themes";
 interface CompactBoundaryViewProps {
   trigger: "manual" | "auto";
   preTokens: number;
+  contextSize?: number;
 }
 
 export function CompactBoundaryView({
   trigger,
   preTokens,
+  contextSize,
 }: CompactBoundaryViewProps) {
   const tokensK = Math.round(preTokens / 1000);
+  const percent =
+    contextSize && contextSize > 0
+      ? Math.round((preTokens / contextSize) * 100)
+      : null;
 
   return (
     <Box className="my-1 border-blue-6 border-l-2 py-1 pl-3 dark:border-blue-8">
@@ -27,7 +33,9 @@ export function CompactBoundaryView({
           {trigger}
         </Badge>
         <Text size="1" className="text-gray-9">
-          (~{tokensK}K tokens summarized)
+          {percent !== null
+            ? `(${percent}% of context · ~${tokensK}K tokens summarized)`
+            : `(~${tokensK}K tokens summarized)`}
         </Text>
       </Flex>
     </Box>

apps/code/src/renderer/features/sessions/components/session-update/SessionUpdateView.tsx

@@ -23,6 +23,7 @@ export type RenderItem =
       sessionUpdate: "compact_boundary";
       trigger: "manual" | "auto";
       preTokens: number;
+      contextSize?: number;
     }
   | {
       sessionUpdate: "status";
@@ -101,6 +102,7 @@ export const SessionUpdateView = memo(function SessionUpdateView({
         <CompactBoundaryView
           trigger={item.trigger}
           preTokens={item.preTokens}
+          contextSize={item.contextSize}
         />
       );
     case "status":