refactor(app): extract session side panel controller

packages/app/src/components/dialog-connect-provider.tsx

@@ -1,4 +1,3 @@
-import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -13,21 +12,8 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import {
-  type Accessor,
-  type Component,
-  createEffect,
-  createMemo,
-  createResource,
-  createUniqueId,
-  For,
-  Match,
-  onCleanup,
-  onMount,
-  Show,
-  Switch,
-} from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useQueryClient } from "@tanstack/solid-query"
 import { useParams } from "@solidjs/router"
 import { Link } from "@/components/link"
@@ -39,10 +25,9 @@ import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { CustomProviderForm } from "./dialog-custom-provider"
 import { decode64 } from "@/utils/base64"
 import { pathKey } from "@/utils/path-key"
+import { createProviderConnectionController } from "./provider-connection-controller"
 
 const CUSTOM_ID = "_custom"
-type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
-
 export function useProviderConnectController(options: { onBack?: () => void } = {}) {
   const [store, setStore] = createStore({ selected: undefined as string | undefined })
   const reset = () => setStore("selected", undefined)
@@ -393,112 +378,84 @@ function ProviderConnection(props: {
   const newLayout = settings.general.newLayoutDesigns
   const providers = useProviders(() => props.directory?.())
   const directory = () => props.directory?.() ?? decode64(params.dir)
-  const location = () => {
-    const value = directory()
-    return value ? { directory: value } : undefined
-  }
-
-  const alive = { value: true }
-  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
-
-  onCleanup(() => {
-    alive.value = false
-    if (timer.current === undefined) return
-    clearTimeout(timer.current)
-    timer.current = undefined
-  })
 
   const provider = createMemo(
     () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
   )
-  const fallback = createMemo<ConnectMethod[]>(() => [
-    {
-      type: "key" as const,
-      label: language.t("provider.connect.method.apiKey"),
+  const controller = createProviderConnectionController({
+    provider: props.provider,
+    directory,
+    fallbackKeyLabel: () => language.t("provider.connect.method.apiKey"),
+    requestFailed: () => language.t("common.requestFailed"),
+    invalidCode: () => language.t("provider.connect.oauth.code.invalid"),
+    services: {
+      integration: {
+        load: (integrationID, value) =>
+          serverSDK()
+            .api.integration.get({
+              integrationID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+      },
+      connection: {
+        key: (integrationID, value, key) =>
+          serverSDK().api.integration.connect.key({
+            integrationID,
+            location: value ? { directory: value } : undefined,
+            key,
+          }),
+        oauth: (integrationID, value, methodID, inputs) =>
+          serverSDK()
+            .api.integration.oauth.connect({
+              integrationID,
+              methodID,
+              inputs,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        status: (integrationID, value, attemptID) =>
+          serverSDK()
+            .api.integration.oauth.status({
+              integrationID,
+              attemptID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        complete: (integrationID, value, attemptID, code) =>
+          serverSDK().api.integration.oauth.complete({
+            integrationID,
+            attemptID,
+            location: value ? { directory: value } : undefined,
+            code,
+          }),
+      },
+      provider: {
+        refresh: () =>
+          queryClient.refetchQueries(serverSync().queryOptions.providers(directory() ? pathKey(directory()!) : null)),
+      },
+      completion: {
+        finish: () => {
+          dialog.close()
+          showToast({
+            variant: "success",
+            icon: "circle-check",
+            title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
+            description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
+          })
+        },
+      },
     },
-  ])
-  const [integration] = createResource(
-    () => ({ provider: props.provider, directory: directory() }),
-    (input) =>
-      serverSDK()
-        .api.integration.get({
-          integrationID: input.provider,
-          location: input.directory ? { directory: input.directory } : undefined,
-        })
-        .then((result) => result.data),
-  )
-  const loading = createMemo(() => integration.loading)
-  const methods = createMemo<ConnectMethod[]>(() => {
-    const values = integration.latest?.methods.filter(
-      (method): method is ConnectMethod => method.type === "key" || method.type === "oauth",
-    )
-    return values?.length ? values : fallback()
   })
-  const [store, setStore] = createStore({
-    methodIndex: undefined as undefined | number,
-    authorization: undefined as undefined | IntegrationOauthConnectOutput["data"],
-    promptInputs: undefined as undefined | Record<string, string>,
-    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
-    error: undefined as string | undefined,
-  })
-
-  type Action =
-    | { type: "method.select"; index: number }
-    | { type: "method.reset" }
-    | { type: "auth.prompt" }
-    | { type: "auth.inputs"; inputs: Record<string, string> }
-    | { type: "auth.pending" }
-    | { type: "auth.complete"; authorization: IntegrationOauthConnectOutput["data"] }
-    | { type: "auth.error"; error: string }
-
-  function dispatch(action: Action) {
-    setStore(
-      produce((draft) => {
-        if (action.type === "method.select") {
-          draft.methodIndex = action.index
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "method.reset") {
-          draft.methodIndex = undefined
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.prompt") {
-          draft.state = "prompt"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.inputs") {
-          draft.promptInputs = action.inputs
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.pending") {
-          draft.state = "pending"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.complete") {
-          draft.state = "complete"
-          draft.authorization = action.authorization
-          draft.error = undefined
-          return
-        }
-        draft.state = "error"
-        draft.error = action.error
-      }),
-    )
-  }
-
-  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
+  const loading = controller.data.loading
+  const methods = controller.data.methods
+  const method = controller.data.method
+  const methodIndex = controller.data.methodIndex
+  const authorization = controller.data.authorization
+  const state = controller.auth.state
+  const error = controller.auth.error
+  const connectKey = controller.auth.connectKey
+  const completeCode = controller.auth.completeCode
 
   const methodLabel = (value?: { type?: string; label?: string }) => {
     if (!value) return ""
@@ -516,56 +473,7 @@ function ProviderConnection(props: {
     }
   }
 
-  function formatError(value: unknown, fallback: string): string {
-    if (value && typeof value === "object" && "data" in value) {
-      const data = (value as { data?: { message?: unknown } }).data
-      if (typeof data?.message === "string" && data.message) return data.message
-    }
-    if (value && typeof value === "object" && "error" in value) {
-      const nested = formatError((value as { error?: unknown }).error, "")
-      if (nested) return nested
-    }
-    if (value && typeof value === "object" && "message" in value) {
-      const message = (value as { message?: unknown }).message
-      if (typeof message === "string" && message) return message
-    }
-    if (value instanceof Error && value.message) return value.message
-    if (typeof value === "string" && value) return value
-    return fallback
-  }
-
-  async function selectMethod(index: number, inputs?: Record<string, string>) {
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
-
-    const method = methods()[index]
-    dispatch({ type: "method.select", index })
-
-    if (method.type === "oauth") {
-      if (method.prompts?.length && !inputs) {
-        dispatch({ type: "auth.prompt" })
-        return
-      }
-      dispatch({ type: "auth.pending" })
-      await serverSDK()
-        .api.integration.oauth.connect({
-          integrationID: props.provider,
-          methodID: method.id,
-          inputs: inputs ?? {},
-          location: location(),
-        })
-        .then((x) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.complete", authorization: x.data })
-        })
-        .catch((e) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
-        })
-    }
-  }
+  const selectMethod = controller.auth.select
 
   function AuthPromptsView() {
     const [formStore, setFormStore] = createStore({
@@ -586,7 +494,7 @@ function ProviderConnection(props: {
     const current = createMemo(() => {
       const all = prompts()
       const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
-      if (index === -1) return
+      if (index === -1) return undefined
       return {
         index,
         prompt: all[index],
@@ -600,13 +508,14 @@ function ProviderConnection(props: {
     })
 
     async function next(index: number, value: Record<string, string>) {
-      if (store.methodIndex === undefined) return
+      const selected = methodIndex()
+      if (selected === undefined) return
       const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
       if (next !== -1) {
         setFormStore("index", next)
         return
       }
-      await selectMethod(store.methodIndex, value)
+      await selectMethod(selected, value)
     }
 
     async function handleSubmit(e: SubmitEvent) {
@@ -620,12 +529,12 @@ function ProviderConnection(props: {
     const item = () => current()
     const text = createMemo(() => {
       const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "text") return
+      if (!prompt || prompt.type !== "text") return undefined
       return prompt
     })
     const select = createMemo(() => {
       const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "select") return
+      if (!prompt || prompt.type !== "select") return undefined
       return prompt
     })
 
@@ -696,33 +605,9 @@ function ProviderConnection(props: {
     listRef?.onKeyDown(e)
   }
 
-  let auto = false
-  createEffect(() => {
-    if (auto) return
-    if (loading()) return
-    if (methods().length === 1) {
-      auto = true
-      void selectMethod(0)
-    }
-  })
-
-  async function complete() {
-    const value = directory()
-    await queryClient
-      .refetchQueries(serverSync().queryOptions.providers(value ? pathKey(value) : null))
-      .catch(() => undefined)
-    dialog.close()
-    showToast({
-      variant: "success",
-      icon: "circle-check",
-      title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
-      description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
-    })
-  }
-
   function goBack() {
-    if (methods().length > 1 && store.methodIndex !== undefined) {
-      dispatch({ type: "method.reset" })
+    if (methods().length > 1 && methodIndex() !== undefined) {
+      controller.auth.reset()
       return
     }
     props.onBack()
@@ -810,9 +695,9 @@ function ProviderConnection(props: {
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const apiKey = formData.get("apiKey") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("apiKey")
+      const apiKey = typeof value === "string" ? value : ""
 
       if (!apiKey?.trim()) {
         setFormStore("error", language.t("provider.connect.apiKey.required"))
@@ -820,12 +705,7 @@ function ProviderConnection(props: {
       }
 
       setFormStore("error", undefined)
-      await serverSDK().api.integration.connect.key({
-        integrationID: props.provider,
-        location: location(),
-        key: apiKey,
-      })
-      await complete()
+      await connectKey(apiKey)
     }
 
     if (newLayout())
@@ -940,9 +820,9 @@ function ProviderConnection(props: {
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const code = formData.get("code") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("code")
+      const code = typeof value === "string" ? value : ""
 
       if (!code?.trim()) {
         setFormStore("error", language.t("provider.connect.oauth.code.required"))
@@ -950,20 +830,7 @@ function ProviderConnection(props: {
       }
 
       setFormStore("error", undefined)
-      const result = await serverSDK()
-        .api.integration.oauth.complete({
-          integrationID: props.provider,
-          attemptID: store.authorization!.attemptID,
-          location: location(),
-          code,
-        })
-        .then(() => ({ ok: true as const }))
-        .catch((error) => ({ ok: false as const, error }))
-      if (result.ok) {
-        await complete()
-        return
-      }
-      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
+      setFormStore("error", await completeCode(code))
     }
 
     if (newLayout())
@@ -971,7 +838,7 @@ function ProviderConnection(props: {
         <div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
           <div>
             {language.t("provider.connect.oauth.code.visit.prefix")}
-            <Link href={store.authorization!.url} class="text-v2-text-text-base">
+            <Link href={authorization()!.url} class="text-v2-text-text-base">
               {language.t("provider.connect.oauth.code.visit.link")}
             </Link>
             {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
@@ -1010,7 +877,7 @@ function ProviderConnection(props: {
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.code.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
           {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
         </div>
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -1036,52 +903,18 @@ function ProviderConnection(props: {
 
   function OAuthAutoView() {
     const code = createMemo(() => {
-      const instructions = store.authorization?.instructions
+      const instructions = authorization()?.instructions
       if (instructions?.includes(":")) {
         return instructions.split(":").pop()?.trim()
       }
       return instructions
     })
 
-    onMount(() => {
-      const poll = async () => {
-        const authorization = store.authorization
-        if (!authorization || !alive.value) return
-        const result = await serverSDK()
-          .api.integration.oauth.status({
-            integrationID: props.provider,
-            attemptID: authorization.attemptID,
-            location: location(),
-          })
-          .then((value) => ({ ok: true as const, status: value.data }))
-          .catch((error) => ({ ok: false as const, error }))
-        if (!alive.value) return
-        if (!result.ok) {
-          dispatch({ type: "auth.error", error: formatError(result.error, language.t("common.requestFailed")) })
-          return
-        }
-        if (result.status.status === "complete") {
-          await complete()
-          return
-        }
-        if (result.status.status === "failed") {
-          dispatch({ type: "auth.error", error: result.status.message })
-          return
-        }
-        if (result.status.status === "expired") {
-          dispatch({ type: "auth.error", error: language.t("common.requestFailed") })
-          return
-        }
-        timer.current = setTimeout(poll, 1_000)
-      }
-      void poll()
-    })
-
     return (
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
           {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
         </div>
         <TextField
@@ -1125,7 +958,7 @@ function ProviderConnection(props: {
         <div
           onKeyDown={handleKey}
           tabIndex={newLayout() ? undefined : 0}
-          autofocus={!newLayout() && store.methodIndex === undefined ? true : undefined}
+          autofocus={!newLayout() && methodIndex() === undefined ? true : undefined}
         >
           <Switch>
             <Match when={loading()}>
@@ -1136,10 +969,10 @@ function ProviderConnection(props: {
                 </div>
               </div>
             </Match>
-            <Match when={store.methodIndex === undefined}>
+            <Match when={methodIndex() === undefined}>
               <MethodSelection />
             </Match>
-            <Match when={store.state === "pending"}>
+            <Match when={state() === "pending"}>
               <div class="text-14-regular text-text-base">
                 <div class="flex items-center gap-x-2">
                   <Spinner />
@@ -1147,14 +980,14 @@ function ProviderConnection(props: {
                 </div>
               </div>
             </Match>
-            <Match when={store.state === "prompt"}>
+            <Match when={state() === "prompt"}>
               <AuthPromptsView />
             </Match>
-            <Match when={store.state === "error"}>
+            <Match when={state() === "error"}>
               <div class="text-14-regular text-text-base">
                 <div class="flex items-center gap-x-2">
                   <Icon name="circle-ban-sign" class="text-icon-critical-base" />
-                  <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
+                  <span>{language.t("provider.connect.status.failed", { error: error() ?? "" })}</span>
                 </div>
               </div>
             </Match>
@@ -1163,10 +996,10 @@ function ProviderConnection(props: {
             </Match>
             <Match when={method()?.type === "oauth"}>
               <Switch>
-                <Match when={store.authorization?.mode === "code"}>
+                <Match when={authorization()?.mode === "code"}>
                   <OAuthCodeView />
                 </Match>
-                <Match when={store.authorization?.mode === "auto"}>
+                <Match when={authorization()?.mode === "auto"}>
                   <OAuthAutoView />
                 </Match>
               </Switch>

packages/app/src/components/provider-connection-controller.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test, vi } from "bun:test"
+import { createRoot } from "solid-js"
+import {
+  createProviderConnectionWorkflowController,
+  type ProviderConnectMethod,
+} from "./provider-connection-controller"
+
+const authorization = {
+  attemptID: "attempt-1",
+  url: "https://example.com/auth",
+  instructions: "Code: ABCD",
+  mode: "auto" as const,
+  time: { created: 0, expires: 1 },
+}
+
+function services(options: {
+  methods: readonly ProviderConnectMethod[]
+  status?: () => Promise<{ status: "pending" | "complete" }>
+  refresh?: () => void
+  finish?: () => void
+}) {
+  return {
+    connection: {
+      key: async () => undefined,
+      oauth: async () => authorization,
+      status: options.status ?? (async () => ({ status: "pending" as const })),
+      complete: async () => undefined,
+    },
+    provider: { refresh: async () => options.refresh?.() },
+    completion: { finish: options.finish ?? (() => undefined) },
+  }
+}
+
+function create(options: Parameters<typeof services>[0]) {
+  return createRoot((dispose) => ({
+    dispose,
+    controller: createProviderConnectionWorkflowController({
+      provider: "example",
+      directory: () => "/project",
+      requestFailed: () => "Request failed",
+      invalidCode: () => "Invalid code",
+      loading: () => false,
+      methods: () => [...options.methods],
+      services: services(options),
+      pollInterval: 100,
+    }),
+  }))
+}
+
+async function settle() {
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe("provider connection controller", () => {
+  test("moves prompted OAuth methods through prompt and authorization states", async () => {
+    const owned = create({
+      methods: [
+        {
+          id: "oauth",
+          type: "oauth",
+          label: "OAuth",
+          prompts: [{ type: "text", key: "account", message: "Account" }],
+        },
+      ],
+    })
+
+    await owned.controller.auth.select(0)
+    expect(owned.controller.auth.state()).toBe("prompt")
+
+    await owned.controller.auth.select(0, { account: "team" })
+    expect(owned.controller.auth.state()).toBe("complete")
+    expect(owned.controller.data.authorization()).toEqual(authorization)
+    owned.dispose()
+  })
+
+  test("polls auto OAuth independently and completes after provider refresh", async () => {
+    vi.useFakeTimers()
+    try {
+      const calls: string[] = []
+      const statuses = [{ status: "pending" as const }, { status: "complete" as const }]
+      const owned = create({
+        methods: [{ id: "oauth", type: "oauth", label: "OAuth" }],
+        status: async () => statuses.shift() ?? { status: "complete" as const },
+        refresh: () => calls.push("refresh"),
+        finish: () => calls.push("finish"),
+      })
+
+      await owned.controller.auth.select(0)
+      await settle()
+      expect(owned.controller.data.authorization()).toEqual(authorization)
+      expect(calls).toEqual([])
+
+      vi.advanceTimersByTime(100)
+      await settle()
+      expect(calls).toEqual(["refresh", "finish"])
+      owned.dispose()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  test("cancels an owned poll timer on reset and disposal", async () => {
+    vi.useFakeTimers()
+    try {
+      const status = vi.fn(async () => ({ status: "pending" as const }))
+      const owned = create({ methods: [{ id: "oauth", type: "oauth", label: "OAuth" }], status })
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(1)
+
+      owned.controller.auth.reset()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(1)
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(2)
+      owned.dispose()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

packages/app/src/components/provider-connection-controller.ts

@@ -0,0 +1,254 @@
+import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
+import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+
+export type ProviderConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
+type Authorization = IntegrationOauthConnectOutput["data"]
+type OAuthStatus = { status: "pending" | "complete" | "expired" } | { status: "failed"; message: string }
+
+type ProviderConnectionServices = {
+  integration: {
+    load: (provider: string, directory?: string) => Promise<{ methods: readonly IntegrationMethod[] } | null>
+  }
+  connection: {
+    key: (provider: string, directory: string | undefined, key: string) => Promise<unknown>
+    oauth: (
+      provider: string,
+      directory: string | undefined,
+      method: string,
+      inputs: Record<string, string>,
+    ) => Promise<Authorization>
+    status: (provider: string, directory: string | undefined, attempt: string) => Promise<OAuthStatus>
+    complete: (provider: string, directory: string | undefined, attempt: string, code: string) => Promise<unknown>
+  }
+  provider: { refresh: () => Promise<unknown> }
+  completion: { finish: () => void }
+}
+
+export function createProviderConnectionController(options: {
+  provider: string
+  directory: () => string | undefined
+  fallbackKeyLabel: () => string
+  requestFailed: () => string
+  invalidCode: () => string
+  services: ProviderConnectionServices
+  pollInterval?: number
+}) {
+  const [integration] = createResource(
+    () => ({ provider: options.provider, directory: options.directory() }),
+    (input) => options.services.integration.load(input.provider, input.directory),
+  )
+  const methods = createMemo<ProviderConnectMethod[]>(() => {
+    const values = integration.latest?.methods.filter(
+      (method): method is ProviderConnectMethod => method.type === "key" || method.type === "oauth",
+    )
+    if (values?.length) return [...values]
+    return [{ type: "key", label: options.fallbackKeyLabel() }]
+  })
+  return createProviderConnectionWorkflowController({
+    ...options,
+    loading: () => integration.loading,
+    methods,
+  })
+}
+
+export function createProviderConnectionWorkflowController(options: {
+  provider: string
+  directory: () => string | undefined
+  requestFailed: () => string
+  invalidCode: () => string
+  loading: () => boolean
+  methods: () => ProviderConnectMethod[]
+  services: Pick<ProviderConnectionServices, "connection" | "provider" | "completion">
+  pollInterval?: number
+}) {
+  const [store, setStore] = createStore({
+    methodIndex: undefined as number | undefined,
+    authorization: undefined as Authorization | undefined,
+    state: "pending" as "pending" | "complete" | "error" | "prompt" | undefined,
+    error: undefined as string | undefined,
+  })
+  const polling = {
+    generation: 0,
+    timer: undefined as ReturnType<typeof setTimeout> | undefined,
+    disposed: false,
+  }
+  const methods = options.methods
+  const method = createMemo(() => (store.methodIndex === undefined ? undefined : methods().at(store.methodIndex)))
+
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.prompt" }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: Authorization }
+    | { type: "auth.error"; error: string }
+
+  const dispatch = (action: Action) => {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
+  const cancelPolling = () => {
+    polling.generation++
+    if (polling.timer === undefined) return
+    clearTimeout(polling.timer)
+    polling.timer = undefined
+  }
+  const finish = async () => {
+    cancelPolling()
+    await options.services.provider.refresh().catch(() => undefined)
+    if (polling.disposed) return
+    options.services.completion.finish()
+  }
+  const poll = async (authorization: Authorization, generation: number) => {
+    const result = await options.services.connection
+      .status(options.provider, options.directory(), authorization.attemptID)
+      .then((status) => ({ ok: true as const, status }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    if (result.status.status === "complete") {
+      await finish()
+      return
+    }
+    if (result.status.status === "failed") {
+      dispatch({ type: "auth.error", error: result.status.message })
+      return
+    }
+    if (result.status.status === "expired") {
+      dispatch({ type: "auth.error", error: options.requestFailed() })
+      return
+    }
+    polling.timer = setTimeout(() => void poll(authorization, generation), options.pollInterval ?? 1_000)
+  }
+  const select = async (index: number, inputs?: Record<string, string>) => {
+    cancelPolling()
+    const generation = polling.generation
+    const selected = methods()[index]
+    dispatch({ type: "method.select", index })
+    if (selected.type !== "oauth") return
+    if (selected.prompts?.length && !inputs) {
+      dispatch({ type: "auth.prompt" })
+      return
+    }
+    dispatch({ type: "auth.pending" })
+    const result = await options.services.connection
+      .oauth(options.provider, options.directory(), selected.id, inputs ?? {})
+      .then((authorization) => ({ ok: true as const, authorization }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    dispatch({ type: "auth.complete", authorization: result.authorization })
+    if (result.authorization.mode === "auto") void poll(result.authorization, generation)
+  }
+  const reset = () => {
+    cancelPolling()
+    dispatch({ type: "method.reset" })
+  }
+  const connectKey = async (key: string) => {
+    await options.services.connection.key(options.provider, options.directory(), key)
+    await finish()
+  }
+  const completeCode = async (code: string) => {
+    const authorization = store.authorization
+    if (!authorization) return options.invalidCode()
+    const result = await options.services.connection
+      .complete(options.provider, options.directory(), authorization.attemptID, code)
+      .then(() => ({ ok: true as const }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (!result.ok) return formatProviderConnectionError(result.error, options.invalidCode())
+    await finish()
+    return undefined
+  }
+
+  let auto = false
+  createEffect(() => {
+    if (auto || options.loading() || methods().length !== 1) return
+    auto = true
+    void select(0)
+  })
+  onCleanup(() => {
+    polling.disposed = true
+    cancelPolling()
+  })
+
+  return {
+    data: {
+      loading: options.loading,
+      methods,
+      method,
+      methodIndex: () => store.methodIndex,
+      authorization: () => store.authorization,
+    },
+    auth: {
+      state: () => store.state,
+      error: () => store.error,
+      select,
+      reset,
+      connectKey,
+      completeCode,
+    },
+  }
+}
+
+export type ProviderConnectionController = ReturnType<typeof createProviderConnectionController>
+
+export function formatProviderConnectionError(value: unknown, fallback: string): string {
+  if (value && typeof value === "object" && "data" in value) {
+    const data = value.data
+    if (data && typeof data === "object" && "message" in data && typeof data.message === "string" && data.message)
+      return data.message
+  }
+  if (value && typeof value === "object" && "error" in value) {
+    const nested = formatProviderConnectionError(value.error, "")
+    if (nested) return nested
+  }
+  if (value && typeof value === "object" && "message" in value) {
+    const message = value.message
+    if (typeof message === "string" && message) return message
+  }
+  if (value instanceof Error && value.message) return value.message
+  if (typeof value === "string" && value) return value
+  return fallback
+}

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

@@ -0,0 +1,133 @@
+import { describe, expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { createStore } from "solid-js/store"
+import { SESSION_OPEN_FILE_TAB } from "./helpers"
+import { createSessionSidePanelController, sessionSidePanelHandoffFiles } from "./session-side-panel-controller"
+
+function createController(options?: { active?: string; all?: string[]; mode?: "changes" | "all" }) {
+  const calls: string[] = []
+  const [state, setState] = createStore({
+    active: options?.active,
+    all: options?.all ?? ["file://src/a.ts"],
+    preview: undefined as string | undefined,
+    mode: options?.mode ?? ("changes" as "changes" | "all"),
+  })
+  return createRoot((dispose) => ({
+    dispose,
+    calls,
+    state,
+    controller: createSessionSidePanelController({
+      currentTab: () => state.active,
+      allTabs: () => state.all,
+      openTab: (tab) => calls.push(`open:${tab}`),
+      preview: (tab) => calls.push(`preview:${tab}`),
+      setActive: (tab) => calls.push(`active:${tab}`),
+      normalizeFileTab: (tab) => `file://${tab.slice("file://".length).toLowerCase()}`,
+      pathFromTab: (tab) => (tab.startsWith("file://") ? tab.slice("file://".length) : undefined),
+      loadFile: (path) => calls.push(`load:${path}`),
+      reviewEnabled: () => true,
+      canReview: () => true,
+      fileBrowserEnabled: () => true,
+      reviewPanelOpened: () => false,
+      openReviewPanel: () => calls.push("panel"),
+      treeMode: () => state.mode,
+      setTreeMode: (mode) => setState("mode", mode),
+      fileReady: () => false,
+      sessionKey: () => "session",
+      selectedLines: () => null,
+      persistHandoff: () => undefined,
+      showDialog: () => undefined,
+    }),
+  }))
+}
+
+describe("session side panel controller", () => {
+  test("normalizes and centralizes file tab selection mutations", async () => {
+    const owned = createController()
+
+    owned.controller.tabs.activate("file://SRC/A.ts")
+    expect(owned.calls).toEqual(["load:src/a.ts", "panel", "active:file://src/a.ts"])
+
+    owned.calls.length = 0
+    owned.controller.tabs.preview("file://SRC/B.ts")
+    expect(owned.calls).toEqual(["preview:file://src/b.ts", "load:src/b.ts", "panel"])
+    await Promise.resolve()
+    expect(owned.calls).toEqual(["preview:file://src/b.ts", "load:src/b.ts", "panel", "active:file://src/b.ts"])
+
+    owned.calls.length = 0
+    owned.controller.tabs.open("file://SRC/C.ts")
+    expect(owned.calls).toEqual(["open:file://src/c.ts", "load:src/c.ts", "panel", "active:file://src/c.ts"])
+    owned.dispose()
+  })
+
+  test("derives browser selection and controls the tree mode", () => {
+    const owned = createController({ active: "file://src/a.ts", all: ["file://src/a.ts"] })
+
+    expect(owned.controller.browser.tab()).toBe("file://src/a.ts")
+    expect(owned.controller.browser.mounted()).toBe(true)
+    expect(owned.controller.browser.visible()).toBe(true)
+
+    owned.controller.tree.setMode("invalid")
+    expect(owned.state.mode).toBe("changes")
+    owned.controller.tree.showAll()
+    expect(owned.state.mode).toBe("all")
+    owned.controller.tree.showAll()
+    expect(owned.state.mode).toBe("all")
+
+    owned.calls.length = 0
+    owned.controller.browser.open()
+    expect(owned.calls[0]).toBe(`preview:${SESSION_OPEN_FILE_TAB}`)
+    owned.dispose()
+  })
+
+  test("opens the file dialog with the tree handoff callback", async () => {
+    let render: (() => unknown) | undefined
+    let dialogProps: { mode?: "files"; onOpenFile?: (path: string) => void } | undefined
+    const owned = createController()
+    const controller = createSessionSidePanelController({
+      currentTab: () => undefined,
+      allTabs: () => [],
+      openTab: () => undefined,
+      preview: () => undefined,
+      setActive: () => undefined,
+      normalizeFileTab: (tab) => tab,
+      pathFromTab: () => undefined,
+      loadFile: () => undefined,
+      reviewEnabled: () => true,
+      canReview: () => true,
+      fileBrowserEnabled: () => true,
+      reviewPanelOpened: () => true,
+      openReviewPanel: () => undefined,
+      treeMode: owned.controller.tree.mode,
+      setTreeMode: owned.controller.tree.setMode,
+      fileReady: () => false,
+      sessionKey: () => "session",
+      selectedLines: () => null,
+      persistHandoff: () => undefined,
+      showDialog: (value) => (render = value),
+      loadSelectFileDialog: async () => ({
+        DialogSelectFile: (props) => {
+          dialogProps = props
+          return null
+        },
+      }),
+    })
+
+    await controller.dialog.openFile()
+    render?.()
+    expect(dialogProps?.mode).toBe("files")
+    dialogProps?.onOpenFile?.("src/a.ts")
+    expect(owned.state.mode).toBe("all")
+    owned.dispose()
+  })
+})
+
+test("projects only file tabs into handoff persistence", () => {
+  expect(
+    sessionSidePanelHandoffFiles(
+      ["review", "file://src/a.ts", "file://src/b.ts"],
+      (tab) => (tab.startsWith("file://") ? tab.slice("file://".length) : undefined),
+      (path) => (path.endsWith("a.ts") ? { start: 2, end: 4 } : { startLine: 2, endLine: 4 }),
+    ),
+  ).toEqual({ "src/a.ts": { start: 2, end: 4 }, "src/b.ts": null })
+})

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

@@ -0,0 +1,150 @@
+import { createComponent, createEffect, createMemo, type Accessor, type Component, type JSX } from "solid-js"
+import type { SelectedLineRange } from "@/context/file"
+import { SESSION_OPEN_FILE_TAB, createOpenSessionFileTab, createSessionTabs } from "@/pages/session/helpers"
+
+type TreeMode = "changes" | "all"
+
+type Input = {
+  currentTab: Accessor<string | undefined>
+  allTabs: Accessor<string[]>
+  openTab: (tab: string) => void
+  preview: (tab: string) => void
+  setActive: (tab: string) => void
+  normalizeFileTab: (tab: string) => string
+  pathFromTab: (tab: string) => string | undefined
+  loadFile: (path: string) => void
+  reviewEnabled: Accessor<boolean>
+  canReview: Accessor<boolean>
+  fileBrowserEnabled: Accessor<boolean>
+  reviewPanelOpened: Accessor<boolean>
+  openReviewPanel: () => void
+  treeMode: Accessor<TreeMode>
+  setTreeMode: (mode: TreeMode) => void
+  fileReady: Accessor<boolean>
+  sessionKey: Accessor<string>
+  selectedLines: (path: string) => unknown
+  persistHandoff: (key: string, files: Record<string, SelectedLineRange | null>) => void
+  showDialog: (render: () => JSX.Element) => void
+  loadSelectFileDialog?: () => Promise<{
+    DialogSelectFile: Component<{ mode?: "files"; onOpenFile?: (path: string) => void }>
+  }>
+}
+
+export function createSessionSidePanelController(input: Input) {
+  const normalizeTab = (tab: string) => (tab.startsWith("file://") ? input.normalizeFileTab(tab) : tab)
+  const openReviewPanel = () => {
+    if (!input.reviewPanelOpened()) input.openReviewPanel()
+  }
+  const tabs = createSessionTabs({
+    tabs: () => ({ active: input.currentTab, all: input.allTabs }),
+    pathFromTab: input.pathFromTab,
+    normalizeTab,
+    review: input.reviewEnabled,
+    hasReview: input.canReview,
+    fileBrowser: input.fileBrowserEnabled,
+  })
+  const prepareTab = (tab: string) => {
+    const path = input.pathFromTab(tab)
+    if (path) input.loadFile(path)
+    openReviewPanel()
+    return tab
+  }
+  const open = createOpenSessionFileTab({
+    normalizeTab,
+    openTab: input.openTab,
+    pathFromTab: input.pathFromTab,
+    loadFile: input.loadFile,
+    openReviewPanel,
+    setActive: input.setActive,
+  })
+  const preview = (value: string) => {
+    const next = normalizeTab(value)
+    input.preview(next)
+    const selected = prepareTab(next)
+    queueMicrotask(() => input.setActive(selected))
+  }
+  const activate = (value: string) => input.setActive(prepareTab(normalizeTab(value)))
+  const openFileBrowser = () => preview(SESSION_OPEN_FILE_TAB)
+  const browserTab = createMemo(() => {
+    if (!input.fileBrowserEnabled()) return undefined
+    const active = tabs.activeTab()
+    if (active === SESSION_OPEN_FILE_TAB) return SESSION_OPEN_FILE_TAB
+    if (active && input.pathFromTab(active)) return active
+    return tabs.activeFileTab()
+  })
+  // Keep the shell mounted while any file tab exists. Kobalte briefly selects
+  // Review while replacing a preview trigger, which must not reset sidebar scroll.
+  const fileBrowserMounted = createMemo(
+    () =>
+      input.fileBrowserEnabled() && (tabs.openedTabs().length > 0 || tabs.openFileOpen() || browserTab() !== undefined),
+  )
+  const fileBrowserVisible = createMemo(() => {
+    const active = tabs.activeTab()
+    return active !== "review" && active !== "context" && active !== "empty"
+  })
+  const setTreeMode = (value: string) => {
+    if (value !== "changes" && value !== "all") return
+    input.setTreeMode(value)
+  }
+  const showAllFiles = () => {
+    if (input.treeMode() !== "changes") return
+    input.setTreeMode("all")
+  }
+  const openFileDialog = async () => {
+    const load = input.loadSelectFileDialog ?? (() => import("@/components/dialog-select-file"))
+    const { DialogSelectFile } = await load()
+    input.showDialog(() => createComponent(DialogSelectFile, { mode: "files", onOpenFile: showAllFiles }))
+  }
+
+  createEffect(() => {
+    if (!input.fileReady()) return
+    input.persistHandoff(
+      input.sessionKey(),
+      sessionSidePanelHandoffFiles(input.allTabs(), input.pathFromTab, input.selectedLines),
+    )
+  })
+
+  return {
+    tabs: {
+      ...tabs,
+      normalize: normalizeTab,
+      open,
+      preview,
+      activate,
+    },
+    browser: {
+      tab: browserTab,
+      mounted: fileBrowserMounted,
+      visible: fileBrowserVisible,
+      open: openFileBrowser,
+    },
+    tree: {
+      mode: input.treeMode,
+      setMode: setTreeMode,
+      showAll: showAllFiles,
+    },
+    dialog: {
+      openFile: openFileDialog,
+    },
+  }
+}
+
+export function sessionSidePanelHandoffFiles(
+  tabs: readonly string[],
+  pathFromTab: (tab: string) => string | undefined,
+  selectedLines: (path: string) => unknown,
+) {
+  return tabs.reduce<Record<string, SelectedLineRange | null>>((files, tab) => {
+    const path = pathFromTab(tab)
+    if (!path) return files
+    const selected = selectedLines(path)
+    files[path] = isSelectedLineRange(selected) ? selected : null
+    return files
+  }, {})
+}
+
+function isSelectedLineRange(value: unknown): value is SelectedLineRange {
+  return !!value && typeof value === "object" && "start" in value && "end" in value
+}
+
+export type SessionSidePanelController = ReturnType<typeof createSessionSidePanelController>

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

@@ -1,4 +1,4 @@
-import { For, Match, Show, Switch, createEffect, createMemo, onCleanup, type JSX } from "solid-js"
+import { For, Match, Show, Switch, createMemo, onCleanup, type JSX } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createMediaQuery } from "@solid-primitives/media"
 import { DragDropProvider as DndKitProvider, PointerSensor } from "@dnd-kit/solid"
@@ -38,23 +38,17 @@ const fileBrowserTabPanelID = "session-side-panel-file-browser-tabpanel"
 import { SessionContextTab, SortableTab, SortableTabV2, FileVisual } from "@/components/session"
 import { OpenInAppV2 } from "@/components/session/open-in-app-v2"
 import { useCommand } from "@/context/command"
-import { useFile, type SelectedLineRange } from "@/context/file"
+import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useSDK } from "@/context/sdk"
 import { useSettings } from "@/context/settings"
 import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
 import { FileTabContent } from "@/pages/session/file-tabs"
-import {
-  SESSION_OPEN_FILE_TAB,
-  createOpenSessionFileTab,
-  createSessionTabs,
-  getTabReorderIndex,
-  shouldShowFileTree,
-  type Sizing,
-} from "@/pages/session/helpers"
+import { SESSION_OPEN_FILE_TAB, getTabReorderIndex, shouldShowFileTree, type Sizing } from "@/pages/session/helpers"
 import { setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionSidePanelController } from "@/pages/session/session-side-panel-controller"
 import { SessionFileBrowserTab, type SessionFileBrowserState } from "@/pages/session/v2/session-file-browser-tab"
 
 type ReviewDiff = FileDiffInfo | SnapshotFileDiff | VcsFileDiff
@@ -153,91 +147,49 @@ export function SessionSidePanel(props: {
     return file.tree.children("").length === 0
   })
 
-  const normalizeTab = (tab: string) => {
-    if (!tab.startsWith("file://")) return tab
-    return file.tab(tab)
-  }
-
-  const openReviewPanel = () => {
-    if (!view().reviewPanel.opened()) view().reviewPanel.open()
-  }
-
-  const openTab = createOpenSessionFileTab({
-    normalizeTab,
-    openTab: tabs().open,
+  const controller = createSessionSidePanelController({
+    currentTab: () => tabs().active(),
+    allTabs: () => tabs().all(),
+    openTab: (tab) => tabs().open(tab),
+    preview: (tab) => tabs().previewTab(tab),
+    setActive: (tab) => tabs().setActive(tab),
+    normalizeFileTab: file.tab,
     pathFromTab: file.pathFromTab,
     loadFile: file.load,
-    openReviewPanel,
-    setActive: tabs().setActive,
+    reviewEnabled: reviewTab,
+    canReview: props.canReview,
+    fileBrowserEnabled: () => !!props.fileBrowserState,
+    reviewPanelOpened: () => view().reviewPanel.opened(),
+    openReviewPanel: () => view().reviewPanel.open(),
+    treeMode: () => layout.fileTree.tab(),
+    setTreeMode: (mode) => layout.fileTree.setTab(mode),
+    fileReady: file.ready,
+    sessionKey,
+    selectedLines: file.selectedLines,
+    persistHandoff: (key, files) => setSessionHandoff(key, { files }),
+    showDialog: (render) => void dialog.show(render),
   })
-
-  const tabState = createSessionTabs({
-    tabs,
-    pathFromTab: file.pathFromTab,
-    normalizeTab,
-    review: reviewTab,
-    hasReview: props.canReview,
-    fileBrowser: () => !!props.fileBrowserState,
-  })
-  const contextOpen = tabState.contextOpen
-  const openFileOpen = tabState.openFileOpen
-  const panelTabs = tabState.panelTabs
-  const openedTabs = tabState.openedTabs
-  const activeTab = tabState.activeTab
-  const activeFileTab = tabState.activeFileTab
-
-  const fileTreeTab = () => layout.fileTree.tab()
-
-  const setFileTreeTabValue = (value: string) => {
-    if (value !== "changes" && value !== "all") return
-    layout.fileTree.setTab(value)
-  }
-
-  const showAllFiles = () => {
-    if (fileTreeTab() !== "changes") return
-    layout.fileTree.setTab("all")
-  }
+  const contextOpen = controller.tabs.contextOpen
+  const panelTabs = controller.tabs.panelTabs
+  const openedTabs = controller.tabs.openedTabs
+  const activeTab = controller.tabs.activeTab
+  const activeFileTab = controller.tabs.activeFileTab
+  const openTab = controller.tabs.open
+  const previewTab = controller.tabs.preview
+  const activateTab = controller.tabs.activate
+  const browserTab = controller.browser.tab
+  const fileBrowserMounted = controller.browser.mounted
+  const fileBrowserVisible = controller.browser.visible
+  const fileTreeTab = controller.tree.mode
+  const setFileTreeTabValue = controller.tree.setMode
 
   let fileFilter: HTMLInputElement | undefined
   let tabList: HTMLDivElement | undefined
   const temporaryTab = tabs().preview
-  const previewTab = (value: string) => {
-    const next = normalizeTab(value)
-    tabs().previewTab(next)
-    const path = file.pathFromTab(next)
-    if (path) void file.load(path)
-    openReviewPanel()
-    queueMicrotask(() => tabs().setActive(next))
-  }
   const openFileBrowser = () => {
-    previewTab(SESSION_OPEN_FILE_TAB)
+    controller.browser.open()
     queueMicrotask(() => fileFilter?.focus())
   }
-  const activateTab = (value: string) => {
-    const next = normalizeTab(value)
-    const path = file.pathFromTab(next)
-    if (path) void file.load(path)
-    openReviewPanel()
-    tabs().setActive(next)
-  }
-  const browserTab = createMemo(() => {
-    if (!props.fileBrowserState) return undefined
-    const active = activeTab()
-    if (active === SESSION_OPEN_FILE_TAB) return SESSION_OPEN_FILE_TAB
-    if (active && file.pathFromTab(active)) return active
-    return activeFileTab()
-  })
-  // Keep the file-browser shell mounted while any file tab exists. Kobalte briefly
-  // selects Review while the tab For replaces a preview trigger, which would
-  // otherwise dispose the sidebar and reset scroll.
-  const fileBrowserMounted = createMemo(() => {
-    if (!props.fileBrowserState) return false
-    return openedTabs().length > 0 || openFileOpen() || !!browserTab()
-  })
-  const fileBrowserVisible = createMemo(() => {
-    const active = activeTab()
-    return active !== "review" && active !== "context" && active !== "empty"
-  })
   const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
   const closeTabKeybind = createMemo(() => command.keybindParts("tab.close"))
   const [store, setStore] = createStore({
@@ -264,27 +216,6 @@ export function SessionSidePanel(props: {
     setStore("activeDraggable", undefined)
   }
 
-  createEffect(() => {
-    if (!file.ready()) return
-
-    setSessionHandoff(sessionKey(), {
-      files: tabs()
-        .all()
-        .reduce<Record<string, SelectedLineRange | null>>((acc, tab) => {
-          const path = file.pathFromTab(tab)
-          if (!path) return acc
-
-          const selected = file.selectedLines(path)
-          acc[path] =
-            selected && typeof selected === "object" && "start" in selected && "end" in selected
-              ? (selected as SelectedLineRange)
-              : null
-
-          return acc
-        }, {}),
-    })
-  })
-
   return (
     <Show when={isDesktop() && !(settings.general.newLayoutDesigns() && !params.id)}>
       <aside
@@ -451,9 +382,7 @@ export function SessionSidePanel(props: {
                                     iconSize="large"
                                     class="!rounded-md"
                                     onClick={() => {
-                                      void import("@/components/dialog-select-file").then((x) => {
-                                        dialog.show(() => <x.DialogSelectFile mode="files" onOpenFile={showAllFiles} />)
-                                      })
+                                      void controller.dialog.openFile()
                                     }}
                                     aria-label={language.t("command.file.open")}
                                   />