fix: darken auto-scroll toggle green, drop ban overlay, maximize icon size (#2073)

apps/web/components/task/chat/auto-scroll-toggle-button.test.tsx

@@ -49,6 +49,13 @@ describe("AutoScrollToggleButton", () => {
     expect(button.getAttribute("aria-label")).toMatch(/turn off/i);
   });
 
+  it("shows the icon in dark green, maximized to fill its box, when enabled", () => {
+    renderButton("session-a");
+    const icon = screen.getByTestId("auto-scroll-toggle-icon");
+    expect(icon.getAttribute("class")).toMatch(/text-green-600/);
+    expect(icon.getAttribute("class")).toMatch(/h-6 w-6/);
+  });
+
   it("clicking while enabled disables auto-scroll for the session", () => {
     renderButton("session-a");
     fireEvent.click(getButton());
@@ -63,6 +70,13 @@ describe("AutoScrollToggleButton", () => {
     expect(button.getAttribute("aria-label")).toMatch(/turn on/i);
   });
 
+  it("shows the icon with no color when disabled", () => {
+    enabledBySessionId = { "session-a": false };
+    renderButton("session-a");
+    const icon = screen.getByTestId("auto-scroll-toggle-icon");
+    expect(icon.getAttribute("class")).not.toMatch(/text-green-600/);
+  });
+
   it("clicking while disabled re-enables auto-scroll for the session", () => {
     enabledBySessionId = { "session-a": false };
     renderButton("session-a");

apps/web/components/task/chat/auto-scroll-toggle-button.tsx

@@ -1,9 +1,10 @@
 "use client";
 
-import { IconArrowBarToDown, IconArrowBarToDownDashed } from "@tabler/icons-react";
+import { IconArrowBarToDown } from "@tabler/icons-react";
 
 import { Button } from "@kandev/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@kandev/ui/tooltip";
+import { cn } from "@/lib/utils";
 import { useAppStore } from "@/components/state-provider";
 import { useTranscriptAutoScrollEnabled } from "./use-transcript-auto-scroll-enabled";
 
@@ -23,6 +24,10 @@ type Props = {
  * auto-scroll and catches the view up if the transcript progressed while
  * disabled. See message-list-native.tsx / message-list-virtuoso.tsx for the
  * renderer-side behavior driven by this preference.
+ *
+ * The icon renders dark green while enabled and reverts to the default
+ * muted color when disabled — the color swap alone carries the on/off
+ * signal.
  */
 export function AutoScrollToggleButton({ sessionId }: Props) {
   const showControl = useAppStore((state) => state.userSettings.showTranscriptAutoScrollControl);
@@ -46,11 +51,10 @@ export function AutoScrollToggleButton({ sessionId }: Props) {
           aria-pressed={enabled}
           data-testid="auto-scroll-toggle-button"
         >
-          {enabled ? (
-            <IconArrowBarToDown className="h-3.5 w-3.5" />
-          ) : (
-            <IconArrowBarToDownDashed className="h-3.5 w-3.5" />
-          )}
+          <IconArrowBarToDown
+            className={cn("h-6 w-6", enabled && "text-green-600")}
+            data-testid="auto-scroll-toggle-icon"
+          />
         </Button>
       </TooltipTrigger>
       <TooltipContent>{label}</TooltipContent>

apps/web/e2e/tests/chat/auto-scroll-toggle.spec.ts

@@ -99,6 +99,9 @@ test.describe("Transcript auto-scroll toggle", () => {
     await expect(toggle).toBeVisible({ timeout: 10_000 });
     await expect(toggle).toHaveAttribute("aria-pressed", "true");
 
+    const icon = toggle.getByTestId("auto-scroll-toggle-icon");
+    await expect(icon).toHaveClass(/text-green-600/);
+
     // Sits immediately to the left of Share within the same right-aligned cluster.
     const shareButton = statusBar.getByTestId("share-task-button");
     if (await shareButton.isVisible()) {
@@ -113,9 +116,11 @@ test.describe("Transcript auto-scroll toggle", () => {
 
     await toggle.click();
     await expect(toggle).toHaveAttribute("aria-pressed", "false");
+    await expect(icon).not.toHaveClass(/text-green-600/);
 
     await toggle.click();
     await expect(toggle).toHaveAttribute("aria-pressed", "true");
+    await expect(icon).toHaveClass(/text-green-600/);
   });
 
   test("disabling freezes the position and suppresses auto-scroll for new messages", async ({