Commit 0647c481017f25ddff2ec1dff68ef3944489b6db | the-knife

author	Theo Browne <me@t3.gg> 2026-10-08 02:01:11-07:00
committer	GitHub <noreply@github.com> 2026-10-08 02:01:11-07:00
log	0647c481017f25ddff2ec1dff68ef3944489b6db
tree	fff5558d75d0f6bd83a9d9e121ba7d4eca2a36f9
parent	d6f47ff9725f0902b526f854519cb7e92dcee52f
signature	Signed by PGP key B5690EEEBB952194

feat(web): compact-before-send is a chip that shows the token count (#17127)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

4 files changed, 104 insertions(+), 97 deletions(-)

apps
- web
  - src
    components
    ChatView.tsx
    chat
    ChatComposer.tsx
    ComposerPrimaryActions.tsx
docs
- user
  - providers-claude.md

apps/web/src/components/ChatView.tsx+24-15

 @@ -7672,9 +7672,9 @@ export default function ChatView(props: ChatViewProps) {
           : "Compacting is unavailable right now"
     : null;
   // Tokens a stale Claude session would re-read on its next turn. While set,
-  // Enter compacts first and the composer's send button says so; "Send with
+  // the composer shows a Compact chip and Enter compacts first; turning the
-  // full history" in its menu skips that once. Held queues and multi-model
+  // chip off sends the next message with full history. Held queues and
-  // sends never compact first, so the offer hides for them.
+  // multi-model sends never compact first, so the offer hides for them.
   const resumeCompactionTokens =
     activeContextWindow &&
     !resumeCompactionPermanentlyDismissed &&
 @@ -7690,17 +7690,25 @@ export default function ChatView(props: ChatViewProps) {
     })
       ? activeContextWindow.usedTokens
       : null;
-  // Set only for the synchronous span of a "Send with full history" submit;
+  // Threads whose Compact chip is turned off. A send that starts its turn
-  // onSend reads it before its first await.
+  // clears its thread's entry; a failed send keeps it for the retry.
-  const keepFullHistoryOnceRef = useRef(false);
+  const [fullHistoryThreadKeys, setFullHistoryThreadKeys] = useState<ReadonlySet<string>>(
-  const sendWithFullHistory = useCallback((send: () => void) => {
+    () => new Set(),
-    keepFullHistoryOnceRef.current = true;
+  );
-    try {
+  const keepFullHistory = fullHistoryThreadKeys.has(routeThreadKey);
-      send();
+  const setKeepFullHistory = useCallback((threadKey: string, keep: boolean) => {
-    } finally {
+    setFullHistoryThreadKeys((current) => {
-      keepFullHistoryOnceRef.current = false;
+      if (current.has(threadKey) === keep) return current;
-    }
+      const next = new Set(current);
+      if (keep) next.add(threadKey);
+      else next.delete(threadKey);
+      return next;
+    });
   }, []);
+  const toggleKeepFullHistory = useCallback(
+    () => setKeepFullHistory(routeThreadKey, !keepFullHistory),
+    [keepFullHistory, routeThreadKey, setKeepFullHistory],
+  );
   const handleRestoreThreadBranch = useCallback(() => {
     if (!canWriteSourceControl) return;
     if (gitStatusQuery.data?.hasWorkingTreeChanges) {
 @@ -8652,7 +8660,6 @@ export default function ChatView(props: ChatViewProps) {
     },
   ) => {
     e?.preventDefault();
-    const keepFullHistory = keepFullHistoryOnceRef.current;
     // Typed out in full rather than picked from the menu. Attachments or contexts
     // mean the user is sending a prompt, so those go through as usual.
     if (
 @@ -9896,6 +9903,7 @@ export default function ChatView(props: ChatViewProps) {
         failure = startResult;
       } else {
         turnStartSucceeded = true;
+        setKeepFullHistory(routeThreadKey, false);
         // The turn is under way and will spend quota, so that thread's limits
         // snapshot is stale. Uploads may have outlasted a navigation, so only
         // the sending thread's panel clears.
 @@ -11559,7 +11567,8 @@ export default function ChatView(props: ChatViewProps) {
                               }
                               bannerItems={composerBannerItems}
                               resumeCompactionTokens={resumeCompactionTokens}
-                              onSendWithFullHistory={sendWithFullHistory}
+                              keepFullHistory={keepFullHistory}
+                              onToggleKeepFullHistory={toggleKeepFullHistory}
                               // With attachments or contexts aboard the pick just inserts the
                               // text, so it sends as a prompt like the typed path would.
                               onUsageLimitsCommand={

apps/web/src/components/chat/ChatComposer.tsx+15-14

 @@ -1391,7 +1391,8 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
   compactDisabled: boolean;
   compactDisabledReason: string | null;
   compactBeforeSendTokens: number | null;
-  onSendWithFullHistory: () => void;
+  keepFullHistory: boolean;
+  onToggleKeepFullHistory: () => void;
 }) {
   return (
     <>
 @@ -1431,7 +1432,8 @@ const ComposerFooterPrimaryActions = memo(function ComposerFooterPrimaryActions(
         onInterrupt={props.onInterrupt}
         onImplementPlanInNewThread={props.onImplementPlanInNewThread}
         compactBeforeSendTokens={props.compactBeforeSendTokens}
-        onSendWithFullHistory={props.onSendWithFullHistory}
+        keepFullHistory={props.keepFullHistory}
+        onToggleKeepFullHistory={props.onToggleKeepFullHistory}
       />
     </>
   );
 @@ -1551,10 +1553,12 @@ export interface ChatComposerProps {
   sendDisabledReason: string | null;
   isPreparingWorktree: boolean;
   bannerItems: readonly ComposerBannerStackItem[];
-  /** Tokens Enter compacts before sending; null when the next send keeps full history. */
+  /** Tokens a stale session would re-read; null when the thread is not offered compaction. */
   resumeCompactionTokens: number | null;
-  /** Runs `send` as a one-off send that keeps full history instead of compacting first. */
+  /** The Compact chip is off, so the next send keeps full history. */
-  onSendWithFullHistory: (send: () => void) => void;
+  keepFullHistory: boolean;
+  /** Flips the Compact chip for the active thread. */
+  onToggleKeepFullHistory: () => void;
   /** Picking /usage-limits from the menu is the action itself; the draft keeps nothing of it. */
   onUsageLimitsCommand?: (() => void) | undefined;
   environmentUnavailable: {
 @@ -3016,7 +3020,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     (!composerSendState.hasSendableContent && !showResumeAction);
   const collapsedComposerPrimaryActionLabel = showResumeAction
     ? "Resume thread"
-    : props.resumeCompactionTokens !== null
+    : props.resumeCompactionTokens !== null && !props.keepFullHistory
       ? "Open composer to compact and send"
       : "Send message";
   const showMobilePendingAnswerActions =
 @@ -4271,11 +4275,6 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
     },
     [phase, settings.followUpBehavior, submitComposer],
   );
-  const { onSendWithFullHistory } = props;
-  const sendWithFullHistory = useCallback(
-    () => onSendWithFullHistory(() => submitComposer()),
-    [onSendWithFullHistory, submitComposer],
-  );
   const submitCitationAndSend = useCallback(() => {
     submitComposer(
       undefined,
 @@ -6896,8 +6895,9 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                   onClick={(event) => {
                     event.stopPropagation();
                     if (showResumeAction) onResume();
-                    // Compacting first is only sent from the labeled button, so expand to show it.
+                    // Compacting first only sends from the expanded composer, where the chip shows it.
-                    else if (props.resumeCompactionTokens !== null) expandMobileComposer();
+                    else if (props.resumeCompactionTokens !== null && !props.keepFullHistory)
+                      expandMobileComposer();
                     else submitComposer();
                   }}
                 >
 @@ -7615,7 +7615,8 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
                     onInterrupt={handleInterruptPrimaryAction}
                     onImplementPlanInNewThread={handleImplementPlanInNewThreadPrimaryAction}
                     compactBeforeSendTokens={props.resumeCompactionTokens}
-                    onSendWithFullHistory={sendWithFullHistory}
+                    keepFullHistory={props.keepFullHistory}
+                    onToggleKeepFullHistory={props.onToggleKeepFullHistory}
                     compactDisabled={
                       compactDisabled || noProviderAvailable || isSendBusy || isConnecting
                     }

apps/web/src/components/chat/ComposerPrimaryActions.tsx+61-64

 @@ -1,5 +1,5 @@
 import { memo, type MouseEventHandler, type PointerEventHandler } from "react";
-import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, PlayIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, Minimize2Icon, PlayIcon } from "lucide-react";
 import { CornerUpRight, ListPlus } from "lucide";
 import { MorphIcon } from "~/components/MorphIcon";
 import { useEnvironmentIdentificationMode } from "~/hooks/useSettings";
 @@ -51,9 +51,11 @@ interface ComposerPrimaryActionsProps {
   onPreviousPendingQuestion: () => void;
   onInterrupt: () => void;
   onImplementPlanInNewThread: () => void;
-  /** Tokens a stale session would re-read. When set, Enter compacts first and the button says so. */
+  /** Tokens a stale session would re-read. When set, a Compact chip shows the count and Enter compacts first. */
   compactBeforeSendTokens?: number | null;
-  onSendWithFullHistory?: () => void;
+  /** The Compact chip is turned off, so the next send keeps full history. */
+  keepFullHistory?: boolean;
+  onToggleKeepFullHistory?: () => void;
 }
 const formatPendingPrimaryActionLabel = (input: {
 @@ -108,7 +110,8 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   onInterrupt,
   onImplementPlanInNewThread,
   compactBeforeSendTokens = null,
-  onSendWithFullHistory,
+  keepFullHistory = false,
+  onToggleKeepFullHistory,
 }: ComposerPrimaryActionsProps) {
   const pointerFocusProps = preserveComposerFocusOnPointerDown
     ? { onPointerDown: preventPointerFocus }
 @@ -266,68 +269,24 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
   }
   const showResume = canResume && !hasSendableContent && !isEditingQueuedMessage;
-  const sendBlocked = isSendBusy || isSendDisabled || isConnecting || isEnvironmentUnavailable;
-  if (compactBeforeSendTokens !== null && !showResume && !isEditingQueuedMessage) {
+  const compactTokens =
-    const tokens = formatContextWindowTokens(compactBeforeSendTokens);
+    compactBeforeSendTokens !== null && !showResume && !isEditingQueuedMessage
-    return (
+      ? formatContextWindowTokens(compactBeforeSendTokens)
-      <div data-chat-composer-compact-send="true" className="flex items-center justify-end">
+      : null;
-        <Tooltip>
+  const compactsBeforeSend = compactTokens !== null && !keepFullHistory;
-          <TooltipTrigger
-            render={
-              <button
-                type="submit"
-                className={cn(
-                  messageActionPillClassName,
-                  "h-9 rounded-r-none sm:h-8",
-                  compact ? "px-3" : "px-4",
-                )}
-                {...pointerFocusProps}
-                onClick={onSubmitMessage}
-                disabled={sendBlocked || !hasSendableContent}
-              />
-            }
-          >
-            {isConnecting || isSendBusy ? "Sending..." : "Compact and send"}
-          </TooltipTrigger>
-          <TooltipPopup>Summarize {tokens} tokens of history, then send</TooltipPopup>
-        </Tooltip>
-        <Menu>
-          <MenuTrigger
-            render={
-              <button
-                type="button"
-                className={cn(
-                  messageActionPillClassName,
-                  "h-9 rounded-l-none border-l border-message-action-foreground/20 px-2 sm:h-8",
-                )}
-                aria-label="Send options"
-                {...pointerFocusProps}
-                disabled={sendBlocked || !hasSendableContent}
-              />
-            }
-          >
-            <ChevronDownIcon className="size-3.5" />
-          </MenuTrigger>
-          <MenuPopup align="end" side="top" {...composerFloatingLayerProps}>
-            <MenuItem disabled={sendBlocked} onClick={onSendWithFullHistory}>
-              Send with full history ({tokens} tokens)
-            </MenuItem>
-          </MenuPopup>
-        </Menu>
-      </div>
-    );
-  }
   const submitLabel = showResume
     ? "Resume thread"
     : isEditingQueuedMessage
       ? "Update queued message"
-      : isQueuing
+      : compactsBeforeSend
-        ? "Queue message"
+        ? "Compact and send"
-        : isRunning
+        : isQueuing
-          ? "Steer message"
+          ? "Queue message"
-          : "Submit message";
+          : isRunning
+            ? "Steer message"
+            : "Submit message";
   const submitStatus = isEnvironmentUnavailable
     ? "Environment disconnected"
     : (sendDisabledReason ??
 @@ -342,9 +301,11 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
             : null));
   const submitTooltip =
     submitStatus ??
-    (isRunning && !isEditingQueuedMessage
+    (compactsBeforeSend
-      ? `Click to ${followUpBehavior}, Ctrl/⌘-click${alternateShortcutLabel ? ` or ${alternateShortcutLabel}` : ""} to ${alternateAction}`
+      ? `Summarize ${compactTokens} tokens of history, then send`
-      : submitLabel);
+      : isRunning && !isEditingQueuedMessage
+        ? `Click to ${followUpBehavior}, Ctrl/⌘-click${alternateShortcutLabel ? ` or ${alternateShortcutLabel}` : ""} to ${alternateAction}`
+        : submitLabel);
   const sendButton = (
     <button
 @@ -393,10 +354,46 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
     </button>
   );
-  return (
+  const submit = (
     <Tooltip key="submit">
       <TooltipTrigger render={<span className="inline-flex" />}>{sendButton}</TooltipTrigger>
       <TooltipPopup>{submitTooltip}</TooltipPopup>
     </Tooltip>
   );
+  if (compactTokens === null) return submit;
+  return (
+    <div data-chat-composer-compact-send="true" className="flex items-center gap-2">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              className={cn(
+                "flex h-7 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-2.5 text-xs tabular-nums outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 [&_svg]:pointer-events-none [&_svg]:size-3.5",
+                keepFullHistory
+                  ? "border-border text-muted-foreground hover:text-foreground"
+                  : "border-warning/40 text-warning hover:bg-warning/8",
+              )}
+              {...pointerFocusProps}
+              aria-pressed={!keepFullHistory}
+              aria-label={`Compact ${compactTokens} tokens of history before sending`}
+              disabled={!canOperateThread}
+              onClick={onToggleKeepFullHistory}
+            />
+          }
+        >
+          <Minimize2Icon aria-hidden="true" />
+          {keepFullHistory ? "Full" : "Compact"}
+          <span>{compactTokens}</span>
+        </TooltipTrigger>
+        <TooltipPopup>
+          {keepFullHistory
+            ? `Next send keeps all ${compactTokens} tokens. Click to compact first`
+            : `Next send compacts ${compactTokens} tokens first. Click to keep full history`}
+        </TooltipPopup>
+      </Tooltip>
+      {submit}
+    </div>
+  );
 });

docs/user/providers-claude.md+4-4

...	@@ -50,10 +50,10 @@ window. Leave it empty for Claude Code's default.	...	@@ -50,10 +50,10 @@ window. Leave it empty for Claude Code's default.
50		50
51	You can also send `/compact` in an existing conversation. Web and desktop offer	51	You can also send `/compact` in an existing conversation. Web and desktop offer
52	Compact context from the context meter. When you return to a large thread	52	Compact context from the context meter. When you return to a large thread
53	after more than an hour, the send button changes to Compact and send: Enter	53	after more than an hour, a Compact chip with the thread's token count shows
54	summarizes the history first, then sends your message. To keep the full history	54	next to the send button. While it is on, Enter summarizes the history first, then
55	for that message, open the menu next to the button and choose **Send with full	55	sends your message. Click the chip to switch it to Full and keep the full
56	history**. See [commands and skills](./composer.md#commands-and-skills) for using	56	history for that message. See [commands and skills](./composer.md#commands-and-skills) for using
57	composer commands.	57	composer commands.
58		58
59	## Usage limits	59	## Usage limits