fix(web): clean up composer resize animation

apps/web/src/components/BranchToolbar.tsx

@@ -9,7 +9,7 @@ import {
   HistoryIcon,
   MonitorIcon,
 } from "lucide-react";
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 
 import { useComposerDraftStore, type DraftId } from "../composerDraftStore";
 import { useProject, useThread, useThreadShellsForProjectRefs } from "../state/entities";
@@ -218,16 +218,20 @@ const MobileRunContextSelector = memo(function MobileRunContextSelector({
 /**
  * Collapse the strip's labels to icons only when the text no longer fits.
  *
- * Hidden labels stay measurable (they collapse to invisible absolute boxes,
- * which keep their natural width), so the required width can be recomputed in
- * either state on every pass - no remembered widths that could go stale or
- * latch the strip compact. A small hysteresis keeps the boundary from
- * flapping between states.
+ * Hidden labels stay measurable because their inner text keeps its natural
+ * width while the outer layout box collapses. This lets every pass recompute
+ * the expanded width without remembered values that could go stale or latch
+ * the strip compact. A small hysteresis keeps the boundary from flapping.
  */
 const COMPACT_EXPAND_HYSTERESIS_PX = 16;
+const COMPOSER_CONTEXT_MOTION_DURATION_MS = 180;
+const COMPOSER_CONTEXT_MOTION_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+const COMPOSER_CONTEXT_CONTROL_SELECTOR = "[data-composer-context-control]";
 
 function useLabelsOverflow(element: HTMLDivElement | null): boolean {
   const [overflows, setOverflows] = useState(false);
+  const pendingControlRectsRef = useRef<Map<HTMLElement, DOMRect> | null>(null);
+  const controlAnimationsRef = useRef(new Map<HTMLElement, Animation>());
   // A render-synced mirror instead of useEffectEvent: the compiler memoizes
   // the event callback, which left observers reading the first render's null
   // element forever.
@@ -241,7 +245,7 @@ function useLabelsOverflow(element: HTMLDivElement | null): boolean {
     if (available === 0) return;
     // flex-1 stretches the groups to fill the strip, so their own boxes always
     // measure "full". Sum the laid-out content instead, skipping hidden form
-    // artifacts and absolutely-positioned nodes (the compact-hidden labels).
+    // artifacts and other out-of-flow nodes.
     const contentWidth = (parent: Element): number => {
       const gap = Number.parseFloat(getComputedStyle(parent).columnGap) || 0;
       let width = 0;
@@ -283,9 +287,71 @@ function useLabelsOverflow(element: HTMLDivElement | null): boolean {
         needed += Math.max(0, textWidth - label.clientWidth);
       }
     }
-    setOverflows(compact ? needed > available - COMPACT_EXPAND_HYSTERESIS_PX : needed > available);
+    const nextOverflows = compact
+      ? needed > available - COMPACT_EXPAND_HYSTERESIS_PX
+      : needed > available;
+    if (nextOverflows !== compact) {
+      pendingControlRectsRef.current = new Map(
+        Array.from(current.querySelectorAll<HTMLElement>(COMPOSER_CONTEXT_CONTROL_SELECTOR)).map(
+          (control) => [control, control.getBoundingClientRect()],
+        ),
+      );
+    }
+    setOverflows(nextOverflows);
   }, []);
 
+  useLayoutEffect(() => {
+    const previousRects = pendingControlRectsRef.current;
+    if (!previousRects) return;
+    pendingControlRectsRef.current = null;
+
+    for (const animation of controlAnimationsRef.current.values()) {
+      animation.cancel();
+    }
+    controlAnimationsRef.current.clear();
+
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    for (const [control, previousRect] of previousRects) {
+      if (!control.isConnected) continue;
+      const nextRect = control.getBoundingClientRect();
+      const deltaX = previousRect.left - nextRect.left;
+      const deltaY = previousRect.top - nextRect.top;
+      if (Math.abs(deltaX) < 0.5 && Math.abs(deltaY) < 0.5) continue;
+
+      const animation = control.animate(
+        [
+          { transform: `translate3d(${deltaX}px, ${deltaY}px, 0)` },
+          { transform: "translate3d(0, 0, 0)" },
+        ],
+        {
+          duration: COMPOSER_CONTEXT_MOTION_DURATION_MS,
+          easing: COMPOSER_CONTEXT_MOTION_EASING,
+          fill: "backwards",
+        },
+      );
+      controlAnimationsRef.current.set(control, animation);
+      animation.addEventListener(
+        "finish",
+        () => {
+          if (controlAnimationsRef.current.get(control) === animation) {
+            controlAnimationsRef.current.delete(control);
+          }
+        },
+        { once: true },
+      );
+    }
+  }, [overflows]);
+
+  useEffect(
+    () => () => {
+      for (const animation of controlAnimationsRef.current.values()) {
+        animation.cancel();
+      }
+    },
+    [],
+  );
+
   // Label widths can change without the strip box moving (font family or
   // size preferences), so re-measure on every render as well as on resize
   // and font loads.
@@ -403,7 +469,7 @@ export const BranchToolbar = memo(function BranchToolbar({
     <div
       ref={setStripElement}
       data-compact={labelsOverflow ? "" : undefined}
-      className="chat-composer-context-strip group/composer-context -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 ps-1 pe-2 pt-5 pb-1"
+      className="chat-composer-context-strip group/composer-context -mt-4 mx-auto flex w-[calc(100%-2.75rem)] max-w-[calc(48rem-2.75rem)] items-center gap-2 overflow-x-clip overflow-y-visible ps-1 pe-2 pt-5 pb-1"
     >
       {isMobile && showGitControls ? (
         <MobileRunContextSelector
@@ -431,7 +497,11 @@ export const BranchToolbar = memo(function BranchToolbar({
                 {...(showEnvironmentPicker && onEnvironmentChange ? { onEnvironmentChange } : {})}
               />
               {showGitControls ? (
-                <Separator orientation="vertical" className="mx-0.5 h-3.5!" />
+                <Separator
+                  orientation="vertical"
+                  className="mx-0.5 h-3.5!"
+                  data-composer-context-control
+                />
               ) : null}
             </>
           )}

apps/web/src/components/BranchToolbarBranchSelector.tsx

@@ -714,7 +714,10 @@ export function BranchToolbarBranchSelector({
       open={isBranchMenuOpen}
       value={resolvedActiveBranch}
     >
-      <div className={cn("flex min-w-0 items-center gap-1", className)}>
+      <div
+        className={cn("flex min-w-0 items-center gap-1", className)}
+        data-composer-context-control
+      >
         {branchPr && branchPrStatus ? (
           <Tooltip>
             <TooltipTrigger
@@ -751,9 +754,14 @@ export function BranchToolbarBranchSelector({
             <GitBranchIcon className="size-3 shrink-0 opacity-70" />
             <span
               data-composer-label
-              className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+              className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
             >
-              {triggerLabel}
+              <span
+                data-composer-label-motion
+                className="block w-full min-w-0 max-w-[240px] origin-left truncate transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:[transform:translateX(-0.25rem)_scaleX(0.95)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transform-none motion-reduce:transition-opacity"
+              >
+                {triggerLabel}
+              </span>
             </span>
             <ChevronDownIcon className="size-3 shrink-0 opacity-50" />
           </ComboboxTrigger>

apps/web/src/components/BranchToolbarEnvModeSelector.tsx

@@ -50,7 +50,10 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
 
   if (envLocked) {
     return (
-      <span className="inline-flex h-7 shrink-0 items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs">
+      <span
+        className="inline-flex h-7 shrink-0 items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs"
+        data-composer-context-control
+      >
         {activeWorktreePath ? (
           <>
             <FolderGitIcon className="size-3" />
@@ -84,6 +87,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
         size="xs"
         className="min-w-0 shrink font-medium"
         aria-label="Workspace"
+        data-composer-context-control
       >
         {effectiveEnvMode === "worktree" ? (
           <FolderGit2Icon className="size-3" />
@@ -94,9 +98,14 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
         )}
         <span
           data-composer-label
-          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+          className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
         >
-          <SelectValue />
+          <span
+            data-composer-label-motion
+            className="block w-full min-w-0 max-w-[240px] origin-left truncate transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:[transform:translateX(-0.25rem)_scaleX(0.95)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transform-none motion-reduce:transition-opacity"
+          >
+            <SelectValue />
+          </span>
         </span>
       </SelectTrigger>
       <SelectPopup>

apps/web/src/components/BranchToolbarEnvironmentSelector.tsx

@@ -48,17 +48,25 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
   // only thing in the strip.
   if (envLocked || onEnvironmentChange === undefined) {
     return (
-      <span className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs">
+      <span
+        className="inline-flex h-7 min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:h-6 sm:text-xs"
+        data-composer-context-control
+      >
         {activeEnvironment?.isPrimary ? (
           <MonitorIcon className="size-3 shrink-0" />
         ) : (
           <CloudIcon className="size-3 shrink-0" />
         )}
         <span
           data-composer-label
-          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+          className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
         >
-          {activeEnvironment?.label ?? "Run on"}
+          <span
+            data-composer-label-motion
+            className="block w-full min-w-0 max-w-[240px] origin-left truncate transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:[transform:translateX(-0.25rem)_scaleX(0.95)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transform-none motion-reduce:transition-opacity"
+          >
+            {activeEnvironment?.label ?? "Run on"}
+          </span>
         </span>
       </span>
     );
@@ -76,6 +84,7 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         size="xs"
         className="min-w-0 max-w-full font-medium"
         aria-label="Run on"
+        data-composer-context-control
       >
         {activeEnvironment?.isPrimary ? (
           <MonitorIcon className="size-3 shrink-0" />
@@ -84,9 +93,14 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
         )}
         <span
           data-composer-label
-          className="min-w-0 max-w-[240px] truncate transition-[max-width,opacity] duration-300 ease-out group-data-[compact]/composer-context:max-w-0 group-data-[compact]/composer-context:opacity-0"
+          className="min-w-0 max-w-[240px] group-data-[compact]/composer-context:max-w-0"
         >
-          <SelectValue />
+          <span
+            data-composer-label-motion
+            className="block w-full min-w-0 max-w-[240px] origin-left truncate transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.32,0.72,0,1)] group-data-[compact]/composer-context:[transform:translateX(-0.25rem)_scaleX(0.95)] group-data-[compact]/composer-context:opacity-0 motion-reduce:transform-none motion-reduce:transition-opacity"
+          >
+            <SelectValue />
+          </span>
         </span>
       </SelectTrigger>
       <SelectPopup>