fix(app): separate provider lifetimes and reactive ownership (#33739)

packages/app/src/pages/session/composer/session-composer-region.tsx

@@ -70,7 +70,7 @@ export function SessionComposerRegion(props: {
   const sdk = useSDK()
   const queryOptions = useQueryOptions()
   const local = useLocal()
-  const providers = useProviders()
+  const providers = useProviders(() => sdk().directory)
   const settings = useSettings()
   const server = useServer()
   const tabs = useTabs()

packages/app/src/pages/session/session-ownership.ts

@@ -0,0 +1,37 @@
+import { createComputed, onCleanup } from "solid-js"
+
+export function createSessionOwnership(sessionKey: () => string) {
+  let current = sessionKey()
+  let generation = 0
+  const transition = () => {
+    const next = sessionKey()
+    if (next === current) return
+    current = next
+    generation++
+  }
+  createComputed(transition)
+  onCleanup(() => generation++)
+
+  return {
+    key: () => {
+      transition()
+      return `${generation}:${current}`
+    },
+    capture() {
+      transition()
+      const captured = generation
+      return {
+        key: `${captured}:${current}`,
+        current: () => {
+          transition()
+          return generation === captured
+        },
+        run<T>(action: () => T) {
+          transition()
+          if (generation !== captured) return
+          return action()
+        },
+      }
+    },
+  }
+}

packages/app/src/pages/session/use-session-commands.tsx

@@ -20,6 +20,7 @@ import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { useTabs } from "@/context/tabs"
 import { requireServerKey } from "@/utils/session-route"
+import { createSessionOwnership } from "./session-ownership"
 
 export type SessionCommandContext = {
   navigateMessageByOffset: (offset: number) => void
@@ -50,7 +51,24 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const sessionTabs = useTabs()
   const layout = useLayout()
   const navigate = useNavigate()
-  const { params, tabs, view } = useSessionLayout()
+  const { params, sessionKey, tabs, view } = useSessionLayout()
+  const sessionOwnership = createSessionOwnership(sessionKey)
+  const openDialog = async <T,>(load: () => Promise<T>, show: (value: T) => void) => {
+    const owner = sessionOwnership.capture()
+    const value = await load()
+    owner.run(() => show(value))
+  }
+  const runCommand = async <T,>(input: {
+    owner: ReturnType<ReturnType<typeof createSessionOwnership>["capture"]>
+    prompt: T
+    request: () => Promise<unknown>
+    updatePrompt: (prompt: T) => void
+    updateViewport: () => void
+  }) => {
+    await input.request()
+    input.updatePrompt(input.prompt)
+    input.owner.run(input.updateViewport)
+  }
 
   const info = () => {
     const id = params.id
@@ -217,9 +235,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   }
 
   const openFile = () => {
-    void import("@/components/dialog-select-file").then((x) => {
-      dialog.show(() => <x.DialogSelectFile onOpenFile={showAllFiles} />)
-    })
+    void openDialog(
+      () => import("@/components/dialog-select-file"),
+      (x) => dialog.show(() => <x.DialogSelectFile onOpenFile={showAllFiles} />),
+    )
   }
 
   const closeTab = () => {
@@ -253,15 +272,17 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   }
 
   const chooseModel = () => {
-    void import("@/components/dialog-select-model").then((x) => {
-      dialog.show(() => <x.DialogSelectModel model={local.model} />)
-    })
+    void openDialog(
+      () => import("@/components/dialog-select-model"),
+      (x) => dialog.show(() => <x.DialogSelectModel model={local.model} />),
+    )
   }
 
   const chooseMcp = () => {
-    void import("@/components/dialog-select-mcp").then((x) => {
-      dialog.show(() => <x.DialogSelectMcp />)
-    })
+    void openDialog(
+      () => import("@/components/dialog-select-mcp"),
+      (x) => dialog.show(() => <x.DialogSelectMcp />),
+    )
   }
 
   const toggleAutoAccept = () => {
@@ -285,47 +306,61 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const undo = async () => {
     const sessionID = params.id
     if (!sessionID) return
-
-    if (sync().data.session_working(params.id ?? "")) {
-      await sdk()
-        .client.session.abort({ sessionID })
-        .catch(() => {})
-    }
-
+    const owner = sessionOwnership.capture()
+    const client = sdk().client
+    const directory = sdk().directory
+    const promptSession = prompt.capture()
     const revert = info()?.revert?.messageID
-    const message = findLast(userMessages(), (x) => !revert || x.id < revert)
+    const messages = userMessages()
+    const message = findLast(messages, (x) => !revert || x.id < revert)
     if (!message) return
-
-    await sdk().client.session.revert({ sessionID, messageID: message.id })
     const parts = sync().data.part[message.id]
-    if (parts) {
-      const restored = extractPromptFromParts(parts, { directory: sdk().directory })
-      prompt.set(restored)
+
+    if (sync().data.session_working(sessionID)) {
+      await client.session.abort({ sessionID }).catch(() => {})
     }
 
-    const prev = findLast(userMessages(), (x) => x.id < message.id)
-    setActiveMessage(prev)
+    await runCommand({
+      owner,
+      prompt: promptSession,
+      request: () => client.session.revert({ sessionID, messageID: message.id }),
+      updatePrompt: (promptSession) => {
+        if (parts) promptSession.set(extractPromptFromParts(parts, { directory }))
+      },
+      updateViewport: () => setActiveMessage(findLast(messages, (x) => x.id < message.id)),
+    })
   }
 
   const redo = async () => {
     const sessionID = params.id
     if (!sessionID) return
+    const owner = sessionOwnership.capture()
+    const client = sdk().client
+    const messages = userMessages()
+    const promptSession = prompt.capture()
 
     const revertMessageID = info()?.revert?.messageID
     if (!revertMessageID) return
 
-    const next = userMessages().find((x) => x.id > revertMessageID)
+    const next = messages.find((x) => x.id > revertMessageID)
     if (!next) {
-      await sdk().client.session.unrevert({ sessionID })
-      prompt.reset()
-      const last = findLast(userMessages(), (x) => x.id >= revertMessageID)
-      setActiveMessage(last)
+      await runCommand({
+        owner,
+        prompt: promptSession,
+        request: () => client.session.unrevert({ sessionID }),
+        updatePrompt: (promptSession) => promptSession.reset(),
+        updateViewport: () => setActiveMessage(findLast(messages, (x) => x.id >= revertMessageID)),
+      })
       return
     }
 
-    await sdk().client.session.revert({ sessionID, messageID: next.id })
-    const prev = findLast(userMessages(), (x) => x.id < next.id)
-    setActiveMessage(prev)
+    await runCommand({
+      owner,
+      prompt: promptSession,
+      request: () => client.session.revert({ sessionID, messageID: next.id }),
+      updatePrompt: () => undefined,
+      updateViewport: () => setActiveMessage(findLast(messages, (x) => x.id < next.id)),
+    })
   }
 
   const compact = async () => {
@@ -349,9 +384,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   }
 
   const fork = () => {
-    void import("@/components/dialog-fork").then((x) => {
-      dialog.show(() => <x.DialogFork />)
-    })
+    void openDialog(
+      () => import("@/components/dialog-fork"),
+      (x) => dialog.show(() => <x.DialogFork />),
+    )
   }
 
   const shareCmds = () => {