fix(app): stale keyed show errors

Author: adamdotdevin

packages/app/src/pages/session/message-timeline.tsx

@@ -611,7 +611,7 @@ export function MessageTimeline(props: {
                       </Show>
                     </Show>
                   </div>
-                  <Show when={sessionID()}>
+                  <Show when={sessionID()} keyed>
                     {(id) => (
                       <div class="shrink-0 flex items-center gap-3">
                         <SessionContextUsage placement="bottom" />
@@ -646,12 +646,12 @@ export function MessageTimeline(props: {
                               >
                                 <DropdownMenu.ItemLabel>{language.t("common.rename")}</DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
-                              <DropdownMenu.Item onSelect={() => void archiveSession(id())}>
+                              <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
                                 <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
                               <DropdownMenu.Separator />
                               <DropdownMenu.Item
-                                onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id()} />)}
+                                onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
                               >
                                 <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>

packages/app/src/pages/session/session-side-panel.tsx

@@ -331,7 +331,9 @@ export function SessionSidePanel(props: {
                     const path = createMemo(() => file.pathFromTab(tab))
                     return (
                       <div data-component="tabs-drag-preview">
-                        <Show when={path()}>{(p) => <FileVisual active path={p()} />}</Show>
+                        <Show when={path()} keyed>
+                          {(p) => <FileVisual active path={p} />}
+                        </Show>
                       </div>
                     )
                   }}

packages/app/src/pages/session/terminal-panel.tsx

@@ -191,8 +191,8 @@ export function TerminalPanel() {
                   <SortableProvider ids={ids()}>
                     <For each={ids()}>
                       {(id) => (
-                        <Show when={byId().get(id)}>
-                          {(pty) => <SortableTerminalTab terminal={pty()} onClose={close} />}
+                        <Show when={byId().get(id)} keyed>
+                          {(pty) => <SortableTerminalTab terminal={pty} onClose={close} />}
                         </Show>
                       )}
                     </For>
@@ -217,10 +217,10 @@ export function TerminalPanel() {
               <div class="flex-1 min-h-0 relative">
                 <Show when={terminal.active()} keyed>
                   {(id) => (
-                    <Show when={byId().get(id)}>
+                    <Show when={byId().get(id)} keyed>
                       {(pty) => (
                         <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
-                          <Terminal pty={pty()} onCleanup={terminal.update} onConnectError={() => terminal.clone(id)} />
+                          <Terminal pty={pty} onCleanup={terminal.update} onConnectError={() => terminal.clone(id)} />
                         </div>
                       )}
                     </Show>
@@ -229,14 +229,14 @@ export function TerminalPanel() {
               </div>
             </div>
             <DragOverlay>
-              <Show when={store.activeDraggable}>
+              <Show when={store.activeDraggable} keyed>
                 {(draggedId) => (
-                  <Show when={byId().get(draggedId())}>
+                  <Show when={byId().get(draggedId)} keyed>
                     {(t) => (
                       <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
                         {terminalTabLabel({
-                          title: t().title,
-                          titleNumber: t().titleNumber,
+                          title: t.title,
+                          titleNumber: t.titleNumber,
                           t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
                         })}
                       </div>