From 32523e6172f7f64c0d6c7890227bf55344804389 Mon Sep 17 00:00:00 2001
From: Marcos Lopez <burnarg_24@hotmail.com>
Date: Tue, 28 Jul 2026 03:21:57 -0600
Subject: [PATCH] fix(desktop): sync agent tab motion and optimistic huddle
 leave

The AI-configuration tabs in the create-agent dialog ran the sliding pill
and its labels on different clocks: the pill used duration-[250ms]
ease-out while the triggers specified a bare transition-colors, which
falls back to Tailwind's 150ms default and cubic-bezier(0.4, 0, 0.2, 1).
The label finished recoloring ~100ms before the pill arrived beneath it,
on a different curve. Share one motion token between both halves and add
the motion-reduce guard used elsewhere in the app.

The section below those tabs also swapped instantly while the pill slid,
collapsing ~150-200px of height in one frame. Key it on the mode so the
incoming fields fade in at the same duration and easing instead of
snapping.

Leaving a huddle awaited the full teardown -- AudioWorklet stop, mic
track stop, and the Rust leave_huddle round-trip -- before closing the
drawer, which read as an unresponsive click. Close it up front and roll
back to the previous state if cleanup reports failure.
locallyLeavingChannelRef already suppresses in-flight "still active"
states for the channel being left, so nothing reopens the drawer behind
the optimistic close.

Signed-off-by: Marcos Lopez <burnarg_24@hotmail.com>
---
 .../agents/ui/AgentAiConfigurationMode.tsx    | 22 +++++++++++--------
 .../agents/ui/AgentDefinitionDialog.tsx       |  5 ++++-
 .../features/huddle/components/HuddleBar.tsx  | 18 ++++++++++-----
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx b/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx
index 6750649021..a7ae1876b7 100644
--- a/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx
+++ b/desktop/src/features/agents/ui/AgentAiConfigurationMode.tsx
@@ -6,6 +6,16 @@ import type { InheritedDefault } from "./bakedEnvHelpers";
 
 export type { AgentAiConfigurationMode } from "./agentAiConfigurationPolicy";
 
+/**
+ * Motion shared by the sliding pill and the labels it slides under. Both halves
+ * must use it: a bare `transition-colors` falls back to Tailwind's 150ms
+ * default, so the label finishes recoloring ~100ms before the 250ms pill
+ * arrives beneath it, and on a different curve.
+ */
+const TAB_MOTION = "duration-[250ms] ease-out motion-reduce:transition-none";
+
+const TAB_TRIGGER_CLASS = `relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors ${TAB_MOTION} data-[state=active]:bg-transparent data-[state=active]:shadow-none`;
+
 export function HarnessModelDefaultNotice({
   harness,
   model,
@@ -86,24 +96,18 @@ export function AgentAiConfigurationModeField({
         <TabsList className="relative isolate grid h-9 w-full grid-cols-2 overflow-hidden rounded-lg bg-muted p-0.5">
           <div
             aria-hidden="true"
-            className="absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform duration-[250ms] ease-out"
+            className={`absolute bottom-0.5 left-0.5 top-0.5 z-0 rounded-md bg-background shadow-sm transition-transform ${TAB_MOTION}`}
             style={{
               transform: `translateX(${mode === "custom" ? 100 : 0}%)`,
               width: "calc((100% - 4px) / 2)",
             }}
           />
-          <TabsTrigger
-            className="relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-            value="defaults"
-          >
+          <TabsTrigger className={TAB_TRIGGER_CLASS} value="defaults">
             {needsProviderSelection
               ? "Use agent defaults"
               : "Use harness defaults"}
           </TabsTrigger>
-          <TabsTrigger
-            className="relative z-10 h-full rounded-md bg-transparent text-xs font-medium shadow-none transition-colors data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-            value="custom"
-          >
+          <TabsTrigger className={TAB_TRIGGER_CLASS} value="custom">
             Customize for this agent
           </TabsTrigger>
         </TabsList>
diff --git a/desktop/src/features/agents/ui/AgentDefinitionDialog.tsx b/desktop/src/features/agents/ui/AgentDefinitionDialog.tsx
index 29cb48c643..4a094b1d36 100644
--- a/desktop/src/features/agents/ui/AgentDefinitionDialog.tsx
+++ b/desktop/src/features/agents/ui/AgentDefinitionDialog.tsx
@@ -834,7 +834,10 @@ export function AgentDefinitionDialog({
             ) : null}
 
             <div
-              className="space-y-5"
+              // Keyed to fade the incoming mode in: this section's height changes
+              // instantly while the pill slides 250ms. Values live in parent state.
+              key={aiConfigurationMode}
+              className="animate-in space-y-5 fade-in-0 duration-[250ms] ease-out motion-reduce:animate-none"
               data-testid={`agent-${aiConfigurationMode}-configuration-section`}
             >
               {aiConfigurationMode === "custom" ? (
diff --git a/desktop/src/features/huddle/components/HuddleBar.tsx b/desktop/src/features/huddle/components/HuddleBar.tsx
index 35d660e475..321d70610d 100644
--- a/desktop/src/features/huddle/components/HuddleBar.tsx
+++ b/desktop/src/features/huddle/components/HuddleBar.tsx
@@ -493,21 +493,29 @@ export function HuddleBar({
   async function handleLeave() {
     if (isLeaving) return;
     const leavingChannelId = barState?.ephemeral_channel_id ?? null;
+    // Snapshot for rollback: leaving is only optimistic if a failed teardown can
+    // put the bar back exactly as it was.
+    const previousState = state;
     stateGenerationRef.current += 1;
     locallyLeavingChannelRef.current = leavingChannelId;
     setIsLeaving(true);
+    // Close the drawer now rather than after teardown. leaveHuddle() stops the
+    // worklet, stops the mic track, and round-trips Rust `leave_huddle`; waiting
+    // on all three reads as an unresponsive click. `locallyLeavingChannelRef`
+    // already suppresses in-flight "still active" states for this channel, so
+    // nothing reopens the drawer behind us.
+    setState(null);
     try {
-      const backendClean = await leaveHuddle();
-      if (backendClean) {
-        setState(null);
-      } else {
+      // If cleanup failed, restore the bar so the user can retry.
+      if (!(await leaveHuddle())) {
         locallyLeavingChannelRef.current = null;
         stateGenerationRef.current += 1;
+        setState(previousState);
       }
-      // If cleanup failed, keep the bar visible so the user can retry.
     } catch (e) {
       locallyLeavingChannelRef.current = null;
       stateGenerationRef.current += 1;
+      setState(previousState);
       console.error("Failed to leave huddle:", e);
     } finally {
       setIsLeaving(false);