🤖 refactor: make countdown warning smaller and less intrusive

- Countdown warning (60-69%): Small grey text, right-aligned
- Urgent warning (70%+): Keep prominent blue box styling
- Makes countdown unobtrusive while keeping urgent warning visible

_Generated with `mux`_

Author: ethanndickson

src/browser/components/CompactionWarning.tsx

@@ -21,16 +21,20 @@ export const CompactionWarning: React.FC<{
   // 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
-    ? "⚠️ Context limit reached. Next message will trigger auto-compaction."
-    : `Context left until Auto-Compact: ${Math.round(remaining)}%`;
+  // Urgent warning at/above threshold - prominent blue box
+  if (willCompactNext) {
+    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">
+        ⚠️ Context limit reached. Next message will trigger auto-compaction.
+      </div>
+    );
+  }
 
+  // Countdown warning below threshold - subtle grey text, right-aligned
+  const remaining = props.thresholdPercentage - props.usagePercentage;
   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 className="text-muted mx-4 mt-2 mb-1 text-right text-[10px]">
+      Context left until Auto-Compact: {Math.round(remaining)}%
     </div>
   );
 };