refactor(app): remove unnecessary reactive effects

packages/app/src/components/dialog-select-directory-v2.tsx

@@ -10,7 +10,6 @@ import { useLanguage } from "@/context/language"
 import { ServerConnection } from "@/context/server"
 import {
   absoluteTreePath,
-  activeTreeNavigation,
   advanceTreePreload,
   nextSuggestionIndex,
   nextTreeScrollTop,
@@ -21,6 +20,7 @@ import {
   cleanPickerInput,
   createPriorityTaskQueue,
   createDirectorySearch,
+  createTreeNavigationLifecycle,
   currentPickerSuggestions,
   displayPickerPath,
   pickerParent,
@@ -62,7 +62,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
   let tree: FileTree | undefined
   let container: HTMLDivElement | undefined
   let pathArea: HTMLDivElement | undefined
-  let navigation = 0
+  const navigation = createTreeNavigationLifecycle()
 
   const missingBase = createMemo(() => !(sync.data.path.home || sync.data.path.directory))
   const [fallbackPath] = createResource(
@@ -114,15 +114,15 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
     const request =
       existing ??
       loads.schedule(`${generation}:${key}`, eager ? "background" : "user", () => {
-        if (!activeTreeNavigation(generation, navigation)) return Promise.resolve(undefined)
+        if (!navigation.active(generation)) return Promise.resolve(undefined)
         return sdk.client.file
           .list({ directory: absolute, path: "" })
           .then((result) => result.data ?? [])
           .catch(() => undefined)
       })
     listings.set(key, request)
     const nodes = await request
-    if (!activeTreeNavigation(generation, navigation)) return false
+    if (!navigation.active(generation)) return false
     if (!nodes) {
       listings.delete(key)
       if (!key) setError(true)
@@ -138,7 +138,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
   async function navigate(path: string) {
     const value = policy.navigation(pickerAbsoluteInput(cleanPickerInput(path), home(), root() || start() || home()))
     if (!value) return
-    const token = ++navigation
+    const token = navigation.begin()
     setLoading(true)
     setRootValid(false)
     setSelected("")
@@ -150,7 +150,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
     advanced.clear()
     tree?.resetPaths([])
     const valid = await load("", token)
-    if (!activeTreeNavigation(token, navigation)) return
+    if (!navigation.active(token)) return
     setRootValid(valid)
     setLoading(false)
   }
@@ -246,7 +246,7 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
         }
       `,
       onExpansionChange(change) {
-        if (change.expanded) void load(change.path, navigation)
+        if (change.expanded) void load(change.path, navigation.current())
       },
       onSelectionChange(paths) {
         const path = paths.at(-1)
@@ -264,7 +264,10 @@ export function DialogSelectDirectoryV2(props: DialogSelectDirectoryV2Props) {
     void navigate(path)
   })
 
-  onCleanup(() => tree?.cleanUp())
+  onCleanup(() => {
+    navigation.dispose()
+    tree?.cleanUp()
+  })
 
   return (
     <Dialog size="large" class="directory-picker-v2">

packages/app/src/components/dialog-select-server-domain.ts

@@ -0,0 +1,16 @@
+export type ServerFormCallbacks = {
+  onFormComplete?: () => void
+  onFormInvalidated?: () => void
+}
+
+export function applyServerFormEvent(
+  event: "complete" | "invalidated",
+  reset: () => void,
+  options: ServerFormCallbacks = {},
+  action: () => void = () => {},
+) {
+  reset()
+  action()
+  if (event === "complete") options.onFormComplete?.()
+  if (event === "invalidated") options.onFormInvalidated?.()
+}

packages/app/src/components/dialog-select-server.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, test } from "bun:test"
+import { applyServerFormEvent } from "./dialog-select-server-domain"
+
+describe("applyServerFormEvent", () => {
+  test("resets and reports successful completion", () => {
+    const calls: string[] = []
+
+    applyServerFormEvent(
+      "complete",
+      () => calls.push("reset"),
+      { onFormComplete: () => calls.push("complete") },
+      () => calls.push("mutation"),
+    )
+
+    expect(calls).toEqual(["reset", "mutation", "complete"])
+  })
+
+  test("resets and reports external invalidation", () => {
+    const calls: string[] = []
+
+    applyServerFormEvent("invalidated", () => calls.push("reset"), {
+      onFormInvalidated: () => calls.push("invalidated"),
+    })
+
+    expect(calls).toEqual(["reset", "invalidated"])
+  })
+
+  test("keeps legacy reset behavior without callbacks", () => {
+    let resets = 0
+    applyServerFormEvent("complete", () => resets++)
+    applyServerFormEvent("invalidated", () => resets++)
+    expect(resets).toBe(2)
+  })
+})

packages/app/src/components/dialog-select-server.tsx

@@ -19,9 +19,15 @@ import { normalizeServerUrl, ServerConnection, useServer } from "@/context/serve
 import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
 import { useSettings } from "@/context/settings"
 import { useTabs } from "@/context/tabs"
+import { applyServerFormEvent, type ServerFormCallbacks } from "./dialog-select-server-domain"
 
 const DEFAULT_USERNAME = "opencode"
 
+type ServerManagementControllerOptions = ServerFormCallbacks & {
+  onSelect?: () => void
+  navigateOnAdd?: boolean
+}
+
 interface ServerFormProps {
   value: string
   name: string
@@ -189,7 +195,7 @@ export function DialogSelectServer() {
   )
 }
 
-export function useServerManagementController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
+export function useServerManagementController(options: ServerManagementControllerOptions = {}) {
   const navigate = useNavigate()
   const server = useServer()
   const tabs = useTabs()
@@ -247,7 +253,7 @@ export function useServerManagementController(options: { onSelect?: () => void;
     mutationFn: async (value: string) => {
       const normalized = normalizeServerUrl(value)
       if (!normalized) {
-        resetAdd()
+        setStore("addServer", { error: language.t("dialog.server.add.error") })
         return
       }
 
@@ -264,36 +270,40 @@ export function useServerManagementController(options: { onSelect?: () => void;
         return
       }
 
-      resetAdd()
       if (options.navigateOnAdd === false) {
-        server.add(conn)
-        options.onSelect?.()
+        applyServerFormEvent("complete", resetAdd, options, () => {
+          server.add(conn)
+          options.onSelect?.()
+        })
         return
       }
+      resetAdd()
       await select(conn, true)
+      options.onFormComplete?.()
     },
   }))
 
   const editMutation = useMutation(() => ({
     mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
       if (input.original.type !== "http") return
+      const original = input.original
       const normalized = normalizeServerUrl(input.value)
       if (!normalized) {
-        resetEdit()
+        setStore("editServer", { error: language.t("dialog.server.add.error") })
         return
       }
 
       const name = store.editServer.name.trim() || undefined
       const username = store.editServer.username || undefined
       const password = store.editServer.password || undefined
-      const existingName = input.original.displayName
+      const existingName = original.displayName
       if (
-        normalized === input.original.http.url &&
+        normalized === original.http.url &&
         name === existingName &&
-        username === input.original.http.username &&
-        password === input.original.http.password
+        username === original.http.username &&
+        password === original.http.password
       ) {
-        resetEdit()
+        applyServerFormEvent("complete", resetEdit, options)
         return
       }
 
@@ -307,13 +317,13 @@ export function useServerManagementController(options: { onSelect?: () => void;
         setStore("editServer", { error: language.t("dialog.server.add.error") })
         return
       }
-      if (normalized === input.original.http.url) {
-        server.add(conn)
-      } else {
-        replaceServer(input.original, conn)
-      }
-
-      resetEdit()
+      applyServerFormEvent("complete", resetEdit, options, () => {
+        if (normalized === original.http.url) {
+          server.add(conn)
+          return
+        }
+        replaceServer(original, conn)
+      })
     },
   }))
 
@@ -506,7 +516,7 @@ export function useServerManagementController(options: { onSelect?: () => void;
   createEffect(() => {
     if (!store.editServer.id) return
     if (editing()) return
-    resetEdit()
+    applyServerFormEvent("invalidated", resetEdit, options)
   })
 
   async function handleRemove(key: ServerConnection.Key) {

packages/app/src/components/directory-picker-domain.test.ts

@@ -15,6 +15,7 @@ import {
   treePathWithin,
   currentPickerSuggestions,
   createDirectorySearch,
+  createTreeNavigationLifecycle,
   createPriorityTaskQueue,
   displayPickerPath,
   pickerParent,
@@ -83,6 +84,15 @@ test("accepts mutations only from the active navigation", () => {
   expect(activeTreeNavigation(2, 3)).toBeFalse()
 })
 
+test("invalidates directory navigation when its lifecycle is disposed", () => {
+  const navigation = createTreeNavigationLifecycle()
+  const initial = navigation.begin()
+
+  expect(navigation.active(initial)).toBeTrue()
+  navigation.dispose()
+  expect(navigation.active(initial)).toBeFalse()
+})
+
 test("preserves POSIX case while matching Windows drives case-insensitively", () => {
   expect(treePathWithin("/repo", "/Repo")).toBeFalse()
   expect(treePathWithin("C:/Repo", "c:/repo/src")).toBeTrue()

packages/app/src/components/directory-picker-domain.ts

@@ -138,6 +138,27 @@ export function activeTreeNavigation(request: number, current: number) {
   return request === current
 }
 
+export function createTreeNavigationLifecycle() {
+  let generation = 0
+  let disposed = false
+
+  return {
+    begin() {
+      return ++generation
+    },
+    current() {
+      return generation
+    },
+    active(request: number) {
+      return !disposed && activeTreeNavigation(request, generation)
+    },
+    dispose() {
+      disposed = true
+      generation++
+    },
+  }
+}
+
 export function createPriorityTaskQueue<T>(concurrency: number) {
   type Job = {
     key: string

packages/app/src/components/file-tree-v2-domain.ts

@@ -0,0 +1,11 @@
+import type { Filter } from "./file-tree"
+
+export function effectiveFileTreeOpen(input: {
+  path: string
+  expanded: boolean
+  collapsed?: boolean
+  filter?: Pick<Filter, "dirs">
+}) {
+  if (input.collapsed) return false
+  return input.expanded || input.filter?.dirs.has(input.path) === true
+}

packages/app/src/components/file-tree-v2.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, test } from "bun:test"
+import { effectiveFileTreeOpen } from "./file-tree-v2-domain"
+
+describe("effectiveFileTreeOpen", () => {
+  test("opens filtered ancestors without changing manual expansion", () => {
+    const filter = { dirs: new Set(["src", "src/components"]) }
+    const expanded = false
+
+    expect(effectiveFileTreeOpen({ path: "src", expanded, filter })).toBe(true)
+    expect(effectiveFileTreeOpen({ path: "src/components", expanded, filter })).toBe(true)
+    expect(expanded).toBe(false)
+  })
+
+  test("preserves an explicit collapse while filtering", () => {
+    const filter = { dirs: new Set(["src"]) }
+
+    expect(effectiveFileTreeOpen({ path: "src", expanded: false, filter, collapsed: true })).toBe(false)
+  })
+
+  test("preserves manual expansion outside a filter", () => {
+    expect(effectiveFileTreeOpen({ path: "src", expanded: true })).toBe(true)
+    expect(effectiveFileTreeOpen({ path: "src", expanded: false })).toBe(false)
+  })
+})