feat(desktop): open attachments in active project (#31192)

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

@@ -0,0 +1,7 @@
+import { ServerConnection } from "@/context/server"
+import type { Platform } from "@/context/platform"
+
+export function directoryPickerKind(platform: Platform["platform"], server: ServerConnection.Any) {
+  if (platform === "desktop" && ServerConnection.local(server)) return "native" as const
+  return "server" as const
+}

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

@@ -0,0 +1,21 @@
+import { describe, expect, test } from "bun:test"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+const local = {
+  type: "sidecar",
+  variant: "base",
+  http: { url: "http://localhost:4096" },
+} as const
+const remote = {
+  type: "ssh",
+  host: "example.test",
+  http: { url: "http://localhost:4096" },
+} as const
+
+describe("directoryPickerKind", () => {
+  test("uses the native picker only for local desktop projects", () => {
+    expect(directoryPickerKind("desktop", local)).toBe("native")
+    expect(directoryPickerKind("desktop", remote)).toBe("server")
+    expect(directoryPickerKind("web", local)).toBe("server")
+  })
+})

packages/app/src/components/directory-picker.tsx

@@ -0,0 +1,31 @@
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { ServerConnection } from "@/context/server"
+import { usePlatform } from "@/context/platform"
+import { DialogSelectDirectory } from "./dialog-select-directory"
+import { directoryPickerKind } from "./directory-picker-policy"
+
+type DirectoryPickerInput = {
+  server: ServerConnection.Any
+  title?: string
+  multiple?: boolean
+  onSelect: (result: string | string[] | null) => void
+}
+
+export function useDirectoryPicker() {
+  const platform = usePlatform()
+  const dialog = useDialog()
+
+  return (input: DirectoryPickerInput) => {
+    if (directoryPickerKind(platform.platform, input.server) === "native" && platform.platform === "desktop") {
+      void platform
+        .openDirectoryPickerDialog({ title: input.title, multiple: input.multiple })
+        .then(input.onSelect)
+      return
+    }
+
+    dialog.show(
+      () => <DialogSelectDirectory {...input} />,
+      () => input.onSelect(null),
+    )
+  }
+}

packages/app/src/components/prompt-input.tsx

@@ -57,7 +57,7 @@ import { useSessionLayout } from "@/pages/session/session-layout"
 import { createSessionTabs } from "@/pages/session/helpers"
 import { createTextFragment, getCursorPosition, setCursorPosition, setRangeEdge } from "./prompt-input/editor-dom"
 import { createPromptAttachments } from "./prompt-input/attachments"
-import { ACCEPTED_FILE_TYPES } from "./prompt-input/files"
+import { ACCEPTED_FILE_TYPES, pickAttachmentFiles } from "./prompt-input/files"
 import {
   canNavigateHistoryAtCursor,
   navigatePromptHistory,
@@ -73,6 +73,8 @@ import { PromptContextItems } from "./prompt-input/context-items"
 import { PromptImageAttachments } from "./prompt-input/image-attachments"
 import { PromptDragOverlay } from "./prompt-input/drag-overlay"
 import { promptPlaceholder } from "./prompt-input/placeholder"
+import { useDirectoryPicker } from "./directory-picker"
+import { showToast } from "@/utils/toast"
 import { ImagePreview } from "@opencode-ai/ui/image-preview"
 import { useQueries } from "@tanstack/solid-query"
 import { useQueryOptions } from "@/context/server-sync"
@@ -140,6 +142,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const permission = usePermission()
   const language = useLanguage()
   const platform = usePlatform()
+  const pickDirectory = useDirectoryPicker()
   const settings = useSettings()
   const { params, tabs, view } = useSessionLayout()
   let editorRef!: HTMLDivElement
@@ -468,7 +471,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
 
   const pick = () => {
     if (server.isLocal()) {
-      fileInputRef?.click()
+      pickAttachmentFiles({
+        picker: platform.openAttachmentPickerDialog,
+        directory: () => sdk.directory,
+        fallback: () => fileInputRef?.click(),
+        onFile: addAttachment,
+        onError: (error) =>
+          showToast({
+            variant: "error",
+            title: language.t("common.requestFailed"),
+            description: error instanceof Error ? error.message : String(error),
+          }),
+      })
       return
     }
     void import("@/components/dialog-select-file").then((module) =>
@@ -1094,7 +1108,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return true
   }
 
-  const { addAttachments, removeAttachment, handlePaste } = createPromptAttachments({
+  const { addAttachment, addAttachments, removeAttachment, handlePaste } = createPromptAttachments({
     editor: () => editorRef,
     isDialogActive: () => !!dialog.active,
     setDraggingType: (type) => setStore("draggingType", type),
@@ -1385,7 +1399,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     server.projects.touch(worktree)
     navigate(`/${base64Encode(worktree)}/session`)
   }
-  const addProject = async () => {
+  const addProject = () => {
     const conn = server.current
     if (!conn) return
     const select = (result: string | string[] | null) => {
@@ -1393,15 +1407,10 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       if (!directory) return
       selectProject(directory)
     }
-    if (platform.openDirectoryPickerDialog && server.isLocal()) {
-      select(await platform.openDirectoryPickerDialog({ title: language.t("command.project.open") }))
-      return
-    }
-    void import("@/components/dialog-select-directory").then((x) => {
-      dialog.show(
-        () => <x.DialogSelectDirectory onSelect={select} server={conn} />,
-        () => select(null),
-      )
+    pickDirectory({
+      server: conn,
+      title: language.t("command.project.open"),
+      onSelect: select,
     })
   }
 

packages/app/src/components/prompt-input/attachments.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, test } from "bun:test"
-import { attachmentMime } from "./files"
+import { attachmentMime, pickAttachmentFiles } from "./files"
 import { pasteMode } from "./paste"
 
 describe("attachmentMime", () => {
@@ -24,6 +24,70 @@ describe("attachmentMime", () => {
   })
 })
 
+describe("pickAttachmentFiles", () => {
+  test("reads the current project directory for every native picker invocation", async () => {
+    const paths: string[] = []
+    const files: File[] = []
+    const file = new File(["hello"], "hello.txt", { type: "text/plain" })
+    let directory = "C:\\Projects\\LoremIpsum"
+    const picker = async (options?: { defaultPath?: string }, onFile?: (file: File) => Promise<unknown>) => {
+      paths.push(options?.defaultPath ?? "")
+      await onFile?.(file)
+    }
+
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    directory = "C:\\Projects\\DolorSit"
+    pickAttachmentFiles({
+      picker,
+      directory: () => directory,
+      fallback: () => undefined,
+      onFile: async (selected) => files.push(selected),
+      onError: () => undefined,
+    })
+    await Promise.resolve()
+    expect(files).toEqual([file, file])
+    expect(paths).toEqual(["C:\\Projects\\LoremIpsum", "C:\\Projects\\DolorSit"])
+  })
+
+  test("uses the browser file input when no native picker exists", async () => {
+    let fallback = 0
+    pickAttachmentFiles({
+      directory: () => "/projects/consectetur-adipiscing",
+      fallback: () => {
+        fallback += 1
+      },
+      onFile: async () => undefined,
+      onError: () => undefined,
+    })
+    expect(fallback).toBe(1)
+  })
+
+  test("reports native picker failures without rejecting", async () => {
+    const error = new Error("picker unavailable")
+    const errors: unknown[] = []
+    const handled = Promise.withResolvers<void>()
+    pickAttachmentFiles({
+      picker: async () => Promise.reject(error),
+      directory: () => "C:\\Projects\\LoremIpsum",
+      fallback: () => undefined,
+      onFile: async () => undefined,
+      onError: (cause) => {
+        errors.push(cause)
+        handled.resolve()
+      },
+    })
+    await handled.promise
+    expect(errors).toEqual([error])
+  })
+})
+
 describe("pasteMode", () => {
   test("uses native paste for short single-line text", () => {
     expect(pasteMode("hello world")).toBe("native")

packages/app/src/components/prompt-input/files.ts

@@ -2,6 +2,35 @@ import { ACCEPTED_FILE_TYPES, ACCEPTED_IMAGE_TYPES } from "@/constants/file-pick
 
 export { ACCEPTED_FILE_TYPES }
 
+type AttachmentPicker = (options: {
+  defaultPath?: string
+  multiple?: boolean
+  accept?: string[]
+}, onFile: (file: File) => Promise<unknown>) => Promise<void>
+
+export function pickAttachmentFiles(input: {
+  picker?: AttachmentPicker
+  directory: () => string
+  fallback: () => void
+  onFile: (file: File) => Promise<unknown>
+  onError: (error: unknown) => void
+}) {
+  if (!input.picker) {
+    input.fallback()
+    return
+  }
+  void input
+    .picker(
+      {
+        defaultPath: input.directory(),
+        multiple: true,
+        accept: ACCEPTED_FILE_TYPES,
+      },
+      input.onFile,
+    )
+    .catch(input.onError)
+}
+
 const IMAGE_MIMES = new Set(ACCEPTED_IMAGE_TYPES)
 const IMAGE_EXTS = new Map([
   ["gif", "image/gif"],