🤖 feat: add progressive compaction warnings

- Show countdown starting at 60% usage (10% before threshold)
- Display 'Context left until Auto-Compact: X% remaining' message
- Switch to urgent message at 70% threshold
- Centralize threshold logic in shouldAutoCompact() utility
- Pass image parts through compaction continue messages
- Structure for future threshold configurability

Author: ethanndickson

src/browser/components/AIView.tsx

@@ -20,14 +20,21 @@ import { formatKeybind, KEYBINDS } from "@/browser/utils/ui/keybinds";
 import { useAutoScroll } from "@/browser/hooks/useAutoScroll";
 import { usePersistedState } from "@/browser/hooks/usePersistedState";
 import { useThinking } from "@/browser/contexts/ThinkingContext";
-import { useWorkspaceState, useWorkspaceAggregator } from "@/browser/stores/WorkspaceStore";
+import {
+  useWorkspaceState,
+  useWorkspaceAggregator,
+  useWorkspaceUsage,
+} from "@/browser/stores/WorkspaceStore";
 import { WorkspaceHeader } from "./WorkspaceHeader";
 import { getModelName } from "@/common/utils/ai/models";
 import type { DisplayedMessage } from "@/common/types/message";
 import type { RuntimeConfig } from "@/common/types/runtime";
 import { useAIViewKeybinds } from "@/browser/hooks/useAIViewKeybinds";
 import { evictModelFromLRU } from "@/browser/hooks/useModelLRU";
 import { QueuedMessage } from "./Messages/QueuedMessage";
+import { CompactionWarning } from "./CompactionWarning";
+import { shouldAutoCompact } from "@/browser/utils/compaction/autoCompactionCheck";
+import { use1MContext } from "@/browser/hooks/use1MContext";
 
 interface AIViewProps {
   workspaceId: string;
@@ -71,6 +78,8 @@ const AIViewInner: React.FC<AIViewProps> = ({
 
   const workspaceState = useWorkspaceState(workspaceId);
   const aggregator = useWorkspaceAggregator(workspaceId);
+  const workspaceUsage = useWorkspaceUsage(workspaceId);
+  const [use1M] = use1MContext();
   const handledModelErrorsRef = useRef<Set<string>>(new Set());
 
   useEffect(() => {
@@ -311,6 +320,13 @@ const AIViewInner: React.FC<AIViewProps> = ({
   // Get active stream message ID for token counting
   const activeStreamMessageId = aggregator.getActiveStreamMessageId();
 
+  const autoCompactionCheck = currentModel
+    ? shouldAutoCompact(workspaceUsage, currentModel, use1M)
+    : { shouldShowWarning: false, usagePercentage: 0, thresholdPercentage: 70 };
+
+  // Show warning when: shouldShowWarning flag is true AND not currently compacting
+  const shouldShowCompactionWarning = !isCompacting && autoCompactionCheck.shouldShowWarning;
+
   // Note: We intentionally do NOT reset autoRetry when streams start.
   // If user pressed the interrupt key, autoRetry stays false until they manually retry.
   // This makes state transitions explicit and predictable.
@@ -496,6 +512,12 @@ const AIViewInner: React.FC<AIViewProps> = ({
             </button>
           )}
         </div>
+        {shouldShowCompactionWarning && (
+          <CompactionWarning
+            usagePercentage={autoCompactionCheck.usagePercentage}
+            thresholdPercentage={autoCompactionCheck.thresholdPercentage}
+          />
+        )}
         <ChatInput
           variant="workspace"
           workspaceId={workspaceId}
@@ -509,6 +531,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           onEditLastUserMessage={() => void handleEditLastUserMessage()}
           canInterrupt={canInterrupt}
           onReady={handleChatInputReady}
+          autoCompactionCheck={autoCompactionCheck}
         />
       </div>
 

src/browser/components/ChatInput/index.tsx

@@ -30,6 +30,7 @@ import {
   handleCompactCommand,
   forkWorkspace,
   prepareCompactionMessage,
+  executeCompaction,
   type CommandHandlerContext,
 } from "@/browser/utils/chatCommands";
 import { CUSTOM_EVENTS } from "@/common/constants/events";
@@ -468,6 +469,32 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     // Workspace variant: full command handling + message send
     if (variant !== "workspace") return; // Type guard
 
+    // Prepare image parts if any
+    const imageParts = imageAttachments.map((img, index) => {
+      // Validate before sending to help with debugging
+      if (!img.url || typeof img.url !== "string") {
+        console.error(
+          `Image attachment [${index}] has invalid url:`,
+          typeof img.url,
+          img.url?.slice(0, 50)
+        );
+      }
+      if (!img.url?.startsWith("data:")) {
+        console.error(`Image attachment [${index}] url is not a data URL:`, img.url?.slice(0, 100));
+      }
+      if (!img.mediaType || typeof img.mediaType !== "string") {
+        console.error(
+          `Image attachment [${index}] has invalid mediaType:`,
+          typeof img.mediaType,
+          img.mediaType
+        );
+      }
+      return {
+        url: img.url,
+        mediaType: img.mediaType,
+      };
+    });
+
     try {
       // Parse command
       const parsed = parseCommand(messageText);
@@ -567,8 +594,10 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           const context: CommandHandlerContext = {
             workspaceId: props.workspaceId,
             sendMessageOptions,
+            imageParts,
             editMessageId: editingMessage?.id,
             setInput,
+            setImageAttachments,
             setIsSending,
             setToast,
             onCancelEdit: props.onCancelEdit,
@@ -632,7 +661,9 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
           const context: CommandHandlerContext = {
             workspaceId: props.workspaceId,
             sendMessageOptions,
+            imageParts: undefined, // /new doesn't use images
             setInput,
+            setImageAttachments,
             setIsSending,
             setToast,
           };
@@ -652,42 +683,70 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         }
       }
 
-      // Regular message - send directly via API
-      setIsSending(true);
-
       // Save current state for restoration on error
       const previousImageAttachments = [...imageAttachments];
 
-      try {
-        // Prepare image parts if any
-        const imageParts = imageAttachments.map((img, index) => {
-          // Validate before sending to help with debugging
-          if (!img.url || typeof img.url !== "string") {
-            console.error(
-              `Image attachment [${index}] has invalid url:`,
-              typeof img.url,
-              img.url?.slice(0, 50)
-            );
-          }
-          if (!img.url?.startsWith("data:")) {
-            console.error(
-              `Image attachment [${index}] url is not a data URL:`,
-              img.url?.slice(0, 100)
-            );
-          }
-          if (!img.mediaType || typeof img.mediaType !== "string") {
-            console.error(
-              `Image attachment [${index}] has invalid mediaType:`,
-              typeof img.mediaType,
-              img.mediaType
-            );
+      // Auto-compaction check (workspace variant only)
+      // Check if we should auto-compact before sending this message
+      // Result is computed in parent (AIView) and passed down to avoid duplicate calculation
+      const shouldAutoCompact =
+        props.autoCompactionCheck &&
+        props.autoCompactionCheck.usagePercentage >= props.autoCompactionCheck.thresholdPercentage;
+      if (variant === "workspace" && !editingMessage && shouldAutoCompact) {
+        // Clear input immediately for responsive UX
+        setInput("");
+        setImageAttachments([]);
+        setIsSending(true);
+
+        try {
+          const result = await executeCompaction({
+            workspaceId: props.workspaceId,
+            continueMessage: {
+              text: messageText,
+              imageParts,
+            },
+            sendMessageOptions,
+          });
+
+          if (!result.success) {
+            // Restore on error
+            setInput(messageText);
+            setImageAttachments(previousImageAttachments);
+            setToast({
+              id: Date.now().toString(),
+              type: "error",
+              title: "Auto-Compaction Failed",
+              message: result.error ?? "Failed to start auto-compaction",
+            });
+          } else {
+            setToast({
+              id: Date.now().toString(),
+              type: "success",
+              message: `Context threshold reached - auto-compacting...`,
+            });
           }
-          return {
-            url: img.url,
-            mediaType: img.mediaType,
-          };
-        });
+        } catch (error) {
+          // Restore on unexpected error
+          setInput(messageText);
+          setImageAttachments(previousImageAttachments);
+          setToast({
+            id: Date.now().toString(),
+            type: "error",
+            title: "Auto-Compaction Failed",
+            message:
+              error instanceof Error ? error.message : "Unexpected error during auto-compaction",
+          });
+        } finally {
+          setIsSending(false);
+        }
 
+        return; // Skip normal send
+      }
+
+      // Regular message - send directly via API
+      setIsSending(true);
+
+      try {
         // When editing a /compact command, regenerate the actual summarization request
         let actualMessageText = messageText;
         let muxMetadata: MuxFrontendMetadata | undefined;
@@ -703,7 +762,7 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
             } = prepareCompactionMessage({
               workspaceId: props.workspaceId,
               maxOutputTokens: parsed.maxOutputTokens,
-              continueMessage: parsed.continueMessage,
+              continueMessage: { text: parsed.continueMessage ?? "", imageParts },
               model: parsed.model,
               sendMessageOptions,
             });

src/browser/components/ChatInput/types.ts

@@ -1,5 +1,6 @@
 import type { ImagePart } from "@/common/types/ipc";
 import type { FrontendWorkspaceMetadata } from "@/common/types/workspace";
+import type { AutoCompactionCheckResult } from "@/browser/utils/compaction/autoCompactionCheck";
 
 export interface ChatInputAPI {
   focus: () => void;
@@ -23,6 +24,7 @@ export interface ChatInputWorkspaceVariant {
   canInterrupt?: boolean;
   disabled?: boolean;
   onReady?: (api: ChatInputAPI) => void;
+  autoCompactionCheck?: AutoCompactionCheckResult; // Computed in parent (AIView) to avoid duplicate calculation
 }
 
 // Creation variant: simplified for first message / workspace creation

src/browser/components/CompactionWarning.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+/**
+ * Warning banner shown when context usage is approaching the compaction threshold.
+ *
+ * Displays progressive warnings:
+ * - Below threshold: "Context left until Auto-Compact: X% remaining" (where X = threshold - current)
+ * - At/above threshold: "Approaching context limit. Next message will trigger auto-compaction."
+ *
+ * Displayed above ChatInput when:
+ * - Token usage >= (threshold - 10%) of model's context window
+ * - Not currently compacting (user can still send messages)
+ *
+ * @param usagePercentage - Current token usage as percentage (0-100)
+ * @param thresholdPercentage - Auto-compaction trigger threshold (0-100, default 70)
+ */
+export const CompactionWarning: React.FC<{
+  usagePercentage: number;
+  thresholdPercentage: number;
+}> = (props) => {
+  // At threshold or above, next message will trigger compaction
+  const willCompactNext = props.usagePercentage >= props.thresholdPercentage;
+
+  // Calculate remaining percentage until threshold
+  const remaining = props.thresholdPercentage - props.usagePercentage;
+
+  const message = willCompactNext
+    ? "⚠️ Approaching context limit. Next message will trigger auto-compaction."
+    : `Context left until Auto-Compact: ${Math.round(remaining)}%`;
+
+  return (
+    <div className="text-plan-mode bg-plan-mode/10 mx-4 my-4 rounded-sm px-4 py-3 text-center text-xs font-medium">
+      {message}
+    </div>
+  );
+};

src/browser/hooks/useResumeManager.ts

@@ -171,7 +171,10 @@ export function useResumeManager() {
         if (lastUserMsg?.compactionRequest) {
           // Apply compaction overrides using shared function (same as ChatInput)
           // This ensures custom model/tokens are preserved across resume
-          options = applyCompactionOverrides(options, lastUserMsg.compactionRequest.parsed);
+          options = applyCompactionOverrides(options, {
+            maxOutputTokens: lastUserMsg.compactionRequest.parsed.maxOutputTokens,
+            continueMessage: { text: lastUserMsg.compactionRequest.parsed.continueMessage ?? "" },
+          });
         }
       }
 

src/browser/stores/WorkspaceStore.ts

@@ -424,11 +424,14 @@ export class WorkspaceStore {
    * Extract usage from messages (no tokenization).
    * Each usage entry calculated with its own model for accurate costs.
    *
-   * REQUIRES: Workspace must have been added via addWorkspace() first.
+   * Returns empty state if workspace doesn't exist (e.g., creation mode).
    */
   getWorkspaceUsage(workspaceId: string): WorkspaceUsageState {
     return this.usageStore.get(workspaceId, () => {
-      const aggregator = this.assertGet(workspaceId);
+      const aggregator = this.aggregators.get(workspaceId);
+      if (!aggregator) {
+        return { usageHistory: [], totalTokens: 0 };
+      }
 
       const messages = aggregator.getAllMessages();
       const model = aggregator.getCurrentModel();