fix(web): compact-before-send toggle looks like a switch

apps/web/src/components/chat/ComposerPrimaryActions.tsx

@@ -1,5 +1,5 @@
 import { memo, type MouseEventHandler, type PointerEventHandler } from "react";
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, Minimize2Icon, PlayIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, PlayIcon } from "lucide-react";
 import { CornerUpRight, ListPlus } from "lucide";
 import { MorphIcon } from "~/components/MorphIcon";
 import { useEnvironmentIdentificationMode } from "~/hooks/useSettings";
@@ -10,6 +10,7 @@ import { StageBackdropButtonArt, useSidebarStageBackdropVariant } from "../Sideb
 import { Button } from "../ui/button";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "../ui/menu";
 import { Spinner } from "../ui/spinner";
+import { Switch } from "../ui/switch";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { composerFloatingLayerProps } from "./composerEventScope";
 import {
@@ -359,30 +360,28 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
       <Tooltip>
         <TooltipTrigger
           render={
-            <button
-              type="button"
-              className="flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-(--control-radius) px-2 font-medium text-base text-foreground/80 tabular-nums outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 sm:text-sm aria-pressed:bg-accent/60 aria-pressed:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:text-muted-foreground"
+            <span className="flex h-7 shrink-0 items-center gap-1.5 font-medium text-base text-foreground/80 sm:text-sm" />
+          }
+        >
+          Compact
+          <span className="text-muted-foreground tabular-nums">{compactTokens}</span>
+          {/* A label would focus the hidden input and steal focus from the composer. */}
+          <span className="relative inline-flex h-7 w-11 shrink-0 items-center justify-center">
+            <Switch
+              size="sm"
+              className="after:absolute after:inset-x-0 after:top-1/2 after:h-11 after:-translate-y-1/2"
               {...pointerFocusProps}
-              aria-pressed={!keepFullHistory}
-              aria-label={`Compact ${compactTokens} tokens of history before sending`}
+              checked={!keepFullHistory}
               disabled={!canOperateThread}
-              onClick={onToggleKeepFullHistory}
+              aria-label={`Compact ${compactTokens} tokens of history before sending`}
+              onCheckedChange={onToggleKeepFullHistory}
             />
-          }
-        >
-          <Minimize2Icon aria-hidden="true" />
-          <span className="@max-[480px]/composer-surface:hidden">
-            {keepFullHistory ? "Keep" : "Compact"}
           </span>
-          <span className="text-muted-foreground">{compactTokens}</span>
         </TooltipTrigger>
         <TooltipPopup>
-          <div>
-            {keepFullHistory
-              ? `Next send keeps all ${compactTokens} tokens.`
-              : `Next send compacts ${compactTokens} tokens first.`}
-          </div>
-          <div>{keepFullHistory ? "Click to compact first" : "Click to keep full history"}</div>
+          {keepFullHistory
+            ? `Next send keeps all ${compactTokens} tokens.`
+            : `Next send compacts ${compactTokens} tokens first.`}
         </TooltipPopup>
       </Tooltip>
       {submit}

docs/user/providers-claude.md

@@ -50,17 +50,16 @@ window. Leave it empty for Claude Code's default.
 
 You can also send `/compact` in an existing conversation. Web and desktop offer
 **Compact context** from the context meter. When you return to a large thread
-after Claude's prompt cache expires, a **Compact** chip with the thread's token count shows
-next to the send button. While it is on, Enter summarizes the history first, then
-sends your message. Click the chip to switch it to **Full** and keep the full
-history for that message. The cache lasts about an hour on a Claude
+after Claude's prompt cache expires, a **Compact** switch shows next to the send
+button. While it is on, Enter summarizes the history first, then sends your
+message. Turn it off to keep the full history for that message. The cache lasts about an hour on a Claude
 subscription and 5 minutes with an API key, Bedrock, or Vertex. See [commands and skills](./composer.md#commands-and-skills) for using
 composer commands.
 
 **Compact idle threads** in **Settings > Providers > Advanced** controls this for threads
 over 200,000 tokens. Each Claude provider's settings can override it:
 
-- **When you return** shows the **Compact** chip described above. This is the default.
+- **When you return** shows the **Compact** switch described above. This is the default.
 - **Before the cache expires (beta)** compacts an idle thread shortly before its
   prompt cache expires, so coming back does not reprocess the whole conversation.
   The compaction appears in the thread as a `/compact` turn sent by T3 Code.