From cfa24f72932e64475819869f4a796d3b760f7625 Mon Sep 17 00:00:00 2001
From: Bil0000 <bilal.bakr.elsherif@gmail.com>
Date: Fri, 11 Sep 2026 14:30:19 +0300
Subject: [PATCH] fix(web): show platform file manager icons in Open menu

---
 apps/web/src/components/Icons.tsx             | 28 +++++++++++++++++++
 .../src/components/chat/OpenInPicker.test.ts  | 26 +++++++++++++++++
 apps/web/src/components/chat/OpenInPicker.tsx | 19 +++++++++----
 apps/web/src/editorLabels.test.ts             |  2 +-
 apps/web/src/lib/utils.test.ts                |  2 +-
 apps/web/src/lib/utils.ts                     |  2 +-
 6 files changed, 71 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/chat/OpenInPicker.test.ts

diff --git a/apps/web/src/components/Icons.tsx b/apps/web/src/components/Icons.tsx
index b13040152e18..99880a2512ad 100644
--- a/apps/web/src/components/Icons.tsx
+++ b/apps/web/src/components/Icons.tsx
@@ -2,6 +2,34 @@ import React, { type SVGProps, useId } from "react";
 import { cn } from "~/lib/utils";
 export type Icon = React.FC<SVGProps<SVGSVGElement>>;
 
+export const FinderIcon: Icon = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" {...props}>
+    <rect x="2" y="2" width="20" height="20" rx="4" fill="#36A9F5" />
+    <path
+      d="M13 2h5a4 4 0 0 1 4 4v12a4 4 0 0 1-4 4h-6c-1-4-1-7 0-10H9c0-4 2-8 4-10Z"
+      fill="#D9F1FF"
+    />
+    <path
+      d="M7 7v2m10-2v2M6 15c3 3 9 3 12 0"
+      stroke="#163A59"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const FileExplorerIcon: Icon = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" {...props}>
+    <path
+      d="M2 5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z"
+      fill="#D99A16"
+    />
+    <path d="M2 9h20v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2Z" fill="#FFCE45" />
+    <path d="M8 14h8v7H8Z" fill="#58B8E8" />
+    <path d="M10 16h4v2h-4Z" fill="#1879B9" />
+  </svg>
+);
+
 // Apple brand mark from Simple Icons (CC0).
 export const AppleIcon: Icon = (props) => (
   <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
diff --git a/apps/web/src/components/chat/OpenInPicker.test.ts b/apps/web/src/components/chat/OpenInPicker.test.ts
new file mode 100644
index 000000000000..32be49a9ba44
--- /dev/null
+++ b/apps/web/src/components/chat/OpenInPicker.test.ts
@@ -0,0 +1,26 @@
+import { FolderClosedIcon } from "lucide-react";
+import { describe, expect, it } from "vite-plus/test";
+
+import { FileExplorerIcon, FinderIcon } from "../Icons";
+import { resolveOpenInOptions } from "./OpenInPicker";
+
+describe("resolveOpenInOptions", () => {
+  it.each([
+    ["MacIntel", "Finder", FinderIcon],
+    ["Win32", "File Explorer", FileExplorerIcon],
+    ["Linux x86_64", "Files", FolderClosedIcon],
+  ] as const)("includes the file manager with its icon on %s", (platform, label, Icon) => {
+    expect(resolveOpenInOptions(platform, ["cursor", "vscode", "file-manager"])).toEqual([
+      expect.objectContaining({ value: "cursor", label: "Cursor" }),
+      expect.objectContaining({ value: "vscode", label: "VS Code" }),
+      expect.objectContaining({ value: "file-manager", label, Icon }),
+    ]);
+  });
+
+  it("omits the file manager when unavailable or using remote editors", () => {
+    expect(resolveOpenInOptions("MacIntel", ["vscode"])).toEqual([
+      expect.objectContaining({ value: "vscode" }),
+    ]);
+    expect(resolveOpenInOptions("MacIntel", [])).toEqual([]);
+  });
+});
diff --git a/apps/web/src/components/chat/OpenInPicker.tsx b/apps/web/src/components/chat/OpenInPicker.tsx
index 9f8e81bdba67..2b1f252ef045 100644
--- a/apps/web/src/components/chat/OpenInPicker.tsx
+++ b/apps/web/src/components/chat/OpenInPicker.tsx
@@ -22,6 +22,8 @@ import { Menu, MenuItem, MenuPopup, MenuShortcut, MenuTrigger } from "../ui/menu
 import {
   AntigravityIcon,
   CursorIcon,
+  FileExplorerIcon,
+  FinderIcon,
   Icon,
   KiroIcon,
   TraeIcon,
@@ -44,7 +46,7 @@ import {
   RustRoverIcon,
   WebStormIcon,
 } from "../JetBrainsIcons";
-import { cn } from "~/lib/utils";
+import { cn, isMacPlatform, isWindowsPlatform } from "~/lib/utils";
 import { shellEnvironment } from "~/state/shell";
 import { useAtomCommand } from "~/state/use-atom-command";
 
@@ -55,7 +57,10 @@ type OpenInOption = {
   kind: "brand" | "generic";
 };
 
-const resolveOptions = (platform: string, availableEditors: ReadonlyArray<EditorId>) => {
+export const resolveOpenInOptions = (
+  platform: string,
+  availableEditors: ReadonlyArray<EditorId>,
+) => {
   const baseOptions: ReadonlyArray<Omit<OpenInOption, "label">> = [
     {
       Icon: CursorIcon,
@@ -158,9 +163,13 @@ const resolveOptions = (platform: string, availableEditors: ReadonlyArray<Editor
       kind: "brand",
     },
     {
-      Icon: FolderClosedIcon,
+      Icon: isMacPlatform(platform)
+        ? FinderIcon
+        : isWindowsPlatform(platform)
+          ? FileExplorerIcon
+          : FolderClosedIcon,
       value: "file-manager",
-      kind: "generic",
+      kind: isMacPlatform(platform) || isWindowsPlatform(platform) ? "brand" : "generic",
     },
   ];
   const availableEditorSet = new Set(availableEditors);
@@ -198,7 +207,7 @@ export const OpenInPicker = memo(function OpenInPicker({
   const effectiveEditors = remote.mode === "local-exec" ? availableEditors : remoteCapableEditors;
   const [preferredEditor, setPreferredEditor] = usePreferredEditor(effectiveEditors);
   const options = useMemo(
-    () => resolveOptions(navigator.platform, effectiveEditors),
+    () => resolveOpenInOptions(navigator.platform, effectiveEditors),
     [effectiveEditors],
   );
   const primaryOption = options.find(({ value }) => value === preferredEditor) ?? null;
diff --git a/apps/web/src/editorLabels.test.ts b/apps/web/src/editorLabels.test.ts
index 42d61deca518..a0dceb1c77c0 100644
--- a/apps/web/src/editorLabels.test.ts
+++ b/apps/web/src/editorLabels.test.ts
@@ -10,7 +10,7 @@ describe("editorLabelForPlatform", () => {
 
   it.each([
     ["MacIntel", "Finder"],
-    ["Win32", "Explorer"],
+    ["Win32", "File Explorer"],
     ["Linux x86_64", "Files"],
   ])("uses the platform file-manager name on %s", (platform, label) => {
     expect(editorLabelForPlatform("file-manager", platform)).toBe(label);
diff --git a/apps/web/src/lib/utils.test.ts b/apps/web/src/lib/utils.test.ts
index bf7986dd48bc..a930856438a3 100644
--- a/apps/web/src/lib/utils.test.ts
+++ b/apps/web/src/lib/utils.test.ts
@@ -4,7 +4,7 @@ import { getLocalFileManagerName, isWindowsPlatform } from "./utils";
 describe("getLocalFileManagerName", () => {
   it.each([
     ["MacIntel", "Finder"],
-    ["Win32", "Explorer"],
+    ["Win32", "File Explorer"],
     ["Linux", "Files"],
   ])("uses the %s file manager name", (platform, expected) => {
     assert.strictEqual(getLocalFileManagerName(platform), expected);
diff --git a/apps/web/src/lib/utils.ts b/apps/web/src/lib/utils.ts
index f4d81dfa0e53..3445a06bbb62 100644
--- a/apps/web/src/lib/utils.ts
+++ b/apps/web/src/lib/utils.ts
@@ -25,7 +25,7 @@ export function getLocalFileManagerName(platform: string): string {
     return "Finder";
   }
   if (isWindowsPlatform(platform)) {
-    return "Explorer";
+    return "File Explorer";
   }
   return "Files";
 }