fix(conversations): stop welcome controls lingering after a tab switch

Inactive conversation tabs stay mounted and hide with visibility:hidden. Tailwind v4's transition-all transitions visibility too, so welcome controls (agent-selector pills, quick-action tabs, composer buttons) kept animating their inherited visibility and stayed painted 150-300ms over the newly-active conversation. Suppress transitions on the hidden tab subtree so visibility snaps immediately, and derive the tab body's active state directly from the active tab id.

Author: xintaofei

src/app/globals.css

@@ -1506,6 +1506,21 @@
   }
 }
 
+/* Keep-alive conversation tabs (see ConversationDetailPanel) hide the inactive
+   tab with `visibility: hidden` (Tailwind `invisible`) while staying mounted so
+   the active tab can reuse their layout. Tailwind v4's `transition-all` resolves
+   to `transition-property: all`, which includes `visibility`; a visible→hidden
+   `visibility` transition keeps the element painted for its whole duration. As
+   `visibility` inherits, every descendant carrying `transition-all` (AgentSelector
+   pills, QuickActions tabs, composer buttons) would otherwise linger 150–300ms as
+   pointer-events-none ghosts over the newly-active conversation. Nothing in a
+   hidden tab is visible, so drop all transitions in the subtree and let
+   visibility snap immediately. */
+.conversation-tab-hidden,
+.conversation-tab-hidden * {
+  transition-property: none !important;
+}
+
 .select-none {
   -webkit-user-select: none;
   -moz-user-select: none;

src/components/conversations/conversation-detail-panel-layout.test.ts

@@ -24,6 +24,10 @@ const conversationShellSource = readFileSync(
   resolve(process.cwd(), "src/components/chat/conversation-shell.tsx"),
   "utf8"
 )
+const globalsCssSource = readFileSync(
+  resolve(process.cwd(), "src/app/globals.css"),
+  "utf8"
+)
 
 describe("ConversationDetailPanel new conversation layout", () => {
   it("keeps the new-conversation input in the welcome panel with the original scroll layout", () => {
@@ -52,6 +56,25 @@ describe("ConversationDetailPanel new conversation layout", () => {
     expect(welcomeBranch).toContain("tall")
   })
 
+  it("snaps the hidden keep-alive tab so `transition-all` descendants don't ghost", () => {
+    // Inactive tabs stay mounted and hide with `visibility: hidden` (`invisible`).
+    // In Tailwind v4 `transition-all` transitions `visibility` too, so welcome
+    // controls (agent pills, quick-action tabs, composer buttons) would linger
+    // 150–300ms as ghosts over the newly-active conversation. The wrapper must
+    // carry `conversation-tab-hidden` next to `invisible`, and globals.css must
+    // drop transitions for that subtree so visibility snaps. Both halves are
+    // required — assert they stay coupled.
+    expect(source).toContain(
+      '"conversation-tab-hidden absolute inset-0 invisible pointer-events-none"'
+    )
+    expect(globalsCssSource).toContain(".conversation-tab-hidden *")
+    const rule = globalsCssSource.slice(
+      globalsCssSource.indexOf(".conversation-tab-hidden,"),
+      globalsCssSource.indexOf(".conversation-tab-hidden,") + 200
+    )
+    expect(rule).toContain("transition-property: none !important")
+  })
+
   it("does not render a decorative welcome backdrop", () => {
     expect(welcomeHeroSource).not.toContain("export function WelcomeBackdrop")
     expect(welcomeHeroSource).not.toContain("bg-gradient-to-r")

src/components/conversations/conversation-detail-panel.tsx

@@ -3,7 +3,6 @@
 import {
   memo,
   useCallback,
-  useDeferredValue,
   useEffect,
   useMemo,
   useRef,
@@ -1718,15 +1717,6 @@ export function ConversationDetailPanel() {
   const allFolders = useAppWorkspaceStore((s) => s.allFolders)
   const tabs = useTabStore((s) => s.tabs)
   const activeTabId = useTabStore((s) => s.activeTabId)
-  // Content-priority active id. The per-tab wrapper's show/hide reads the urgent
-  // `activeTabId`, so the outgoing tab (notably the new-session welcome page)
-  // hides in the same frame as the click; the heavy per-tab subtree only flips
-  // its `isActive`/`showActiveFlow` when this deferred value catches up — a
-  // non-blocking transition a frame later. Previously both tabs' large memoized
-  // bodies re-rendered in the same synchronous commit that hid the old tab, so
-  // the browser couldn't paint the hidden state until that work finished and the
-  // welcome components appeared to linger before disappearing.
-  const deferredActiveTabId = useDeferredValue(activeTabId)
   const isTileMode = useTabStore((s) => s.isTileMode)
   const { openNewConversationTab, closeTab, switchTab, onPreviewTabReplaced } =
     useTabActions()
@@ -2035,21 +2025,16 @@ export function ConversationDetailPanel() {
   }
 
   const tabElements = tabs.map((tab, index) => {
-    // `active` drives the urgent show/hide (below); `contentActive` (deferred)
-    // drives the tab body's active-only work, so a switch paints the visibility
-    // change before re-rendering the heavy subtrees. They agree once the
-    // deferred value settles a frame later.
     const active = tab.id === activeTabId
-    const contentActive = tab.id === deferredActiveTabId
     const folderPath = allFolders.find((f) => f.id === tab.folderId)?.path
     const view = (
       <ConversationTabView
         tabId={tab.id}
         conversationId={tab.conversationId}
         agentType={tab.agentType}
         workingDir={tab.workingDir ?? folderPath}
-        isActive={contentActive}
-        showActiveFlow={canTile && contentActive}
+        isActive={active}
+        showActiveFlow={canTile && active}
         reloadSignal={reloadByTabId[tab.id] ?? 0}
       />
     )
@@ -2071,7 +2056,7 @@ export function ConversationDetailPanel() {
               )
             : active
               ? "h-full"
-              : "absolute inset-0 invisible pointer-events-none"
+              : "conversation-tab-hidden absolute inset-0 invisible pointer-events-none"
         )}
         onPointerDownCapture={
           canTile && !active ? () => switchTab(tab.id) : undefined