From c83eb16dbe7045a080211f64b624e1867d160303 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 8 Dec 2025 15:58:56 -0600
Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=A4=96=20fix:=20reduce=20vertical=20s?=
 =?UTF-8?q?pace=20in=20auto-compact=20indicator?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove top margin and use negative bottom margin to minimize vertical footprint
- Align indicator with chat content using max-w-4xl centering
---
 src/browser/components/CompactionWarning.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/components/CompactionWarning.tsx b/src/browser/components/CompactionWarning.tsx
index e882d08e58..3215c48a37 100644
--- a/src/browser/components/CompactionWarning.tsx
+++ b/src/browser/components/CompactionWarning.tsx
@@ -47,7 +47,7 @@ export const CompactionWarning: React.FC<{
   }
 
   return (
-    <div className="mx-4 mt-2 mb-1 text-right text-[10px]">
+    <div className="mx-auto -mb-1 w-full max-w-4xl px-[15px] text-right text-[10px]">
       <button
         type="button"
         onClick={props.onCompactClick}

From f9f51f17b76b114c42d08097a16e4f65ee1362a9 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 8 Dec 2025 20:34:04 -0600
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A4=96=20feat:=20add=20storybook=20st?=
 =?UTF-8?q?ory=20for=20auto-compact=20warning?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add contextUsage parameter to createAssistantMessage for testing high token usage
- Add AutoCompactWarning story showing the indicator at 65% context usage
---
 src/browser/components/CompactionWarning.tsx |   2 +-
 src/browser/stories/App.chat.stories.tsx     | 110 +++++++++++++++++++
 src/browser/stories/mockFactory.ts           |  11 +-
 3 files changed, 120 insertions(+), 3 deletions(-)

diff --git a/src/browser/components/CompactionWarning.tsx b/src/browser/components/CompactionWarning.tsx
index 3215c48a37..c4ad5f1479 100644
--- a/src/browser/components/CompactionWarning.tsx
+++ b/src/browser/components/CompactionWarning.tsx
@@ -47,7 +47,7 @@ export const CompactionWarning: React.FC<{
   }
 
   return (
-    <div className="mx-auto -mb-1 w-full max-w-4xl px-[15px] text-right text-[10px]">
+    <div className="mx-auto mb-1 w-full max-w-4xl px-[15px] text-right text-[10px]">
       <button
         type="button"
         onClick={props.onCompactClick}
diff --git a/src/browser/stories/App.chat.stories.tsx b/src/browser/stories/App.chat.stories.tsx
index c17c056f4a..6706a7352c 100644
--- a/src/browser/stories/App.chat.stories.tsx
+++ b/src/browser/stories/App.chat.stories.tsx
@@ -456,6 +456,116 @@ export const GenericTool: AppStory = {
   },
 };
 
+/** Shows auto-compact warning when context usage approaches threshold */
+export const AutoCompactWarning: AppStory = {
+  render: () => (
+    <AppWithMocks
+      setup={() =>
+        setupSimpleChatStory({
+          workspaceId: "ws-compaction-warning",
+          messages: [
+            createUserMessage("msg-1", "Help me set up authentication for this app", {
+              historySequence: 1,
+              timestamp: STABLE_TIMESTAMP - 600000,
+            }),
+            createAssistantMessage(
+              "msg-2",
+              "I'll help you set up authentication. Let me first examine your current project structure and dependencies.",
+              {
+                historySequence: 2,
+                timestamp: STABLE_TIMESTAMP - 580000,
+                toolCalls: [
+                  createFileReadTool(
+                    "call-1",
+                    "package.json",
+                    '{\n  "name": "my-app",\n  "dependencies": {\n    "express": "^4.18.0",\n    "mongoose": "^7.0.0"\n  }\n}'
+                  ),
+                ],
+              }
+            ),
+            createUserMessage("msg-3", "I want to use JWT tokens for the auth", {
+              historySequence: 3,
+              timestamp: STABLE_TIMESTAMP - 500000,
+            }),
+            createAssistantMessage(
+              "msg-4",
+              "Great choice! I'll implement JWT-based authentication. Let me create the auth middleware and user routes.",
+              {
+                historySequence: 4,
+                timestamp: STABLE_TIMESTAMP - 480000,
+                toolCalls: [
+                  createFileEditTool(
+                    "call-2",
+                    "src/middleware/auth.ts",
+                    "+ import jwt from 'jsonwebtoken';\n+ export const authenticate = (req, res, next) => {\n+   const token = req.headers.authorization?.split(' ')[1];\n+   // ... verification logic\n+ };"
+                  ),
+                ],
+              }
+            ),
+            createUserMessage("msg-5", "Add password hashing too", {
+              historySequence: 5,
+              timestamp: STABLE_TIMESTAMP - 400000,
+            }),
+            createAssistantMessage(
+              "msg-6",
+              "I'll add bcrypt for secure password hashing. Here's the updated user model with password hashing on save.",
+              {
+                historySequence: 6,
+                timestamp: STABLE_TIMESTAMP - 380000,
+                toolCalls: [
+                  createTerminalTool("call-3", "bun add bcrypt", "added bcrypt@5.1.0"),
+                  createFileEditTool(
+                    "call-4",
+                    "src/models/user.ts",
+                    "+ import bcrypt from 'bcrypt';\n+ userSchema.pre('save', async function() {\n+   this.password = await bcrypt.hash(this.password, 10);\n+ });"
+                  ),
+                ],
+              }
+            ),
+            createUserMessage("msg-7", "Now add refresh token support", {
+              historySequence: 7,
+              timestamp: STABLE_TIMESTAMP - 300000,
+            }),
+            createAssistantMessage(
+              "msg-8",
+              "I've implemented refresh token support with secure rotation. The access token expires in 15 minutes and the refresh token in 7 days.",
+              {
+                historySequence: 8,
+                timestamp: STABLE_TIMESTAMP - 280000,
+                // High context usage to trigger warning (65% of 200k)
+                contextUsage: { inputTokens: 130000, outputTokens: 5000, totalTokens: 135000 },
+              }
+            ),
+          ],
+        })
+      }
+    />
+  ),
+  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for last assistant message to render (unique text from assistant)
+    await waitFor(() => {
+      canvas.getByText(/access token expires in 15 minutes/);
+    });
+
+    // Wait a bit for auto-scroll to settle, then scroll up
+    await new Promise((r) => setTimeout(r, 100));
+    const messageWindow = canvasElement.querySelector('[data-testid="message-window"]');
+    if (messageWindow) {
+      messageWindow.scrollTop = messageWindow.scrollHeight - messageWindow.clientHeight - 150;
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Displays the auto-compact warning indicator above the chat input when context usage is approaching the compaction threshold. The indicator shows remaining headroom and is clickable to insert /compact command.",
+      },
+    },
+  },
+};
+
 /** Streaming compaction with shimmer effect - tests GPU-accelerated animation */
 export const StreamingCompaction: AppStory = {
   render: () => (
diff --git a/src/browser/stories/mockFactory.ts b/src/browser/stories/mockFactory.ts
index 3643623767..767c0dd5ba 100644
--- a/src/browser/stories/mockFactory.ts
+++ b/src/browser/stories/mockFactory.ts
@@ -203,6 +203,8 @@ export function createAssistantMessage(
     model?: string;
     reasoning?: string;
     toolCalls?: MuxPart[];
+    /** Custom context usage for testing compaction warning (default: small values) */
+    contextUsage?: { inputTokens: number; outputTokens: number; totalTokens: number };
   }
 ): ChatMuxMessage {
   const parts: MuxPart[] = [];
@@ -213,6 +215,11 @@ export function createAssistantMessage(
   if (opts.toolCalls) {
     parts.push(...opts.toolCalls);
   }
+  const contextUsage = opts.contextUsage ?? {
+    inputTokens: 100,
+    outputTokens: 50,
+    totalTokens: 150,
+  };
   return {
     type: "message",
     id,
@@ -222,8 +229,8 @@ export function createAssistantMessage(
       historySequence: opts.historySequence,
       timestamp: opts.timestamp ?? STABLE_TIMESTAMP,
       model: opts.model ?? DEFAULT_MODEL,
-      usage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
-      contextUsage: { inputTokens: 100, outputTokens: 50, totalTokens: 150 },
+      usage: contextUsage,
+      contextUsage,
       duration: 1000,
     },
   };

From 2eeadc15271d461b442fa10ad63f5ba53c09dfe2 Mon Sep 17 00:00:00 2001
From: Ammar <ammar+ai@ammar.io>
Date: Mon, 8 Dec 2025 22:50:45 -0600
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A4=96=20fix:=20simulate=20user=20scr?=
 =?UTF-8?q?oll=20to=20disable=20auto-scroll=20in=20storybook?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/browser/stories/App.chat.stories.tsx | 31 +++++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/browser/stories/App.chat.stories.tsx b/src/browser/stories/App.chat.stories.tsx
index 6706a7352c..8e12757fa7 100644
--- a/src/browser/stories/App.chat.stories.tsx
+++ b/src/browser/stories/App.chat.stories.tsx
@@ -549,11 +549,34 @@ export const AutoCompactWarning: AppStory = {
       canvas.getByText(/access token expires in 15 minutes/);
     });
 
-    // Wait a bit for auto-scroll to settle, then scroll up
-    await new Promise((r) => setTimeout(r, 100));
-    const messageWindow = canvasElement.querySelector('[data-testid="message-window"]');
+    // Wait for initial auto-scroll and all ResizeObserver callbacks to complete
+    await new Promise((r) => setTimeout(r, 500));
+
+    const messageWindow = canvasElement.querySelector(
+      '[data-testid="message-window"]'
+    ) as HTMLElement | null;
     if (messageWindow) {
-      messageWindow.scrollTop = messageWindow.scrollHeight - messageWindow.clientHeight - 150;
+      // Simulate user scroll interaction multiple times to ensure auto-scroll is disabled.
+      // The useAutoScroll hook only processes scroll as "user-initiated" if it happens
+      // within 100ms of a wheel/touch event. We need to:
+      // 1. Mark user interaction via wheel event
+      // 2. Scroll up (which disables auto-scroll)
+      // 3. Wait and repeat to ensure the state sticks
+      for (let i = 0; i < 3; i++) {
+        messageWindow.dispatchEvent(new WheelEvent("wheel", { bubbles: true, deltaY: -100 }));
+        // Scroll to show ~200px of content above the input area
+        const targetScroll = Math.max(0, messageWindow.scrollHeight - messageWindow.clientHeight - 200);
+        messageWindow.scrollTop = targetScroll;
+        messageWindow.dispatchEvent(new Event("scroll", { bubbles: true }));
+        await new Promise((r) => setTimeout(r, 50));
+      }
+
+      // Final wait to let any pending ResizeObserver callbacks fire and see disabled auto-scroll
+      await new Promise((r) => setTimeout(r, 200));
+
+      // Set final scroll position
+      const finalScroll = Math.max(0, messageWindow.scrollHeight - messageWindow.clientHeight - 200);
+      messageWindow.scrollTop = finalScroll;
     }
   },
   parameters: {