fix(app): prevent stale session tab reads (#39767)

packages/app/src/components/session/session-header.tsx

@@ -289,9 +289,9 @@ export function SessionHeader() {
 
   return (
     <>
-      <Show when={search() && centerMount()}>
+      <Show when={search() && centerMount()} keyed>
         {(mount) => (
-          <Portal mount={mount()}>
+          <Portal mount={mount}>
             <Button
               type="button"
               variant="ghost"
@@ -308,10 +308,10 @@ export function SessionHeader() {
                 </span>
               </div>
 
-              <Show when={hotkey()}>
+              <Show when={hotkey()} keyed>
                 {(keybind) => (
                   <Keybind class="shrink-0 !border-0 !bg-transparent !shadow-none px-0 text-text-weaker">
-                    {keybind()}
+                    {keybind}
                   </Keybind>
                 )}
               </Show>
@@ -319,9 +319,9 @@ export function SessionHeader() {
           </Portal>
         )}
       </Show>
-      <Show when={rightMount()}>
+      <Show when={rightMount()} keyed>
         {(mount) => (
-          <Portal mount={mount()}>
+          <Portal mount={mount}>
             <Show
               when={isV2}
               fallback={

packages/app/src/components/titlebar-tab-nav.tsx

@@ -224,6 +224,7 @@ export function TabNavItem(props: {
         <span data-slot="project-avatar-slot" class="flex size-4 shrink-0 items-center justify-center">
           <Show
             when={props.session()}
+            keyed
             fallback={
               <span class="block size-4 rounded-[3px] border border-v2-border-border-muted" aria-hidden="true" />
             }
@@ -231,8 +232,8 @@ export function TabNavItem(props: {
             {(session) => (
               <SessionTabAvatar
                 project={project()}
-                directory={session().directory}
+                directory={session.directory}
-                sessionId={session().id}
+                sessionId={session.id}
                 server={props.server}
               />
             )}

packages/app/src/pages/new-session/new-session-view.tsx

@@ -78,9 +78,9 @@ export function NewSessionStatus(props: { mount: Accessor<HTMLElement | null>; v
   const language = useLanguage()
 
   return (
-    <Show when={props.mount()}>
+    <Show when={props.mount()} keyed>
       {(mount) => (
-        <Portal mount={mount()}>
+        <Portal mount={mount}>
           <Show when={props.visible()}>
             <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
               <StatusPopoverV2 />