🤖 feat: improve auto-compact UI spacing and interactivity

- Move AutoCompactionSettings inside context usage section in CostsTab
  for better visual grouping
- Make CompactionWarning clickable to insert /compact command
- Add prependText method to ChatInputAPI for prepending text
- Change warning text from 'Context left until' to 'Auto-Compact in X% usage'
- Add Storybook coverage for auto-compaction warning state

_Generated with mux_

Author: ammar-agent

src/browser/App.stories.tsx

@@ -1487,3 +1487,170 @@ These tables should render cleanly without any disruptive copy or download actio
     return <AppWithTableMocks />;
   },
 };
+
+/**
+ * Story showing the auto-compaction warning when context usage is approaching the threshold.
+ * The warning appears above the chat input when usage is >= 60% (threshold 70% minus 10% warning advance).
+ * claude-sonnet-4-5 has max_input_tokens: 200,000, so we set usage to ~130,000 tokens (65%) to trigger warning.
+ */
+export const AutoCompactionWarning: Story = {
+  render: () => {
+    const workspaceId = "ws-high-usage";
+
+    const projects = new Map<string, ProjectConfig>([
+      [
+        "/home/user/projects/my-app",
+        {
+          workspaces: [
+            { path: "/home/user/.mux/src/my-app/feature", id: workspaceId, name: "main" },
+          ],
+        },
+      ],
+    ]);
+
+    const workspaces: FrontendWorkspaceMetadata[] = [
+      {
+        id: workspaceId,
+        name: "main",
+        projectPath: "/home/user/projects/my-app",
+        projectName: "my-app",
+        namedWorkspacePath: "/home/user/.mux/src/my-app/feature",
+        runtimeConfig: DEFAULT_RUNTIME_CONFIG,
+        createdAt: new Date(NOW - 3600000).toISOString(),
+      },
+    ];
+
+    const AppWithHighUsage: React.FC = () => {
+      const initialized = useRef(false);
+      if (!initialized.current) {
+        // Enable auto-compaction for this workspace
+        localStorage.setItem(`autoCompaction:${workspaceId}:enabled`, "true");
+        localStorage.setItem(`autoCompaction:${workspaceId}:threshold`, "70");
+
+        setupMockAPI({
+          projects,
+          workspaces,
+          apiOverrides: {
+            tokenizer: {
+              countTokens: () => Promise.resolve(100),
+              countTokensBatch: (_model, texts) => Promise.resolve(texts.map(() => 100)),
+              calculateStats: () =>
+                Promise.resolve({
+                  consumers: [],
+                  totalTokens: 0,
+                  model: "claude-sonnet-4-5",
+                  tokenizerName: "claude",
+                  usageHistory: [],
+                }),
+            },
+            providers: {
+              setProviderConfig: () => Promise.resolve({ success: true, data: undefined }),
+              setModels: () => Promise.resolve({ success: true, data: undefined }),
+              getConfig: () =>
+                Promise.resolve(
+                  {} as Record<string, { apiKeySet: boolean; baseUrl?: string; models?: string[] }>
+                ),
+              list: () => Promise.resolve(["anthropic"]),
+            },
+            workspace: {
+              create: (projectPath: string, branchName: string) =>
+                Promise.resolve({
+                  success: true,
+                  metadata: {
+                    id: Math.random().toString(36).substring(2, 12),
+                    name: branchName,
+                    projectPath,
+                    projectName: projectPath.split("/").pop() ?? "project",
+                    namedWorkspacePath: `/mock/workspace/${branchName}`,
+                    runtimeConfig: DEFAULT_RUNTIME_CONFIG,
+                  },
+                }),
+              list: () => Promise.resolve(workspaces),
+              rename: (wsId: string) =>
+                Promise.resolve({ success: true, data: { newWorkspaceId: wsId } }),
+              remove: () => Promise.resolve({ success: true }),
+              fork: () => Promise.resolve({ success: false, error: "Not implemented in mock" }),
+              openTerminal: () => Promise.resolve(undefined),
+              onChat: (wsId, callback) => {
+                if (wsId === workspaceId) {
+                  setTimeout(() => {
+                    // User message
+                    callback({
+                      id: "msg-1",
+                      role: "user",
+                      parts: [{ type: "text", text: "Help me with this large codebase" }],
+                      metadata: {
+                        historySequence: 1,
+                        timestamp: STABLE_TIMESTAMP - 60000,
+                      },
+                    });
+
+                    // Assistant message with HIGH usage to trigger compaction warning
+                    // 130,000 tokens = 65% of 200,000 max, which is above 60% warning threshold
+                    callback({
+                      id: "msg-2",
+                      role: "assistant",
+                      parts: [
+                        {
+                          type: "text",
+                          text: "I've analyzed the codebase. The context window is getting full - notice the compaction warning below!",
+                        },
+                      ],
+                      metadata: {
+                        historySequence: 2,
+                        timestamp: STABLE_TIMESTAMP,
+                        model: "claude-sonnet-4-5",
+                        usage: {
+                          inputTokens: 125000, // High input to trigger warning
+                          outputTokens: 5000,
+                          totalTokens: 130000,
+                        },
+                        duration: 5000,
+                      },
+                    });
+
+                    callback({ type: "caught-up" });
+                  }, 100);
+                }
+                return () => undefined;
+              },
+              onMetadata: () => () => undefined,
+              activity: {
+                list: () => Promise.resolve({}),
+                subscribe: () => () => undefined,
+              },
+              sendMessage: () => Promise.resolve({ success: true, data: undefined }),
+              resumeStream: () => Promise.resolve({ success: true, data: undefined }),
+              interruptStream: () => Promise.resolve({ success: true, data: undefined }),
+              clearQueue: () => Promise.resolve({ success: true, data: undefined }),
+              truncateHistory: () => Promise.resolve({ success: true, data: undefined }),
+              replaceChatHistory: () => Promise.resolve({ success: true, data: undefined }),
+              getInfo: () => Promise.resolve(null),
+              executeBash: () =>
+                Promise.resolve({
+                  success: true,
+                  data: { success: true, output: "", exitCode: 0, wall_duration_ms: 0 },
+                }),
+            },
+          },
+        });
+
+        localStorage.setItem(
+          "selectedWorkspace",
+          JSON.stringify({
+            workspaceId: workspaceId,
+            projectPath: "/home/user/projects/my-app",
+            projectName: "my-app",
+            namedWorkspacePath: "/home/user/.mux/src/my-app/feature",
+          })
+        );
+
+        initialized.current = true;
+      }
+
+      return <AppLoader />;
+    };
+
+    return <AppWithHighUsage />;
+  },
+};

src/browser/components/AIView.tsx

@@ -217,6 +217,11 @@ const AIViewInner: React.FC<AIViewProps> = ({
     chatInputAPI.current?.appendText(note);
   }, []);
 
+  // Handler for manual compaction from CompactionWarning click
+  const handleCompactClick = useCallback(() => {
+    chatInputAPI.current?.prependText("/compact\n");
+  }, []);
+
   // Thinking level state from context
   const { thinkingLevel: currentWorkspaceThinking, setThinkingLevel } = useThinking();
 
@@ -573,6 +578,7 @@ const AIViewInner: React.FC<AIViewProps> = ({
           <CompactionWarning
             usagePercentage={autoCompactionResult.usagePercentage}
             thresholdPercentage={autoCompactionResult.thresholdPercentage}
+            onCompactClick={handleCompactClick}
           />
         )}
         <ChatInput

src/browser/components/ChatInput/index.tsx

@@ -260,6 +260,15 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
     [setInput]
   );
 
+  // Method to prepend text to input (used by manual compact trigger)
+  const prependText = useCallback(
+    (text: string) => {
+      setInput((prev) => text + prev);
+      focusMessageInput();
+    },
+    [focusMessageInput, setInput]
+  );
+
   // Method to restore images to input (used by queued message edit)
   const restoreImages = useCallback((images: ImagePart[]) => {
     const attachments: ImageAttachment[] = images.map((img, index) => ({
@@ -277,10 +286,19 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         focus: focusMessageInput,
         restoreText,
         appendText,
+        prependText,
         restoreImages,
       });
     }
-  }, [props.onReady, focusMessageInput, restoreText, appendText, restoreImages, props]);
+  }, [
+    props.onReady,
+    focusMessageInput,
+    restoreText,
+    appendText,
+    prependText,
+    restoreImages,
+    props,
+  ]);
 
   useEffect(() => {
     const handleGlobalKeyDown = (event: KeyboardEvent) => {

src/browser/components/ChatInput/types.ts

@@ -6,6 +6,7 @@ export interface ChatInputAPI {
   focus: () => void;
   restoreText: (text: string) => void;
   appendText: (text: string) => void;
+  prependText: (text: string) => void;
   restoreImages: (images: ImagePart[]) => void;
 }
 

src/browser/components/CompactionWarning.tsx

@@ -4,7 +4,7 @@ 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)
+ * - Below threshold: "Auto-Compact in X% usage" (where X = threshold - current)
  * - At/above threshold: "Approaching context limit. Next message will trigger auto-compaction."
  *
  * Displayed above ChatInput when:
@@ -13,10 +13,12 @@ import React from "react";
  *
  * @param usagePercentage - Current token usage as percentage (0-100)
  * @param thresholdPercentage - Auto-compaction trigger threshold (0-100, default 70)
+ * @param onCompactClick - Callback when user clicks to trigger manual compaction
  */
 export const CompactionWarning: React.FC<{
   usagePercentage: number;
   thresholdPercentage: number;
+  onCompactClick?: () => void;
 }> = (props) => {
   // At threshold or above, next message will trigger compaction
   const willCompactNext = props.usagePercentage >= props.thresholdPercentage;
@@ -30,11 +32,18 @@ export const CompactionWarning: React.FC<{
     );
   }
 
-  // Countdown warning below threshold - subtle grey text, right-aligned
+  // Countdown warning below threshold - subtle grey text, right-aligned, clickable
   const remaining = props.thresholdPercentage - props.usagePercentage;
   return (
-    <div className="text-muted mx-4 mt-2 mb-1 text-right text-[10px]">
-      Context left until Auto-Compact: {Math.round(remaining)}%
+    <div className="mx-4 mt-2 mb-1 text-right text-[10px]">
+      <button
+        type="button"
+        onClick={props.onCompactClick}
+        className="text-muted cursor-pointer hover:underline"
+        title="Click to insert /compact command"
+      >
+        Auto-Compact in {Math.round(remaining)}% usage
+      </button>
     </div>
   );
 };

src/browser/components/RightSidebar/AutoCompactionSettings.tsx

@@ -21,7 +21,7 @@ export const AutoCompactionSettings: React.FC<AutoCompactionSettingsProps> = ({
   );
 
   return (
-    <div data-testid="auto-compaction-settings" className="mb-6">
+    <div data-testid="auto-compaction-settings" className="mt-1">
       <div className="flex items-baseline justify-between">
         {/* Left side: checkbox + label + tooltip */}
         <div className="flex items-baseline gap-1">

src/browser/components/RightSidebar/CostsTab.tsx

@@ -226,15 +226,14 @@ const CostsTabComponent: React.FC<CostsTabProps> = ({ workspaceId }) => {
                       Unknown model limits - showing relative usage only
                     </div>
                   )}
+                  <AutoCompactionSettings workspaceId={workspaceId} />
                 </>
               );
             })()}
           </div>
         </div>
       )}
 
-      {hasUsageData && <AutoCompactionSettings workspaceId={workspaceId} />}
-
       {hasUsageData && (
         <div data-testid="cost-section" className="mb-6">
           <div className="flex flex-col gap-3">